/* Floor visualizer page — loaded only on /floor-visualizer */
.viz-hero .service-hero-inner{padding-top:36px; padding-bottom:34px;}
.viz{background:var(--steel-light); padding:34px 0 60px;}
.viz-grid{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:28px; align-items:start;}
.viz-main{min-width:0;}

/* room tabs */
.viz-rooms{display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap;}
.viz-room{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border:1px solid #D4DEE9; background:var(--white); color:var(--navy);
  font:700 13.5px/1 'Inter', sans-serif; letter-spacing:0.03em; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.viz-room svg{width:17px; height:17px;}
.viz-room:hover{border-color:var(--blue);}
.viz-room.is-active{background:var(--navy); border-color:var(--navy); color:var(--white);}
/* stage */
.viz-stage{
  position:relative; aspect-ratio:3/2; background:#0B1A2C; overflow:hidden;
  box-shadow:0 18px 50px rgba(6,13,24,0.18);
}
.viz-stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.viz-loading{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; max-width:calc(100% - 32px);
  background:rgba(6,13,24,0.86); color:var(--white); padding:10px 16px;
  font-size:13.5px; font-weight:600; z-index:4;
}
.viz-loading[hidden]{display:none;}
.viz-spinner{width:16px; height:16px; flex-shrink:0; border:2px solid rgba(255,255,255,0.25); border-top-color:var(--white); border-radius:50%; animation:viz-spin .8s linear infinite;}
@keyframes viz-spin{to{transform:rotate(360deg);}}
.no-webgl .viz-spinner{display:none;}

/* The real Torginol card, so customers always see the true flake */
.viz-card{
  position:absolute; right:12px; bottom:12px; z-index:3; width:150px; padding:4px; border:none; cursor:zoom-in;
  background:rgba(6,13,24,0.8); color:var(--white); transition:width .2s ease; text-align:left;
}
.viz-card img{display:block; width:100%; height:auto; aspect-ratio:1;}
.viz-card span{display:block; font:700 11px/1 'Inter', sans-serif; letter-spacing:0.06em; text-transform:uppercase; padding:6px 2px 2px;}
.viz-card.is-big{width:min(380px, 60%); cursor:zoom-out;}
@media (max-width:560px){ .viz-card{width:96px;} .viz-card span{font-size:9.5px;} }
.viz-tools{position:absolute; right:12px; top:12px; display:flex; gap:6px; z-index:3;}
.viz-tools[hidden]{display:none;}
.viz-tool{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px;
  border:none; background:rgba(6,13,24,0.72); color:var(--white);
  font:600 12.5px/1 'Inter', sans-serif; cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:none;
  backdrop-filter:blur(6px);
}
.viz-tool svg{width:16px; height:16px;}
.viz-tool:hover, .viz-tool[aria-pressed="true"]{background:rgba(22,86,224,0.92);}
.viz-tool[hidden]{display:none;}

/* selected colour bar */
.viz-selected{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--white); padding:12px 14px; margin-top:12px; border:1px solid #DCE4EC;
}
.viz-sel-thumb{width:56px; height:56px; object-fit:cover; flex-shrink:0; background:#dfe6ee;}
.viz-sel-text{display:flex; flex-direction:column; min-width:140px; flex:1;}
.viz-sel-line{font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue);}
.viz-sel-text strong{font-family:'Big Shoulders Display', sans-serif; font-size:28px; line-height:1; text-transform:uppercase; color:var(--navy); margin-top:2px;}
.viz-sel-code{font-size:13px; color:var(--muted); margin-top:3px;}
.viz-size{display:flex; align-items:center; gap:4px;}
.viz-size[hidden]{display:none;}
.viz-size-label{font-size:11.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-right:4px;}
.viz-size button{min-width:46px; padding:8px 8px; border:1px solid #D4DEE9; background:var(--white); color:var(--navy); font:700 14px/1 'Inter', sans-serif; cursor:pointer;}
.viz-size button[aria-checked="true"]{background:var(--navy); border-color:var(--navy); color:var(--white);}
.viz-cta{white-space:nowrap;}
.viz-note{font-size:12.5px; color:var(--muted); margin-top:10px;}

/* picker */
.viz-picker{
  background:var(--white); border:1px solid #DCE4EC; padding:14px;
  position:sticky; top:92px; display:flex; flex-direction:column; max-height:calc(100vh - 110px); min-height:560px;
}
.viz-search{position:relative; margin-bottom:10px;}
.viz-search, .viz-lines, .viz-line-blurb, .viz-filters{flex-shrink:0;}
.viz-search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted);}
.viz-search input{width:100%; padding:11px 12px 11px 36px; border:1px solid #D4DEE9; font:14.5px 'Inter', sans-serif; color:var(--ink);}
.viz-search input:focus{outline:2px solid var(--blue); outline-offset:1px;}
.viz-lines{display:flex; flex-wrap:wrap; gap:4px;}
.viz-line{
  padding:7px 10px; border:1px solid #D4DEE9; background:var(--white); color:var(--navy); cursor:pointer;
  font:700 12.5px/1 'Inter', sans-serif;
}
.viz-line span{font-weight:600; color:var(--muted); margin-left:2px;}
.viz-line.is-active{background:var(--navy); border-color:var(--navy); color:var(--white);}
.viz-line.is-active span{color:#8FA5C0;}
.viz-line-blurb{font-size:12.5px; color:var(--muted); margin:10px 0 8px; line-height:1.45; min-height:36px;}
.viz-filters{display:flex; gap:4px; overflow-x:auto; padding-bottom:8px; margin-bottom:6px; scrollbar-width:thin;}
.viz-chip{
  flex-shrink:0; padding:6px 10px; border:1px solid #DCE4EC; background:var(--steel-light); color:var(--ink);
  font:600 12px/1 'Inter', sans-serif; cursor:pointer; border-radius:999px;
}
.viz-chip.is-active{background:var(--blue); border-color:var(--blue); color:var(--white);}
.viz-chip-sep{flex-shrink:0; width:1px; background:#DCE4EC; margin:2px 4px;}
.viz-grid-colours{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px;
  overflow-y:auto; flex:1; min-height:0; padding:2px 2px 6px; align-content:start; scrollbar-width:thin;
}
.viz-swatch{
  display:flex; flex-direction:column; align-items:stretch; text-align:left; gap:0;
  border:2px solid transparent; background:none; padding:0; cursor:pointer; min-width:0;
}
.viz-swatch img{width:100%; aspect-ratio:1; height:auto; object-fit:cover; background:#E4EAF0;}
.viz-swatch:hover img{filter:brightness(1.05);}
.viz-swatch.is-active{border-color:var(--blue); box-shadow:0 0 0 2px rgba(22,86,224,0.2);}
.viz-sw-name{font-size:12px; font-weight:700; color:var(--ink); padding:5px 4px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.viz-sw-code{font-size:11px; color:var(--muted); padding:0 4px 4px;}
.viz-empty{font-size:13.5px; color:var(--muted); padding:20px 4px;}
.viz-empty[hidden]{display:none;}

/* how-to */
.viz-how{padding:70px 0;}
.viz-how-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
.viz-how h2{font-size:clamp(28px,3.2vw,42px); color:var(--navy); text-transform:uppercase;}
.viz-how p{color:var(--muted); margin-top:14px; font-size:16px;}
.viz-steps{list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:18px;}
.viz-steps li{counter-increment:s; position:relative; padding-left:54px; color:var(--muted); font-size:15.5px;}
.viz-steps li::before{
  content:counter(s); position:absolute; left:0; top:-2px; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:var(--white); font:800 20px/1 'Big Shoulders Display', sans-serif;
}
.viz-steps strong{color:var(--ink); display:block;}
.viz-quote-pick{margin-top:14px; color:#C4D3E5;}
.viz-quote-pick strong{color:var(--white);}
.viz-quote-pick[hidden]{display:none;}
.viz-tm{font-size:11.5px; color:#5E7391; margin-top:28px;}

@media (max-width:1100px){
  .viz-grid{grid-template-columns:minmax(0,1fr) 320px;}
  .viz-grid-colours{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:900px){
  .viz{padding:16px 0 40px;}
  .viz-grid{grid-template-columns:minmax(0,1fr); gap:16px;}
  /* Phones: colours in a sideways strip right under the preview, so the
     floor stays on screen while you browse. */
  .viz-main{display:contents;}
  .viz-rooms{order:1; margin-bottom:-6px;}
  .viz-stage{order:2;}
  .viz-picker{order:3; position:static; max-height:none; min-height:0; padding:12px;}
  .viz-selected{order:4; margin-top:0;}
  .viz-note{order:5; margin-top:-6px;}
  .viz-line-blurb{min-height:0;}
  .viz-lines{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;}
  .viz-line{flex-shrink:0;}
  .viz-grid-colours{grid-auto-flow:column; grid-template-columns:none; grid-template-rows:repeat(2, auto); grid-auto-columns:92px; overflow-x:auto; overflow-y:hidden;}
  .viz-how-grid{grid-template-columns:1fr; gap:30px;}
  .viz-stage{aspect-ratio:4/3;}
  .viz-stage canvas{object-fit:cover;}
}
@media (max-width:560px){
  .viz-rooms{display:grid; grid-template-columns:1fr 1fr;}
  .viz-room{justify-content:center; padding:10px 8px; font-size:13px;}
  .viz-tool span{display:none;}
  .viz-selected{gap:10px;}
  .viz-sel-text strong{font-size:24px;}
  .viz-cta{flex:1; justify-content:center;}
}