/* =====================================================================
   The Locker.

   Presets are big and pictorial; the full catalogue is a quieter list of
   chips underneath. The visual weight is the argument: four looks matter
   more than ninety-eight options.
   ===================================================================== */

.locker-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 20px;
  align-items: start;
}

.locker-view {
  position: sticky;
  top: 76px;
  background: radial-gradient(120% 90% at 50% 12%, var(--panel), var(--void) 78%);
  border: 1px solid var(--edge2);
  border-radius: var(--r-lg);
  padding: 12px 14px 14px;
}
.locker-view canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  cursor: grab;
}
.locker-view canvas:active { cursor: grabbing; }
.locker-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: center;
  margin: 4px 0 0;
}

.locker-side { display: flex; flex-direction: column; gap: 14px; }
.locker-controls { display: flex; flex-direction: column; gap: 14px; }

/* ------------------------------------------------------------ presets */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.look-card {
  appearance: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 12px;
  background: var(--well);
  border: 1px solid var(--edge2);
  border-radius: var(--r-md);
  color: var(--paper);
  font-family: var(--sans);
  transition: border-color .12s ease, transform .1s ease;
}
.look-card:hover { border-color: var(--violet); transform: translateY(-2px); }
.look-card.sel {
  border-color: var(--violet);
  background: color-mix(in srgb, var(--violet) 14%, var(--well));
}
.look-card .thumb {
  display: block;
  width: auto;
  max-width: 100%;
  /* Drawn at 3.4x and shown smaller, so it stays crisp on a high-DPI
     screen instead of being upscaled from a thumbnail-sized canvas. */
  height: 112px;
  object-fit: contain;
}
.look-card b { font-size: 13.5px; font-weight: 600; }

.btn.block { width: 100%; }

/* ------------------------------------------------------- full catalogue */
.chooser { margin-top: 14px; }
.chooser:first-of-type { margin-top: 10px; }
.chooser-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 7px;
}
.chooser-options { display: flex; flex-wrap: wrap; gap: 6px; }

.chip-btn {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--edge2);
  border-radius: 999px;
  background: var(--well);
  color: var(--soft);
  font-family: var(--sans);
  font-size: 13px;
  text-transform: capitalize;
}
.chip-btn:hover { border-color: var(--violet); color: var(--paper); }
.chip-btn.sel {
  border-color: var(--violet);
  background: color-mix(in srgb, var(--violet) 18%, var(--well));
  color: var(--paper);
}
.swatch-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .4);
  flex: none;
}

/* --------------------------------------------------------------- finish */
.finish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 6px;
}
.finish-card {
  appearance: none;
  cursor: pointer;
  min-height: 44px;
  padding: 10px 10px;
  border: 1px solid var(--edge2);
  border-radius: var(--r-sm);
  background: var(--well);
  color: var(--soft);
  font-family: var(--sans);
  font-size: 13px;
}
.finish-card:hover { border-color: var(--cyan); color: var(--paper); }
.finish-card.sel {
  border-color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 14%, var(--well));
  color: var(--paper);
}

/* -------------------------------------------------------------- mobile */
@media (max-width: 900px) {
  .locker-grid { grid-template-columns: 1fr; }
  .locker-view { position: static; max-width: 380px; margin: 0 auto; }
}