/**
 * Flavor tiles under the product-sheet price.
 *
 * A 3-column grid of equal tiles, so every row runs flush to the container's
 * edge — no ragged gap after the third tile. Each tile stacks the flavor
 * label, its price in the muted tone, and an optional one-line hint about
 * who that flavor is for. The current product is the accented tile;
 * out-of-stock siblings stay clickable but dimmed, with the stock notice
 * where the price would be.
 *
 * Theme contract: every visual decision reads a --kvr-* custom property with
 * a neutral fallback, so a theme restyles the row from its own stylesheet
 * without touching this file (letcon maps them onto its --bs-lc-* tokens).
 *
 * @copyright Kicked SRL
 * @license   AFL-3.0
 */

.kvr {
  margin: var(--kvr-margin, 1rem 0 0.25rem);
}

.kvr__axis {
  display: block;
  margin-block-end: 0.375rem;
  font-size: var(--kvr-axis-size, 0.8125rem);
  font-weight: var(--kvr-axis-weight, 600);
  letter-spacing: var(--kvr-axis-tracking, 0.02em);
  color: var(--kvr-axis-color, rgba(0, 0, 0, 0.55));
}

.kvr__axis::after {
  content: ':';
}

.kvr__list {
  display: grid;
  grid-template-columns: repeat(var(--kvr-columns, 3), minmax(0, 1fr));
  gap: var(--kvr-gap, 0.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kvr__item {
  display: flex;
}

.kvr__chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  flex: 1 1 auto;
  padding: var(--kvr-chip-padding, 0.5rem 0.625rem);
  border: 1px solid var(--kvr-chip-border, rgba(0, 0, 0, 0.2));
  border-radius: var(--kvr-chip-radius, 0.625rem);
  background: var(--kvr-chip-bg, transparent);
  color: var(--kvr-chip-color, inherit);
  text-decoration: none;
  line-height: 1.25;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.kvr__label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--kvr-label-size, 0.9375rem);
  font-weight: var(--kvr-label-weight, 600);
}

.kvr__swatch {
  flex: 0 0 auto;
  width: var(--kvr-swatch-size, 0.875rem);
  height: var(--kvr-swatch-size, 0.875rem);
  border-radius: 50%;
  border: 1px solid var(--kvr-swatch-border, rgba(0, 0, 0, 0.18));
}

.kvr__price {
  font-size: var(--kvr-price-size, 0.75rem);
  color: var(--kvr-price-color, rgba(0, 0, 0, 0.55));
  white-space: nowrap;
}

.kvr__hint {
  font-size: var(--kvr-hint-size, 0.6875rem);
  color: var(--kvr-hint-color, var(--kvr-price-color, rgba(0, 0, 0, 0.55)));
  line-height: 1.3;
}

a.kvr__chip:hover,
a.kvr__chip:focus-visible {
  border-color: var(--kvr-chip-hover-border, currentColor);
  background: var(--kvr-chip-hover-bg, rgba(0, 0, 0, 0.04));
  color: var(--kvr-chip-color, inherit);
  text-decoration: none;
}

a.kvr__chip:focus-visible {
  outline: 2px solid var(--kvr-focus-ring, currentColor);
  outline-offset: 2px;
}

.kvr__chip--current {
  border-color: var(--kvr-current-border, currentColor);
  box-shadow: inset 0 0 0 1px var(--kvr-current-border, currentColor);
  background: var(--kvr-current-bg, rgba(0, 0, 0, 0.06));
}

.kvr__chip--current .kvr__label {
  color: var(--kvr-current-label-color, inherit);
}

.kvr__chip--oos {
  opacity: var(--kvr-oos-opacity, 0.55);
  border-style: dashed;
}

/* Swatch mode — bare color dots, the current one ringed; the axis line
   carries the current color's name („Culoare: Negru"). The shared axis
   colon would land after the value, so swatch mode draws its own. */

.kvr--swatches .kvr__axis::after {
  content: none;
}

.kvr__axis-value {
  color: var(--kvr-axis-value-color, inherit);
  font-weight: var(--kvr-axis-value-weight, 600);
}

.kvr__axis-value::before {
  content: ': ';
  font-weight: var(--kvr-axis-weight, 600);
  color: var(--kvr-axis-color, rgba(0, 0, 0, 0.55));
}

.kvr__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kvr-dot-gap, 0.625rem);
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0;
}

.kvr__dot {
  display: block;
  width: var(--kvr-dot-size, 1.75rem);
  height: var(--kvr-dot-size, 1.75rem);
  border-radius: 50%;
  border: 1px solid var(--kvr-swatch-border, rgba(0, 0, 0, 0.18));
  transition: box-shadow 0.15s ease;
}

a.kvr__dot:hover,
a.kvr__dot:focus-visible {
  box-shadow: 0 0 0 2px var(--kvr-dot-ring-gap, #fff),
    0 0 0 3px var(--kvr-chip-hover-border, currentColor);
  outline: none;
}

.kvr__dot--current {
  box-shadow: 0 0 0 2px var(--kvr-dot-ring-gap, #fff),
    0 0 0 4px var(--kvr-current-border, currentColor);
}

.kvr__dot--oos {
  opacity: var(--kvr-oos-opacity, 0.45);
  border-style: dashed;
}