/**
 * Cart + Checkout + Account component styles.
 * Theme-agnostic: uses --shop-* and --wp--preset--* tokens only.
 */

/* ───── Buttons ───── */

[class*="-shop-button"] {
	display: inline-block;
	padding: var(--shop-space-xs) var(--shop-space-md);
	background: var(--shop-color-primary);
	color: var(--shop-color-on-primary);
	font-family: var(--shop-font-body);
	font-size: var(--shop-text-base);
	font-weight: 600;
	line-height: 1.2;
	border: 0;
	border-radius: var(--shop-radius-md);
	cursor: pointer;
	text-decoration: none;
	transition: opacity var(--shop-transition-fast);
}

[class*="-shop-button"]:hover,
[class*="-shop-button"]:focus-visible {
	opacity: 0.9;
	color: var(--shop-color-on-primary);
}

[class*="-shop-button--primary"] {
	background: var(--shop-color-accent);
	color: var(--shop-color-on-accent);
}

[class*="-shop-button--block"] {
	display: block;
	width: 100%;
	text-align: center;
	padding: var(--shop-space-sm) var(--shop-space-md);
}

[class*="-shop-button"].is-added {
	background: var(--shop-color-success);
	color: var(--shop-color-on-primary, #fff);
}

/* ───── Notices ───── */

[class*="-shop-notice"] {
	padding: var(--shop-space-sm) var(--shop-space-md);
	border-radius: var(--shop-radius-md);
	border-left: 4px solid var(--shop-color-border);
	background: var(--shop-color-surface-muted);
	margin: var(--shop-space-sm) 0;
}

[class*="-shop-notice--error"] {
	border-left-color: var(--shop-color-oos);
}

[class*="-shop-notice--info"] {
	border-left-color: var(--shop-color-accent);
}

/* ───── Cart table ───── */

[class*="-shop-cart-table"] {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--shop-space-md);
	font-family: var(--shop-font-body);
}

[class*="-shop-cart-table"] th,
[class*="-shop-cart-table"] td {
	padding: var(--shop-space-sm);
	text-align: left;
	border-bottom: 1px solid var(--shop-color-border);
	vertical-align: middle;
}

[class*="-shop-cart-table"] th {
	font-size: var(--shop-text-sm);
	color: var(--shop-color-text-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

[class*="-shop-cart-product"] {
	display: flex;
	align-items: center;
	gap: var(--shop-space-sm);
}

[class*="-shop-cart-product"] img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--shop-radius-sm);
	flex-shrink: 0;
}

/* Standalone qty input (legacy contexts where .shop-cart-qty is used
   on its own, not inside a stepper). Child-combinator scope: only
   target inputs whose immediate parent is NOT a stepper. The stepper
   version is styled in shop-base.css and must not pick up the
   width/padding/border below — those would inflate the stepper input
   and break the row alignment. */
:not([class*="-shop-qty-stepper"]) > [class*="-shop-cart-qty"] {
	width: 5rem;
	padding: 0.35em 0.5em;
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius-sm);
	font-family: inherit;
	background: var(--shop-color-surface);
	color: var(--shop-color-text);
}

[class*="-shop-cart-remove"] {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--shop-color-text-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--shop-radius-pill);
	transition: background var(--shop-transition-fast);
}

[class*="-shop-cart-remove"]:hover {
	background: var(--shop-color-oos);
	color: var(--shop-color-on-primary, #fff);
}

[class*="-shop-cart-footer"] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--shop-space-md);
	padding-top: var(--shop-space-md);
	border-top: 2px solid var(--shop-color-border);
	flex-wrap: wrap;
}

[class*="-shop-cart-subtotal"] {
	font-size: var(--shop-text-lg);
	margin: 0;
}

/* ───── Checkout ───── */

[class*="-shop-checkout-grid"] {
	display: grid;
	gap: var(--shop-space-lg);
	grid-template-columns: 1fr;
}

@media (min-width: 850px) {
	[class*="-shop-checkout-grid"] {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}

[class*="-shop-checkout-fields"] input[type="text"],
[class*="-shop-checkout-fields"] input[type="email"],
[class*="-shop-checkout-fields"] input[type="tel"],
[class*="-shop-checkout-fields"] input[type="file"],
[class*="-shop-checkout-fields"] textarea {
	width: 100%;
	padding: var(--shop-space-xs) var(--shop-space-sm);
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius-sm);
	font-family: inherit;
	font-size: inherit;
	background: var(--shop-color-surface);
	color: var(--shop-color-text);
}

[class*="-shop-checkout-fields"] label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 600;
}

