del archivo, y el que hereda la barra de filtros pegajosa para poder tapar. - `--pz-page-bg` (pz-header.css): lo pinta `.pz-page`, el envoltorio de toda la página, que va por delante de los dos anteriores. El tema lo pone gris con `body.woocommerce`. El selector lleva `html` delante para ganar a `body.woocommerce` sin depender del orden en que se encolen las hojas. */ html body.post-type-archive-product, html body.tax-product_cat, html body.tax-product_tag, html body.tax-product_brand, .site-main--woo-archive { --ozs-page-bg: #ffffff; --pz-page-bg: #ffffff; } /* Y además, en `style.css` el tema pinta `.site` y `.site-main` con el gris escrito a pelo (`body.woocommerce .site, … { background:#eef1f3 }`), sin pasar por ninguna variable y con más peso que la regla del archivo. Hay que sobrescribir ese fondo elemento a elemento. */ html body.post-type-archive-product .site, html body.post-type-archive-product .site-main, html body.tax-product_cat .site, html body.tax-product_cat .site-main, html body.tax-product_tag .site, html body.tax-product_tag .site-main, html body.tax-product_brand .site, html body.tax-product_brand .site-main { background: #ffffff; } .site-main--woo-archive { --lv-shop-red: #e30613; --lv-shop-ink: #111111; --lv-shop-aside-bg: #0d0d0d; --lv-shop-aside-w: clamp(240px, 20vw, 380px); --lv-shop-gap: clamp(20px, 2.4vw, 40px); } /* El acento de la tienda lo define `--ozs-navy` (shop-archive.css), que apunta a `--OZ-Color-3` y en este sitio sale naranja. Se repinta de rojo LUVAL: de aquí cuelgan el panel de filtros, las opciones marcadas y los contadores. Va en `:root` porque shop-bar.js mueve el panel de filtros a , fuera de `.site-main--woo-archive`. */ :root { --ozs-navy: #e30613; --ozs-navy-dark: #c4100c; } /* ========================================================================== 1. Portada ========================================================================== */ .lv-shop-hero { display: grid; grid-template-columns: minmax(280px, var(--lv-shop-hero-split, 34%)) 1fr; align-items: stretch; min-height: clamp(110px, 9vw, 170px); background: var(--lv-shop-red); overflow: hidden; } .lv-shop-hero--no-media { grid-template-columns: 1fr; } .lv-shop-hero__title-wrap { display: flex; align-items: center; padding: 18px clamp(20px, 3vw, 48px); padding-left: clamp(20px, 4.6vw, 88px); background: var(--lv-shop-red); } /* Se queda en la tipografía de titulares del tema (Bebas Neue). El peso baja a 400 porque es el único que Bebas distribuye: con 800 el navegador engrosaba el trazo por su cuenta (negrita sintética) y salía emborronado. */ .lv-shop-hero__title { margin: 0; color: #fff; font-family: var(--OZ-Font-Headings, inherit); font-size: clamp(24px, 2.6vw, 40px); font-weight: 400; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; } .lv-shop-hero__media { position: relative; overflow: hidden; min-height: 100%; } .lv-shop-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ========================================================================== 2. Rejilla de la página: barra lateral + contenido ========================================================================== */ .lv-shop-layout { display: grid; grid-template-columns: var(--lv-shop-aside-w) minmax(0, 1fr); align-items: stretch; } /* El

se estira a todo el alto de la fila (la banda negra acompaña al listado de principio a fin); lo que se queda pegado al hacer scroll es su contenido. */ .lv-shop-aside { background: var(--lv-shop-aside-bg); color: #fff; padding: 26px 18px 48px; padding-left: clamp(18px, 2.6vw, 42px); } /* Mismo anclaje que usa la barra de filtros del tema: bajo la cabecera fija, y subiendo cuando esa cabecera se oculta al bajar. Si la lista no cabe en la pantalla, se desplaza por dentro en vez de cortarse. */ .lv-shop-cats { position: sticky; top: calc(var(--ozs-adminbar, 0px) + var(--pz-header-h, 92px) + 22px); max-height: calc(100vh - var(--ozs-adminbar, 0px) - var(--pz-header-h, 92px) - 44px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; transition: top 0.34s var(--ozs-ease, ease); } html.oz-header-hidden .lv-shop-cats { top: calc(var(--ozs-adminbar, 0px) + 22px); } .lv-shop-cats::-webkit-scrollbar { width: 5px; } .lv-shop-cats::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, 0.35); } @media (prefers-reduced-motion: reduce) { .lv-shop-cats { transition: none; } } .lv-shop-content { min-width: 0; padding: 18px clamp(16px, 2.4vw, 40px) 56px; } /* --- Lista de categorías --- */ /* `font-family: inherit` para salir de la condensada que el tema aplica a los encabezados: aquí interesa un título más grande y de trazo ligero. */ .lv-shop-cats__title { margin: 0 0 18px; font-family: inherit; font-size: 19px; font-weight: 400; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; } .lv-shop-cats__list { margin: 0; padding: 0; list-style: none; } .lv-shop-cats__item + .lv-shop-cats__item { border-top: 1px solid rgba(255, 255, 255, 0.14); } .lv-shop-cats__link { display: flex; align-items: center; gap: 9px; padding: 11px 0; color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; transition: color 0.18s ease; } /* Punta de flecha en CSS, para no depender de una fuente de iconos. */ .lv-shop-cats__arrow { flex: 0 0 auto; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.75; transition: transform 0.18s ease, opacity 0.18s ease; } .lv-shop-cats__link:hover, .lv-shop-cats__link:focus-visible, .lv-shop-cats__item.is-current .lv-shop-cats__link { color: #fff; text-decoration: none; } .lv-shop-cats__link:hover .lv-shop-cats__arrow, .lv-shop-cats__link:focus-visible .lv-shop-cats__arrow { transform: rotate(45deg) translate(1.5px, -1.5px); opacity: 1; } .lv-shop-cats__item.is-current .lv-shop-cats__name { font-weight: 700; } .lv-shop-cats__item.is-current .lv-shop-cats__arrow { border-color: var(--lv-shop-red); opacity: 1; } /* ========================================================================== 3. Barra de filtros y orden ========================================================================== */ /* De barra negra a fila clara sobre el fondo de la página. La barra sigue siendo `sticky`: necesita un fondo opaco del color de la página, o al pegarse arriba dejaría ver las tarjetas por debajo. */ .site-main--woo-archive .oz-shopbar { padding-left: 0; padding-right: 0; background: var(--ozs-page-bg, #eef1f3); box-shadow: none; } .site-main--woo-archive .oz-shopbar__inner { gap: 12px; max-width: none; padding: 6px 0 18px; background: none; border: 0; border-radius: 0; box-shadow: none; } .site-main--woo-archive .oz-shopbar__filters { gap: 10px; } /* Las categorías viven en la barra lateral: la píldora solo hace falta en las anchuras donde esa barra no se muestra. */ .site-main--woo-archive .oz-shopbar__pill--cats { display: none; } .site-main--woo-archive .oz-shopbar__pill { min-height: 36px; padding: 7px 14px; border: 1px solid #dcdcdc; border-radius: 7px; background: #fff; color: var(--lv-shop-ink); font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; } .site-main--woo-archive .oz-shopbar__pill:hover, .site-main--woo-archive .oz-shopbar__dd[open] > .oz-shopbar__pill { border-color: #b5b5b5; background: #fff; } .site-main--woo-archive .oz-shopbar__pill.is-active { border-color: var(--lv-shop-ink); } /* El botón de orden deja de ser naranja. */ .site-main--woo-archive .oz-shopbar__pill--sort { background: #fff; color: var(--lv-shop-ink); border-color: #dcdcdc; } .site-main--woo-archive .oz-shopbar__badge { background: var(--lv-shop-red); color: #fff; } .site-main--woo-archive .oz-shopbar__count { margin: 0 4px 0 auto; color: #6b7280; font-size: 13px; line-height: 36px; white-space: nowrap; } .site-main--woo-archive .oz-shopbar__count strong { font-weight: 600; color: var(--lv-shop-ink); } /* Con el recuento ocupando el hueco flexible, el orden va pegado a la derecha. */ .site-main--woo-archive .oz-shopbar__dd--sort { margin-left: 0; } /* ========================================================================== 4. Rejilla de productos ========================================================================== */ .site-main--woo-archive .oz-shop { padding: 0; } .site-main--woo-archive .oz-shop__inner { max-width: none; padding: 0; } /* Cuatro columnas fijas en escritorio. La regla equivalente de shop-archive.css usa `repeat(var(--oz-shop-grid-columns), …)` y el navegador la descarta: `repeat()` exige un entero literal, un `var()` se resuelve demasiado tarde. Al caer esa declaración quedaba el `auto-fill` de la regla base, que en pantallas anchas daba 5 o 6 columnas. Por debajo de 1025px se deja el auto-fill del tema, que ahí funciona bien. */ @media (min-width: 1025px) { .site-main--woo-archive .oz-shop__products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ========================================================================== 5. Paginación ========================================================================== */ .site-main--woo-archive .woocommerce-pagination { margin: 34px 0 0; text-align: center; } .site-main--woo-archive .woocommerce-pagination ul.page-numbers { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; list-style: none; } .site-main--woo-archive .woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; overflow: visible; } .site-main--woo-archive .woocommerce-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid #dcdcdc; border-radius: 7px; background: #fff; color: var(--lv-shop-ink); font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease; } .site-main--woo-archive .woocommerce-pagination .page-numbers:hover { border-color: #9a9a9a; } .site-main--woo-archive .woocommerce-pagination .page-numbers.current { border-color: var(--lv-shop-ink); background: var(--lv-shop-ink); color: #fff; } .site-main--woo-archive .woocommerce-pagination .page-numbers.dots { border-color: transparent; background: transparent; } /* ========================================================================== 6. Responsive Por debajo de 1024px desaparece la barra lateral y las categorías vuelven a estar donde el tema ya las tenía: el panel «Filtros» y el cajón lateral. ========================================================================== */ @media (max-width: 1024px) { .lv-shop-layout { grid-template-columns: minmax(0, 1fr); } .lv-shop-aside { display: none; } .lv-shop-content { padding: 14px clamp(14px, 3vw, 28px) 48px; } .site-main--woo-archive .oz-shopbar__pill--cats { display: inline-flex; } .lv-shop-hero { grid-template-columns: minmax(0, 46%) 1fr; min-height: 96px; } } /* ========================================================================== 7. Móvil: el panel «Filtros» absorbe las categorías Por debajo de 768px aparece el botón «Filtros», y ese panel ya trae dentro la sección «Categorías» (ver woocommerce/archive/filter-bar.php). La píldora suelta sobra: solo hace falta en tablet, donde no hay panel ni barra lateral. ========================================================================== */ @media (max-width: 767px) { .site-main--woo-archive .oz-shopbar__pill--cats { display: none; } /* El velo era azul marino. */ .oz-shopbar__scrim.oz-shopbar__scrim { background: rgba(0, 0, 0, 0.55); } /* De hoja inferior a pestaña lateral: alto completo y entrada desde el borde izquierdo. Doble clase en vez de anclarlo a `.site-main--woo-archive`: shop-bar.js mueve este panel a para escapar del recorte de

, así que en tiempo de ejecución ya no cuelga del archivo. `top` usa el alto de la barra de administración, que vale 0px cuando no la hay. */ .oz-shopbar__sheet.oz-shopbar__sheet { top: var(--ozs-adminbar, 0px); right: auto; bottom: 0; left: 0; width: min(340px, 88vw); max-height: none; border-radius: 0; box-shadow: 14px 0 40px rgba(0, 0, 0, 0.28); transform: translateX(-100%); } .oz-shopbar__sheet.oz-shopbar__sheet.is-open { transform: translateX(0); } } @media (max-width: 640px) { .lv-shop-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; } .lv-shop-hero__media { display: none; } .lv-shop-hero__title-wrap { padding: 16px 18px; } /* La barra pasa a dos líneas: filtros y orden arriba, recuento debajo. */ .site-main--woo-archive .oz-shopbar__inner { flex-wrap: wrap; padding-bottom: 12px; } .site-main--woo-archive .oz-shopbar__filters { flex: 1 1 auto; } .site-main--woo-archive .oz-shopbar__dd--sort { flex: 0 0 auto; } .site-main--woo-archive .oz-shopbar__count { order: 3; flex: 1 0 100%; width: 100%; margin: 2px 0 0; line-height: 1.4; } }