/* ================================================================
   Cart page grid — replicates Bootstrap col-8 / col-4 behaviour
   without loading Bootstrap. Targets the classes already added
   to the marveland cart template.
   ================================================================ */

/* ── Mobile first: single column stack ──────────────────────── */
.woocommerce-cart .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-left:  -12px;
  margin-right: -12px;
}

.woocommerce-cart .row > [class*="col-"] {
  box-sizing: border-box;
  padding-left:  12px;
  padding-right: 12px;
  width: 100%;
}

/* ── Desktop (768 px +): col-md-8 left, col-md-4 right ──────── */
@media ( min-width: 768px ) {

  .woocommerce-cart .col-md-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }

  .woocommerce-cart .col-md-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding-top: 0;
  }

  /* Flush to top — removes any theme margin above the totals panel */
  .woocommerce-cart .cart-collaterals {
    margin-top:  0 !important;
    padding-top: 0 !important;
    position: sticky;
    top: 0;
  }

  .woocommerce-cart .cart_totals h2 {
    margin-top: 0;
  }

  /* Reset WooCommerce float/width that fights the grid */
  .woocommerce-cart .cart_totals {
    float: none !important;
    width: 100% !important;
  }

  /* Checkout button full width inside the col-4 */
  .woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    display:    block;
    width:      100%;
    text-align: center;
  }
}