/**
 * Alukas Visual Swatches
 * Image-only shape swatches + color swatches + text pills
 * Selected value shown next to attribute label via JS-injected .avs-val span
 *
 * Styled to match Grown Brilliance:
 *  - No borders on unselected swatches
 *  - Thin border only on selected swatch
 *  - Color swatches are square (not circle)
 *  - Attribute heading hidden; selected value shown inline
 *  - Font: ~14px, weight 400 for labels, 500 for selected value
 */

/* ─── Custom properties ───────────────────────────────────── */
:root {
  --avs-border:        #d8d8d8;
  --avs-border-active: #1a1a1a;
  --avs-bg:            #ffffff;
  --avs-bg-hover:      #f7f7f7;
  --avs-text:          #1a1a1a;
  --avs-text-muted:    #777;
  --avs-radius:        4px;
  --avs-transition:    0.14s ease;
}

/* ─── Swatch row wrapper ──────────────────────────────────── */
.alukas-custom-swatch-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 14px;
}

/* ─── Base button reset (all types) ──────────────────────── */
.swatch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1.5px solid transparent;   /* No border by default */
  border-radius: var(--avs-radius);
  background: var(--avs-bg);
  color: var(--avs-text);
  font-size: 14px;
  font-weight: 400;
  font-family: inherit;
  letter-spacing: 0.01em;
  transition:
    border-color var(--avs-transition),
    background   var(--avs-transition);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  position: relative;
}

.swatch-btn:hover {
  border-color: #ccc;
  background: var(--avs-bg-hover);
}

/* Selected: only a border, no box-shadow ring */
.swatch-btn.is-selected {
  border-color: var(--avs-border-active);
}

.swatch-btn.is-unavailable {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── SHAPE swatches — image only, no text below ─────────── */
.swatch-btn.swatch-type--shape {
  width:  68px;
  height: 68px;
  padding: 10px;
  border-radius: var(--avs-radius);
  flex-direction: column;
}

.swatch-btn.swatch-type--shape:hover {
  background: var(--avs-bg-hover);
}

.swatch-btn.swatch-type--shape.is-selected {
  background: var(--avs-bg) !important;
  color: var(--avs-text) !important;
}

.swatch-shape-icon {
  width:  44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swatch-shape-icon img {
  width:  100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.swatch-shape-icon svg {
  width:  100%;
  height: 100%;
  fill: none;
  stroke: #1a1a1a;
  stroke-width: 1.4;
  transition: stroke-width var(--avs-transition);
}

.swatch-btn.is-selected .swatch-shape-icon svg,
.swatch-btn.swatch-type--shape.is-selected .swatch-shape-icon svg {
  stroke: #1a1a1a !important;
  stroke-width: 2;
}

/* Hide the text label under each shape icon */
.swatch-shape-label {
  display: none;
}

/* ─── COLOR / METAL swatches — flat rectangle, no radius, no label ── */
.swatch-btn.swatch-type--color {
  width:  72px;
  height: 32px;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  border-color: transparent;
  background: transparent;
}

.swatch-btn.swatch-type--color:hover {
  border-color: #aaa;
  background: transparent;
}

.swatch-btn.swatch-type--color.is-selected {
  border-color: var(--avs-border-active);
  background: transparent;
}

/* The coloured chip fills the full button */
.swatch-color-chip {
  width:  100%;
  height: 100%;
  display: block;
  border-radius: 0;
}

/* Legacy class — same treatment */
.swatch-color-swatch {
  width:  100%;
  height: 100%;
  display: block;
  border-radius: 0;
}

.swatch-color-swatch.is-split,
.swatch-color-chip.is-split {
  background: linear-gradient(
    135deg,
    var(--avs-color-a, #ccc) 50%,
    var(--avs-color-b, #888) 50%
  );
}

/* Hide label */
.swatch-color-label {
  display: none;
}

/* ─── TEXT / PILL swatches ────────────────────────────────── */
.swatch-btn.swatch-type--text {
  padding: 8px 18px;
  min-width: 52px;
  text-align: center;
  line-height: 1.3;
  font-size: 14px;
  font-weight: 400;
  border-color: transparent;
}

.swatch-btn.swatch-type--text:hover {
  border-color: #ccc;
}

.swatch-btn.swatch-type--text.is-selected {
  border-color: var(--avs-border-active);
  background: var(--avs-bg);
  color: var(--avs-text);
}

/* ─── CLARITY / QUALITY swatches ─────────────────────────── */
.swatch-btn.swatch-type--clarity {
  flex-direction: column;
  padding: 9px 14px;
  min-width: 66px;
  gap: 2px;
  text-align: center;
  border-color: transparent;
}

.swatch-btn.swatch-type--clarity:hover {
  border-color: #ccc;
}

.swatch-clarity-grade {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  display: block;
}

.swatch-clarity-sub {
  font-size: 10px;
  color: var(--avs-text-muted);
  display: block;
  margin-top: 2px;
  line-height: 1;
}

.swatch-btn.swatch-type--clarity.is-selected {
  background: var(--avs-bg);
  color: var(--avs-text);
  border-color: var(--avs-border-active);
}

.swatch-btn.swatch-type--clarity.is-selected .swatch-clarity-sub {
  color: var(--avs-text-muted);
}

/* ─── Attribute label row ─────────────────────────────────── */
/*
 * Hide the static heading text (e.g. "COLOR:").
 * Show only the selected value label via .avs-val
 */
.variations .label label,
.variations th.label label,
.variations td.label label {
  font-size: 0;          /* hide original label text */
  visibility: hidden;
  display: inline-block;
  width: 0;
  overflow: hidden;
}

/* ─── Selected value span — injected by JS after <label> ──── */
.avs-val {
  display: inline;
  font-size: 13px;
  font-weight: 500;
  color: var(--avs-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  visibility: visible;
}

/* No colon prefix — value shown standalone */
.avs-val::before {
  content: none;
}

/* Toggled on by JS */
.avs-val--show {
  opacity: 1;
}

/* Stale class names — hidden for safety */
.alukas-swatch-selected-label,
.avs-selected-value {
  display: none !important;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .swatch-btn.swatch-type--shape {
    width:  58px;
    height: 58px;
    padding: 8px;
  }
  .swatch-shape-icon {
    width:  38px;
    height: 38px;
  }
  .swatch-btn.swatch-type--color {
    width:  58px;
    height: 28px;
  }
}