/* =========================================================
   AVELOR — Cart popup + offcanvas drawer + free shipping bar
   Slice 8. Loads globally (cart drawer is in header).
   Targets:
     - #ct-added-to-cart-popup .ct-popup       (success popup after Add-to-Cart)
     - #woo-cart-panel.ct-panel                (offcanvas mini-cart drawer)
     - .ct-shipping-progress / mini-cart total (Blocksy free shipping bar)
   Both popup + drawer share the AVELOR brand layer (white bg, deep-green
   pill primary, outlined secondary, Inter/Manrope typography).
   ========================================================= */

/* Header bag trigger — kill focus rings/outlines */
.ct-cart-item.ct-offcanvas-trigger,
.ct-header-cart .ct-cart-item {
	outline: 0 !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}
.ct-cart-item.ct-offcanvas-trigger:hover,
.ct-cart-item.ct-offcanvas-trigger:focus,
.ct-cart-item.ct-offcanvas-trigger:focus-visible,
.ct-cart-item.ct-offcanvas-trigger:active,
.ct-header-cart .ct-cart-item:hover,
.ct-header-cart .ct-cart-item:focus,
.ct-header-cart .ct-cart-item:focus-visible,
.ct-header-cart .ct-cart-item:active {
	outline: 0 !important;
	box-shadow: none !important;
	border-color: transparent !important;
}

/* =========================================================
   1. Popup container — compact 420px popover-card top-right,
      bottom sheet on mobile. Per Claude Design CartDrawer.
   ========================================================= */
#ct-added-to-cart-popup .ct-popup-inner {
	width: 420px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	height: auto;
}
#ct-added-to-cart-popup .ct-popup-inner > article {
	background: var(--avelor-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-popover);
	overflow: hidden;
}
#ct-added-to-cart-popup[data-popup-backdrop="yes"] {
	--popup-backdrop-blur: 2px;
	background: rgba(32, 35, 34, 0.32);
}
#ct-added-to-cart-popup .ct-popup-content {
	padding: 0 !important;
	display: flex;
	flex-direction: column;
}

/* Mobile: edge-to-edge bottom sheet */
@media (max-width: 689px) {
	#ct-added-to-cart-popup .ct-popup-inner {
		top: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100vw;
		max-width: 100vw;
		max-height: 88vh;
	}
	#ct-added-to-cart-popup .ct-popup-inner > article {
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		box-shadow: 0 -12px 32px rgba(32, 35, 34, 0.12);
	}
	/* Force product row (thumb + meta) side-by-side on mobile — overrides
	   any Blocksy default that switches to flex-direction: column */
	#ct-added-to-cart-popup .ct-added-to-cart-product {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
	}
	#ct-added-to-cart-popup .ct-added-to-cart-product > a:first-child,
	#ct-added-to-cart-popup .ct-added-to-cart-product > .ct-media-container {
		flex: 0 0 80px !important;
		width: 80px !important;
		max-width: 80px !important;
	}
	#ct-added-to-cart-popup .ct-added-to-cart-product > section {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}
}

/* =========================================================
   2. Popup header — green check pill + "Додано в кошик" + close
   Matches design .av-cart-head: 18/20 padding, 14px medium label.
   ========================================================= */
#ct-added-to-cart-popup .ct-added-to-cart-message {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--avelor-line);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-medium);
	color: var(--fg-primary);
	margin: 0;
}
#ct-added-to-cart-popup .ct-added-to-cart-message .ct-check-icon {
	width: 22px;
	height: 22px;
	padding: 4px;
	border-radius: 999px;
	background: var(--avelor-deep-green);
	color: var(--avelor-white);
	flex-shrink: 0;
}
#ct-added-to-cart-popup .ct-toggle-close {
	margin-left: auto;
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	color: var(--fg-primary);
	cursor: pointer;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--dur-base) var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}
