@media (max-width: 1023px) {

  /* cart code mobile */

  /* Kill the default table chrome so tr/td can become a grid */
  .woocommerce-cart .woocommerce-cart-form table.cart,
  .woocommerce-cart .woocommerce-cart-form table.cart tbody {
    display: block;
    width: 100%;
  }
 
  .woocommerce-cart .woocommerce-cart-form table.cart thead {
    display: none; /* column headers not needed in card layout */
  }
 
  /* Each row becomes a card, laid out with grid areas */
  .woocommerce-cart .woocommerce-cart-form__cart-item.cart_item {
            display: grid !important;
        grid-template-columns: 56px 1fr auto;
        /* grid-template-areas: "thumb name qty" "thumb price qty"; */
         grid-template-areas:
    "thumb name     qty"
    "thumb price    qty"
    "subtotal subtotal subtotal";
        align-items: center !important;
        column-gap: 12px !important;
        row-gap: 2px !important;
        width: 100%;
        padding: 12px !important;
        margin-bottom: 8px !important;
        background: #fff !important;
        border: 1px solid #eee;
        border-radius: 12px !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  }
 
  .woocommerce-cart .woocommerce-cart-form__cart-item.cart_item td {
    display: block;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
  }
 
  /* Remove theme's default "Product:" / "Price:" mobile labels
     so they don't duplicate the new layout */
  .woocommerce-cart .woocommerce-cart-form__cart-item.cart_item td::before {
    content: none !important;
  }
 
  /* --- Thumbnail --- */
  .woocommerce-cart .product-thumbnail {
    grid-area: thumb;
  }
  .woocommerce-cart .product-thumbnail img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
  }
 
  /* --- Name --- */
  .woocommerce-cart .product-name {
    grid-area: name;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    min-width: 0;
  }
  .woocommerce-cart .product-name a {
    color: #1a1a1a;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
 
  /* --- Price (sits under the name, like the reference) --- */
  .woocommerce-cart .product-price {
    grid-area: price;
    font-size: 13px;
    color: #666;
  }
  .woocommerce-cart .product-price .woocommerce-Price-amount {
    font-size: 13px;
    color: #666;
  }
 
  /* --- Quantity stepper — green pill, spans both rows --- */
  .woocommerce-cart .product-quantity {
    grid-area: qty;
    justify-self: end;
  }
  .woocommerce-cart .product-quantity .quantity {
    display: flex;
    align-items: center;
          width: fit-content;
    overflow: hidden;
            margin-top: 31px;
  }
  .woocommerce-cart .product-quantity .quantity .minus,
  .woocommerce-cart .product-quantity .quantity .plus {
    display: flex;
    justify-content: center;
    align-items: center;
                    padding:2px 6px;
        /* padding-block: 2px; */
  }
  


  .woocommerce-cart .product-subtotal {
     grid-area: subtotal;
  justify-self: stretch;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #eee;
  font-size: 13px;
  color: #333;
  text-align: right;
  white-space: nowrap;
  box-sizing: border-box;
  }
 
  /* If your row includes a remove/delete column (product-remove),
     dock it as a small icon in the top-right corner of the card */
  .woocommerce-cart .product-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    grid-area: unset;
  }
  .woocommerce-cart .product-remove a.remove {
    width: 20px;
    height: 20px;
    font-size: 14px;
    color: #bbb !important;
    background: transparent !important;
  }
  .woocommerce-cart .product-remove a.remove:hover {
    color: #e53935 !important;
    background: transparent !important;
  }
  .woocommerce-cart .woocommerce-cart-form__cart-item.cart_item {
    position: relative; /* anchor for .product-remove above */
  }
  /*  */



.woocommerce-cart .product-quantity {
  grid-area: qty;
  justify-self: end;
}
.woocommerce-cart .product-quantity .quantity {
  display: flex;
  align-items: center;
  
          width: auto;
}

.woocommerce-cart .product-quantity .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .product-quantity .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error{
    margin-bottom: 10px;
}

.woocommerce-cart .product-subtotal .woocommerce-Price-amount {
        font-size: 14px;
    }




}