/* Segmented choices, color dots and swatches: shared by the maker and the admin's catalog page */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 4px; padding: 4px; border-radius: 12px; background: var(--track);
}
.seg label {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 6px 8px;
  border-radius: 9px; cursor: pointer;
  color: var(--muted); font-size: 14px; font-weight: 500; text-align: center;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.seg label:hover { color: var(--ink); }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--raised); color: var(--ink); box-shadow: 0 1px 3px var(--shadow); }
.seg label:has(input:focus-visible), .sw:has(input:focus-visible), .same:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.seg.tall label { flex-direction: column; gap: 6px; min-height: 64px; }

.dot { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px var(--edge); }
.dot.solid { background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .55), transparent 40%), var(--bead); }
.dot.clear { background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .7), transparent 38%), color-mix(in srgb, var(--bead) 45%, transparent); }
.dot.veined {
  background:
    radial-gradient(circle at 35% 30%, rgb(255 255 255 / .5), transparent 40%),
    repeating-linear-gradient(130deg, var(--bead) 0 3px, var(--vein, color-mix(in srgb, var(--bead), #fff 40%)) 3px 4px, var(--bead) 4px 6px, color-mix(in srgb, var(--bead), #000 35%) 6px 7px);
}

.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.sw {
  position: relative; width: 34px; height: 34px; border-radius: 50%;
  background: var(--c); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--edge);
  transition: transform .15s;
}
.sw:hover { transform: scale(1.06); }
.sw input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sw:has(input:checked) { outline: 2px solid var(--ink); outline-offset: 3px; }
.sw.clear {
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .6), transparent 38%), color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 75%, transparent);
}
.sw.veined {
  background:
    radial-gradient(circle at 35% 30%, rgb(255 255 255 / .35), transparent 40%),
    repeating-linear-gradient(130deg, var(--c) 0 6px, var(--v) 6px 8px, var(--c) 8px 13px, var(--v) 13px 14px);
}