/* SATA - acordeon de categorias del catalogo.
   Paleta de la marca SATA CORP: tinta #070b14, panel #111a2c, borde #1e2a42,
   acento verde #00d68f. Es la misma de la portada, para que la tienda no
   parezca de otra casa. */

.sata-nav {
	--sata-panel:  #111a2c;
	--sata-borde:  #1e2a42;
	--sata-verde:  #00d68f;
	--sata-texto:  #c3d1e6;
	--sata-tenue:  #7d8ca6;
}

.sata-nav__caja {
	position: sticky;
	top: 20px;
	background: var(--sata-panel);
	border: 1px solid var(--sata-borde);
	border-radius: 14px;
	padding: 6px 6px 10px;
	color: var(--sata-texto);
	font-size: .92rem;
	line-height: 1.35;
	box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .9);
	overflow: hidden;
}

/* ------------------------------- cabecera -------------------------------- */

.sata-nav__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 12px 11px;
}

.sata-nav__rotulo {
	font-size: .70rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sata-tenue);
}

.sata-nav__total {
	font: 700 .72rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: var(--sata-verde);
	background: rgba(0, 214, 143, .12);
	border: 1px solid rgba(0, 214, 143, .3);
	border-radius: 999px;
	padding: 4px 9px;
}

.sata-nav__todo {
	display: block;
	margin: 0 6px 8px;
	padding: 10px 12px;
	border: 1px solid var(--sata-borde);
	border-radius: 9px;
	color: var(--sata-texto) !important;
	text-decoration: none;
	font-weight: 600;
	font-size: .85rem;
	transition: border-color .18s, color .18s, background .18s;
}

.sata-nav__todo:hover,
.sata-nav__todo:focus-visible {
	border-color: rgba(0, 214, 143, .55);
	color: var(--sata-verde) !important;
	background: rgba(0, 214, 143, .07);
}

.sata-nav__todo.es-actual {
	border-color: rgba(0, 214, 143, .55);
	background: rgba(0, 214, 143, .12);
	color: var(--sata-verde) !important;
}

/* ------------------------------- acordeon -------------------------------- */

/* jQuery UI marca las cabeceras y los paneles con sus propias clases; aqui se
   les quita todo el aspecto de "widget" para que manden estos estilos. */
.sata-acordeon .ui-accordion-header,
.sata-acordeon .ui-accordion-content {
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	margin: 0;
	padding: 0;
}

.sata-acordeon__cab {
	display: flex !important;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 12px 12px 12px 26px !important;
	border-top: 1px solid var(--sata-borde) !important;
	cursor: pointer;
	position: relative;
	font-size: .88rem !important;
	font-weight: 600 !important;
	color: var(--sata-texto) !important;
	outline: none;
	transition: color .18s, background .18s;
}

.sata-acordeon__cab:hover { color: #fff !important; background: rgba(255, 255, 255, .03); }

.sata-acordeon__cab:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(0, 214, 143, .55);
	border-radius: 8px;
}

/* la barrita verde de la izquierda: marca la rama abierta */
.sata-acordeon__cab::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	width: 3px;
	height: 0;
	border-radius: 3px;
	background: var(--sata-verde);
	transform: translateY(-50%);
	transition: height .22s ease;
}

.sata-acordeon__cab.ui-accordion-header-active { color: var(--sata-verde) !important; }
.sata-acordeon__cab.ui-accordion-header-active::before { height: 16px; }

/* la rama donde esta lo que se esta viendo, aunque este cerrada */
.sata-acordeon__cab.tiene-actual .sata-acordeon__nombre { color: #fff; }

.sata-acordeon__nombre { flex: 1 1 auto; }

.sata-acordeon__cuenta {
	font: 600 .72rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: var(--sata-tenue);
	flex: 0 0 auto;
}

/* la flecha, dibujada con bordes: nada de iconos de jQuery UI */
.sata-acordeon__cab::after {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-left: 2px;
	border-right: 1.6px solid var(--sata-tenue);
	border-bottom: 1.6px solid var(--sata-tenue);
	transform: rotate(-45deg) translate(-1px, -1px);
	transition: transform .22s ease, border-color .18s;
}

.sata-acordeon__cab.ui-accordion-header-active::after {
	transform: rotate(45deg) translate(-1px, -1px);
	border-color: var(--sata-verde);
}

/* --------------------------------- panel --------------------------------- */

.sata-acordeon__panel { padding: 2px 0 10px !important; overflow: hidden; }
.sata-acordeon__panel ul { list-style: none; margin: 0; padding: 0; }
.sata-acordeon__panel li { margin: 0; }

.sata-acordeon__panel a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px 8px 26px;
	color: var(--sata-tenue) !important;
	text-decoration: none;
	font-size: .855rem;
	border-radius: 7px;
	transition: color .16s, background .16s, padding-left .16s;
}

