/**
 * Fire Shop — Cart Page Styles
 *
 * Refined cart page, mini cart drawer, and cart widget styling.
 * All selectors use the .fire- prefix and reference tokens from fire-tokens.css.
 *
 * Depends on: fire-tokens.css, fire-storefront.css
 * @since 1.0.0
 */

/* ============================================================
   1. Cart Table — Clean line items
   ============================================================ */

.fire-cart-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--fire-font-body);
	font-size: 14px;
}

.fire-cart-table th {
	padding: 0 0 var(--fire-space-md) 0;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fire-text-muted);
	border-bottom: 1px solid var(--fire-border);
	text-align: left;
}

.fire-cart-table td {
	padding: var(--fire-space-lg) 0;
	vertical-align: middle;
	border-bottom: 1px solid var(--fire-border);
}

.fire-cart-table tbody tr:last-child td {
	border-bottom: none;
}

.fire-cart-item {
	display: flex;
	align-items: center;
	gap: var(--fire-space-lg);
}

.fire-cart-item__image {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--fire-radius-md);
	display: block;
}

.fire-cart-item__image-link {
	flex-shrink: 0;
}

.fire-cart-item__thumbnail {
	width: 96px;
	height: 96px;
	border-radius: var(--fire-radius-md);
	object-fit: cover;
	display: block;
}

.fire-cart-item__name {
	font-weight: 500;
	font-size: 15px;
	color: var(--fire-text);
	text-decoration: none;
	display: block;
}

.fire-cart-item__name a {
	color: inherit;
	text-decoration: none;
}

.fire-cart-item__name a:hover {
	color: var(--fire-text-muted);
}

.fire-cart-item__variation {
	display: block;
	margin-top: var(--fire-space-xs);
	font-size: 12px;
	color: var(--fire-text-muted);
}

.fire-cart-item__price,
.fire-cart-table__col-price {
	font-family: var(--fire-font-data);
	font-variant-numeric: tabular-nums;
	color: var(--fire-text-muted);
	font-size: 14px;
	font-weight: 400;
}

.fire-cart-item__subtotal,
.fire-cart-table__col-subtotal {
	font-family: var(--fire-font-data);
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	font-size: 14px;
	color: var(--fire-text);
}

.fire-remove-from-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 18px;
	color: var(--fire-border);
	border-radius: var(--fire-radius-full);
	transition: color var(--fire-duration-short) var(--fire-ease-move);
	padding: 0;
}

.fire-remove-from-cart:hover {
	color: var(--fire-text-muted);
}

/* ============================================================
   2. Quantity Input — Minimal
   ============================================================ */


/* ============================================================
   3. Cart Totals — Clean and open
   ============================================================ */

/*
 * Padded on all four sides. The plugin leaves the background transparent,
 * but a theme is free to paint this as a panel (Kyoto does), and without
 * side padding the headings and figures sat flush against the fill.
 */
.fire-cart-totals {
	border: none;
	border-radius: 0;
	padding: var(--fire-space-lg);
	max-width: 400px;
	margin-left: auto;
	margin-top: 0;
	background-color: transparent;
}

.fire-cart-totals h2,
.fire-cart-totals h3 {
	font-family: var(--fire-font-body);
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fire-text-muted);
	margin: 0 0 var(--fire-space-lg) 0;
}

.fire-cart-totals table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.fire-cart-totals table th,
.fire-cart-totals table td {
	padding: var(--fire-space-sm) 0;
	border-bottom: none;
}

.fire-cart-totals table th {
	text-align: left;
	font-weight: 400;
	color: var(--fire-text-muted);
	font-size: 14px;
}

.fire-cart-totals table td {
	text-align: right;
	font-family: var(--fire-font-data);
	font-variant-numeric: tabular-nums;
	font-weight: 400;
}

.fire-cart-totals__total th,
.fire-cart-totals__total td,
.fire-cart-total-row--total th,
.fire-cart-total-row--total td {
	font-size: 16px;
	font-weight: 500;
	color: var(--fire-text);
	border-top: 1px solid var(--fire-border);
	border-bottom: none;
	padding-top: var(--fire-space-md);
}

.fire-cart-totals__checkout,
.fire-cart-totals .fire-checkout-btn {
	width: 100%;
	margin-top: var(--fire-space-xl);
}

/* ============================================================
   4. Empty Cart
   ============================================================ */

.fire-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--fire-space-3xl) var(--fire-space-md);
	text-align: center;
}

.fire-cart-empty__icon {
	font-size: 48px;
	margin-bottom: var(--fire-space-lg);
	color: var(--fire-border);
	opacity: 0.6;
}

