/* =========================================================
   SS DECO - ACCOUNT + CART BADGE FIX 3.0d
   ========================================================= */

/* ---------------------------------------------------------
   1) ACCOUNT DROPDOWN - DARK MODE
   Blocksy hereda colores mediante variables CSS.
   Forzamos esas variables SOLO en los contenedores desplegados.
   --------------------------------------------------------- */

html[data-ss-theme="dark"] #header [data-id="account"] > div,
html[data-ss-theme="dark"] #header [data-id="account"] > ul,
html[data-ss-theme="dark"] #header .ct-header-account > div,
html[data-ss-theme="dark"] #header .ct-header-account > ul,
html[data-ss-theme="dark"] .ct-header-account [class*="dropdown"],
html[data-ss-theme="dark"] .ct-header-account [class*="account-menu"],
html[data-ss-theme="dark"] .ct-header-account [class*="account-content"] {
	--theme-text-color: #141416 !important;
	--theme-link-initial-color: #141416 !important;
	--theme-link-hover-color: #744052 !important;
	--theme-border-color: rgba(20, 20, 22, 0.14) !important;

	background: #ffffff !important;
	color: #141416 !important;
	border-color: rgba(20, 20, 22, 0.14) !important;
}

/* Todo el contenido interno queda legible */
html[data-ss-theme="dark"] #header [data-id="account"] > div *,
html[data-ss-theme="dark"] #header [data-id="account"] > ul *,
html[data-ss-theme="dark"] #header .ct-header-account > div *,
html[data-ss-theme="dark"] #header .ct-header-account > ul *,
html[data-ss-theme="dark"] .ct-header-account [class*="dropdown"] *,
html[data-ss-theme="dark"] .ct-header-account [class*="account-menu"] *,
html[data-ss-theme="dark"] .ct-header-account [class*="account-content"] * {
	color: #141416 !important;
	opacity: 1 !important;
}

/* Links */
html[data-ss-theme="dark"] #header [data-id="account"] > div a,
html[data-ss-theme="dark"] #header [data-id="account"] > ul a,
html[data-ss-theme="dark"] #header .ct-header-account > div a,
html[data-ss-theme="dark"] #header .ct-header-account > ul a {
	color: #141416 !important;
}

/* Hover */
html[data-ss-theme="dark"] #header [data-id="account"] > div a:hover,
html[data-ss-theme="dark"] #header [data-id="account"] > ul a:hover,
html[data-ss-theme="dark"] #header .ct-header-account > div a:hover,
html[data-ss-theme="dark"] #header .ct-header-account > ul a:hover {
	color: #744052 !important;
	background: rgba(116, 64, 82, 0.08) !important;
}

/* Email/meta: gris oscuro */
html[data-ss-theme="dark"] #header [data-id="account"] :is(
	.ct-account-email,
	.user-email,
	small
),
html[data-ss-theme="dark"] #header .ct-header-account :is(
	.ct-account-email,
	.user-email,
	small
) {
	color: #625d60 !important;
}

/* Avatar dentro del desplegable */
html[data-ss-theme="dark"] #header [data-id="account"] > div img,
html[data-ss-theme="dark"] #header .ct-header-account > div img {
	opacity: 1 !important;
}


/* ---------------------------------------------------------
   2) BADGE REAL DEL CARRITO
   En tu DOM la clase es .ct-dynamic-count-cart.
   --------------------------------------------------------- */

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

/* Variables de Blocksy como refuerzo */
html[data-ss-theme] #header [data-id="cart"],
html[data-ss-theme] #header .ct-header-cart {
	--theme-cart-badge-background-color: #744052 !important;
	--theme-cart-badge-text-color: #ffffff !important;
	--cartBadgeBackground: #744052 !important;
	--cartBadgeText: #ffffff !important;
}