/* ==========================================================================
   PlayGuitar v3 — Cart
   Lifted from design/od-checkout/screens/cart-desktop.html, tokens-only,
   scoped under body.woocommerce-cart so it wins over legacy woocommerce.css.
   Chrome (header / dark footer / .container / buttons) comes from marketing.css.
   ========================================================================== */

/* ── Hero strip ───────────────────────────────────────────── */
body.woocommerce-cart .hero-strip { padding: var(--space-12) 0 var(--space-8); border-bottom: 1px solid var(--hairline); background: var(--paper); }
body.woocommerce-cart .hero-strip .kicker { margin-bottom: var(--space-2); }
body.woocommerce-cart .hero-strip h1 { font-size: var(--h2); font-weight: var(--weight-semibold); color: var(--ink-heading); max-width: 28ch; }
body.woocommerce-cart .hero-strip h1 em { font-style: normal; color: var(--ink-muted); font-weight: var(--weight-normal); }

body.woocommerce-cart .kicker { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--brand-strong); margin: 0 0 var(--space-3) 0; display: inline-flex; align-items: center; gap: var(--space-2); }
body.woocommerce-cart .kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); display: inline-block; }

/* ── Layout ───────────────────────────────────────────────── */
body.woocommerce-cart .cart-section { padding: var(--space-12) 0 var(--space-20); background: var(--paper); }
body.woocommerce-cart .cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-12); align-items: start; }
body.woocommerce-cart .cart-main { margin: 0; }

/* ── Table ────────────────────────────────────────────────── */
body.woocommerce-cart .cart-table { width: 100%; border-collapse: collapse; background: var(--paper); margin: 0; }
body.woocommerce-cart .cart-table thead th { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--ink-muted); padding: 0 var(--space-4) var(--space-3); text-align: left; border-bottom: 1px solid var(--hairline); background: transparent; }
body.woocommerce-cart .cart-table thead th.col-price { text-align: right; font-variant-numeric: tabular-nums; }
body.woocommerce-cart .cart-table thead th.col-remove { text-align: center; }

body.woocommerce-cart .cart-row td { padding: var(--space-6) var(--space-4); vertical-align: middle; border-bottom: 1px solid var(--hairline); background: transparent; }
body.woocommerce-cart .cart-row .col-course { padding-left: 0; }
body.woocommerce-cart .cart-row .col-remove { padding-right: 0; }

body.woocommerce-cart .course-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink-heading); margin: 0 0 var(--space-1) 0; line-height: var(--leading-snug); }
body.woocommerce-cart .course-title a { color: var(--ink-heading); }
body.woocommerce-cart .course-title a:hover { color: var(--brand-strong); }
body.woocommerce-cart .course-tagline { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; line-height: var(--leading-snug); max-width: 44ch; }

/* Price is the line amount (courses sell 1 unit each — no qty/subtotal columns) */
body.woocommerce-cart .col-price { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink-heading); white-space: nowrap; }

body.woocommerce-cart .col-remove { text-align: center; }
body.woocommerce-cart .remove-link { font-size: var(--text-sm); color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); min-height: 44px; display: inline-flex; align-items: center; transition: color var(--transition-fast), text-decoration-color var(--transition-fast); }
body.woocommerce-cart .remove-link:hover { color: var(--error); text-decoration-color: var(--error); }
body.woocommerce-cart .remove-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ── Foot: coupon ─────────────────────────────────────────── */
body.woocommerce-cart .cart-foot { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }

body.woocommerce-cart .coupon { margin: 0; }
body.woocommerce-cart .coupon-toggle { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-muted); background: transparent; border: 0; padding: var(--space-2) 0; display: inline-flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-sm); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline); cursor: pointer; transition: color var(--transition-fast), text-decoration-color var(--transition-fast); }
body.woocommerce-cart .coupon-toggle:hover { color: var(--ink-body); text-decoration-color: var(--ink-muted); }
body.woocommerce-cart .coupon-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
body.woocommerce-cart .coupon-toggle .chev { width: 12px; height: 12px; transition: transform var(--transition-fast); }
body.woocommerce-cart .coupon-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
body.woocommerce-cart .coupon-form { display: none; margin-top: var(--space-4); padding: var(--space-5); background: var(--paper-tint); border: 1px solid var(--hairline); border-radius: var(--radius-md); max-width: 460px; }
body.woocommerce-cart .coupon-form[aria-hidden="false"] { display: block; }
body.woocommerce-cart .coupon-form label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-body); margin-bottom: var(--space-2); }
body.woocommerce-cart .coupon-row { display: flex; gap: var(--space-2); }
body.woocommerce-cart .coupon-input { flex: 1; height: 44px; font-family: var(--font-body); font-size: var(--text-base); color: var(--ink-body); background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 0 var(--space-3); -webkit-appearance: none; appearance: none; min-width: 0; }
body.woocommerce-cart .coupon-input:focus { outline: none; border-color: var(--ink-heading); box-shadow: 0 0 0 3px rgba(27,25,22,0.12); }
body.woocommerce-cart .coupon-apply { height: 44px; padding: 0 var(--space-5); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-heading); background: var(--paper); border: 1px solid var(--ink-heading); border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); white-space: nowrap; }
body.woocommerce-cart .coupon-apply:hover { background: var(--ink-heading); color: var(--paper); }
body.woocommerce-cart .coupon-apply:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(27,25,22,0.18); }