.fire-cart-empty__message {
	font-family: var(--fire-font-body);
	font-size: 15px;
	font-weight: 400;
	color: var(--fire-text-muted);
	margin-bottom: var(--fire-space-xl);
}

.fire-cart-empty__continue {
	/* Layout only — styling via fire-btn-primary */
}

/* ============================================================
   5. Cart Actions
   ============================================================ */

.fire-cart-actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--fire-space-md);
	padding: var(--fire-space-md) 0;
}

.fire-update-cart {
	font-size: 13px;
	color: var(--fire-text-muted);
	border-color: var(--fire-border);
}

.fire-update-cart:hover {
	color: var(--fire-text);
	border-color: var(--fire-text);
}

.fire-coupon-field {
	display: flex;
	gap: var(--fire-space-sm);
}

.fire-coupon-field input {
	padding: var(--fire-space-sm) var(--fire-space-md);
	border: 1px solid var(--fire-border);
	border-radius: var(--fire-radius-md);
	font-family: var(--fire-font-body);
	font-size: 13px;
	color: var(--fire-text);
	min-width: 200px;
}

.fire-coupon-field input:focus {
	outline: none;
	border-color: var(--fire-text);
	box-shadow: none;
}

.fire-coupon-field button {
	padding: var(--fire-space-sm) var(--fire-space-md);
	border: 1px solid var(--fire-border);
	border-radius: var(--fire-radius-md);
	background-color: transparent;
	color: var(--fire-text-muted);
	font-family: var(--fire-font-body);
	font-size: 13px;
	font-weight: 400;
	cursor: pointer;
	transition: color var(--fire-duration-short) var(--fire-ease-move),
	            border-color var(--fire-duration-short) var(--fire-ease-move);
	white-space: nowrap;
}

.fire-coupon-field button:hover {
	color: var(--fire-text);
	border-color: var(--fire-text);
}

/* ============================================================
   6. Mini Cart — Inner Pieces
   ============================================================ */

/*
 * The overlay and the drawer shell live in fire-storefront.css, which is the
 * one sheet that agrees with fire-cart.js about their class names. They used
 * to be declared here too, and because this sheet is enqueued after that one,
 * these base rules beat that one's --active modifier at equal specificity. So
 * the overlay stayed at opacity 0 and visibility hidden with --active applied:
 * no dimming behind the drawer, and no way to tap the page to close it, since
 * a hidden element takes no clicks. The modifier declared here to fix that was
 * --open, which nothing has ever set.
 *
 * What is left below styles the rows, totals and footer inside the drawer.
 */

.fire-mini-cart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--fire-space-lg);
	border-bottom: 1px solid var(--fire-border);
	flex-shrink: 0;
}

.fire-mini-cart-header__title {
	font-family: var(--fire-font-body);
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fire-text-muted);
	margin: 0;
}

.fire-mini-cart-header__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--fire-text-muted);
	font-size: 18px;
	border-radius: var(--fire-radius-full);
	transition: color var(--fire-duration-short) var(--fire-ease-move);
}

.fire-mini-cart-header__close:hover {
	color: var(--fire-text);
}

.fire-mini-cart-items {
	flex: 1;
	overflow-y: auto;
	padding: var(--fire-space-md) var(--fire-space-lg);
}

.fire-mini-cart-item {
	display: flex;
	gap: var(--fire-space-md);
	padding: var(--fire-space-md) 0;
	border-bottom: 1px solid var(--fire-border);
}

.fire-mini-cart-item:last-child {
	border-bottom: none;
}

.fire-mini-cart-item__thumbnail {
	width: 56px;
	height: 56px;
	border-radius: var(--fire-radius-sm);
	object-fit: cover;
	flex-shrink: 0;
}

.fire-mini-cart-item__info {
	flex: 1;
	min-width: 0;
}

.fire-mini-cart-item__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--fire-text);
	margin: 0 0 var(--fire-space-xs) 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fire-mini-cart-item__meta {
	font-size: 12px;
	color: var(--fire-text-muted);
}

.fire-mini-cart-item__remove {
	display: flex;
	align-items: flex-start;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--fire-border);
	font-size: 14px;
	padding: 0;
	transition: color var(--fire-duration-short) var(--fire-ease-move);
}

.fire-mini-cart-item__remove:hover {
	color: var(--fire-text-muted);
}

.fire-mini-cart-footer {
	border-top: 1px solid var(--fire-border);
	padding: var(--fire-space-lg);
	flex-shrink: 0;
}

.fire-mini-cart-footer__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	font-weight: 400;
	color: var(--fire-text);
	margin-bottom: var(--fire-space-md);
}

.fire-mini-cart-footer__subtotal span:last-child {
	font-family: var(--fire-font-data);
	font-variant-numeric: tabular-nums;
}

