/**
 * Cart Button widget — circular header basket button, matching the design
 * prototype's .commerce-nav-btn. The .skyweb-cart-count badge is styled by
 * the Sky Web Theme's commerce.css (shared with the native navbar button and
 * the cart-fragment markup).
 */

.skyweb-cart-btn-wrap {
	display: flex;
	align-items: center;
}

.skyweb-cart-btn {
	position: relative;
	width: 38px;
	height: 38px;
	border: 1px solid var(--skyweb-border-color, #e5e1d8);
	background: transparent;
	color: var(--skyweb-muted-color, #5C6168);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .18s ease;
	padding: 0;
	font-family: inherit;
}

.skyweb-cart-btn:hover {
	color: var(--skyweb-dark-color, #0E1116);
	border-color: var(--skyweb-dark-color, #0E1116);
	background: color-mix(in oklab, var(--skyweb-dark-color, #0E1116) 3%, var(--skyweb-surface-color, #fff));
}

.skyweb-cart-btn svg {
	width: 17px;
	height: 17px;
}

@media (max-width: 920px) {
	.skyweb-cart-btn {
		width: 36px;
		height: 36px;
	}
}