/* Seven Native WooCommerce — mini-cart body: the line list, thumbnails, fields,
   footer, clear-cart confirm and empty state inside the Theme's drawer shell,
   plus the drawer's conversion blocks (cross-sells strip, coupon entry), each
   admin-toggleable and re-rendered with the widget_shopping_cart_content
   fragment on every cart mutation. Deferred: the drawer is closed at first
   paint. */
@layer components {
	/* item list */

	.st-mini-cart__list {
		flex: 1;
		min-block-size: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		margin: 0;
		padding-inline: var(--st-sheet-inset);
		list-style: none;
	}

	.st-mini-cart__item {
		position: relative;
		display: grid;
		grid-template-columns: var(--st-mini-cart-media-size, 5.5rem) 1fr;
		gap: var(--st-space-md);
		align-items: center;
		padding-block: var(--st-space-md);
		border-block-end: 1px solid var(--st-border-subtle);
	}

	.st-mini-cart__item:last-child {
		border-block-end: 0;
	}

	/* thumbnail */

	.st-mini-cart__media {
		display: block;
		inline-size: var(--st-mini-cart-media-size, 5.5rem);
		block-size: var(--st-mini-cart-media-size, 5.5rem);
		border-radius: var(--st-mini-cart-media-radius, var(--st-radius-full));
		border: 1px solid var(--st-border-subtle);
		background: var(--st-bg-subtle);
		overflow: hidden;
	}

	.st-mini-cart__media img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	/* info column */

	.st-mini-cart__info {
		display: flex;
		flex-direction: column;
		gap: var(--st-space-xs);
		min-inline-size: 0;
	}

	.st-mini-cart__name {
		padding-inline-end: var(--st-space-8);
		font-size: var(--st-font-size-md);
		font-weight: var(--st-font-weight-semibold);
		line-height: var(--st-line-height-snug);
		color: var(--st-fg);
		text-decoration: none;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	a.st-mini-cart__name:hover {
		color: var(--st-accent-fg);
	}

	.st-mini-cart__qty-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--st-space-sm);
	}

	.st-mini-cart__price,
	.st-mini-cart__price .amount {
		font-weight: var(--st-font-weight-bold);
		color: var(--st-fg);
	}

	.st-mini-cart__qty {
		font-size: var(--st-font-size-sm);
		color: var(--st-fg-muted);
	}

	/* remove */

	/* A .st-button--ghost --sm --icon-only pinned to the row's top end corner.
	   Removing a line is destructive and cannot be undone from here, so the
	   hover takes the error pair and the press its own layer over that tint,
	   in the error colour the hover already put on the icon. */
	.st-mini-cart__remove {
		--st-button-ghost-fg:        var(--st-fg-subtle);
		--st-button-ghost-fg-hover:  var(--st-error-fg);
		--st-button-ghost-bg-hover:  var(--st-error-bg);
		--st-button-ghost-bg-active: color-mix(in srgb, currentcolor var(--st-state-pressed-opacity), var(--st-error-bg));

		position: absolute;
		inset-block-start: var(--st-space-md);
		inset-inline-end: 0;
	}

	/* footer */

	.st-mini-cart__footer {
		flex-shrink: 0;
		padding: var(--st-space-md) var(--st-sheet-inset) var(--st-sheet-inset);
		border-block-start: 1px solid var(--st-border-subtle);
		background: var(--st-drawer-bg, transparent);
	}

	.st-mini-cart__total {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--st-space-sm);
		margin: 0 0 var(--st-space-md);
	}

	.st-mini-cart__total strong {
		font-weight: var(--st-font-weight-medium);
		color: var(--st-fg-muted);
	}

	.st-mini-cart__total .amount {
		font-size: var(--st-font-size-lg);
		font-weight: var(--st-font-weight-bold);
		color: var(--st-fg);
	}

	.st-mini-cart__buttons {
		display: flex;
		flex-direction: column;
		gap: var(--st-space-xs);
		margin: 0;
	}

	/* WC's `.button` links are the button contract (checkout = primary, view
	   cart = outlined); the drawer's footer takes them a size up. */
	.st-mini-cart__buttons .button {
		--st-button-height: var(--st-control-height-lg);
	}

	.st-mini-cart__buttons .checkout {
		order: -1;
	}

	/* The icon must not live in `::before`: the ripple layer owns the host's
	   `::before` (ripple.css), so a real press would replace the padlock with
	   the ripple for as long as the navigation takes. `::after` + order keeps
	   it ahead of the label in the button's flex row. */
	@supports (mask-image: none) {
		.st-mini-cart__buttons .checkout::after {
			content: "";
			order: -1;
			flex-shrink: 0;
			inline-size: 1.1em;
			block-size: 1.1em;
			background: currentcolor;
			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
		}
	}

	/* empty state */

	.st-mini-cart__empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--st-space-sm);
		margin: 0;
		padding: var(--st-space-xl) var(--st-sheet-inset);
		text-align: center;
		color: var(--st-fg-muted);
	}

	.st-mini-cart__empty-icon {
		color: var(--st-fg-subtle);
	}

	.st-mini-cart__empty-text {
		margin: 0;
	}

	/* pending state */

	.st-mini-cart__item.is-updating,
	.st-cart__row.is-updating {
		opacity: var(--st-disabled-opacity);
		pointer-events: none;
		transition: opacity var(--st-duration-fast) var(--st-ease-standard);
	}

	/* product fields */

	.st-mini-cart__fields {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--st-space-1) var(--st-space-xs);
		margin-block-start: var(--st-space-1);
		font-size: var(--st-font-size-sm);
		color: var(--st-fg-muted);
		line-height: var(--st-line-height-snug);
	}

	.st-mini-cart__field:not(:first-child)::before {
		content: "·";
		margin-inline-end: var(--st-space-xs);
		color: var(--st-fg-subtle);
	}

	.st-mini-cart__field--stock.is-in-stock {
		color: var(--st-success-fg);
	}

	.st-mini-cart__field--stock.is-out-of-stock {
		color: var(--st-error-fg);
	}

	.st-mini-cart__field--saving {
		color: var(--st-success-fg);
		font-weight: var(--st-font-weight-medium);
	}

	/* clear cart */

	.st-mini-cart__clear {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--st-space-xs);
		margin-block-start: var(--st-space-sm);
		font-size: var(--st-font-size-sm);
	}

	.st-mini-cart__clear-trigger,
	.st-mini-cart__clear-yes,
	.st-mini-cart__clear-no {
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--st-accent-fg);
		font: inherit;
		cursor: pointer;
		transition: var(--st-transition-color);
	}

	.st-mini-cart__clear-trigger:hover,
	.st-mini-cart__clear-no:hover {
		color: var(--st-fg);
	}

	.st-mini-cart__clear-yes {
		color: var(--st-error-fg);
		font-weight: var(--st-font-weight-semibold);
	}

	.st-mini-cart__clear-trigger:focus-visible,
	.st-mini-cart__clear-yes:focus-visible,
	.st-mini-cart__clear-no:focus-visible {
		border-radius: var(--st-radius-xs);
	}

	.st-mini-cart__clear-confirm {
		display: inline-flex;
		align-items: center;
		gap: var(--st-space-xs);
	}

	.st-mini-cart__clear-confirm[hidden] {
		display: none;
	}

	.st-mini-cart__clear-q {
		color: var(--st-fg);
	}

	/* ── Mini-cart hub ──────────────────────────────────────────────────────── */

	/* ── Cross-sells ("You may also like") ──────────────────────────────────── */

	.st-cart-hub__cross-sells {
		flex-shrink: 0;
		padding: var(--st-space-md) var(--st-sheet-inset);
		border-block-start: 1px solid var(--st-border-subtle);
	}

	.st-cart-hub__heading {
		margin: 0 0 var(--st-space-sm);
		font-size: var(--st-font-size-sm);
		font-weight: var(--st-font-weight-semibold);
		color: var(--st-fg-muted);
	}

	/* Horizontal strip: height-stable regardless of card count, swipe/scroll for more. */
	.st-cart-hub__cs-list {
		display: flex;
		gap: var(--st-space-sm);
		margin: 0;
		padding: 0;
		list-style: none;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x proximity;
	}

	.st-cart-hub__cs-item {
		flex: 0 0 auto;
		inline-size: 8.5rem;
		display: flex;
		flex-direction: column;
		gap: var(--st-space-xs);
		scroll-snap-align: start;
	}

	.st-cart-hub__cs-media {
		display: block;
		aspect-ratio: 1;
		border: 1px solid var(--st-border-subtle);
		border-radius: var(--st-radius-md);
		background: var(--st-bg-subtle);
		overflow: hidden;
	}

	.st-cart-hub__cs-media img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	.st-cart-hub__cs-info {
		display: flex;
		flex-direction: column;
		gap: var(--st-space-1);
		min-block-size: 0;
	}

	.st-cart-hub__cs-name {
		font-size: var(--st-font-size-sm);
		font-weight: var(--st-font-weight-medium);
		line-height: var(--st-line-height-snug);
		color: var(--st-fg);
		text-decoration: none;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	a.st-cart-hub__cs-name:hover {
		color: var(--st-accent-fg);
	}

	a.st-cart-hub__cs-name:focus-visible {
		border-radius: var(--st-radius-xs);
	}

	.st-cart-hub__cs-price,
	.st-cart-hub__cs-price .amount {
		font-size: var(--st-font-size-sm);
		font-weight: var(--st-font-weight-bold);
		color: var(--st-fg);
	}

	/* A .st-button--secondary --sm; the line keeps only its spacing. The busy
	   state add-to-cart.js sets (`is-loading`) is the button's own spinner. */
	.st-cart-hub__cs-add {
		margin-block-start: var(--st-space-1);
	}

	/* ── Coupon ─────────────────────────────────────────────────────────────── */

	.st-cart-hub__coupon {
		margin-block-end: var(--st-space-md);
	}

	.st-cart-hub__coupon-applied {
		display: flex;
		flex-wrap: wrap;
		gap: var(--st-space-xs);
		margin: 0 0 var(--st-space-sm);
		padding: 0;
		list-style: none;
	}

	/* An applied coupon is a .st-chip--success with a .st-chip__remove. */
	.st-cart-hub__coupon-code {
		text-transform: var(--st-label-case);
	}

	/* A .st-button--link --sm in the muted colour. */
	.st-cart-hub__coupon-toggle.st-button {
		--st-button-fg:       var(--st-fg-muted);
		--st-button-fg-hover: var(--st-fg);
	}

	.st-cart-hub__coupon-form {
		display: flex;
		gap: var(--st-space-xs);
		margin-block-start: var(--st-space-sm);
	}

	.st-cart-hub__coupon-form[hidden] {
		display: none;
	}

	/* A .st-input--sm (40px) and a .st-button--secondary (40px) share the row:
	   the field scale's sm is the button scale's md, which is the pairing. */
	.st-cart-hub__coupon-field {
		flex: 1;
		min-inline-size: 0;
	}

	.st-cart-hub__coupon-apply {
		flex-shrink: 0;
	}
}