.product-hero {
  display: block;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  border-radius: 14px;
  transition: opacity .28s ease;
}
.product-hero.is-fading { opacity: .15; }

/* ====== PILL UI & CHIP ====== */
.color-pick-wrap{ display:grid; place-items:center; gap:10px; margin-top:18px; }
.color-chip{
  background: transparent;   /* ไม่ต้องมีพื้นหลัง */
  border: none;              /* ตัดกรอบ */
  box-shadow: none;          /* ตัดเงา */
  color:#333; 
  font-size:14px; 
  font-weight:600;
  line-height:1;
  padding:0;                 /* ไม่ต้องมี padding */
}

.swatch-pill{
  background:#f2f3f5; border:1px solid #e7e8ea; border-radius:999px;
  padding:10px 14px; display:flex; align-items:center; gap:14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 1px 3px rgba(0,0,0,.04);
}

/* ปุ่มวงกลม */
.swatch{ --size:36px; width:var(--size); height:var(--size); border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 1px 2px rgba(0,0,0,.05);
  cursor:pointer; transition:transform .12s ease;
}
.swatch:hover{ transform:scale(1.04); }
.swatch[aria-checked="true"]{
  transform:scale(1.02);
  border-color:transparent;
  /* ขอบสองชั้น: ขาวใน + ดำขอบนอก */
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.95),
    0 0 0 2px #0f172a;
}

/* สีปุ่ม (โทนใกล้เคียง) */
.sw-rosso  { background: radial-gradient(circle at 30% 30%, #ffb0b0, #c01f27); }
.sw-vino   { background: radial-gradient(circle at 30% 30%, #ffd5ea, #b55aa0); }
.sw-siena  { background: radial-gradient(circle at 30% 30%, #eaf7b8, #88b33b); }
.sw-menta  { background: radial-gradient(circle at 30% 30%, #d7f2f0, #8fbad1); }

/* ปุ่มเลื่อนซ้ายขวา */
.product-stage{ position: relative; }
.nav-dot {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: #fff;
  border: 1px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0,0,0,.06);
  cursor: pointer; user-select: none;
}
.nav-dot:hover { background: #f9fafb; }
.nav-prev { left: 14px; }
.nav-next { right: 14px; }
@media (max-width: 576px){ .nav-dot{ display:none; } }