#ct-added-to-cart-popup .ct-toggle-close:hover,
#ct-added-to-cart-popup .ct-toggle-close:focus,
#ct-added-to-cart-popup .ct-toggle-close:focus-visible,
#ct-added-to-cart-popup .ct-toggle-close:active {
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	opacity: 0.6;
}
#ct-added-to-cart-popup .ct-toggle-close .ct-icon {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/* =========================================================
   3. Product row — thumb 80px (4/5) + meta column
   Matches design .av-cart-row.
   ========================================================= */
#ct-added-to-cart-popup .ct-added-to-cart-product {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	gap: 14px !important;
	padding: 18px 20px !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
}
#ct-added-to-cart-popup .ct-added-to-cart-product > a:first-child,
#ct-added-to-cart-popup .ct-added-to-cart-product > .ct-media-container {
	flex: 0 0 80px !important;
	flex-shrink: 0 !important;
	width: 80px !important;
	max-width: 80px !important;
	aspect-ratio: 4/5;
	border-radius: 8px;
	overflow: hidden;
	background: var(--avelor-line);
	display: block;
}
#ct-added-to-cart-popup .ct-added-to-cart-product > a:first-child img,
#ct-added-to-cart-popup .ct-added-to-cart-product > .ct-media-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
#ct-added-to-cart-popup .ct-added-to-cart-product > section {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* .ct-product-title-price loses its child .price (moved to section by JS).
   What's left is just the h2 — collapse the wrapper. */
#ct-added-to-cart-popup .ct-added-to-cart-product .ct-product-title-price {
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Brand eyebrow injected by JS */
#ct-added-to-cart-popup .avelor-cart-brand {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: var(--fw-semibold);
	color: var(--fg-secondary);
	margin: 0;
	line-height: 1;
}

/* Order inside section: brand (0) → name (1) → attrs (2) → price (3) */
#ct-added-to-cart-popup .ct-added-to-cart-product > section > .avelor-cart-brand {
	order: 0 !important;
	margin: 0 !important;
}
#ct-added-to-cart-popup .ct-added-to-cart-product > section > .ct-product-title-price,
#ct-added-to-cart-popup .ct-added-to-cart-product > section > h2.woocommerce-loop-product__title {
	order: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
}
#ct-added-to-cart-popup .ct-added-to-cart-product > section > .ct-product-title-price h2.woocommerce-loop-product__title,
#ct-added-to-cart-popup .ct-added-to-cart-product > section > h2.woocommerce-loop-product__title {
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	font-weight: var(--fw-medium) !important;
	color: var(--fg-primary);
	line-height: 1.35 !important;
	margin: 0 !important;
	padding: 0 !important;
}
#ct-added-to-cart-popup .ct-added-to-cart-product > section > .price {
	order: 3 !important;
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	font-weight: var(--fw-medium) !important;
	color: var(--fg-primary);
	font-variant-numeric: tabular-nums;
	margin: 0 !important;
	padding: 0 !important;
}
#ct-added-to-cart-popup .ct-added-to-cart-product > section > .price > * {
	font-weight: var(--fw-medium) !important;
}
#ct-added-to-cart-popup .ct-product-title-price .price del {
	color: var(--fg-muted);
	font-weight: var(--fw-regular);
	font-size: 13px;
	margin-right: 6px;
}
#ct-added-to-cart-popup .ct-product-title-price .price ins {
	background: transparent;
	text-decoration: none;
	color: var(--fg-primary);
}

/* Variant attributes line ("Колір · Розмір M") — between name and price */
#ct-added-to-cart-popup .ct-product-attributes,
#ct-added-to-cart-popup .ct-added-to-cart-product > section > .ct-product-attributes {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--font-sans) !important;
	font-size: 12px !important;
	font-weight: var(--fw-regular) !important;
	color: var(--fg-muted) !important;
	line-height: 1.35 !important;
	display: flex !important;
	flex-wrap: wrap;
	gap: 0 6px;
	order: 2 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
}
#ct-added-to-cart-popup .ct-product-attributes li,
#ct-added-to-cart-popup .ct-product-attributes li > span {
	font-family: var(--font-sans) !important;
	font-size: 12px !important;
	font-weight: var(--fw-regular) !important;
	color: var(--fg-muted) !important;
	margin: 0 !important;
	padding: 0 !important;
}
#ct-added-to-cart-popup .ct-product-attributes li {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
#ct-added-to-cart-popup .ct-product-attributes li:not(:last-child)::after {
	content: "·";
	margin-left: 6px;
}

