/* Four aligned catalogue controls, followed by compact product cards. */
#catalogPanel>.catalog-section-head{order:0}
#catalogPanel>.ready-gallery-entry{grid-column:1/-1;order:1;margin:0 0 4px}
#catalogPanel .series-picker{order:2}
#catalogPanel .purpose-picker{order:3}
#catalogPanel .size-picker{order:4}
#catalogPanel .facade-picker{order:5}
#catalogPanel .corpus-picker{grid-column:1/-1;order:6}
#catalogPanel .countertop-picker{order:7}
#catalogPanel>.catalog-controls-row{order:8}
#catalogPanel>.catalog{order:9}
#catalogPanel .series-picker,#catalogPanel .purpose-picker,#catalogPanel .size-picker,#catalogPanel .facade-picker{grid-column:span 3;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:6px;min-width:0;min-height:96px;margin:0;padding:8px;border:1px solid #dce4ed;border-radius:8px;background:#f8fafc}
#catalogPanel .series-picker>label,#catalogPanel .purpose-picker>label,#catalogPanel .size-picker>label,#catalogPanel .facade-picker>span{display:block;margin:0;min-height:24px;padding:3px 5px;border:0;border-radius:4px;background:#eef6ff;box-shadow:none;font-size:12px;font-weight:700;line-height:18px;color:#0f5fac;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#catalogPanel .catalog-select{width:100%;min-width:0;min-height:34px;font-size:12px;padding:5px 22px 5px 7px;border-width:1px;border-radius:5px}
#catalogPanel .facade-picker .color-cells{display:grid!important;grid-template-columns:none;grid-template-rows:44px;grid-auto-flow:column;grid-auto-columns:minmax(100px,130px);gap:5px!important;width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;padding:0 0 3px}
#catalogPanel .facade-picker .color-cell.control-preview,#catalogPanel .facade-picker .color-cell{height:44px;min-height:44px;padding:4px 5px;grid-template-columns:24px minmax(0,1fr);gap:5px;border-width:1px;border-radius:5px}
#catalogPanel .facade-picker .color-cell i{width:24px;height:24px;border-radius:4px}
#catalogPanel .facade-picker .color-cell b,#catalogPanel .facade-picker .control-icon-label{font-size:10px;line-height:1.15}
#catalogPanel .facade-picker .color-cell small{font-size:9px}
#catalogPanel #catalog{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:9px}
#catalog .product{padding:7px;border-radius:8px}
#catalog .product .product-scheme{height:108px;min-height:108px}
#catalog .product img{height:100px;max-height:100px}
#catalog .product h3{font-size:12px;line-height:1.3;min-height:32px}
#catalog .product .kind{font-size:9px;letter-spacing:.02em}
#catalog .product .meta{font-size:10px;margin-bottom:7px;overflow-wrap:anywhere}
#catalog .product .price{font-size:14px}
#catalog .product .product-card-view-switch button{min-height:24px;font-size:10px;padding:3px 5px}
#catalog .product .buy{gap:5px;flex-wrap:wrap}
@media(max-width:760px){#catalogPanel .series-picker,#catalogPanel .purpose-picker,#catalogPanel .size-picker,#catalogPanel .facade-picker{grid-column:span 6}#catalogPanel #catalog{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){#catalogPanel #catalog{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Keep every catalogue setting on one horizontal rail at all viewport widths. */
#catalogPanel>.catalog-settings-rail{grid-column:1/-1;order:2;display:flex;flex-wrap:nowrap;align-items:stretch;gap:8px;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:2px 2px 10px;overscroll-behavior-inline:contain;scrollbar-color:#9baab6 #edf1f5;scrollbar-width:thin}
#catalogPanel .catalog-settings-rail>div{flex:1 0 210px;width:210px;min-width:210px;max-width:270px;grid-column:auto;margin:0;min-height:100px;box-sizing:border-box}
#catalogPanel .catalog-settings-rail>.facade-picker{order:5}
#catalogPanel .catalog-settings-rail>.corpus-picker{order:6}
#catalogPanel .catalog-settings-rail>.countertop-picker{order:7}
#catalogPanel .catalog-settings-rail>.corpus-picker,#catalogPanel .catalog-settings-rail>.countertop-picker{padding:8px;border:1px solid #dce4ed;border-radius:8px;background:#f8fafc}
#catalogPanel .catalog-settings-rail .countertop-head,#catalogPanel .catalog-settings-rail>.corpus-picker>span{margin:0 0 6px;font-size:12px;line-height:24px;color:#0f5fac}
#catalogPanel .catalog-settings-rail .countertop-options,#catalogPanel .catalog-settings-rail .corpus-color-cells{display:flex!important;flex-wrap:nowrap;gap:5px;min-width:0;max-width:100%;overflow-x:auto;padding:0 0 4px}
#catalogPanel .catalog-settings-rail .countertop-option,#catalogPanel .catalog-settings-rail .corpus-color-cell{flex:0 0 125px;width:125px;height:44px;min-height:44px;min-width:0;padding:4px 5px;display:grid;grid-template-columns:24px minmax(0,1fr);gap:5px;border-width:1px;border-radius:5px}
#catalogPanel .catalog-settings-rail .countertop-option i,#catalogPanel .catalog-settings-rail .corpus-color-cell i{width:24px;height:24px}
#catalogPanel .catalog-settings-rail .countertop-option span,#catalogPanel .catalog-settings-rail .corpus-color-cell b{font-size:10px;line-height:1.15;white-space:normal}
#catalogPanel .catalog-settings-rail .countertop-extras{display:flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;gap:5px;font-size:10px;align-items:center}
#catalogPanel .catalog-settings-rail .countertop-extras>*{flex:0 0 auto}
#catalogPanel .catalog-controls-row{flex-wrap:nowrap;overflow-x:auto;min-width:0;gap:10px}
#catalogPanel .catalog-controls-row>*{flex-shrink:0}
/* Room sections, palettes and dimension editors also stay on horizontal rails. */
#roomSettingsPanel>.room-settings-rail{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:10px;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;padding:10px;overscroll-behavior-inline:contain;scrollbar-color:#9baab6 #edf1f5;scrollbar-width:thin}
#roomSettingsPanel:not([open])>.room-settings-rail{display:none}
#roomSettingsPanel .room-settings-rail>.iso-finish-bar,#roomSettingsPanel .room-settings-rail>.room-openings{flex:1 0 390px;width:390px;min-width:390px;max-width:460px;margin:0;box-sizing:border-box}
#roomSettingsPanel .finish-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:5px}
#roomSettingsPanel .finish-tabs>button{flex:1 0 100px;min-width:100px}
#roomSettingsPanel .finish-grid{display:flex;flex-wrap:nowrap;gap:7px;overflow-x:auto;max-width:100%;padding-bottom:5px}
#roomSettingsPanel .finish-grid>*{flex:0 0 80px;min-width:80px}
#roomSettingsPanel .room-opening-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;gap:8px;padding-bottom:6px}
#roomSettingsPanel .room-opening-grid>label{flex:0 0 145px;min-width:145px}
#roomSettingsPanel .room-opening-grid>.room-opening-chooser{flex-basis:185px}
#roomSettingsPanel .room-opening-actions,#roomSettingsPanel .finish-panel-head{flex-wrap:nowrap;overflow-x:auto}
#roomSettingsPanel .room-opening-actions>*{flex-shrink:0}
.catalog-settings-rail:focus-visible,.room-settings-rail:focus-visible{outline:2px solid #1673d3;outline-offset:2px}
@media(max-width:520px){#roomSettingsPanel .room-settings-rail>.iso-finish-bar,#roomSettingsPanel .room-settings-rail>.room-openings{flex-basis:300px;width:300px;min-width:300px}#catalogPanel .catalog-settings-rail>div{flex-basis:185px;width:185px;min-width:185px}}

/* The facade palette stays above countertops, in exactly two scrollable rows. */
#catalogPanel>.corpus-picker{grid-column:1/-1;order:3;min-height:0}
#catalogPanel>.facade-picker{grid-column:1/-1;order:4;min-height:0;width:100%;max-width:100%;margin:0;padding:10px;border:1px solid #dce4ed;border-radius:8px}
#catalogPanel>.countertop-picker{grid-column:1/-1;order:5;margin:0;min-height:0}
#catalogPanel>.facade-picker .color-cells{display:grid!important;grid-template-columns:none!important;grid-template-rows:repeat(2,56px)!important;grid-auto-flow:column;grid-auto-columns:minmax(155px,1fr);gap:7px!important;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px}
#catalogPanel>.facade-picker .color-cell,#catalogPanel>.facade-picker .color-cell.control-preview{height:56px;min-height:56px;padding:5px 7px;grid-template-columns:36px minmax(0,1fr);gap:7px}
#catalogPanel>.facade-picker .color-cell i{width:36px;height:36px}
#catalogPanel>.facade-picker .color-cell b,#catalogPanel>.facade-picker .control-icon-label{font-size:12px;line-height:1.2}
#catalogPanel>.facade-picker .color-cell small{font-size:10px}

/* One navigation row: series, ready kitchens, purpose, dimensions, extras. */
#catalogPanel .catalog-settings-rail>.series-picker{order:1}
#catalogPanel .catalog-settings-rail>.ready-picker{order:2}
#catalogPanel .catalog-settings-rail>.purpose-picker{order:3}
#catalogPanel .catalog-settings-rail>.size-picker{order:4}
#catalogPanel .catalog-settings-rail>.composition-picker{order:5}
#catalogPanel .catalog-settings-rail>.ready-picker,#catalogPanel .catalog-settings-rail>.composition-picker{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:6px;min-height:96px;margin:0;padding:8px;border:1px solid #dce4ed;border-radius:8px;background:#f8fafc}
#catalogPanel .catalog-settings-rail .catalog-rail-label,#catalogPanel .composition-picker>label{display:block;margin:0;min-height:24px;padding:3px 5px;border-radius:4px;background:#eef6ff;font-size:12px;font-weight:700;line-height:18px;color:#0f5fac;white-space:nowrap}
#catalogPanel .ready-picker .ready-gallery-cell{min-height:34px;height:34px;padding:5px 7px;gap:5px;border-radius:5px}
#catalogPanel .ready-picker .ready-gallery-cell strong{font-size:12px}
#catalogPanel .ready-picker .ready-gallery-cell span{font-size:10px}
#catalogPanel .ready-picker .ready-gallery-cell>b{font-size:19px}
/* Room setup follows the supplied reference: full-width finish tabs, then room details. */
#roomSettingsPanel>.room-settings-rail{display:block;overflow:visible;padding:0;max-width:100%;min-width:0}
#roomSettingsPanel:not([open])>.room-settings-rail,#roomSettingsPanel [hidden]{display:none!important}
#roomSettingsPanel .room-settings-rail>.iso-finish-bar{display:block;flex:none;width:100%;min-width:0;max-width:none;margin:0;padding:16px;border:0;border-bottom:1px solid #dedbd3;border-radius:0;background:#f8f7f3}
#roomSettingsPanel .finish-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;padding:4px;border-radius:12px;background:#e9e6df;overflow:visible}
#roomSettingsPanel .finish-tabs>button{flex:none;min-width:0;min-height:55px;padding:7px;font-size:13px}
#roomSettingsPanel .finish-tabs>button .control-icon-label{font-size:13px}
#roomSettingsPanel .finish-tabs small{font-size:11px}
#roomSettingsPanel .finish-grid{display:grid;grid-template-columns:none;grid-template-rows:1fr;grid-auto-flow:column;grid-auto-columns:minmax(110px,1fr);gap:8px;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:2px 0 6px;scrollbar-width:thin}
#roomSettingsPanel .finish-grid>*{flex:none;min-width:0;width:100%}
#roomSettingsPanel .finish-swatch,#roomSettingsPanel .finish-swatch.control-preview{min-height:112px;padding:7px;border-radius:9px;gap:8px;justify-content:flex-start}
#roomSettingsPanel .finish-swatch .finish-sample{height:40px;min-height:40px;flex:0 0 40px}
#roomSettingsPanel .finish-caption{font-size:12px;line-height:1.3}
#roomSettingsPanel .room-settings-rail>.room-openings{display:block;flex:none;width:auto;min-width:0;max-width:none;margin:8px 12px;border:1px solid #d4deea;border-radius:12px;background:#f7fafe}
#roomSettingsPanel .room-openings>.room-openings-header{min-height:50px;padding:11px 13px}
#roomSettingsPanel .room-openings-header h4{font-size:14px}
#roomSettingsPanel .room-openings-header small{font-size:11px}
#roomSettingsPanel .finish-note{margin-top:10px}
@media(max-width:600px){#roomSettingsPanel .room-settings-rail>.iso-finish-bar{padding:10px}#roomSettingsPanel .finish-grid{grid-auto-columns:115px}#roomSettingsPanel .finish-tabs>button .control-icon-label{font-size:11px}#roomSettingsPanel .finish-tabs small{font-size:9px}#roomSettingsPanel .room-settings-rail>.room-openings{margin:8px}}