/* ============================================================
   INLINE RESULT-ROW QUANTITY STEPPER

   `.result-action` is the swappable slot that holds EITHER the original
   blue Add button or the − qty + stepper. It is a plain shrink-to-fit
   inline-flex box, so it occupies exactly the space the Add button used
   to occupy on its own — the flex row (desktop) and the `1fr auto` grid
   (≤560px) in css/result-list.css both size identically to before, and
   nothing in that file needed to change.

   The stepper is pinned to the Add button's measured height AND width at
   every breakpoint (48×68 at ≤430px, 48×92 at 431–760px, 55×116 at
   ≥761px). Matching the height keeps card height byte-identical in both
   states; matching the width keeps the grid's `auto` action column the
   same size, so the price track next to it never shrinks and the
   ≤430px price-overflow fix stays intact.
   ============================================================ */

.result-action{
  box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:flex-end;
}
/* Takes over the grid alignment the button used to carry directly.
   (The `.result-add{justify-self:end}` rule in result-list.css is now
   inert — the button is no longer a grid item — and is left untouched.) */
@media (max-width:560px){
  .result-action{justify-self:end;}
}

/* ---- Stepper: green outline, matching the site's green accents ---- */
.qty-stepper{
  box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:space-between;
  height:48px;width:92px;                 /* = Add button at ≤760px */
  background:var(--white);
  border:2px solid var(--green);
  border-radius:10px;
  overflow:hidden;
  user-select:none;
}
.qty-btn{
  box-sizing:border-box;
  flex:0 0 auto;width:30px;height:100%;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;
  font-family:'Inter';font-weight:700;font-size:1.15rem;line-height:1;
  color:var(--green-dark);
  cursor:pointer;
  transition:background-color .15s ease;
}
.qty-btn:hover:not(:disabled){background:rgba(143,194,42,.16);}
.qty-btn:active:not(:disabled){background:rgba(143,194,42,.28);}
/* Max reached — the + is visibly inert. This is presentation only; the
   ceiling itself is enforced in js/state.js (clampCartQuantities) and
   in both mutation paths in js/quantity.js + js/cart.js. */
.qty-btn:disabled{
  color:#B6BFAB;
  cursor:not-allowed;
  background:rgba(0,0,0,.02);
}
.qty-value{
  flex:1 1 auto;min-width:0;text-align:center;
  font-family:'Inter';font-weight:700;font-size:1rem;color:var(--ink);
  line-height:1;
}

/* Narrow phones: the Add button drops to 68.6px wide here (its reduced
   padding from the price-overflow fix), and `.result-right` has zero
   slack left at 360–390px, so the stepper has to match that width
   exactly rather than grow. The ± hit areas stay full 48px height. */
@media (max-width:430px){
  .qty-stepper{width:68px;}
  .qty-btn{width:22px;font-size:1.05rem;}
  .qty-value{font-size:.95rem;}

  /* ---- Touch-target enlargement (mobile only, invisible) ----
     Nothing above this changed: the visible stepper — border, colors,
     radius, font, 48px height — is pixel-identical to before. Only the
     CLICKABLE area of each ± button grows, via a transparent,
     absolutely-positioned ::after that extends past the button's own
     edges. Absolute positioning takes it out of flow, so it cannot move
     or resize the button, the row, or the card — it only affects where
     a tap registers.

     A 68px-wide stepper physically can't fit two 44px iOS-guideline
     targets side by side (that's 88px). What it CAN do: the container's
     48px height already exceeds 44px, so height needs no help. For
     width, each button borrows from the two directions that actually
     have spare room — outward into the small gap already reserved on
     its own side (14px toward the price for −, the card's own inner
     padding toward the card edge for +), and a few px inward from the
     shared number, which has empty space around the single digit.
     Together that takes each button from 22px to ~38px wide — not the
     full 44px this space can't physically hold, but a real, safe
     improvement with no overlap into the price text, the card edge, or
     the other button's zone.

     overflow flips from hidden to visible so the zone can extend past
     the stepper's own box; each end button gets the matching inner
     corner radius baked into its own background (10px outer − 2px
     border = 8px) so the rounded look stays identical now that
     clipping isn't doing that job anymore. */
  .qty-stepper{overflow:visible;}
  .qty-minus{border-radius:8px 0 0 8px;}
  .qty-plus{border-radius:0 8px 8px 0;}

  .qty-btn{position:relative;}
  .qty-btn::after{
    content:'';
    position:absolute;
    top:-8px; bottom:-8px;
  }
  .qty-minus::after{ left:-10px; right:-6px; }
  .qty-plus::after{ left:-6px; right:-10px; }
}

/* Desktop / large tablet: Add button is 55px tall, 115.6px wide,
   radius 11px — the stepper mirrors all three. */
@media (min-width:761px){
  .qty-stepper{height:55px;width:115px;border-radius:11px;}
  .qty-btn{width:38px;font-size:1.3rem;}
  .qty-value{font-size:1.1rem;}
}

/* ---- Quantity change feedback ----
   Deliberately light. The full add-to-cart animation (floating $, price
   flying to the header cart, cart pulse) fires only on the FIRST add;
   +/- presses just bump the number so repeat taps stay fast. */
.qty-value.qty-bump{display:inline-block;animation:qtyBump .28s ease;}
@keyframes qtyBump{
  0%{transform:scale(1);}
  45%{transform:scale(1.3);color:var(--green-dark);}
  100%{transform:scale(1);}
}

/* Quantity badge in the checkout slip, shown only when qty > 1. */
.slip-qty{
  font-family:'Inter';font-weight:600;font-size:.82rem;
  color:var(--green-dark);background:rgba(143,194,42,.15);
  border-radius:5px;padding:2px 6px;white-space:nowrap;
}

/* ---- Per-unit breakdown in the checkout slip ----
   Only rendered for groups holding 2+ physical units of a console or
   handheld. Sits in the same full-width grid row `.ded-options` uses,
   below the group's name/total. Each unit carries its own price, its
   own remove button and its own deduction checkboxes, so one unit's
   missing power supply never touches another's payout. */
.slip-units{
  grid-column:1 / -1;
  display:flex;flex-direction:column;gap:6px;
  margin:6px 0 2px;padding-left:10px;
  border-left:2px solid var(--line);
}
.slip-unit{display:flex;flex-direction:column;gap:1px;}
.slip-unit-head{display:flex;align-items:center;gap:8px;}
.slip-unit-label{
  flex:1 1 auto;min-width:0;
  font-family:'Inter';font-weight:600;font-size:.8rem;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft);
}
/* Unit prices read as sub-totals of the group total above them, so they
   sit a step down in size rather than competing with it. */
.slip-unit .cart-price{font-size:.95rem;}
.slip-unit .ded-options{margin:1px 0 0;}

@media (prefers-reduced-motion: reduce){
  .qty-btn{transition:none;}
  .qty-value.qty-bump{animation:none;}
}