/*
 * SGM Shop Hero — Estilos del banner mayorista en la tienda
 *
 * Cargado SOLO para usuarios con rol 'mayorista' en is_shop() / is_product_taxonomy().
 * Guests y retail nunca ven este CSS.
 *
 * Tokens del sitio (mismos que sgm-landing.css):
 *   Primary    : #493936  (marrón oscuro)
 *   Secondary  : #D4C9B7  (beige cálido)
 *   Body Text  : #866B5A
 *   Crema      : #F1EBE0
 *   Light bg   : #F3EFE9
 *
 * Tipografía: Questrial (titulares) + Roboto (cuerpo)
 */

/* ── Hero — contenedor full-width ────────────────────────────────────────── */
.sgm-shop-hero {
	width: 100%;
	min-height: 300px;              /* imagen panorámica se luce en desktop */
	display: flex;
	align-items: center;            /* texto centrado verticalmente */
	background-color: #493936;      /* fallback si la imagen no carga */
	background-image: url('../img/sasha-shop-hero.jpg');
	background-size: cover;
	background-position: center;
	color: #F1EBE0;                 /* crema sobre oscuro */
	padding: 2.5rem 1.5rem;
	margin-bottom: 2rem;            /* separación visual del grid */
	box-sizing: border-box;
	position: relative;             /* contexto para el ::before del velo */
}

/* ── Velo oscuro — gradiente más intenso a la izquierda donde está el texto */
.sgm-shop-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(15, 8, 6, 0.82) 0%,
		rgba(15, 8, 6, 0.72) 35%,
		rgba(15, 8, 6, 0.48) 65%,
		rgba(15, 8, 6, 0.30) 100%
	);
	pointer-events: none;
}

/* ── Inner — max-width consistente con el contenedor de la tienda ──────── */
.sgm-shop-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;             /* queda sobre el ::before del velo */
	z-index: 1;
}

/* ── Título ──────────────────────────────────────────────────────────────── */
.sgm-shop-hero__title {
	font-family: 'Questrial', sans-serif;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 400;                /* Questrial es display — no bold */
	line-height: 1.2;
	color: #F1EBE0;
	margin: 0;
	padding: 0;
	letter-spacing: 0.01em;
}

/* ── Bajada ──────────────────────────────────────────────────────────────── */
.sgm-shop-hero__subtitle {
	font-family: 'Roboto', sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.5;
	color: #D4C9B7;                 /* Secondary — beige cálido */
	margin: 0;
	padding: 0;
}

/* ── Nota de mínimo de compra dentro del hero ────────────────────────────── */
.sgm-shop-hero__min {
	font-family: 'Roboto', sans-serif;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.45;
	color: #F1EBE0;                 /* crema, un poco más fuerte que el subtítulo */
	margin: 0.35rem 0 0;
	padding: 0.45rem 0.7rem;
	background: rgba(212, 201, 183, 0.16);  /* Secondary translúcido */
	border-left: 3px solid #D4C9B7;
	border-radius: 4px;
	align-self: flex-start;
}

/* ── Sufijo " + IVA" en los precios mayoristas (shop loop) ───────────────── */
.sgm-iva-suffix {
	font-size: 0.78em;
	font-weight: 500;
	color: #866B5A;                 /* Body text del sitio */
	white-space: nowrap;
}

/* ── Responsive — mobile (≤ 480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
	.sgm-shop-hero {
		min-height: 200px;          /* imagen visible en mobile sin ocupar demasiado */
		padding: 1.75rem 1rem;
		margin-bottom: 1.25rem;
	}

	.sgm-shop-hero__title {
		font-size: 1.4rem;
	}

	.sgm-shop-hero__subtitle {
		font-size: 0.875rem;
	}

	.sgm-shop-hero__min {
		font-size: 0.85rem;
	}
}

/* ── Sin overflow horizontal en cualquier viewport ───────────────────────── */
.sgm-shop-hero {
	overflow-x: hidden;
}

/*
 * ── Reducción del hueco superior del archive (Elementor Theme Builder) ───────
 *
 * El archive de /shop tiene un primer container de Elementor que actúa como
 * hero transparente vacío (~612px de alto). Para guests y retail ese espacio
 * es el diseño intencionado. Para mayoristas con nuestro hero ya presente,
 * ese hueco queda como espacio muerto encima del grid.
 *
 * Selector: body.sgm-mayorista-shop (clase que PHP agrega solo para mayoristas
 * en is_shop() / is_product_taxonomy()) → primer container del archive.
 *
 * Usamos el atributo data-elementor-location="archive" que Elementor agrega
 * al wrapper del archive (más estable que la clase elementor-location-archive).
 * El primer hijo directo con clase e-con es el container del hero vacío.
 *
 * !important necesario para ganar sobre los estilos inline de Elementor.
 * NO afecta guests ni retail (body sin sgm-mayorista-shop).
 */
