:root {
  --paper: #f8f7f3;
  --panel: #fffefa;
  --ink: #252822;
  --muted: #716e65;
  --line: #dcd9cf;
  --red: #a8352f;
  --pale: #f7eae3;
  --sans: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --serif: "Noto Serif CJK SC","Songti SC","STSong","SimSun",serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button,input,select {
  font: inherit;
}

button,a,select {
  touch-action: manipulation;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

svg {
  flex-shrink: 0;
}

button,.textlink,.primary,.brand,.sectionlabel,.switcher,.plate,.shelftools,.btnrow,.railmeta,.drawinghead,.drawingfoot,.navtools,.topsearch,.titleline,.kicker,.catalogfilter,.catalogfilter label,.searchfield,.notice {
  display: inline-flex;
  align-items: center;
}

button,.primary,.textlink,.sectionlabel {
  gap: 7px;
}

.top {
  background: #fdfcf9;
  border-bottom: 1px solid var(--line);
}

.topInner {
  max-width: 1640px;
  margin: auto;
  padding: 0 clamp(20px,4.5vw,84px);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  font-weight: 750;
  font-size: 17px;
  line-height: 1;
  letter-spacing: .035em;
  white-space: nowrap;
  padding: 0;
  gap: 10px;
}

.brand>span:last-child {
  display: flex;
  align-items: center;
}

.emblem {
  display: block;
  width: 35px;
  height: 35px;
  flex: none;
}

.brandline {
  height: 16px;
  border-left: 1px solid #a9a69c;
  margin: 0 10px;
}

.top nav {
  display: flex;
  align-self: stretch;
  gap: 30px;
}

.top nav button {
  padding: 0 2px;
  position: relative;
  color: #706e65;
  font-size: 13px;
}

.top nav .navsel {
  color: var(--red);
  font-weight: 700;
}

.top nav .navsel:after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 3px;
  left: 0;
  right: 0;
  background: var(--red);
}

.navtools {
  gap: 17px;
}

.topsearch {
  height: 34px;
  background: #f3f2ed;
  color: #777469;
  border: 1px solid #e5e2d8;
  border-radius: 6px;
  padding: 0 10px;
  gap: 9px;
  font-size: 12px;
}

.topsearch kbd {
  background: #faf9f5;
  border: 1px solid #d8d5cc;
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 13px;
  color: #777469;
}

.login {
  background: #302f29;
  color: white;
  padding: 9px 14px;
  font-weight: 550;
  border-radius: 5px;
  font-size: 12px;
}

.main {
  margin: auto;
  max-width: 1640px;
  padding: 0 clamp(20px,4.5vw,84px);
}

.headline {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 22px;
  padding: 32px 0 23px;
}

.kicker,.plate,.drawinghead,.roomEn,.railmeta small,.modalhead small,.model,footer small {
  font-family: Arial,Helvetica,var(--sans);
  letter-spacing: .135em;
}

.kicker {
  font-size: 10px;
  letter-spacing: .15em;
  gap: 9px;
  font-weight: 650;
  color: #68665c;
}

.kicker i,.plate i {
  width: 17px;
  height: 2px;
  background: var(--red);
  display: inline-block;
}

.kicker span {
  color: #a8a194;
}

.headline h1,.inspector h2,.shelfhead h2,.modal h2 {
  font-family: var(--serif);
  font-weight: 650;
  margin: 0;
  letter-spacing: -.035em;
}

.headline h1 {
  font-size: clamp(37px,3.35vw,57px);
  line-height: 1.28;
  margin: 8px 0;
}

.headline p,.inspector>p,.muted,.accountintro p,.empty p,.apihelp p {
  color: var(--muted);
  line-height: 1.7;
}

.headline p {
  margin: 3px 0 0;
  font-size: 14px;
}

.switcher {
  flex-shrink: 0;
  background: #efede6;
  border: 1px solid #dcd9cf;
  border-radius: 7px;
  padding: 4px;
  gap: 2px;
}

.switcher button {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 4px;
  gap: 7px;
  color: #716d62;
}

.switcher button.on {
  background: var(--red);
  color: white;
  box-shadow: 0 1px 3px #712a2720;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0,2.03fr) minmax(272px,1fr);
  border: 1px solid #d5d1c6;
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}

.drawing {
  height: clamp(345px,30.5vw,445px);
  min-width: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #f6f3eb;
  background-image: radial-gradient(#aaa3915e .75px,transparent .8px);
  background-size: 13px 13px;
}

.drawing:before,.drawing:after {
  content: '+';
  position: absolute;
  color: #9c9786;
  font: 16px monospace;
  z-index: 2;
}

.drawing:before {
  left: 12px;
  top: 9px;
}

.drawing:after {
  right: 12px;
  bottom: 9px;
}

.drawinghead,.drawingfoot {
  position: absolute;
  z-index: 4;
  left: 24px;
  right: 24px;
  justify-content: space-between;
  pointer-events: none;
}

.drawinghead {
  top: 17px;
  font-size: 9px;
  color: #787467;
}

.plate {
  font-size: 9px;
  font-weight: 700;
  gap: 7px;
  letter-spacing: .15em;
}

.plate i {
  width: 5px;
  height: 5px;
  border-radius: 1px;
}

.drawingfoot {
  bottom: 16px;
  color: #676557;
  font-size: 11px;
  letter-spacing: .03em;
}

.drawingfoot>span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f6f3ebbd;
  padding: 3px 6px;
  border-radius: 3px;
}

.zoom {
  pointer-events: auto;
  background: #fffdf8;
  border: 1px solid #d7d2c5;
  padding: 6px;
  border-radius: 5px;
  color: #58564c;
}

.artframe {
  position: absolute;
  aspect-ratio: 3/2;
  width: min(94%,calc((clamp(345px,30.5vw,445px) - 44px)*1.5));
  top: 50%;
  left: 50%;
  transform: translate(-50%,-49%);
}

.apartment {
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%);
  -webkit-mask-image: linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%);
}

