/**
 * woocommerce/cart block styles.
 *
 * Enqueued as-is for the cart block from functions.php; there is no build step
 * for this file, so edit it directly.
 *
 * WooCommerce ships its own stylesheet for this block
 * (assets/client/blocks/cart.css) and load order between two block stylesheets
 * is not guaranteed, so every override below has to win on specificity alone.
 * One root does that for the items table:
 *
 *   .wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main
 *   table.wc-block-cart-items
 *
 * Core ships every one of its cart-items rules twice -- once as
 * `table.wc-block-cart-items .wc-block-cart-items__row .X` for the front end
 * and once with `.editor-styles-wrapper` in front for the block editor. That
 * editor copy is a class heavier, so a root that clears the frontend rule still
 * loses inside the editor. The four-class root above clears both, which is why
 * the file no longer repeats each selector with `.editor-styles-wrapper`.
 *
 * Mobile-first, with breakpoints stacked at the bottom.
 *
 * Sections:
 *   0. Page frame -- the stacked layout, which is the base
 *   1. Cart items (main column)
 *   2. Order summary (sidebar)
 *   3. Empty cart
 *   4. Responsive -- the container query and the one @media block
 */


.wp-block-woocommerce-cart .wc-block-cart {

	/* --------------------------------------------------------------------------
	 * 0. Page frame
	 *
	 * The table and the order summary stack, and go on stacking until the xl
	 * block at the bottom of this file puts them side by side. They stack this
	 * far up because the items table needs about 700px of its own to hold its
	 * six columns and only gets ~60% of the cart beside the summary; stacked, it
	 * has the six columns from a window of roughly 780px instead of only on the
	 * widest desktops.
	 *
	 * Core's sidebar layout is a wrapping flex row that hands the main column
	 * 65% and the sidebar 35%. Full width on both is what puts them on separate
	 * lines, and the row gap is what separates them once they are. The main
	 * column's own gutter goes with it, or the table would sit a gutter's width
	 * narrower than the summary below it.
	 * ----------------------------------------------------------------------- */

	row-gap: 30px;

	.wc-block-components-main,
	.wc-block-cart__sidebar {
		width: 100%;
	}

	/*
	 * The main column carries the container the line items measure themselves
	 * against, so its one rule lives here with the rest of the frame rather
	 * than in section 1.
	 *
	 * Core puts the only container on `.wp-block-woocommerce-cart`, which spans
	 * the sidebar too: once the two sit side by side the main column gets ~60%
	 * of the cart, and a cart of 1400px reads as a table of 846px. Without a
	 * container here the six columns would switch on for a table that cannot
	 * hold them.
	 *
	 * This re-bases the cart-items queries -- core's as well as this file's --
	 * onto the width they are actually about. The rules that size this column,
	 * above and in the xl block, are unaffected: an element is never its own
	 * query container, so those still resolve against the cart.
	 */
	.wc-block-components-main {
		container-type: inline-size;
		padding-inline-end: 0;
	}

	/* --------------------------------------------------------------------------
	 * 1. Cart items (main column)
	 *
	 * The line items lay out in six columns -- remove, image, name, price,
	 * quantity, subtotal -- but core's markup only carries three cells per row
	 * (image, product, total), with the price and the quantity stacked inside the
	 * middle one. The six columns are built by turning each `tr` into a grid and
	 * flattening the product cell and its two wrapper divs with
	 * `display: contents`. Core does the same thing to the same `tr` for its own
	 * narrow layout, so the grid is its pattern, not a new one.
	 *
	 * Everything that reshapes the row therefore lives in section 4 behind the
	 * same `@container (min-width: 700px)` that core uses to switch the desktop
	 * table on. Below it core hides the header row and lays the row out its own
	 * way; leaving the grid out of that range keeps the narrow layout core's.
	 *
	 * The `<table>`, `<thead>`, `<tbody>` and the image and total cells keep
	 * their table display, and the product cell that is flattened carries an
	 * explicit `role="rowheader"` from core, so the table's semantics survive the
	 * reshape.
	 * ----------------------------------------------------------------------- */

	.wc-block-components-main table.wc-block-cart-items {

		/*
		 * The track list shared by the header row and every item row so labels
		 * sit exactly over the values they head. The name column takes the slack,
		 * because the main column is fluid.
		 */
		--emart-cart-col-remove: 42px;
		--emart-cart-col-image: 70px;
		--emart-cart-col-price: 110px;
		--emart-cart-col-quantity: 110px;
		--emart-cart-col-subtotal: 100px;
		--emart-cart-columns:
			var(--emart-cart-col-remove) var(--emart-cart-col-image) minmax(0, 1fr) var(--emart-cart-col-price) var(--emart-cart-col-quantity) var(--emart-cart-col-subtotal);
		--emart-cart-gap: 15px;
		--emart-cart-padding-inline: 8px 30px;

		/*
		 * Tables collapse their borders by default, and a collapsed table draws
		 * no corner curve at all -- which the header row's pill needs.
		 * Separating the borders is what makes the radius visible;
		 * `border-spacing: 0` then keeps the cells flush.
		 */
		border-collapse: separate;
		border-spacing: 0;

		/*
		 * Core closes the wide table with a rule under the last row. Only its
		 * colour is taken over here, so it matches the separators between the rows.
		 */
		border-bottom-color: var(--wp--preset--color--gray-300);

		/*
		 * Header th cells are reset so grid tracks size them correctly.
		 */
		thead th,
		.wc-block-cart-items__header th {
			width: auto;
			padding: 0;
			border: 0;
			font-family: var(--wp--preset--font-family--dm-sans);
			font-size: 15px;
			font-weight: 500;
			line-height: 26px;
			color: var(--wp--preset--color--contrast);
			text-align: start;
			text-transform: uppercase;
			white-space: nowrap;
		}

		tbody tr td {
			padding: 0;
			border: 0;
		}

		.wc-block-cart-items__row {
			padding-block: 30px;
			column-gap: 0;
			border-bottom: 1px solid var(--wp--preset--color--gray-300);
		}

		.wc-block-cart-items__row:last-child {
			border-bottom: 0;
		}

		.wc-block-cart-item__image a {
			display: flex;
		}

		.wc-block-cart-item__image img {
			width: var(--emart-cart-col-image);
			height: var(--emart-cart-col-image);
			max-width: 100%;
			object-fit: cover;
			aspect-ratio: 1;
			border-radius: 8px;
		}

		.wc-block-cart-item__wrap {
			gap: 6px;
		}

		.wc-block-components-product-name {
			display: block;
			margin-bottom: 0;
			font-family: var(--wp--preset--font-family--dm-sans);
			font-size: 15px;
			font-weight: 500;
			line-height: 20px;
			color: var(--wp--preset--color--contrast);
		}

		.wc-block-components-product-metadata {
			margin-bottom: 0;
		}

		/*
		 * The name is shown alone under the thumbnail. Only the short
		 * description is dropped -- variation attributes stay, because a
		 * variable product's cart row is unreadable without them.
		 */
		.wc-block-components-product-metadata__description {
			display: none;
		}

		/*
		 * The loading skeleton draws two lines in the product cell: a long one
		 * standing in for the name and a short one under it for the description.
		 * The description is hidden above, so its placeholder goes with it.
		 */
		.wc-block-cart-item__wrap>.wc-block-components-skeleton__element+.wc-block-components-skeleton__element {
			display: none;
		}

		/*
		 * Column, not core's row: on a sale line the struck-through regular price
		 * sits above the discounted one rather than beside it, which is what lets
		 * the price column stay as narrow as its header.
		 */
		.wc-block-cart-item__prices .price.wc-block-components-product-price {
			margin-bottom: 0 !important;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			gap: 7px;
			font-size: 15px;
			font-weight: 400;
			color: var(--wp--preset--color--contrast);

			del {
				font-size: 12px;
				line-height: 18px;
				color: var(--wp--preset--color--gray-200);
			}
		}

		.wc-block-cart-item__total {
			display: flex;
			justify-content: flex-end;
			font-size: 15px;
			line-height: 1.8;
		}

		.wc-block-cart-item__total .price.wc-block-components-product-price {
			margin-bottom: 0 !important;
			font-size: 15px;
			font-weight: 500;
			color: var(--wp--preset--color--contrast);
		}

		.wc-block-cart-item__total-price-and-sale-badge-wrapper {
			position: relative;

			.wc-block-components-product-badge {
				float: right;
				padding: 2px 4px;
				background-color: var(--wp--preset--color--gray-300);
				color: var(--wp--preset--color--contrast);
				border-radius: 4px;
			}
		}

		/*
		 * Stepper quantity selector styled as a clean pill with round buttons.
		 */
		.wc-block-components-quantity-selector {
			display: flex;
			align-items: center;
			width: 100%;
			padding: 4px;
			border: 1px solid var(--wp--preset--color--gray-300);
			border-radius: 60px;

			input.wc-block-components-quantity-selector__input {
				min-width: 37px;
				padding: 0;
				border-width: 0;
				border-radius: 0;
				background-color: transparent !important;
				font-size: 14px;
				font-weight: 400;
				line-height: 24px;
				color: var(--wp--preset--color--contrast);
			}

			.wc-block-components-quantity-selector__button {
				flex-shrink: 0;
				width: 28px;
				height: 28px;
				min-width: 0;
				padding: 0;
				border-width: 0;
				border-radius: 50%;
				background: var(--wp--preset--color--light);
				color: var(--wp--preset--color--contrast);
				font-size: 0;
				opacity: 1;
				cursor: pointer;
				transition: background-color 0.2s ease;

				&::before {
					content: "";
					display: block;
					margin: auto;
					background-color: currentcolor;
					mask-position: center;
					mask-repeat: no-repeat;
					mask-size: contain;
				}
			}

			.wc-block-components-quantity-selector__button--plus::before {
				width: 7px;
				height: 7px;
				mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'%3E%3Cpath d='M0 3.795V2.73H2.865V0H3.99V2.73H6.855V3.795H3.99V6.54H2.865V3.795H0Z'/%3E%3C/svg%3E");
			}

			.wc-block-components-quantity-selector__button--minus::before {
				width: 6px;
				height: 2px;
				mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='2' viewBox='0 0 6 2'%3E%3Cpath d='M0 1.065V0H5.94V1.065H0Z'/%3E%3C/svg%3E");
			}

			.wc-block-components-quantity-selector__button:disabled {
				opacity: 0.5;
				cursor: default;
			}

			.wc-block-components-quantity-selector__button:hover:not(:disabled),
			.wc-block-components-quantity-selector__button:focus-visible:not(:disabled) {
				background: var(--wp--preset--color--gray-300);
			}
		}

		/*
		 * Minimal cross icon for item removal.
		 */
		.wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 20px;
			height: 20px;
			min-width: 20px;
			padding: 0;
			background: transparent;

			&::after {
				content: "";
				display: inline-block;
				width: 10px;
				height: 10px;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6' fill='none'%3E%3Cpath d='M0 0.550454L0.396248 0.1612L5.94371 5.61075L5.54747 6L0 0.550454Z' fill='%23000000'/%3E%3Cpath d='M5.60375 0L6 0.389253L0.452534 5.8388L0.0562868 5.44955L5.60375 0Z' fill='%23000000'/%3E%3C/svg%3E");
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
			}

			svg {
				display: none;
			}
		}
	}

	/* --------------------------------------------------------------------------
	 * 2. Order summary (sidebar)
	 *
	 * Rendered at every viewport width as a bordered card with consistent
	 * paddings and Theme tokens.
	 * ----------------------------------------------------------------------- */

	.wc-block-cart__sidebar {
		width: 100%;
		padding: 35px;
		border: 1px solid var(--wp--preset--color--gray-300);
		border-radius: 8px;
		box-shadow: 0 6px 15px 0 rgba(64, 79, 104, 0.05);
		background-color: var(--wp--preset--color--base);
		align-self: flex-start;

		.wc-block-cart__totals-title,
		.wp-block.wp-block-woocommerce-cart-order-summary-heading-block textarea {
			display: block;
			position: relative;
			margin: 0;
			padding-inline-start: 0;
			font-family: var(--wp--preset--font-family--dm-sans);
			font-size: 18px;
			font-weight: 700;
			line-height: 24px;
			color: var(--wp--preset--color--contrast);
			text-align: start;
			text-transform: capitalize;
		}

		.wp-block-woocommerce-cart-order-summary-block {
			margin-bottom: 0;
			font-size: 15px;
			font-weight: 400;
			line-height: 26px;
		}

		.wc-block-components-totals-wrapper {
			padding: 16px 0;
			border-color: var(--wp--preset--color--gray-300);

			&.wp-block-woocommerce-cart-order-summary-coupon-form-block {
				border: none;
			}
		}

		.wp-block-woocommerce-cart-order-summary-totals-block {
			padding: 10px 0;
			border-color: var(--wp--preset--color--gray-300);
			line-height: 1.4;

			.wc-block-components-totals-wrapper {
				padding: 10px 0;
				border: 0;
			}
		}

		/*
		 * Estimated Total is the summary's last row, so nothing should be ruled
		 * off below it.
		 */
		.wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item)~.wc-block-components-totals-wrapper {
			border-top: 0;
		}

		.wc-block-cart__submit {
			margin-top: 16px;
			margin-bottom: 0;
		}

		.wc-block-components-totals-item {
			gap: 0;
			color: var(--wp--preset--color--contrast);

			strong {
				font-weight: 400;
				text-transform: capitalize;
			}
		}

		.wc-block-components-totals-shipping .wc-block-components-totals-shipping__via {
			font-size: 12px;
		}

		.wc-block-components-totals-footer-item {

			.wc-block-components-totals-item__label {
				font-size: 15px;
				font-weight: 400;
				line-height: 24px;
				color: var(--wp--preset--color--contrast);
			}

			.wc-block-components-totals-item__value {
				font-size: 24px;
				font-weight: 600;
				line-height: 1.4;
				color: var(--wp--preset--color--contrast);
			}
		}

		.wc-block-components-totals-discount__coupon-list {

			.wc-block-components-chip {
				border-color: var(--wp--preset--color--gray-300);
			}
		}

		.wc-block-cart__submit-container {

			.wc-block-cart__submit-button {
				padding: 15px;
				border: none;
				border-radius: 6px;
				background-color: var(--wp--preset--color--primary);
				font-size: 14px;
				font-weight: 500;
				color: var(--wp--preset--color--contrast);
				text-transform: uppercase;
				transition: background-color 0.2s ease;

				&:hover,
				&:focus,
				&:active {
					background-color: var(--wp--preset--color--primary-hover);
					color: var(--wp--preset--color--contrast);
				}
			}
		}

		.wc-block-components-totals-coupon {
			padding: 0;
			font-size: 15px;

			.wc-block-components-text-input {
				input[type="text"] {
					padding-inline-start: 20px;
				}

				label {
					inset-inline-start: 20px;
					font-size: 15px;
					font-weight: 400 !important;
				}

				&.is-active {
					input:focus {
						padding-inline-start: 20px;
					}
				}
			}

			.wc-block-components-button {
				background-color: transparent;
				border-radius: 6px;
				border: 1px solid var(--wp--preset--color--gray-100);

				&:not(:disabled) {
					background-color: var(--wp--preset--color--base);
					border: 1px solid var(--wp--preset--color--contrast);
				}

				&:focus,
				&:active,
				&:hover {
					background: var(--wp--preset--color--contrast);
					color: var(--wp--preset--color--base);
				}
			}
		}

		.wc-blocks-components-select .wc-blocks-components-select__container {
			height: 55px;
			border-radius: 8px;
			background-color: var(--wp--preset--color--light);
			border: 1px solid var(--wp--preset--color--gray-300);

			.wc-blocks-components-select__select {
				padding-inline-start: 20px;
				border: none;
				border-radius: 8px;
				font-size: 15px;
				color: var(--wp--preset--color--contrast);
			}

			label {
				padding-inline-start: 15px;
				transform: translateY(50%) scale(1);
			}
		}

		.wc-block-components-radio-control .wc-block-components-radio-control__option-layout {
			display: flex;
			align-items: center;
			gap: 4px;
			font-size: 14px;
		}

		.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__description-group,
		.wc-block-components-radio-control__description,
		.wc-block-components-radio-control__secondary-description {
			font-size: 12.25px;
			font-weight: 500;
			color: var(--wp--preset--color--contrast) !important;
		}

		.wc-block-components-radio-control__option {
			padding-inline-start: 22px;
		}

		.wc-block-components-radio-control .wc-block-components-radio-control__input {
			width: 14px;
			min-width: 14px;
			height: 14px;
			min-height: 14px;
			border-width: 1px;
		}

		.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
			border-color: var(--wp--preset--color--contrast);
			background-color: transparent !important;
		}

		.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
			width: 9px;
			min-width: 9px;
			height: 9px;
			min-height: 9px;
			background-color: var(--wp--preset--color--contrast);
		}
	}
}