/* =========================================================
   4. Summary band — milk background, repositioned out of
   product section by JS so it spans full popup width.
   Matches design .av-cart-summary.
   ========================================================= */
#ct-added-to-cart-popup .ct-product-totals {
	list-style: none;
	margin: 0;
	padding: 14px 20px;
	background: transparent;
	border-top: 1px solid var(--avelor-line) !important;
	border-bottom: 0 !important;
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--fg-primary);
}
#ct-added-to-cart-popup .ct-product-totals li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
#ct-added-to-cart-popup .ct-product-totals li.ct-added-to-cart-popup-total {
	font-weight: var(--fw-regular);
}
#ct-added-to-cart-popup .ct-product-totals li .avelor-total-amount,
#ct-added-to-cart-popup .ct-product-totals li > span:last-child {
	font-weight: var(--fw-medium);
	font-variant-numeric: tabular-nums;
}

/* =========================================================
   5. Actions — primary + ghost pills + free-shipping line
   Matches design .av-cart-actions + .av-cart-shipping.
   ========================================================= */
#ct-added-to-cart-popup .ct-popup-actions {
	padding: 16px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 0;
}
#ct-added-to-cart-popup .ct-popup-actions .ct-button,
#ct-added-to-cart-popup .ct-popup-actions .ct-button-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 22px;
	border-radius: var(--radius-lg);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}
#ct-added-to-cart-popup .ct-popup-actions .ct-button {
	background: var(--avelor-deep-green);
	color: var(--avelor-white);
	border: 1px solid var(--avelor-deep-green);
}
#ct-added-to-cart-popup .ct-popup-actions .ct-button:hover {
	background: #173027;
	border-color: #173027;
	color: var(--avelor-white);
}
#ct-added-to-cart-popup .ct-popup-actions .ct-button-ghost {
	background: var(--avelor-white);
	color: var(--fg-primary);
	border: 1px solid var(--avelor-line);
}
#ct-added-to-cart-popup .ct-popup-actions .ct-button-ghost:hover {
	border-color: var(--fg-primary);
	background: var(--avelor-white);
}

/* Free-shipping line under buttons (injected by JS) */
#ct-added-to-cart-popup .avelor-cart-shipping {
	font-family: var(--font-sans);
	font-size: 12px;
	color: var(--fg-muted);
	text-align: center;
	margin: 4px 0 0;
	line-height: 1.4;
}
#ct-added-to-cart-popup .avelor-cart-shipping[data-progress="finished"] {
	color: var(--avelor-deep-green);
	font-weight: var(--fw-medium);
}

/* =========================================================
   5. Offcanvas mini-cart drawer (#woo-cart-panel)
   v3 — same compact 420px popover-card as the added-to-cart popup,
   but with full cart capabilities (multi-item, qty stepper, remove).
   ========================================================= */

/* Backdrop layer (the .ct-panel itself fills the viewport) */
#woo-cart-panel.ct-panel {
	background: rgba(32, 35, 34, 0.32);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
#woo-cart-panel.ct-panel:not(.active) {
	background: transparent;
}

/* The actual card */
#woo-cart-panel .ct-panel-inner {
	position: fixed !important;
	top: 16px !important;
	right: 16px !important;
	bottom: auto !important;
	left: auto !important;
	width: 420px !important;
	max-width: calc(100vw - 32px) !important;
	max-height: calc(100vh - 32px) !important;
	height: auto !important;
	background: var(--avelor-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-popover);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	font-family: var(--font-sans);
	color: var(--fg-primary);
}

