/* ══════════════════════════════════════════════════════════════════
   Página de categoría (archive-product) — orden nuevo, tipografía
   igualada al cuerpo, anchos unificados y sin desbordamiento móvil.
   Todo el contenido (entradilla, subcategorías, rejilla, paginación,
   FAQ y texto largo) vive en un único contenedor .lic-cat-main.
   ══════════════════════════════════════════════════════════════════ */

/* La página ocupa el 80% del ancho de pantalla, centrada y con tope.
   .lic-cat-page.container gana en especificidad a .container y a su @media de 92%. */
.lic-cat-page.container {
	width: 80%;
	max-width: 1400px;
	margin: 0 auto;
	padding-left: 0;
	padding-right: 0;
	padding-top: 34px;
	padding-bottom: 60px;
}

/* Acentos de marca DENTRO de la categoría en el VERDE del logo (turquesa #1090A0),
   en vez del magenta/fucsia. Se redefine la variable, así que todos los elementos
   que usan var(--magenta)/var(--primary) (botones "Personalizar", swatch activo,
   filtros activos, "+" del FAQ, enlaces, paginación…) quedan en verde. El header y
   el pie NO se tocan (están fuera de .lic-cat-page). */
.lic-cat-page {
	--magenta: #1090A0;
	--magenta-hover: #0C757F;
	--magenta-rgb: 16, 144, 160;
	--primary: #1090A0;
}

/* Contenedor único: TODO (entradilla, subcategorías, rejilla, paginación, FAQ y
   texto largo) al mismo ancho e izquierda, rellenando el 90%. */
.lic-cat-main {
	width: 100%;
	max-width: 100%;
	margin: 0;
	box-sizing: border-box;
	color: var(--dark, #1A1A2E);
	font-size: 16px;
	line-height: 1.7;
}

.lic-cat-h1 {
	font-size: 40px;
	line-height: 1.1;
	margin: 0 0 14px;
	color: var(--tinta, #1A1A2E);
}

/* Entradilla: 1-2 frases, tamaño de cuerpo, color de texto normal (AA sobre blanco) */
.lic-cat-intro { margin: 0 0 24px; }
.lic-cat-intro p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--dark, #1A1A2E);
	margin: 0;
	max-width: 820px;      /* legible, alineado a la izquierda (mismo borde que la rejilla) */
}

/* Enlaces a subcategorías: chips */
.lic-cat-subcats { margin: 0 0 30px; }
.lic-cat-subcats ul {
	display: flex; flex-wrap: wrap; gap: 10px;
	list-style: none; margin: 0; padding: 0;
}
.lic-cat-subcats a {
	display: inline-block; padding: 8px 16px;
	border: 1px solid var(--border, #E3E4EC); border-radius: 50px;
	font-size: 14px; font-weight: 600; color: var(--dark, #1A1A2E);
	background: #fff; text-decoration: none; transition: border-color .18s ease, color .18s ease;
}
.lic-cat-subcats a:hover { border-color: var(--magenta, #1090A0); color: var(--magenta, #1090A0); }

/* Paginación */
.lic-cat-pagination { margin: 40px 0 0; }
.lic-cat-pagination .woocommerce-pagination ul {
	display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
	list-style: none; margin: 0; padding: 0;
}
.lic-cat-pagination .woocommerce-pagination li { margin: 0; }
.lic-cat-pagination .woocommerce-pagination a,
.lic-cat-pagination .woocommerce-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid var(--border, #E3E4EC); border-radius: 8px;
	color: var(--dark, #1A1A2E); font-weight: 600; text-decoration: none;
}
.lic-cat-pagination .woocommerce-pagination .current {
	background: var(--magenta, #1090A0); color: #fff; border-color: var(--magenta, #1090A0);
}

/* FAQ (acordeón) y texto largo — AL FINAL de la página */
.lic-faq-cat { margin-top: 54px; }
/* El acordeón se centra a 840px en la página de FAQ suelta; aquí va a la izquierda,
   al mismo ancho que el resto del contenido (si no, queda desalineado). */
.lic-faq-cat .faq-accordion-wrapper { max-width: 100%; margin: 0; }

/* Tipografía de las RESPUESTAS del acordeón: igualar al cuerpo estándar
   (antes 15px y color muted; ahora 16px y color de texto normal → contraste AA). */
.faq-answer { color: var(--dark, #1A1A2E) !important; font-size: 16px !important; line-height: 1.7 !important; }
.faq-answer p { color: var(--dark, #1A1A2E); }

.lic-cat-longtext {
	margin-top: 44px;
	font-size: 16px; line-height: 1.7; color: var(--dark, #1A1A2E);
	max-width: 900px;
}
.lic-cat-longtext h2, .lic-cat-longtext h3 {
	font-size: 22px; line-height: 1.25; margin: 30px 0 12px; color: var(--dark, #1A1A2E);
}
.lic-cat-longtext p { margin: 0 0 16px; }
.lic-cat-longtext a { color: var(--magenta, #1090A0); }

/* ── Sin desbordamiento horizontal en móvil ── */
.lic-cat-main { max-width: 100%; }
.lic-cat-intro p, .lic-cat-longtext, .lic-faq-cat, .lic-cat-subcats a {
	overflow-wrap: anywhere; word-break: break-word;
}
.breadcrumbs-wrapper { flex-wrap: wrap; row-gap: 4px; }

@media (max-width: 782px) {
	.lic-cat-page { padding-top: 20px; }
	.lic-cat-h1 { font-size: 28px; }
	.lic-cat-intro p { font-size: 16px; }
	.lic-cat-intro { margin-bottom: 18px; }
	.lic-cat-subcats { margin-bottom: 20px; }
}

/* Nada desborda a la derecha: los hijos del grid pueden encogerse (min-width:0). */
.lic-cat-main, .shop-with-filters, .shop-grid-col, .woocommerce-products-grid { min-width: 0; max-width: 100%; }
.shop-with-filters .products.columns-4 { min-width: 0; }
.shop-with-filters .products.columns-4 > li { min-width: 0; }
.product-card-body, .woocommerce-loop-product__title { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.lic-cat-main .product-card-img { width: 100%; height: auto; display: block; }
.lic-cat-main .product-card-swatches { flex-wrap: wrap; }

/* Red de seguridad: la página de categoría nunca provoca scroll horizontal.
   (Esta hoja solo carga en categorías/tienda, así que no afecta a otras páginas.
   'clip' no crea contenedor de scroll, por lo que no rompe el position:sticky de los filtros.) */
html, body { overflow-x: clip; max-width: 100%; }
.lic-cat-page { overflow-x: clip; }

@media (max-width: 480px) {
	/* Móvil: una sola columna (alineado con el breakpoint base del tema). */
	.lic-cat-page .shop-with-filters .products.columns-4,
	.lic-cat-page .products.columns-4 { grid-template-columns: 1fr !important; }
}

/* Móvil (09-10-2026): las 13 subcategorías ocupaban 6 filas y el primer producto
   quedaba en el px 862, fuera de la primera pantalla. Ahora van en una fila que se
   desliza con el dedo (hasta el borde derecho) y los productos suben ~300 px. */
@media (max-width: 781px) {
    .lic-cat-subcats ul {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-right: -45px !important;
        padding-right: 45px !important;
        padding-bottom: 4px;
    }
    .lic-cat-subcats ul::-webkit-scrollbar { display: none; }
    .lic-cat-subcats li { flex: 0 0 auto; }
}