body.sgm-mayorista-shop [data-elementor-location="archive"] > .e-con:first-child,
body.sgm-mayorista-shop .elementor-location-archive > .elementor-element:first-child {
	display: none !important;
}

/*
 * El tercer container (index 2) del archive tiene padding-top: 144px propio.
 * Lo reducimos para que el grid quede a una distancia razonable del hero.
 * Solo para mayoristas.
 */
body.sgm-mayorista-shop [data-elementor-location="archive"] > .e-con:last-child,
body.sgm-mayorista-shop .elementor-location-archive > .elementor-element:last-child {
	padding-top: 32px !important;
}

/*
 * ── Toggle de vista de catálogo (mayoristas) ─────────────────────────────────
 *
 * Inyectado por JS (class-sgm-catalog-toggle.php) a la IZQUIERDA del dropdown de
 * orden (.woocommerce-ordering) como hermano anterior. El JS marca el contenedor
 * padre con .sgm-has-catalog-toggle para alinear toggle + orden en una fila.
 *
 * Solo se carga para mayoristas en shop/taxonomía (gate en PHP) — sigue siendo
 * el único elemento de esta fila exclusivo del rol mayorista.
 *
 * Iter 2 (2026-07-13, feedback visual Yago): los chips de categoría
 * (.sgm-model-filter, ver más abajo) ahora comparten ESTA MISMA fila en vez de
 * una fila propia debajo — orden visual: switch (order 0, solo mayorista) →
 * chips (order 1, TODOS los roles) → dropdown de orden (order 2).
 *
 * Paleta del shop mayorista:
 *   Tinta    : #2B2521
 *   Acento   : #C6855F
 *   Crema    : #F1EBE0 / superficie clara
 *   Beige    : #D4C9B7
 */

/* El contenedor del dropdown de orden pasa a flex para alinear ambos en fila. */
.sgm-has-catalog-toggle {
	display: flex;
	align-items: center;
	/* Iter 2b (2026-07-14, feedback Yago sobre 1920): todo a la IZQUIERDA
	   (switch → chips); el dropdown de orden se ancla a la DERECHA con
	   margin-left:auto. space-between rompía a 1920 (chips a la derecha y
	   ordering cayéndose de línea). */
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
}

/* El switch queda primero en la fila (order 0, valor por defecto). */
.sgm-has-catalog-toggle .sgm-catalog-toggle {
	order: 0;
}

/* El dropdown de orden queda al final de la fila, ANCLADO A LA DERECHA. */
.sgm-has-catalog-toggle .woocommerce-ordering {
	margin: 0 0 0 auto;
	float: none;
	order: 2;
}

.sgm-catalog-toggle {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	border: 1px solid #D4C9B7;
	border-radius: 999px;
	overflow: hidden;
	background: #F1EBE0;
	font-family: 'Roboto', sans-serif;
	line-height: 1.2;
	max-width: 100%;
}

.sgm-catalog-toggle__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.45rem 0.95rem;
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: none;
	color: #2B2521;
	background: transparent;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sgm-catalog-toggle__opt:hover,
.sgm-catalog-toggle__opt:focus {
	background: rgba(198, 133, 95, 0.14);   /* acento translúcido */
	color: #2B2521;
}

.sgm-catalog-toggle__opt.is-active {
	background: #2B2521;                      /* tinta */
	color: #F1EBE0;                           /* crema */
}

.sgm-catalog-toggle__opt.is-active:hover,
.sgm-catalog-toggle__opt.is-active:focus {
	background: #2B2521;
	color: #F1EBE0;
}

/* Separador sutil entre las dos opciones cuando ninguna activa las cubre. */
.sgm-catalog-toggle__opt + .sgm-catalog-toggle__opt {
	border-left: 1px solid #D4C9B7;
}

/*
 * Fix ancho grilla — la clase .sgm-has-catalog-toggle se aplica al div.woocommerce
 * que contiene TANTO la fila toggle+ordering COMO ul.products y p.woocommerce-result-count.
 * Con display:flex esos elementos se convierten en ítems flex en la misma fila.
 * Solución: forzar que la grilla (y el result-count) ocupen el 100% del ancho
 * en su propia fila, con order alto para quedar debajo del toggle+ordering.
 * El toggle y el ordering quedan flex:0 para no crecer.
 */
