/* =====================================================
   🎨 捏捏工房（js/workshop.js）
   手機：預覽喺上、選項喺下；桌面：左右並排
   ===================================================== */
.ws { display: grid; gap: 1.4rem; align-items: start; min-width: 0; }
@media (min-width: 860px) {
  .ws { grid-template-columns: minmax(300px, 380px) 1fr; gap: 1.8rem; }
  .ws-stage { position: sticky; top: 84px; }
}
.ws-stage, .ws-panel { min-width: 0; }

/* ---------- 預覽卡 ---------- */
.ws-card {
  background: linear-gradient(180deg, #fff8e6, var(--paper, #fbe9c4)); border: 4px solid var(--brown); border-radius: 28px;
  box-shadow: 0 0 0 7px var(--red), 0 0 0 10px var(--brown), 0 16px 30px rgba(74, 36, 20, .25);
  padding: 1rem .9rem 1.1rem; margin: 10px; text-align: center;
}
.ws-preview {
  position: relative; width: min(300px, 100%); aspect-ratio: 1; margin: 0 auto;
  border-radius: 22px; border: 3px dashed #d9b98f; overflow: hidden;
  background: repeating-conic-gradient(from 0deg at 50% 62%, #fbe2b4 0 10deg, #fff1d2 10deg 20deg);
}
.ws-canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }
.ws-nametag {
  position: absolute; left: 50%; top: 10px; translate: -50% 0; max-width: 90%;
  background: #fff; border: 3px solid var(--brown); border-radius: 999px; padding: .1em .8em;
  font-family: var(--font-cute); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 3px 0 var(--brown); rotate: -3deg;
}
.ws-tools { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem; margin: .9rem 0 .5rem; }
.ws-tools .btn { box-shadow: 0 3px 0 var(--brown); }
.ws-btn-random.ws-spin { animation: wsSpin .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes wsSpin { from { rotate: 0deg; } to { rotate: 360deg; } }
.ws-code { margin: .35rem 0 .2rem; display: flex; justify-content: center; align-items: center; gap: .45rem; flex-wrap: wrap; }
.ws-code-k { font-size: .78rem; font-weight: 900; background: var(--brown); color: var(--cream); border-radius: 99px; padding: .1em .65em; }
.ws-code-v { font-family: var(--font-sign); font-weight: 400; letter-spacing: .06em; color: var(--red); font-size: 1.05rem; word-break: break-all; }
.ws-summary { margin: 0; font-family: var(--font-cute); font-size: .98rem; line-height: 1.5; }

/* ---------- 選項 ---------- */
.ws-groups { display: grid; gap: .85rem; }
.ws-group {
  background: #fffaf0; border: 3px solid var(--brown); border-radius: 20px; padding: .65rem .75rem .75rem;
  box-shadow: 0 4px 0 var(--brown);
}
.ws-label { display: flex; align-items: center; gap: .4rem; font-family: var(--font-cute); font-size: 1.08rem; margin: 0 0 .5rem; }
.ws-label-ic { font-size: 1.15rem; }
.ws-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.ws-chip {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 44px;
  padding: .2rem .75rem .2rem .3rem; border: 2.5px solid var(--brown); border-radius: 999px; background: #fff;
  font-weight: 700; font-size: .9rem; color: var(--brown); box-shadow: 0 3px 0 var(--brown);
  transition: transform .12s, background .2s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
}
.ws-chip:hover { background: var(--pink-soft, #ffd9e6); transform: translateY(-2px); }
.ws-chip:active { transform: translateY(2px) scale(.96); box-shadow: 0 1px 0 var(--brown); }
.ws-chip:focus-visible, .ws-name:focus-visible { outline: 3px solid var(--gold, #f6b830); outline-offset: 2px; }
.ws-chip[aria-pressed="true"] {
  background: linear-gradient(180deg, #ffe680, var(--gold, #f6b830)); box-shadow: 0 3px 0 var(--brown), 0 0 0 3px #fff, 0 0 0 5px var(--red);
  animation: wsChipPop .35s;
}
@keyframes wsChipPop { 0% { transform: scale(.85); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
.ws-ic { width: 32px; height: 32px; display: grid; place-items: center; font-size: 1.3rem; flex: none; border-radius: 50%; }
.ws-ic-cv { width: 32px; height: 32px; display: block; }
.ws-size-ic { background: var(--pink-soft, #ffd9e6); border: 2px solid var(--brown); font-size: .8rem; width: 26px; height: 26px; margin: 3px; }
.ws-size-ic.big { width: 32px; height: 32px; margin: 0; font-size: 1.1rem; }
.ws-price-t { font-family: var(--font-cute); font-weight: 400; font-size: 1rem; }

/* 顏色：圓形色板 + 名 */
.ws-swatch {
  width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--brown); flex: none;
  box-shadow: inset -4px -5px 0 rgba(74, 36, 20, .12), inset 4px 4px 0 rgba(255, 255, 255, .55);
}

/* 名 */
.ws-name {
  width: 100%; font: inherit; font-family: var(--font-cute); font-size: 1.1rem; padding: .55em .9em;
  border: 2.5px solid var(--brown); border-radius: 14px; background: #fff; color: var(--brown);
}

/* ---------- 落單 ---------- */
.ws-order {
  margin-top: 1rem; background: var(--brown); color: var(--cream); border-radius: 22px; padding: .9rem 1rem 1rem;
  display: grid; gap: .55rem; box-shadow: 0 6px 0 #2a1209;
}
.ws-price-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.ws-price { font-family: var(--font-en, "Fredoka"), sans-serif; font-weight: 700; font-size: 1.15rem; }
.ws-price-total { color: var(--bulb, #ffe680); font-size: 1.45rem; }
.ws-qty { color: var(--brown); }
.ws-qty button:disabled { opacity: .35; cursor: not-allowed; }
.ws-lead { margin: 0; font-size: .9rem; line-height: 1.55; opacity: .95; }
.ws-note { margin: 0; font-size: .88rem; line-height: 1.5; background: rgba(255, 255, 255, .1); border-radius: 12px; padding: .4em .7em; }
.ws-add { width: 100%; font-size: 1.12rem; }
.ws-add.ws-added { animation: bump .5s; }

@media (max-width: 420px) {
  .ws-card { padding: .8rem .6rem 1rem; }
  .ws-group { padding: .55rem .55rem .65rem; }
  .ws-chip { font-size: .85rem; padding-right: .6rem; gap: .2rem; }
  .ws-tools .btn { font-size: .82rem; padding: .4em .8em; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-chip[aria-pressed="true"], .ws-btn-random.ws-spin, .ws-add.ws-added { animation: none; }
}