/* ============================================================
   xSmart Theme — Shopping Cart CSS (Mironet Style)
   Clean, dense, professional. Blue buttons, white cards, simple borders.
   ============================================================ */

:root {
  --m-blue: #3662A1;
  --m-blue-hover: #2d5289;
  --m-blue-light: #ECF8FF;
  --m-white: #ffffff;
  --m-text: #000000;
  --m-text-secondary: #666666;
  --m-border: #d9d9d9;
  --m-red: #cc0000;
  --m-green: #009933;
  --m-bg: #f5f5f5;
  --m-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- Main Container --- */
.mc {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 40px;
  font-family: var(--m-font);
  color: var(--m-text);
}

/* --- Page heading --- */
.mc-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--m-text);
  margin: 16px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--m-border);
}
.mc-heading__count {
  font-weight: 400;
  color: var(--m-text-secondary);
  font-size: 1rem;
}

/* ============================================================
   TWO-COLUMN GRID
   ============================================================ */
.mc-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 991px) {
  .mc-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ============================================================
   LEFT: PRODUCTS
   ============================================================ */
.mc-products__card {
  background: var(--m-white);
  border: 1px solid var(--m-border);
}

/* Cart item rows */
.mc-products__card .cart-item,
.mc-products__card .cart-detailed-list .cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--m-border);
}
.mc-products__card .cart-item:last-child {
  border-bottom: none;
}
.mc-products__card .cart-item:hover {
  background: var(--m-bg);
}

/* Product image */
.mc-products__card .cart-item .product-line-grid-left,
.mc-products__card .cart-item .product-line-info {
  display: contents;
}
.mc-products__card .product-image,
.mc-products__card .cart-item img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: var(--m-white);
  border: 1px solid var(--m-border);
}

/* Product name */
.mc-products__card .cart-item .product-line-info .label,
.mc-products__card .cart-item .product-line-info a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--m-text);
  text-decoration: none;
  line-height: 1.3;
  display: block;
}
.mc-products__card .cart-item .product-line-info a:hover {
  color: var(--m-blue);
}
.mc-products__card .cart-item .product-line-info .variant {
  font-size: 0.6875rem;
  color: var(--m-text-secondary);
  margin-top: 2px;
}

/* Unit price */
.mc-products__card .cart-item .product-price,
.mc-products__card .cart-item .current-price {
  font-size: 0.8125rem;
  color: var(--m-text-secondary);
  white-space: nowrap;
}

/* Quantity selector */
.mc-products__card .cart-item .qty,
.mc-products__card .cart-item .product-line-grid-right .qty,
.mc-products__card .cart-item .js-cart-line-product-quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--m-border);
  overflow: hidden;
}
.mc-products__card .cart-item .js-touchspin,
.mc-products__card .cart-item .bootstrap-touchspin-down,
.mc-products__card .cart-item .bootstrap-touchspin-up {
  width: 28px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--m-bg);
  color: var(--m-text);
  font-size: 0.875rem;
  cursor: pointer;
}
.mc-products__card .cart-item .js-touchspin:hover,
.mc-products__card .cart-item .bootstrap-touchspin-down:hover,
.mc-products__card .cart-item .bootstrap-touchspin-up:hover {
  background: var(--m-border);
}
.mc-products__card .cart-item input[type="text"],
.mc-products__card .cart-item .js-cart-line-product-quantity {
  width: 36px;
  height: 32px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--m-border);
  border-right: 1px solid var(--m-border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--m-text);
  background: var(--m-white);
}

/* Line total */
.mc-products__card .cart-item .product-line-total,
.mc-products__card .cart-item .product-price.float-xs-left {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--m-text);
  white-space: nowrap;
}

/* Remove button */
.mc-products__card .cart-item .remove-from-cart,
.mc-products__card .cart-item .cart-line-product-actions a {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--m-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  text-decoration: none;
}
.mc-products__card .cart-item .remove-from-cart:hover,
.mc-products__card .cart-item .cart-line-product-actions a:hover {
  color: var(--m-red);
}