.artframe {
  mix-blend-mode: multiply;
}

.hotmap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hotmap polygon {
  fill: transparent;
  cursor: pointer;
}

.hotmap .hoverzone {
  fill: #c88c7323;
  stroke: #a8352f85;
  stroke-width: .22;
}

.pin {
  position: absolute;
  z-index: 2;
  transform: translate(-50%,-50%);
  background: #fffef9f5;
  box-shadow: 0 2px 7px #39322229;
  border: 1px solid #d5cdbf;
  border-radius: 20px;
  color: #3a382f;
  font-size: clamp(10px,.9vw,14px);
  font-weight: 600;
  padding: 5px 9px;
  gap: 5px;
  white-space: nowrap;
  line-height: 1.25;
}

.pin.on {
  background: #a8352f;
  color: white;
  border-color: #a8352f;
  box-shadow: 0 0 0 4px #a8352f25,0 3px 8px #4c271e22;
}

.pindot {
  width: 6px;
  height: 6px;
  background: #ab5a4b;
  border-radius: 50%;
}

.pin.on .pindot {
  background: #fff3e7;
}

.inspector {
  display: flex;
  flex-direction: column;
  max-height: clamp(345px,30.5vw,445px);
  padding: 23px clamp(17px,2vw,34px) 16px;
  background: #fcfbf6;
  border-left: 1px solid var(--line);
}

.railmeta {
  justify-content: space-between;
}

.railmeta .light {
  font: 600 11px var(--sans);
  color: var(--red);
  letter-spacing: .08em;
}

.railmeta i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.railmeta small {
  font-size: 9px;
  color: #7c786d;
}

.inspector h2 {
  font-size: 34px;
  line-height: 1.35;
  margin: 9px 0 1px;
}

.roomEn {
  font: italic 16px Georgia,serif;
  color: #8b8174;
  letter-spacing: .035em;
}

.inspector>p {
  margin: 9px 0 13px;
  font-size: 12px;
}

