/* Keep the SureCart component behaviour intact while matching Blocksy header items. */
.ct-surecart-cart {
	display: inline-flex;
	align-items: center;
	color: var(--bsct-cart-icon-color, var(--theme-text-color));
}

.ct-surecart-cart:hover {
	color: var(--bsct-cart-icon-hover-color, var(--theme-link-hover-color));
}

.ct-surecart-cart .wp-block-surecart-cart-menu-icon-button,
.ct-surecart-cart .sc-cart-icon {
	display: inline-flex;
	align-items: center;
}

.ct-surecart-cart .sc-cart-icon svg {
	width: var(--bsct-cart-icon-size, 20px) !important;
	height: var(--bsct-cart-icon-size, 20px) !important;
	fill: none !important;
	stroke: currentColor;
	stroke-width: 2;
}

/* SureCart's default counter has horizontal padding, which makes a single
 * digit appear oval. Give it a fixed square box so border-radius produces a
 * true circle without changing its cart state or colours. */
.ct-surecart-cart .sc-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	min-width: 18px;
	padding: 0;
	line-height: 1;
	border-radius: 50%;
}

/* Standalone SureCart cart blocks can use a dark Gutenberg background without
 * defining a text colour. Keep their synchronised icon legible. */
.wp-block-surecart-cart-menu-icon-button.has-background .sc-cart-icon {
	color: #fff;
}

/* Blocksy's compact inline SVGs intentionally have no width/height
 * attributes. SureCart's floating icon wrapper has line-height: 0, which
 * otherwise collapses such an SVG to 0×0. Size it relative to SureCart's
 * configured floating-icon font size. */
.wp-block-surecart-cart-icon__icon svg.bsct-widget-blocksy-icon {
	display: block;
	width: 0.9em;
	height: 0.9em;
	fill: currentColor;
}

/* Blocksy cart variants are intentionally filled SVGs, just like Blocksy's
 * native Header Cart element. Their 15×15 viewBox otherwise renders slightly
 * smaller than SureCart's 24×24 shopping-bag artwork at the same CSS size. */
.ct-surecart-cart.is-blocksy-cart-icon .sc-cart-icon svg {
	fill: currentColor !important;
	stroke: none;
	transform: scale(0.833333);
	transform-origin: center;
}