/* The cart drawer ("basket"): opened from the bag in the header and after adding to the cart.
   Its layout comes from parts/mini-cart.html (WooCommerce's blocks, with the store's promises and empty state).
   This file loads after the first paint (assets.php), since the drawer only opens when asked. Selectors start
   with both of the drawer's own classes so they outrank WooCommerce's drawer styles, which load after this. */

.wc-block-components-drawer.wc-block-mini-cart__drawer {
	--mwh-basket-pad: 24px;
	font-family: var(--wp--preset--font-family--sans);
	color: var(--mwh-ink);
}

@media (max-width: 30rem) {
	.wc-block-components-drawer.wc-block-mini-cart__drawer {
		--mwh-basket-pad: 16px;
	}
}

/* The whole drawer is one column: title, promises, the items (which scroll), and the footer, which stays put. */
.wc-block-mini-cart__drawer .wp-block-woocommerce-filled-mini-cart-contents-block {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/* Close: a round 44 px button level with the title. */
.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close {
	top: 34px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--mwh-ink);
	background: none;
	border-radius: 50%;
	transition: background-color var(--mwh-fast) var(--mwh-ease);
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close svg {
	flex: none;
	width: 24px;
	height: 24px;
}

@media (hover: hover) {
	.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close:hover {
		background: var(--mwh-linen);
	}
}

/* Title: "Your cart" in the display face, with the number of items in a small tile beside it. */
.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 18px 64px 0 var(--mwh-basket-pad);
	padding: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	line-height: 1.2;
	mask-image: none;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-title-items-counter-block {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--mwh-evergreen);
	background: var(--mwh-linen);
	border-radius: 999px;
}

/* What the shopper can count on, right under the title. */
.mwh-basket-promise {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 14px var(--mwh-basket-pad) 0;
	padding: 10px 14px;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--mwh-ink);
	background: var(--mwh-porcelain);
	border: 1px solid var(--mwh-line);
	border-radius: var(--mwh-radius-sm);
}

.mwh-basket-promise li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.mwh-basket-promise .mwh-icon {
	flex: none;
	color: var(--mwh-evergreen);
}

/* The items: they take the room that is left and scroll inside it, so every item can be reached with the
   totals and buttons still in view. */