/* ── Totals panel (v4: warm paper, green accents — matches checkout) ─── */
body.woocommerce-cart .totals { position: sticky; top: 96px; background: var(--paper-tint); color: var(--ink-body); border: 1px solid var(--hairline); border-top: 4px solid var(--accent); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6) var(--space-6); box-shadow: var(--shadow-md); margin: 0; width: auto; float: none; }
body.woocommerce-cart .totals .kicker { color: var(--ink-muted); margin-bottom: var(--space-2); }
body.woocommerce-cart .totals .kicker::before { background: var(--accent); }
body.woocommerce-cart .totals h2 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--accent); margin: 0 0 var(--space-2) 0; text-align: left; }
body.woocommerce-cart .totals-sub { font-size: var(--text-sm); color: var(--ink-muted); margin: 0 0 var(--space-6) 0; line-height: var(--leading-snug); }
body.woocommerce-cart .totals-rows { border-top: 1px solid var(--hairline); padding-top: var(--space-5); }
body.woocommerce-cart .totals-row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-2) 0; font-size: var(--text-base); color: var(--ink-muted); }
body.woocommerce-cart .totals-row .label { color: var(--ink-muted); }
body.woocommerce-cart .totals-row .value { font-variant-numeric: tabular-nums; color: var(--ink-heading); }
body.woocommerce-cart .totals-row .value .woocommerce-Price-amount { color: var(--ink-heading); }
body.woocommerce-cart .totals-row.is-grand { margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--hairline); font-family: var(--font-heading); font-size: var(--text-xl); }
body.woocommerce-cart .totals-row.is-grand .label,
body.woocommerce-cart .totals-row.is-grand .value { color: var(--accent); font-weight: var(--weight-semibold); }
body.woocommerce-cart .totals-cta { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
body.woocommerce-cart .btn-checkout { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--on-dark); background: var(--brand); border: 0; border-radius: var(--radius-md); padding: 16px 20px; min-height: 52px; width: 100%; letter-spacing: 0.005em; box-shadow: 0 6px 18px rgba(236,124,42,0.32); transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); text-align: center; display: inline-flex; align-items: center; justify-content: center; }
body.woocommerce-cart .btn-checkout:hover { background: var(--brand-hover); box-shadow: 0 10px 24px rgba(236,124,42,0.40); color: var(--on-dark); }
body.woocommerce-cart .btn-checkout:active { transform: translateY(1px); }
body.woocommerce-cart .btn-checkout:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring), 0 6px 18px rgba(236,124,42,0.32); }
body.woocommerce-cart .trust-line { font-size: var(--text-sm); color: var(--ink-muted); text-align: center; line-height: var(--leading-snug); margin: 0; }
body.woocommerce-cart .trust-line strong { color: var(--ink-body); font-weight: var(--weight-medium); }

/* ── Empty state ──────────────────────────────────────────── */
body.woocommerce-cart .empty { padding: var(--space-16) 0 var(--space-20); background: var(--paper); }
body.woocommerce-cart .empty-inner { max-width: 560px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
body.woocommerce-cart .empty h2 { font-family: var(--font-heading); font-size: var(--h2); font-weight: var(--weight-semibold); color: var(--ink-heading); margin: 0; max-width: 18ch; }
body.woocommerce-cart .empty p { font-size: var(--text-md); color: var(--ink-body); line-height: var(--leading-loose); margin: 0; max-width: 38ch; }
body.woocommerce-cart .btn-back { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--on-dark); background: var(--brand); border: 0; border-radius: var(--radius-md); padding: 14px 22px; min-height: 48px; display: inline-flex; align-items: center; letter-spacing: 0.005em; margin-top: var(--space-2); box-shadow: 0 6px 18px rgba(236,124,42,0.28); transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
body.woocommerce-cart .btn-back:hover { background: var(--brand-hover); box-shadow: 0 10px 24px rgba(236,124,42,0.36); color: var(--on-dark); }
body.woocommerce-cart .btn-back:active { transform: translateY(1px); }
body.woocommerce-cart .btn-back:focus-visible { outline: none; box-shadow: var(--shadow-focus), 0 6px 18px rgba(236,124,42,0.28); }

/* ── Hide any stray legacy WC cart chrome ─────────────────── */
body.woocommerce-cart .woocommerce-notices-wrapper:empty { display: none; }
body.woocommerce-cart .cart-collaterals .cross-sells { display: none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
	body.woocommerce-cart .cart-grid { grid-template-columns: 1fr; gap: var(--space-10); }
	body.woocommerce-cart .totals { position: static; }
}
@media (max-width: 768px) {
	body.woocommerce-cart .hero-strip { padding: var(--space-10) 0 var(--space-6); }
	body.woocommerce-cart .cart-section { padding: var(--space-8) 0 var(--space-12); }
	body.woocommerce-cart .cart-table thead { display: none; }
	body.woocommerce-cart .cart-table,
	body.woocommerce-cart .cart-table tbody,
	body.woocommerce-cart .cart-table tr,
	body.woocommerce-cart .cart-table td { display: block; width: 100%; }
	body.woocommerce-cart .cart-row { padding: var(--space-5) 0; border-bottom: 1px solid var(--hairline); }
	body.woocommerce-cart .cart-row td { padding: 0; border: 0; }
	body.woocommerce-cart .cart-row .col-course { margin-bottom: var(--space-3); padding-left: 0; }
	body.woocommerce-cart .cart-row .col-price,
	body.woocommerce-cart .cart-row .col-remove { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; text-align: left; }
	body.woocommerce-cart .cart-row .col-price::before { content: "Price"; color: var(--ink-muted); font-size: var(--text-sm); }
	body.woocommerce-cart .cart-row .col-remove { justify-content: flex-end; padding-top: var(--space-3); padding-right: 0; }
	body.woocommerce-cart .totals { padding: var(--space-6) var(--space-5) var(--space-5); }
}
@media (max-width: 480px) {
	body.woocommerce-cart .coupon-row { flex-direction: column; }
	body.woocommerce-cart .coupon-apply { width: 100%; }
}