/* ============================================================
   Elephant Foot — The Fitting Room (visualiser)
   ============================================================ */

.vz{padding:32px 0 96px;}

/* ---- stage: preview + control panel ---- */
.vz-stage{display:grid;grid-template-columns:minmax(0,520px) 480px;gap:56px;align-items:start;max-width:1150px;margin:0 auto;}

/* ---- preview column ---- */
.vz-preview{position:sticky;top:calc(var(--header-h) + 24px);}
.vz-clar{
  position:relative;width:100%;max-width:440px;margin:0 auto;
  background:#e7eceb;overflow:hidden;aspect-ratio:2048/2560;
}
/* two full-instrument photos, each clipped to the half that matches the
   part it represents — barrel/body from the top image, bell/body from the
   bottom image. Since every photo shares the same fixed frame, the shared
   middle section lines up pixel-for-pixel and the seam disappears. */
.vz-layer{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .45s cubic-bezier(.16,1,.3,1);
  will-change:opacity;-webkit-user-drag:none;user-select:none;pointer-events:none;
}
.vz-layer-barrel{clip-path:inset(0 0 50% 0);}
.vz-layer-bell{clip-path:inset(50% 0 0 0);}
.vz-layer.swapping{opacity:0;}

/* ---- decoration info row under the preview ---- */


/* ---- loupe: a magnified circle that follows the cursor over the preview ---- */
.vz-lens{
  position:absolute;width:170px;height:170px;border-radius:50%;
  border:2px solid var(--paper);box-shadow:0 6px 28px rgba(0,0,0,.28);
  overflow:hidden;pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:8;
}
.vz-lens.active{opacity:1;}
.vz-lens-layer{position:absolute;display:block;max-width:none;-webkit-user-drag:none;user-select:none;}
.vz-lens-barrel{clip-path:inset(0 0 50% 0);}
.vz-lens-bell{clip-path:inset(50% 0 0 0);}

.vz-caption{
  text-align:center;margin:20px auto 0;max-width:440px;width:100%;font-family:var(--sans);
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.8;text-wrap:pretty;
  min-height:calc(1.8em * 4);display:flex;flex-direction:column;justify-content:center;
}

/* ---- control panel ---- */
.vz-panel{display:flex;flex-direction:column;margin-top:-26px;}
.vz-panel-body{display:flex;flex-direction:column;}
.vz-panel-head h2{font-size:34px;margin-top:12px;}
.vz-help{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin-top:14px;text-wrap:pretty;}

.vz-group{padding:14px 0;border-top:1px solid var(--line);margin-top:14px;}
.vz-group:first-child{border-top:none;margin-top:0;padding-top:26px;}
.vz-group-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px;}
.vz-group-head h4{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--ink);}
.vz-cur{font-family:var(--serif);font-size:16px;color:var(--green);}

/* line pills */
.vz-lines{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px;}
.vz-line{
  flex:1 1 0;text-align:center;white-space:nowrap;
  font-family:var(--sans);font-size:12px;letter-spacing:.04em;
  padding:8px 14px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);
  cursor:pointer;transition:border-color .2s,background .2s,color .2s;white-space:nowrap;
}
@media (hover:hover){.vz-line:hover{border-color:var(--ink);}}
.vz-line.active{background:transparent;color:var(--ink);border-color:var(--ink);}

/* wood chips */
.vz-woods{display:flex;flex-wrap:wrap;gap:9px;}
.vz-chip{
  flex:1 1 0;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:9px;padding:8px;border:1px solid var(--line);
  background:transparent;cursor:pointer;font-family:var(--sans);font-size:12px;color:var(--ink-soft);
  transition:border-color .2s,background .2s,color .2s;
}
@media (hover:hover){.vz-chip:hover{border-color:var(--ink);}}
.vz-chip.active{border-color:var(--ink);background:transparent;color:var(--ink);}
.vz-chip .sw{width:19px;height:19px;border-radius:50%;border:1px solid rgba(0,0,0,.16);flex:0 0 auto;}

/* summary */
.vz-summary{margin-top:10px;padding-top:4px;}
.vz-srow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:14px;}
.vz-srow span{color:var(--ink-soft);}
.vz-srow a{color:var(--ink-soft);text-decoration:none;cursor:pointer;}
.vz-srow a:hover{color:var(--ink-soft);text-decoration:none;}
.vz-srow strong{font-weight:500;font-variant-numeric:tabular-nums;}
.vz-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;}
.vz-total span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.vz-total strong{font-weight:500;font-variant-numeric:tabular-nums;font-size:14px;font-family:var(--sans);}

.vz-actions{display:flex;gap:12px;margin-top:auto;padding-top:16px;align-items:center;}
.vz-actions .btn-solid{flex:1 1 auto;justify-content:center;}
.vz-note{font-size:12px;color:var(--muted);margin-top:16px;text-align:center;}

/* ---- responsive ---- */
@media (max-width:1080px){
  .vz-stage{grid-template-columns:minmax(0,420px) 420px;gap:40px;max-width:960px;}
}
@media (max-width:900px){
  .vz-stage{grid-template-columns:minmax(0,1fr);gap:8px;}
  .vz-preview{position:static;min-width:0;}
  .vz-clar{max-width:380px;}
  .vz-lens{display:none;}
  .vz-caption{max-width:380px;}
  .vz-panel{margin-top:8px;min-width:0;}
  .vz-panel-body{min-height:0 !important;min-width:0;}
  .vz-group{min-width:0;}
  .vz-lines,.vz-woods{
    min-width:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:none;mask-image:none;
  }
  .vz-lines::-webkit-scrollbar,.vz-woods::-webkit-scrollbar{display:none;}
  .vz-lines.fade-end,.vz-woods.fade-end{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  }
  .vz-lines.fade-start.fade-end,.vz-woods.fade-start.fade-end{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 34px),transparent);
  }
  .vz-lines.fade-start:not(.fade-end),.vz-woods.fade-start:not(.fade-end){
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px);
    mask-image:linear-gradient(90deg,transparent,#000 26px);
  }
  .vz-line,.vz-chip{flex:0 0 auto;white-space:nowrap;}
  .vz-group-head{flex-wrap:wrap;}
}
@media (max-width:620px){
  .vz-clar{max-width:300px;}
  .vz-actions{flex-direction:column;align-items:stretch;}
}