/* Adaptive price sizing for long (million+) prices — CONTAINER-QUERY based.
   catalog.item adds .price--long (>=7 digits) / .price--xlong (>=8) on .price.

   Real problem (measured): a million-price at 18px is ~95px wide; together with the
   favorite + cart buttons it no longer fits on one line inside the card's .price_wrap,
   so the buttons wrap to a second row and that card looks taller/misaligned vs siblings.
   At 15px the price is ~79px and price+buttons fit on one line again.

   Calibrated by the card's OWN width (not viewport):
     - listing card content-box ≈ 230px  → must shrink (buttons wrap at 18px)
     - mobile 1-column content-box ≈ 339px → must NOT shrink (plenty of room)
   So the threshold sits at 250px: catches the multi-column listing card, leaves the
   wide mobile 1-column (and detail page) untouched.
   No @container support → default size kept (graceful degradation). */

.products_list .item .price_wrap {
  container-type: inline-size;
}

/* card narrow enough that price + buttons would wrap (multi-column listing ~230px) */
@container (max-width: 250px) {
  .products_list .item .price_wrap .price.price--long b {
    font-size: 15px !important;
  }
  .products_list .item .price_wrap .price.price--xlong b {
    font-size: 13px !important;
  }
}

/* extra-cramped cards (carousels / 4-col) — shrink further to keep one line */
@container (max-width: 185px) {
  .products_list .item .price_wrap .price.price--long b {
    font-size: 13px !important;
  }
  .products_list .item .price_wrap .price.price--xlong b {
    font-size: 11px !important;
  }
}