/**
 * 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
 */



.woocommerce-cart .wp-block-post-title,
.woocommerce-cart main .wp-block-post-title {
	max-width: var(--wp--style--global--wide-size, 1400px);
}

.woocommerce-cart .wp-block-post-title.alignwide,
.woocommerce-cart main .wp-block-post-title.alignwide {
	max-width: var(--wp--style--global--wide-size, 1400px);
}

.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.
		 */
		--bookix-cart-col-remove: 42px;
		--bookix-cart-col-image: 70px;
		--bookix-cart-col-price: 110px;
		--bookix-cart-col-quantity: 110px;
		--bookix-cart-col-subtotal: 100px;
		--bookix-cart-columns:
			var(--bookix-cart-col-remove) var(--bookix-cart-col-image) minmax(0, 1fr) var(--bookix-cart-col-price) var(--bookix-cart-col-quantity) var(--bookix-cart-col-subtotal);
		--bookix-cart-gap: 15px;
		--bookix-cart-padding-inline: 8px 30px;

		/*
		 * Separating borders allows the header row's pill radius to be drawn.
		 * `border-spacing: 0` keeps the cells flush.
		 */
		border-collapse: separate;
		border-spacing: 0;

		/*
		 * Row separator and bottom border color using theme border token.
		 */
		border-bottom-color: var(--wp--preset--color--border);

		/*
		 * Header th cells are reset so grid tracks size them correctly.
		 */
		.wc-block-cart-items__header th {
			width: auto;
			padding: 0;
			border: 0;
			font-family: var(--wp--preset--font-family--plus-jakartasans);
			font-size: 15px;
			font-weight: 500;
			line-height: 26px;
			color: var(--wp--preset--color--primary);
			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--border);
		}

		.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(--bookix-cart-col-image);
			height: 90px;
			max-width: 100%;
			object-fit: cover;
			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--plus-jakartasans);
			font-size: 15px;
			font-weight: 500;
			line-height: 22px;
			color: var(--wp--preset--color--primary);
		}

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

		/*
		 * Hide the short description in cart row; keep variation metadata.
		 */
		.wc-block-components-product-metadata__description {
			display: none;
		}

		/*
		 * Skeleton placeholder corresponding to hidden description.
		 */
		.wc-block-cart-item__wrap>.wc-block-components-skeleton__element+.wc-block-components-skeleton__element {
			display: none;
		}

		/*
		 * Vertical stack for regular and sale price to keep price track compact.
		 */
		.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: 500;
			color: var(--wp--preset--color--primary);

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

		.wc-block-cart-item__total {
			display: flex;
			justify-content: flex-start;
			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: 600;
			color: var(--wp--preset--color--primary);
		}

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

			.wc-block-components-product-badge {
				float: right;
				padding: 2px 8px;
				border: 1px solid var(--wp--preset--color--secondary);
				border-radius: 20px;
				background-color: transparent;
				font-size: 11px;
				color: var(--wp--preset--color--secondary);
				text-transform: uppercase;
			}
		}

		/*
		 * 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--border);
			border-radius: 60px;
			background-color: var(--wp--preset--color--bg-1);

			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: 500;
				line-height: 24px;
				color: var(--wp--preset--color--primary);
			}

			.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--base);
				font-size: 0;
				color: var(--wp--preset--color--primary);
				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--border);
			}
		}

		/*
		 * 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='%23203737'/%3E%3Cpath d='M5.60375 0L6 0.389253L0.452534 5.8388L0.0562868 5.44955L5.60375 0Z' fill='%23203737'/%3E%3C/svg%3E");
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
			}

			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--border);
		border-radius: 16px;
		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--plus-jakartasans);
			font-size: 18px;
			font-weight: 600;
			line-height: 24px;
			color: var(--wp--preset--color--primary);
			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--border);

			&.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--border);
			line-height: 1.4;

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

		/*
		 * Prevent empty order meta wrapper after footer total from drawing extra border.
		 */
		.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--primary);

			strong {
				font-weight: 500;
				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: 500;
				line-height: 24px;
				color: var(--wp--preset--color--primary);
			}

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

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

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

		.wc-block-cart__submit-container {

			.wc-block-cart__submit-button {
				padding: 14px;
				border: 2px solid var(--wp--preset--color--secondary);
				border-radius: 120px;
				background-color: var(--wp--preset--color--secondary);
				font-size: 14px;
				font-weight: 600;
				color: var(--wp--preset--color--base);
				transition: all 0.2s ease-in-out;

				&:hover,
				&:focus,
				&:active {
					border-color: var(--wp--preset--color--secondary);
					background-color: transparent;
					color: var(--wp--preset--color--secondary);
				}
			}
		}

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

			.wc-blocks-components-select__select {
				padding-inline-start: 20px;
				border: none;
				border-radius: 8px;
				font-size: 15px;
			}

			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--primary) !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--primary);
			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--primary);
		}
	}
}

.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--plus-jakartasans);
		font-size: clamp(1.35rem, 2vw + 1rem, 1.75rem);

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

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

/* --------------------------------------------------------------------------
 * 4. Responsive
 *
 * Two queries: container query for the 6-column items table, then the 80rem
 * breakpoint for two-column desktop layout.
 * ----------------------------------------------------------------------- */

@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(--bookix-cart-columns);
			align-items: center;
			column-gap: var(--bookix-cart-gap);
			padding-inline: var(--bookix-cart-padding-inline);
		}

		.wc-block-cart-items__header {
			min-height: 70px;
			border-radius: 8px;
			background: var(--wp--preset--color--bg-1);
		}

		.wc-block-cart-items__header th.wc-block-cart-items__header-image {
			grid-column: 1 / 4;
			padding-inline-start: calc(var(--bookix-cart-col-remove) + var(--bookix-cart-gap));
		}

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

			&::before {
				content: var(--bookix-cart-label-price, "");
			}

			&::after {
				content: var(--bookix-cart-label-quantity, "");
			}
		}

		.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 become
		 * direct columns of the row.
		 */
		.wc-block-cart-item__product,
		.wc-block-cart-item__wrap,
		.wc-block-cart-item__quantity {
			display: contents;
		}

		.wc-block-cart-item__wrap>* {
			grid-column: 3;
		}

		.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;
		}

		.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. Split into two-column layout.
 */
@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;
		}
	}

	.wp-block-woocommerce-empty-cart-block>.wp-block-product-new {
		margin: auto;
	}
}