de products.php, T4) → INERTES hasta entonces.
Neutralizaciones al FINAL del archivo (convención de la cabecera: ganan por cascada).
!important SÓLO donde el origen ya lo usa, con comentario de anclaje (plan §4.3).
Sin selectores fuera del scope de la spec (RF-16: aditividad; sólo .lvr-products). */
/* 8.1 layout+página · grid — neutraliza styles.css:1173 (base 4 col), :1197 (≥1400 5 col),
:1204 (≤1280 3 col), :1225 (≤900 3 col), :1241 (≤550 2 col) y :1198/:1203 del layout:
especificidad (0,2,0) > (0,1,0) y bloque 8 posterior en cascada → SIN !important (§4.3).
R4: el padding de styles.css:1086/:1203 NO se neutraliza (calle global, decisión aprobada). */
.lvr-products .product-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
@media (min-width: 768px) {
.lvr-products .product-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.lvr-products .product-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.lvr-products .products-page-layout {
grid-template-columns: 260px minmax(0, 1fr);
gap: 2rem;
}
}
/* 8.1b encabezado de página — RF-3/§12(8) (fuente index.tsx:101-107): breadcrumb flex + h1 Sora
text-xl → text-2xl ≥640 con border-b pb-4 en el contenedor. Clases nuevas de T4 → SIN
competencia y SIN !important (§4.3). */
.lvr-products .lvr-page-header {
border-bottom: 1px solid var(--lvr-border);
padding-bottom: 1rem;
margin: 1rem 0 0 1.5rem;
}
.lvr-products .lvr-breadcrumb {
margin-left: 1rem;
margin-right: 1rem;
display: flex;
gap: 0.375rem;
font-size: 0.75rem;
color: var(--lvr-muted-foreground);
}
.lvr-products .lvr-breadcrumb a {
color: inherit;
text-decoration: none;
}
.lvr-products .lvr-breadcrumb a:hover {
text-decoration: underline;
}
.lvr-products .lvr-breadcrumb__current {
font-weight: 700;
color: var(--lvr-foreground);
}
.lvr-products .lvr-page-title {
font-family: var(--lvr-font-display);
font-size: 1.25rem;
font-weight: 700;
margin-top: 0.5rem;
}
@media (min-width: 640px) {
.lvr-products .lvr-page-title {
font-size: 1.5rem;
}
}
/* 8.2 toolbar — RF-4/RF-5/§12(8) (fuente index.tsx:122-135). Neutraliza styles.css:1165-1171
por especificidad (0,2,x)>(0,1,x) → SIN !important: flex-wrap+gap sobre :1165-1168, el select
pill gana a :1170 (border-radius 4px) y btn-clear-filters a :1171 (margin-left:1rem). NO se
declara flex-direction → :1221 (column ≤900) sigue mandando (apilado móvil, T14). */
.lvr-products .product-grid-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.lvr-products .toolbar-count {
font-size: 0.875rem;
color: var(--lvr-muted-foreground);
}
.lvr-products .toolbar-count strong {
color: var(--lvr-foreground);
font-weight: 700;
}
/* §12(8): la fuente no muestra label en desktop → sr-only CONSERVANDO for/id (a11y). No existe
helper .sr-only previo (styles.css/lvr.css) → propiedades explícitas de tasks.md literal. */
.lvr-products .toolbar-sort label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.lvr-products .lvr-select-wrap {
position: relative;
display: inline-flex;
}
.lvr-products .lvr-select-wrap select {
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--lvr-border);
border-radius: 9999px;
background: var(--lvr-background);
padding: 0.5rem 2.25rem 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--lvr-foreground);
}
.lvr-products .lvr-select-wrap__icon {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--lvr-muted-foreground);
}
.lvr-products .btn-clear-filters {
font-size: 0.75rem;
font-weight: 600;
color: var(--lvr-primary);
text-decoration: none;
margin-left: 0;
}
.lvr-products .btn-clear-filters:hover {
text-decoration: underline;
}
/* 8.3 chips — RF-6/E4b (fuente index.tsx:141-146): pill con bg-accent CÁLIDO del proyecto
(oklch 0.94 0.04 60) + --lvr-accent-foreground (T2) para AA → desviación declarada E4b, NO se
cambia el accent. Foco → 8.11 (T14); 44px táctil → 8.10 ≤767 (T14): tasks no asigna hover. */
.lvr-products .lvr-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1rem 0;
}
.lvr-products .lvr-chip {
display: inline-flex;
align-items: center;
gap: 0.375rem;
border-radius: 9999px;
background: var(--lvr-accent);
color: var(--lvr-accent-foreground);
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
}
.lvr-products .lvr-chip__remove {
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.lvr-products .lvr-chip__remove i {
font-size: 1em;
line-height: 1;
}
/* 8.4 sidebar+filtros — RF-7/RF-8/RF-15d/§12(10). Batalla de !important: CADA !important del
"REDESIGN SIDEBAR" (lvr.css:1286-1415; los originales NO se editan) se redeclara bajo
.lvr-products con !important + N-fix → gana el declarado DESPUÉS. Valores 006 conservados
donde tasks.md no da valor nuevo (decisión Coordinator). Sin checkbox en la cabecera del
grupo (RF-7 + index.tsx:200-210; tasks item 6 desviado, anotado). D-4: el display:none ≤900
de styles.css:1215 sigue mandando (no se declara display en la card). */
/* Card sidebar (RF-7, fuente sticky top-6 rounded-2xl p-5): neutraliza styles.css:1090 (static,
bg #fff, radius 6px) por especificidad (0,2,0)>(0,1,0) → SIN !important. */
.lvr-products .filter-sidebar {
position: sticky;
top: 1.5rem;
align-self: start;
border: 1px solid var(--lvr-border);
border-radius: 1rem;
background: var(--lvr-background);
padding: 1.25rem;
box-shadow: var(--lvr-shadow-card);
/* Scroll independiente */
max-height: calc(100vh - 3rem);
overflow-y: auto;
/* Ocultar la barra en Firefox */
scrollbar-width: none;
}
/* Ocultar la barra en Chrome, Safari, Edge y Opera */
.lvr-products .filter-sidebar::-webkit-scrollbar {
display: none;
}
/* Cabecera (RF-7, fuente L112-115): flex space-between + h2 display + enlace "Limpiar" (T7). */
.lvr-products .filter-sidebar__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.lvr-products .filter-sidebar__header h2 {
font-family: var(--lvr-font-display);
font-size: 1rem;
font-weight: 600;
}
.lvr-products .filter-sidebar__clear {
font-size: 0.75rem;
font-weight: 600;
color: var(--lvr-primary);
text-decoration: none;
}
.lvr-products .filter-sidebar__clear:hover {
text-decoration: underline;
}
/* Anclaje 1 (plan L1301/1305) — h3 → ahora .filter-sidebar__title (T7): color = muted-foreground
(item 3); padding conserva valor 006. font-size 0.75rem/uppercase/bold (item 3) ganan por
especificidad (0,3,1)>(0,2,1) sin !important. */
.lvr-products .filter-sidebar h3.filter-sidebar__title {
color: var(--lvr-muted-foreground) !important; /* N-fix: lvr.css:1301/1305 */
padding: 0 0 1rem 0 !important; /* N-fix: lvr.css:1301/1305 (valor 006 conservado) */
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Anclaje 2 (plan L1321-1325) — cabecera del acordeón = etiqueta de grupo (item 3): color
muted-foreground nuevo; bg/padding/font-size/font-weight valores 006 conservados. */
.lvr-products .accordion__header {
background-color: transparent !important; /* N-fix: lvr.css:1321-1325 */
color: var(--lvr-muted-foreground) !important; /* N-fix: lvr.css:1321-1325 */
padding: 0.5rem 0 !important; /* Cambiado de 1.25rem a 0.75rem */
font-size: 0.75rem !important; /* N-fix: lvr.css:1321-1325 */
font-weight: 700 !important; /* N-fix: lvr.css:1321-1325 */
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Anclaje 3 (plan L1345-1346) — estado abierto: valores 006 conservados (también anula el
primary/blanco de styles.css:1111). El chevron NO se redeclara: gira vía
styles.css:1110 (.accordion.is-open .accordion__icon) — mecanismo reutilizado (item 4). */
.lvr-products .filter-option-header input:checked + .accordion__header,
.lvr-products .accordion.is-open .accordion__header {
background-color: transparent !important; /* N-fix: lvr.css:1345-1346 */
color: #0f172a !important; /* N-fix: lvr.css:1345-1346 (valor 006 conservado) */
}
/* Anclaje 4 (plan L1355) — contenido del acordeón: fondo transparent (apertura sigue siendo el
max-height de styles.css:1112-1113, intacto). */
.lvr-products .accordion__content {
background-color: transparent !important; /* N-fix: lvr.css:1355 */
}
/* Filas (item 4, fuente CheckRow L214): flex/gap/padding/radius + hover. Los fondos de
styles.css:1114/:1120/:1122 quedan neutralizados aquí por especificidad → SIN !important. */
.lvr-products .filter-options-list .filter-option {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.375rem 0.5rem;
border-radius: 0.5rem;
position: relative;
}
.lvr-products .filter-options-list .filter-option:hover {
background-color: var(--lvr-muted);
}
/* Anclaje 5 (plan L1368-1373) — label de fila: fondos/border 006→transparent/none; padding → 0
(la fila ya lleva padding y la caja pasó a flujo: era 2rem por la absoluta); color/font 006
conservados. + truncate (item 4) y gap box↔texto 0.75rem (gap-3 de la fuente; Coordinator). */
.lvr-products .filter-options-list .filter-option label {
background-color: transparent !important; /* N-fix: lvr.css:1368-1373 */
border-bottom: none !important; /* N-fix: lvr.css:1368-1373 */
padding: 0 !important; /* N-fix: lvr.css:1368-1373 (era 2rem por la caja absoluta) */
color: #475569 !important; /* N-fix: lvr.css:1368-1373 (valor 006 conservado) */
font-size: 0.9rem !important; /* N-fix: lvr.css:1368-1373 */
font-weight: 400 !important; /* N-fix: lvr.css:1368-1373 */
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
cursor: pointer;
}
/* Anclaje 6 (plan L1383-1384) — hover del label: fondo transparent (el hover lo da la fila
con --lvr-muted); color 006 conservado. */
.lvr-products .filter-options-list .filter-option:hover label {
background-color: transparent !important; /* N-fix: lvr.css:1383-1384 */
color: #0f172a !important; /* N-fix: lvr.css:1383-1384 (valor 006 conservado) */
}
/* Anclaje 7 (plan L1402-1404) — label seleccionado: valores 006 (transparent/primary/600). */
.lvr-products .filter-option input:checked + label {
background-color: transparent !important; /* N-fix: lvr.css:1402-1404 */
color: var(--lvr-primary) !important; /* N-fix: lvr.css:1402-1404 */
font-weight: 600 !important; /* N-fix: lvr.css:1402-1404 */
}
/* Checkbox 16px SÓLO con CSS (RF-7/item 6): caja en label::before EN FLUJO (flex:none);
neutraliza la absoluta de lvr.css:1394-1404 (position/left/border #cbd5e1/bg #fff) por
especificidad (0,3,2) tie+posterior → SIN !important. */
.lvr-products .filter-options-list .filter-option label::before {
content: "";
position: static;
left: auto;
flex: none;
width: 16px;
height: 16px;
border: 1px solid var(--lvr-border);
border-radius: 4px;
background-color: var(--lvr-background);
transition: all 0.2s ease-in-out;
}
/* Marcado: caja → border/bg primary; background-image:none anula el check SVG de
lvr.css:1413-1421 (sin !important → gana por cascada/especificidad). */
.lvr-products .filter-options-list .filter-option input:checked + label::before {
background-color: var(--lvr-primary);
border-color: var(--lvr-primary);
background-image: none;
}
/* Check blanco (border + rotate 45°) en label::after, sólo visible al marcar (item 6). */
.lvr-products .filter-options-list .filter-option label::after {
content: "";
position: absolute;
left: 5px;
top: 50%;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: translateY(-50%) rotate(45deg);
opacity: 0;
pointer-events: none;
}
.lvr-products .filter-options-list .filter-option input:checked + label::after {
opacity: 1;
}
/* Radios enfocables (RF-8/item 5): anula display:none de styles.css:1102 por especificidad
(0,4,1)>(0,3,1) — requiere display explícito (sin él, display:none seguiría mateando y el
input no sería enfocable; micro-corrección al literal de tasks, anotada en MEMORY). */
.lvr-products .filter-group.accordion input[type="radio"] {
display: block;
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
}
/* Foco de filtros (RF-15d/item 7): anillo en la FILA (label/cabecera), no en el input oculto;
sin :has(). El foco del resto de elementos va en 8.11 (T14). */
.lvr-products .filter-group.accordion input:focus-visible + label {
outline: 2px solid var(--lvr-primary);
outline-offset: 2px;
}
.lvr-products .filter-group.accordion input:focus-visible + .accordion__header {
outline: 2px solid var(--lvr-primary);
outline-offset: 2px;
}
/* 8.5 card — RF-9/§12(13) (fuente index.tsx:224-242). Neutraliza styles.css:875 (base),
:894 (inner:hover), :932 (escala de imagen), :1185 (content), :937 y :1243 (title ≤550),
:951 (meta) por especificidad (0,2,0)>(0,1,0) + cascada posterior → SIN !important (plan §4.3).
N9/N10/N11 ya neutralizan max-w/max-h de inner/tag (scope .lvr-home, activo en /productos).
.product-card__discount: SIN regla nueva — lvr.css:773-775 la mantiene oculta (006 RF-8). */
.lvr-products .product-card {
position: relative;
cursor: pointer; /* §12(13): la card navega vía stretched link */
border: 1px solid var(--lvr-border);
border-radius: 1rem;
background: var(--lvr-background);
box-shadow: var(--lvr-shadow-card);
transition: transform 300ms, box-shadow 300ms, border-color 300ms;
}
.lvr-products .product-card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--lvr-primary) 30%, transparent);
box-shadow: var(--lvr-shadow-lift);
}
.lvr-products .product-card__inner:hover {
box-shadow: none;
transform: none;
}
.lvr-products .product-card__image {
aspect-ratio: 1 / 1;
padding: 1rem;
}
.lvr-products .product-card__image img {
object-fit: contain;
transition: transform 500ms;
}
.lvr-products .product-card:hover .product-card__image img {
transform: scale(1.05);
}
.lvr-products .product-card__content {
border-top: 1px solid var(--lvr-border);
padding: 1rem;
}
.lvr-products .info__meta {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--lvr-muted-foreground);
}
.lvr-products .product-card__title {
font-size: 14px;
font-weight: 600;
line-clamp: 2;
line-height: 1.375;
}
.lvr-products .product-card__link {
color: inherit;
text-decoration: none;
}
/* Stretched link (D-2): ::after cubre toda la card (article con position:relative). */
.lvr-products .product-card__link::after {
content: "";
position: absolute;
inset: 0;
}
.lvr-products .product-card__tag {
/* N-fix: lvr.css:752-760 — la original declara estas propiedades con !important (§12(11)) */
right: 0.75rem !important;
top: 0.75rem !important;
z-index: 10 !important;
border-radius: 9999px !important;
font-size: 10px !important;
font-weight: 800 !important;
padding: 0.125rem 0.625rem !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
/* T16: tag decorativo — el clic debe atravesar al stretched ::after (RF-9); z-index intacto. */
pointer-events: none;
}
/* N-fix: lvr.css:771-778 — colores de la original con !important (§12(11); RF-9 fondo success/oferta,
texto text-primary-foreground de la fuente). La original de home NO se edita. */
.lvr-products .product-card__tag.discount--new {
background-color: var(--lvr-success) !important;
color: var(--lvr-primary-foreground) !important;
}
.lvr-products .product-card__tag.discount--offer {
background-color: var(--lvr-offer) !important;
color: var(--lvr-primary-foreground) !important;
}
/* 8.6 precios + pill — RF-10 (fuente index.tsx:236-244); E1b colores exactos de la fuente. */
.lvr-products .product-card__price-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.5rem;
padding-top: 0.75rem;
}
.lvr-products .original-price {
/* N-fix: lvr.css:750-756 — .lvr-home .original-price usa !important en font-size/color
(activo en /productos: main lleva lvr-home+lvr-products) → aquí también (patrón plan §4;
excepción «sólo tag» aprobada por el Coordinator, RF-10 exige 12px + muted). */
font-size: 12px !important; /* N-fix: lvr.css:750-756 */
color: var(--lvr-muted-foreground) !important; /* N-fix: lvr.css:750-756 */
text-decoration: line-through;
}
.lvr-products .offer-price {
font-family: var(--lvr-font-display);
font-size: 18px;
font-weight: 700;
}
/* Pill: neutraliza .lvr-home .lvr-badge* (lvr.css:795-841) SIN !important — misma
especificidad, bloque 8 posterior → gana el último. */
.lvr-products .lvr-badge--stock {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
vertical-align: middle;
font-size: 0; /* el span conserva 0: el texto visible lo inyecta el ::after (D-6) */
}
/* R1: el ::after REDECLARA font-size aquí (el pseudo-elemento no lo hereda). */
.lvr-products .lvr-badge--stock::after {
font-size: 10px;
font-weight: 700;
}
.lvr-products .lvr-badge--stock::before {
content: "";
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 0; /* 006 fija 6px: el spacing lo da el gap (fuente gap-1) */
}
/* E1b: colores EXACTOS de la fuente (excepción AA ≈3.4:1 documentada + aria-label en el span). */
.lvr-products .lvr-badge--available {
background-color: var(--lvr-success-soft);
color: var(--lvr-success);
}
.lvr-products .lvr-badge--available::before {
background-color: var(--lvr-success);
}
.lvr-products .lvr-badge--out-of-stock {
background-color: var(--lvr-muted);
color: var(--lvr-muted-foreground);
}
.lvr-products .lvr-badge--out-of-stock::before {
background-color: var(--lvr-muted-foreground);
}
/* 8.7 CTA — RF-11 (fuente: pill bg-primary, icono MessageCircle → bx bxl-whatsapp).
§12(13): position:relative + z-index 2 POR ENCIMA del ::after estirado (clic → wa.me,
nunca navega al detalle); la card ya lleva cursor:pointer. */
.lvr-products .product-card__cta {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--lvr-primary);
color: var(--lvr-primary-foreground, #fff);
padding: 0.5rem 1rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
transition: opacity 300ms, transform 300ms;
/* Nuevas propiedades para ampliar y separar */
width: 100%;
margin-top: 1rem; /* Puedes ajustar este valor si lo prefieres (ej. 0.75rem) */
}
/* RF-11: ≥768 aparece al hover/foco de la card; <768 SIEMPRE visible (sin regla que lo oculte). */
@media (min-width: 768px) {
.lvr-products .product-card__cta {
opacity: 0;
transform: translateY(0.5rem);
}
.lvr-products .product-card:hover .product-card__cta,
.lvr-products .product-card:focus-within .product-card__cta {
opacity: 1;
transform: none;
}
}
/* 8.9 estado vacío — RF-13 (fuente index.tsx:156-160: card rounded-2xl border p-12 shadow-card).
Neutraliza styles.css:1187 (padding 4rem 2rem, color) por especificidad (0,2,0)>(0,1,0) →
SIN !important. :1188 (`.no-results-found i`) quedó MUERTA: T10 eliminó el icono → sin efecto. */
.lvr-products .no-results-found {
grid-column: 1 / -1;
padding: 3rem;
border: 1px solid var(--lvr-border);
border-radius: 1rem;
background: var(--lvr-background);
text-align: center;
box-shadow: var(--lvr-shadow-card);
}
.lvr-products .no-results-found__message {
font-family: var(--lvr-font-display);
font-size: 1.125rem;
font-weight: 600;
color: var(--lvr-foreground);
margin-bottom: 0.5rem;
}
/* Párrafo secundario = SIN clase (markup T10, L375): selector inferido con :not para no
pisar __message (tasks.md da valor/propiedades pero NO selector). */
.lvr-products .no-results-found p:not(.no-results-found__message) {
color: var(--lvr-muted-foreground);
font-size: 0.875rem;
}
.lvr-products .no-results-found__clear {
display: inline-block;
margin-top: 1rem;
background: var(--lvr-primary);
color: var(--lvr-primary-foreground, #fff);
padding: 0.5rem 1.25rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
}
.lvr-products .no-results-found__clear:hover {
filter: brightness(1.1);
}
/* 8.10 mobile — RF-14/§12(8)/§12(14)/D-4/Q4. MEDIA 900px, NO la 899 de tasks.md: decisión
Coordinator — coincide con el conmutador REAL styles.css:1126 display:none base → :1218
display:grid en max-width:900 y con D-4 ("breakpoint filtros 900px"); con 899 habría banda
de 1px en 900 exactos con sort desktop + móviles + sidebar oculta a la vez. */
@media (max-width: 900px) {
/* Q4 OBLIGATORIO: compensa la pérdida de styles.css:1223 (`.product-grid-header
.filter-group`) — T5 renombró ese wrapper a .toolbar-sort → la regla ya no matchea.
El sort MÓVIL del markup (#sort-mobile) sigue mandando. */
.lvr-products .toolbar-sort { display: none; }
.lvr-products .mobile-select-group {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
/* §12(8): labels "Categoría:/Marca:/Ordenar por:" VISIBLES en móvil
(neutraliza styles.css:1143-1147 .85rem/700/primary). */
.lvr-products .mobile-select-group label {
font-size: 0.875rem;
font-weight: 600;
color: var(--lvr-foreground);
}
/* Neutraliza styles.css:1137-1162 (group gap .5rem; select radio 4px, padding .6rem,
border #ccc, bg #fff) por especificidad → SIN !important. Fuente: pills. */
.lvr-products .mobile-select {
appearance: none;
border: 1px solid var(--lvr-border);
border-radius: 9999px;
background: var(--lvr-background);
padding: 0.6rem 2.5rem 0.6rem 1rem;
font-size: 0.9375rem;
width: 100%;
}
.lvr-products .mobile-select:disabled {
opacity: 0.6;
}
}
/* §12(14): ≥44px SÓLO en la base móvil (tasks.md lo asigna a 767); desktop SIN mínimo (la
fuente usa pills ~36px a 1280). En ≤767 el .btn-clear-filters visible es el del
.mobile-select-group (flex → blockificado → min-height aplica); el del toolbar está oculto. */
@media (max-width: 767px) {
.lvr-products .mobile-select,
.lvr-products .btn-clear-filters,
.lvr-products .no-results-found__clear,
.lvr-products .product-card__cta {
min-height: 44px;
}
.lvr-products .lvr-chip__remove {
min-width: 44px;
min-height: 44px;
}
.lvr-products .lvr-chip {
min-height: 44px;
align-items: center;
}
}
@media (max-width: 550px) {
.lvr-products .product-card__title {
font-size: 14px;
}
/* 1. Reducimos el tamaño del precio */
.lvr-products .product-card__price,
.lvr-products .price-line > span:first-child,
.lvr-products .offer-price {
font-size: 16px !important;
}
/* 2. Cambiamos la disposición a columna para que "Disponible" baje */
.lvr-products .product-card__price-row {
flex-direction: column;
align-items: flex-start;
gap: 0.35rem; /* Pequeño espacio entre el precio y la etiqueta */
}
}
/* 8.11 foco — RF-15d: TODO lo que no sean filtros (los filtros quedaron en 8.4/T12). Mismo
anillo que .lvr-home a/button:focus-visible (L1067-1071) → redeclaración explícita que además
cubre los