/* =========================================================
   SS DECO - HEADER UTILITIES FIX 2.5
   Cuenta + Buscar + Carrito
   ========================================================= */

/* ---------------------------------------------------------
   1. ICONOS DEL HEADER - MODO CLARO
   --------------------------------------------------------- */

html[data-ss-theme="light"] #header [data-id="search"],
html[data-ss-theme="light"] #header [data-id="cart"],
html[data-ss-theme="light"] #header [data-id="account"],
html[data-ss-theme="light"] #header .ct-header-search,
html[data-ss-theme="light"] #header .ct-header-cart,
html[data-ss-theme="light"] #header .ct-header-account,
html[data-ss-theme="light"] #header .ct-cart-item,
html[data-ss-theme="light"] #header .ct-account-item {
	color: #141416 !important;
	--theme-icon-color: #141416 !important;
	--theme-text-color: #141416 !important;
	opacity: 1 !important;
}

html[data-ss-theme="light"] #header [data-id="search"] svg,
html[data-ss-theme="light"] #header [data-id="cart"] svg,
html[data-ss-theme="light"] #header [data-id="account"] svg,
html[data-ss-theme="light"] #header .ct-header-search svg,
html[data-ss-theme="light"] #header .ct-header-cart svg,
html[data-ss-theme="light"] #header .ct-header-account svg,
html[data-ss-theme="light"] #header .ct-cart-item svg,
html[data-ss-theme="light"] #header .ct-account-item svg {
	color: #141416 !important;
	fill: currentColor !important;
	stroke: currentColor !important;
	opacity: 1 !important;
}

html[data-ss-theme="light"] #header [data-id="search"] svg path,
html[data-ss-theme="light"] #header [data-id="cart"] svg path,
html[data-ss-theme="light"] #header [data-id="account"] svg path,
html[data-ss-theme="light"] #header .ct-header-search svg path,
html[data-ss-theme="light"] #header .ct-header-cart svg path,
html[data-ss-theme="light"] #header .ct-header-account svg path,
html[data-ss-theme="light"] #header .ct-cart-item svg path,
html[data-ss-theme="light"] #header .ct-account-item svg path {
	fill: currentColor !important;
	stroke: currentColor;
}

/* ---------------------------------------------------------
   2. AVATAR / CUENTA
   --------------------------------------------------------- */

#header [data-id="account"] img,
#header .ct-header-account img,
#header .ct-account-item img,
#header img.avatar {
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	min-height: 24px !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 999px !important;
	object-fit: cover !important;
	opacity: 1 !important;
	filter: none !important;
}

html[data-ss-theme="light"] #header [data-id="account"] img,
html[data-ss-theme="light"] #header .ct-header-account img,
html[data-ss-theme="light"] #header .ct-account-item img,
html[data-ss-theme="light"] #header img.avatar {
	background: #ffffff !important;
	box-shadow:
		0 0 0 1px rgba(20, 20, 22, 0.28),
		0 0 0 3px rgba(20, 20, 22, 0.06) !important;
}

html[data-ss-theme="dark"] #header [data-id="account"] img,
html[data-ss-theme="dark"] #header .ct-header-account img,
html[data-ss-theme="dark"] #header .ct-account-item img,
html[data-ss-theme="dark"] #header img.avatar {
	background: #1d1d20 !important;
	box-shadow:
		0 0 0 1px rgba(243, 238, 230, 0.55),
		0 0 0 3px rgba(243, 238, 230, 0.08) !important;
}

/* ---------------------------------------------------------
   3. BADGE DEL CARRITO
   --------------------------------------------------------- */

html[data-ss-theme="light"] #header .ct-cart-item .ct-dynamic-count,
html[data-ss-theme="light"] #header [data-id="cart"] .ct-dynamic-count,
html[data-ss-theme="light"] #header .ct-cart-item .ct-cart-count {
	background: #744052 !important;
	color: #ffffff !important;
	border-color: #744052 !important;
	opacity: 1 !important;
}

/* ---------------------------------------------------------
   4. UTILIDADES MOVILES DENTRO DEL MENU
   Desktop: ocultas.
   --------------------------------------------------------- */

.ss-mobile-utility-item {
	display: none !important;
}

@media (max-width: 999px) {

	.ss-mobile-utility-item {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}

	.ss-mobile-utility-item:first-of-type {
		margin-top: 14px !important;
		padding-top: 14px !important;
		border-top: 1px solid rgba(243, 238, 230, 0.14) !important;
	}

	.ss-mobile-utility-link,
	.ss-mobile-utility-button {
		appearance: none;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 12px !important;
		width: 100% !important;
		min-height: 50px !important;
		padding: 12px 18px !important;
		margin: 0 !important;
		border: 0 !important;
		background: transparent !important;
		color: #f3eee6 !important;
		font: inherit !important;
		font-size: 17px !important;
		font-weight: 600 !important;
		line-height: 1.2 !important;
		text-align: left !important;
		text-decoration: none !important;
		box-shadow: none !important;
		cursor: pointer;
	}

	.ss-mobile-utility-link:hover,
	.ss-mobile-utility-button:hover,
	.ss-mobile-utility-link:focus-visible,
	.ss-mobile-utility-button:focus-visible {
		color: #ffffff !important;
		background: rgba(243, 238, 230, 0.06) !important;
	}

	.ss-mobile-utility-icon {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 22px !important;
		height: 22px !important;
		flex: 0 0 22px !important;
		color: currentColor !important;
	}

	.ss-mobile-utility-icon svg {
		display: block !important;
		width: 18px !important;
		height: 18px !important;
		fill: currentColor !important;
		stroke: none !important;
	}

	.ss-mobile-cart-count {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 22px !important;
		height: 22px !important;
		padding: 0 6px !important;
		margin-left: auto !important;
		border-radius: 999px !important;
		background: #744052 !important;
		color: #ffffff !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		line-height: 1 !important;
	}
}