/* Continue shopping */
.mc-continue {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 0;
  color: var(--m-blue);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.mc-continue:hover {
  text-decoration: underline;
}

/* ============================================================
   RIGHT: SUMMARY
   ============================================================ */
.mc-summary-col {
  position: sticky;
  top: 16px;
}

.mc-summary {
  background: var(--m-white);
  border: 1px solid var(--m-border);
  padding: 20px;
}

.mc-summary__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--m-text);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--m-border);
}

/* Totals */
.mc-summary .cart-summary-line,
.mc-summary .cart-detailed-totals .cart-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 0.8125rem;
  color: var(--m-text);
}
.mc-summary .cart-summary-line .label {
  color: var(--m-text-secondary);
  font-weight: 500;
}
.mc-summary .cart-summary-line .value {
  font-weight: 600;
}
.mc-summary .cart-summary-line.cart-total {
  padding: 12px 0 6px;
  margin-top: 8px;
  border-top: 2px solid var(--m-text);
}
.mc-summary .cart-summary-line.cart-total .label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--m-text);
}
.mc-summary .cart-summary-line.cart-total .value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--m-text);
}

/* Voucher / promo */
.mc-summary .cart-voucher,
.mc-summary .block-promo {
  margin: 12px 0;
  padding: 12px 0;
  border-top: 1px solid var(--m-border);
}
.mc-summary .block-promo .promo-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--m-text);
  margin-bottom: 6px;
}
.mc-summary .promo-input,
.mc-summary .block-promo input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--m-border);
  font-size: 0.8125rem;
  color: var(--m-text);
  background: var(--m-white);
}
.mc-summary .promo-input:focus,
.mc-summary .block-promo input:focus {
  outline: none;
  border-color: var(--m-blue);
}
.mc-summary .promo-code-button,
.mc-summary .block-promo .btn {
  margin-top: 6px;
  width: 100%;
  padding: 8px 12px;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  color: var(--m-text);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.mc-summary .promo-code-button:hover,
.mc-summary .block-promo .btn:hover {
  border-color: var(--m-blue);
  color: var(--m-blue);
}

/* Checkout CTA — blue */
.mc-summary .checkout .btn-primary,
.mc-summary .cart-detailed-actions .btn-primary,
.mc-summary a.btn-primary,
.mc-summary .checkout a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  min-height: 48px;
  background: var(--m-blue);
  color: var(--m-white);
  border: none;
  border-radius: 3px;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 12px;
}
.mc-summary .checkout .btn-primary:hover,
.mc-summary .cart-detailed-actions .btn-primary:hover,
.mc-summary a.btn-primary:hover,
.mc-summary .checkout a:hover {
  background: var(--m-blue-hover);
}
.mc-summary .checkout .btn-primary.disabled,
.mc-summary .cart-detailed-actions .btn-primary.disabled {
  background: var(--m-border);
  color: var(--m-text-secondary);
  cursor: not-allowed;
}

/* ============================================================
   EMPTY CART
   ============================================================ */
.mc .cart-empty,
.mc .no-items {
  text-align: center;
  padding: 48px 20px;
  font-size: 1rem;
  color: var(--m-text-secondary);
}
.mc .cart-empty p,
.mc .no-items p {
  margin-bottom: 16px;
}
.mc .cart-empty a,
.mc .no-items a {
  display: inline-block;
  padding: 10px 20px;
  background: var(--m-blue);
  color: var(--m-white);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
}
.mc .cart-empty a:hover,
.mc .no-items a:hover {
  background: var(--m-blue-hover);
}

/* ============================================================
   PS DEFAULT OVERRIDES
   ============================================================ */
.mc .card {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.mc .card-block { padding: 0; }
.mc .cart-detailed-list { padding: 0; }
.mc .cart-overview { padding: 0; }
.mc .separator { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .mc-summary-col { position: static; }
}

@media (max-width: 767px) {
  .mc { padding: 0 10px 30px; }
  .mc-heading { font-size: 1rem; margin: 12px 0 16px; }
  .mc-products__card .cart-item,
  .mc-products__card .cart-detailed-list .cart-item {
    grid-template-columns: 56px 1fr;
    gap: 8px;
    padding: 10px 12px;
  }
  .mc-products__card .product-image,
  .mc-products__card .cart-item img {
    width: 56px;
    height: 56px;
  }
  .mc-summary { padding: 16px; }
  .mc-summary .cart-summary-line.cart-total .value {
    font-size: 1.125rem;
  }
}