/* =====================================================================
   เครื่องมือออกแบบกระเป๋า — โหลดเฉพาะ design.html
   ใช้ตัวแปรสีและเงาชุดเดียวกับ style.css
   ===================================================================== */

/* ต้องมาก่อนทุกกฎ: คำสั่ง hidden ของเบราว์เซอร์มีน้ำหนักต่ำมาก
   ถ้าคลาสไหนตั้ง display:flex ไว้ (เช่น .st-empty, .st-objbar) องค์ประกอบจะไม่ยอมซ่อน
   เคยเจอจริง: กล่อง "เริ่มจากอัปโหลดลาย" ค้างทับแบบ ทั้งที่ JS สั่งซ่อนแล้ว */
.studio [hidden]{display:none !important}

.studio-hero{padding:8.2rem 0 2.2rem}
.studio-title{max-width:20ch}
.studio-hero .page-lead{margin-bottom:0}
.studio-section{padding:2rem 0 5rem}
.studio-noscript{max-width:560px;margin:2rem auto;text-align:center;color:var(--muted)}

.studio{
  width:min(1480px,96%);margin-inline:auto;
  display:grid;gap:1.1rem;align-items:start;
  grid-template-columns:292px minmax(0,1fr) 336px;
}
.st-panel{
  background:var(--white);border-radius:var(--radius);
  border:1px solid rgba(150,95,105,.1);box-shadow:var(--shadow-sm);
}

/* ---------- แผงเครื่องมือ ---------- */
.st-tools{padding:.4rem 0}
.st-block{padding:1.1rem 1.2rem 1.25rem}
.st-block + .st-block{border-top:1px solid rgba(150,95,105,.1)}
.st-h{
  display:flex;align-items:center;gap:.6rem;
  font-size:1rem;font-weight:700;color:var(--navy);margin:0 0 .9rem;
}
.st-h-plain{padding:1.1rem 1.2rem 0;margin-bottom:.7rem}
/* ขั้นตอนมีลำดับจริง: ต้องเลือกรุ่นก่อน ขนาดพื้นที่ออกแบบถึงจะถูก */
.st-step{
  display:inline-grid;place-items:center;flex:none;
  width:1.55rem;height:1.55rem;border-radius:50%;
  font-size:.8rem;font-weight:700;color:#a4605e;background:rgba(212,138,137,.16);
}
.st-label{display:block;font-size:.8rem;font-weight:600;color:var(--navy-soft);margin:.85rem 0 .4rem}
.st-hint{font-size:.78rem;line-height:1.55;color:var(--muted);margin:.45rem 0 0}
.st-hint.is-low{color:#b0463f}

.st-models{display:grid;gap:.45rem}
.st-model{
  display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  width:100%;padding:.6rem .8rem;border-radius:12px;cursor:pointer;text-align:left;
  background:var(--cream);border:1.5px solid rgba(150,95,105,.14);
  font-family:inherit;color:var(--navy);
  transition:border-color .25s,background .25s;
}
.st-model:hover{border-color:rgba(212,138,137,.5)}
.st-model.is-on{border-color:var(--gold);background:rgba(212,138,137,.1)}
.st-model-name{font-weight:700;font-size:.92rem}
.st-model-sub{font-size:.76rem;color:var(--muted)}

.st-select,.ob-font{
  width:100%;min-height:42px;padding:0 .8rem;border-radius:10px;
  border:1.5px solid rgba(150,95,105,.2);background:var(--white);
  font-family:inherit;font-size:.9rem;color:var(--navy);
}
.st-seg{display:flex;flex-wrap:wrap;gap:.3rem;padding:.25rem;border-radius:12px;background:var(--cream)}
.st-seg button{
  flex:1 1 auto;min-height:38px;padding:0 .7rem;border-radius:9px;cursor:pointer;
  border:0;background:transparent;font-family:inherit;font-size:.82rem;font-weight:600;color:var(--navy-soft);
  transition:background .2s,color .2s;
}
.st-seg button.is-on{background:var(--white);color:var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.08)}