.wp-block-woocommerce-cart-cross-sells-block {
	margin-top: 3.75rem;
}

/* --------------------------------------------------------------------------
 * 3. Empty cart
 * ----------------------------------------------------------------------- */

.wp-block-woocommerce-empty-cart-block {

	.wc-block-cart__empty-cart__title {
		font-family: var(--wp--preset--font-family--dm-sans);
		font-size: clamp(1.35rem, 2vw + 1rem, 1.75rem);

		&.with-empty-cart-icon::before {
			font-size: 20px;
			margin-top: 70px;
		}
	}

	.wp-block-separator+h2 {
		margin: clamp(1.35rem, 2vw + 1rem, 4rem) 0 clamp(1.35rem, 2vw + 1rem, 2.25rem);
	}
}

/* --------------------------------------------------------------------------
 * 4. Responsive
 *
 * Two queries, both last in the file so each wins over the base it narrows: the
 * container query that reshapes the line items, then the one viewport
 * breakpoint that splits the page into two columns.
 *
 * The line items use `@container`, not a viewport width, and 700px is not a
 * Tailwind stop: core switches between its narrow and wide cart layouts on
 * `@container (min-width: 700px)` against the cart, and the six-column grid has
 * to turn on exactly where core's own desktop table does.
 * ----------------------------------------------------------------------- */

