/* ══════════════════════════════════════════════════════════════════════════
   Variation selector (§2.4).

   The real constraint is ten Hungarian flavour names, some 16–18 characters
   (Amix Black Line Black CFM Isolate 2000g). A <select> hides the choice and
   a colour swatch would be invented art, so neither is used: this is a real
   radiogroup of visually-hidden inputs behind styled labels. Arrow keys work
   because they are native radios and nothing intercepts them.

   The selected option carries the chosen-mark — the store's single "this one"
   signal, the same mark that will mean chosen on shipping and payment rows.
   It is legible in a still frame with colour removed, which is the point.
   ══════════════════════════════════════════════════════════════════════ */

@layer components {
  .rtv-variation__label {
    display: block;
    margin-block-end: var(--s-2);
    color: var(--rtv-ink-2);
    font-family: var(--rtv-font-system);
    font-size: var(--t-13);
    font-weight: 600;
  }

  /* The chosen value is appended to the group label in full ink, so the
     current choice is readable without scanning the option row. */
  .rtv-variation__chosen {
    color: var(--rtv-ink);
  }

  .rtv-variation__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    /* No list bullets, no indent — the group is a control, not prose. */
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (max-width: 640px) {
    /* Two up, so ten options occupy 5 rows (~252px) instead of 10 (~504px).
       That difference is the whole first-viewport budget on the CFM Isolate. */
    .rtv-variation__options {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  }

  .rtv-variation__item {
    position: relative;
    display: flex;
  }

  /* Visually hidden but focusable and in the accessibility tree. Not
     `display:none` — that would remove it from the radio group entirely. */
  .rtv-variation__input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .rtv-variation__option {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-block-size: var(--tap-min);
    padding-inline: var(--s-3);
    padding-block: var(--s-2);
    border: var(--bw-control) solid transparent;
    border-radius: var(--r-1);
    background-color: var(--rtv-ground-sunk);
    color: var(--rtv-ink);
    font-family: var(--rtv-font-system);
    font-size: var(--t-14);
    font-weight: 500;
    line-height: var(--lh-tight);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-out),
                border-color var(--dur-1) var(--ease-out);
  }

  .rtv-variation__option:hover {
    background-color: var(--rtv-ground);
    border-color: var(--rtv-line);
  }

  .rtv-variation__input:checked + .rtv-variation__option {
    background-color: var(--rtv-tray);
    border-color: var(--rtv-ink);
  }

  .rtv-variation__input:focus-visible + .rtv-variation__option {
    outline: 3px solid var(--rtv-ink);
    outline-offset: 2px;
  }

  /* ── the chosen-mark ────────────────────────────────────────────────────
     Behind the text, overshooting the label box by 6px on every side, so it
     reads as drawn around the word rather than as a second border. It is
     never the only signal: the fill and the 1px ink border carry the state
     for anyone who cannot see the stroke. */
  .rtv-variation__mark {
    position: absolute;
    inset: -6px;
    color: var(--rtv-green-action);
    pointer-events: none;
    opacity: 0;
  }

  .rtv-variation__input:checked + .rtv-variation__option .rtv-variation__mark {
    opacity: 1;
  }

  /* ── unavailable combination ────────────────────────────────────────────
     Never hidden and never removed: a shopper must be able to see that the
     flavour exists. The strike is drawn, the reason is a word, and the colour
     is not doing the work on its own. */
  .rtv-variation__option--out {
    background-color: var(--rtv-ground);
    color: var(--rtv-ink-3);
    cursor: not-allowed;
  }

  .rtv-variation__option--out:hover {
    background-color: var(--rtv-ground);
    border-color: transparent;
  }

  .rtv-variation__strike {
    position: absolute;
    inset: 0;
    color: var(--rtv-ink-3);
    pointer-events: none;
  }

  .rtv-variation__oos {
    margin-inline-start: var(--s-1);
    font-size: var(--t-11);
  }

  /* ── the unselected-group prompt ────────────────────────────────────────
     Rendered directly above the CTA and wired to it with aria-describedby.
     This is the named reason that makes the disabled button a state rather
     than a defect (§2.3). */
  .rtv-variation__prompt {
    display: block;
    margin-block-start: var(--s-3);
    color: var(--rtv-ink-2);
    font-family: var(--rtv-font-system);
    font-size: var(--t-13);
    line-height: var(--lh-tight);
  }
}