/* ===== YURGA Cart layout ===== */

.yurga-cart-grid{
  display:grid;
  grid-template-columns: minmax(0,2fr) minmax(280px,1fr);
  gap:40px;
  align-items:start;
}

.woocommerce-cart-form table.shop_table {
  background:#fff;
  border:1px solid #eee;
}

.woocommerce-cart-form .product-thumbnail img{
  max-width:180px;
  height:auto;
}

.wc-proceed-to-checkout a.checkout-button{
  background:#000 !important;
  color:#fff !important;
  border-radius:0;
  padding:14px 18px;
  text-transform:none;
  font-weight:600;
}

.yurga-cart-sidebar .cart_totals{
  border:1px solid #eee;
  background:#fff;
  padding:22px;
}

.yurga-cart-info{
  margin-top:18px;
  display:grid;
  gap:10px;
}

.yurga-info-box{
  border:1px solid #eee;
  background:#fafafa;
  padding:14px 16px;
  font-size:14px;
  line-height:1.35;
}

@media (max-width: 991px){
  .yurga-cart-grid{
    grid-template-columns: 1fr;
  }
  .woocommerce-cart-form .product-thumbnail img{
    max-width:120px;
  }
}

/* --- Fix: product name overlapping thumbnail on cart --- */
.woocommerce-cart-form .shop_table td.product-thumbnail {
  width: 180px;                 /* lock the thumbnail column */
  max-width: 180px;
  vertical-align: middle;
}
.woocommerce-cart-form .shop_table td.product-thumbnail a,
.woocommerce-cart-form .shop_table td.product-thumbnail img {
  display: block;
  float: none;                  /* prevent theme floats */
}

.woocommerce-cart-form .shop_table td.product-name {
  vertical-align: middle;
  padding-left: 14px;           /* breathing room from image */
  white-space: normal;          /* allow wrapping instead of drifting over */
  position: static;             /* neutralize any inherited positioning */
  transform: none;              /* just in case theme transforms apply */
}

/* keep columns sane on smaller viewports */
@media (max-width: 991px){
  .woocommerce-cart-form .shop_table td.product-thumbnail{
    width: 120px;
    max-width: 120px;
  }
}

/* ===== Checkout: cross-browser hardening (Opera/Chromium, mobile) ===== */
/* Grid container: centered, safe max width */
body.woocommerce-checkout form.woocommerce-checkout > .yurga-checkout-grid{
  display: grid !important;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  gap: 40px;
}

/* Critical: allow grid children to shrink (prevents sidebar crush) */
body.woocommerce-checkout form.woocommerce-checkout > .yurga-checkout-grid > *{
  min-width: 0 !important;
}

/* Mobile/tablet: stack cleanly and keep centered */
@media (max-width: 991.98px){
  body.woocommerce-checkout form.woocommerce-checkout > .yurga-checkout-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Sidebar safety */
body.woocommerce-checkout .yurga-checkout-sidebar{ min-width: 0; }
body.woocommerce-checkout .yurga-checkout-sidebar .woocommerce-checkout-review-order{ width: 100%; }

/* Review table: don’t let long names/attrs blow out layout */
body.woocommerce-checkout .yurga-review-table{ width: 100%; table-layout: fixed; }
body.woocommerce-checkout .yurga-review-table .product-name{ overflow-wrap: anywhere; word-break: break-word; }
body.woocommerce-checkout .yurga-review-table .product-total{ white-space: nowrap; width: 1%; }

/* Stripe / GPay payment-request button must not overflow the column */
#wc-stripe-payment-request-wrapper,
#wc-stripe-payment-request-button,
.wc-stripe-payment-request-wrapper,
#wc-stripe-payment-request-wrapper button,
#wc-stripe-payment-request-button button{
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden;
}

/* Hide the top coupon toggle (we show coupon in the sidebar) */
message-container container medium-text-center { display:none !important; }

/* Global safety: no horizontal scroll if a widget misbehaves */
html, body{ overflow-x: hidden; }

/* ===== Layout swap to match mock: gateways LEFT, summary RIGHT ===== */
body.woocommerce-checkout form.woocommerce-checkout > .yurga-checkout-grid{
  /* you already have this grid; leaving here for context */
  gap: 40px;
}

/* Let sidebar children participate in the main grid */
@media (min-width: 992px){
  body.woocommerce-checkout .yurga-checkout-sidebar{
    display: contents;           /* removes wrapper box, keeps children */
  }
  /* Put heading + summary bits on the RIGHT column */
  #order_review_heading{ grid-column: 2; }
  #order_review{ display: contents; }  /* flatten inner review wrapper too */
  .yurga-review-table{ grid-column: 2; }
  .yurga-coupon-in-review{ grid-column: 2; }

  /* Move payment methods block to the LEFT column */
  #payment{
    grid-column: 1;
    width: 100% !important;
    align-self: start;
    margin-top: 16px;            /* space below express buttons / details */
  }
}

/* Optional: disable sticky if you previously enabled it (prevents quirks) */
@media (min-width: 992px){
  .yurga-checkout-sidebar{ position: static !important; }
}

/* Visual polish so it looks like your screenshot */
.yurga-review-table{ background:#fff; border:1px solid #eee; }
.yurga-checkout-sidebar .woocommerce-checkout-review-order{
  background:#fff; border:1px solid #eee; padding:22px;
}
#payment .place-order #place_order{
  background:#000 !important; color:#fff !important; border-radius:0; padding:14px 18px;
}

/* Keep everything responsive */
@media (max-width: 991.98px){
  body.woocommerce-checkout form.woocommerce-checkout > .yurga-checkout-grid{
    grid-template-columns: 1fr !important;
    padding-left: 16px; padding-right: 16px;
  }
  /* back to normal flow on mobile */
  .yurga-checkout-sidebar{ display:block; }
  #order_review{ display:block; }
}

/* Payment block styling on the LEFT column */
body.woocommerce-checkout #payment{
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 16px;
}
body.woocommerce-checkout #payment .place-order #place_order{
  background:#000 !important; color:#fff !important; border-radius:0; padding:14px 18px;
}

/* Right column still shows summary + coupon box */
body.woocommerce-checkout .yurga-review-table{ background:#fff; border:1px solid #eee; }