/* ══════════════════════════════════════════════════════════════════════════
   Quantity stepper — one inline group, three 44×44 cells sharing ONE border
   (§2.3). Not three circles, not three buttons with their own outlines.

   The editable cell is the light one (--rtv-tray) inside a sunk group, so the
   thing you can type into is visually the thing you can type into without any
   label saying so.

   The − and + are drawn marks, not font glyphs and not an icon library.
   ══════════════════════════════════════════════════════════════════════ */

@layer components {
  .rtv-qty {
    display: inline-grid;
    grid-template-columns: var(--tap-min) minmax(var(--s-7), 1fr) var(--tap-min);
    align-items: stretch;
    /* One border around the group. The internal separators are single 1px
       inline-start borders on the middle and last cells, so no edge is ever
       drawn twice and the group reads as one object. */
    border: var(--bw-control) solid var(--rtv-line);
    border-radius: var(--r-1);
    background-color: var(--rtv-ground-sunk);
    overflow: hidden;
  }

  .rtv-qty__step {
    display: grid;
    place-items: center;
    min-block-size: var(--tap-min);
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--rtv-ink);
    cursor: pointer;
  }

  .rtv-qty__step .rtv-mark {
    --rtv-mark-size: 16px;
  }

  .rtv-qty__step[aria-disabled='true'],
  .rtv-qty__step:disabled {
    color: var(--rtv-ink-3);
    cursor: not-allowed;
  }

  .rtv-qty__step:focus-visible {
    outline: 3px solid var(--rtv-ink);
    /* Inset, because the group clips overflow to keep its single border. */
    outline-offset: -3px;
  }

  .rtv-qty__input {
    min-block-size: var(--tap-min);
    inline-size: 100%;
    padding-inline: var(--s-1);
    border: 0;
    border-inline: var(--bw-control) solid var(--rtv-line);
    border-radius: 0;
    background-color: var(--rtv-tray);
    color: var(--rtv-ink);
    font-family: var(--rtv-font-goods);
    font-size: var(--t-15);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    /* The spinner would be a fourth control inside a three-cell group. */
    appearance: textfield;
  }

  .rtv-qty__input::-webkit-outer-spin-button,
  .rtv-qty__input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  /* Focus rings the WHOLE group when the input has focus (§2.3): the number
     you are editing belongs to the stepper, not to a lone box. */
  .rtv-qty:has(.rtv-qty__input:focus-visible) {
    outline: 3px solid var(--rtv-ink);
    outline-offset: 2px;
  }

  .rtv-qty__input:focus-visible {
    outline: none;
  }

  .rtv-qty__label {
    /* Always a real label. Never a placeholder standing in for one. */
    display: block;
    margin-block-end: var(--s-1);
    color: var(--rtv-ink);
    font-family: var(--rtv-font-system);
    font-size: var(--t-13);
    font-weight: 600;
  }

  @media (max-width: 640px) {
    /* 16px prevents iOS zoom-on-focus; below that the viewport jumps and the
       CTA leaves the first screen. */
    .rtv-qty__input { font-size: var(--t-17); }
  }

  /* Mobile PDP: quantity and CTA share one row. This is what keeps the buy
     control inside the first viewport with ten flavours above it (§2.4). */
  .rtv-buy-row {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: var(--s-3);
    align-items: start;
  }
}