.sgm-has-catalog-toggle ul.products {
	width: 100%;
	flex-basis: 100%;
	order: 10;   /* cae después del toggle (order:0) y del ordering (order:0) */
}

.sgm-has-catalog-toggle p.woocommerce-result-count {
	width: 100%;
	flex-basis: 100%;
	order: 9;    /* result-count justo antes de la grilla */
	margin: 0 0 0.5rem;
}

/* Paginación también al fondo, después de la grilla */
.sgm-has-catalog-toggle nav.woocommerce-pagination {
	width: 100%;
	flex-basis: 100%;
	order: 11;
}

/* Notices wrapper no crece ni afecta el layout.
   Iter 2b (2026-07-14): el theme lo capea con max-width:1200 → a 1920 dejaba
   lugar en su línea flex y los chips se acomodaban a su lado (rotos a la
   derecha). max-width:none + order:-1 = fila propia SIEMPRE, a todo ancho. */
.sgm-has-catalog-toggle .woocommerce-notices-wrapper {
	width: 100%;
	max-width: none;
	flex-basis: 100%;
	order: -1;
}

/* Toggle y ordering no crecen — ocupan solo su ancho natural */
.sgm-has-catalog-toggle .sgm-catalog-toggle,
.sgm-has-catalog-toggle .woocommerce-ordering {
	flex: 0 0 auto;
}

/* ── Responsive — mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.sgm-has-catalog-toggle {
		justify-content: flex-start;
	}

	.sgm-catalog-toggle {
		width: 100%;
		flex-basis: 100%; /* en mobile el toggle ocupa fila propia */
		order: 0;
	}

	.sgm-catalog-toggle__opt {
		flex: 1 1 0;
		padding: 0.5rem 0.5rem;
		font-size: 0.8rem;
	}

	.sgm-has-catalog-toggle .woocommerce-ordering {
		width: 100%;
		flex-basis: 100%; /* en mobile el ordering ocupa fila propia */
		order: 1;
	}

	/* En mobile la grilla sigue full-width, después de toggle y ordering */
	.sgm-has-catalog-toggle ul.products {
		order: 10;
	}
}

/*
 * ── Filtro por categoría de modelo (chips + select mobile) ──────────────────
 *
 * Inyectado por JS (class-sgm-shop-filters.php) como HIJO DIRECTO del mismo
 * contenedor flex que el toggle (mayorista) + el dropdown de orden (marcado
 * .sgm-has-catalog-toggle).
 *
 * Iter 2 (2026-07-13, feedback visual Yago): los chips ahora viven EN LA MISMA
 * FILA que el switch/orden (antes: fila propia debajo, order 5, full-width).
 * `order: 1` los ubica entre el switch (order 0, si existe) y el dropdown de
 * orden (order 2) — funciona igual con o sin switch (retail/guest no tienen
 * switch, así que los chips quedan primeros en la fila). `flex: 1 1 auto` +
 * `min-width: 0` permiten que el item se achique y que su contenido interno
 * (.sgm-model-filter__chips, con flex-wrap) envuelva en vez de desbordar en
 * anchos intermedios (tablet). El filtro ahora se encola para TODOS los
 * usuarios (mayorista, retail, guest) — ver class-sgm-shop-filters.php.
 *
 * Desktop (> 600px): fila de chips horizontal en línea con switch/orden,
 * <select> oculto, flex-wrap para no desbordar en anchos intermedios.
 * Mobile (≤ 600px): chips ocultas, <select> nativo full-width en su propia fila
 * (ver media query más abajo, que restaura el ancho completo).
 */
.sgm-model-filter {
	order: 1;
	/* Iter 2b (2026-07-14): sin grow — los chips abrazan la izquierda pegados
	   al switch (o al borde izquierdo en retail); el que se ancla a la derecha
	   es el dropdown de orden (margin-left:auto, ver arriba). */
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
}

.sgm-model-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sgm-model-filter__select {
	display: none;
}

.sgm-model-filter__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem 0.85rem;
	border: 1px solid #D4C9B7;
	border-radius: 999px;
	background: #F1EBE0;
	color: #2B2521;
	font-family: 'Roboto', sans-serif;
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sgm-model-filter__chip:hover,
.sgm-model-filter__chip:focus {
	background: rgba(198, 133, 95, 0.14); /* acento translúcido */
	border-color: #C6855F;
	color: #2B2521;
}

.sgm-model-filter__chip.is-active {
	background: #C6855F; /* acento */
	border-color: #C6855F;
	color: #2B2521;
}

.sgm-model-filter__chip.is-active:hover,
.sgm-model-filter__chip.is-active:focus {
	background: #C6855F;
	color: #2B2521;
}

