/* ─────────────────────────────────────────────────────────────
   variant-selector.css
   Minimal — ใช้สีจาก custom property ของ thaisoung ถ้ามี
   ─────────────────────────────────────────────────────────────  */
:root{
      --color-background-secondary: light-dark(rgba(245, 244, 237, 1), rgba(38, 38, 36, 1));
      --color-text-tertiary: light-dark(rgba(115, 114, 108, 1), rgba(156, 154, 146, 1));
}
/* ── Container ── */
.variant-selector {
  margin: 16px 0;
  /* font-size: 13px; */
  font-size: 1em;
  color: #333;
}

/* ── Group (label + chips) ── */
.vs-group {
  margin-bottom: 14px;
}

.vs-label {
  /* font-size: 12px; */
  font-size: 1em;
  /* color: #777; */
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.vs-series-name, .vs-product-code{
  color:grey;
}
.vs-label-val {
  font-weight: 500;
  color: #222;
}

/* ── Chips row ── */
.vs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Chip base ── */
.vs-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #fff;
  color: #444;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, opacity 0.15s;
  white-space: nowrap;
  user-select: none;
}

.vs-chip:hover:not(:disabled) {
  border-color: #888;
  color: #111;
}

/* active */
.vs-chip--active {
  border-color: #222 !important;
  color: #111 !important;
  font-weight: 500;
  background: #f5f5f5;
}

/* disabled — option นี้ไม่มีสำหรับสี/ขนาดที่เลือก */
.vs-chip--disabled,
.vs-chip:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: #e0e0e0;
  color: #aaa;
  background: #fafafa;
  text-decoration: line-through;
}

.vs-chip--color {
    padding: 2px;
    width: 52px;
    height: 52px;
    overflow: hidden;
}

.vs-chip--color img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
    pointer-events: none;
}

/* ── Info bar ── */
.vs-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 14px;
  padding: 12px 14px;
  background: #f8f8f8;
  border-radius: 6px;
  border: 1px solid #ebebeb;
}

.vs-info > div {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
}

.vs-info-label {
  color: #888;
  font-size: 11px;
}
.vs-price-sqm{
  font-size:2rem;
  font-weight: 700;
}
.vs-price-sqm [data-bind="price_sqm"] {
  font-size: 18px;
  font-weight: 500;
  color: #c0392b;
}

.vs-code [data-bind="code"] {
  font-weight: 500;
  font-family: monospace;
  font-size: 12px;
}

/* ── Hint bar ── */
.vs-hint {
  margin-top: 8px;
  font-size: 11px;
  color: #888;
  padding: 6px 10px;
  border-left: 2px solid #ddd;
  background: #fafafa;
  border-radius: 0 4px 4px 0;
  min-height: 28px;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .vs-chip {
    padding: 5px 10px;
    font-size: 11px;
  }

  .vs-info {
    gap: 8px 12px;
  }
}

.vs-header { margin-bottom: 16px; }

/* .vs-series-name {
    
    color: #999;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
} */
.vs-series-name {
    /* font-size: 11px; */
    color: #999;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-size: medium;
}

.vs-product-name {
    /* font-size: 16px; */
    font-size:2.5rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 4px;
    line-height: 1.3;
}

.vs-product-code {
    /* font-size: 11px; */
    color: #999;
    margin-bottom: 12px;
}

.vs-price-main {
    /* font-size: 28px; */
    /* font-size:2rem; */
    /* font-weight: 700; */
    color: #111;
    margin-bottom: 4px;
    letter-spacing: -1px;
}

.vs-price-unit {
    /* font-size: 13px; */
    font-weight: 400;
    /* color: #666; */
}

.vs-price-sub {
    /* font-size: 12px; */
    /* color: #666; */
    display: flex;
    gap: 8px;
    align-items: center;
}

.vs-sep { color: #ccc; }

.vs-divider {
    border: none;
    border-top: 1px solid #ebebeb;
    margin: 16px 0;
}
.desc-tag{display:inline-block;font-size:10px;letter-spacing:.08em;color:var(--color-text-tertiary);background:var(--color-background-secondary);padding:2px 8px;border-radius:4px;margin-bottom:6px;}