.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__items {
	flex: 1 1 auto;
	min-height: 0;
	margin-top: 8px;
	padding: 0 var(--mwh-basket-pad);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table {
	margin: 0;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items tbody {
	display: block;
}

/* One item: its photo in a linen tile; the name, options and quantity beside it; the line's total on the right. */
.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	grid-template-areas: "photo product total";
	column-gap: 14px;
	align-items: start;
	padding: 18px 0;
	border: 0;
	border-bottom: 1px solid var(--mwh-line);
}

.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row[hidden] {
	display: none;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row:last-child {
	border-bottom: 0;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-item__image {
	grid-area: photo;
	width: 84px;
	padding: 0;
	border: 0;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-item__image a {
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--mwh-linen);
	border-radius: var(--mwh-radius-sm);
}

/* Only the photo WooCommerce shows; it keeps a second, hidden copy for products hidden from the shop. */
.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-item__image img:not([hidden]) {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-item__image img[hidden] {
	display: none;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-item__product {
	grid-area: product;
	min-width: 0;
	padding: 0;
	border: 0;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

/* The name: two lines at most, no underline; it turns evergreen under the pointer. */
.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.4;
	color: var(--mwh-ink);
	text-decoration: none;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: color var(--mwh-fast) var(--mwh-ease);
}

.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name[hidden] {
	display: none;
}

@media (hover: hover) {
	.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row a.wc-block-components-product-name:hover {
		color: var(--mwh-evergreen);
		text-decoration: none;
	}
}

/* The price for one sits on the right as the line's total, so it is not repeated under the name; the
   product's description is left for its page. The chosen options stay, small and quiet. */
.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices,
.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata__description {
	display: none;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.45;
	color: var(--mwh-graphite);
}

.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-details {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-details[hidden] {
	display: none;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-details__name {
	font-weight: 600;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-components-product-badge {
	margin: 0;
	padding: 2px 8px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--mwh-paper);
	background: var(--mwh-sale);
	border: 0;
	border-radius: 999px;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-components-product-badge[hidden] {
	display: none;
}

/* Quantity and remove on one line, the quantity in the same pill as on the cart page. */
.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: stretch;
	width: auto;
	min-width: 0;
	height: 36px;
	margin: 0;
	overflow: hidden;
	background: var(--mwh-paper);
	border: 1px solid var(--mwh-control-border);
	border-radius: 999px;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-components-quantity-selector::after {
	display: none;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-components-quantity-selector[hidden] {
	display: none;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	width: 36px;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--mwh-ink);
	text-align: center;
	background: none;
	border: 0;
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus {
	outline: none;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-components-quantity-selector:focus-within {
	outline: 2px solid var(--mwh-evergreen);
	outline-offset: 2px;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	min-width: 36px;
	padding: 0;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--mwh-ink);
	background: none;
	border: 0;
	opacity: 1;
	cursor: pointer;
	transition: background-color var(--mwh-fast) var(--mwh-ease);
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	color: var(--mwh-control-border);
	cursor: default;
}

@media (hover: hover) {
	.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:not(:disabled):hover {
		background: var(--mwh-linen);
	}
}

/* Remove: the bin, quiet until pointed at, with room enough to tap. */
.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	color: var(--mwh-graphite);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--mwh-fast) var(--mwh-ease), color var(--mwh-fast) var(--mwh-ease);
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link svg {
	width: 20px;
	height: 20px;
	fill: currentcolor;
}

@media (hover: hover) {
	.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link:hover {
		color: var(--mwh-error);
		background: var(--mwh-linen);
	}
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link[hidden] {
	display: none;
}

/* The line's total, top right, with any saving under it. */
.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-item__total {
	grid-area: total;
	padding: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
	border: 0;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

/* Footer: the subtotal, a note on shipping, and the two buttons, on white above a hairline. */
.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
	flex: none;
	margin: 0;
	padding: 18px var(--mwh-basket-pad) calc(20px + env(safe-area-inset-bottom, 0px));
	background: var(--mwh-paper);
	border-top: 1px solid var(--mwh-line);
	box-shadow: 0 -10px 24px rgba(23, 26, 23, 0.05);
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__footer::after {
	display: none;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 12px;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
	flex-basis: 100%;
	margin: 2px 0 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	color: var(--mwh-graphite);
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 10px;
	margin-top: 16px;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 0 16px;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--mwh-radius-sm);
	transition: background-color var(--mwh-fast) var(--mwh-ease), border-color var(--mwh-fast) var(--mwh-ease), color var(--mwh-fast) var(--mwh-ease);
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart {
	color: var(--mwh-ink);
	background: var(--mwh-paper);
	border: 1px solid var(--mwh-control-border);
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout {
	color: var(--mwh-paper);
	background: var(--mwh-evergreen);
	border: 1px solid var(--mwh-evergreen);
}

@media (hover: hover) {
	.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart:hover {
		background: var(--mwh-linen);
		border-color: var(--mwh-ink);
	}

	.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout:hover {
		background: #16291f;
		border-color: #16291f;
	}
}

/* Empty: the bag, a word of welcome and the way to the shop, in the middle of the drawer. */
.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: 48px var(--mwh-basket-pad);
	text-align: center;
}

.mwh-basket-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
}

.mwh-basket-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 6px;
	color: var(--mwh-evergreen);
	background: var(--mwh-linen);
	border-radius: 50%;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .mwh-basket-empty__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .mwh-basket-empty__text {
	max-width: 30ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--mwh-graphite);
}

.wc-block-components-drawer.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 28px;
	font-weight: 600;
	color: var(--mwh-paper);
	text-decoration: none;
	background: var(--mwh-evergreen);
	border-radius: var(--mwh-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-components-drawer.wc-block-mini-cart__drawer * {
		transition: none !important;
	}
}

/* On a phone the promises stay on one line, so the items keep the room. */
@media (max-width: 30rem) {
	.mwh-basket-promise {
		gap: 4px 14px;
		padding: 8px 12px;
		font-size: var(--wp--preset--font-size--xs);
	}

	.mwh-basket-promise .mwh-icon {
		width: 16px;
		height: 16px;
	}
}