.sata-acordeon__panel a:hover,
.sata-acordeon__panel a:focus-visible {
	color: var(--sata-verde) !important;
	background: rgba(0, 214, 143, .07);
	padding-left: 30px;
}

.sata-acordeon__panel a em {
	margin-left: auto;
	font: 600 .7rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-style: normal;
	opacity: .75;
}

.sata-acordeon__panel a.es-raiz { color: var(--sata-texto) !important; font-weight: 600; }

.sata-acordeon__panel a.es-actual {
	color: var(--sata-verde) !important;
	background: rgba(0, 214, 143, .11);
	font-weight: 600;
}

/* Un tercer nivel conserva la jerarquia sin competir con las categorias
   principales. Actualmente lo usan Wi-Fi y Zigbee dentro de Domotica. */
.sata-acordeon__panel .sata-acordeon__subnivel { margin: 0 0 3px; }
.sata-acordeon__panel .sata-acordeon__subnivel a {
	padding-left: 42px;
	font-size: .80rem;
}
.sata-acordeon__panel .sata-acordeon__subnivel a::before {
	content: "";
	width: 9px;
	height: 1px;
	margin-right: 1px;
	background: currentColor;
	opacity: .45;
}
.sata-acordeon__panel .sata-acordeon__subnivel a:hover,
.sata-acordeon__panel .sata-acordeon__subnivel a:focus-visible { padding-left: 46px; }

/* ------------------------- el catalogo, al lado -------------------------- */

/* Storefront ya reparte 74/22 cuando la clase de ancho completo no esta.
   Aqui solo se le da aire al catalogo para que no se pegue a la barra. */
@media (min-width: 768px) {
	.sata-con-nav .site-main { padding-right: 6px; }
}

/* --------------------------- movil: cajon lateral ------------------------ */

/* En movil Storefront manda la barra DEBAJO del catalogo, que para navegar no
   sirve de nada. Se convierte en un cajon que entra desde la izquierda, y el
   boton que lo abre lo coloca nav.js justo encima de la rejilla. */