@media (max-width: 689px) {
	#woo-cart-panel .ct-panel-inner {
		top: auto !important;
		bottom: 0 !important;
		right: 0 !important;
		left: 0 !important;
		width: auto !important;
		max-width: 100vw !important;
		max-height: 88vh !important;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	}
}

/* Header */
#woo-cart-panel .ct-panel-actions {
	padding: 18px 20px;
	border-bottom: 1px solid var(--avelor-line);
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
#woo-cart-panel .ct-panel-heading {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-medium);
	color: var(--fg-primary);
}
#woo-cart-panel .ct-toggle-close {
	margin-left: auto;
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	color: var(--fg-primary);
	cursor: pointer;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--dur-base) var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}
#woo-cart-panel .ct-toggle-close:hover,
#woo-cart-panel .ct-toggle-close:focus,
#woo-cart-panel .ct-toggle-close:focus-visible,
#woo-cart-panel .ct-toggle-close:active {
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	opacity: 0.6;
}
#woo-cart-panel .ct-toggle-close .ct-icon {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/* Scrollable content area */
#woo-cart-panel .ct-panel-content {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
}
#woo-cart-panel .ct-panel-content-inner {
	padding: 0;
	display: block !important;
	overflow: visible !important; /* let parent .ct-panel-content handle scroll; Blocksy default hidden blocks overflow detection */
	height: auto !important;
	max-height: none !important;
}

/* WC mini cart list */
#woo-cart-panel .woocommerce-mini-cart,
#woo-cart-panel ul.cart_list {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Item row — image LEFT, product-data MIDDLE/FILL, remove top-right (absolute).
   Blocksy renders: <a.remove>, <a.ct-media-container>, <div.product-data>.
   Override grid placement so the order on screen is image|data, with × floated. */
#woo-cart-panel .mini_cart_item {
	display: grid;
	grid-template-columns: 64px 1fr;
	column-gap: 12px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--avelor-line);
	position: relative;
	align-items: start;
}
#woo-cart-panel .mini_cart_item:last-child {
	border-bottom: 0;
}

/* Image */
#woo-cart-panel .mini_cart_item > .ct-media-container,
#woo-cart-panel .mini_cart_item > a.ct-media-container {
	grid-column: 1;
	grid-row: 1;
	display: block;
	width: 64px;
	aspect-ratio: 4/5;
	border-radius: 8px;
	overflow: hidden;
	background: var(--avelor-line);
}
#woo-cart-panel .mini_cart_item > .ct-media-container img,
#woo-cart-panel .mini_cart_item > a.ct-media-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	display: block;
}

/* Product-data column */
#woo-cart-panel .mini_cart_item > .product-data {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-right: 28px; /* room for absolute remove × */
	min-width: 0;
}

/* Product title — match popup typography (Inter 14px medium) */
#woo-cart-panel .mini_cart_item .product-title,
#woo-cart-panel .mini_cart_item > .product-data > a.product-title {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-medium);
	color: var(--fg-primary);
	line-height: 1.3;
	text-decoration: none;
	display: block;
	margin: 0;
	padding: 0;
}

/* Variation attributes (when present) */
#woo-cart-panel .mini_cart_item .variation,
#woo-cart-panel .mini_cart_item dl.variation {
	font-family: var(--font-sans);
	font-size: 12px;
	color: var(--fg-muted);
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	line-height: 1.4;
}
#woo-cart-panel .mini_cart_item .variation dt,
#woo-cart-panel .mini_cart_item .variation dd {
	display: inline;
	margin: 0;
	padding: 0;
	font-weight: var(--fw-regular);
}
#woo-cart-panel .mini_cart_item .variation dd p {
	display: inline;
	margin: 0;
}

