/* plushe.studio — curtain configurator (adapted from the Atelier mockup) */
.studio{padding:26px 0 60px}
.studio-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap}
.studio-grid{display:grid; grid-template-columns:1fr 372px; gap:0; border:1px solid var(--line);
  border-radius:12px; overflow:hidden; box-shadow:var(--shadow); min-height:640px}

.stage{position:relative; display:flex; flex-direction:column; min-width:0;
  background:radial-gradient(120% 80% at 50% 0%, #EFEDE7 0%, #E3E0D8 60%, #DAD6CC 100%)}
.canvas-wrap{flex:1; display:flex; align-items:center; justify-content:center; padding:26px; min-height:0}
.frame{position:relative; border-radius:3px; overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(35,32,28,.5), 0 2px 0 rgba(255,255,255,.4) inset;
  background:#cfcabf; max-width:100%; max-height:100%}
.frame canvas{display:block; max-width:100%; max-height:560px}
.stage-foot{display:flex; align-items:center; justify-content:center; padding:0 0 20px}
.seg{display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:999px; padding:3px; box-shadow:var(--shadow)}
.seg button{font:inherit; font-size:12px; border:0; background:transparent; color:var(--muted);
  padding:6px 15px; border-radius:999px; cursor:pointer; transition:.15s}
.seg button.on{background:var(--ink); color:#fff}
.seg button:hover:not(.on){color:var(--ink)}

.rail{background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0}
.rail-scroll{overflow-y:auto; flex:1; padding:22px}
.block{margin-bottom:26px}
.block-h{display:flex; align-items:center; gap:10px; margin-bottom:13px}
.block-h .n{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--brass)}
.block-h h3{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); font-weight:600}
.block-h .rule{flex:1; height:1px; background:var(--line-soft)}

.swatches{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
.sw{position:relative; cursor:pointer; border-radius:7px; overflow:hidden; aspect-ratio:1;
  box-shadow:0 1px 2px rgba(0,0,0,.12); outline:2px solid transparent; outline-offset:2px; transition:outline-color .12s}
.sw.on{outline-color:var(--brass)}
.sw .chk{position:absolute; top:5px; right:5px; width:16px; height:16px; border-radius:50%;
  background:var(--brass); color:#fff; display:none; align-items:center; justify-content:center; font-size:10px}
.sw.on .chk{display:flex}
.fab-name{margin-top:11px; display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.fab-name .nm{font-size:13.5px; font-weight:500}
.fab-name .pr{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted)}

.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{font:inherit; font-size:12.5px; border:1px solid var(--line); background:var(--card); color:var(--ink);
  padding:8px 13px; border-radius:8px; cursor:pointer; transition:.13s}
.chip:hover{border-color:var(--faint)}
.chip.on{border-color:var(--ink); background:var(--ink); color:#fff; box-shadow:var(--shadow)}

.dims{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.dims .field{margin:0}
.dims label{display:block; font-size:11px; color:var(--muted); margin-bottom:5px}
.inp2{display:flex; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.inp2 input{font:inherit; border:0; padding:9px 6px 9px 10px; width:100%; min-width:0; background:transparent; font-family:"IBM Plex Mono",monospace}
.inp2 input:focus{outline:none}
.inp2 .u{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--faint); padding-right:8px}

.slider-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px}
.slider-row .val{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink)}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:3px; background:var(--line); border-radius:3px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:17px; height:17px; border-radius:50%;
  background:var(--brass); cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.25); border:2px solid #fff}
input[type=range]::-moz-range-thumb{width:17px; height:17px; border-radius:50%; background:var(--brass); cursor:pointer; border:2px solid #fff}

.ticket{border-top:1px solid var(--line); background:var(--card); padding:16px 22px 18px; border-radius:0}
.lines{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--muted); margin-bottom:12px}
.lines .l{display:flex; justify-content:space-between; padding:2.5px 0}
.lines .l b{color:var(--ink); font-weight:500}
.lines .l.dash{border-top:1px dashed var(--line); margin-top:5px; padding-top:8px}
.ticket .total{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px}
.ticket .total .lbl{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.ticket .total .amt{font-family:"Fraunces",serif; font-size:26px}

@media (max-width:940px){
  .studio-grid{grid-template-columns:1fr}
  .stage{height:52vh; min-height:360px}
  .rail{border-left:0; border-top:1px solid var(--line)}
}