:root {
	--wns-mini-cart--item-gap: 5px;
	--wns-mini-cart--item-quantity-margin-top: 10px;
	--wns-mini-cart--item-image-border-radius: 12px;
	--wns-mini-cart--drawer-width: min(100vw, 460px);
	--wns-mini-cart--drawer-padding: clamp(20px, 5vw, 36px);
	--wns-mini-cart--section-border: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary) 25%, transparent);

	--wns-mini-cart--quantity-selector-font-size-ratio: 1;
	--wns-mini-cart--quantity-selector-line-height-ratio: 1;
	--wns-mini-cart--quantity-selector-min-height-ratio: .5;
	--wns-mini-cart--quantity-selector-padding: 5px 7px;

	--wns-mini-cart--quantity-selector-input-color: white;

	--wns-mini-cart--quantity-selector-button-font-size: 1.5em;
	--wns-mini-cart--quantity-selector-button-line-height: 1.5em;

	--wns-mini-cart--remove-link-opacity: 0.6;
	--wns-mini-cart--remove-link-hover-opacity: 1;
	--wns-mini-cart--remove-link-size: 30px;

	--wns-mini-cart--footer-totals-gap: 5px;
}

/* The quantity bubble sits in the header and otherwise inherits whatever
 * font the surrounding navigation happens to use. It is UI data, so keep it
 * on the same Lato face as the original header badge. */
.main-page-header .wc-block-mini-cart__badge {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 1.4285714286em;
	min-width: 1.4285714286em;
	height: 1.4285714286em;
	padding: 0 !important;
	box-sizing: border-box;
	font-family: "Lato", Arial, sans-serif !important;
	font-style: normal !important;
	font-weight: 600 !important;
	line-height: 1 !important;
}

.wc-block-components-drawer__screen-overlay {
	background-color: color-mix(in srgb, var(--wp--preset--color--black) 72%, transparent) !important;
	backdrop-filter: blur(3px);
}

.wc-block-components-drawer.wc-block-mini-cart__drawer {
	width: var(--wns-mini-cart--drawer-width) !important;
	max-width: 100%;
	background:
		radial-gradient(circle at 100% 0, color-mix(in srgb, var(--wp--preset--color--secondary) 12%, transparent), transparent 34%),
		var(--wp--preset--color--black) !important;
	color: var(--wp--preset--color--foreground) !important;
	box-shadow: -18px 0 50px rgb(0 0 0 / 45%);
}

.wc-block-components-drawer .wc-block-components-drawer__content {
	background: transparent;
}

.wc-block-components-drawer .wc-block-mini-cart__template-part,
.wc-block-components-drawer .wp-block-woocommerce-mini-cart-contents {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wc-block-components-drawer .wc-block-mini-cart__title {
	margin: 0;
	padding: var(--wns-mini-cart--drawer-padding);
	padding-bottom: 20px;
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--poltawski-nowy) !important;
	font-size: clamp(24px, 5vw, 34px);
	line-height: 1.15;
	border-bottom: var(--wns-mini-cart--section-border);
}

.wc-block-components-drawer .wc-block-components-drawer__close-wrapper {
	top: clamp(15px, 4vw, 27px);
	right: clamp(15px, 4vw, 27px);
}

.wc-block-components-drawer .wc-block-components-drawer__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--wp--preset--color--foreground);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary) 55%, transparent);
	border-radius: 50%;
	background: var(--wp--preset--color--black);
	transition:
		color 160ms ease,
		border-color 160ms ease,
		background-color 160ms ease;
}

.wc-block-components-drawer .wc-block-components-drawer__close:hover,
.wc-block-components-drawer .wc-block-components-drawer__close:focus-visible {
	color: var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--secondary);
}

.wc-block-components-drawer .wc-block-mini-cart__items {
	padding-inline: var(--wns-mini-cart--drawer-padding);
}

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

