/* =====================================================================
   LIC_MOVIL_FASE1 — Correcciones de móvil (23-09-2026)
   Medido en 360 × 740 px sobre laimprentadelascamisetas.com.
   Solo toca móvil (≤ 767 px / ≤ 600 px). En escritorio no cambia nada.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. HOME · El titular del héroe se sale de la pantalla
   El H1 está a 45 px fijos: su texto necesita 440 px dentro de una caja
   de 250 px, así que "Tu camiseta." y "Sin complicaciones." se cortan.
   Tipografía fluida + menos padding lateral para ganar ancho útil.
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
	.lic-portada-copy {
		padding: 24px 18px;
	}

	.lic-portada-hero .lic-portada-copy h1,
	.lic-portada-copy h1 {
		font-size: clamp(26px, 7.8vw, 40px) !important;
		line-height: 1.12;
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	/* Cada línea del titular es un <span> con su propio font-size (56 px y
	   47 px) y white-space:nowrap, que es lo que impedía que cupiera. */
	.lic-portada-hero .lic-portada-copy h1 span,
	.lic-portada-copy h1 span {
		font-size: clamp(25px, 8vw, 42px) !important;
		white-space: normal !important;
		line-height: 1.12;
	}

	/* Botones del héroe a ancho completo: hoy el primario llega a 355 px
	   de 360 y queda pegado al borde. */
	.lic-portada-hero .lic-portada-button,
	.lic-portada-button {
		width: 100%;
		justify-content: center;
	}

	/* Muestrario de color del héroe: 31 × 31 px es demasiado pequeño para
	   el dedo (mínimo recomendado 40 px). */
	.lic-portada-hero .lic-portada-swatch,
	.lic-portada-swatch {
		width: 40px !important;
		height: 40px !important;
	}
}

/* ---------------------------------------------------------------------
   2. CATÁLOGO · Una sola columna con tarjetas de 581 px
   136 productos × 597 px = unos 81.000 px de scroll, y solo se ve un
   producto por pantalla. Se pasa a 2 columnas con tarjeta compacta.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* lic-category.css fuerza 1 columna en <=480 px con !important y mayor
	   especificidad (.lic-cat-page .products.columns-4), así que hay que
	   igualarla para poder pasar a 2 columnas. */
	ul.products,
	.lic-cat-page .products.columns-4,
	.lic-cat-page .shop-with-filters .products.columns-4,
	.shop-with-filters .products.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}

	ul.products li.product .product-image-wrapper {
		aspect-ratio: 1 / 1;
		height: auto;
	}

	ul.products li.product .product-image-wrapper img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* El título ocupaba 109 px. Dos líneas como máximo. */
	ul.products li.product .woocommerce-loop-product__title {
		font-size: 14px;
		line-height: 1.25;
		height: auto;
		min-height: 0;
		margin: 8px 0 4px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	ul.products li.product .product-card-footer {
		flex-wrap: wrap;
		gap: 6px;
	}

	/* El CTA de la tarjeta, a ancho completo y con altura táctil. */
	ul.products li.product .product-card-footer a,
	ul.products li.product .product-card-footer .button {
		width: 100%;
		min-height: 40px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------
   3. FICHA DE PRODUCTO
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* La columna de la ficha (galería, miniaturas y los 90 swatches de
	   color) mide 392 px dentro de un contenedor de 360: los items del
	   grid no se encogen porque su contenido mínimo manda. min-width:0 es
	   lo que permite que el grid los comprima. */
	.lidc-product-grid {
		grid-template-columns: 1fr !important;
	}

	.lidc-product-grid > * {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.lidc-gallery,
	.lidc-main-img-wrap,
	.lidc-thumbs,
	.lidc-swatches {
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.lidc-main-img {
		max-width: 100%;
		height: auto;
	}

	.lidc-thumbs {
		flex-wrap: wrap;
	}

	/* El zoom de WooCommerce inyecta una imagen de 1602 px que se sale de
	   la pantalla; en táctil no aporta nada (se hace pinch-zoom). */
	.zoomImg {
		display: none !important;
	}

	/* Los +/− de la tabla de tallas miden 36 × 20 px: no se pueden pulsar
	   con el dedo. */
	.lidc-qty-minus,
	.lidc-qty-plus,
	.lidc-qty-btn {
		min-width: 40px;
		min-height: 40px;
	}
}

/* ---------------------------------------------------------------------
   4. LEGIBILIDAD Y ZONAS TÁCTILES GENERALES
   12 px es demasiado pequeño en móvil; y hay enlaces de 17-26 px de alto.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	.mob-nav__group-title,
	.lic-catcard__from,
	.lic-footer small {
		font-size: 14px;
	}

	.lic-catgrid + .lic-section__link,
	a.lic-section__link,
	.lic-seemore {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* ---------------------------------------------------------------------
   5. PIE · Los enlaces legales se salían de la pantalla en una sola fila.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	.footer-legal-links {
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 14px;
		max-width: 100%;
	}
}