[class*="-shop-hint"] {
	display: block;
	font-size: var(--shop-text-xs);
	color: var(--shop-color-text-muted);
	margin-top: 0.25em;
}

[class*="-shop-checkout-summary"] {
	background: var(--shop-color-surface-muted);
	padding: var(--shop-space-md);
	border-radius: var(--shop-radius-md);
	height: fit-content;
}

[class*="-shop-checkout-items"] {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--shop-space-sm);
}

[class*="-shop-checkout-items"] li {
	display: flex;
	justify-content: space-between;
	gap: var(--shop-space-xs);
	padding: var(--shop-space-xs) 0;
	border-bottom: 1px solid var(--shop-color-border);
	font-size: var(--shop-text-sm);
}

[class*="-shop-checkout-totals"] {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--shop-space-xs) var(--shop-space-sm);
	margin: var(--shop-space-sm) 0;
}

[class*="-shop-checkout-totals"] dt {
	margin: 0;
}

[class*="-shop-checkout-totals"] dd {
	margin: 0;
	text-align: right;
}

[class*="-shop-bank-info"] {
	background: var(--shop-color-surface-muted);
	padding: var(--shop-space-sm) var(--shop-space-md);
	border-radius: var(--shop-radius-md);
	margin: var(--shop-space-sm) 0;
}

/* ───── Account / Orders ───── */

[class*="-shop-orders-table"],
[class*="-shop-order-items"] {
	width: 100%;
	border-collapse: collapse;
	margin: var(--shop-space-sm) 0;
}

[class*="-shop-orders-table"] th,
[class*="-shop-orders-table"] td,
[class*="-shop-order-items"] th,
[class*="-shop-order-items"] td {
	padding: var(--shop-space-xs) var(--shop-space-sm);
	border-bottom: 1px solid var(--shop-color-border);
	text-align: left;
	/* Thai text has no word boundary — keep-all stops the browser from
	   wrapping product names char-by-char (which collapses the cell
	   to a vertical strip when other columns claim more width). */
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* Product name column (always first) needs room so other columns
   can't squeeze it to ~50px wide. */
[class*="-shop-orders-table"] th:first-child,
[class*="-shop-orders-table"] td:first-child,
[class*="-shop-order-items"] th:first-child,
[class*="-shop-order-items"] td:first-child {
	min-width: 12em;
}

[class*="-shop-orders-table"] th,
[class*="-shop-order-items"] th {
	font-size: var(--shop-text-sm);
	color: var(--shop-color-text-muted);
	font-weight: 600;
}

[class*="-shop-order-meta"] {
	color: var(--shop-color-text-muted);
	margin: var(--shop-space-xs) 0 var(--shop-space-sm);
}

[class*="-shop-order-tracking"] code {
	background: var(--shop-color-surface-muted);
	padding: 0.1em 0.4em;
	border-radius: var(--shop-radius-sm);
}

/* Customer slip attach card — sits between totals and address. */
[class*="-shop-order-slip"] {
	margin: var(--shop-space-md) 0;
	padding: var(--shop-space-md);
	background: var(--shop-color-surface-muted);
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius-md);
}
[class*="-shop-order-slip"] h3 {
	margin: 0 0 var(--shop-space-sm);
}
[class*="-shop-order-slip__existing"] small {
	color: var(--shop-color-text-muted);
}
[class*="-shop-order-slip__form"] input[type="file"] {
	display: block;
	margin-top: var(--shop-space-xs);
}
/* Live status line — colour follows the data-kind set by shop-slip-resize.js */
[class*="-shop-order-slip__status"] {
	min-height: 1.2em;
	margin: var(--shop-space-xs) 0;
	font-size: var(--shop-text-sm);
	color: var(--shop-color-text-muted);
}
[class*="-shop-order-slip__status"][data-kind="ok"]    { color: var(--shop-color-success, var(--shop-color-text)); }
[class*="-shop-order-slip__status"][data-kind="busy"]  { color: var(--shop-color-text-muted); font-style: italic; }
[class*="-shop-order-slip__status"][data-kind="warn"]  { color: var(--shop-color-warning, var(--shop-color-text)); }
[class*="-shop-order-slip__status"][data-kind="error"] { color: var(--shop-color-danger,  var(--shop-color-text)); }

[class*="-shop-account-links"] {
	list-style: none;
	padding: 0;
	display: flex;
	gap: var(--shop-space-md);
	flex-wrap: wrap;
}

