/* =========================================================================
   Master New Design — CART & CHECKOUT, small screens (≤768.98px)

   Why this lives in its own file instead of global.css:

   Below 769px Woodmart stops rendering the cart as a table and restacks it
   as one card per product — `.shop_table_responsive{display:block}`, rows
   become flex columns, cells become flex rows, the thumbnail and the remove
   "×" are pulled out of flow and pinned to the row corners, and the column
   headers come back as `td:before{content:attr(data-title)}`.

   global.css styles the *desktop* table with selectors of specificity 0,3,1
   and up (`.mnd-body .shop_table.cart td` …), which out-specify every rule
   in Woodmart's own mobile block (0,1,1). So the desktop cell padding,
   borders and thumbnail size leaked straight into that stacked layout:

     • the thumbnail cell became 100px image + 2×12px padding = 124px wide
       inside the 115px indent Woodmart reserves for it, so the photo sat on
       top of the product name and price;
     • the remove "×" is placed 7px *outside* the row, and global.css puts
       `overflow:hidden` on the table for its 12px radius — so the button was
       sliced off at the edge;
     • every stacked cell kept `border-bottom:1px solid`, drawing full-width
       rules across a layout that was designed for a dashed hairline between
       two of them only.

   Patching those collisions one by one leaves the layout hostage to the next
   Woodmart update, so the whole mobile layout is restated here. Enqueued
   only on cart/checkout and only after global.css (functions.php).
   ========================================================================= */

@media (max-width:768.98px){

  /* ---- The card is now the ROW, not the table -------------------------- */
  /* Dropping overflow:hidden here is what un-clips the remove button. */
  .mnd-body .woocommerce-cart-form .shop_table.cart{
    background:none;border:none;border-radius:0;overflow:visible;
  }

  /* 94px photo + 12px card padding + 10px gutter = the 116px indent. */
  .mnd-body .shop_table.cart tbody tr.cart_item{
    position:relative;display:flex;flex-direction:column;gap:6px;
    min-height:118px;margin-bottom:12px;
    padding:12px;padding-inline-start:116px;
    background:#fff;border:1px solid var(--mnd-card-bd);border-radius:12px;
  }

  /* ---- Stacked cells --------------------------------------------------- */
  .mnd-body .shop_table.cart tbody tr.cart_item > td{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px;
    padding:0;border-bottom:none;min-height:0;
  }
  /* Hairline between the price / quantity / subtotal lines only. */
  .mnd-body .shop_table.cart tbody tr.cart_item > td.product-price,
  .mnd-body .shop_table.cart tbody tr.cart_item > td.product-quantity{
    padding-bottom:6px;border-bottom:1px dashed #efe7dc;
  }
  /* Woodmart prints the column header as td:before in this layout. */
  .mnd-body .shop_table.cart tbody tr.cart_item > td:before{
    margin-inline-end:auto;color:var(--mnd-muted2);font-size:13px;font-weight:600;
  }

  /* ---- Photo: pinned to the inline-start corner (right in RTL) --------- */
  .mnd-body .shop_table.cart td.product-thumbnail{
    position:absolute;top:12px;inset-inline-start:12px;
    padding:0;max-height:none;overflow:visible;border:none;
  }
  /* min-width/max-width, not width — Woodmart's `min-width:100px` would
     otherwise beat a plain `width` and stretch the square back to 100px. */
  .mnd-body .shop_table.cart td.product-thumbnail img{
    width:94px;height:94px;min-width:0;max-width:none;
    object-fit:cover;border-radius:10px;border:1px solid var(--mnd-card-bd);
  }

  /* ---- Remove "×": inside the card now, not 7px past its edge ---------- */
  .mnd-body .shop_table.cart td.product-remove{
    position:absolute;top:8px;inset-inline-end:8px;
    padding:0;border:none;z-index:2;
  }

  /* Keep the title clear of that button. */
  .mnd-body .shop_table.cart td.product-name{padding-inline-end:36px;}
  .mnd-body .shop_table.cart td.product-name a{font-size:14px;line-height:1.6;}
  .mnd-body .shop_table.cart td.product-subtotal .amount{font-size:16px;}

  /* Quantity pill — compact but still a 34px tap target. */
  .mnd-body .shop_table.cart .quantity .btn{width:30px;height:34px;}
  .mnd-body .shop_table.cart .quantity input.qty{width:38px;height:34px;}

  /* ---- Elementor column widths ----------------------------------------
     The cart page (post 58391) is an Elementor layout: the cart-table widget
     is pinned to 70% and the totals widget to 30% (uploads/elementor/css/
     post-58391.css), and neither has a mobile override — so on a 390px phone
     the products column renders 245px wide and the totals 105px, side by
     side, leaving ~115px for a product title. That is the "70% / 30%".

     There used to be a YellowPencil fix for exactly this, but it is prefixed
     `.wd-page-wrapper .main-page-wrapper #main-content …` — wrappers that
     Woodmart's header.php used to open and ours no longer does, so it stopped
     matching. Targeting Woodmart's widget classes instead of the Elementor
     element ids keeps this working if the page is rebuilt. */
  .mnd-body .woocommerce .elementor .elementor-element.wd-cart-table,
  .mnd-body .woocommerce .elementor .elementor-element.wd-cart-totals{
    width:100%;max-width:100%;--container-widget-width:100%;
  }
  .mnd-body .woocommerce .elementor .e-con > .e-con-inner{flex-wrap:wrap;}

  /* ---- Coupon / totals / checkout: breathing room on a 360px screen ---- */
  /* Woodmart frames the coupon in 25px of padding + a 2px dashed border on
     mobile — far heavier than anything else in this design. */
  .mnd-body .cart-content-wrapper .wd-coupon-form{
    gap:8px;padding:14px;background:#fff;
    border:1px dashed var(--mnd-line);border-radius:12px;
  }
  .mnd-body .cart-actions .button{min-height:44px;}

  .mnd-body .cart-content-wrapper > .cart_totals .cart-totals-inner{padding:16px;}
  .mnd-body .cart_totals h2{font-size:18px;}

  .mnd-body form.woocommerce-checkout > .customer-details{padding:16px;}
  .mnd-body form.woocommerce-checkout > .checkout-order-review{padding:16px;}
}

/* =========================================================================
   AJAX cart (cart-ajax.js) — all widths.
   ========================================================================= */

/* In flight: the table/totals dim and stop taking input until the swap lands. */
.mnd-cart-busy{opacity:.45;pointer-events:none;transition:opacity .15s ease;}

/* With the quantity auto-submitting there is nothing left for "Update cart"
   to do. Keyed off the class cart-ajax.js sets on <body>, so the button is
   still there if the script never runs. */
.mnd-cart-ajax .woocommerce-cart-form button[name=update_cart]{display:none;}

/* The wrapper is printed on every cart load (functions.php) and is empty
   until WooCommerce actually has something to say. */
.mnd-body .woocommerce-notices-wrapper:empty{display:none;}
.mnd-body .woocommerce-notices-wrapper{margin-bottom:18px;}