/* Basket and checkout. Classic shortcode templates, not the block cart. */

.contener-shop .woocommerce { width: 100%; }

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--contener-radius);
  overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--contener-border);
  text-align: left;
}
.woocommerce table.shop_table th { background: var(--contener-surface-alt); color: var(--contener-heading); font-weight: 600; }

.woocommerce .cart_totals,
.woocommerce .cart-collaterals { margin-top: 28px; }

/* Woo clears its float layout with `::before`/`::after` { content:" "; display:table }
   on #customer_details. Turn that container into a grid and those two pseudo-
   elements become GRID ITEMS: the ::before takes cell 1, billing is pushed to
   cell 2, and shipping wraps to the next row — half a page of white space with
   the billing form stranded on the right.

   This is the same trap as the ul.products clearfix in product-card.css.
   Any Woo container turned into a grid needs its clearfix killed first.
   The explicit grid-column placement below then makes the order independent of
   anything Woo changes later. */
.woocommerce .checkout .col2-set::before,
.woocommerce .checkout .col2-set::after,
.woocommerce .checkout #customer_details::before,
.woocommerce .checkout #customer_details::after {
  content: none !important;
  display: none !important;
}

.woocommerce .checkout .col2-set,
.woocommerce .checkout #customer_details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.woocommerce .checkout .col2-set .col-1,
.woocommerce .checkout #customer_details .col-1 { grid-column: 1; width: auto; float: none; }
.woocommerce .checkout .col2-set .col-2,
.woocommerce .checkout #customer_details .col-2 { grid-column: 2; width: auto; float: none; }

/* With "ship to a different address" unchecked the shipping column is empty,
   so billing gets the full width instead of half a page of nothing. */
.woocommerce .checkout #customer_details:has(.col-2:empty) { grid-template-columns: minmax(0, 1fr); }
.woocommerce .checkout #customer_details .col-2:empty { display: none; }

/* The three conditional-shipping rates render as a plain list here, which is
   the whole point of not using the block checkout: the ladder is visible. */
.woocommerce ul#shipping_method { list-style: none; margin: 0; padding: 0; }
.woocommerce ul#shipping_method li { padding: 4px 0; }

.woocommerce #payment ul.payment_methods { list-style: none; margin: 0; padding: 0; }
.woocommerce #payment ul.payment_methods li { padding: 10px 0; border-bottom: 1px solid var(--contener-border); }

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button {
  padding: .85em 1.6em;
  border: 0;
  border-radius: var(--contener-radius);
  background: var(--contener-brand);
  color: var(--contener-text-invert);
  font-weight: 600;
}
.woocommerce .button:hover { background: var(--contener-brand-dark); }

@media (max-width: 780px) {
  .woocommerce .checkout .col2-set { grid-template-columns: 1fr; }
}

/* --- Basket details ------------------------------------------------------ */

/* The generic `width:100%` field rule squeezes the coupon box to nothing
   because it shares a table cell with its button. */
.woocommerce .cart .actions .coupon { display: flex; gap: 10px; align-items: center; }
.woocommerce .cart .actions .coupon label { display: none; }
.woocommerce .cart .actions .coupon #coupon_code { width: auto; min-width: 12em; flex: 0 1 16em; }
.woocommerce .cart .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }

.woocommerce .cart-collaterals { display: flex; justify-content: flex-end; }
.woocommerce .cart-collaterals .cart_totals { width: 100%; max-width: 460px; float: none; }
.woocommerce .cart-collaterals .cart_totals h2 { margin: 0 0 16px; font-size: clamp(1.2rem, 2vw, 24px); }
.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout { padding: 18px 0 0; }
.woocommerce .cart-collaterals .cart_totals .checkout-button { display: block; text-align: center; }

.woocommerce table.cart img { width: 56px; height: auto; }
.woocommerce a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  color: #c92a2a; font-size: 1.1rem; line-height: 1; text-decoration: none;
}
.woocommerce a.remove:hover { background: #fdeded; color: #c92a2a; }

@media (max-width: 780px) {
  .woocommerce .cart-collaterals .cart_totals { max-width: none; }
}