[class*="-shop-account-links"] a {
	display: inline-block;
	padding: var(--shop-space-xs) var(--shop-space-sm);
	background: var(--shop-color-surface-muted);
	border-radius: var(--shop-radius-sm);
	text-decoration: none;
	color: var(--shop-color-text);
}

[class*="-shop-account-links"] a:hover,
[class*="-shop-account-links"] a:focus-visible {
	background: var(--shop-color-accent);
	color: var(--shop-color-on-accent);
}

/* ────────────────────────────────────────────────────────────────
   Cart page only — scoped via [data-shop-cart-root] (templates/cart.php:31).
   This attribute exists ONLY on the cart page <section>, so rules below
   never touch: mini cart bar (data-shop-cart-bar), checkout page,
   account orders, order detail. Append-only — does not modify the base
   table styles above.

   Layer A: all-screen overflow safety (Thai char-stack + no-space strings).
   Layer B: mobile (≤549px) card layout — desktop/iPad keep original table.
   ──────────────────────────────────────────────────────────────── */

/* Layer A — safety net for any viewport when title is pathological.
   No visual change on normal titles; only fires when content would
   otherwise overflow into adjacent cells. Mirrors orders-table:257-271. */
[data-shop-cart-root] [class*="-shop-cart-table"] th,
[data-shop-cart-root] [class*="-shop-cart-table"] td {
	word-break: keep-all;
	overflow-wrap: anywhere;
}
[data-shop-cart-root] [class*="-shop-cart-table"] td:first-child {
	min-width: 12em;
}

/* Layer B — mobile card layout.
   Below the Flatsome mobile breakpoint (CLAUDE.md: ≤549px), the 5-column
   table is too wide; flip rows to a stacked card so titles, qty stepper,
   and totals each get full row width. */
@media (max-width: 549px) {
	[data-shop-cart-root] [class*="-shop-cart-table"],
	[data-shop-cart-root] [class*="-shop-cart-table"] tbody,
	[data-shop-cart-root] [class*="-shop-cart-table"] tr,
	[data-shop-cart-root] [class*="-shop-cart-table"] td {
		display: block;
		width: 100%;
	}
	[data-shop-cart-root] [class*="-shop-cart-table"] thead {
		display: none;
	}
	[data-shop-cart-root] [class*="-shop-cart-table"] tr {
		border: 1px solid var(--shop-color-border);
		border-radius: var(--shop-radius-md);
		padding: var(--shop-space-sm);
		margin-bottom: var(--shop-space-sm);
		position: relative;
	}
	[data-shop-cart-root] [class*="-shop-cart-table"] td {
		border: 0;
		padding: 0.25em 0;
	}
	[data-shop-cart-root] [class*="-shop-cart-table"] td:first-child {
		min-width: 0;
	}
	/* Hide the wrapper <td> of the remove button — its <button> child is
	   absolutely positioned below. <td> in block-mode under a still-tabular
	   <tr> behaves inconsistently with position:absolute across browsers
	   (Chrome iOS in particular places it relative to the wrong ancestor),
	   so we anchor the button directly. */
	[data-shop-cart-root] [class*="-shop-cart-table"] td:last-child {
		padding: 0;
		height: 0;
		overflow: visible;
	}
	/* ✕ button — float top-right of the <tr> card (which is position:
	   relative above). Touch target ≥32px so it never overlaps the
	   thumbnail thumb sitting top-left of the same card. */
	[data-shop-cart-root] [class*="-shop-cart-remove"] {
		position: absolute;
		top: 0.25em;
		right: 0.25em;
		width: 32px;
		height: 32px;
		z-index: 1;
	}
	/* Product cell — reserve right gutter so the absolute ✕ button
	   above never overlaps the thumbnail/title (case: 48px thumb sits
	   top-left of the same card; without this padding ✕ visually lands
	   on the thumb). Mobile-only, scoped to cart page. */
	[data-shop-cart-root] [class*="-shop-cart-product"] {
		padding-right: 2.5em;
	}
	/* Title clamp 2 lines — mirror product-card pattern (shop-product.css:126).
	   Stops 100+ char Thai titles from inflating each card row. */
	[data-shop-cart-root] [class*="-shop-cart-product"] a {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		line-height: 1.4;
		max-height: calc(1.4em * 2);
	}
	/* Footer — stack subtotal + CTA, full-width touch target ≥44px. */
	[data-shop-cart-root] [class*="-shop-cart-footer"] {
		flex-direction: column;
		align-items: stretch;
	}
	[data-shop-cart-root] [class*="-shop-cart-footer"] [class*="-shop-button"] {
		width: 100%;
		padding: var(--shop-space-md);
	}
}