/* ==========================================================================
   Fix: "Your bundle" selected-item quantity stepper is oversized / overlaps
   the product title on the Loop bundle widget (Cafellow bundle page).

   ROOT CAUSE
   ----------
   .loop-btn-input-decrease-small / .loop-btn-input-increase-small were
   inheriting a `min-width: 120px` meant for the larger stepper used in the
   main "Select your items" product-grid card. In that card it's harmless
   because the flex wrapper (.loop-bundle-product-quantity-controls, 270px)
   is sized to fit 120+30+120 exactly.

   In the "Your bundle" sidebar row, the equivalent wrapper
   (.loop-selected-variant-actions-container) has `flex-basis: 0%` and
   never grows, plus `overflow: visible` on its ancestor — so the three
   120/30/120px children just spill ~270px to the LEFT of the wrapper's
   58px box, rendering on top of the product title text ("Do not Buy &
   Cream" gets covered, only "Dò n" peeks out from behind the stepper).

   Note: the sidebar row is only ~292px wide total (with a 50px product
   thumbnail eating into that), vs. 292px+ of open width in the main
   product-grid card — so the stepper here CANNOT be the same 270x40px
   size as the main one without breaking the row again. This fix matches
   the same pill *style* (rounded ends, black fill, white text) at a size
   that actually fits: 32px-wide buttons, 36px tall — noticeably bigger
   and easier to tap than the original attempt, while still leaving room
   for the title to wrap normally.

   FIX
   ---
   1. Give the small stepper buttons their own compact size (32x36px)
      instead of inheriting the 120px min-width.
   2. Let the actions container size to its actual content (flex: 0 0 auto)
      instead of flex-basis: 0%, so it reserves real space in the row.
   3. Let the info block (image + title + price) flex-shrink to make room,
      with min-width: 0 so long titles wrap instead of pushing the stepper
      out of the row.

   Verified live against https://cafellow.com.br/a/loop_subscriptions/bundle/…
   at quantities 1 and 3 (3 is the product's max) — pill stays fixed-size,
   title no longer overlapped, no regression to the main product-grid
   stepper (untouched, different class scope).
   ========================================================================== */

.loop-selected-variant-container {
  align-items: center !important;
}

.loop-selected-variant-info-container {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.loop-selected-variant-actions-container {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin-left: 8px !important;
  overflow: visible !important;
}

.loop-selected-variant-actions {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  flex-shrink: 0 !important;
}

.loop-btn-input-decrease-small,
.loop-btn-input-increase-small {
  min-width: 32px !important;
  width: 32px !important;
  height: 36px !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  border-radius: 9999px 0 0 9999px !important;
  font-size: 16px !important;
}

.loop-btn-input-increase-small {
  border-radius: 0 9999px 9999px 0 !important;
}

.loop-selected-variant-actions-input {
  width: 34px !important;
  height: 36px !important;
  min-width: 34px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  font-size: 15px !important;
}


/* ==========================================================================
   Fix: product-grid card "ADD" button changes width once selected.

   ROOT CAUSE
   ----------
   "ADD" (.loop-btn-add-product) is 173px wide. Once clicked, it's replaced
   by the -/1/+ stepper (.loop-bundle-product-quantity-controls), whose two
   buttons each carry `min-width: 120px` (from .loop-btn-input-decrease /
   .loop-btn-input-increase, no relation to the sidebar's "-small" variant
   fixed above) — so the stepper renders at 120+30+120 = 270px. The card
   itself doesn't grow, but the footer content does, which visibly widens
   the button row the moment an item is selected (172.87px -> 270px).

   FIX
   ---
   Cap the stepper to the same 173px "ADD" occupied, and shrink its two
   buttons (62px each) so they + the 49px input still fit in that width.
   Verified live at quantities 1 and 3 (max) — width stays fixed at 173px,
   "+" disables correctly at the cap, no overlap.
   ========================================================================== */

.loop-bundle-product-quantity-controls {
  width: 173px !important;
  max-width: 173px !important;
}

.loop-btn-input-decrease,
.loop-btn-input-increase {
  min-width: 0 !important;
  width: 62px !important;
  flex: 1 1 auto !important;
  padding: 8px 0 !important;
}

.loop-bundle-product-quantity-controls .loop-form-input {
  width: 49px !important;
  min-width: 49px !important;
  flex: 0 0 auto !important;
}

/* Once the stepper is capped to 173px (narrower than the footer's full
   track), it needs to be explicitly centered -- otherwise it hugs the
   left edge instead of sitting centered under the image/title the way
   "ADD" did (ADD looked centered only because it filled the full width). */
.loop-card-footer {
  display: flex !important;
  justify-content: center !important;
}