/* En mobile: chips ocultas, select nativo full-width visible (retail también) */
@media (max-width: 600px) {
	.sgm-model-filter {
		width: 100%;
		flex-basis: 100%;
		order: 2; /* después de toggle (0, si existe) y ordering (1), en su propia fila */
		margin: 0.25rem 0 0.5rem;
	}

	.sgm-model-filter__chips {
		display: none;
	}

	.sgm-model-filter__select {
		display: block;
		width: 100%;
		padding: 0.55rem 0.75rem;
		border: 1px solid #D4C9B7;
		border-radius: 8px;
		background: #F1EBE0;
		color: #2B2521;
		font-family: 'Roboto', sans-serif;
		font-size: 0.9rem;
		-webkit-appearance: none;
		appearance: none;
	}
}

/*
 * ── Transición suave al cambiar de categoría sin recarga (Iter 2, 2026-07-13) ──
 *
 * Aplicada dinámicamente por JS (class-sgm-shop-filters.php: fetch + swap sin
 * navegación) sobre ul.products / p.woocommerce-result-count y los nodos que
 * los reemplazan tras cada cambio de chip/select. El propio JS ya chequea
 * `prefers-reduced-motion` y omite estas clases si el usuario lo pidió — este
 * bloque es un refuerzo a nivel CSS (belt-and-suspenders de accesibilidad).
 */
.sgm-shop-fade {
	transition: opacity 0.2s ease;
}

.sgm-shop-fade.sgm-fade-hidden {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sgm-shop-fade {
		transition: none !important;
	}
}

/*
 * ── Feedback inmediato de carga (Iter 2c, 2026-07-14) ───────────────────────
 *
 * Aplicado por JS (class-sgm-shop-filters.php) sobre .sgm-model-filter AL
 * TOQUE del click/change, ANTES de que el fetch resuelva — cursor progress +
 * chips atenuados mientras se espera la respuesta (o el delay artificial de
 * cache-hit, que es ~0). No usa pointer-events:none a propósito: un click
 * sobre otro chip mientras uno está "cargando" sigue funcionando (la
 * respuesta vieja se descarta sola, ver sgmRequestSeq en el JS).
 */
.sgm-model-filter.is-loading {
	cursor: progress;
}

.sgm-model-filter.is-loading .sgm-model-filter__chip {
	opacity: 0.7;
	transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.sgm-model-filter.is-loading .sgm-model-filter__chip {
		transition: none;
	}
}

/*
 * ── Filtro de categoría en /tienda-online (Iter tienda-online-chips, 2026-07-15) ──
 *
 * Reusa el MISMO markup/clases .sgm-model-filter* del shop (class-sgm-tienda-filters.php).
 * En /shop estas reglas viven dentro de .sgm-has-catalog-toggle (flex row junto al
 * switch/orden); en /tienda-online no existe ese contenedor flex — el filtro se
 * inserta como bloque propio arriba de la sección "todos los productos", así que
 * necesita su propio margen inferior. Combinado en el MISMO div vía la clase
 * adicional .sgm-tienda-filters (no reemplaza nada de lo existente).
 *
 * GOTCHA verificado con Playwright (getComputedStyle): el contenedor Elementor
 * que envuelve el widget "todos" es un flex COLUMN (`display:flex;
 * flex-direction:column`) con el widget en `order:0` (default de Elementor).
 * `.sgm-model-filter` trae `order:1` heredado de shop (donde ese valor lo
 * ubica ENTRE el switch y el dropdown de orden en una fila) — en un
 * contenedor de COLUMNA, `order:1` > `order:0` empuja el filtro DEBAJO del
 * grid en vez de arriba, aunque en el DOM esté insertado ANTES. El selector
 * compuesto de abajo (misma especificidad que .sgm-tienda-filters solo, pero
 * más específico que .sgm-model-filter solo) lo resetea a 0 SOLO en este
 * contexto — no toca el comportamiento en /shop.
 */
.sgm-tienda-filters.sgm-model-filter {
	order: 0;
	flex: initial;
	margin: 0 0 1.5rem;
}

.sgm-tienda-filters .sgm-model-filter__chips {
	margin: 0;
}

@media (max-width: 600px) {
	.sgm-tienda-filters.sgm-model-filter {
		margin: 0 0 1rem;
	}

	/* Fuera del contexto flex de .sgm-has-catalog-toggle, el <select> mobile
	   necesita recuperar su regla de ancho/orden propia (la de shop depende de
	   ser hijo flex de esa fila). */
	.sgm-tienda-filters .sgm-model-filter {
		width: 100%;
	}
}