/* ================================================================
   CART PAGE (page-cart.php)
   Styles moved out of the template (no inline <style>). Tokens: tcn-base.css §0.
   ================================================================ */
/* ═══ TCN WooCommerce Cart Light Theme ═══ */
/* .woocommerce-cart .tcn-wc-page gets letterboxed to a narrower centered
   column elsewhere (style.css) -- setting --clr-bg on body too (not just
   .tcn-wc-page below) means the ambient page canvas behind that narrower
   column goes white as well, instead of leaving the sitewide dark canvas
   visible in the gutters on either side. */
body.woocommerce-cart { --clr-bg: var(--paper); }
.tcn-wc-page {
  --clr-bg: var(--paper);
  min-height: 80vh; background: var(--clr-bg); color: var(--clr-text-main, #0a0a0a);
  padding-top: 100px;
}
.pg-head + .tcn-wc-page { padding-top: 0; }
.tcn-wc-page-inner {
  max-width: 1100px; margin: 0 auto; padding: 20px 5vw 60px;
}

/* ── Table ── */
.tcn-wc-content .shop_table { width: 100%; border-collapse: collapse; }
.tcn-wc-content .shop_table th {
  text-align: left; padding: 12px 16px; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-muted, #6b7280);
  
var(--line));
}
.tcn-wc-content .shop_table td {
  padding: 16px; 
var(--line)); color: var(--clr-text-main, #0a0a0a);
  vertical-align: middle;
}
.tcn-wc-content .shop_table .product-thumbnail img {
  width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm, 6px);
}
.tcn-wc-content .shop_table .product-name a { color: var(--clr-text-main, #0a0a0a); text-decoration: none; font-weight: 600; }
.tcn-wc-content .shop_table .product-name a:hover { color: var(--clr-primary, #0d9488); }
.tcn-wc-content .shop_table .product-price,
.tcn-wc-content .shop_table .product-subtotal { color: var(--clr-primary, #0d9488); font-weight: 700; }
.tcn-wc-content .shop_table .product-remove a {
  color: #dc2626; font-size: 1.4rem; text-decoration: none;
}
.tcn-wc-content .shop_table .product-remove a:hover { color: #b91c1c; }

/* Qty input */
.tcn-wc-content .quantity .qty {
  width: 56px; height: 40px; text-align: center; background: rgba(0,0,0,0.02);
  
var(--line)); border-radius: var(--radius-sm, 6px); color: var(--clr-text-main, #0a0a0a);
  font-size: 0.95rem; font-weight: 600;
}

/* Coupon & actions row */
.tcn-wc-content .coupon { display: flex; gap: 8px; align-items: center; }
.tcn-wc-content .coupon .input-text {
  background: rgba(0,0,0,0.02); 
var(--line));
  border-radius: var(--radius-sm, 6px); padding: 10px 14px; color: var(--clr-text-main, #0a0a0a); font-size: 0.9rem;
}
.tcn-wc-content .coupon .button,
.tcn-wc-content .actions .button {
  background: var(--clr-text-main, #0a0a0a); border: 1px solid var(--clr-text-main, #0a0a0a);
  border-radius: var(--radius-sm, 6px); padding: 10px 18px; color:var(--inverse); font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.05em; cursor: pointer; transition: background 0.15s;
}
.tcn-wc-content .coupon .button:hover,
.tcn-wc-content .actions .button:hover { background: var(--clr-primary, #0d9488); border-color: var(--clr-primary, #0d9488); }

/* Cart totals */
.tcn-wc-content .cart_totals {
  background: var(--clr-surface, #f7f7f8); 
var(--line));
  border-radius: var(--radius-md, 10px); padding: 24px; margin-top: 32px; max-width: 450px;
  margin-left: auto;
}
.tcn-wc-content .cart_totals h2 {
  font-family: var(--ff-heading, 'Dela Gothic One', sans-serif);
  font-size: 1.1rem; color: var(--clr-text-main, #0a0a0a); margin: 0 0 16px; text-transform: uppercase; }
.tcn-wc-content .cart_totals table { width: 100%; }
.tcn-wc-content .cart_totals th {
  text-align: left; color: var(--clr-text-muted, #6b7280); font-size: 0.85rem;
  padding: 8px 0; font-weight: 600;
}
.tcn-wc-content .cart_totals td { text-align: right; padding: 8px 0; color: var(--clr-text-main, #0a0a0a); }
.tcn-wc-content .cart_totals .order-total td { color: var(--clr-primary, #0d9488); font-size: 1.2rem; font-weight: 900; }

/* Checkout button */
.tcn-wc-content .wc-proceed-to-checkout .checkout-button {
  display: block; width: 100%; padding: 16px; text-align: center;
  background: var(--clr-text-main, #0a0a0a); color:var(--inverse); font-weight: 800; font-size: 1rem;
  letter-spacing: 0.06em; border-radius: var(--radius-md, 10px); text-decoration: none;
  transition: background 0.15s; border: none; cursor: pointer;
}
.tcn-wc-content .wc-proceed-to-checkout .checkout-button:hover { background: var(--clr-primary, #0d9488); opacity: 1; }

/* Empty cart */
.tcn-wc-content .cart-empty {
  text-align: center; padding: 60px 20px; color: var(--clr-text-muted, #6b7280); font-size: 1.1rem;
}
.tcn-wc-content .return-to-shop .button {
  display: inline-block; padding: 14px 28px; background: var(--clr-text-main, #0a0a0a); color:var(--inverse);
  font-weight: 700; border-radius: var(--radius-md, 10px); text-decoration: none; margin-top: 16px;
}

/* WC notices */
.tcn-wc-content .woocommerce-message {
  background: var(--clr-primary-soft, rgba(13,148,136,0.10)); border: 1px solid var(--clr-primary-soft-border, rgba(13,148,136,0.25));
  border-radius: var(--radius-md, 10px); padding: 14px 20px; color: var(--clr-primary, #0d9488); margin-bottom: 20px;
}
.tcn-wc-content .woocommerce-error {
  background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.2);
  border-radius: var(--radius-md, 10px); padding: 14px 20px; color: #dc2626; margin-bottom: 20px;
}
.tcn-wc-content .woocommerce-info {
  background: rgba(0,0,0,0.02); 
var(--line));
  border-radius: var(--radius-md, 10px); padding: 14px 20px; color: var(--clr-text-muted, #6b7280); margin-bottom: 20px;
}

/* WC Blocks (newer WC) */
.tcn-wc-content .wc-block-cart { color: var(--clr-text-main, #0a0a0a); }
.tcn-wc-content .wc-block-components-product-name { color: var(--clr-text-main, #0a0a0a); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .tcn-wc-content .shop_table thead { display: none; }
  .tcn-wc-content .shop_table,
  .tcn-wc-content .shop_table tbody,
  .tcn-wc-content .shop_table tr,
  .tcn-wc-content .shop_table td { display: block; width: 100%; }
  .tcn-wc-content .shop_table tr {
    
var(--line)); padding: 12px 0; position: relative;
  }
  .tcn-wc-content .shop_table td { padding: 4px 0; border: none; }
  .tcn-wc-content .shop_table td.product-remove { position: absolute; top: 12px; right: 0; }
  .tcn-wc-content .cart_totals { max-width: 100%; }
}