/* Prolift · W12 (25-oct): diseño de la revisión final (Prolift-KB/Web/revision-final-W12/diseno.md y marketing.md).
   Solo tokens de la guía §7: tinta #1E2124, tinta-2 #4B5259, línea #E2DFD9, línea fuerte #7E858C, superficie #F4F3F0,
   rojo #D02F00 solo para avanzar. Escala 13 · 14 · 16 · 18 · 22 · 30 · 38 (móvil 20 · 24 · 27). Toques ≥ 44 px.
   Va la última de las hojas de la casa (OCMOD «Prolift · W12 vista…», que se ordena detrás): a igual peso, gana esta. */

/* A7 · CLS en el ordenador: el user_js v9 del tema quita width/height al logo al cargar; si la imagen aún no ha llegado,
   el logo mide 0 un fotograma y el buscador salta 187 px a la izquierda y vuelve (0,0061 + 0,0061 en cada página).
   Con la proporción del logo (1.600 × 600) el hueco existe desde el principio. */
html body header .header-logo__img { aspect-ratio: 8 / 3; }

/* A8 · rótulo de grupo de la tabla de familia: tinta y escala (era #1F2328 y 17 px en el móvil); enlaza su subfamilia */
html body #content .pl-tabla tr.pl-tabla__grupo th { color: #1E2124; font-size: 16px; font-weight: 700; border-top: 1px solid #E2DFD9; border-bottom: 2px solid #1E2124; }
html body #content .pl-tabla tr.pl-tabla__grupo th a { color: #1E2124; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }

/* M8 · tabla de familia a 1.440 o más: «Producto» la columna más ancha y el nombre a 16 px (hoy Producto 299,
   Referencia 244, Plazo 270). Por debajo manda el arreglo A2 de la 1.4 (la tabla cabe entera a 1.280 y 1.366) */
@media (min-width: 1440px) {
	/* «Copiar» con el icono solo (como de 992 a 1.439): con el texto pisaba «En stock» de la columna de al lado */
	html body #content .pl-tabla .c-ref .pl-copiar__txt { display: none; }
	html body #content .pl-tabla .c-ref .pl-copiar { min-width: 44px; min-height: 44px; justify-content: center; }
	html body #content table.pl-tabla { table-layout: fixed; width: 100%; }
	html body #content table.pl-tabla th.c-foto { width: 84px; }
	html body #content table.pl-tabla th.c-nom { width: 40%; }
	/* 1.13 (W20, maquetación M13 de la pasada del 25-oct 23:32): con el lateral a la vista la columna medía 184 px y la
	   referencia (134) más «Copiar» (44) se salían a «Plazo»; 20/12 y, si una referencia descriptiva no cabe, parte */
	/* 1.14: con el Plazo al 12 % «En stock (algunas configuraciones)» bajaba y lo pisaban «Ver precio» y «Elegir»: 18/14 */
	html body #content table.pl-tabla th.c-ref { width: 18%; }
	html body #content table.pl-tabla th.c-plazo { width: 14%; }
	html body #content .pl-tabla td.c-ref { white-space: normal; }
	html body #content .pl-tabla td.c-ref .pl-cod { overflow-wrap: anywhere; white-space: normal; }
	html body #content .pl-tabla a.pl-tabla__nom { font-size: 16px; }
}

/* M6 · toques de 44 px. Nombre de la fila: la zona de toque es la celda entera, sin cambiar el alto de la fila (fila
   162); lo que va dentro de la celda y se pulsa por sí solo, encima */
@media (min-width: 768px) { /* en el móvil la zona de toque ya la da la 1.6 de vista-m12 (la fila es la referencia) */
	html body #content .pl-tabla td.c-nom { position: relative; }
	html body #content .pl-tabla a.pl-tabla__nom::after { content: ""; position: absolute; inset: 0; }
	html body #content .pl-tabla td.c-nom a:not(.pl-tabla__nom), html body #content .pl-tabla td.c-nom button { position: relative; z-index: 1; }
}
/* fila 162 (≤ 120 px por fila a 390): el estado en una línea, cortado con «…» (salía en dos y la fila medía 128) */
@media (max-width: 767px) {
	html body #content .pl-tabla .c-plazo .pl-estado { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
}
#content .pl-btn { min-height: 44px; }
header .search-btn-clear, .pl-fija .search-btn-clear { width: 44px; min-width: 44px; }
.pl-mapa li > a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
/* marketing B3: «Ver precio» de texto en la fila y un aviso en el resumen, con la letra del cuerpo (16 px) */
html body #content .pl-tabla a.pl-tabla__verprecio { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 700; color: #1E2124; text-decoration: underline; text-underline-offset: 3px; }
/* 1.16-1.17 (W21, B1): «Acceder para ver precio» (el texto del botón de la ficha) es más largo que «Ver precio»: en la columna
   de precio (nowrap y a la derecha) se salía hacia «Plazo» a 1.440 (maquetación M13, cat2). Parte en dos líneas */
