/* Compact floor visualizer on the home and epoxy pages (floor-viz-embed.js) */
.fv-embed{background:var(--steel-light); padding:64px 0 70px; position:relative; scroll-margin-top:72px;}
.fv-grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:40px; align-items:center;}

.fv-stage{position:relative; aspect-ratio:3/2; background:#0B1A2C; overflow:hidden; box-shadow:0 24px 60px rgba(6,13,24,0.22);}
.fv-stage img.fv-poster, .fv-stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover;}
.fv-stage canvas[hidden]{display:none;}
.fv-poster{transition:opacity .4s ease;}
.fv-poster.is-hidden{opacity:0; pointer-events:none;}
.fv-rooms{position:absolute; left:12px; top:12px; display:flex; gap:4px; z-index:2;}
.fv-rooms button, .fv-before{
  padding:8px 13px; border:none; cursor:pointer; background:rgba(6,13,24,0.72); color:var(--white);
  font:700 12.5px/1 'Inter', sans-serif; letter-spacing:0.03em; backdrop-filter:blur(6px);
}
.fv-rooms button.is-active{background:var(--white); color:var(--navy);}
.fv-before{position:absolute; right:12px; top:12px; z-index:2; user-select:none; -webkit-user-select:none; touch-action:none;}
.fv-before:hover, .fv-before[aria-pressed="true"]{background:rgba(22,86,224,0.92);}
.fv-picked{
  position:absolute; left:12px; bottom:12px; z-index:2; display:flex; align-items:center; gap:10px;
  background:rgba(6,13,24,0.78); color:var(--white); padding:7px 14px 7px 7px; backdrop-filter:blur(6px); max-width:calc(100% - 24px);
}
.fv-picked img{width:64px; height:64px; object-fit:cover; flex-shrink:0;}
@media (max-width:560px){ .fv-picked img{width:46px; height:46px;} }
.fv-picked-name{display:block; font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:22px; line-height:1; text-transform:uppercase;}
.fv-picked-code{display:block; font-size:12px; color:#B9C8DD; margin-top:2px; white-space:nowrap;}
.fv-embed.is-loading .fv-picked::after{content:""; width:14px; height:14px; margin-left:4px; border:2px solid rgba(255,255,255,0.25); border-top-color:#fff; border-radius:50%; animation:fv-spin .8s linear infinite; flex-shrink:0;}
@keyframes fv-spin{to{transform:rotate(360deg);}}
.no-webgl .fv-before, .no-webgl .fv-rooms{display:none;}

.fv-side h2{font-size:clamp(32px,3.8vw,50px); color:var(--navy); text-transform:uppercase;}
.fv-head p{color:var(--muted); margin-top:12px; font-size:16px; max-width:440px;}
.fv-lines{display:flex; gap:4px; margin:22px 0 10px; flex-wrap:wrap;}
.fv-lines button{
  padding:8px 13px; border:1px solid #D4DEE9; background:var(--white); color:var(--navy); cursor:pointer;
  font:700 13px/1 'Inter', sans-serif;
}
.fv-lines button.is-active{background:var(--navy); border-color:var(--navy); color:var(--white);}
.fv-swatches{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; min-height:208px;}
.fv-sw{
  display:flex; flex-direction:column; gap:0; padding:0; border:2px solid transparent; background:none; cursor:pointer;
  text-align:left; min-width:0; color:var(--ink);
}
.fv-sw img{width:100%; aspect-ratio:1; height:auto; object-fit:cover; background:#E1E8EF; transition:transform .15s ease;}
.fv-sw:hover img{transform:scale(1.04);}
.fv-sw span{font-size:12px; font-weight:700; padding:4px 3px 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fv-sw.is-active{border-color:var(--blue); box-shadow:0 0 0 2px rgba(22,86,224,0.2);}
.fv-more{align-items:center; justify-content:center; aspect-ratio:1; background:var(--white); border:1px dashed #B9C6D4; text-align:center;}
.fv-more strong{font-family:'Big Shoulders Display', sans-serif; font-size:26px; color:var(--blue); line-height:1;}
.fv-more span{font-weight:600; color:var(--muted); padding:2px 0 0;}
.fv-more:hover{border-color:var(--blue);}
.fv-actions{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}
.fv-actions .btn{justify-content:center;}

/* While it demos itself, a soft pulse on the swatches says "tap me". */
.fv-embed.is-demo .fv-sw.is-active{animation:fv-pulse 2.6s ease-in-out infinite;}
@keyframes fv-pulse{0%,100%{box-shadow:0 0 0 2px rgba(22,86,224,0.2);} 50%{box-shadow:0 0 0 6px rgba(22,86,224,0.12);}}
@media (prefers-reduced-motion:reduce){ .fv-embed.is-demo .fv-sw.is-active{animation:none;} }

@media (max-width:900px){
  .fv-embed{padding:36px 0 44px;}
  /* Phones: heading, then the room, then the colours under it. */
  .fv-grid{grid-template-columns:minmax(0,1fr); gap:16px;}
  .fv-side{display:contents;}
  .fv-head{order:1;}
  .fv-stage{order:2; margin:0 -32px;}
  .fv-lines{order:3; margin:4px 0 0;}
  .fv-swatches{order:4; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:88px; overflow-x:auto; min-height:0; padding-bottom:4px; scrollbar-width:none;}
  .fv-actions{order:5; margin-top:4px;}
  .fv-head p{font-size:15px;}
  .fv-picked-name{font-size:19px;}
}
@media (max-width:560px){
  .fv-stage{aspect-ratio:4/3;}
  .fv-actions{flex-direction:column; gap:8px;}
  .fv-actions .btn{width:100%;}
  .fv-rooms button, .fv-before{padding:7px 10px;}
}