/* JK - Variation Swatches — chỉ trang product đơn. Gu Jelly Key: ink #1c1b18, mid #56534c, border #d9d3c6, muted #8c887e. Clean / minimal. */

/* Ẩn select gốc nhưng vẫn để WC dùng */
select.jk-raw-select { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; }

.jk-swatch {
  --jk-sw-size: 70px;
  --jk-sw-gap: 8px;
  --jk-ink: #1c1b18;
  --jk-mid: #56534c;
  --jk-border: #d9d3c6;
  --jk-muted: #8c887e;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--jk-sw-gap);
  margin: 6px 0 20px;   /* giãn cách giữa các thuộc tính cho dễ hình dung */
  padding: 0;
}

/* tách mỗi thuộc tính ra xa + nhãn to rõ hơn */
.woocommerce div.product .variations td.label,
.woocommerce div.product .variations th.label { padding-top: 8px; }
.woocommerce div.product .variations .label label { font-size: 18px !important; }

.jk-swatch__item {
  position: relative;
  cursor: pointer;
  margin: 0;
  border-radius: 2px;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.jk-swatch__item:focus-visible { outline: 2px solid var(--jk-muted); outline-offset: 3px; }

/* ---------- SWATCH ẢNH (tròn / vuông) ---------- */
.jk-swatch--image .jk-swatch__inner { display: block; width: var(--jk-sw-size); height: var(--jk-sw-size); overflow: hidden; border-radius: 2px; }
.jk-swatch--image .jk-swatch__inner img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.jk-swatch--image.is-round .jk-swatch__inner,
.jk-swatch--image.is-round .jk-swatch__inner img { border-radius: 50%; }

/* ring dùng box-shadow → ÔM theo bo góc (tròn ra tròn, vuông ra vuông), khe trắng cho sạch */
.jk-swatch--image .jk-swatch__item:hover .jk-swatch__inner { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--jk-border); }
.jk-swatch--image .jk-swatch__item.is-selected .jk-swatch__inner { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--jk-ink); }
.jk-swatch--image .jk-swatch__item:hover { transform: translateY(-1px); }

/* ---------- SWATCH CHỮ / NÚT (vuông) ---------- */
.jk-swatch--text .jk-swatch__inner,
.jk-swatch__item.is-text .jk-swatch__inner {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  font-size: 18px;
  line-height: 1.4;
  border: 1px solid var(--jk-border);
  background: #fff;
  color: var(--jk-mid);
  font-weight: 500;
  border-radius: 2px;
}
.jk-swatch--text .jk-swatch__item:hover .jk-swatch__inner,
.jk-swatch__item.is-text:hover .jk-swatch__inner { border-color: var(--jk-muted); color: var(--jk-ink); }
.jk-swatch--text .jk-swatch__item.is-selected .jk-swatch__inner,
.jk-swatch__item.is-text.is-selected .jk-swatch__inner { background: var(--jk-ink); color: #fff; border-color: var(--jk-ink); }

/* ---------- HẾT HÀNG / KHÔNG KHẢ DỤNG ---------- */
.jk-swatch__item.is-disabled,
.jk-swatch__item.is-oos { cursor: not-allowed; }
/* chỉ làm MỜ (không gạch chéo) cho gọn/đẹp */
.jk-swatch__item.is-disabled { opacity: .3; }
.jk-swatch__item.is-oos { opacity: .55; }

/* ---------- TÊN GIÁ TRỊ CẠNH NHÃN ---------- */
/* specificity + !important để đè rule 14px trong Additional CSS cũ; bỏ margin-left (đã có 1 space sẵn) → dấu ":" không bị xa */
.woocommerce div.product .variations .woo-selected-variation-item-name,
.woo-selected-variation-item-name { font-weight: 500; font-size: 18px !important; color: var(--jk-ink, #1c1b18); margin-left: 0; }

/* ---------- TOOLTIP (hover) ---------- */
.jk-swatch__item[data-jk-tooltip]:hover::before {
  content: attr(data-jk-tooltip);
  position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%);
  background: var(--jk-ink); color: #fff; font-size: 18px; line-height: 1.3; font-weight: 400;
  white-space: nowrap; padding: 5px 9px; border-radius: 3px; z-index: 30; pointer-events: none;
}
.jk-swatch__item[data-jk-tooltip]:hover::after {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--jk-ink); z-index: 30; pointer-events: none;
}
/* lật xuống dưới khi sát mép trên (JS gắn .jk-tip-bottom) */
.jk-swatch__item.jk-tip-bottom[data-jk-tooltip]:hover::before { bottom: auto; top: calc(100% + 9px); }
.jk-swatch__item.jk-tip-bottom[data-jk-tooltip]:hover::after { bottom: auto; top: calc(100% + 4px); border-top-color: transparent; border-bottom-color: var(--jk-ink); }