.fire-mini-cart-footer__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--fire-space-sm);
}

.fire-mini-cart-footer__buttons a,
.fire-mini-cart-footer__buttons button {
	display: block;
	width: 100%;
	padding: var(--fire-space-sm) var(--fire-space-md);
	border-radius: var(--fire-radius-md);
	font-family: var(--fire-font-body);
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--fire-duration-short) var(--fire-ease-move);
}

.fire-mini-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--fire-space-2xl) var(--fire-space-md);
	text-align: center;
	color: var(--fire-text-muted);
	font-size: 14px;
}

/* ============================================================
   7. Mini Cart — Dropdown Mode
   ============================================================ */

.fire-mini-cart-block[data-display-mode="dropdown"] {
	position: relative;
}

.fire-mini-cart-block[data-display-mode="dropdown"] .fire-mini-cart-drawer {
	position: absolute;
	top: 100%;
	right: 0;
	width: 320px;
	height: auto;
	max-height: 400px;
	transform: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--fire-duration-short) var(--fire-ease-enter),
	            visibility var(--fire-duration-short) var(--fire-ease-enter);
	box-shadow: var(--fire-shadow-md);
	border-radius: var(--fire-radius-md);
	overflow: hidden;
}

.fire-mini-cart-block[data-display-mode="dropdown"] .fire-mini-cart-drawer--open {
	opacity: 1;
	visibility: visible;
}

.fire-mini-cart-block[data-display-mode="dropdown"] .fire-mini-cart-items {
	max-height: 240px;
}

/* ============================================================
   8. Cart Count Badge
   ============================================================ */

.fire-cart-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	border-radius: var(--fire-radius-full);
	background-color: var(--fire-text);
	color: var(--fire-surface);
	font-family: var(--fire-font-data);
	font-size: 11px;
	font-weight: 500;
	line-height: 18px;
	text-align: center;
	padding: 0 4px;
	pointer-events: none;
}

/* ============================================================
   9. Loading States
   ============================================================ */

.fire-loading {
	opacity: 0.5;
	pointer-events: none;
	position: relative;
}

.fire-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border: 2px solid var(--fire-border);
	border-top-color: var(--fire-text);
	border-radius: 50%;
	animation: fire-spin 0.6s linear infinite;
}

@keyframes fire-spin {
	to { transform: rotate(360deg); }
}

/* ============================================================
   10. Responsive
   ============================================================ */

@media (max-width: 680px) {
	/*
	 * Each line becomes a stacked card rather than a squeezed table row.
	 * The product cell keeps its image-beside-name flex across the full
	 * width; price, quantity and subtotal each become a labelled row, the
	 * label coming from the data-label the markup already carries; and the
	 * remove button pins to the top right corner.
	 *
	 * Earlier versions of this tried a two-column grid with the thumbnail
	 * in an 80px column of its own. There is no thumbnail cell: the image
	 * lives inside the product cell, so the name was pushed out of the
	 * grid and landed on top of the quantity stepper.
	 */
	.fire-cart-table,
	.fire-cart-table tbody,
	.fire-cart-table tr,
	.fire-cart-table td {
		display: block;
	}

	.fire-cart-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.fire-cart-table tr {
		position: relative;
		padding: var(--fire-space-lg) 0;
		border: none;
		border-bottom: 1px solid var(--fire-border);
		border-radius: 0;
		margin-bottom: 0;
		background-color: transparent;
	}

	.fire-cart-table td {
		padding: 0;
		border-bottom: none;
	}

	/* Clear of the remove button in the corner. */
	.fire-cart-table__col-product {
		padding-right: 44px;
	}

	.fire-cart-item {
		gap: var(--fire-space-md);
	}

	.fire-cart-item__image,
	.fire-cart-item__thumbnail {
		width: 80px;
		height: 80px;
	}

	.fire-cart-table td[data-label] {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--fire-space-md);
		margin-top: var(--fire-space-md);
	}

	.fire-cart-table td[data-label]::before {
		content: attr(data-label);
		font-family: var(--fire-font-body);
		font-size: 11px;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--fire-text-muted);
	}

	/* Level with the top of the thumbnail, which is the row's padding edge. */
	.fire-cart-table__col-remove {
		position: absolute;
		top: var(--fire-space-lg);
		right: 0;
	}

	.fire-cart-totals {
		max-width: none;
		margin-left: 0;
	}

	.fire-cart-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.fire-coupon-field {
		flex-direction: column;
	}

	.fire-coupon-field input {
		min-width: 0;
	}

	.fire-quantity__btn {
		width: 36px;
		height: 36px;
	}

	.fire-quantity__input {
		width: 44px;
		height: 36px;
	}
}