.wc-block-components-drawer .wc-block-cart-item__product {
	padding: 0 0 22px !important;
	border-bottom: var(--wns-mini-cart--section-border);
}

.wc-block-components-drawer .wc-block-cart-item__wrap {
	gap: var(--wns-mini-cart--item-gap) !important;
	align-self: start !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.wc-block-components-drawer .wc-block-components-product-name {
	display: block;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	color: var(--wp--preset--color--secondary) !important;
	font-family: var(--wp--preset--font-family--poltawski-nowy);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
}

.wc-block-components-drawer .wc-block-components-product-name:hover,
.wc-block-components-drawer .wc-block-components-product-name:focus-visible {
	color: var(--wp--preset--color--primary) !important;
}

.wc-block-components-drawer .wc-block-cart-item__prices,
.wc-block-components-drawer .wc-block-components-product-price,
.wc-block-components-drawer .wc-block-cart-item__total {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--poltawski-nowy);
}

.wc-block-components-drawer .wc-block-cart-item__wrap .wc-block-components-product-metadata > div:has(.wc-block-components-product-metadata__description) {
	display: none !important;
}

.wc-block-components-drawer .wc-block-cart-item__wrap .wc-block-cart-item__quantity {
	margin-top: var(--wns-mini-cart--item-quantity-margin-top) !important;
}

.wc-block-components-drawer .wc-block-cart-item__image img {
	border-radius: var(--wns-mini-cart--item-image-border-radius) !important;
}

.wc-block-components-drawer .wc-block-components-quantity-selector {
	font-size: calc(var(--wns-common--input-font-size) * var(--wns-mini-cart--quantity-selector-font-size-ratio)) !important;
	font-family: var(--wp--preset--font-family--playfair-display) !important;
	line-height: calc(var(--wns-common--input-line-height) * var(--wns-mini-cart--quantity-selector-line-height-ratio)) !important;
	width: 100% !important;
	max-width: var(--wns-common--input-max-width) !important;
	min-height: calc(var(--wns-common--input-min-height) * var(--wns-mini-cart--quantity-selector-min-height-ratio)) !important;
	padding: var(--wns-mini-cart--quantity-selector-padding) !important;
	border-radius: var(--wns-common--input-border-radius) !important;
	border: var(--wns-common--input-border) !important;
	background-color: var(--wns-common--input-bg-color) !important;
	color: var(--wp--preset--color--secondary) !important;
	box-shadow: var(--wns-common--input-shadow) !important;
	transition: var(--wns-common--input-transition) !important;
}

.wc-block-components-drawer .wc-block-components-quantity-selector__input {
	font-size: 1rem !important;
	font-family: var(--wp--preset--font-family--playfair-display) !important;
	font-style: normal !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	padding: 0 !important;
	border: unset !important;
	color: var(--wns-mini-cart--quantity-selector-input-color) !important;
}

.wc-block-components-drawer .wc-block-components-quantity-selector__input:focus {
	box-shadow: unset !important;
}

.wc-block-components-drawer .wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--secondary) !important;
	font-size: var(--wns-mini-cart--quantity-selector-button-font-size) !important;
	line-height: var(--wns-mini-cart--quantity-selector-button-line-height) !important;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wc-block-components-drawer .wc-block-components-quantity-selector__button:focus {
	box-shadow: unset !important;
}

.wc-block-components-drawer .wc-block-cart-item__remove-link {
	opacity: var(--wns-mini-cart--remove-link-opacity) !important;
}

.wc-block-components-drawer .wc-block-cart-item__remove-link svg {
	color: var(--wp--preset--color--primary);
}

.wc-block-components-drawer .wc-block-cart-item__remove-link,
.wc-block-components-drawer .wc-block-cart-item__remove-link svg {
	height: var(--wns-mini-cart--remove-link-size) !important;
	width: var(--wns-mini-cart--remove-link-size) !important;
}

