/* =============================================================================
   WooCommerce Cart block — fix total price clipped off-screen on narrow phones
   ============================================================================= */

/* WooCommerce's own bundled CSS switches the cart row to an "is-mobile" grid
   (80px image + 132px name column) below ~480px, but the price/total column
   still auto-places into a 3rd implicit column with no width limit of its
   own — on very narrow phones (~375px and under) that pushes the total price
   and the "Экономия" sale badge past the right edge of the screen, clipped.
   Not something this theme's markup controls (it's WC Blocks' own template),
   so overridden here with !important to beat its selector specificity.
   Fix: give the image a fixed column and stack name/quantity/total in the
   remaining width instead of squeezing them side by side. */
@media (max-width: 400px) {
  .wc-block-cart-items__row {
    grid-template-columns: 64px 1fr !important;
    row-gap: 6px;
  }

  .wc-block-cart-items__row .wc-block-cart-item__image {
    grid-row: 1 / 4 !important;
  }

  .wc-block-cart-items__row .wc-block-cart-item__product {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
  }

  .wc-block-cart-items__row .wc-block-cart-item__quantity {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
  }

  .wc-block-cart-items__row .wc-block-cart-item__total {
    grid-column: 2 / 3 !important;
    grid-row: 3 !important;
    justify-content: flex-start;
  }
}