/* Actions row — qty stepper + multiply × + price, baseline-aligned */
#woo-cart-panel .mini_cart_item .ct-product-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
}
#woo-cart-panel .mini_cart_item .ct-product-multiply-symbol {
	color: var(--fg-muted);
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 1;
}
#woo-cart-panel .mini_cart_item .ct-product-actions .amount,
#woo-cart-panel .mini_cart_item .ct-product-actions .woocommerce-Price-amount {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--fg-primary);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* Quantity stepper: − button | rounded input | + button, all standalone tiles */
#woo-cart-panel .mini_cart_item .quantity {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
}
#woo-cart-panel .mini_cart_item .quantity .ct-decrease,
#woo-cart-panel .mini_cart_item .quantity .ct-increase {
	width: 22px !important;
	height: 22px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 0;
	background: transparent;
	color: var(--fg-primary);
	cursor: pointer;
	user-select: none;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1;
	padding: 0 !important;
	position: relative !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	margin: 0 !important;
	align-self: center !important;
	transition: background-color var(--dur-base) var(--ease-out);
}
/* Override Blocksy's ::before icon with simple text glyphs */
#woo-cart-panel .mini_cart_item .quantity .ct-decrease::before,
#woo-cart-panel .mini_cart_item .quantity .ct-increase::before {
	width: auto !important;
	height: auto !important;
	background: none !important;
	background-image: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: var(--fw-regular);
	color: var(--fg-primary);
	line-height: 1;
	display: block;
	position: static !important;
	transform: none !important;
}
#woo-cart-panel .mini_cart_item .quantity .ct-decrease::before {
	content: "\2212" !important; /* MINUS SIGN */
}
#woo-cart-panel .mini_cart_item .quantity .ct-increase::before {
	content: "+" !important;
}
#woo-cart-panel .mini_cart_item .quantity .ct-decrease:hover,
#woo-cart-panel .mini_cart_item .quantity .ct-increase:hover {
	background: var(--avelor-milk);
}
/* Order: − input + */
#woo-cart-panel .mini_cart_item .quantity .ct-decrease { order: 1; }
#woo-cart-panel .mini_cart_item .quantity .qty { order: 2; }
#woo-cart-panel .mini_cart_item .quantity .ct-increase { order: 3; }
/* Rounded input pill */
#woo-cart-panel .mini_cart_item .quantity .qty {
	width: 36px;
	height: 26px;
	padding: 0 2px !important;
	border: 1px solid var(--avelor-line);
	border-radius: 999px;
	text-align: center;
	background: var(--avelor-white);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--fg-primary);
	-moz-appearance: textfield;
	box-sizing: border-box;
	line-height: 1;
}
#woo-cart-panel .mini_cart_item .quantity .qty::-webkit-outer-spin-button,
#woo-cart-panel .mini_cart_item .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Remove × button — absolutely positioned top-right of item */
#woo-cart-panel .mini_cart_item > .remove,
#woo-cart-panel .mini_cart_item > a.remove {
	position: absolute;
	top: 12px;
	right: 16px;
	grid-column: unset;
	grid-row: unset;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--fg-muted) !important;
	background: transparent !important;
	font-size: 16px !important;
	font-weight: var(--fw-regular);
	line-height: 1;
	transition: color var(--dur-base) var(--ease-out);
	margin: 0;
	padding: 0;
	z-index: 2;
}
#woo-cart-panel .mini_cart_item > .remove:hover {
	color: var(--fg-primary) !important;
}

/* Subtotal — milk band */
#woo-cart-panel .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 14px 20px;
	margin: 0;
	background: var(--avelor-milk);
	border-top: 1px solid var(--avelor-line);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: var(--fw-regular);
	color: var(--fg-primary);
}
#woo-cart-panel .woocommerce-mini-cart__total strong {
	font-weight: var(--fw-regular);
	text-transform: none;
}
#woo-cart-panel .woocommerce-mini-cart__total .amount,
#woo-cart-panel .woocommerce-mini-cart__total .woocommerce-Price-amount {
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
}

/* Empty state */
#woo-cart-panel .woocommerce-mini-cart__empty-message {
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--fg-muted);
	text-align: center;
	padding: 48px 20px;
	margin: 0;
}