/*
 * The wide cart -- the six-column table. Core shows the header row and its own
 * three-column table from this width up, so this is where the reshape belongs.
 */
@container (min-width: 700px) {

	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-main table.wc-block-cart-items {

		.wc-block-cart-items__header,
		.wc-block-cart-items__row {
			display: grid;
			grid-template-columns: var(--emart-cart-columns);
			align-items: center;
			column-gap: var(--emart-cart-gap);
			padding-inline: var(--emart-cart-padding-inline);
		}

		/*
		 * A radius on a table clips only the table's own border and background,
		 * never its rows, so the header row carries its pill itself.
		 */
		.wc-block-cart-items__header {
			min-height: 70px;
			border-radius: 8px;
			background: var(--wp--preset--color--light);
		}

		/*
		 * Core gives the header three cells: a visible "Product", a
		 * screen-reader-only "Details" and a visible "Total". Four labels are
		 * wanted over the six columns, so "Product" spans the remove, image and
		 * name tracks and the "Details" cell carries the price and quantity
		 * labels. Nothing WooCommerce renders is replaced -- the two labels are
		 * added where core shows none, and "Total" keeps its own wording.
		 */
		.wc-block-cart-items__header th.wc-block-cart-items__header-image {
			grid-column: 1 / 4;
			padding-inline-start: calc(var(--emart-cart-col-remove) + var(--emart-cart-gap));
		}

		.wc-block-cart-items__header th.wc-block-cart-items__header-product {
			display: grid;
			grid-column: 4 / 6;
			grid-template-columns: var(--emart-cart-col-price) var(--emart-cart-col-quantity);
			column-gap: var(--emart-cart-gap);

			&::before {
				content: var(--emart-cart-label-price, "Price");
				text-transform: uppercase;
			}

			&::after {
				content: var(--emart-cart-label-quantity, "Quantity");
				text-transform: uppercase;
			}
		}

		.wc-block-cart-items__header th.wc-block-cart-items__header-total {
			grid-column: 6;
			text-align: end;
		}

		/*
		 * Flatten the product cell so the name, price and quantity it wraps
		 * become columns of the row instead of a stack inside one cell.
		 */
		.wc-block-cart-item__product,
		.wc-block-cart-item__wrap,
		.wc-block-cart-item__quantity {
			display: contents;
		}

		/*
		 * Column 3 is the fallback: anything core adds to the wrap that is not
		 * placed below -- a backorder badge, the save-for-later link -- stacks
		 * under the name rather than landing in a column it does not belong to.
		 */
		.wc-block-cart-item__wrap>* {
			grid-column: 3;
		}

		/*
		 * The name sits on the first grid row so any variation data can follow
		 * it; every other column spans whatever rows that produces so it stays
		 * vertically centred against the image.
		 */
		.wc-block-cart-item__remove-link,
		.wc-block-cart-item__image,
		.wc-block-cart-item__prices,
		.wc-block-components-quantity-selector,
		.wc-block-cart-item__total {
			grid-row: 1 / -1;
		}

		.wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
			grid-column: 1;
		}

		.wc-block-cart-item__image {
			grid-column: 2;
		}

		.wc-block-components-product-name {
			grid-column: 3;
			grid-row: 1;
		}

		.wc-block-cart-item__prices {
			grid-column: 4;
		}

		.wc-block-components-quantity-selector {
			grid-column: 5;
		}

		.wc-block-cart-item__total {
			grid-column: 6;
			justify-content: flex-end;
		}

		/*
		 * A row is one grid row unless the product carries variation data, which
		 * opens a second underneath the name. Every other column spans both, so
		 * the two rows meet in the middle of the row: pinning the name to the
		 * end of the first and the data to the start of the second sets them
		 * against each other there instead of leaving one adrift at the top and
		 * the other at the bottom.
		 */
		.wc-block-cart-items__row:has(.wc-block-components-product-metadata > *:not(.wc-block-components-product-metadata__description)) {
			grid-template-rows: 1fr 1fr;

			.wc-block-components-product-name {
				align-self: end;
			}

			.wc-block-components-product-metadata {
				align-self: start;
			}
		}
	}
}

/**
 * xl -- 80rem / 1280px. The table and the order summary sit side by side; below
 * it they stack, which is the base state at the top of this file.
 */
@media (min-width: 80rem) {

	.wc-block-components-sidebar-layout,
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout>.block-editor-inner-blocks>.block-editor-block-list__layout {
		display: grid;
		grid-template-columns: calc(65% - (48 / 1060 * 100%)) calc(35% - (24 / 1060 * 100%));
		column-gap: calc(72 / 1060 * 100%);

		.wc-block-components-main {
			width: 100%;
			padding: 0;
		}
	}

	.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-coupon__form {

		.wc-block-components-text-input {

			label {
				inset-inline-start: 20px;
			}

			&.is-active {

				input[type="text"] {
					padding-inline-start: 20px !important;
				}

				label {
					transform: translateY(-1px) scale(0.875);
				}
			}
		}
	}

	/* Folded in here as the nearest stop up. */
	.wp-block-woocommerce-empty-cart-block>.wp-block-product-new {
		margin: auto;
	}
}