/* ARTSTROY brand layer. Tokens, fonts and component styles are taken from artstroy.shop
   (assets/css/site.css: :root, .btn-primary/.btn-ghost, .chip, .pcard, .search input, .eyebrow).
   Loaded after styles.css and editor.css. */
@font-face{font-family:'Geologica';font-style:normal;font-weight:300 600;font-display:swap;src:url('/assets/artstroy/brand/fonts/geologica-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geologica';font-style:normal;font-weight:300 600;font-display:swap;src:url('/assets/artstroy/brand/fonts/geologica-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/assets/artstroy/brand/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/assets/artstroy/brand/fonts/jetbrains-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/artstroy/brand/fonts/unbounded-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/artstroy/brand/fonts/unbounded-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#FBFAF8; --bg-2:#F4F1EC; --surface:#FFFFFF; --surface-2:#F8F6F2; --surface-3:#EEEAE3;
  --border:rgba(28,30,32,0.09); --border-2:rgba(28,30,32,0.14); --border-3:rgba(28,30,32,0.24);
  --ink:#17191C; --ink-2:#3A3F45; --muted:#767C84; --muted-2:#A1A7AE;
  --blue:#B4532E; --blue-dark:#8F3F22; --blue-dim:rgba(180,83,46,0.10); --rule:rgba(180,83,46,0.24);
  --ok:#3F7A4F; --ok-dim:rgba(63,122,79,0.12);
  --font-display:'Unbounded','Geologica',system-ui,sans-serif;
  --font-ui:'Geologica',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','Courier New',monospace;
  --r:4px; --r-lg:10px; --r-xl:16px;
  /* tokens of the visualizer mapped onto the brand */
  --accent:var(--blue); --accent-soft:var(--blue-dim); --line:var(--border-2); --radius:var(--r);
  font-family:var(--font-ui); color:var(--ink); background:var(--bg);
}
body,.canvas-editor{font-family:var(--font-ui);color:var(--ink);background:var(--bg-2);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
::selection{background:var(--blue-dim)}
:focus-visible,.canvas-editor :focus-visible{outline:2px solid var(--blue);outline-offset:2px}
input[type="range"],input[type="checkbox"],input[type="radio"]{accent-color:var(--blue)}

/* header: as .site-header */
.canvas-editor{--editor-header-height:68px}
.editor-header{gap:14px;padding:0 20px;background:rgba(251,250,248,.96);border-bottom:1px solid var(--border)}
.editor-header .wordmark{display:flex;align-items:center;letter-spacing:0;font-size:0}
.editor-header .wordmark img{display:block;height:46px;width:auto}
.editor-header .header-divider{height:22px;background:var(--border-2)}
.editor-header h1{font:500 11px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* buttons: .btn-primary / .btn-ghost */
.button,.editor-header .button{border-radius:var(--r);font:600 12px/1.1 var(--font-ui);letter-spacing:.04em;min-height:40px;padding:10px 18px;transition:background .2s,transform .15s,box-shadow .2s,border-color .2s,color .2s}
.button-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.button-primary:hover:not(:disabled){background:var(--blue-dark);border-color:var(--blue-dark);box-shadow:0 4px 24px rgba(180,83,46,.3);transform:translateY(-1px)}
.button-primary:active:not(:disabled){transform:scale(.98)}
.button-outline,.editor-header .header-room-button{background:transparent;color:var(--ink-2);border:1px solid var(--border-2);font-weight:500}
.button-outline:hover:not(:disabled),.upload-button:hover,.header-room-button:hover{background:transparent;border-color:var(--blue);color:var(--blue)}
.button-quiet{color:var(--ink-2)}
.button-small{min-height:34px;padding:8px 12px;font-size:11px}
.text-button{color:var(--blue);border-bottom:1px solid var(--rule)}
.text-button:hover:not(:disabled){border-color:var(--blue)}
.variants-count{background:var(--blue);font:600 11px var(--font-ui);min-width:20px;height:20px;border-radius:10px}
.icon-button:hover:not(:disabled),.icon-button[aria-expanded="true"]{color:var(--blue);background:var(--blue-dim)}

/* chips: .chip */
.tile-chip,.demo-style-chips .tile-chip{padding:7px 12px;border:1px solid var(--border-2);border-radius:100px;background:var(--surface);font:400 12px/1 var(--font-ui);color:var(--ink-2);min-height:30px;transition:border-color .2s,background .2s,color .2s}
.tile-chip:hover{border-color:var(--blue);color:var(--blue)}
.tile-chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.demo-style-chips .tile-chip{padding:8px 13px;font-size:13px;min-height:36px}

/* fields: .search input / .sel */
.tile-catalog-tools input[type="search"],.tile-selects select,.new-region-kind select,.request-field input,.request-field textarea,.surface-name-row input,.surface-edit-row select,#testCaseSelect{padding:9px 12px;min-height:38px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);color:var(--ink);font:400 13px var(--font-ui);outline:none;transition:border-color .2s,box-shadow .2s}
.tile-catalog-tools input[type="search"]:focus,.tile-selects select:focus,.request-field input:focus,.request-field textarea:focus,.surface-name-row input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-dim);outline:none}

/* view tabs and toolbar states */
.view-tabs button{font:500 12px var(--font-ui);border-radius:100px}
.view-tabs button[aria-selected="true"]{background:var(--blue);color:#fff;box-shadow:none}
.tool-button{border-radius:var(--r-lg);color:var(--muted)}
.tool-button:hover:not(:disabled){color:var(--blue);background:var(--blue-dim)}
.tool-button[aria-pressed="true"],.advanced-tools-disclosure[open]>summary{color:var(--blue-dark);border-color:var(--rule);background:var(--blue-dim);box-shadow:none}
.tool-label{font-family:var(--font-ui)}
.drawing-toolbar,.canvas-topbar,.canvas-footer{background:var(--surface);border-color:var(--border)}
.eyebrow{display:inline-block;font:500 11px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.section-title h2,.inspector-section .section-title h2{font:500 13px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.live-label,.inspector-section .live-label{font:500 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.field-note,.canvas-editor .field-note{color:var(--muted)}
.toast{background:var(--ink);border-radius:var(--r-lg);font-family:var(--font-ui)}
.drawer-heading h2{font:500 18px/1.25 var(--font-display)}
.colour-swatch[aria-pressed="true"]{outline:2px solid var(--blue);outline-offset:2px}

/* catalogue cards: .pcard */
.tile-group h3{font:500 12px/1.3 var(--font-display);color:var(--ink)}
.tile-group h3 span{font:500 10px var(--font-mono);letter-spacing:.04em;color:var(--muted)}
.canvas-editor .tile-option{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.canvas-editor .tile-option:hover:not(:disabled){border-color:var(--border-3);box-shadow:0 10px 26px rgba(20,25,30,.09);transform:translateY(-2px)}
.canvas-editor .tile-option img,.canvas-editor .tile-option[aria-pressed="true"] img,.canvas-editor .tile-option:hover:not(:disabled) img{border:0;border-bottom:1px solid var(--border);border-radius:0;margin:0;outline:0;background:var(--surface-3)}
.canvas-editor .tile-option .option-name{padding:7px 8px 8px;font:500 11.5px/1.3 var(--font-ui);color:var(--ink)}
.canvas-editor .tile-option .option-name small{margin-top:2px;font:400 10px/1.3 var(--font-mono);color:var(--muted)}
.canvas-editor .tile-option[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.canvas-editor .tile-option[aria-pressed="true"] .option-name{color:var(--blue-dark)}

/* start screen */
.start-screen{background:var(--bg);padding:40px 32px 48px}
.start-card{max-width:1320px;gap:48px}
.start-intro h2{font:500 clamp(24px,2.4vw,34px)/1.14 var(--font-display);letter-spacing:-.01em;color:var(--ink);margin:10px 0 14px}
.start-lead{font:400 16px/1.55 var(--font-ui);color:var(--ink-2)}
.start-steps{gap:0;border-top:1px solid var(--border)}
.start-steps li{grid-template-columns:34px 1fr;padding:11px 0;border-bottom:1px solid var(--border)}
.start-steps li::before{content:counter(step,decimal-leading-zero);width:auto;height:auto;border-radius:0;background:none;place-items:start;font:500 11px var(--font-mono);letter-spacing:.1em;color:var(--blue)}
.start-steps b{font:500 15px/1.3 var(--font-ui);color:var(--ink)}
.start-steps span{font-size:13px;color:var(--muted)}
.start-upload{min-height:52px;padding:15px 28px;border-radius:var(--r);font-size:14px}
.start-upload-note,.start-catalog-note{color:var(--muted);font-size:12.5px}
.start-catalog-note{border-top:0;padding-top:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.02em}
.start-demos-heading h3{font:500 clamp(18px,1.7vw,22px)/1.25 var(--font-display);color:var(--ink);margin-bottom:6px}
.start-demos-heading span{font-size:13px;color:var(--muted)}
.demo-card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);transition:border-color .2s,box-shadow .2s,transform .2s}
.demo-card:hover,.demo-card:focus-visible{border-color:var(--border-3);box-shadow:0 14px 40px rgba(20,25,30,.09);transform:translateY(-2px)}
.demo-card img{background:var(--surface-3);border-bottom:1px solid var(--border)}
.demo-card-copy{padding:12px 14px 14px;gap:4px}
.demo-card-copy strong{font:500 14px/1.3 var(--font-ui);color:var(--ink)}
.demo-card-copy small{font:400 11px/1.4 var(--font-mono);color:var(--muted)}

/* ---------- layout: photo | selected tile + laying | catalogue ---------- */
.canvas-editor .view-tabs{border-radius:100px;background:var(--surface-3);border-color:var(--border)}
.canvas-editor .view-tabs button{border-radius:100px;font:500 12px var(--font-ui)}
.canvas-editor .view-tabs button[aria-selected="true"]{background:var(--blue);color:#fff;box-shadow:none}
.inspector-panel{border-left:1px solid var(--border);background:var(--surface)}
.inspector-panel:has(#inspectorEmpty:not([hidden])) .inspector-content{display:block}
.inspector-section + .inspector-section{border-top-color:var(--border)}

/* «О выбранной плитке» */
.canvas-editor .active-surface-name{margin:0 0 12px;padding:0;border:0;background:none;font:500 10px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.tile-about .section-title,.current-settings .section-title{justify-content:space-between;margin-bottom:10px}
.canvas-editor .tile-about .tile-details{margin:0;padding:0;background:none;font:400 12px/1.45 var(--font-ui);color:var(--ink-2)}
.canvas-editor .tile-details>strong{display:block;font:500 14px/1.3 var(--font-ui);color:var(--ink)}
.tile-layout-preview{grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 12px}
.tile-layout-preview img,.tile-layout-preview canvas{border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface-3)}
.tile-layout-preview figcaption{margin-top:5px;font:400 9.5px/1.3 var(--font-mono);letter-spacing:.02em;color:var(--muted)}
.tile-spec-list{grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:12px;line-height:1.4}
.tile-spec-list dt{color:var(--muted)}
.tile-spec-list dd{color:var(--ink);font-weight:500;text-align:right}
.tile-spec-list dd.tile-price{font:600 14px/1.3 var(--font-display);letter-spacing:-.01em}
.canvas-editor .tile-details a{display:inline-flex;margin-top:10px;font:500 12px/1 var(--font-ui);color:var(--blue);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px}
.canvas-editor .tile-details a:hover{border-color:var(--blue)}
#tileDetails:empty::before{content:"Нажмите на поверхность на фото — здесь появятся фото плитки, раскладка, характеристики и цена.";display:block;padding:14px;border:1px dashed var(--border-3);border-radius:var(--r-lg);color:var(--muted);font-size:12px;line-height:1.5}

/* «Раскладка и швы» */
.layout-slot:empty{display:none}
.tile-layout-switch{margin:0;gap:6px}
.tile-layout-caption{flex:0 0 100%;margin:0 0 1px;font-size:11px;color:var(--ink-2)}
.canvas-editor .current-settings .setting-group{margin-bottom:11px}
.canvas-editor .current-settings .setting-group:last-child{margin-bottom:0}
.canvas-editor .setting-label,.canvas-editor .setting-group legend{font-size:11px;color:var(--ink-2);margin-bottom:5px}
.canvas-editor .setting-label output,.canvas-editor #groutHex{font:500 10.5px var(--font-mono);color:var(--blue)}
.canvas-editor .current-settings .range-labels{display:none}
.canvas-editor .segmented-control{border-radius:100px;background:var(--surface-3)}
.canvas-editor .segmented-control label span{border-radius:100px}
.segmented-control input:checked + span{background:var(--blue);color:#fff;box-shadow:none}
.canvas-editor .colour-row{gap:10px;padding:2px 2px 0}

/* secondary: zone, layers, protected areas */
.tile-panel-more{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.tile-panel-more .inspector-section + .inspector-section{margin-top:10px;padding-top:10px}
.tile-panel-more .section-title h2{font:500 11px/1.3 var(--font-ui);color:var(--ink-2)}
.inspector-details>summary,.drawer-details>summary{color:var(--ink-2)}
.inspector-details>summary::after,.drawer-details>summary::after{color:var(--blue)}

@media (min-width:961px){
  .canvas-editor{--tile-col:320px;--catalog-col:308px;--inspector-width:calc(var(--tile-col) + var(--catalog-col))}
  .editor-workspace,.editor-workspace:has(#inspectorPanel:not([hidden])){grid-template-columns:var(--toolbar-width) minmax(0,1fr) var(--inspector-width)}
  #inspectorPanel,#inspectorPanel[hidden]{display:block!important;position:static;grid-column:3;grid-row:1;width:var(--inspector-width);border-radius:0;box-shadow:none;border-top:0;border-bottom:0;border-right:0}
  .inspector-heading,.inspector-toggle{display:none}
  .inspector-content,.inspector-panel:has(#inspectorEmpty:not([hidden])) .inspector-content{display:grid;grid-template-columns:var(--tile-col) var(--catalog-col);height:100%;padding:0;overflow:hidden}
  .tile-panel{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:16px 16px 20px;border-right:1px solid var(--border);background:var(--bg)}
  .tile-panel .inspector-section{margin:0;padding:0;border:0}
  .tile-panel>.inspector-section + .inspector-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
  .inspector-empty{margin:0 0 12px;padding:10px 12px;gap:4px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--blue-dim)}
  .inspector-empty .empty-region-icon{display:none}
  .inspector-empty strong{font-size:12.5px}
  .inspector-empty p{font-size:11.5px;line-height:1.5;color:var(--ink-2)}
  .inspector-panel:has(#inspectorEmpty:not([hidden])) #activeSurfaceName{display:none}
  .catalog-panel{display:flex;flex-direction:column;min-height:0;padding:16px 0 0 14px;background:var(--surface)}
  .catalog-panel .material-section{display:flex;flex-direction:column;flex:1;min-height:0;margin:0;padding:0;border:0}
  .catalog-panel .tile-catalog-tools{padding-right:14px}
  .canvas-editor .catalog-panel .tile-catalog{flex:1;min-height:0;max-height:none;padding:2px 12px 16px 2px;border-top:1px solid var(--border);scrollbar-color:var(--border-3) transparent}
  .canvas-editor .catalog-panel .tile-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}
@media (min-width:961px) and (max-width:1279px){
  .canvas-editor{--tile-col:280px;--catalog-col:252px}
  .canvas-editor .catalog-panel .tile-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editor-header h1,.editor-header .header-divider{display:none}
}
@media (min-width:1700px){
  .canvas-editor{--tile-col:348px;--catalog-col:360px;--inspector-width:calc(var(--tile-col) + var(--catalog-col))}
}
@media (min-width:961px) and (max-height:800px){
  .tile-panel{padding-top:12px}
  .tile-layout-preview{grid-template-columns:repeat(2,minmax(0,108px));justify-content:start;margin:8px 0 9px}
  .tile-spec-list{gap:2px 14px}
  .tile-panel>.inspector-section + .inspector-section{margin-top:10px;padding-top:10px}
  .canvas-editor .current-settings .setting-group{margin-bottom:8px}
}
@media (max-width:960px){
  .inspector-content{display:flex;flex-direction:column}
  .catalog-panel{order:-1}
  .tile-panel{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
  .inspector-panel:has(#inspectorEmpty:not([hidden])) .catalog-panel,
  .inspector-panel:has(#inspectorEmpty:not([hidden])) .tile-panel>:not(#inspectorEmpty){display:none}
  .inspector-panel:has(#inspectorEmpty:not([hidden])) .tile-panel{margin:0;padding:0;border:0}
}
.catalog-panel .section-title{padding-right:14px;justify-content:space-between}
.tile-spec-list dd.tile-price{white-space:nowrap}
.tile-group h3{flex-wrap:wrap;gap:2px 8px}
.tile-group h3 span{white-space:normal}

/* ---------- round 2: tile panel on the left, catalogue on the right, no tool column ---------- */
.drawing-toolbar,#demoStyleChips,#activeSurfaceName,.tile-panel-more,.preview-panel figcaption,.inspector-empty .empty-region-icon{display:none!important}
.canvas-editor .tile-details>strong{font:500 16px/1.25 var(--font-display);letter-spacing:-.01em}
.canvas-editor .tile-details a.tile-product-link{display:flex;width:100%;margin-top:14px;padding:12px 16px;min-height:42px;color:#fff;border:1px solid var(--blue);text-decoration:none;font:600 12px/1.1 var(--font-ui);letter-spacing:.04em}
.canvas-editor .tile-details a.tile-product-link:hover{border-color:var(--blue-dark)}
.current-settings .section-title h2{font-size:13px}
@media (min-width:961px){
  .canvas-editor{--inspector-width:0px}
  .editor-workspace,.editor-workspace:has(#inspectorPanel:not([hidden])){grid-template-columns:var(--tile-col) minmax(0,1fr) var(--catalog-col)}
  #inspectorPanel,#inspectorPanel[hidden],.inspector-content,.inspector-panel:has(#inspectorEmpty:not([hidden])) .inspector-content{display:contents!important}
  .tile-panel{grid-column:1;grid-row:1;border-right:1px solid var(--border);padding:18px 18px 20px}
  .canvas-column{grid-column:2;grid-row:1}
  .catalog-panel{grid-column:3;grid-row:1;border-left:1px solid var(--border);padding-top:14px}
  .inspector-empty{display:flex}
}
@media (max-width:760px){
  .editor-workspace,.editor-workspace:has(#inspectorPanel:not([hidden])){grid-template-rows:minmax(0,1fr)}
  .inspector-panel{bottom:0}
}

/* start screen: two examples, everything on the first screen */
.start-screen{padding:clamp(20px,3.2vh,44px) 40px 28px}
.start-card{max-width:1560px;grid-template-columns:minmax(340px,460px) minmax(0,1fr);gap:clamp(32px,4vw,72px);align-items:start}
.start-intro h2{font-size:clamp(22px,2.1vw,34px);margin-top:0}
.start-lead{margin-bottom:clamp(12px,1.8vh,20px)}
.start-steps{margin-bottom:clamp(12px,2vh,22px)}
.start-steps li{padding:clamp(6px,1.05vh,11px) 0}
.start-catalog-note{margin-top:10px}
.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.demo-card img{aspect-ratio:4/3;max-height:calc(100dvh - var(--editor-header-height) - 250px);object-fit:cover}
.demo-card-copy strong{font-size:15px}
@media (max-width:980px){.start-card{grid-template-columns:1fr}.demo-card img{max-height:none}}
#stage[data-mode="compare"] #surfaceLabels{display:none}