/* Empty cart drawer (Blocksy renders WC's full cart-empty template, not mini-cart) */
#woo-cart-panel .ct-panel-content-inner .wc-empty-cart-message {
	padding: 56px 24px 20px !important;
	margin: 0 !important;
	text-align: center;
	background: transparent !important;
	border: 0 !important;
}
#woo-cart-panel .ct-panel-content-inner .wc-empty-cart-message::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto 18px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 7h12l-1 13H7L6 7z'/><path d='M9 7a3 3 0 0 1 6 0'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.7;
}
#woo-cart-panel .ct-panel-content-inner .cart-empty,
#woo-cart-panel .ct-panel-content-inner .cart-empty.woocommerce-info {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	font-weight: var(--fw-regular) !important;
	color: var(--fg-muted) !important;
	text-align: center !important;
	list-style: none !important;
	display: block !important;
	justify-content: center !important;
}
#woo-cart-panel .ct-panel-content-inner .cart-empty::before,
#woo-cart-panel .ct-panel-content-inner .cart-empty.woocommerce-info::before {
	display: none !important;
	content: none !important;
}
#woo-cart-panel .ct-panel-content-inner .return-to-shop {
	padding: 24px 20px 24px !important;
	margin: 0 !important;
	text-align: center;
}
#woo-cart-panel .ct-panel-content-inner .return-to-shop a.button,
#woo-cart-panel .ct-panel-content-inner .return-to-shop .wc-backward {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	height: 48px;
	padding: 0 28px !important;
	border-radius: var(--radius-lg) !important;
	background: var(--avelor-deep-green) !important;
	background-color: var(--avelor-deep-green) !important;
	color: var(--avelor-white) !important;
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	font-weight: var(--fw-medium) !important;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	border: 1px solid var(--avelor-deep-green) !important;
	transition: background-color var(--dur-base) var(--ease-out);
}
#woo-cart-panel .ct-panel-content-inner .return-to-shop a.button:hover {
	background: #173027 !important;
	border-color: #173027 !important;
	color: var(--avelor-white) !important;
}

/* Action buttons */
#woo-cart-panel .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 20px 20px;
	margin: 0;
	border-top: 0;
}
#woo-cart-panel .woocommerce-mini-cart__buttons .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 22px;
	border-radius: var(--radius-lg);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}
/* Primary = checkout */
#woo-cart-panel .woocommerce-mini-cart__buttons .checkout,
#woo-cart-panel .woocommerce-mini-cart__buttons .checkout.wc-forward {
	background: var(--avelor-deep-green);
	color: var(--avelor-white);
	border-color: var(--avelor-deep-green);
	order: 1;
}
#woo-cart-panel .woocommerce-mini-cart__buttons .checkout:hover {
	background: #173027;
	border-color: #173027;
}
/* Secondary = view cart */
#woo-cart-panel .woocommerce-mini-cart__buttons .wc-forward:not(.checkout) {
	background: var(--avelor-white);
	color: var(--fg-primary);
	border-color: var(--avelor-line);
	order: 2;
}
#woo-cart-panel .woocommerce-mini-cart__buttons .wc-forward:not(.checkout):hover {
	border-color: var(--fg-primary);
}

/* =========================================================
   6. Free shipping bar — Blocksy native (mini-cart)
   Markup: .ct-shipping-progress-mini-cart > .ct-message + .ct-progress-bar > span
   Blocksy ships its own [class*="ct-shipping-progress"] rule with
   linear-gradient fill — we override with higher specificity (#id).
   ========================================================= */
