/* =========================================================
   SS DECO - HEADER UTILITIES FIX 2.6
   Desktop +50% / Mobile reorder
   ========================================================= */

/* ---------------------------------------------------------
   1. DESKTOP: BUSCAR / CUENTA / CARRITO ~50% MAS GRANDES
   El contenedor clickeable crece, no la altura del header.
   --------------------------------------------------------- */

@media (min-width: 1000px) {

	/* Area clickeable */
	#header [data-id="search"] > a,
	#header [data-id="search"] > button,
	#header [data-id="cart"] > a,
	#header [data-id="cart"] > button,
	#header [data-id="account"] > a,
	#header [data-id="account"] > button,
	#header .ct-header-search > a,
	#header .ct-header-search > button,
	#header .ct-header-cart > a,
	#header .ct-header-cart > button,
	#header .ct-header-account > a,
	#header .ct-header-account > button {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 36px !important;
		min-height: 36px !important;
		padding: 4px !important;
	}

	/* Buscar y carrito: de 15px aprox. a 23px */
	#header [data-id="search"] svg,
	#header [data-id="cart"] svg,
	#header .ct-header-search svg,
	#header .ct-header-cart svg,
	#header .ct-cart-item svg {
		width: 23px !important;
		height: 23px !important;
		min-width: 23px !important;
		min-height: 23px !important;
	}

	/* Cuenta / avatar: de 18px aprox. a 27px */
	#header [data-id="account"] img,
	#header .ct-header-account img,
	#header .ct-account-item img,
	#header img.avatar {
		width: 27px !important;
		height: 27px !important;
		min-width: 27px !important;
		min-height: 27px !important;
	}

	/* Si Blocksy usa icono SVG en vez de avatar */
	#header [data-id="account"] svg,
	#header .ct-header-account svg,
	#header .ct-account-item svg {
		width: 25px !important;
		height: 25px !important;
		min-width: 25px !important;
		min-height: 25px !important;
	}

	/* Separacion un poco mas equilibrada */
	#header [data-id="search"],
	#header [data-id="account"],
	#header [data-id="cart"] {
		margin-inline: 2px !important;
	}
}

/* ---------------------------------------------------------
   2. MODO CLARO: mantener contraste con el nuevo tamaño
   --------------------------------------------------------- */

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 {
	color: #141416 !important;
	--theme-icon-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 {
	color: #141416 !important;
	fill: 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 {
	fill: currentColor !important;
}

/* ---------------------------------------------------------
   3. MOBILE: ORDEN VISUAL
   Buscar -> Carrito -> Mi cuenta -> selector
   --------------------------------------------------------- */

@media (max-width: 999px) {

	/* El bloque de utilidades mantiene el estilo ya aprobado */
	.ss-mobile-utility-item {
		display: block !important;
		width: 100% !important;
	}

	/*
	 * El selector de tema queda como ultimo bloque.
	 * Separamos visualmente el selector de las tres utilidades.
	 */
	.ss-theme-toggle-item {
		order: 999 !important;
		margin-top: 10px !important;
		padding-top: 10px !important;
		border-top: 1px solid rgba(243, 238, 230, 0.14) !important;
	}

	.ss-theme-toggle-item .ss-theme-toggle {
		width: 100% !important;
		min-height: 50px !important;
		padding-inline: 18px !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	/* Evita una segunda linea heredada dentro del propio toggle */
	.ss-theme-toggle,
	.ss-theme-toggle:hover,
	.ss-theme-toggle:focus,
	.ss-theme-toggle:active {
		border: 0 !important;
		box-shadow: none !important;
	}
}