.wc-block-components-drawer .wc-block-cart-item__remove-link:hover {
	opacity: var(--wns-mini-cart--remove-link-hover-opacity) !important;
}

.wc-block-components-drawer .wc-block-cart-item__remove-link:focus-visible {
	opacity: var(--wns-mini-cart--remove-link-hover-opacity) !important;
}

.wc-block-components-drawer .wc-block-mini-cart__footer {
	margin-top: auto;
	padding: 22px var(--wns-mini-cart--drawer-padding) var(--wns-mini-cart--drawer-padding);
	border-top: var(--wns-mini-cart--section-border);
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 5%, transparent);
}

.wc-block-components-drawer .wc-block-mini-cart__footer .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--secondary) !important;
}

.wc-block-components-drawer .wc-block-mini-cart__footer .wc-block-components-totals-item {
	gap: var(--wns-mini-cart--footer-totals-gap) !important;
}

.wc-block-components-drawer .wc-block-mini-cart__footer-subtotal {
	margin-bottom: 18px;
	font-family: var(--wp--preset--font-family--poltawski-nowy);
	font-size: 18px;
}

.wc-block-components-drawer .wc-block-mini-cart__footer-actions {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 10px !important;
}

.wc-block-components-drawer .wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-components-button {
	min-height: 48px;
	padding: 10px 14px !important;
	border: 1px solid var(--wp--preset--color--primary) !important;
	border-radius: var(--wns-btn-radius) !important;
	font-family: var(--wp--preset--font-family--poltawski-nowy);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: none !important;
	transition:
		color 160ms ease,
		background-color 160ms ease,
		border-color 160ms ease;
}

.wc-block-components-drawer .wc-block-mini-cart__footer-cart {
	color: var(--wp--preset--color--secondary) !important;
	background: transparent !important;
}

.wc-block-components-drawer .wc-block-mini-cart__footer-checkout {
	color: var(--wp--preset--color--foreground) !important;
	background: var(--wp--preset--color--primary) !important;
}

.wc-block-components-drawer .wc-block-mini-cart__footer .wc-block-components-button:hover,
.wc-block-components-drawer .wc-block-mini-cart__footer .wc-block-components-button:focus-visible {
	color: var(--wp--preset--color--black) !important;
	border-color: var(--wp--preset--color--secondary) !important;
	background: var(--wp--preset--color--secondary) !important;
}

.wc-block-components-drawer .wc-block-mini-cart__empty-cart-wrapper {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: var(--wns-mini-cart--drawer-padding);
	color: var(--wp--preset--color--foreground);
	text-align: center;
}

.wc-block-components-drawer .wc-block-mini-cart__empty-cart-wrapper > p {
	max-width: 28ch;
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: clamp(24px, 6vw, 34px);
	font-style: italic;
	line-height: 1.2;
}

.wc-block-components-drawer .wc-block-mini-cart__shopping-button {
	min-height: 48px;
	padding: 10px 22px !important;
	color: var(--wp--preset--color--foreground) !important;
	border: 1px solid var(--wp--preset--color--primary) !important;
	border-radius: var(--wns-btn-radius) !important;
	background: var(--wp--preset--color--primary) !important;
	font-family: var(--wp--preset--font-family--poltawski-nowy);
	font-weight: 600;
	text-decoration: none;
}

.wc-block-components-drawer .wc-block-mini-cart__shopping-button:hover,
.wc-block-components-drawer .wc-block-mini-cart__shopping-button:focus-visible {
	color: var(--wp--preset--color--black) !important;
	border-color: var(--wp--preset--color--secondary) !important;
	background: var(--wp--preset--color--secondary) !important;
}

@media (max-width: 480px) {
	.wc-block-components-drawer .wc-block-mini-cart__footer-actions {
		grid-template-columns: 1fr;
	}

	.wc-block-components-drawer .wc-block-cart-item__product {
		grid-template-columns: 72px 1fr !important;
	}
}
