/* =====================================================================
   RUMONTÉ — Faucets page. Reuses css/sinks.css (page-head, filterbar,
   chip, sink-grid, scard, qv-*). Adds: 360° spin badge + viewer.
   ===================================================================== */

/* 360° badge on grid cards */
.scard .tag.spin360{background:var(--ink);color:#fff;display:inline-flex;align-items:center;gap:.3em}
.scard .tag.spin360::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}

/* faucet shots are tall product renders — contain on surface, not crop */
.scard .img img.main,.scard .img img.alt{object-fit:contain;padding:8%}
.qv-main img,.qv-main .spin-img{object-fit:contain;padding:6%}

/* 360 viewer */
.qv-main{cursor:grab;user-select:none;-webkit-user-select:none}
.qv-main:active{cursor:grabbing}
.spin-img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.spin-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:.45em;font-size:.78rem;color:var(--ink-soft);
  background:rgba(255,255,255,.86);backdrop-filter:blur(6px);padding:.4em .8em;
  border:1px solid var(--line);transition:opacity .3s}