[class*="ct-shipping-progress"] {
	padding: 14px 20px 6px;
	margin: 0;
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
[class*="ct-shipping-progress"] .ct-message {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: var(--fw-regular);
	color: var(--fg-muted);
	text-align: left;
	line-height: 1.4;
	margin: 0;
}
[class*="ct-shipping-progress"] .ct-message strong,
[class*="ct-shipping-progress"] .ct-message .amount,
[class*="ct-shipping-progress"] .ct-message .woocommerce-Price-amount {
	color: var(--fg-primary);
	font-weight: var(--fw-medium);
	font-family: var(--font-sans);
	font-variant-numeric: tabular-nums;
	background: transparent;
}
/* Rail: override Blocksy default border-radius/height/background */
[class*="ct-shipping-progress"] .ct-progress-bar,
[class*="ct-shipping-progress"] .ct-progress-bar:not(:empty) {
	width: 100%;
	height: 4px;
	border-radius: 999px;
	background: var(--avelor-line);
	overflow: hidden;
	position: relative;
}
/* Fill: Blocksy uses position:absolute + linear-gradient — we replace
   with solid deep-green and matching radius */
[class*="ct-shipping-progress"] .ct-progress-bar span,
[class*="ct-shipping-progress"] .ct-progress-bar > span {
	display: block !important;
	height: 100% !important;
	background: var(--avelor-deep-green) !important;
	background-image: none !important;
	border-radius: 999px !important;
	transition: width var(--dur-base) var(--ease-out);
	position: relative !important;
	inset-block: auto !important;
	inset-inline-start: auto !important;
}
/* Threshold reached — turn message deep-green and emphasize.
   Blocksy doesn't add a state class, so detect via 100% width on fill. */
[class*="ct-shipping-progress"]:has(.ct-progress-bar > span[style*="width: 100%"]) .ct-message,
[class*="ct-shipping-progress"]:has(.ct-progress-bar > span[style*="width:100%"]) .ct-message {
	color: var(--avelor-deep-green);
	font-weight: var(--fw-medium);
}

/* Legacy / fallback selectors for the cart page + checkout free shipping bar */
.ct-shipping-progress {
	padding: 14px 20px;
	margin: 0;
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ct-shipping-progress p {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: var(--fw-regular);
	color: var(--fg-muted);
	text-align: left;
	line-height: 1.4;
}
.ct-shipping-progress p strong,
.ct-shipping-progress p .amount {
	color: var(--fg-primary);
	font-weight: var(--fw-medium);
	font-family: var(--font-sans);
	font-variant-numeric: tabular-nums;
}
.ct-shipping-progress progress {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	border: 0;
	border-radius: 999px;
	background: var(--avelor-line);
	overflow: hidden;
}
.ct-shipping-progress progress::-webkit-progress-bar {
	background: var(--avelor-line);
	border-radius: 999px;
}
.ct-shipping-progress progress::-webkit-progress-value {
	background: var(--avelor-deep-green);
	border-radius: 999px;
	transition: width var(--dur-base) var(--ease-out);
}
.ct-shipping-progress progress::-moz-progress-bar {
	background: var(--avelor-deep-green);
	border-radius: 999px;
}
/* Legacy achieved-state hooks */
.ct-shipping-progress[data-progress="finished"] p,
.ct-shipping-progress.finished p {
	color: var(--avelor-deep-green);
	font-weight: var(--fw-medium);
}

/* =========================================================
   7. Backdrop blur for drawer (matches popup)
   ========================================================= */
#offcanvas[data-behaviour]::before,
.ct-drawer-canvas[data-behaviour]::before {
	backdrop-filter: blur(4px);
}


/* ===== Polish: cart drawer geometry (let Blocksy native scroll handle the rest) ===== */
/* Mobile: bottom sheet with fixed height so the native .ct-panel-content-inner scroll has bounds */
@media (max-width: 689px) {
	#woo-cart-panel .ct-panel-inner {
		height: 88vh !important;
		height: 88dvh !important;
		max-height: 88vh !important;
		max-height: 88dvh !important;
	}
	/* Touch scroll hints on the native Blocksy scroll container — fixes iOS Safari sometimes-blocked nested scroll */
	#woo-cart-panel .ct-panel-content-inner {
		-webkit-overflow-scrolling: touch !important;
		overscroll-behavior: contain !important;
		touch-action: pan-y !important;
	}
	/* Same on outer just in case touch lands there */
	#woo-cart-panel .ct-panel-content {
		-webkit-overflow-scrolling: touch !important;
		touch-action: pan-y !important;
	}
}