.san09-demo {
  margin: 0;
  padding: 18px clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #202124;
  color: #fff;
  border-bottom: 4px solid var(--yellow);
}
.san09-demo h2 { margin: 5px 0 4px; font-size: 20px; }
.san09-demo p { margin: 0; max-width: 760px; color: #d2d3d4; font-size: 14px; line-height: 1.4; }
.san09-badge { color: var(--yellow); font-size: 11px; font-weight: 900; letter-spacing: .09em; }
.san09-demo-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.san09-demo-actions a,.san09-demo-actions button { padding: 11px 15px; border:0; border-radius: 7px; background: var(--yellow); color: var(--ink); font: 900 13px Arial,sans-serif; text-decoration: none; white-space: nowrap; cursor:pointer; }
.san09-demo-actions button:disabled{opacity:.6;cursor:wait}
.san09-demo-actions .demo-secondary { background: #fff; }
.san09-demo-actions a:hover,.san09-demo-actions button:hover { filter: brightness(.94); }
.san09-demo p.is-error{color:#ffb7b7}
@media (max-width: 900px) {
  .san09-demo { align-items: flex-start; flex-direction: column; }
  .san09-demo-actions { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .san09-demo-actions { width: 100%; flex-direction: column; }
  .san09-demo-actions a { text-align: center; white-space: normal; }
}
.decor-zone-picker { margin: 0 0 10px; display: flex; gap: 6px; }
.decor-zone { border: 1px solid #cfcfcd; border-radius: 999px; background: #fff; padding: 8px 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.decor-zone.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.decor-select { width: 100%; min-height: 44px; padding: 9px 38px 9px 12px; border: 1px solid #cfcfcd; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.decor-select:focus { outline: 3px solid #1673d333; border-color: #1673d3; }
.decor-select:disabled { background: #f2f2f0; color: #777; cursor: not-allowed; }
.decor-picker { display: block; margin: 8px 0; padding: 9px 11px; background: #fafafa; }
.color-cells-empty { color: #777; font-size: 12px; }
.color-cells-panel { display: grid; gap: 7px; }
.color-cells-panel[hidden],.color-cells-empty[hidden] { display: none !important; }
.color-cells-row { display: grid !important; grid-template-columns: 82px minmax(0,1fr); align-items: center; gap: 7px !important; }
.color-cells-row > span { font-size: 11px; font-weight: 800; }
.color-cells { display: flex !important; flex-wrap: nowrap !important; gap: 5px !important; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; }
.color-cell { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 31px; padding: 4px 7px; border: 1px solid #d2d2cf; border-radius: 7px; background: #fff; color: var(--ink); cursor: pointer; }
.color-cell i { width: 20px; height: 20px; flex: 0 0 auto; border: 1px solid #9998; border-radius: 5px; background: var(--swatch); box-shadow: inset 0 0 0 1px #fff5; }
.color-cell[data-decor="sonoma"] i { background: url('assets/decors/3025.jpg') center/cover !important; }
.color-cell[data-decor="white"] i { background: url('assets/decors/0101.jpg') center/cover !important; }
.color-cell[data-decor="beech"] i { background: url('assets/decors/0381.jpg') center/cover !important; }
.color-cell[data-decor="concrete"] i { background: url('assets/decors/k350.jpg') center/cover !important; }
.color-cell[data-decor="glossRed"] i { background: url('assets/decors/gloss-red.jpg') center/cover !important; }
.color-cell[data-decor="glossPistachio"] i { background: url('assets/decors/gloss-pistachio.webp') center/cover !important; }
.color-cell b { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.color-cell:hover { border-color: #1673d3; }
.color-cell.active { border-color: #1673d3; box-shadow: 0 0 0 2px #1673d326; color: #0f5fac; }
.decor-zone-picker { margin: 0; flex-wrap: nowrap !important; gap: 4px !important; }
.decor-zone { padding: 6px 9px; border-radius: 7px; font-size: 12px; white-space: nowrap; }
.decor-zone.active { border-color: #1673d3; background: #eef6ff; color: #0f5fac; }
.decor-select { min-height: 34px; padding: 6px 32px 6px 10px; font-size: 12px; }
@media (max-width: 760px) {
  .series-picker,.purpose-picker,.size-picker { grid-template-columns: 1fr; gap: 5px; }
  .color-cells-row { grid-template-columns: 1fr; gap: 4px !important; }
}
.product[data-decor="graphite"] img,.visual-module[data-decor="graphite"] img,.selected-row[data-decor="graphite"] img{filter:brightness(.72) contrast(1.18)}
.product[data-decor="sonoma"] img,.visual-module[data-decor="sonoma"] img,.selected-row[data-decor="sonoma"] img{filter:sepia(.82) saturate(.78) hue-rotate(350deg) brightness(1.05) contrast(.92) drop-shadow(2px 4px 3px #0002)}
.product[data-decor="sonoma"] .product-scheme::after { content:""; position:absolute; z-index:2; left:1px; right:23px; top:7px; bottom:21px; background:url('assets/decors/3025.jpg') center/cover; mix-blend-mode:multiply; opacity:.7; pointer-events:none; }
.visual-module[data-decor="sonoma"]::before { content:""; position:absolute; z-index:1; inset:5px 1px 1px; background:url('assets/decors/3025.jpg') center/var(--decor-tile-width,200%) var(--decor-tile-height,220%) repeat; mix-blend-mode:multiply; opacity:.72; pointer-events:none; }
.visual-module[data-decor="sonoma"] img { position:relative; z-index:2; mix-blend-mode:multiply; }
.product[data-decor="white"] .product-scheme::after { content:""; position:absolute; z-index:2; left:1px; right:23px; top:7px; bottom:21px; background:url('assets/decors/0101.jpg') center/cover; mix-blend-mode:multiply; opacity:.68; pointer-events:none; }
.visual-module[data-decor="white"]::before { content:""; position:absolute; z-index:1; inset:5px 1px 1px; background:url('assets/decors/0101.jpg') center/var(--decor-tile-width,200%) var(--decor-tile-height,220%) repeat; mix-blend-mode:multiply; opacity:.68; pointer-events:none; }
.visual-module[data-decor="white"] img { position:relative; z-index:2; mix-blend-mode:multiply; }
.product[data-decor="beech"] .product-scheme::after { content:""; position:absolute; z-index:2; left:1px; right:23px; top:7px; bottom:21px; background:url('assets/decors/0381.jpg') center/cover; mix-blend-mode:multiply; opacity:.78; pointer-events:none; }
.visual-module[data-decor="beech"]::before { content:""; position:absolute; z-index:1; inset:5px 1px 1px; background:url('assets/decors/0381.jpg') center/var(--decor-tile-width,200%) var(--decor-tile-height,220%) repeat; mix-blend-mode:multiply; opacity:.78; pointer-events:none; }
.visual-module[data-decor="beech"] img { position:relative; z-index:2; mix-blend-mode:multiply; }
.product[data-decor="concrete"] .product-scheme::after { content:""; position:absolute; z-index:2; left:1px; right:23px; top:7px; bottom:21px; background:url('assets/decors/k350.jpg') center/cover; mix-blend-mode:multiply; opacity:.76; pointer-events:none; }
.product .product-scheme::after { content:none !important; display:none !important; }
.product .product-scheme::before { content:none !important; display:none !important; }
.visual-module[data-decor="concrete"]::before { content:""; position:absolute; z-index:1; inset:5px 1px 1px; background:url('assets/decors/k350.jpg') center/var(--decor-tile-width,200%) var(--decor-tile-height,220%) repeat; mix-blend-mode:multiply; opacity:.76; pointer-events:none; }
.visual-module[data-decor="concrete"] img { position:relative; z-index:2; mix-blend-mode:multiply; }
.visual-module[data-series="Стиль"]::before { transform:rotate(90deg) scaleX(var(--decor-rotate-x,1)) scaleY(var(--decor-rotate-y,1)); transform-origin:center; }
.product[data-decor="oak"] img,.visual-module[data-decor="oak"] img,.selected-row[data-decor="oak"] img{filter:grayscale(.18) saturate(1.12) contrast(1.12) brightness(.86)}
.product[data-decor="walnut"] img,.visual-module[data-decor="walnut"] img,.selected-row[data-decor="walnut"] img{filter:sepia(.3) saturate(1.22) contrast(1.08) brightness(.88)}
.product[data-decor="bodega"] img,.visual-module[data-decor="bodega"] img,.selected-row[data-decor="bodega"] img{filter:sepia(.12) saturate(.35) brightness(1.22)}
.product[data-decor="wenge"] img,.visual-module[data-decor="wenge"] img,.selected-row[data-decor="wenge"] img{filter:sepia(.55) saturate(1.08) brightness(.55) contrast(1.18)}
.product[data-decor="marble"] img,.visual-module[data-decor="marble"] img,.selected-row[data-decor="marble"] img{filter:grayscale(.92) brightness(1.18) contrast(.9)}
.product[data-decor="shimoLight"] img,.visual-module[data-decor="shimoLight"] img,.selected-row[data-decor="shimoLight"] img{filter:sepia(.56) saturate(.62) brightness(1.17)}
.product[data-decor="shimoDark"] img,.visual-module[data-decor="shimoDark"] img,.selected-row[data-decor="shimoDark"] img{filter:sepia(.35) saturate(.62) brightness(.8) contrast(1.05)}
.product[data-decor="white"] img,.visual-module[data-decor="white"] img,.selected-row[data-decor="white"] img{filter:grayscale(1) brightness(1.3) contrast(.82)}
.product[data-decor="alder"] img,.visual-module[data-decor="alder"] img,.selected-row[data-decor="alder"] img{filter:sepia(.55) saturate(.72) brightness(1.04)}
.product[data-decor="beech"] img,.visual-module[data-decor="beech"] img,.selected-row[data-decor="beech"] img{filter:sepia(.48) saturate(.62) brightness(1.13)}
.product[data-decor="glossWhite"] img,.visual-module[data-decor="glossWhite"] img,.selected-row[data-decor="glossWhite"] img{filter:grayscale(1) brightness(1.35) contrast(.86)}
.product[data-decor="glossRed"] img,.visual-module[data-decor="glossRed"] img,.selected-row[data-decor="glossRed"] img{filter:sepia(.25) saturate(4) hue-rotate(315deg) brightness(.82)}
.product[data-decor="glossPistachio"] img,.visual-module[data-decor="glossPistachio"] img,.selected-row[data-decor="glossPistachio"] img{filter:sepia(.25) saturate(1.2) hue-rotate(55deg) brightness(1.08)}
.product[data-decor="glossVanilla"] img,.visual-module[data-decor="glossVanilla"] img,.selected-row[data-decor="glossVanilla"] img{filter:sepia(.3) saturate(.45) brightness(1.22)}
.product[data-decor="glossSteel"] img,.visual-module[data-decor="glossSteel"] img,.selected-row[data-decor="glossSteel"] img{filter:grayscale(1) brightness(.92) contrast(1.1)}
.product[data-decor="concrete"] img,.visual-module[data-decor="concrete"] img,.selected-row[data-decor="concrete"] img{filter:grayscale(1) brightness(.82) contrast(1.18)}
.product[data-decor="craftOak"] img,.visual-module[data-decor="craftOak"] img,.selected-row[data-decor="craftOak"] img{filter:sepia(.55) saturate(1.05) brightness(.9)}
.product-scheme { position: relative; padding: 1px 23px 21px 1px; }
.product,.product-scheme { background-color:#fff !important; background-image:none !important; }
.product-scheme img { background-color:transparent !important; background-image:none !important; }
.product[data-corpus="white"] .product-scheme,.visual-module[data-corpus="white"] { background-color:#fff !important; }
.product[data-corpus="concrete"] .product-scheme { background:#fff !important; }
.visual-module[data-corpus="concrete"] { background-color:#eeeeec !important; background-image:url('assets/decors/k350.jpg'); background-position:center; background-size:var(--decor-tile-width,200%) var(--decor-tile-height,220%); background-repeat:repeat; }
.product-scheme img { display: block; height: 112px; padding: 3px; }
.product-scheme.is-photo .product-card-image { filter:none!important; mix-blend-mode:normal!important; object-fit:contain; }
.product-scheme.is-photo .product-card-image { cursor:zoom-in; }
.product-scheme.is-photo .product-card-image:focus-visible { outline:3px solid #1673d3; outline-offset:2px; border-radius:6px; }
.product-scheme.is-photo .sink-card-strip { display:none!important; }
.photo-missing { position:absolute; left:50%; bottom:27px; z-index:8; transform:translateX(-50%); padding:4px 7px; border-radius:5px; background:#ffffffeb; color:#777; font-size:11px; font-weight:800; white-space:nowrap; }
.product-card-view-switch { position:relative; z-index:2; display:inline-grid; grid-template-columns:auto auto; align-self:flex-end; width:auto; margin:5px 0 1px; padding:1px; border:1px solid #d9dde2; border-radius:6px; background:#f7f8f9; }
.product-card-view-switch button { min-width:52px; min-height:26px; padding:3px 7px; border:0; border-radius:5px; background:transparent; color:#6a7077; font-size:12px; font-weight:700; cursor:pointer; }
.product-card-view-switch button:hover { background:#fff; color:#315c86; }
.product-card-view-switch button.active { background:#fff; color:#0f5fac; box-shadow:0 1px 3px #00000012; }
.dim-width,.dim-height { position: absolute; display: flex; align-items: center; justify-content: center; gap: 4px; color: #303033; font-size: 12px; font-weight: 900; pointer-events: none; }
.dim-width { left: 4px; right: 25px; bottom: 2px; }
.dim-height { top: 3px; right: 1px; bottom: 23px; flex-direction: column; writing-mode: vertical-rl; }
.dim-width i { height: 1px; flex: 1; min-width: 5px; background: #777; }
.dim-height i { width: 1px; flex: 1; min-height: 5px; background: #777; }
.scene-dimensions { position:absolute; top:1px; bottom:auto!important; left:50%; z-index:7; transform:translate(-50%,-55%); min-width:max-content; padding:1px 4px; border:1px solid rgba(52,103,145,.55); border-radius:4px; background:rgba(255,255,255,.9); box-shadow:0 1px 2px rgba(0,0,0,.08); color:#273746; font-size:9px!important; font-weight:800; line-height:1.1; white-space:nowrap; opacity:.84; pointer-events:none; }
.visual-module.active .scene-dimensions { border-color:#1576d3; background:#fff; color:#13233d; opacity:1; }
.countertop-picker { margin: 8px 0 14px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fafafa; }
.countertop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: 12px; }
.countertop-head span { color: #777; font-size: 11px; }
.countertop-options { display:flex; flex-wrap:nowrap; width:100%; gap:5px; overflow-x:auto; padding:2px 2px 4px; scrollbar-width:thin; }
.countertop-option { flex:1 0 120px; display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:32px; padding:4px 7px; border:1px solid #d2d2cf; border-radius:7px; background:#fff; color:var(--ink); cursor:pointer; }
.countertop-option i { width: 23px; height: 21px; flex: 0 0 auto; border: 1px solid #9998; border-radius: 4px; }
.countertop-option span { max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:800; }
.countertop-option:hover { border-color: #1673d3; }
.countertop-option.active { border-color: #1673d3; box-shadow: 0 0 0 2px #1673d326; color: #0f5fac; }
.countertop-extras { display: flex; align-items: center; gap: 5px; margin-top: 7px; padding-top: 7px; border-top: 1px solid #e1e1df; font-size: 11px; }
.countertop-size { display:inline-flex; align-items:center; gap:4px; margin-right:4px; font-weight:700; white-space:nowrap; }
.countertop-size input { width:64px; min-height:29px; padding:3px 5px; border:1px solid #d2d2cf; border-radius:6px; font:inherit; font-weight:800; }
.countertop-size:has(input:disabled) { color:#aaa; }
.countertop-size input:disabled { background:#eee; color:#aaa; cursor:not-allowed; }
.countertop-extras > span { margin-right: 2px; font-weight: 800; }
.thickness-option { min-height: 29px; padding: 4px 8px; border: 1px solid #d2d2cf; border-radius: 6px; background: #fff; font-size: 11px; font-weight: 800; cursor: pointer; }
.thickness-option.active { border-color: #1673d3; background: #eef6ff; color: #0f5fac; }
.thickness-option:disabled { background: #eee; color: #aaa; cursor: not-allowed; }
.wall-panel-option { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; font-weight: 700; white-space: nowrap; }
.wall-panel-option input { accent-color: #1673d3; }
.wall-panel-option:has(input:disabled) { color: #aaa; }
.wall-tab:disabled { opacity: .45; cursor: not-allowed; }
.scene-apron { position:absolute; z-index:1; pointer-events:none; border-top:1px solid #7776; border-bottom:1px solid #7776; }
.scene-apron[hidden] { display:none!important; }
.top-carrara { background: linear-gradient(145deg,#f4f4f1 0 38%,#bfc1c0 39% 41%,#ecece9 42% 68%,#c9cac8 69% 71%,#fafaf7 72%); }
.top-modena { background: repeating-linear-gradient(110deg,#bda992 0 5px,#9e8a75 5px 7px,#c9b6a0 7px 12px); }
.top-concrete { background: radial-gradient(circle at 25% 30%,#aaa 0 1px,transparent 2px),linear-gradient(135deg,#797a79,#a1a19d); }
.top-italian-marble { background: linear-gradient(150deg,#ddd7cd 0 35%,#968e83 36% 38%,#e8e1d6 39% 66%,#b5aa9d 67% 69%,#d3c9bc 70%); }
.top-royal-opal { background: linear-gradient(135deg,#eee5cf 0 42%,#c7a86e 43% 45%,#f7f0df 46% 72%,#d7be8d 73% 75%,#e9ddc2 76%); }
.top-wotan-oak { background: repeating-linear-gradient(95deg,#9a6235 0 3px,#bd8450 3px 7px,#80502d 7px 10px); }
.top-black-tunis { background: linear-gradient(145deg,#171719 0 38%,#6d6a67 39% 40%,#29292b 41% 72%,#8c8175 73% 74%,#111113 75%); }
.top-none { position:relative; background:#fff; }
.top-none::after { content:""; position:absolute; left:2px; right:2px; top:50%; height:2px; background:#bf3030; transform:rotate(-35deg); transform-origin:center; }
.product[data-countertop="carrara"] .product-scheme::before,.visual-module[data-countertop="carrara"]::after { background:#eeeDEA; }
.product[data-countertop="modena"] .product-scheme::before,.visual-module[data-countertop="modena"]::after { background:#b8a58f; }
.product[data-countertop="concrete"] .product-scheme::before,.visual-module[data-countertop="concrete"]::after { background:#858582; }
.product[data-countertop="italianMarble"] .product-scheme::before,.visual-module[data-countertop="italianMarble"]::after { background:#d8d0c4; }
.product[data-countertop="royalOpal"] .product-scheme::before,.visual-module[data-countertop="royalOpal"]::after { background:#e7dcc1; }
.product[data-countertop="wotanOak"] .product-scheme::before,.visual-module[data-countertop="wotanOak"]::after { background:#a9713d; }
.product[data-countertop="blackTunis"] .product-scheme::before,.visual-module[data-countertop="blackTunis"]::after { background:#292929; }
@media (max-width: 520px) { .countertop-extras { flex-wrap: wrap; } .wall-panel-option { margin-left: 0; } }
.top-carrara,.product[data-countertop="carrara"] .product-scheme::before,.visual-module[data-countertop="carrara"]::after { background-image:url('assets/countertops/carrara.jpg'); background-size:cover; }
.top-modena,.product[data-countertop="modena"] .product-scheme::before,.visual-module[data-countertop="modena"]::after { background-image:url('assets/countertops/modena.jpg'); background-size:cover; }
.top-concrete,.product[data-countertop="concrete"] .product-scheme::before,.visual-module[data-countertop="concrete"]::after { background-image:url('assets/countertops/concrete.jpg'); background-size:cover; }
.top-italian-marble,.product[data-countertop="italianMarble"] .product-scheme::before,.visual-module[data-countertop="italianMarble"]::after { background-image:url('assets/countertops/italian-marble.jpg'); background-size:cover; }
.top-royal-opal,.product[data-countertop="royalOpal"] .product-scheme::before,.visual-module[data-countertop="royalOpal"]::after { background-image:url('assets/countertops/royal-opal.jpg'); background-size:cover; }
.top-wotan-oak,.product[data-countertop="wotanOak"] .product-scheme::before,.visual-module[data-countertop="wotanOak"]::after { background-image:url('assets/countertops/wotan-oak.jpg'); background-size:cover; }
.top-black-tunis,.product[data-countertop="blackTunis"] .product-scheme::before,.visual-module[data-countertop="blackTunis"]::after { background-image:url('assets/countertops/black-tunis.jpg'); background-size:cover; }
.visual-module[data-countertop]::after { background-size:120px 60px !important; background-repeat:repeat !important; background-position:center !important; }
.product[data-type="upper"] .product-scheme::before,
.product[data-type="upper"] .product-scheme::after,
.visual-module[data-type="upper"]::after,
.visual-module[data-lane="upper1"]::after,
.visual-module[data-lane="upper2"]::after {
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  border:0!important;
  background:none!important;
  background-image:none!important;
}
.visual-module[data-type="upper"] > img {
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:fill;
  object-position:center;
  clip-path:none;
  transform:none;
}

/* No added countertop strip above ordinary modules. */
.product[data-type="lower"]:not([data-purpose="sink"]) .product-scheme::before,
.visual-module[data-type="lower"]:not([data-purpose="sink"])::after {
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  border:0!important;
  background:none!important;
  background-image:none!important;
}

/* A surface-mounted sink occupies the top 3 cm of an 85 cm base unit. */
.product[data-purpose="sink"] .sink-card-strip {
  display:block;
  position:absolute;
  z-index:7;
  top:4px;
  left:calc(50% - 11px);
  width:var(--sink-strip-width);
  height:5px;
  transform:translateX(-50%);
  border:0;
  background:linear-gradient(180deg,#f7f8f8 0%,#d9dde0 55%,#bdc3c7 100%);
  box-shadow:inset 0 1px #fff;
  pointer-events:none;
}
.visual-module[data-purpose="sink"]::after {
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:7!important;
  top:0!important;
  right:0!important;
  bottom:auto!important;
  left:0!important;
  width:100%!important;
  height:3.53%!important;
  min-height:3px;
  border:0!important;
  background:linear-gradient(180deg,#f7f8f8 0%,#d9dde0 55%,#bdc3c7 100%)!important;
  background-image:linear-gradient(180deg,#f7f8f8 0%,#d9dde0 55%,#bdc3c7 100%)!important;
  box-shadow:inset 0 1px #fff;
  opacity:1!important;
  pointer-events:none;
}

/* Vertical constructor flow: one shared scheme/3D stage, then filters and modules. */
main { max-width:none; }
.workspace { display:flex; flex-direction:column; min-height:0; width:100%; }
.build-panel { order:2; width:100%; padding:28px clamp(20px,4vw,64px) 34px; border-bottom:1px solid var(--line); background:#fafafa; }
.build-panel > .setup { margin:20px 0 0; padding:18px 0; grid-template-columns:minmax(180px,1fr) auto; gap:16px 24px; border-bottom:1px solid var(--line); background:transparent; }
.build-panel > .setup h1 { max-width:720px; margin:0; font-size:22px; }
.build-panel > .setup .shape-picker { grid-column:1 / -1; align-items:center; margin:0; }
.kitchen-shape-label { margin-right:6px; font-size:14px; font-weight:800; }
.shape-select { width:min(100%,260px); min-height:42px; padding:8px 36px 8px 12px; border:2px solid #1673d3; border-radius:8px; background:#fff; color:#0f5fac; font:700 14px Arial,sans-serif; cursor:pointer; }
.build-panel .scene { height:clamp(580px,68vh,760px); width:100%; }
.workspace-banner { order:1; width:100%; }
.catalog-panel { order:3; width:100%; padding:30px clamp(20px,4vw,64px) 42px; border-right:0; border-bottom:1px solid var(--line); background:#fff; }
.catalog-panel .catalog { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
@media (max-width:900px) {
  .build-panel > .setup { grid-template-columns:1fr; gap:18px; }
  .catalog-panel .catalog { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .build-panel .scene { height:540px; }
}
@media (max-width:760px) {
  .catalog-panel .catalog { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .build-panel .scene { height:460px; }
}
@media (max-width:440px) {
  .build-panel,.catalog-panel { padding-left:14px; padding-right:14px; }
  .build-panel .scene { height:410px; }
}

/* Compact filter board above the product grid. */
.catalog-panel { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:12px; row-gap:10px; align-items:start; }
.catalog-panel > .section-head,.catalog-panel > .filters,.catalog-panel > .catalog { grid-column:1 / -1; }
.catalog-panel .series-picker,.catalog-panel .purpose-picker,.catalog-panel .size-picker { grid-column:span 4; margin:0; grid-template-columns:72px minmax(0,1fr); }
.catalog-panel .facade-picker { grid-column:1 / -1; margin:0; min-height:100%; }
.catalog-panel .facade-picker > span { margin-bottom:7px; }
.catalog-panel .facade-picker .color-cells { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); width:100%; gap:9px !important; overflow:visible; padding:2px; }
.catalog-panel .facade-picker .color-cell { width:100%; min-width:0; }
.catalog-panel .countertop-picker { grid-column:1 / -1; margin:0; min-height:100%; }
.catalog-panel > .filters { margin:0 0 2px; gap:5px; }
.catalog-panel > .filters .filter { padding:7px 12px; font-size:12px; }
.catalog-panel .catalog-select { min-height:34px; }
.catalog-start-hint { grid-column:1 / -1; display:grid; place-items:center; gap:6px; min-height:190px; padding:28px; border:2px dashed #c9d6e3; border-radius:12px; background:#f8fbff; color:#5e6b78; text-align:center; }
.catalog-start-hint b { color:#202124; font-size:18px; }
.catalog-start-hint span { font-size:14px; line-height:1.4; }
.catalog-panel .color-cells-row { grid-template-columns:72px minmax(0,1fr); }
.scene::after { content:""; position:absolute; left:var(--wall-left,34px); bottom:0; width:var(--wall-width,calc(100% - 34px)); height:var(--wall-height,100%); z-index:0; border:2px solid #a9adb1; background:#fff8; box-shadow:0 4px 18px #00000012; pointer-events:none; }
@media (max-width:700px) {
  .catalog-panel .series-picker,.catalog-panel .purpose-picker,.catalog-panel .size-picker { grid-column:span 6; }
  .catalog-panel .facade-picker { grid-column:1 / -1; }
  .catalog-panel .countertop-picker { grid-column:1 / -1; }
}
@media (max-width:520px) {
  .catalog-panel .series-picker,.catalog-panel .purpose-picker,.catalog-panel .size-picker { grid-column:1 / -1; grid-template-columns:76px minmax(0,1fr); }
}

/* Make every operation and choice easy to see across the constructor. */
button,.demo-secondary,.catalog-select { font-weight:800; }
button { transition:background-color .15s,border-color .15s,box-shadow .15s,transform .15s; }
button:not(:disabled):active,.demo-secondary:active { transform:translateY(1px); }
button:focus-visible,.demo-secondary:focus-visible,.catalog-select:focus-visible { outline:3px solid #1673d34d; outline-offset:2px; }
.shape-picker,.wall-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.wall-tab { min-height:40px; padding:9px 14px; border:2px solid #b9bec4; border-radius:8px; background:#fff; color:#202124; font-size:14px; font-weight:900; cursor:pointer; box-shadow:0 2px 5px #00000012; }
.wall-tab:hover { border-color:#1673d3; background:#f3f8ff; }
.wall-tab.active { border-color:#1673d3; background:#1673d3; color:#fff; box-shadow:0 3px 9px #1673d33d; }
.wall-tab:disabled { border-color:#d9d9d7; background:#f1f1ef; color:#929596; box-shadow:none; opacity:1; }
.product .add,.add-row,.primary,#syncCartBtn { border:2px solid #d2a500; box-shadow:0 3px 8px #c99f0029; font-weight:900; }
.product .add:hover,.add-row:hover,.primary:hover,#syncCartBtn:hover { box-shadow:0 4px 11px #c99f0042; }
.ghost,.move,.switch-wall,.remove,.dialog-close { border-width:2px; font-weight:900; }
.move,.switch-wall,.remove { min-width:32px; min-height:32px; background:#fff; box-shadow:0 2px 5px #00000012; }
.move:hover,.switch-wall:hover { border-color:#1673d3; background:#eef6ff; color:#0f5fac; }
.remove:hover,.dialog-close:hover { border-color:#bf3030; background:#fff0ee; color:#a52323; }
.san09-demo-actions a,.san09-demo-actions button { border:2px solid #d2a500; box-shadow:0 3px 8px #00000018; font-weight:900; }
.san09-demo-actions .demo-secondary { border-color:#1673d3; color:#0f5fac; }
.san09-demo-actions .demo-danger { border-color:#c33b32; background:#fff; color:#a52323; }
.san09-demo-actions .demo-danger:hover { border-color:#a52323; background:#fff0ee; box-shadow:0 4px 11px #bf30302b; }
.san09-demo-actions .demo-danger:disabled { border-color:#d6c4c2; background:#f5efee; color:#9b8481; box-shadow:none; cursor:not-allowed; }
.filter,.series-filter,.purpose-filter,.color-cell,.countertop-option,.thickness-option { border-width:2px; font-weight:800; }
.product .meta .product-code-link {
  color:#0f5fac;
  font-weight:900;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:2px;
}
.product .meta .product-code-link:hover { color:#083f72; }
.product .meta .product-code-link:focus-visible { outline:3px solid #1673d34d; outline-offset:2px; border-radius:3px; }
.catalog-panel .series-picker,.catalog-panel .purpose-picker,.catalog-panel .size-picker { grid-template-columns:104px minmax(0,1fr); }
.catalog-panel .series-picker label,.catalog-panel .purpose-picker label,.catalog-panel .size-picker label { display:flex; align-items:center; min-height:42px; padding:8px 10px; border:2px solid #b8d4f0; border-radius:8px; background:#eef6ff; color:#0f5fac; font-size:14px; font-weight:900; line-height:1.15; box-shadow:0 2px 6px #1673d31a; }
.catalog-panel .series-picker:focus-within label,.catalog-panel .purpose-picker:focus-within label,.catalog-panel .size-picker:focus-within label { border-color:#1673d3; background:#dcecff; color:#0a4f91; }
.catalog-panel .catalog-select { min-height:42px; font-size:14px; border-width:2px; }
@media (max-width:520px) {
  .catalog-panel .series-picker,.catalog-panel .purpose-picker,.catalog-panel .size-picker { grid-template-columns:104px minmax(0,1fr); }
}

/* The schematic plan and the 3D room share one stage. */
.planner-view-head { align-items:center; }
.planner-view-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.planner-view-actions > #itemCount { color:var(--muted); font-size:13px; white-space:nowrap; }
.move-tip { margin:10px 0 12px; padding:10px 12px; border:1px solid #b8d4f0; border-radius:9px; background:#eef6ff; color:#27445f; font-size:14px; line-height:1.4; }
.move-tip strong { color:#0f5fac; }
.planner-auto-arrange-button { min-height:40px; padding:8px 14px; border:2px solid #1673d3; border-radius:9px; background:#eef6ff; color:#0f5fac; font-size:14px; font-weight:900; cursor:pointer; box-shadow:0 2px 8px #1673d31f; }
.planner-auto-arrange-button:hover:not(:disabled) { background:#1673d3; color:#fff; }
.planner-auto-arrange-button:disabled { border-color:#ccd5dd; background:#f2f4f6; color:#8b969f; box-shadow:none; cursor:not-allowed; }
.planner-view-switch { display:inline-grid; grid-template-columns:1fr 1fr; padding:3px; border:2px solid #1673d3; border-radius:10px; background:#eaf3fc; box-shadow:0 2px 8px #1673d31f; }
.planner-view-switch button { min-width:78px; min-height:38px; padding:7px 14px; border:0; border-radius:6px; background:transparent; color:#0f5fac; font-size:14px; font-weight:900; cursor:pointer; }
.planner-view-switch button:hover { background:#fff9; }
.planner-view-switch button.active { background:#1673d3; color:#fff; box-shadow:0 2px 7px #0f5fac38; }
.wall-tabs .planner-view-switch { margin-left:auto; }
.planner-view-utilities { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.planner-save-button,.planner-open-button,.planner-print-button,.planner-undo-button,.planner-clear-button {
  min-height:48px;
  padding:9px 16px;
  border-radius:10px;
  background:#fff;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
}
.planner-save-button,.planner-open-button {
  align-self:center;
  min-height:40px;
  padding:7px 12px;
  border-radius:9px;
  font-size:13px;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.planner-save-button { border:2px solid #d2a500; background:#f8c400; color:#202124; box-shadow:0 1px 5px #c99f0030; }
.planner-save-button:hover { background:#ffd323; border-color:#b99000; box-shadow:0 3px 8px #c99f0038; transform:translateY(-1px); }
.planner-open-button { border:2px solid #1673d3; color:#0f5fac; box-shadow:0 1px 5px #1673d326; }
.planner-open-button:hover { background:#eef6ff; border-color:#0f5fac; box-shadow:0 3px 8px #1673d32e; transform:translateY(-1px); }
.planner-save-button:active,.planner-open-button:active { transform:translateY(0); }
.planner-save-button:disabled,.planner-open-button:disabled { opacity:.62; cursor:wait; }
.planner-print-button { border:2px solid #1673d3; color:#0f5fac; box-shadow:0 2px 8px #1673d31f; }
.planner-print-button:hover { background:#eef6ff; border-color:#0f5fac; }
.planner-undo-button { border:2px solid #1673d3; color:#0f5fac; box-shadow:0 2px 8px #1673d31f; }
.planner-undo-button:not(:disabled):hover { background:#eef6ff; border-color:#0f5fac; }
.planner-clear-button { border:2px solid #c33b32; color:#a52323; box-shadow:0 2px 8px #bf30301f; }
.planner-clear-button:hover { background:#fff0ee; border-color:#a52323; }
.planner-clear-button:disabled { border-color:#d6c4c2; background:#f5efee; color:#9b8481; box-shadow:none; cursor:not-allowed; }
.planner-view-stage { width:100%; margin-top:10px; }
.planner-view-panel[hidden],.planner-iso-panel[hidden] { display:none!important; }
.planner-view-stage .wall { margin-top:0; }
.planner-iso-panel { width:100%; margin:0; border:1px solid var(--line); border-radius:12px; background:#fff; }
.planner-iso-panel > .iso-head { padding:14px 16px; background:#fff; }
.planner-iso-panel > canvas { height:clamp(580px,68vh,760px); background:#fff; }
body[data-planner-view="3d"] .move-tip { color:#4f5963; }

.catalog-head-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.catalog-head-actions > #resultCount { color:var(--muted); font-size:13px; white-space:nowrap; }
.catalog-view-switch { display:inline-grid; grid-template-columns:1fr 1fr; padding:3px; border:2px solid #1673d3; border-radius:10px; background:#eaf3fc; box-shadow:0 2px 8px #1673d31f; }
.catalog-view-switch button { min-width:78px; min-height:38px; padding:7px 14px; border:0; border-radius:6px; background:transparent; color:#0f5fac; font-size:14px; font-weight:900; cursor:pointer; }
.catalog-view-switch button:hover { background:#fff9; }
.catalog-view-switch button.active { background:#1673d3; color:#fff; box-shadow:0 2px 7px #0f5fac38; }

/* Equal, scan-friendly cells for facade colours and countertops. */
.catalog-panel .countertop-picker .countertop-options {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  align-items:stretch;
  width:100%;
  gap:8px;
  overflow:visible;
  padding:2px;
}
.catalog-panel .facade-picker .color-cell,
.catalog-panel .countertop-picker .countertop-option {
  position:relative;
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  align-items:center;
  justify-content:stretch;
  gap:8px;
  width:100%;
  height:68px;
  min-height:68px;
  padding:9px 34px 9px 10px;
  border:2px solid #cfd5db;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  box-sizing:border-box;
  text-align:left;
  box-shadow:0 1px 3px #18283a0d;
}
.catalog-panel .facade-picker .color-cell i,
.catalog-panel .countertop-picker .countertop-option i {
  width:40px;
  height:40px;
  border:1px solid #81899180;
  border-radius:7px;
  box-shadow:inset 0 0 0 1px #ffffff80;
}
.catalog-panel .facade-picker .color-cell b,
.catalog-panel .countertop-picker .countertop-option span {
  display:grid;
  gap:3px;
  max-width:none;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  font-size:13px;
  font-weight:800;
  line-height:1.18;
}
.catalog-panel .facade-picker .color-cell b > span,
.catalog-panel .countertop-picker .countertop-option span > b { font-size:13px; line-height:1.16; }
.catalog-panel .facade-picker .color-cell small,
.catalog-panel .countertop-picker .countertop-option small { color:#68727c; font-size:10px; font-weight:700; line-height:1.15; }
.catalog-panel .facade-picker .color-cell:hover,
.catalog-panel .countertop-picker .countertop-option:hover {
  border-color:#1673d3;
  background:#f7fbff;
  box-shadow:0 2px 7px #1673d31f;
}
.catalog-panel .facade-picker .color-cell.active,
.catalog-panel .countertop-picker .countertop-option.active {
  border-color:#1673d3;
  background:#eef6ff;
  color:#0a579e;
  box-shadow:0 0 0 2px #1673d329,0 2px 8px #1673d31f;
}
.catalog-panel .facade-picker .color-cell.active::after,
.catalog-panel .countertop-picker .countertop-option.active::after {
  content:"\2713";
  position:absolute;
  top:7px;
  right:8px;
  display:grid;
  place-items:center;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#1673d3;
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:1;
}
.catalog-panel .countertop-picker .countertop-head {
  align-items:center;
  min-height:30px;
  margin-bottom:6px;
}
.catalog-panel .countertop-picker .countertop-extras {
  flex-wrap:wrap;
  gap:8px;
  margin-top:9px;
  padding:9px 2px 0;
}
.catalog-panel .countertop-picker .countertop-size,
.catalog-panel .countertop-picker .wall-panel-option {
  min-height:34px;
  padding:4px 8px;
  border:1px solid #d7dce1;
  border-radius:8px;
  background:#fff;
}
.catalog-panel .countertop-picker .thickness-option {
  min-height:34px;
  padding:5px 10px;
  border-radius:8px;
}

@media (max-width:760px) {
  .planner-view-head { gap:14px; }
  .planner-view-actions { width:100%; align-items:flex-end; flex-direction:column; gap:8px; }
  .planner-iso-panel > canvas { height:540px; }
}
@media (max-width:520px) {
  .planner-view-head { align-items:stretch; flex-direction:column; }
  .planner-view-actions { align-items:stretch; }
  .planner-auto-arrange-button { width:100%; }
  .planner-view-switch { width:100%; }
  .wall-tabs .planner-view-switch { margin-left:0; }
  .planner-view-utilities { width:100%; }
  .planner-save-button,.planner-open-button { min-height:42px; padding:7px 10px; flex:1 1 calc(50% - 4px); }
  .planner-print-button { flex:1 1 auto; }
  .planner-undo-button,.planner-clear-button { flex:0 0 48px; }
  .planner-iso-panel > canvas { height:410px; }
  .planner-iso-panel > .iso-head { align-items:stretch; }
  .catalog-section-head { align-items:stretch; flex-direction:column; }
  .catalog-head-actions { align-items:stretch; flex-direction:column; gap:8px; }
  .catalog-view-switch { width:100%; }
  .catalog-panel .facade-picker .color-cells,
  .catalog-panel .countertop-picker .countertop-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-panel .facade-picker .color-cell,
  .catalog-panel .countertop-picker .countertop-option { height:70px; min-height:70px; }
}

/* Keep the room dimensions together and place catalog controls below countertops. */
.build-panel > .setup .dimensions {
  grid-template-columns:repeat(3,minmax(168px,1fr));
  align-items:end;
}
.catalog-panel > .catalog-controls-row {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-width:0;
}
.catalog-controls-row .filters {
  flex:1 1 auto;
  display:flex;
  flex-wrap:nowrap;
  gap:7px;
  min-width:0;
  margin:0;
  padding:2px 0;
  overflow-x:auto;
}
.catalog-controls-row .filter { flex:0 0 auto; }
.catalog-controls-row .catalog-head-actions { flex:0 0 auto; }
.planner-undo-button,.planner-clear-button,.iso-delete { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.planner-button-icon { font-size:20px; line-height:1; transform:translateY(-1px); }
.planner-button-svg { width:20px; height:20px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.iso-delete-icon { font-size:21px; line-height:1; }
.planner-clear-button::before,.planner-clear-button::after { content:none!important; display:none!important; }
@media (max-width:760px) {
  .build-panel > .setup .dimensions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .build-panel > .setup .dimensions .input-wrap { width:100%; min-width:0; }
  .build-panel > .setup .dimensions .input-wrap input { width:calc(100% - 38px); min-width:0; }
  .catalog-panel > .catalog-controls-row { align-items:stretch; flex-direction:column; gap:9px; }
  .catalog-controls-row .catalog-head-actions { width:100%; justify-content:space-between; }
}
@media (max-width:520px) {
  .build-panel > .setup .dimensions { grid-template-columns:1fr; }
  .build-panel > .setup .shape-picker { align-items:stretch; flex-direction:column; }
  .shape-select { width:100%; }
}

/* Print the currently open planner view without changing order printing. */
#plannerPrintSheet { display:none; }
@media print {
  body.printing-planner > :not(#plannerPrintSheet) { display:none!important; }
  body.printing-planner > #orderDialog { display:none!important; }
  body.printing-planner > #plannerPrintSheet {
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    color:#202124;
    background:#fff;
    font-family:Arial,"Helvetica Neue",sans-serif;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  #plannerPrintSheet .planner-print-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    padding:0 0 12px;
    border-bottom:2px solid #1673d3;
  }
  #plannerPrintSheet .planner-print-brand { color:#1673d3; font-size:17px; font-weight:900; }
  #plannerPrintSheet h1 { margin:5px 0 0; font-size:25px; line-height:1.1; }
  #plannerPrintSheet .planner-print-total { text-align:right; white-space:nowrap; }
  #plannerPrintSheet .planner-print-total span { display:block; color:#68727c; font-size:11px; font-weight:700; }
  #plannerPrintSheet .planner-print-total b { display:block; margin-top:3px; font-size:23px; }
  #plannerPrintSheet .planner-print-meta {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin:10px 0 12px;
  }
  #plannerPrintSheet .planner-print-meta div { padding:7px 9px; border:1px solid #cfd9e4; border-radius:6px; background:#f5f9fd; }
  #plannerPrintSheet .planner-print-meta span { display:block; color:#68727c; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
  #plannerPrintSheet .planner-print-meta b { display:block; margin-top:3px; font-size:12px; }
  #plannerPrintSheet .planner-print-media { position:relative; margin:0 auto; overflow:hidden; }
  #plannerPrintSheet .planner-print-content { margin:0; transform-origin:top left; }
  #plannerPrintSheet .planner-print-content .visual-module.active,
  #plannerPrintSheet .planner-print-content .visual-module:hover { outline:0; background:transparent; }
  #plannerPrintSheet .planner-print-canvas { display:block; width:100%; height:auto; max-height:630px; border:1px solid #d7dce1; background:#fff; object-fit:contain; }
  #plannerPrintSheet .planner-print-foot { margin:9px 0 0; color:#68727c; font-size:10px; text-align:right; }
}
@media (max-width:340px) {
  .catalog-panel .facade-picker .color-cells,
  .catalog-panel .countertop-picker .countertop-options { grid-template-columns:1fr; }
}

/* Keep facade choices in two rows and countertops in one row. */
.catalog-panel .facade-picker .color-cells {
  grid-template-columns:none;
  grid-template-rows:repeat(2,68px);
  grid-auto-flow:column;
  grid-auto-columns:minmax(150px,1fr);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
}
.catalog-panel .countertop-picker .countertop-options {
  grid-template-columns:none;
  grid-template-rows:68px;
  grid-auto-flow:column;
  grid-auto-columns:minmax(165px,1fr);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
}
@media (max-width:520px) {
  .catalog-panel .facade-picker .color-cells { grid-auto-columns:minmax(145px,1fr); }
  .catalog-panel .countertop-picker .countertop-options { grid-auto-columns:minmax(160px,1fr); }
}

/* Corpus color follows the selected series and is shown like a facade swatch. */
.catalog-panel .corpus-picker {
  grid-column:1 / -1;
  margin:0;
}
.catalog-panel .corpus-picker > span { display:block; margin-bottom:7px; font-size:13px; font-weight:800; }
.catalog-panel .corpus-picker .corpus-color-cells {
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  width:100%;
  gap:9px!important;
  overflow:visible;
  padding:2px;
}
.catalog-panel .corpus-picker .corpus-color-cell {
  position:relative;
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  align-items:center;
  justify-content:stretch;
  gap:8px;
  width:100%;
  min-width:0;
  min-height:68px;
  padding:8px;
  border:2px solid #d7dce1;
  border-radius:9px;
  background:#fff;
  cursor:default;
  text-align:left;
}
.catalog-panel .corpus-picker .corpus-color-cell i { width:40px; height:40px; border:1px solid #81899180; border-radius:7px; }
.catalog-panel .corpus-picker .corpus-color-cell b { display:grid; gap:3px; max-width:none; overflow:visible; white-space:normal; font-size:13px; line-height:1.18; }
.catalog-panel .corpus-picker .corpus-color-cell small { color:#68727c; font-size:10px; line-height:1.15; }
.catalog-panel .corpus-picker .corpus-color-cell.active { border-color:#1673d3; background:#eef6ff; color:#0a579e; box-shadow:0 0 0 2px #1673d329,0 2px 8px #1673d31f; }
.catalog-panel .corpus-picker .corpus-color-cell.active::after {
  content:"\2713";
  position:absolute;
  top:7px;
  right:8px;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#1673d3;
  color:#fff;
  font-size:12px;
  font-weight:900;
}

/* Keep every control inside the viewport on monitors with narrower usable widths. */
html,body { max-width:100%; overflow-x:clip; }
.topbar,.workspace,.catalog-panel,.build-panel { max-width:100%; }
.catalog-panel > *,
.build-panel > *,
.planner-view-stage,
.planner-view-panel,
.planner-iso-panel,
.wall-tabs > *,
.iso-head > * { min-width:0; }
.catalog-panel .facade-picker,
.catalog-panel .countertop-picker { max-width:100%; overflow:hidden; }
.catalog-panel .facade-picker .color-cells,
.catalog-panel .countertop-picker .countertop-options { max-width:100%; min-width:0; }

/* On desktop all two facade rows and the countertop row end exactly at the panel edge. */
@media (min-width:1600px) {
  .catalog-panel .facade-picker .color-cells {
    grid-template-columns:repeat(9,minmax(0,1fr));
    grid-template-rows:repeat(2,68px);
    grid-auto-flow:column;
    grid-auto-columns:0;
    overflow-x:hidden;
  }
  .catalog-panel .countertop-picker .countertop-options {
    grid-template-columns:repeat(8,minmax(0,1fr));
    grid-template-rows:68px;
    grid-auto-flow:row;
    grid-auto-columns:0;
    overflow-x:hidden;
  }
}

/* Compact icon tiles: back, clear and delete. */
.planner-view-utilities .planner-icon-button,
.iso-controls .planner-icon-button {
  width:48px;
  min-width:48px;
  max-width:48px;
  min-height:48px;
  padding:0;
  flex:0 0 48px;
  display:inline-grid;
  place-items:center;
  gap:0;
}
.planner-icon-button .planner-button-svg { width:24px; height:24px; }
.planner-icon-button .planner-back-svg { width:26px; height:26px; }
.iso-controls .iso-delete.planner-icon-button { min-height:38px; height:38px; width:40px; min-width:40px; max-width:40px; flex-basis:40px; }
.iso-delete.planner-icon-button .iso-delete-icon { font-size:27px; transform:translateY(-1px); }

.toast.is-error { background:#a52323; color:#fff; }

@media (max-width:1599px) {
  .catalog-panel .facade-picker .color-cells,
  .catalog-panel .countertop-picker .countertop-options {
    overscroll-behavior-inline:contain;
    scrollbar-gutter:stable;
  }
}
@media (max-width:760px) {
  .selected-row { grid-template-columns:44px minmax(0,1fr); }
  .selected-row .row-actions { grid-column:1 / -1; flex-wrap:wrap; justify-content:flex-end; }
  .iso-head { flex-wrap:wrap; }
  .iso-controls { max-width:100%; }
}

/* Filter captions must stay inside their blue tiles at every screen width. */
.catalog-panel .series-picker,
.catalog-panel .purpose-picker,
.catalog-panel .size-picker {
  grid-template-columns:124px minmax(0,1fr);
  min-width:0;
}
.catalog-panel .series-picker label,
.catalog-panel .purpose-picker label,
.catalog-panel .size-picker label {
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  white-space:normal;
  overflow-wrap:break-word;
}
.catalog-panel .series-picker .catalog-select,
.catalog-panel .purpose-picker .catalog-select,
.catalog-panel .size-picker .catalog-select {
  min-width:0;
  max-width:100%;
}
@media (max-width:520px) {
  .catalog-panel .series-picker,
  .catalog-panel .purpose-picker,
  .catalog-panel .size-picker { grid-template-columns:116px minmax(0,1fr); }
  .catalog-panel .series-picker label,
  .catalog-panel .purpose-picker label,
  .catalog-panel .size-picker label { font-size:13px; }
}
@media (max-width:360px) {
  .catalog-panel .series-picker,
  .catalog-panel .purpose-picker,
  .catalog-panel .size-picker { grid-template-columns:1fr; }
}

/* Instruction button and complete step-by-step help window. */
.help-button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 15px;
  border:2px solid #1673d3;
  border-radius:8px;
  background:#1673d3;
  color:#fff;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 3px 9px #1673d333;
}
.help-button span {
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  border-radius:50%;
  background:#fff;
  color:#1264b8;
  font-size:14px;
  line-height:1;
}
.help-button:hover { background:#0f63b9; border-color:#0f63b9; }
.help-button:focus-visible { outline:3px solid #f4c400; outline-offset:2px; }
.help-dialog { max-width:900px; }
.help-card { max-height:min(88vh,880px); overflow:auto; padding:32px; }
.help-kicker { margin:0 0 7px!important; color:#1264b8!important; font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.help-card h2 { margin:0 44px 8px 0; font-size:clamp(26px,4vw,36px); line-height:1.08; }
.help-intro { margin:0 0 22px; font-size:16px; }
.help-sections { display:grid; gap:8px; }
.help-sections details { border:1px solid #d9e1e8; border-radius:9px; background:#f8fbff; overflow:hidden; }
.help-sections summary { display:flex; align-items:center; gap:10px; padding:11px 14px; font-size:15px; font-weight:900; cursor:pointer; list-style:none; }
.help-sections summary::-webkit-details-marker { display:none; }
.help-sections summary::after { content:"+"; margin-left:auto; color:#1673d3; font-size:20px; line-height:1; }
.help-sections details[open] summary::after { content:"−"; }
.help-sections summary span { display:grid; place-items:center; width:28px; height:28px; flex:0 0 auto; border-radius:50%; background:#f4c400; font-size:14px; }
.help-sections ul { margin:0; padding:0 18px 13px 57px; color:#59636d; font-size:14px; line-height:1.4; }
.help-sections li + li { margin-top:5px; }
.help-note { margin:16px 0; padding:14px 16px; border-left:4px solid #1673d3; border-radius:7px; background:#eef6ff; font-size:14px; line-height:1.45; }
.help-start { width:100%; }
.photo-lightbox { width:min(1120px,96vw); max-width:1120px; }
.photo-lightbox::backdrop { background:rgba(8,17,29,.86); backdrop-filter:blur(2px); }
.photo-lightbox-card { position:relative; display:grid; place-items:center; min-height:240px; padding:52px 20px 18px; border-radius:14px; background:#fff; box-shadow:0 22px 70px #0008; }
.photo-lightbox-card img { display:block; width:auto; max-width:100%; height:auto; max-height:78vh; object-fit:contain; background:#fff; }
.photo-lightbox-card .dialog-close { width:42px; height:42px; right:10px; top:8px; display:grid; place-items:center; border:2px solid #d8dde2; border-radius:50%; background:#fff; line-height:1; }
.photo-lightbox-caption { width:100%; margin:13px 0 0; color:#30363c; font-size:14px; font-weight:800; line-height:1.35; text-align:center; }

/* Clear, non-blocking placement warnings. */
.visual-module.has-layout-error {
  z-index:9;
  outline:3px solid #d8504b;
  outline-offset:-2px;
  border-radius:4px;
  background:rgba(225,70,64,.16);
  box-shadow:0 0 0 5px rgba(225,70,64,.12),0 4px 12px rgba(120,20,18,.2);
}
.visual-module.has-layout-error img { opacity:.84; filter:sepia(.18) saturate(1.25) hue-rotate(315deg) drop-shadow(2px 4px 3px #8f272744)!important; }
.layout-error-badge { position:absolute; top:4px; right:4px; z-index:12; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#c83d38; color:#fff; box-shadow:0 2px 5px #681b1b55; font-size:14px; font-weight:900; line-height:1; pointer-events:none; }
.meters.invalid #meterHint { display:flex; align-items:flex-start; gap:8px; margin-top:12px; padding:11px 13px; border:1px solid #efaaa6; border-radius:8px; background:#fff2f1; color:#9f2724; box-shadow:0 3px 10px #a82c2512; font-size:13px; line-height:1.35; }
.meters.invalid #meterHint::before { content:"!"; display:grid; place-items:center; width:20px; height:20px; flex:0 0 20px; border-radius:50%; background:#c83d38; color:#fff; font-size:12px; font-weight:900; }
.selected-row.has-layout-error { margin:4px 0; padding:10px 8px; border:1px solid #efaaa6; border-radius:8px; background:#fff5f4; }
.selection-layout-warning { display:block; margin-top:5px; color:#a62d29; font-size:11px; font-weight:800; line-height:1.3; }

@media (max-width:760px) {
  .scene-dimensions { top:1px; min-width:12px; padding:1px 2px; border-color:#9aa8b4; border-radius:3px; background:rgba(255,255,255,.92); font-size:0!important; line-height:1; transform:translate(-50%,-50%); }
  .scene-dimensions span { display:none; }
  .scene-dimensions::after { content:attr(data-short); font-size:7px; font-weight:900; line-height:1; }
  .visual-module.active .scene-dimensions::after { content:attr(data-full); }
  .layout-error-badge { top:2px; right:2px; width:17px; height:17px; font-size:11px; }
}
@media (max-width:440px) {
  .visual-module:not(.active) .scene-dimensions { display:none; }
  .visual-module.active .scene-dimensions { padding:1px 3px; letter-spacing:-.02em; }
  .visual-module.active .scene-dimensions::after { font-size:7px; }
}
@media (max-width:760px) {
  .help-card { padding:24px 18px 20px; }
  .photo-lightbox-card { padding:48px 10px 14px; }
  .photo-lightbox-card img { max-height:75vh; }
}
@media (max-width:440px) {
  .topbar { padding-left:8px; padding-right:8px; gap:6px; }
  .topbar .brand { font-size:20px; }
  .top-actions { gap:4px; }
  .topbar .top-actions .ghost,.help-button { min-height:36px; padding:7px; font-size:11px; }
  .help-button { gap:4px; }
  .help-button span { width:18px; height:18px; font-size:12px; }
  .help-card h2 { font-size:25px; }
}

/* Moving dimensions for the selected module in the schematic view. */
.scene-measurement {
  position:absolute;
  height:34px;
  z-index:20;
  overflow:visible;
  pointer-events:none;
}
.scene-measurement[hidden] { display:none!important; }
.scene-measure-segment {
  position:absolute;
  top:15px;
  height:0;
  border-top:2px solid #1673d3;
  color:#135b9f;
  filter:drop-shadow(0 1px 0 #fff);
}
.scene-measure-segment::before,
.scene-measure-segment::after {
  content:"";
  position:absolute;
  top:-6px;
  width:0;
  height:10px;
  border-left:2px solid currentColor;
}
.scene-measure-segment::before { left:0; }
.scene-measure-segment::after { right:0; }
.scene-measure-segment span {
  position:absolute;
  left:50%;
  top:3px;
  transform:translateX(-50%);
  padding:2px 5px;
  border:1px solid currentColor;
  border-radius:4px;
  background:rgba(255,255,255,.96);
  box-shadow:0 1px 4px #0002;
  color:inherit;
  font-size:11px;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
}
.scene-measure-segment.is-module {
  border-color:#c39a00;
  color:#6b5500;
}
.scene-measure-segment.is-module span {
  top:-28px;
  background:#fff7c7;
}
.scene-vertical-measurement {
  position:absolute;
  width:0;
  z-index:21;
  border-left:2px solid #1673d3;
  color:#135b9f;
  filter:drop-shadow(0 1px 0 #fff);
  pointer-events:none;
}
.scene-vertical-measurement[hidden] { display:none!important; }
.scene-vertical-measurement::before,
.scene-vertical-measurement::after {
  content:"";
  position:absolute;
  left:-6px;
  width:10px;
  border-top:2px solid currentColor;
}
.scene-vertical-measurement::before { top:0; }
.scene-vertical-measurement::after { bottom:0; }
.scene-vertical-measurement > span {
  position:absolute;
  left:8px;
  top:50%;
  display:flex;
  flex-direction:column;
  gap:1px;
  transform:translateY(-50%);
  padding:3px 6px;
  border:1px solid currentColor;
  border-radius:5px;
  background:rgba(255,255,255,.97);
  box-shadow:0 1px 4px #0002;
  color:inherit;
  font-size:12px;
  font-weight:900;
  line-height:1.15;
  white-space:nowrap;
}
.scene-vertical-measurement.label-left > span { right:8px; left:auto; }
.scene-vertical-measurement > span small { color:#69737c; font-size:9px; font-weight:800; }
.scene-vertical-measurement.is-standard { border-color:#168050; color:#126c44; }
.scene-vertical-measurement.is-adjusted:not(.is-overlap) { border-color:#cf8a00; color:#8a5b00; }
.scene-vertical-measurement.is-overlap { border-color:#c43c36; color:#a12723; }
.scene-floor-measurement { z-index:22; border-left-style:dashed; border-color:#7650a3; color:#633d8d; }
.scene-floor-measurement > span { background:#f9f5ff; }
.scene-floor-measurement.is-zero { border-left-color:transparent; }
.scene-floor-measurement.is-zero > span { top:auto; bottom:4px; transform:none; }
.wall-height-measurement {
  display:block;
  padding:0;
  overflow:visible;
  border-right:1px solid #8eb6dc;
  background:#f5faff;
  color:#135b9f;
}
.wall-height-measurement i {
  position:absolute;
  left:50%;
  top:7px;
  bottom:7px;
  height:auto;
  border-left:2px solid #1673d3;
}
.wall-height-measurement i::before,.wall-height-measurement i::after {
  content:"";
  position:absolute;
  left:-6px;
  width:10px;
  border-top:2px solid #1673d3;
}
.wall-height-measurement i::before { top:0; }
.wall-height-measurement i::after { bottom:0; }
.wall-height-measurement b {
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  transform:translate(-50%,-50%) rotate(-90deg);
  padding:3px 7px;
  border:1px solid #8eb6dc;
  border-radius:5px;
  background:rgba(255,255,255,.96);
  box-shadow:0 1px 4px #0002;
  color:#135b9f;
  font-size:10px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}
.visual-module.active { z-index:10; }

@media (max-width:600px) {
  .scene-measurement { height:28px; }
  .scene-measure-segment { top:12px; }
  .scene-measure-segment span { padding:1px 3px; font-size:9px; }
  .scene-measure-segment.is-left span { top:2px; }
  .scene-measure-segment.is-module span { top:-23px; }
  .scene-measure-segment.is-right span { top:2px; }
  .scene-vertical-measurement > span { padding:2px 4px; font-size:10px; }
  .scene-vertical-measurement > span small { font-size:8px; }
  .wall-height-measurement b { padding:2px 5px; font-size:9px; }
}

@media print {
  .scene-measurement,.scene-vertical-measurement { display:none!important; }
}

/* The factory edge occupies the module's existing top zone in the scheme. */
.visual-module[data-type="lower"][data-countertop]:not([data-purpose="sink"])::after {
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:auto!important;
  width:auto!important;
  height:var(--scheme-top-height,3.06%)!important;
  border:0!important;
  background:var(--scheme-top-color,#e5e2dc) var(--scheme-top-image,none) center / 120px 60px repeat!important;
  box-shadow:inset 0 -1px #0003;
  pointer-events:none;
  z-index:6;
}