@media (max-width: 767px) {

	.sata-nav__abrir {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		width: 100%;
		margin: 0 0 18px;
		padding: 13px 16px;
		background: var(--sata-panel, #111a2c);
		color: #c3d1e6;
		border: 1px solid #1e2a42;
		border-radius: 11px;
		font-size: .92rem;
		font-weight: 600;
		cursor: pointer;
	}

	.sata-nav__abrir::before {
		content: "";
		width: 14px;
		height: 10px;
		border-top: 2px solid #00d68f;
		border-bottom: 2px solid #00d68f;
		box-sizing: border-box;
		position: relative;
	}

	.sata-nav {
		position: fixed;
		z-index: 9998;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(84vw, 330px);
		margin: 0 !important;
		padding: 12px !important;
		background: #070b14;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(-102%);
		transition: transform .26s ease;
		box-shadow: 0 0 60px rgba(0, 0, 0, .7);
	}

	.sata-nav.esta-abierta { transform: none; }

	.sata-nav__caja { position: static; box-shadow: none; }

	.sata-nav__velo {
		position: fixed;
		inset: 0;
		z-index: 9997;
		background: rgba(7, 11, 20, .66);
		opacity: 0;
		pointer-events: none;
		transition: opacity .26s ease;
	}

	.sata-nav__velo.esta-abierta { opacity: 1; pointer-events: auto; }

	.sata-nav__cerrar {
		position: absolute;
		top: 16px;
		right: 14px;
		width: 34px;
		height: 34px;
		border: 1px solid #1e2a42;
		border-radius: 9px;
		background: #111a2c;
		color: #c3d1e6;
		font-size: 1.1rem;
		line-height: 1;
		cursor: pointer;
	}
}

@media (min-width: 768px) {
	.sata-nav__abrir,
	.sata-nav__velo,
	.sata-nav__cerrar { display: none !important; }
}

/* ============================ ANCHO DE LA PAGINA ========================== */

/* Storefront clava .col-full en 915 px de contenido: en un monitor de 1920
   la tienda ocupaba la MITAD y sobraba medio ancho a cada lado.
   content-box, asi que al max-width hay que sumarle los 36 px de padding.
   El min() evita que en portatiles de 1280 se pegue a los bordes. */
.col-full {
	max-width: min(1560px, 92vw) !important;
}

/* ====================== la barra va a la IZQUIERDA ======================== */

/* Storefront la pone a la derecha. Para NAVEGAR se lee mucho mejor a la
   izquierda: es donde el ojo busca el indice.
   Ancho FIJO: en porcentaje, al ensanchar la pagina la barra crecia con ella
   y quedaban 340 px de categorias, que es absurdo.

   ⚠️ Con FLEX, no invirtiendo los floats de Storefront. Se probo con floats
   (#primary a la derecha, #secondary a la izquierda) y la barra se caia
   DEBAJO del catalogo: entre paddings y box-sizing los dos anchos sumaban mas
   que el contenedor por unos pocos px, y basta eso para que el float rompa
   linea. Flex reparte lo que hay y `order` manda sobre el orden del DOM. */
@media (min-width: 768px) {

	/* ⚠️ SIN `gap`. WooCommerce mete <div class="woocommerce"> como primer hijo
	   (vacio casi siempre, para los avisos) y con `gap` cada hijo invisible se
	   llevaba 40 px: la barra acababa 80 px dentro, desalineada de la cabecera.
	   La separacion la pone el margen del catalogo, que solo existe una vez. */
	.sata-con-nav .site-content > .col-full {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 0;
	}

	/* los avisos de WooCommerce, en su propia fila y a todo lo ancho */
	.sata-con-nav .site-content > .col-full > .woocommerce {
		flex: 1 0 100%;
		order: 0;
	}

	.sata-con-nav .widget-area {
		float: none;
		order: 1;
		flex: 0 0 250px;
		width: 250px;
	}

	.sata-con-nav .content-area {
		float: none;
		order: 2;
		/* ⚠️ BASE 0, no `auto`. Con `flex: 1 1 auto` la base es el ancho de
		   CONTENIDO, y junto a `flex-wrap: wrap` basta con que la rejilla sea
		   ancha para que el catalogo entero salte a una fila propia, debajo de
		   la barra: la pagina se veia en blanco. Paso en «Energia solar» al
		   ponerle 3 columnas, y no en las demas, por eso costo verlo. */
		flex: 1 1 0;
		width: auto;
		/* sin esto la rejilla de dentro no puede encoger y desborda */
		min-width: 0;
		/* ⚠️ Storefront le deja 67 px de margen derecho, el canalon del layout
		   de floats. Con flex ya no pinta nada y se comia ancho del catalogo. */
		margin-right: 0;
		/* esta es toda la separacion entre la barra y el catalogo */
		margin-left: 40px;
	}

	.sata-con-nav .site-main { padding-right: 0; padding-left: 0; }
}

/* ========================= la rejilla, en CSS Grid ======================== */

/* Se sale de los floats y los nth-child de Storefront, que obligan a fijar el
   numero de columnas. Con auto-fill la rejilla pone las que quepan: 4 en un
   monitor ancho, 3 en un portatil, 2 en tableta. Sin media queries. */
@media (min-width: 768px) {

	ul.products {
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: 2.4em 1.9em;
	}

	/* el clearfix de Storefront se convertiria en dos celdas vacias */
	ul.products::before,
	ul.products::after { content: none !important; }

	ul.products li.product {
		width: auto !important;
		margin: 0 !important;
		float: none !important;
		clear: none !important;
		display: flex;
		flex-direction: column;
	}

	/* el boton de WhatsApp, siempre abajo aunque los titulos midan distinto */
	ul.products li.product > *:last-child { margin-top: auto; }
}

/* ------------------- menos aire muerto sobre el catalogo ----------------- */

@media (min-width: 768px) {
	.sata-con-nav .site-content { padding-top: 2.4em; }
	.sata-con-nav .woocommerce-products-header { margin-bottom: .9em; }
	.sata-con-nav .woocommerce-products-header__title {
		font-size: 1.75rem;
		margin-bottom: .35em;
		letter-spacing: -.01em;
	}
}

/* ---------------------------- las tarjetas ------------------------------- */

/* Toque "tecnologico" sin salirse de Storefront: la foto se acerca un poco y
   la tarjeta se levanta al pasar por encima. */
ul.products li.product { transition: transform .2s ease; }
ul.products li.product img { transition: transform .35s ease; border-radius: 10px; }
ul.products li.product:hover { transform: translateY(-3px); }
ul.products li.product:hover img { transform: scale(1.035); }