@media (min-width: 768px) {
	html body #content .pl-tabla td.c-precio a.pl-tabla__verprecio { white-space: normal; text-align: right; justify-content: flex-end; max-width: 10em; }
	/* y el estado largo («En stock (algunas configuraciones)», 246 px en nowrap) parte dentro de su columna (151 px a 1.440) */
	html body #content .pl-tabla td.c-plazo .pl-estado { white-space: normal; }
}
html body .pl-cat-resumen__acceso { font-size: 16px; color: #4B5259; }
html body .pl-cat-resumen__acceso a { display: inline-flex; align-items: center; min-height: 44px; color: #1E2124; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 991px) { .pl-pie a { min-width: 44px; } }

/* M9 · categoría en el móvil: subfamilias y una sola línea con «Tabla / Cuadrícula» (dos iconos de 44 px) y «Ordenar»;
   «Mostrar» fuera (el primer producto entra en la primera pantalla, por encima de la barra de abajo) */
@media (max-width: 767px) {
	/* con #content: el tema pone «#content label { display: block }» en el móvil, que ganaba a «.pl-ordenar» */
	html body #content .pl-lista-barra .pl-lista-barra__der { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; width: 100%; }
	html body #content .pl-lista-barra .pl-ordenar { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; }
	html body #content .pl-lista-barra .pl-ordenar + .pl-ordenar { display: none; }
	html body #content .pl-lista-barra .pl-ordenar select { flex: 1 1 auto; min-width: 0; max-width: none; height: 44px; }
	html body #content .pl-lista-barra .pl-vista { display: flex; gap: 4px; flex: none; }
	/* el texto del botón (span .pl-vista__txt) se queda para el lector de pantalla, recortado como «sr-only» */
	html body #content .pl-lista-barra .pl-vista__btn { width: 44px; min-width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
	html body #content .pl-lista-barra .pl-vista__txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	html body #content .pl-lista-barra .pl-vista__btn svg { width: 22px; height: 22px; margin: 0; flex: none; }
}

/* A2 · ficha con variantes en el ordenador: las variantes en dos columnas para que «Añadir a la cesta» se vea sin bajar
   a 1.280 × 800 (fila 64; en la 141 el botón acababa en y = 833). Texto entero: sin cortar ninguna variante */
@media (min-width: 1200px) {
	html body #product-product .product-page__option div[id^="input-option"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
	html body #product-product .product-page__option div[id^="input-option"] > .option__item { display: flex; margin: 0 !important; width: auto; max-width: none; }
	html body #product-product .product-page__option div[id^="input-option"] > .option__item .option__name { flex: 1 1 auto; display: flex; align-items: center; min-height: 44px; margin: 0; padding: 5px 8px !important; font-size: 13px; line-height: 1.3; }
	html body #product-product .product-page__option.option.row { margin-bottom: 4px; }
	html body #product-product .product-page__option .option__group { margin-bottom: 0; }
	html body #product-product .product-page__option .option__group-name { margin-bottom: 6px; }
}
/* la disponibilidad con su plazo, en una pieza (marketing M5): sin partir «En stock» */
#product-product .product-data__item.stock .pl-stock { flex: 0 1 auto; text-align: right; }
@media (min-width: 1200px) {
	/* en una línea: los puntos guía se acortan (en la 141 a 1.280 × 800 la segunda línea dejaba «Añadir» en y = 807) */
	html body #product-product .product-block .product-data__item.stock .product-data__item-div { flex: 1 1 0; min-width: 0; }
	html body #product-product .product-block .product-data__item.stock .pl-stock { white-space: nowrap; }
}
/* B1 · selector alineado con el panel (empezaba 10 px a la izquierda; en el móvil, pegado al borde), opciones con aire
   entre ellas y el borde de la línea fuerte */
html body #product-product .product-page__option.option.row { margin-left: 0; margin-right: 0; }
html body #product-product .option__item input[type="radio"]:not(:checked) + .option__name { border-color: #7E858C; }
@media (max-width: 991px) {
	html body #product-product .product-page__option div[id^="input-option"] { display: grid; gap: 8px; }
	html body #product-product .product-page__option div[id^="input-option"] > .option__item { margin: 0 !important; }
}

/* M7 · ficha en el ordenador: la información y las configuraciones van detrás del panel en el HTML (vista-w12.js) y la
   rejilla las deja en la columna de la izquierda, donde estaban; el panel sigue fijo al bajar */
@media (min-width: 992px) {
	/* columnas como las de user_css-m12 (52/48 hasta 1.439, 58/42 hasta 1.599, 60/40 desde 1.600) */
	html.pl-w12-orden #product-product .product-page > .row { display: grid; grid-template-columns: 52% 48%; grid-template-rows: auto 1fr; align-items: start; }
	html.pl-w12-orden #product-product .product-page > .row::before, html.pl-w12-orden #product-product .product-page > .row::after { content: none; display: none; }
	html.pl-w12-orden #product-product .product-page > .row > .product-page__image { grid-column: 1; grid-row: 1; width: auto; min-width: 0; border-radius: 12px 12px 0 0; padding-bottom: 0; }
	html.pl-w12-orden #product-product .product-page > .row > .product-block { grid-column: 2; grid-row: 1 / span 2; width: auto; min-width: 0; align-self: start; }
	/* la información sigue en la misma caja gris de la galería (una sola caja, como antes) */
	html.pl-w12-orden #product-product .product-page > .row > .pl-w12-izq { grid-column: 1; grid-row: 2; align-self: start; min-width: 0; padding: 0 20px 24px; background: var(--plv-sup, #F4F3F0); border-radius: 0 0 12px 12px; }
	/* los títulos de bloque de la ficha, todos a 22 px (Datos técnicos iba a 18) */
	html body #product-product .pl-info .tab-pane > h2.pl-h2-chico, html body #product-product .pl-info .tab-pane > h2.pl-info__h { font-size: 22px !important; }
}
/* 1.12 (comprobar_m12 A1, 17:40): a 1.280 × 800 «Añadir a la cesta» de la 151 quedaba a 821 de 800 (h1 en dos líneas y
   seis características); con el panel más ancho entre 1.200 y 1.439 sube a 721 (medido inyectando la regla) */
@media (min-width: 1200px) and (max-width: 1439px) {
	html.pl-w12-orden #product-product .product-page > .row { grid-template-columns: 46% 54%; }
}
@media (min-width: 1440px) {
	html.pl-w12-orden #product-product .product-page > .row { grid-template-columns: 58% 42%; }
}
@media (min-width: 1600px) {
	html.pl-w12-orden #product-product .product-page > .row { grid-template-columns: 60% 40%; }
}

/* A1 · página de marca: la lista sale una vez (la tabla de la M1.2); fuera la rejilla y los botones del tema */
#product-manufacturer .products-block, #product-manufacturer .sorts-block { display: none !important; }

/* A5 · menú del móvil: el aspa se ve (la máscara de línea iba sobre un fondo casi transparente del tema) y las pestañas
   tienen zona de toque; M12: los iconos rellenos de la pestaña de contacto, fuera (el texto ya dice qué es) */
@media (max-width: 991px) {
	html body .menu__header .menu-close { background: #fff !important; width: 44px; height: 44px; }
	html body .menu__header .menu__header-title, html body .menu__header .menu__header-title-2 { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
	html body .menu__header [role="tab"]:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
	.main-menu__contacts .main-menu__contacts-icon, .main-menu__contacts i[class*="fa-"] { display: none !important; }
}

/* M12 · la barra fija (fuera de <header>) lleva el buscador clonado: su cámara y su lupa, del juego de línea como en
   la cabecera (eran las de Font Awesome, macizas) */
.pl-fija .header-search__foto > .fa-camera, .pl-fija .header-search__btn > .fa-search {
	display: inline-block; font-size: 0 !important; line-height: 0; vertical-align: middle; background: currentColor;
	-webkit-mask: var(--pl-ico) center / contain no-repeat; mask: var(--pl-ico) center / contain no-repeat;
}
.pl-fija .header-search__foto > .fa-camera { width: 20px; height: 20px; --pl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E"); }
.pl-fija .header-search__btn > .fa-search { width: 18px; height: 18px; --pl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); }

/* M5 · portada con sesión: la franja «Repetir pedido» con su caja, que no se funda con la presentación */
.pl-repetir-banda .pl-repetir { background: #fff; border: 1px solid #E2DFD9; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }

/* M11 · tamaños de la escala: pie y «Catálogo» a 14 px (eran 15), «Preferencias de cookies» a 13 (12,5), migas a 13
   (13,3), contadores de los filtros a 13 (12) y «Seguir comprando» en 700 (600) */
.pl-pie, .pl-pie p, .pl-pie li, .pl-pie a { font-size: 14px; }
html body .breadcrumb > li, html body .breadcrumb > li > a, html body .breadcrumb > li:last-child, html body .breadcrumb > li:last-child > * { font-size: 13px; }
.pl-filtro small { font-size: 13px; opacity: 1; color: #4B5259; }
html body a.pl-exito__seguir { font-weight: 700; }
.pl-nav__boton, .pl-arbol h2, .pl-filtros h2 { font-size: 14px; }

/* B4 · pie: texto sobre tinta con un solo token, el blanco (16,1:1; eran blancos al 86 y al 78 %, fuera de tokens), y
   bordes en tinta-2 (eran blancos al 15 %) */
.pl-pie, .pl-pie p, .pl-pie li, .pl-pie__fin p { color: #fff; }
footer.footer .footer__socials-payments, .pl-pie__fin { border-top-color: #4B5259; }
@media (max-width: 991px) { details.pl-pie__col { border-top-color: #4B5259; } }

/* B5 · los enlaces de texto no se ponen rojos al pasar el ratón (el rojo es para lo que hace avanzar) */
/* (revisor W12, B6: solo enlaces de texto dentro de párrafos y listas, no chips ni estados sobre tinta) */
#content p a:not(.pl-btn):not(.btn):hover, #content li > a:not(.pl-btn):not(.btn):not([class*="pl-"]):hover, .pl-mapa a:hover { color: #1E2124; text-decoration-thickness: 2px; }

/* B10 · un solo estilo de elemento activo en el lateral: «Ascensor» en /ascensor, como las familias (barra entera) */
html body .pl-arbol .pl-arbol__sec a[aria-current] { flex: 1 1 auto; display: flex; min-height: 40px; padding: 4px 8px; border-radius: 6px; background: #1E2124; color: #fff; text-decoration: none; }

/* B11 · foto de familia más pequeña que su tarjeta: a su tamaño, sin ampliar */
.pl-home__familias img { object-fit: scale-down; }

/* Pedido (visto en el pedido de prueba de W12): «Usar dirección existente» y «Añadir nueva dirección» salían cortadas
   («r dirección existente»): el radio del navegador (maquetacion.css lo deja visible) iba encima del texto. La misma
   composición que la casilla (maquetacion.css, label.input con checkbox) */
#content label.input:has(> input[type=radio]) { display: block !important; position: relative !important; padding: 11px 0 11px 34px !important; min-height: 44px; }
/* sin :has() (revisor W12, B7): en el pedido el radio va en div.radio > label.input */
#content div.radio > label.input { display: block !important; position: relative !important; padding: 11px 0 11px 34px !important; min-height: 44px; }
#content label.input > input[type=radio] { position: absolute !important; left: 0 !important; top: 11px !important; margin: 0 !important; width: 20px; height: 20px; }

/* B12 · «Solo en stock»: zona de toque de 44 px (era 40) */
.pl-filtros .pl-check { min-height: 44px; }

/* B13 · Quiénes somos y Envíos y pagos: el primer párrafo tan ancho como los demás (760 frente a 885 px) */
.article_description.pl-lectura > p:first-of-type { max-width: none; }

/* B2 · ficha sin foto: las etiquetas, dentro del recuadro «Foto en preparación». El recuadro mide como mucho 640 px y va
   centrado en su caja: la etiqueta, a 12 px de SU borde (antes, a 12 px de la caja: montada sobre el borde) */
html body #product-product .pl-sinfoto-caja > .pl-etq { position: absolute; top: 12px; left: calc(50% - min(50%, 320px) + 12px); margin: 0; z-index: 2; }
/* 1.15 (W21, revisión independiente B8): sin foto no hay columna de miniaturas y la caja de 702 px dejaba a 1.920 un hueco
   a su derecha, con el recuadro de 640 × 480 dentro: la caja llena el ancho de la galería y el recuadro, la caja (4:3).
   La etiqueta, a 12 px del borde del recuadro, que ya es el de la caja */
html body #product-product .pl-sinfoto-caja { width: 100%; max-width: none; height: auto; }
html body #product-product .pl-sinfoto-caja .pl-sinfoto { max-width: none; width: 100%; }
html body #product-product .pl-sinfoto-caja > .pl-etq { left: 12px; }

/* marketing B2 · el texto de la casa en dos columnas en el ordenador ancho (sin media pantalla vacía a 1.440) */
@media (min-width: 1200px) {
	.pl-home__casa .pl-home__lectura { max-width: none; column-count: 2; column-gap: 48px; }
	.pl-home__casa .pl-home__lectura > h2 { column-span: all; }
	.pl-home__casa .pl-home__lectura > p, .pl-home__casa .pl-home__lectura > ul { break-inside: avoid; }
}

/* marketing M4 (aviso de cookies encima de la barra de abajo): fuera el 31-10, el aviso no existe desde W25 */

/* marketing M5 · plazo de salida junto a la disponibilidad (fichas en stock) */
.pl-sale24 { color: #4B5259; }

/* diseño M1 (pasada de W12): «Mis datos» y «Contraseña» con la misma rejilla que los demás formularios (los campos iban a
   todo el ancho de la columna, 1.039 px a 1.440) */
@media (min-width: 992px) {
	#account-edit #content form, #account-password #content form, #account-forgotten #content form { max-width: 800px; }
}
/* M4 (pasada de W12): las tablas de las páginas legales, con la letra del cuerpo (la de cookies iba a 14 px) */
html body #content .article_description.pl-lectura table td, html body #content .article_description.pl-lectura table th { font-size: 16px; }

/* búsqueda (pasada de W12, M17, CLS 0,008-0,012 al cargar la letra; 1.12, W20): la lista de familias en DOS filas desde
   el primer pintado (2 × 44 px + 8 de hueco), que es lo que deja después «Ver las N» (diseño A4, vista-m12.js). La 1.9 la
   ponía en una fila con scroll y el botón «Ver las N» desaparecía (comprobar_rev). Abierta, sin tope. */
@media (min-width: 768px) {
	#product-search .product-category-list ul { max-height: 100px; overflow: hidden; } /* 1.13: lo mismo que pone vista-m12.js (100) */
	/* 1.13: el hueco de «Ver las N» desde el primer pintado (el botón lo añade el JS y empujaba la tabla 56 px) */
	html body #product-search .product-category-list { position: relative; padding-bottom: 68px; }
	html body #product-search .product-category-list button.pl-ver-todas { position: absolute; left: 16px; bottom: 12px; margin: 0; }
	#product-search .product-category-list:has(.pl-ver-todas[aria-expanded="true"]) ul { max-height: none; overflow: visible; }
}
/* menú del móvil: nunca más ancho que la pantalla (a 320 medía 331 y la página se desplazaba de lado) */
@media (max-width: 991px) {
	html body .menu-wrapper, html body nav.menu { max-width: 100vw; }
	html body .menu__level-1-a { white-space: normal; overflow-wrap: anywhere; }
}
/* portada con sesión (comprobar_arbol: a 1.440 × 900 se ve el arranque de las tarjetas): la caja de «Repetir pedido»,
   compacta, y 32 px entre bloques (el diseño M5 pedía 64; con la franja no caben en la primera pantalla) */
.pl-repetir-banda .pl-repetir { padding: 4px 12px; margin-bottom: 0; }
@media (min-width: 1200px) { html body .pl-repetir-banda + .pl-home { gap: 24px; } } /* 1.12: con 32 las tarjetas empezaban a 902 de 900 (comprobar_arbol 17:40) */
/* pasada de maquetación de las 15:28 (1.10) */
/* M16 · acceso: el tema pone el formulario en fila (flex wrap) y los dos campos salían de 212 y 304 px; uno debajo de otro */
#account-login .pl-acceso .pl-form, #account-login .pl-acceso .pl-form form { display: block; }
/* M17 · CLS de la lista (outlet, 0,0031): el «Ordenar» medía lo que su texto al cargar la letra y la barra, alineada a la
   derecha, se movía; con ancho fijo no */
@media (min-width: 768px) { html body #content .pl-lista-barra .pl-ordenar select { width: 220px; } }
/* M1 · Quiénes a 320: la última miga (nowrap, 316 px) ensanchaba la página a 331; en el móvil las migas parten línea */
@media (max-width: 767px) {
	html body ul.breadcrumb { flex-wrap: wrap; }
	/* la última (la página) parte; las demás siguen sin partir con su flecha (formularios-w12, body:has(.pl-rejilla)) */
	html body ul.breadcrumb.breadcrumb > li:last-child { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
}
/* 1.12: sellos de la portada sin una palabra suelta en la segunda línea («24 / h» a 1.280) */
.pl-sello__txt b, .pl-sello__txt small { text-wrap: balance; }