.st-swatches{display:flex;flex-wrap:wrap;gap:.45rem}
.st-swatch{
  width:34px;height:34px;border-radius:50%;cursor:pointer;padding:0;
  background:var(--sw);border:2px solid var(--white);
  box-shadow:0 0 0 1.5px rgba(150,95,105,.25);
  transition:box-shadow .2s,transform .2s;
}
.st-swatch:hover{transform:scale(1.08)}
.st-swatch.is-on{box-shadow:0 0 0 2.5px var(--gold)}
.st-swatch-custom{
  position:relative;overflow:hidden;
  background:conic-gradient(#e94f4f,#f2c14e,#6ccf8e,#4fa7e9,#b16ce9,#e94f4f);
}
.st-swatch-custom input{position:absolute;inset:-6px;opacity:0;cursor:pointer}

.st-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:0 1rem;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:.88rem;font-weight:600;line-height:1.2;text-align:center;
  background:var(--white);color:var(--navy);border:1.5px solid rgba(150,95,105,.22);
  transition:border-color .25s,background .25s,transform .25s var(--ease),box-shadow .25s;
}
.st-btn:hover{border-color:var(--gold);transform:translateY(-1px)}
.st-btn .st-ico{width:18px;height:18px;flex:none}
.st-btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.st-btn-primary:hover{background:#000;border-color:#000;box-shadow:var(--shadow-sm)}
.st-btn-line{background:#06c755;color:#fff;border-color:#06c755}
.st-btn-line:hover{background:#05b04b;border-color:#05b04b}
.st-btn-ghost{background:transparent}
.st-wide{width:100%}
.st-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.st-link-btn{
  margin-top:.7rem;padding:.2rem 0;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:.8rem;font-weight:600;color:#a4605e;text-decoration:underline;text-underline-offset:3px;
}
.st-color-row{display:flex;align-items:center;gap:.7rem}
.st-color-row input[type=color],.ob-color input{
  width:44px;height:36px;padding:2px;border-radius:9px;cursor:pointer;
  border:1.5px solid rgba(150,95,105,.22);background:var(--white);
}
.st-color-row .st-hint{margin:0}
.st-tools input[type=range]{width:100%;accent-color:var(--gold)}

.st-ornaments{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.st-orn{
  aspect-ratio:1;display:grid;place-items:center;cursor:pointer;
  border-radius:10px;border:1.5px solid rgba(150,95,105,.14);background:var(--cream);
  color:#b86e6c;transition:border-color .2s,background .2s;
}
.st-orn svg{width:58%;height:58%;fill:currentColor}
.st-orn:hover{border-color:var(--gold);background:rgba(212,138,137,.1)}

/* ---------- พื้นที่ออกแบบ ---------- */
.st-stage{padding:.8rem;min-width:0}
.st-stage-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;margin-bottom:.8rem}
.st-sides{display:flex;gap:.25rem;padding:.25rem;border-radius:12px;background:var(--cream)}
.st-sides button{
  min-height:38px;padding:0 1rem;border-radius:9px;border:0;cursor:pointer;
  background:transparent;font-family:inherit;font-size:.86rem;font-weight:600;color:var(--navy-soft);
}
.st-sides button.is-on{background:var(--white);color:var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.st-sides button.is-locked{opacity:.45}
.st-check{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;color:var(--navy-soft);cursor:pointer}
.st-check input{width:17px;height:17px;accent-color:var(--gold)}
.st-stage-tools{margin-left:auto;display:flex;gap:.3rem}
.st-icon-btn{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;cursor:pointer;
  border:1.5px solid rgba(150,95,105,.16);background:var(--white);color:var(--navy);
  transition:border-color .2s,background .2s,color .2s;
}
.st-icon-btn .st-ico{width:19px;height:19px}
.st-icon-btn:hover{border-color:var(--gold)}
.st-icon-btn:disabled{opacity:.35;cursor:default;border-color:rgba(150,95,105,.16)}
.st-icon-btn.is-on{background:rgba(212,138,137,.14);color:#a4605e;border-color:rgba(212,138,137,.4)}

.st-canvas-wrap{
  /* ความสูงให้ JS กำหนดตามขนาดกระเป๋าจริง ถ้าตั้งขั้นต่ำไว้ บนมือถือจะเหลือแถบว่างใต้แบบ */
  position:relative;width:100%;border-radius:12px;
  background:
    linear-gradient(45deg,#f1e8e5 25%,transparent 25%) 0 0/20px 20px,
    linear-gradient(-45deg,#f1e8e5 25%,transparent 25%) 0 0/20px 20px,
    linear-gradient(45deg,transparent 75%,#f1e8e5 75%) 0 0/20px 20px,
    linear-gradient(-45deg,transparent 75%,#f1e8e5 75%) 0 0/20px 20px,
    #f8f1ee;
  overflow:hidden;
}
.st-canvas-wrap.is-drop{outline:3px dashed var(--gold);outline-offset:-6px}
.st-canvas-holder{position:absolute;top:0}
.st-canvas-holder .canvas-container{box-shadow:0 10px 30px rgba(120,70,70,.16)}
.st-guides{position:absolute;top:0;pointer-events:none;overflow:visible}
.gd-bleed{fill:rgba(214,80,80,.14)}
.gd-cut{fill:none;stroke:#c0504d;stroke-width:1.4;vector-effect:non-scaling-stroke}
/* แนวพับ: ตรงที่ผ้าต่อกัน (ด้านหน้า/หลัง ↔ ก้น) ไม่ใช่เส้นตัด จึงใช้สีและลายเส้นต่างกันชัดเจน */
.gd-fold{stroke:#5b7a99;stroke-width:1.8;stroke-dasharray:10 4 2 4;vector-effect:non-scaling-stroke}
.gd-safe{fill:none;stroke:#2e7d6b;stroke-width:1.4;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.gd-handle{fill:rgba(60,60,60,.08);stroke:rgba(60,60,60,.45);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.gd-label{fill:#2e7d6b;font-family:Sarabun,sans-serif;font-weight:600;opacity:.8}
/* เส้นเย็บปากกระเป๋า — สีอำพัน แยกจากเส้นตัด (แดง) และระยะปลอดภัย (เขียว) ชัดเจน */
.gd-stitch-band{fill:rgba(214,150,40,.13);transition:fill .15s}
.gd-stitch{stroke:#b7791f;stroke-width:1.6;stroke-dasharray:5 3;vector-effect:non-scaling-stroke}
.gd-stitch-label{fill:#9a6512;font-family:Sarabun,sans-serif;font-weight:700}
/* ระหว่างลากโลโก้/ข้อความ ถ้าไปโดนเส้นเย็บหรือเลยระยะปลอดภัย เส้นนั้นจะเข้มขึ้นให้เห็นทันที */
.st-guides.is-stitch-hit .gd-stitch-band{fill:rgba(214,150,40,.4)}
.st-guides.is-safe-hit .gd-safe{stroke:#c0504d;stroke-width:2.4}

.st-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.8rem;padding:1.5rem;text-align:center;pointer-events:none;
}
.st-empty > *{pointer-events:auto}
.st-empty-k{
  margin:0;font-size:1.05rem;font-weight:700;color:var(--navy);
  background:rgba(255,255,255,.85);padding:.35rem .9rem;border-radius:999px;
}
.st-empty .st-hint{background:rgba(255,255,255,.85);padding:.3rem .8rem;border-radius:999px;margin:0}

.st-toast{
  position:absolute;left:50%;bottom:14px;transform:translate(-50%,12px);
  max-width:calc(100% - 28px);padding:.6rem 1rem;border-radius:12px;
  background:rgba(26,26,26,.9);color:#fff;font-size:.84rem;line-height:1.5;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);
}
.st-toast.is-on{opacity:1;transform:translate(-50%,0)}

.st-objbar{
  display:flex;align-items:center;flex-wrap:wrap;gap:.55rem .8rem;
  margin-top:.7rem;padding:.6rem .7rem;border-radius:12px;
  background:var(--cream);border:1px solid rgba(150,95,105,.12);
}
.ob-name{font-size:.8rem;font-weight:700;color:#a4605e;padding:0 .2rem}
.ob-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.ob-font{width:auto;min-width:170px;min-height:38px;font-size:.84rem}
.ob-toggle{
  min-width:38px;min-height:38px;padding:0 .6rem;border-radius:9px;cursor:pointer;
  border:1.5px solid rgba(150,95,105,.2);background:var(--white);font-family:inherit;font-size:.84rem;color:var(--navy);
}
.ob-toggle.is-on{background:var(--navy);color:#fff;border-color:var(--navy)}
.ob-opacity{display:flex;align-items:center;gap:.4rem;font-size:.76rem;color:var(--muted)}
.ob-opacity input{width:90px;accent-color:var(--gold)}
.ob-dpi{font-size:.74rem;font-weight:600;padding:.25rem .6rem;border-radius:999px}
.ob-dpi.is-good,.st-quality li.is-good span:last-child{color:#2e7d6b}
.ob-dpi.is-good{background:rgba(46,125,107,.1)}
.ob-dpi.is-ok,.st-quality li.is-ok span:last-child{color:#9a6512}
.ob-dpi.is-ok{background:rgba(165,112,26,.12)}
.ob-dpi.is-low,.st-quality li.is-low span:last-child{color:#b0463f}
.ob-dpi.is-low{background:rgba(192,80,77,.12)}
.ob-warn{font-size:.74rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;color:#9a6512;background:rgba(214,150,40,.16)}
.st-quality li.is-warn span:last-child{color:#9a6512}
.ob-actions{display:flex;gap:.25rem;margin-left:auto}
.ob-actions .st-icon-btn{width:38px;height:38px}

.st-legend{
  display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;list-style:none;margin:.75rem 0 .1rem;padding:0 .2rem;
  font-size:.76rem;color:var(--muted);
}
.st-legend li{display:inline-flex;align-items:center;gap:.4rem}
.st-legend i{display:inline-block;width:20px;height:0;border-top:2px solid}
.st-legend .lg-cut{border-color:#c0504d}
.st-legend .lg-safe{border-top-style:dashed;border-color:#2e7d6b}
.st-legend .lg-fold{border-top:2px dashed #5b7a99}
.st-legend .lg-stitch{border-top:2px dashed #b7791f;box-shadow:0 -4px 0 0 rgba(214,150,40,.16),0 4px 0 0 rgba(214,150,40,.16)}
.st-legend .lg-bleed{height:10px;border:0;background:rgba(214,80,80,.18)}
.st-legend .lg-handle{height:10px;border:1px dashed rgba(60,60,60,.5);background:rgba(60,60,60,.08)}

/* ---------- แผงตัวอย่าง ---------- */
/* ติดอยู่กับจอขณะเลื่อนดูเครื่องมือ จะได้เห็นผลทุกครั้งที่ปรับ */
.st-preview{position:sticky;top:96px;padding-bottom:1.2rem;display:flex;flex-direction:column;gap:.6rem}
.st-preview > :not(.st-h):not(.st-mock-wrap){margin-inline:1.2rem}
.st-mock-wrap{position:relative;margin:0 .8rem}
.st-mock{display:block;width:100%;aspect-ratio:1/1.05;border-radius:14px}
.st-mock-side{
  position:absolute;left:.7rem;top:.7rem;padding:.2rem .6rem;border-radius:999px;
  font-size:.72rem;font-weight:600;color:var(--navy-soft);background:rgba(255,255,255,.85);
}
.st-mock-spec{margin:0;font-size:.86rem;font-weight:600;color:var(--navy);text-align:center}
.st-quality h3{font-size:.82rem;font-weight:700;color:var(--navy);margin:.2rem 0 .4rem}
.st-quality ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.st-quality li{
  display:flex;justify-content:space-between;gap:.6rem;
  font-size:.76rem;line-height:1.45;padding:.35rem .55rem;border-radius:8px;background:var(--cream);
}
.st-quality li span:first-child{color:var(--navy-soft)}
.st-quality li span:last-child{font-weight:600;text-align:right}
.st-ref{font-size:.8rem;color:var(--muted);text-align:center}
.st-ref strong{color:var(--navy);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.st-notes{list-style:none;margin:.3rem 1.2rem 0;padding:0;display:grid;gap:.4rem}
.st-notes li{position:relative;padding-left:.9rem;font-size:.74rem;line-height:1.55;color:var(--muted)}
.st-notes li::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--gold)}

.st-btn:focus-visible,.st-icon-btn:focus-visible,.st-model:focus-visible,.st-seg button:focus-visible,
.st-sides button:focus-visible,.st-orn:focus-visible,.st-swatch:focus-visible,.ob-toggle:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;
}

/* ---------- ผลงานจริงใต้โปรแกรม ----------
   ภาพในโปรแกรมเป็นภาพวาดจำลอง ส่วนนี้ให้ลูกค้าเห็นกระเป๋าที่ผลิตออกมาจริงในหน้าเดียวกัน
   จัดตามรุ่น ตรงกับปุ่มเลือกรุ่นในโปรแกรม */
#studio{scroll-margin-top:96px}
.real-work{padding:4.5rem 0 5rem}
.rw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-top:2.4rem}
.rw-card{
  display:flex;flex-direction:column;background:var(--white);border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(150,95,105,.1);box-shadow:var(--shadow-sm);
}
.rw-main{margin:0;position:relative;aspect-ratio:1/1;background:var(--cream-2)}
.rw-main img{width:100%;height:100%;object-fit:cover;display:block}
.rw-main figcaption{
  position:absolute;left:.75rem;right:.75rem;bottom:.75rem;
  padding:.4rem .75rem;border-radius:10px;
  font-size:.82rem;line-height:1.45;color:var(--navy);background:rgba(255,255,255,.9);
}
.rw-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;padding:.6rem .75rem 0}
.rw-thumb{
  aspect-ratio:1;padding:0;border-radius:8px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;background:var(--cream);opacity:.72;
  transition:opacity .2s,border-color .2s;
}
.rw-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rw-thumb:hover{opacity:1}
.rw-thumb.is-on{opacity:1;border-color:var(--gold)}
.rw-thumb:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.rw-body{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.2rem 1.3rem;flex:1}
.rw-name{margin:0;font-size:1.2rem;font-weight:700;color:var(--navy)}
.rw-spec{margin:0;font-size:.82rem;font-weight:600;color:#a4605e}
.rw-desc{margin:0 0 .6rem;font-size:.92rem;line-height:1.65;color:var(--navy-soft)}
.rw-cta{margin-top:auto;align-self:flex-start}
.rw-more{text-align:center;margin:2.2rem 0 0}
@media (max-width:980px){
  .rw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .real-work{padding:3.2rem 0 3.6rem}
  .rw-grid{grid-template-columns:1fr}
}

/* ---------- Full Custom: ขอบเขตการออกแบบ + ด้านของกระเป๋า ---------- */
.st-mode button{white-space:nowrap}
.st-mode.is-pulse{animation:st-pulse 1s ease-in-out 2}
@keyframes st-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(212,138,137,0)}
  50%{box-shadow:0 0 0 6px rgba(212,138,137,.38)}
}
.st-sides{width:max-content;max-width:100%;overflow-x:auto;margin-bottom:.45rem;scrollbar-width:thin}
.st-sides button{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.st-sides button .st-ico{width:13px;height:13px}
.st-panel-hint{margin:0 0 .55rem;font-size:.82rem;line-height:1.6;color:var(--navy-soft)}
.st-panel-hint strong{color:var(--navy)}
.st-panel-note{display:block;margin-top:.1rem;font-weight:600;color:#a4605e}
.st-panel-acts{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;margin:-.15rem 0 .65rem}
.st-panel-acts .st-link-btn{display:inline-flex;align-items:center;gap:.35rem}
.st-panel-acts .st-ico{width:15px;height:15px}
.st-view{justify-content:center}
.gd-edge{fill:#8a4f4d;font-family:Sarabun,sans-serif;font-weight:700;letter-spacing:.02em}
/* ป้ายที่อยู่บนลาย (ขอบที่ไม่มีแถบพับเข้า) ต้องมีขอบขาวรอบตัวอักษร ไม่งั้นจมไปกับลาย */
.gd-edge-in{fill:#46607a;paint-order:stroke;stroke:rgba(255,255,255,.9);stroke-width:3px;stroke-linejoin:round}
@media (max-width:520px){
  /* ปุ่มเลือกโหมดสองปุ่มยาวไม่เท่ากัน ตัดแถวแล้วดูเบี้ยว — ให้เต็มความกว้างเท่ากันทั้งคู่ */
  .st-mode{width:100%}
  .st-mode button{flex:1 1 100%}
  /* แท็บ 5 ด้านกว้างเกินจอมือถือ ถ้าให้ปัดเลื่อน แท็บ "ก้นกระเป๋า" จะซ่อนอยู่นอกจอ
     ลูกค้าไม่รู้ว่ามี — จึงให้ตัดขึ้นบรรทัดใหม่แทน เห็นครบทุกด้านทันที */
  .st-sides{width:100%;flex-wrap:wrap;overflow-x:visible}
  .st-sides button{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .st-mode.is-pulse{animation:none;outline:3px solid var(--gold);outline-offset:2px}
}

/* ---------- จอเล็กลง ---------- */
@media (max-width:1240px){
  .studio{grid-template-columns:280px minmax(0,1fr)}
  .st-preview{
    grid-column:1 / -1;position:static;
    display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:.6rem 1.4rem;
    padding:1.2rem;
  }
  .st-preview > *{margin-inline:0 !important}
  .st-preview .st-h{grid-column:1 / -1;padding:0;margin:0}
  .st-preview .st-mock-wrap{grid-row:span 7;margin:0}
}
@media (max-width:860px){
  .studio-hero{padding:7rem 0 1.6rem}
  .studio{grid-template-columns:1fr}
  /* มือถือ: พื้นที่ออกแบบขึ้นก่อน เพราะมีปุ่มอัปโหลดลายอยู่ในนั้นแล้ว */
  .st-stage{order:-1;padding:.6rem}
  .st-preview{display:flex;flex-direction:column}
  .st-preview .st-mock-wrap{max-width:420px;width:100%;margin-inline:auto}
  .ob-actions{margin-left:0}
}
@media (max-width:480px){
  .st-stage-tools{margin-left:0}
  .ob-font{min-width:0;width:100%}
  .ob-controls{width:100%}
}
/* จอสัมผัส: ปุ่มสีกลมเล็กกดพลาดง่าย ขยายให้พอดีนิ้ว */
@media (pointer:coarse){
  .st-swatch{width:42px;height:42px}
  .st-swatches{gap:.55rem}
}
@media (prefers-reduced-motion:reduce){
  .st-btn,.st-toast,.st-swatch{transition:none}
}