/**
 * Header cart menu item. Colors and typography inherit from the theme's
 * menu styles; this only lays out the icon + label pair.
 */

.cllcw-menu-cart__link {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

/* Space between icon and count lives on the icon (a margin survives
   Divi's menu-link display overrides; a flex gap does not). */
.cllcw-menu-cart__icon {
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: text-bottom;
	margin-right: 0.5em;
}

/* In the mobile menu (JS moves the item to the top) give it a little
   separation from the links below. */
.et_mobile_menu > .cllcw-menu-cart {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	margin-bottom: 0.25em;
}

/* ---- [cll_account_button]: structure only ----
   Shape/behavior live here so the button never wraps or collapses;
   colors, fonts, and casing belong to the theme (style it in the Divi 5
   Theme Builder via the module's custom CSS, e.g.
   `selector .cllcw-account-button { background:#c36c28; color:#fff; }`). */

.cllcw-account-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	/* Size to the label, never narrower — a max-width here lets the box
	   shrink under its own no-wrap text and the pill clips. */
	width: max-content;
	flex-shrink: 0;
	padding: 0.55em 1.4em;
	border-radius: 999px;
	line-height: 1.2;
	text-decoration: none;
	/* Fluid label: eases down as header columns tighten (tablet/mid-
	   desktop breakpoints) instead of overflowing the pill. */
	font-size: clamp(0.75rem, 0.55rem + 0.55vw, 1rem);
}