/* Room selection uses a wrapping grid on touch and pointer layouts. */
.roomMaterials {
  grid-column: 1 / -1;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 14px;
}
.roomMaterials header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.roomMaterials h3 { margin: 0; font-size: 15px; }
.roomMaterials header small { font-size: 11px; color: #736d61; }
.materialFilters { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 12px; }
.materialFilters button {
  border: 1px solid #ded9cc;
  border-radius: 20px;
  padding: 4px 11px;
  min-height: 32px;
  font-size: 12px;
  color: #655f53;
}
.materialFilters button[aria-pressed=true] { background: #494b3e; border-color: #494b3e; color: #fff; }
.materialTiles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.materialTiles button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 7px 10px;
  gap: 8px;
  border: 1px solid #ded9cd;
  border-radius: 6px;
  text-align: left;
  background: #fffef9;
}
.materialTiles button > span { flex: 1; min-width: 0; }
.materialTiles button > svg { flex: none; color: #726b5c; }
.materialTiles b, .materialTiles small { display: block; }
.materialTiles b { font-size: 13px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.materialTiles small { margin-top: 2px; font-size: 11px; color: #746d60; }
.materialTiles button[aria-pressed=true] { border-color: #a44636; background: #f8ece3; color: #843427; }
.materialTiles button[aria-pressed=true] svg { color: #923e30; }
.materialTiles button:disabled { background: #f0eee7; color: #777368; cursor: default; }
@media (hover:hover) {
  .materialTiles button:not(:disabled):hover { border-color: #a4947c; }
}
.roomMaterials button:focus-visible, .reselectMaterials:focus-visible { outline: 2px solid #944335; outline-offset: 2px; }
#catalog-heading { scroll-margin-top: 14px; }
#catalog-heading:focus, .roomMaterials:focus { outline: none; }

.shelf {
  margin-top: 31px;
  scroll-margin-top: 15px;
}

.shelfhead,.projecttools {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.shelfhead .kicker {
  font-size: 9px;
}

.titleline {
  gap: 12px;
  margin-top: 6px;
}

.titleline h2 {
  font-size: 30px;
  line-height: 1.2;
}

.titleline>span,.chip {
  color: #796455;
  border: 1px solid #ded1c4;
  background: #f1eae1;
  border-radius: 20px;
  font-size: 11px;
  letter-spacing: .02em;
  padding: 2px 9px;
}

.shelftools {
  gap: 9px;
}

.comparebtn,.reselectMaterials,.order,.btnrow>button:not(.primary),.projecttools>button,.more {
  background: #fffdf8;
  border: 1px solid var(--line);
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 12px;
  color: #58564f;
}

.order {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.order select {
  border: 0;
  background: transparent;
  font-size: 12px;
  color: inherit;
}

.productgrid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
  margin-top: 17px;
}

.pcard {
  background: #fffefa;
  border: 1px solid #dedbd0;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow .18s,border-color .18s;
}

.pcard:hover {
  border-color: #c4b7a6;
  box-shadow: 0 5px 16px #2f25100b;
}

.pvisual {
  position: relative;
  background: #eeece4;
  height: clamp(136px,12.4vw,212px);
  border-bottom: 1px solid #e7e4d9;
}

.photobtn {
  width: 100%;
  height: 100%;
  padding: 12px;
  justify-content: center;
}

.photobtn img,.detailpic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.featuretag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #faf5ebef;
  color: #87614b;
  font-size: 10px;
  letter-spacing: .06em;
  padding: 3px 7px;
  border: 1px solid #dac8b7;
  border-radius: 4px;
  pointer-events: none;
}

.checkprod {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: #fcfbf6d9;
  border: 1px solid #d8d3c7;
  border-radius: 5px;
  color: #716b5e;
}

.checkprod.active {
  background: var(--red);
  color: white;
}

.pinfo {
  padding: 14px 15px 8px;
}

.model {
  font-size: 10px;
  font-weight: 650;
  color: #9a594c;
  display: block;
}

.pname {
  display: block;
  text-align: left;
  padding: 5px 0 4px;
  font-weight: 650;
  font-size: 16px;
}

.paramshort {
  display: grid;
  gap: 4px;
  padding: 6px 0 11px;
}
.paramshort div {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: 8px;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.4;
}
.paramshort span { color: #6d695f; }
.paramshort b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.seriesGuide { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.seriesGuide img { flex: none; object-fit: contain; }
.seriesGuide figcaption { display: grid; gap: 4px; font-size: 13px; }
.seriesGuide figcaption span { color: #6d695f; }
.pfoot {
  border-top: 1px solid #e9e6dc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #7c766b;
  font-size: 11px;
  min-height: 33px;
}

.pfoot>span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pfoot button {
  padding: 6px;
}

.money,.textlink {
  color: var(--red);
}

.unpictured {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: #83796b;
}

.more {
  display: flex;
  margin: 20px auto;
}

.catalogfilter {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.catalogfilter label,.searchfield {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 0 12px;
  gap: 10px;
  border-radius: 6px;
}

.catalogfilter input,.searchfield input {
  border: 0;
  outline: 0;
  width: 100%;
  background: transparent;
}

.catalogfilter label {
  flex: 1;
}

.cartfloat {
  position: fixed;
  bottom: 22px;
  right: clamp(16px,3vw,55px);
  z-index: 8;
  padding: 10px 13px;
  border-radius: 24px;
  background: #302f29;
  color: white;
  box-shadow: 0 4px 15px #1f191c24;
  font-size: 12px;
}

.cartfloat b {
  min-width: 19px;
  padding: 1px 5px;
  color: #3e3027;
  background: #ede5d6;
  border-radius: 20px;
  text-align: center;
}

.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: #2d322b;
  color: white;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 6px;
  padding: 10px 15px;
  z-index: 99;
  font-size: 13px;
}

footer {
  margin: 38px 0 76px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #746f64;
}

footer small {
  font-size: 9px;
}

footer button {
  margin-left: auto;
}

.modal {
  padding: 0;
  border: 1px solid var(--line);
  color: var(--ink);
  width: min(540px,calc(100vw - 30px));
  max-height: min(88dvh,900px);
  overflow: auto;
  background: #fdfcf8;
  border-radius: 12px;
  box-shadow: 0 24px 90px #0003;
}

.modal.wide {
  width: min(840px,calc(100vw - 32px));
}

.modal::backdrop {
  background: #28272173;
  backdrop-filter: blur(3px);
}

.modalhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
  background: #fdfcf8;
  position: sticky;
  top: 0;
  z-index: 5;
}

.modalhead small {
  color: var(--red);
  font-size: 9px;
  font-weight: 650;
}

.modal h2 {
  margin-top: 4px;
  font-size: 26px;
}

.modalbody {
  padding: 20px 24px 24px;
}

.iconbtn {
  padding: 7px;
  color: #716b61;
}

.sectionlabel {
  font-size: 14px;
  font-weight: 650;
  display: flex;
  margin: 13px 0 7px;
}

.textlink {
  font-size: 12px;
  padding: 4px 0;
  font-weight: 600;
}

.btnrow {
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 15px;
}

.primary {
  justify-content: center;
  display: inline-flex;
  align-items: center;
  background: var(--red);
  color: white;
  border-radius: 5px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 550;
}

.modal p,.muted {
  line-height: 1.65;
}

.modal input,.modal select,.catalogfilter select,.catalogfilter input {
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: #fffefa;
  color: var(--ink);
  border-radius: 5px;
  max-width: 100%;
}

.modal .searchfield input,.catalogfilter input {
  border: 0;
  background: none;
}

.searchfield {
  display: flex;
}

.searchitem,.actiontile {
  display: flex;
  width: 100%;
  text-align: left;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}

.searchitem img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.searchitem>span,.actiontile>span {
  flex: 1;
}

.searchitem small,.detailtop small,.actiontile small,.line small,.comparetable small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 4px;
}

.detailtop {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 20px;
  align-items: center;
}

.detailpic {
  background: #f0eee6;
  border-radius: 6px;
  width: 100%;
  height: 135px;
  padding: 9px;
}

.detailtop h3 {
  font-family: Georgia,serif;
  font-size: 25px;
  margin: 9px 0 2px;
}

.detailtop p {
  margin: 3px 0 7px;
  color: var(--muted);
}

.detailtop strong {
  color: var(--red);
}

.specs {
  font-size: 13px;
  margin: 5px 0 10px;
}

.specs>div {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
}

.specs dt {
  color: var(--muted);
}

.specs dd {
  margin: 0;
  line-height: 1.55;
}

.tablewrap {
  overflow: auto;
}

.comparetable {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
}

.comparetable th,.comparetable td {
  text-align: left;
  border: 1px solid var(--line);
  padding: 9px;
  line-height: 1.65;
  min-width: 122px;
}

.comparetable tbody th {
  font-weight: 500;
  background: #f2f0e8;
  min-width: 75px;
}

.comparetable img {
  width: 85px;
  height: 70px;
  object-fit: contain;
  display: block;
}

.tabbar {
  display: flex;
  gap: 3px;
  border-bottom: 1px solid var(--line);
  overflow: auto;
  margin-bottom: 15px;
}

.tabbar button {
  padding: 9px 11px;
  font-size: 13px;
  white-space: nowrap;
}

.tabbar .active {
  color: var(--red);
  border-bottom: 2px solid var(--red);
}

.filepicker,.empty,.accountintro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}

.filepicker {
  background: #f3f1e9;
  padding: 22px;
  margin: 14px 0;
  border: 1px dashed #b3a899;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
}

.filepicker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  cursor: pointer;
}

.filepicker span,.filepicker svg {
  color: #786c5f;
}

.notice {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  background: #eff2e9;
  border: 1px solid #d7dfcb;
  border-radius: 5px;
  margin: 10px 0;
  color: #47523c;
}

.notice:has(.previewline),.notice.warn {
  display: block;
}

.notice.warn {
  background: #fbf1de;
  border-color: #e6d2ae;
  color: #725d33;
}

.notice p {
  margin: 4px 0;
}

.previewline {
  font-size: 12px;
  margin-top: 3px;
}

.error {
  border-left: 3px solid var(--red);
  background: var(--pale);
  color: var(--red);
  padding: 8px 12px;
}

.apihelp,.showmode {
  margin-top: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

summary {
  cursor: pointer;
}

.apihelp code {
  display: block;
  margin-top: 9px;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.adminrow,.history {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.adminrow p {
  margin: 4px 0;
}

.adminrow input {
  display: block;
  margin-top: 7px;
}

.history {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.stack,.formline,.projecttools label,.stack label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stack {
  gap: 12px;
}

.formline {
  margin-top: 10px;
}

.projecttools label {
  flex: 1;
  color: var(--muted);
  font-size: 12px;
}

.projectgroup {
  margin-top: 16px;
}

.projectgroup .sectionlabel {
  background: #efede5;
  padding: 7px 9px;
  border-radius: 4px;
  font-size: 12px;
}

.line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.line>span:first-child {
  flex: 1;
}

.qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty button {
  padding: 4px;
  background: #f1efe7;
  border-radius: 3px;
}

.empty {
  border: 1px dashed var(--line);
  padding: 28px 20px;
  border-radius: 8px;
  margin: 15px 0;
}

.empty svg,.accessicon {
  color: var(--red);
}

.empty h3,.empty p,.accountintro p {
  margin: 1px;
}

.accountintro {
  padding: 15px;
  gap: 12px;
}

.accountintro h3 {
  margin: 0;
}

.accessicon {
  background: var(--pale);
  border-radius: 12px;
  padding: 13px;
}

.mt {
  margin-top: 12px;
}

.showmode summary svg {
  vertical-align: middle;
  margin-right: 5px;
}

.drawing.large {
  height: auto;
  aspect-ratio: 3/2;
  border-radius: 8px;
}

.drawing.large .artframe {
  width: 93%;
}

@media(min-width:1550px) {
  .drawing {
    height: 460px;
  }
  .inspector {
    max-height: 460px;
  }
  .artframe {
    width: min(92%,645px);
  }
}

@media(max-width:1000px) {
  .topInner {
    gap: 10px;
    height: 64px;
  }
  .top nav {
    gap: 17px;
  }
  .topsearch kbd,.topsearch span {
    display: none;
  }
  .navtools {
    gap: 8px;
  }
  .workspace {
    grid-template-columns: minmax(0,1.7fr) minmax(245px,1fr);
  }
  .drawing,.inspector {
    height: 340px;
    max-height: 340px;
  }
  .artframe {
    width: min(96%,460px);
  }
  .inspector {
    padding: 15px 18px;
  }
  .inspector h2 {
    font-size: 30px;
  }
  .shelf {
    margin-top: 25px;
  }
  .productgrid {
    gap: 10px;
  }
  .headline {
    padding: 25px 0 18px;
  }
  .drawinghead,.drawingfoot {
    left: 14px;
    right: 14px;
  }
  .pinfo {
    padding: 12px 10px 6px;
  }
}

@media(max-width:750px) {
  .brand {
    font-size: 15px;
    gap: 7px;
  }
  .brandline {
    margin: 0 6px;
  }
  .top nav {
    display: none;
  }
  .topInner {
    height: 58px;
  }
  .topsearch {
    border: 0;
    background: none;
  }
  .headline {
    display: block;
  }
  .headline h1 {
    font-size: 36px;
  }
  .headline p {
    font-size: 13px;
  }
  .switcher {
    margin-top: 15px;
  }
  .workspace {
    grid-template-columns: 1fr;
  }
  .drawing {
    height: auto;
    aspect-ratio: 1.59;
    max-height: none;
  }
  .artframe {
    width: 88%;
  }
  .drawinghead,.drawingfoot {
    left: 13px;
    right: 13px;
  }
  .drawinghead {
    top: 11px;
  }
  .drawingfoot {
    bottom: 9px;
  }
  .drawingfoot>span {
    font-size: 10px;
  }
  .inspector {
    height: auto;
    max-height: unset;
    border: 0;
    border-top: 1px solid var(--line);
    padding: 14px 17px 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    align-items: baseline;
  }
  .railmeta {
    grid-column: 1/-1;
    display: flex;
  }
  .inspector h2 {
    font-size: 24px;
    margin: 4px 0;
  }
  .roomEn {
    font-size: 14px;
  }
  .inspector>p {
    grid-column: 1/-1;
    margin: 2px 0 5px;
  }
  .materialFilters { gap: 6px; }
  .materialFilters button { min-height: 44px; padding-inline: 11px; }
  .roomMaterials { padding-top: 11px; margin-top: 5px; }
  .shelfhead { flex-wrap: wrap; }
  .productgrid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .pvisual {
    height: clamp(118px,25vw,180px);
  }
  .titleline h2 {
    font-size: 24px;
  }
  .shelftools {
    gap: 5px;
  }
  .shelftools button,.order {
    padding: 6px;
    font-size: 11px;
  }
  .order select {
    font-size: 11px;
  }
  .shelfhead {
    align-items: center;
  }
  .main {
    padding: 0 16px;
  }
  .modalbody {
    padding: 15px;
  }
  .modalhead {
    padding: 14px 16px;
  }
  .modal h2 {
    font-size: 23px;
  }
  .pin {
    font-size: 10px;
    padding: 4px 7px;
  }
  .detailtop {
    grid-template-columns: 102px 1fr;
    gap: 12px;
  }
  .detailpic {
    height: 110px;
  }
  .cartfloat {
    right: 13px;
    bottom: 16px;
  }
  .history {
    display: block;
  }
  .catalogfilter {
    gap: 5px;
  }
  .catalogfilter input,.catalogfilter select {
    min-width: 0;
    font-size: 12px;
  }
  .toast {
    bottom: 65px;
    white-space: nowrap;
  }
  .line {
    gap: 5px;
  }
  footer small {
    display: none;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior: auto!important;
    transition: none!important;
  }
}

.zonefield {
  max-width: 190px;
  min-width: 135px;
}

.zonechip {
  display: inline-block;
  font-style: normal;
  color: var(--red);
  background: var(--pale);
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 5px;
  font-size: 11px;
}

@media(max-width:750px) {
  .topInner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 8px;
    height: auto;
    padding-top: 10px;
  }
  .top nav {
    display: flex;
    grid-column: 1/-1;
    grid-row: 2;
    justify-content: flex-start;
    gap: 24px;
    height: 36px;
  }
  .top nav button {
    padding: 5px 0;
    font-size: 12px;
  }
  .navtools {
    grid-column: 2;
    grid-row: 1;
  }
  .top .brand {
    justify-self: start;
  }
}

.collectionlink { display: flex; margin: 0 0 14px auto; color: var(--red); padding: 4px 1px; font-size: 13px; }
.collections { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; margin: 0 0 25px; padding: 20px 24px; }
.collections header { display:flex; align-items:baseline; gap:12px; margin-bottom:15px; }
.collections h2 { margin:0; font:600 22px var(--serif); }
.collectiongroups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 30px; }
.collectiongroup h3 { margin:0 0 6px; font-size:12px; color:var(--muted); }
.collectiongroup > div { display:flex; flex-wrap:wrap; gap:5px; }
.collectiongroup button { font-size:12px; padding:6px 9px; border:1px solid var(--line); border-radius:5px; background:#faf9f5; }
.collectiongroup button[aria-pressed=true] { border-color:var(--red); color:var(--red); background:var(--pale); }
.collectiongroup small { font:11px var(--sans); color:var(--muted); }
.collectionnote { color:var(--muted); font-size:13px; }
.ecosystem { display:inline-block; margin-left:7px; color:#35654c; background:#e9f2e9; border-radius:3px; padding:2px 5px; letter-spacing:0; font:500 10px var(--sans); }
.subchip { margin-inline-start:4px; }
@media(max-width:750px) { .collections { padding:16px; } .collectiongroups { grid-template-columns:1fr; gap:12px; } .collectionlink { margin-bottom:8px; } }

.unpictured { flex-direction:column; text-align:center; min-width:0; }
.unpictured small { font-size:10px; color:var(--muted); }

.cardvariant { color:var(--muted); font-size:12px; line-height:1.5; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.targetBar,.cardQuote,.quoteItemControls,.issuedLine,.quoteDocLine,.quoteTotal,.qtyEdit{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.targetBar,.roomSetup,.quoteTotal{background:#f1eee5;border:1px solid var(--line);border-radius:8px;padding:12px;margin:10px 0}
.targetBar select,.roomSetup select,.quoteItemControls select,.roomSetup input{min-height:42px;min-width:0;border:1px solid var(--line);background:white;border-radius:5px;padding:6px 8px}
.targetBar button,.quoteEditor button,.grabProduct,.quickAdd{min-height:40px;padding:6px 10px;border-radius:5px}
.targetBar button,.quoteEditor button:not(.primary),.grabProduct{border:1px solid var(--line);background:var(--panel)}
.cardQuote{border-top:1px solid var(--line);padding:9px 0}.cardQuote>div:first-child{width:100%;display:flex;justify-content:space-between;gap:6px}
.quickAdd{background:var(--pale);color:var(--red);font-size:13px}.grabProduct{touch-action:none;cursor:grab;color:var(--muted);font-size:11px;padding:5px}
.dropTray{position:fixed;z-index:20;bottom:0;left:0;right:0;padding:10px max(12px,4vw) max(14px,env(safe-area-inset-bottom));background:#fffdf8;box-shadow:0 -6px 22px #28211926}
.dropTray>div{display:flex;gap:6px;flex-wrap:wrap;max-height:35vh;overflow-y:auto}.dropTray button{background:var(--pale);min-height:42px;padding:6px 14px;border-radius:5px}.dropTray b{display:block;margin-bottom:6px}
.quoteEditor{display:grid;gap:12px}.quoteEditor h3{margin:5px 0 10px}.roomSetup details{margin:10px 0}.roomSetup details summary{padding:8px 0}
.quoteGroup,.quoteDocument section{border-top:1px solid var(--line);padding-top:12px}.quoteItem,.quoteDocLine{padding:10px 0;border-bottom:1px solid var(--line)}
.quoteItem{display:grid;grid-template-columns:1fr auto;gap:6px}.quoteItemHead small,.quoteDocLine small{display:block;color:var(--muted);font-size:12px}.quoteItem small:last-child{text-align:right}.quoteItemControls{grid-column:1/-1}
.qtyEdit{gap:0;flex-wrap:nowrap}.qtyEdit input{width:52px;min-width:0;text-align:center;border:1px solid var(--line);border-radius:0;height:40px}.qtyEdit button{border:1px solid var(--line);border-radius:3px;padding:4px;min-width:32px;height:40px}
.quoteTotal{justify-content:space-between}.quoteTotal b{color:var(--red);font-size:20px}.quoteTotal small{width:100%}.quoteDocLine{flex-wrap:nowrap}.quoteDocLine>span{flex:1}.quoteDocLine img{width:55px;height:55px;object-fit:contain}.issuedLine{padding:7px 0}.issuedLine a{color:var(--red)}
@media(max-width:750px){.quoteItem{grid-template-columns:1fr}.quoteItem small:last-child{text-align:left}.targetBar{gap:5px}.targetBar b{font-size:13px}.quickAdd{max-width:100%;white-space:normal}.cartfloat{max-width:96vw;bottom:max(12px,env(safe-area-inset-bottom))}.cardQuote .qtyEdit{gap:0}.cardQuote .qtyEdit button{min-width:28px}.cardQuote .qtyEdit input{width:40px}}

.movePortion{display:inline-flex;align-items:center;gap:4px;font-size:12px}.movePortion input{width:45px;min-width:0;height:40px;border:1px solid var(--line);text-align:center}.dropTray.inModal{z-index:5;position:sticky;bottom:0}

.seriespick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 16px}.seriespick>span{font-size:13px;color:var(--muted);margin-right:3px}.seriespick button{min-height:42px;min-width:48px;justify-content:center;padding:6px 13px;border:1px solid #d9d1c4;border-radius:20px;background:white;color:#453e35}.seriespick button[aria-pressed="true"]{border-color:#a73530;background:#f9eae3;color:#8a3027}.model .ecosystem:first-child{margin:0 6px 0 0}

/* Wall panels share one order button per family and catalog finish. */
.panelShortcut,.panelBack{margin:10px 0 14px}
.panelShortcut{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;min-height:44px;border:1px solid #d9cec0;border-radius:7px;background:#f6f1e8;color:#443a30;font-weight:650}
.panelHint{font-size:14px;color:#635d54;margin:12px 0 16px}
.panelButton{align-self:start;display:flex;align-items:center;gap:12px;text-align:left;width:100%;min-height:96px;background:#fffdf8;border:1px solid #dbd4c7;border-radius:9px;padding:15px;color:var(--ink)}
.panelButton:hover,.panelButton:focus-visible{border-color:var(--red);background:#fdf7ef}
.panelButton>span:nth-child(2){display:grid;gap:3px;min-width:0}
.panelButton>svg{margin-left:auto;flex-shrink:0;color:#76695b}
.panelButton small{font-size:12px;color:#685a49}.panelButton strong{font-size:19px;line-height:1.25}
.panelButton span span{font-size:12px;color:#605b51}
.panelSample{display:block;width:35px;height:35px;border:1px solid #0003;border-radius:7px;box-shadow:inset 0 0 0 3px #ffffff55;flex-shrink:0}
.panelRoom,.panelOrder h3,.panelCommit{display:flex;align-items:center;gap:10px}.panelRoom{font-weight:650}.panelRoom select{min-width:112px;min-height:44px;padding:7px 12px;background:white;border:1px solid var(--line);border-radius:5px}
.panelOrder h3{font-size:16px;border-bottom:1px solid #cdc5b5;padding:10px 0;margin:12px 0 0}.panelOrder h3 small{font-size:12px;color:#726a5f;font-weight:400}
.panelLine{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px;border-bottom:1px solid #e8e1d6;padding:9px 0}
.panelLine details{min-width:0}.panelLine summary{display:block;cursor:pointer;padding:3px 0;min-height:44px}
.panelLine summary b,.panelLine summary span{display:block;overflow-wrap:anywhere}.panelLine summary b{font-size:15px}.panelLine summary span,.panelSpecs{font-size:12px;color:#6b6155}.panelSpecs{padding:8px 0;line-height:1.6}
.panelQty{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;background:#fff}
.panelQty button,.panelQty input{width:44px;height:44px;min-width:0;display:grid;place-items:center;text-align:center;background:transparent;border:0;color:var(--ink)}
.panelQty input{border-inline:1px solid var(--line);border-radius:0;font-size:16px;padding:0}.panelQty button:disabled{opacity:.4}
.panelSingle{min-height:44px}
.panelCommit{position:sticky;bottom:0;z-index:2;justify-content:space-between;flex-wrap:wrap;background:#fdfcf8;box-shadow:0 -3px 10px #51402c12;border-top:1px solid var(--line);padding:12px 3px max(12px,env(safe-area-inset-bottom));margin-top:8px}
.panelCommit span{font-size:14px}.panelCommit .primary{min-height:44px}.panelCommit .primary:disabled{opacity:.5}.panelCommit p{flex-basis:100%;margin:0;color:var(--red)}
@media(max-width:640px){.panelButton{min-height:84px;gap:8px;padding:10px}.panelSample{width:22px;height:28px}.panelButton>svg{display:none}.panelButton strong{font-size:17px}.panelButton small,.panelButton span span{font-size:11px}.panelLine{gap:6px}.panelOrder h3{margin-top:6px}.panelCommit{font-size:13px}}

.panelShortcuts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}.panelShortcuts .panelShortcut{margin:0}

.panelCover{width:48px;height:48px;flex:none;object-fit:contain}
.panelLine summary.panelPhotoSummary{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:10px;align-content:center}
.panelPhotoSummary img{grid-row:span 2;width:42px;height:42px;object-fit:contain;align-self:center}
@media(max-width:640px){.panelCover{width:36px;height:36px}.panelLine summary.panelPhotoSummary{grid-template-columns:30px minmax(0,1fr);column-gap:6px}.panelPhotoSummary img{width:30px;height:30px}}

@media (min-width:751px) {
  .workspace { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); }
  .spaceVisual > .drawing { flex: 1; height: auto; max-height: none; min-height: clamp(340px,29vw,440px); }
  .workspace > .inspector { min-width: 0; height: auto; max-height: none; }
}
@media (pointer:coarse) {
  .materialFilters button, .reselectMaterials { min-height: 44px; }
}

.spaceVisual { display: flex; flex-direction: column; min-width: 0; }
.sceneDecor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.campaignCard {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 17px;
  padding: 0 18px 0 0;
  text-align: left;
  color: #3b3328;
  background: linear-gradient(105deg,#ebe3ed,#f8f2ed 56%,#f1e9df);
  border: 0;
  border-top: 1px solid #d9c8aa;
  border-radius: 0;
}
.campaignCard:focus-visible { outline: 2px solid #913b31; outline-offset: -3px; }
.campaignThumb { width: 94px; height: 78px; flex-shrink: 0; overflow: hidden; background: #5c614c; }
.campaignThumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 57% 38%; }
.campaignIntro { min-width: 0; }
.campaignIntro small { display: block; font-size: 11px; line-height: 1.4; letter-spacing: .11em; color: #804237; }
.campaignIntro strong { display: block; margin-top: 2px; font-size: 23px; font-family: var(--serif); line-height: 1.2; }
.campaignIntro i { font-size: .72em; font-weight: 400; font-style: normal; color: #94654e; }
.campaignAction { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 6px 10px; border: 1px solid #c6b49c; border-radius: 20px; font-size: 12px; white-space: nowrap; }
.campaignCard:hover .campaignAction { border-color: #995b49; color: #823c30; }
.campaignOptions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.campaignOptions button { min-height: 44px; padding: 6px 15px; border: 1px solid var(--line); border-radius: 22px; font-size: 13px; }
.campaignOptions button[aria-pressed=true] { background: #4a4c40; color: #fff; border-color: #4a4c40; }
.campaignGallery figure { margin: 0; }
.campaignGallery figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: min(62vh,540px); object-fit: contain; background: #efede5; border-radius: 5px; }
.campaignGallery figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 9px; font-size: 12px; color: #686256; }
.campaignGallery a { display: inline-flex; align-items: center; color: #874232; }
@media (max-width:750px) {
  .campaignCard { padding-right: 12px; gap: 12px; }
  .campaignThumb { width: 72px; height: 62px; }
  .campaignIntro strong { font-size: 19px; }
}

/* Customer ordering uses separate purchase totals and authenticated work areas. */
.targetBar .orderEntry { color:#84392f; border-color:#d0b3a3; margin-left:auto; }
.orderFromQuote,.ordWelcome,.orderCenter { color:#37362e; }
.orderFromQuote { display:flex; align-items:center; gap:12px; margin:12px 0; padding:12px; background:#f4efe4; border:1px solid var(--line); border-radius:8px; }
.orderFromQuote span { flex:1; }
.orderFromQuote small,.ordRows small,.ordList small,.ordMetrics small,.ordInvite small { display:block; color:#6c685c; font-size:12px; }
.orderFromQuote button,.orderCenter button,.ordWelcome button { min-height:40px; }
.orderFromQuote button,.orderCenter button:not(.primary) { border:1px solid var(--line); padding:6px 11px; border-radius:6px; }
.ordWelcome { padding:12px 0 16px; }
.ordWelcome p { margin:8px 0 18px; max-width:38em; }
.orderCenter fieldset { border:0; min-width:0; padding:0; margin:0; }
.ordTabs,.ordActions { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px; }
.ordTabs button[aria-pressed=true] { color:#fff; background:#514d3d; }
.ordStack { display:grid; gap:10px; }
.ordStack>button { justify-self:start; }
.orderCenter h3,.orderCenter h4 { margin:7px 0; }
.orderCenter label { display:grid; gap:4px; font-size:13px; }
.orderCenter select,.orderCenter input,.orderCenter textarea { min-width:0; max-width:100%; padding:8px; border:1px solid var(--line); border-radius:5px; background:#fffdf9; color:inherit; }
.orderCenter textarea { min-height:58px; }
.ordMetrics { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:12px 0; }
.ordMetrics>div { display:grid; align-content:start; gap:4px; padding:13px; background:#f3efe6; border-radius:8px; }
.ordMetrics b { font-size:21px; }
.ordListHead,.ordList button,.ordRows li { display:flex; align-items:center; justify-content:space-between; gap:9px; }
.ordListHead { margin:12px 0 7px; flex-wrap:wrap; }
.ordList { display:grid; gap:5px; }
.ordList button { width:100%; text-align:left; background:#fffdf8; }
.ordList button span:last-child,.ordRows li span:last-child { text-align:right; }
.ordRows { list-style:none; margin:0; padding:0; }
.ordRows li,.ordEditLine { border-bottom:1px solid var(--line); padding:9px 0; overflow-wrap:anywhere; }
.ordEditLine>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:6px 0; }
.orderCenter summary { cursor:pointer; padding:9px 0; color:#7b4234; }
.ordInvite { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ordInvite svg { width:135px; height:135px; max-width:100%; }
.ordInvite>div { flex:1; min-width:150px; }
@media(max-width:750px) {
 .orderCenter button,.orderFromQuote button,.ordWelcome button {min-height:44px;}
 .ordEditLine>div {grid-template-columns:repeat(2,minmax(0,1fr));}
 .targetBar {flex-wrap:wrap;}
 .targetBar .orderEntry {margin-left:0;}
}

.top nav .adminNav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--red);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.top nav .adminNav:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media(max-width:750px) {
  .top nav { gap: clamp(8px,4vw,24px); height: 44px; }
  .top nav .adminNav { margin-left: auto; font-size: 12px; }
}

.portalLink { display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; min-height:44px; }
.accountCard .authTabs { display:flex; padding:3px; gap:4px; border-radius:9px; background:#f0ece5; margin:14px 0 18px; }
.accountCard .authTabs a { flex:1; min-height:44px; display:grid; place-items:center; border-radius:7px; text-decoration:none; font-weight:550; color:#585247; }
.accountCard .authTabs a[aria-current="page"] { background:white; color:#963e32; box-shadow:0 1px 4px #302a211c; }
.accountCard.adminAuth { border-top:4px solid #364c5d; }
.accountCard.adminAuth small,.accountCard.adminAuth .authTabs a[aria-current="page"] { color:#364c5d; }
.accountPage .adminAuth button,.accountPage .adminAuth .authContinue { background:#364c5d; color:white; }
.accountCard .authContinue { display:inline-grid; min-height:44px; padding:0 18px; place-items:center; border-radius:6px; text-decoration:none; }

.top nav .salesNav { display:inline-flex; align-items:center; min-height:44px; color:#37584c; font-size:13px; font-weight:600; white-space:nowrap; text-decoration:none; }
.staffReviewLink { text-decoration:none; margin-bottom:12px; }
.salesReviewRow { padding:14px 0; border-top:1px solid var(--line); }
.accountPage .salesReviewRow form { display:flex; flex-wrap:wrap; gap:8px; }
.accountPage .salesReviewRow button { min-height:44px; padding:8px 15px; }
.accountPage .salesReviewRow button[value="reject"],.accountPage .salesReviewRow button[value="disable"] { background:#eeeae3; color:#513f33; }
@media(max-width:750px) {
  .top nav { justify-content:space-between; gap:5px; }
  .top nav .salesNav,.top nav .adminNav { font-size:12px; margin-left:0; }
}