/*
 * MrKhobre cart layout v1.1
 * Desktop: product details receive the main width on the right; order summary
 * stays compact on the left. Mobile keeps the existing stacked layout.
 */

/* cart.php also has the generic .shop-layout class. This page-specific class
   intentionally overrides its 260px/1fr shop grid. In RTL the first grid
   track is on the right, where the product table is rendered. */
.cart-layout{
  grid-template-columns:minmax(0,1fr) minmax(300px,340px)!important;
  gap:24px!important;
  align-items:start;
}

.cart-table-wrap{
  width:100%;
  min-width:0;
  overflow-x:visible!important;
}

.cart-table{
  width:100%;
  min-width:0!important;
  table-layout:fixed;
}

.cart-table th,
.cart-table td{
  padding:13px 11px;
  font-size:13px;
  line-height:1.75;
  vertical-align:middle;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
}

/* Give the product name enough room to remain readable. */
.cart-table th:nth-child(1),
.cart-table td:nth-child(1){
  width:36%;
}

.cart-table th:nth-child(2),
.cart-table td:nth-child(2){
  width:16%;
}

.cart-table th:nth-child(3),
.cart-table td:nth-child(3){
  width:19%;
}

.cart-table th:nth-child(4),
.cart-table td:nth-child(4){
  width:19%;
}

.cart-table th:nth-child(5),
.cart-table td:nth-child(5){
  width:10%;
  text-align:center;
}

.cart-table td:nth-child(3),
.cart-table td:nth-child(4){
  white-space:nowrap;
}

/* Quantity controls must never force the table wider. */
.cart-table td:nth-child(2) form{
  min-width:0!important;
  width:100%;
  flex-wrap:wrap;
}

.cart-table td:nth-child(2) .form-control{
  min-width:0!important;
  width:62px!important;
  padding:6px 7px!important;
  font-size:12px;
}

.cart-table td:nth-child(2) .btn,
.cart-table td:last-child .btn{
  padding:6px 9px!important;
  font-size:11px;
}

/* Compact summary card on the left. */
.cart-layout .total-box{
  min-width:0;
  width:100%;
  padding:22px!important;
}

.cart-layout .total-box h3{
  margin-top:0;
}

/* Mid-size desktop/tablet: preserve two columns but keep product area dominant. */
@media (max-width:1100px) and (min-width:901px){
  .cart-layout{
    grid-template-columns:minmax(0,1fr) minmax(280px,310px)!important;
    gap:18px!important;
  }

  .cart-table th,
  .cart-table td{
    padding:10px 7px;
    font-size:11.5px;
  }

  .cart-table td:nth-child(3),
  .cart-table td:nth-child(4){
    font-size:10.5px;
  }
}

/* Mobile: keep the site's current stacked experience. */
@media(max-width:900px){
  .cart-layout{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }

  .cart-table-wrap{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  .cart-table{
    min-width:640px!important;
    table-layout:fixed;
  }
}

/* Guest quantity button remains clearly visible. */
.cart-table td:nth-child(2) form .btn.btn-ghost{
  background:#0A1322!important;
  color:#fff!important;
  border:1px solid #0A1322!important;
  box-shadow:none!important;
}

.cart-table td:nth-child(2) form .btn.btn-ghost:hover,
.cart-table td:nth-child(2) form .btn.btn-ghost:focus{
  background:#16243a!important;
  color:#fff!important;
  border-color:#16243a!important;
}