body.layout-modern #wrapper, #page #wrapper { background-color: #f4f4f4; }:root{--content-width: 100%;--content-edge-padding-x: 15px;--content-edge-padding-y: 50px;--body-font-family: "Oxygen", var(--fallback-font);--heading-font-family: "Federo", var(--fallback-font);--subheading-font-family: "Federo", var(--fallback-font);--font-size-body: 16px;--body-weight: 400;--palette1: #e47167!important;--palette2: #000000!important;--palette3: #000000!important;--palette4: #777777!important;--palette5: #888888!important;--palette6: #999999!important;--palette7: #f0f0f0!important;--palette8: #f5f5f5!important;--palette9: #ffffff!important;--palette10: #e47167!important;--palette11: #000000!important;}@media (min-width: 1025px){.container {max-width:100%;}}@media (min-width: 1025px){.container {max-width:100%;}}.hero-section .page-title-wrapper{min-height:120px;}/* ######################################################################### ######################################################################### ZIGZAG MERCERÍA CREATIVA CSS PERSONALIZADO GENERAL ÍNDICE: BLOQUE 01 · ESTILOS GENERALES BLOQUE 03 · SLIDER "¿QUÉ QUIERES HACER?" BLOQUE 04 · OTROS ELEMENTOS DE LA WEB ######################################################################### ######################################################################### */ #search_filters .facet .facet-label .custom-checkbox{ top:1px !important; } .gridcat a{ widht:100% !important; } .gridcat img{ width:100%; height:300px; object-fit:cover !important; } .home-product-category img{ height:208px; width: 208px; } .gridcat2 a{ widht:100% !important; } .gridcat2 img{ width:100%; height:450px; object-fit:cover !important; object-position:top; } .blockreassurance_product{ display:none; } .hero_section h1 { font-size: 50px !important; line-height: 1.2 50px !important; font-weight: 400 50px !important; font-family: "Federo" 50px !important; color: #434343 50px !important; } .zz-category-subcategories-h2{ color: var(--Negro-ZIG-ZAG, #434343); font-family: Federo; font-size: 52px; font-style: normal; font-weight: 400; line-height: 56px; /* 107.692% */ } .divnosotros img{ object-fit:cover; height:100% !important; } .imgnosotros { height:100%; } .imgnosotros div{ height:100%; } body#category #wrapper > .container > .row{ flex-wrap:wrap; } /* ========================================================================= ========================================================================= BLOQUE 01 · ESTILOS GENERALES ========================================================================= ========================================================================= */ .products.product-loop .product-miniature .thumbnail-container .product-description .product-title a{ color: var(--Negro-ZIG-ZAG, #434343); text-align: center; font-family: "Oxygen"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 22.4px; /* 140% */ text-transform: capitalize; } /* ------------------------------------------------------------------------- FONDO GENERAL DE LA WEB ------------------------------------------------------------------------- */ body { background-color: #f4f4f4 !important; } #left-column #search_filters .facet .collapse{ border-bottom:0px !important; } #subcategories ul li .subcategory-image a{ } .product-miniature .thumbnail-container{ border-radius:20px; } body#category .pagination .page-list li{ display: flex; align-items: center; justify-content: center; } /* ========================================================================= ========================================================================= BLOQUE 03 · SLIDER "¿QUÉ QUIERES HACER?" Clase principal: .zigzag-proyectos-slider Este bloque incluye: - Swiper creado por JavaScript - Flechas SVG personalizadas - Sin paginación - Hover con cambio de imagen - Responsive - Conserva título + vector decorativo ========================================================================= ========================================================================= */ /* ------------------------------------------------------------------------- 03.01 · SECCIÓN PRINCIPAL ------------------------------------------------------------------------- */ .zigzag-proyectos-slider { position: relative !important; overflow: visible !important; } /* ------------------------------------------------------------------------- 03.02 · VIEWPORT DEL SLIDER ------------------------------------------------------------------------- */ .zigzag-proyectos-slider > .elementor-container { width: 100% !important; overflow: hidden !important; } /* ------------------------------------------------------------------------- 03.03 · WRAPPER SWIPER ------------------------------------------------------------------------- */ .zigzag-proyectos-slider .elementor-row.swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; margin: 0 !important; } /* ------------------------------------------------------------------------- 03.04 · CADA SLIDE Elementor originalmente los genera como columnas. Swiper controla ahora su anchura. ------------------------------------------------------------------------- */ .zigzag-proyectos-slider .swiper-slide { flex-shrink: 0 !important; height: auto !important; box-sizing: border-box !important; } .zigzag-proyectos-slider .swiper-slide.elementor-col-11, .zigzag-proyectos-slider .swiper-slide.elementor-col-33 { max-width: none !important; } /* ------------------------------------------------------------------------- 03.05 · CONTENIDO DE CADA CARD ------------------------------------------------------------------------- */ .zigzag-proyectos-slider .swiper-slide > .elementor-column-wrap { height: 100% !important; } /* ------------------------------------------------------------------------- 03.06 · IMAGEN PRINCIPAL DE CADA CARD Cambio original → hover mediante JavaScript. Añadimos fade suave para evitar un cambio brusco. ------------------------------------------------------------------------- */ .zigzag-proyectos-slider .swiper-slide .over-hidden img { display: block !important; width: 100% !important; opacity: 1 !important; transition: opacity 0.05s ease-in-out !important; will-change: opacity; } /* Estado temporal mientras cambia el SRC */ .zigzag-proyectos-slider .swiper-slide .over-hidden img.zigzag-image-changing { opacity: 0 !important; } /* ------------------------------------------------------------------------- 03.07 · HOVER DE LA CARD ------------------------------------------------------------------------- */ .zigzag-proyectos-slider .swiper-slide.is-hovered .over-hidden img { /* El cambio visual lo controla el fade anterior */ } /* ------------------------------------------------------------------------- 03.08 · FLECHAS DEL SLIDER SVG personalizado dentro de círculo naranja. La posición horizontal sigue calculándola el JavaScript. ------------------------------------------------------------------------- */ .zigzag-proyectos-prev, .zigzag-proyectos-next { position: absolute !important; top: 50% !important; width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #d06547 !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; cursor: pointer !important; z-index: 50 !important; overflow: hidden !important; transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease !important; } /* ------------------------------------------------------------------------- 03.09 · SVG DENTRO DEL CÍRCULO ------------------------------------------------------------------------- */ .zigzag-proyectos-prev img, .zigzag-proyectos-next img { display: block !important; width: 15px !important; height: 15px !important; max-width: 15px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; /* * Fuerza el SVG a blanco para que contraste * con el círculo naranja. */ filter: brightness(0) invert(1) !important; pointer-events: none !important; transition: transform 0.2s ease !important; } /* ------------------------------------------------------------------------- 03.10 · HOVER DE LAS FLECHAS ------------------------------------------------------------------------- */ .zigzag-proyectos-prev:hover, .zigzag-proyectos-next:hover { background: #bd593e !important; } .zigzag-proyectos-prev:hover img, .zigzag-proyectos-next:hover img { transform: scale(1.08) !important; } /* ------------------------------------------------------------------------- 03.11 · FLECHA DESACTIVADA ------------------------------------------------------------------------- */ .zigzag-proyectos-prev.swiper-button-disabled, .zigzag-proyectos-next.swiper-button-disabled { opacity: 0.35 !important; cursor: default !important; } /* ------------------------------------------------------------------------- 03.12 · QUITAR PAGINACIÓN ------------------------------------------------------------------------- */ .zigzag-proyectos-pagination, .zigzag-proyectos-slider .swiper-pagination, .zigzag-proyectos-slider .swiper-pagination-bullets, .zigzag-proyectos-slider .swiper-pagination-bullet { display: none !important; } #subcategories ul li .subcategory-image a{ border:0px !important; } /* ------------------------------------------------------------------------- 03.13 · RESPONSIVE ------------------------------------------------------------------------- */ @media (max-width: 767px) { .zigzag-proyectos-prev, .zigzag-proyectos-next { width: 32px !important; height: 32px !important; } .zigzag-proyectos-prev img, .zigzag-proyectos-next img { width: 13px !important; height: 13px !important; max-width: 13px !important; } } /* ========================================================================= ========================================================================= BLOQUE 04 · OTROS ELEMENTOS DE LA WEB IMPORTANTE: Se mantienen únicamente estilos auxiliares no relacionados con grids de productos. ========================================================================= ========================================================================= */ /* ------------------------------------------------------------------------- 04.01 · IMÁGENES DE GARANTÍAS ------------------------------------------------------------------------- */ .imggarantias { width: 160px !important; height: 160px !important; } /* ========================================================= ========================================================= ZIGZAG MERCERÍA CREATIVA · HEADER ========================================================= ========================================================= */ /* ========================================================= 01 · HEADER DESKTOP Reparto logo / menú / acciones ========================================================= */ @media (min-width: 1200px) { /* LOGO */ .elementor-12 .elementor-element.elementor-element-76b30c8 { width: 15% !important; } /* MENÚ */ .elementor-12 .elementor-element.elementor-element-3403726 { width: 74% !important; } /* BUSCADOR / CUENTA / CARRITO */ .elementor-12 .elementor-element.elementor-element-5269dac { width: 11% !important; } /* --------------------------------------------------------- MENÚ PRINCIPAL EN UNA SOLA LÍNEA --------------------------------------------------------- */ #_desktop_megamenu .avaorg-menu-horizontal > .menu-content { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } #_desktop_megamenu .avaorg-menu-horizontal > .menu-content > .menu-item { flex: 0 0 auto !important; white-space: nowrap !important; margin: 0 !important; } /* --------------------------------------------------------- ENLACES DEL MENÚ PRINCIPAL --------------------------------------------------------- */ .elementor-12 .elementor-element.elementor-element-234f2b9 .avaorg-menu-horizontal > .menu-content > .menu-item > a { display: flex !important; align-items: center !important; justify-content: center !important; padding: 37px 12px !important; white-space: nowrap !important; } } /* ========================================================= 02 · MEGAMENU / SUBMENÚS DESKTOP ========================================================= */ @media (min-width: 992px) { /* ========================================================= 02.01 · CAJA GENERAL DEL SUBMENÚ ========================================================= */ #_desktop_megamenu .cat-drop-menu { min-width: 245px !important; padding: 8px !important; background: #ffffff !important; border: 1px solid rgba(67, 67, 67, 0.08) !important; border-radius: 14px !important; box-shadow: 0 18px 45px rgba(67, 67, 67, 0.10), 0 4px 12px rgba(67, 67, 67, 0.05) !important; overflow: visible !important; z-index: 9999 !important; } /* ========================================================= 02.02 · LISTA INTERIOR ========================================================= */ #_desktop_megamenu .cat-drop-menu > .avaorg-sub-inner { margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ========================================================= 02.03 · CADA ELEMENTO DEL SUBMENÚ ========================================================= */ #_desktop_megamenu .cat-drop-menu > .avaorg-sub-inner > li { position: relative !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* ========================================================= 02.04 · ENLACES NIVEL 1 ========================================================= */ #_desktop_megamenu .cat-drop-menu > .avaorg-sub-inner > li > a { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 44px !important; margin: 0 !important; padding: 11px 38px 11px 14px !important; background: transparent !important; color: #434343 !important; font-family: "Oxygen", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.35 !important; text-decoration: none !important; border: 0 !important; border-radius: 9px !important; box-sizing: border-box !important; transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease !important; } /* ========================================================= 02.05 · HOVER NIVEL 1 ========================================================= */ #_desktop_megamenu .cat-drop-menu > .avaorg-sub-inner > li > a:hover { color: #d06547 !important; background: #faf5f2 !important; transform: translateX(2px); } /* ========================================================= 02.06 · SEPARADORES ========================================================= */ #_desktop_megamenu .cat-drop-menu > .avaorg-sub-inner > li:not(:last-child)::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px; background: rgba(67, 67, 67, 0.07); pointer-events: none; } /* ========================================================= 02.07 · FLECHA DERECHA PARA ELEMENTOS CON HIJOS Ej: Temporada › Composición › Marcas › Uso › ========================================================= */ #_desktop_megamenu .cat-drop-menu li:has(> .cat-drop-menu) > a::after { content: ""; position: absolute; top: 50%; right: 15px; width: 7px; height: 7px; border-top: 1.5px solid #8a8a8a; border-right: 1.5px solid #8a8a8a; transform: translateY(-50%) rotate(45deg); transition: border-color 0.18s ease, right 0.18s ease !important; } #_desktop_megamenu .cat-drop-menu li:has(> .cat-drop-menu) > a:hover::after { right: 13px; border-color: #d06547 !important; } /* ========================================================= 03 · SUBSUBMENÚ / NIVEL 2 ========================================================= */ #_desktop_megamenu .cat-drop-menu li > .cat-drop-menu { top: -8px !important; left: calc(100% + 8px) !important; min-width: 245px !important; margin: 0 !important; padding: 8px !important; background: #ffffff !important; border: 1px solid rgba(67, 67, 67, 0.08) !important; border-radius: 14px !important; box-shadow: 0 18px 45px rgba(67, 67, 67, 0.10), 0 4px 12px rgba(67, 67, 67, 0.05) !important; z-index: 10000 !important; } /* ========================================================= 03.01 · ENLACES DEL SEGUNDO NIVEL ========================================================= */ #_desktop_megamenu .cat-drop-menu .cat-drop-menu > .avaorg-sub-inner > li > a { min-height: 42px !important; padding: 10px 38px 10px 14px !important; background: transparent !important; color: #686868 !important; font-family: "Oxygen", sans-serif !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.35 !important; border-radius: 9px !important; } /* ========================================================= 03.02 · HOVER SEGUNDO NIVEL ========================================================= */ #_desktop_megamenu .cat-drop-menu .cat-drop-menu > .avaorg-sub-inner > li > a:hover { color: #678e8a !important; background: #f2f7f6 !important; transform: translateX(2px); } /* ========================================================= 03.03 · FLECHA SEGUNDO NIVEL ========================================================= */ #_desktop_megamenu .cat-drop-menu .cat-drop-menu li:has(> .cat-drop-menu) > a:hover::after { border-color: #678e8a !important; } /* ========================================================= 04 · FLECHA DEL MENÚ PRINCIPAL ========================================================= */ #_desktop_megamenu .avaorg-menu-horizontal > .menu-content > .hasChild > a > .icon-angle-down { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: 6px !important; font-size: 9px !important; opacity: 0.75; transition: transform 0.18s ease, color 0.18s ease !important; } /* Gira la flecha cuando se abre / hover */ #_desktop_megamenu .avaorg-menu-horizontal > .menu-content > .hasChild:hover > a > .icon-angle-down { color: #d06547 !important; transform: rotate(180deg); } /* ========================================================= 05 · ESTADO ACTIVO / HOVER MENÚ PRINCIPAL ========================================================= */ #_desktop_megamenu .avaorg-menu-horizontal > .menu-content > .menu-item:hover > a, #_desktop_megamenu .avaorg-menu-horizontal > .menu-content > .menu-item.active > a { color: #d06547 !important; } /* ========================================================= 06 · CONTROLES DE MÓVIL No deben aparecer en escritorio ========================================================= */ #_desktop_megamenu .icon-drop-mobile { display: none !important; } } /* ========================================================= 07 · TABLET GRANDE Reducimos algo el espacio del menú ========================================================= */ @media (max-width: 1199px) and (min-width: 992px) { .elementor-12 .elementor-element.elementor-element-234f2b9 .avaorg-menu-horizontal > .menu-content > .menu-item > a { padding-left: 9px !important; padding-right: 9px !important; font-size: 13px !important; } } /* ========================================================= 08 · EVITAR QUE LOS SUBMENÚS QUEDEN DETRÁS ========================================================= */ #header, #header-normal, .sticky-header, #_desktop_megamenu, .avaorg-menu-horizontal, .avaorg-menu-horizontal .menu-content { overflow: visible !important; } #_desktop_megamenu { position: relative !important; z-index: 9998 !important; } /* ========================================================= CORREGIR DOBLE BORDE DEL SUBMENÚ ========================================================= */ @media (min-width: 992px) { #_desktop_megamenu .cat-drop-menu > .avaorg-sub-inner { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; } #_desktop_megamenu .cat-drop-menu .avaorg-sub-inner { box-shadow: none !important; } } /* ========================================================= SUBSUBMENÚS LARGOS · 3 COLUMNAS ========================================================= */ @media (min-width: 992px) { /* --------------------------------------------------------- Cuando hay 10 elementos o más → 3 columnas --------------------------------------------------------- */ #_desktop_megamenu .cat-drop-menu .cat-drop-menu > .avaorg-sub-inner:has(> li:nth-child(10)) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 100% !important; column-gap: 14px !important; align-items: start !important; } /* --------------------------------------------------------- CAJA DEL SUBSUBMENÚ LARGO --------------------------------------------------------- */ #_desktop_megamenu .cat-drop-menu li > .cat-drop-menu:has( > .avaorg-sub-inner > li:nth-child(10) ) { width: 530px !important; min-width: 530px !important; max-width: 530px !important; max-height: calc(100vh - 150px) !important; padding: 10px !important; overflow-y: auto !important; overflow-x: hidden !important; } /* --------------------------------------------------------- ELEMENTOS --------------------------------------------------------- */ #_desktop_megamenu .cat-drop-menu .cat-drop-menu > .avaorg-sub-inner:has(> li:nth-child(10)) > li { width: 100% !important; min-width: 0 !important; margin: 0 !important; } /* --------------------------------------------------------- ENLACES MÁS COMPACTOS --------------------------------------------------------- */ #_desktop_megamenu .cat-drop-menu .cat-drop-menu > .avaorg-sub-inner:has(> li:nth-child(10)) > li > a { min-height: 36px !important; padding: 8px 10px !important; font-size: 13px !important; line-height: 1.25 !important; white-space: normal !important; } /* --------------------------------------------------------- SEPARADORES ADAPTADOS A LAS COLUMNAS --------------------------------------------------------- */ #_desktop_megamenu .cat-drop-menu .cat-drop-menu > .avaorg-sub-inner:has(> li:nth-child(10)) > li:not(:last-child)::after { left: 10px !important; right: 10px !important; } /* --------------------------------------------------------- SCROLL DE SEGURIDAD Solo aparecerá si aun así no cabe verticalmente --------------------------------------------------------- */ #_desktop_megamenu .cat-drop-menu li > .cat-drop-menu:has( > .avaorg-sub-inner > li:nth-child(10) )::-webkit-scrollbar { width: 5px; } #_desktop_megamenu .cat-drop-menu li > .cat-drop-menu:has( > .avaorg-sub-inner > li:nth-child(10) )::-webkit-scrollbar-thumb { background: rgba(103, 142, 138, 0.35); border-radius: 20px; } #_desktop_megamenu .cat-drop-menu li > .cat-drop-menu:has( > .avaorg-sub-inner > li:nth-child(10) )::-webkit-scrollbar-track { background: transparent; } } /* ========================================================= SEPARACIÓN ENTRE SUBMENÚ Y SUBSUBMENÚ ========================================================= */ @media (min-width: 992px) { /* Separamos visualmente el segundo nivel */ #_desktop_megamenu .cat-drop-menu li > .cat-drop-menu { left: calc(100% + 12px) !important; } /* Puente invisible entre ambas cajas para que el submenu no se cierre al mover el ratón */ #_desktop_megamenu .cat-drop-menu li > .cat-drop-menu::before { content: ""; position: absolute; top: 0; left: -13px; width: 13px; height: 100%; background: transparent; pointer-events: auto; } } /* ========================================================================== ========================================================================== ZIGZAG · PÁGINAS DE CATEGORÍA Basado en Figma node 6245:2411 ========================================================================== ========================================================================== */ /* ========================================================================== 01 · VARIABLES VISUALES ========================================================================== */ body#category { --zz-text: #434343; --zz-gray-1: #cccccc; --zz-gray-2: #dbdbdb; --zz-bg: #f4f4f4; --zz-white: #ffffff; --zz-red: #d06547; --zz-green: #679473; --zz-yellow: #e7ab39; --zz-turquoise: #678e8a; } /* ========================================================================== 02 · FONDO GENERAL ========================================================================== */ body#category #wrapper { background: var(--zz-bg) !important; } /* ========================================================================== 03 · CABECERA / HERO DE CATEGORÍA Figma: 120px ========================================================================== */ body#category #hero_section { min-height: 120px !important; margin: 0 !important; padding: 0 !important; background: var(--zz-gray-2) !important; } body#category #hero_section > .container { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 1430px !important; min-height: 120px !important; margin: 0 auto !important; padding: 20px 15px !important; } body#category #hero_section .page-title-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body#category #hero_section .page-header { margin: 0 !important; padding: 0 !important; } body#category #hero_section .page-header h1 { margin: 0 !important; padding: 0 !important; color: var(--zz-text) !important; font-family: "Federo", serif !important; font-size: 52px !important; font-weight: 400 !important; line-height: 56px !important; text-align: center !important; } /* Breadcrumb actual. De momento lo dejamos funcional hasta que pongamos el subtítulo dinámico específico de cada categoría. */ body#category #hero_section .breadcrumb { margin: 0 !important; padding: 0 !important; background: transparent !important; color: var(--zz-text) !important; font-family: "Oxygen", sans-serif !important; font-size: 16px !important; line-height: 24px !important; } /* ========================================================================== 04 · CONTENEDOR DEL CATÁLOGO Figma: 1430px ========================================================================== */ body#category #wrapper > .container { width: 100% !important; max-width: 1430px !important; margin-left: auto !important; margin-right: auto !important; padding: 90px 12px 0 !important; } body#category #wrapper > .container > .row { display: flex !important; align-items: flex-start !important; margin-left: -15px !important; margin-right: -15px !important; } /* ========================================================================== 05 · COLUMNA IZQUIERDA ========================================================================== */ @media (min-width: 992px) { body#category #left-column { flex: 0 0 25% !important; width: 25% !important; max-width: 25% !important; padding-left: 15px !important; padding-right: 15px !important; } body#category #content-wrapper { flex: 0 0 75% !important; width: 75% !important; max-width: 75% !important; padding-left: 15px !important; padding-right: 15px !important; padding-bottom: 12px !important; } } /* ========================================================================== 06 · MENÚ LATERAL DE CATEGORÍAS ========================================================================== */ body#category #left-column .block-categories { width: 100% !important; margin: 0 0 30px !important; padding: 0 !important; background: var(--zz-white) !important; border: 1px solid var(--zz-gray-1) !important; border-radius: 20px !important; box-shadow: none !important; overflow: hidden !important; } /* Cabecera gris */ body#category #left-column .block-categories .category-top-menu > .block-title { display: flex !important; align-items: center !important; min-height: 55px !important; margin: 0 !important; padding: 15px !important; background: var(--zz-gray-2) !important; border: 0 !important; border-bottom: 1px solid var(--zz-gray-1) !important; } /* Sustituimos visualmente "Inicio" por "Inicio | Menú" */ body#category #left-column .block-categories .block-title .title { color: var(--zz-text) !important; font-family: "Oxygen", sans-serif !important; font-size: 0 !important; text-decoration: none !important; } body#category #left-column .block-categories .block-title .title::after { content: "Inicio | Menú"; color: var(--zz-text); font-family: "Oxygen", sans-serif; font-size: 18px; font-weight: 700; line-height: 24px; } /* Contenido */ body#category #left-column .block-categories .block-content { margin: 0 !important; padding: 15px 20px 20px !important; background: var(--zz-white) !important; } /* Primer nivel */ body#category .block-categories .category-sub-menu > li[data-depth="0"] { position: relative !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; } body#category .block-categories .category-sub-menu > li[data-depth="0"] > a { display: flex !important; align-items: center !important; min-height: 32px !important; padding: 4px 34px 4px 0 !important; color: var(--zz-text) !important; font-family: "Oxygen", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; text-decoration: none !important; } body#category .block-categories .category-sub-menu > li[data-depth="0"] > a:hover { color: var(--zz-red) !important; } /* Icono abrir/cerrar */ body#category .block-categories .category-sub-menu > li[data-depth="0"] > .navbar-toggler { position: absolute !important; top: 0 !important; right: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important; } /* ========================================================================== 07 · BLOQUE DE FILTROS ========================================================================== */ body#category #search_filters_wrapper { width: 100% !important; margin: 0 !important; padding: 0 !important; background: var(--zz-white) !important; border: 1px solid var(--zz-gray-2) !important; border-radius: 20px !important; box-shadow: none !important; overflow: hidden !important; } body#category #search_filters { margin: 0 !important; padding: 0 !important; background: var(--zz-white) !important; border: 0 !important; } /* Cabecera "Filtros" */ body#category #search_filters > .block-title { display: flex !important; align-items: center !important; min-height: 55px !important; margin: 0 !important; padding: 15px !important; background: var(--zz-gray-2) !important; border: 0 !important; border-bottom: 1px solid var(--zz-gray-1) !important; } body#category #search_filters > .block-title .title { margin: 0 !important; color: var(--zz-text) !important; font-family: "Oxygen", sans-serif !important; font-size: 0 !important; } body#category #search_filters > .block-title .title::after { content: "Filtros"; color: var(--zz-text); font-family: "Oxygen", sans-serif; font-size: 18px; font-weight: 700; line-height: 24px; } /* Interior */ body#category #search_filters > .block-content { padding: 5px 20px 20px !important; background: var(--zz-white) !important; } /* Cada familia de filtros */ body#category #search_filters .facet { margin: 0 !important; padding: 20px 0 16px !important; border: 0 !important; border-bottom: 1px solid var(--zz-gray-1) !important; } body#category #search_filters .facet:last-child { border-bottom: 0 !important; } /* Título de cada filtro */ body#category #search_filters .facet-title { margin: 0 0 8px !important; color: var(--zz-text) !important; font-family: "Oxygen", sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 19.2px !important; text-transform: none !important; } /* Lista */ body#category #search_filters .facet ul { margin: 0 !important; padding: 0 !important; } body#category #search_filters .facet li { min-height: 33px !important; margin: 0 !important; padding: 0 !important; } /* Label */ body#category #search_filters .facet-label { display: flex !important; align-items: center !important; width: 100% !important; min-height: 33px !important; margin: 0 !important; padding: 0 !important; cursor: pointer; } /* Checkbox */ body#category #search_filters .custom-checkbox { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 0 12px 0 0 !important; } body#category #search_filters .custom-checkbox .ps-shown-by-js { display: flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; background: var(--zz-white) !important; border: 1px solid var(--zz-gray-2) !important; border-radius: 0 !important; } /* Checkbox marcado */ body#category #search_filters .custom-checkbox input:checked + .ps-shown-by-js { background: var(--zz-turquoise) !important; border-color: var(--zz-turquoise) !important; } body#category #search_filters .checkbox-checked { color: #ffffff !important; font-size: 15px !important; } /* Texto filtros */ body#category #search_filters .search-link { display: flex !important; flex: 1 1 auto !important; align-items: center !important; justify-content: space-between !important; color: var(--zz-text) !important; font-family: "Oxygen", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; text-decoration: none !important; } body#category #search_filters .search-link:hover { color: var(--zz-red) !important; } body#category #search_filters .magnitude { margin-left: 8px !important; color: #777777 !important; font-size: 13px !important; } /* ========================================================================== 08 · ELIMINAR DESCRIPCIÓN NATIVA SUPERIOR En Figma ese texto SEO no está aquí. ========================================================================== */ body#category #js-product-list-header > .block-category { display: none !important; } /* ========================================================================== 09 · TÍTULO DEL ÁREA DE PRODUCTOS Añade un H2 con esta clase desde AvanamBuilder. ========================================================================== */ body#category .zigzag-category-products-title { width: 100% !important; margin: 0 0 30px !important; padding: 0 !important; color: var(--zz-text) !important; font-family: "Federo", serif !important; font-size: 52px !important; font-weight: 400 !important; line-height: 56px !important; text-align: left !important; } /* ========================================================================== 10 · SUBCATEGORÍAS ========================================================================== */ body#category #subcategories { width: 100% !important; margin: 0 0 30px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } body#category #subcategories .subcategory-image{ border-radius: 0px !important; } /* Heading */ body#category #subcategories .subcategory-heading { margin: 0 !important; padding: 0 !important; color: var(--zz-text) !important; font-family: "Oxygen", sans-serif !important; font-size: 22px !important; font-weight: 700 !important; line-height: 26.4px !important; text-transform: none !important; } /* Lista */ body#category #subcategories .subcategories-list { display: flex !important; align-items: flex-start !important; gap: 20px !important; width: 100% !important; margin: 0 !important; padding: 20px 0 10px !important; overflow-x: auto !important; overflow-y: hidden !important; list-style: none !important; } /* Cada categoría */ body#category #subcategories .subcategory-item { flex: 0 0 172px !important; width: 172px !important; min-width: 172px !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } #subcategories ul li .subcategory-image a{ padding:0px; } /* Imagen */ body#category #subcategories .subcategory-image { width: 172px !important; height: 172px !important; margin: 0 !important; padding: 0 !important; border-radius: 0px !important; overflow: hidden !important; } body#category #subcategories .subcategory-image a, body#category #subcategories .subcategory-image picture { display: block !important; width: 172px !important; height: 172px !important; } body#category #subcategories .subcategory-image img { display: block !important; width: 172px !important; height: 172px !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; border: 0 !important; border-radius: 20px !important; transition: transform 0.25s ease !important; } body#category #subcategories .subcategory-item:hover .subcategory-image img { transform: scale(1.035) !important; } /* Nombre */ body#category #subcategories .subcategory-item h5 { margin: 0 !important; padding: 0 !important; } body#category #subcategories .subcategory-name { display: block !important; margin-top: 6px !important; padding: 0 !important; color: var(--zz-text) !important; font-family: "Oxygen", sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 20.4px !important; text-align: center !important; text-decoration: none !important; } /* ========================================================================== 11 · CONTROLES DEL LISTADO ========================================================================== */ body#category #js-product-list-top { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 51px !important; margin: 0 0 15px !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* Izquierda */ body#category #js-product-list-top .total-products { display: flex !important; align-items: center !important; gap: 15px !important; margin: 0 !important; padding: 0 !important; } body#category #js-product-list-top .total-products p { margin: 0 !important; padding: 0 !important; color: var(--zz-text) !important; font-family: "Oxygen", sans-serif !important; font-size: 16px !important; line-height: 24px !important; } /* Botones vista */ body#category .grid_list { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } body#category .grid_list li { width: 35px !important; height: 35px !important; margin: 0 !important; padding: 0 !important; background: var(--zz-white) !important; border: 1px solid var(--zz-gray-2) !important; border-radius: 5px !important; overflow: hidden !important; } body#category .grid_list li a { display: flex !important; align-items: center !important; justify-content: center !important; width: 33px !important; height: 33px !important; margin: 0 !important; padding: 0 !important; } body#category .grid_list li.selected { background: var(--zz-red) !important; border-color: var(--zz-red) !important; } body#category .grid_list li.selected svg { fill: #ffffff !important; } body#category .grid_list li:not(.selected) svg { fill: var(--zz-text) !important; } /* ========================================================================== 12 · ORDENAR POR ========================================================================== */ body#category #js-product-list-top .product-sort { margin: 0 !important; padding: 0 !important; } body#category #js-product-list-top .sort-by-row { display: flex !important; align-items: center !important; justify-content: flex-end !important; margin: 0 !important; } body#category #js-product-list-top .sort-by { width: auto !important; margin: 0 !important; padding: 0 15px 0 0 !important; color: var(--zz-text) !important; font-family: "Oxygen", sans-serif !important; font-size: 16px !important; line-height: 24px !important; text-align: right !important; } body#category .products-sort-order { width: 322px !important; max-width: 322px !important; margin: 0 !important; padding: 0 !important; } body#category .products-sort-order .select-title { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; height: 42px !important; margin: 0 !important; padding: 8px 11px !important; background: var(--zz-white) !important; color: var(--zz-text) !important; font-family: "Oxygen", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; border: 1px solid var(--zz-gray-2) !important; border-radius: 0 !important; box-shadow: none !important; } /* Dropdown */ body#category .products-sort-order .dropdown-menu { width: 100% !important; margin-top: 4px !important; padding: 6px !important; background: #ffffff !important; border: 1px solid var(--zz-gray-2) !important; box-shadow: 0 8px 25px rgba(67, 67, 67, 0.10) !important; } body#category .products-sort-order .select-list { display: block !important; padding: 9px 10px !important; color: var(--zz-text) !important; font-family: "Oxygen", sans-serif !important; font-size: 14px !important; text-decoration: none !important; } body#category .products-sort-order .select-list:hover, body#category .products-sort-order .select-list.current { color: var(--zz-red) !important; background: #faf5f2 !important; } /* ========================================================================== 22 · PAGINACIÓN ========================================================================== */ body#category .pagination { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin: 16px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } body#category .pagination > .col-md-4 { padding: 0 !important; color: var(--zz-text) !important; font-family: "Oxygen", sans-serif !important; font-size: 14px !important; line-height: 40px !important; } body#category .pagination > .col-md-8 { padding: 0 !important; } body#category .pagination .page-list { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 5px !important; margin: 0 !important; padding: 0 !important; } body#category .pagination .page-list li { width: 35px !important; height: 35px !important; margin: 0 !important; padding: 0 !important; background: var(--zz-gray-2) !important; border: 0 !important; border-radius: 5px !important; overflow: hidden !important; } body#category .pagination .page-list li a { display: flex !important; align-items: center !important; justify-content: center !important; width: 35px !important; height: 35px !important; margin: 0 !important; padding: 0 !important; color: var(--zz-text) !important; font-family: "Oxygen", sans-serif !important; font-size: 14px !important; text-decoration: none !important; } body#category .pagination .page-list li.current { background: var(--zz-red) !important; } body#category .pagination .page-list li.current a { color: #ffffff !important; } /* ========================================================================== 23 · TABLET ========================================================================== */ @media (max-width: 1199px) and (min-width: 992px) { body#category .products-sort-order { width: 250px !important; } } /* ========================================================================== 24 · MÓVIL / TABLET ========================================================================== */ @media (max-width: 991px) { body#category #wrapper > .container { padding-top: 40px !important; } body#category #content-wrapper { width: 100% !important; max-width: 100% !important; } body#category #hero_section .page-header h1 { font-size: 38px !important; line-height: 44px !important; } body#category .zigzag-category-products-title { font-size: 38px !important; line-height: 44px !important; } } /* ========================================================================== 25 · MÓVIL PEQUEÑO ========================================================================== */ @media (max-width: 575px) { body#category #js-product-list-top { flex-wrap: wrap !important; gap: 15px !important; } body#category .products-sort-order { width: 100% !important; max-width: none !important; } } /* ========================================================================== ========================================================================== ZIGZAG · PRODUCTOS HOME FIGMA: - 6011:11145 - 6011:11152 Solo afecta al widget con clase: .zigzag-product-grid ========================================================================== ========================================================================== */ /* ========================================================================== 01 · SECCIÓN COMPLETA ========================================================================== */ .elementor-section:has(.zigzag-product-grid) { position: relative !important; width: 100% !important; margin: 0 !important; padding: 140px 0 0 !important; background: #f4f4f4 !important; overflow: visible !important; } /* ========================================================================== 02 · TÍTULO "DESCUBRE NUESTRAS NOVEDADES" FIGMA: Federo 52 / 56 ========================================================================== */ .elementor-section:has(.zigzag-product-grid) .elementor-widget-heading .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: #434343 !important; font-family: "Federo", serif !important; font-size: 52px !important; font-weight: 400 !important; line-height: 56px !important; text-align: center !important; text-transform: none !important; } /* ========================================================================== 03 · WIDGET 60px entre H2 y productos ========================================================================== */ .zigzag-product-grid { position: relative !important; width: 100% !important; max-width: 1429px !important; margin: 60px auto 0 !important; padding: 0 !important; background: transparent !important; } /* Elementor */ .zigzag-product-grid .elementor-widget-container { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; } /* ========================================================================== 04 · CONTENEDORES AVANAM ========================================================================== */ .zigzag-product-grid .products.ava-grid-items, .zigzag-product-grid .wrapper-items { position: relative !important; width: 100% !important; max-width: 1429px !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; overflow: visible !important; } /* ========================================================================== 05 · GRID FIGMA: 1429px 5 columnas visuales de ~286px 2 filas 30px entre filas La tarjeta mide 256px y queda centrada dentro de cada columna. ========================================================================== */ .zigzag-product-grid .product-loop { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; column-gap: 0 !important; row-gap: 30px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; transform: none !important; overflow: visible !important; } /* ========================================================================== 06 · CADA ITEM ========================================================================== */ .zigzag-product-grid .swiper-slide.item { display: flex !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; max-width: none !important; height: 434px !important; min-height: 434px !important; margin: 0 !important; padding: 0 15px !important; box-sizing: border-box !important; background: transparent !important; } /* ========================================================================== 07 · WRAPPER PRODUCTO ========================================================================== */ .zigzag-product-grid .product.product-grid-style-1 { position: relative !important; width: 100% !important; max-width: 256px !important; height: 434px !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-sizing: border-box !important; } /* ========================================================================== 08 · TARJETA FIGMA: 256 × 434 / radius 20 ========================================================================== */ .zigzag-product-grid article.product-miniature { position: relative !important; display: block !important; width: 100% !important; height: 434px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 0 !important; border-radius: 20px !important; box-shadow: none !important; overflow: hidden !important; box-sizing: border-box !important; transform: none !important; } /* El tema no debe mover la tarjeta en hover */ .zigzag-product-grid article.product-miniature:hover { margin: 0 !important; border-radius: 20px !important; box-shadow: none !important; transform: none !important; } /* ========================================================================== 09 · CONTENEDOR INTERNO ========================================================================== */ .zigzag-product-grid .thumbnail-container { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; height: 434px !important; min-height: 434px !important; max-height: 434px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 0 !important; border-radius: 20px !important; box-shadow: none !important; overflow: hidden !important; box-sizing: border-box !important; transform: none !important; } /* ========================================================================== 10 · ZONA IMAGEN FIGMA: 302px ========================================================================== */ .zigzag-product-grid .thumbnail-top { position: relative !important; flex: 0 0 302px !important; width: 100% !important; height: 302px !important; min-height: 302px !important; max-height: 302px !important; margin: 0 !important; padding: 0 !important; background: #dcdbdb !important; border: 0 !important; border-radius: 20px 20px 0 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* ========================================================================== 11 · LINK + PICTURE ========================================================================== */ .zigzag-product-grid .product-thumbnail, .zigzag-product-grid .product-thumbnail picture { position: relative !important; display: block !important; width: 100% !important; height: 302px !important; margin: 0 !important; padding: 0 !important; background: #dcdbdb !important; border: 0 !important; overflow: hidden !important; line-height: 0 !important; } /* ========================================================================== 12 · IMAGEN ========================================================================== */ .zigzag-product-grid .product-thumbnail img { position: absolute !important; top: 0 !important; left: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; background: #dcdbdb !important; border: 0 !important; border-radius: 20px 20px 0 0 !important; transition: transform .25s ease !important; } .zigzag-product-grid article.product-miniature:hover .product-thumbnail img { transform: scale(1.025) !important; } /* ========================================================================== 13 · ELEMENTOS NATIVOS QUE SOBRAN SOBRE LA IMAGEN ========================================================================== */ .zigzag-product-grid .highlighted-informations { display: none !important; } /* ========================================================================== 14 · BADGES FIGMA: 21px alto / radius 10 ========================================================================== */ .zigzag-product-grid .product-flags { position: absolute !important; top: 10px !important; left: 9px !important; z-index: 20 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: auto !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .zigzag-product-grid .product-flags .product-flag { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: 21px !important; min-height: 21px !important; margin: 0 0 5px !important; padding: 1px 6px 2px !important; color: #ffffff !important; font-family: "Oxygen", sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 18px !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important; text-transform: uppercase !important; } /* Nuevo */ .zigzag-product-grid .product-flags .product-flag.new { background: #679473 !important; } /* Descuento */ .zigzag-product-grid .product-flags .product-flag.discount { background: #e7ab39 !important; font-weight: 700 !important; } /* Sin stock */ .zigzag-product-grid .product-flags .product-flag.out_of_stock { background: #d06547 !important; } /* Si hay descuento, priorizamos descuento frente a NUEVO */ .zigzag-product-grid .product-flags:has(.discount) .new { display: none !important; } /* ========================================================================== 15 · ACCIONES NATIVAS SOBRE IMAGEN No aparecen en el Figma. ========================================================================== */ .zigzag-product-grid .mini-actions { display: none !important; } .zigzag-product-grid article.product-miniature > .wishlist-button-add { display: none !important; } /* ========================================================================== 16 · PARTE INFERIOR 434 - 302 = 132px ========================================================================== */ .zigzag-product-grid .product-description { position: relative !important; flex: 0 0 132px !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; height: 132px !important; min-height: 132px !important; max-height: 132px !important; margin: 0 !important; padding: 15px 10px !important; background: #ffffff !important; border: 0 !important; border-radius: 0 0 20px 20px !important; box-shadow: none !important; box-sizing: border-box !important; text-align: center !important; overflow: hidden !important; transform: none !important; } /* ========================================================================== 17 · OCULTAR INFORMACIÓN NO PRESENTE EN EL FIGMA ========================================================================== */ .zigzag-product-grid .brand-title, .zigzag-product-grid .availability, .zigzag-product-grid .product-desc, .zigzag-product-grid .product-description > .product-add-to-cart { display: none !important; } /* ========================================================================== 18 · TÍTULO PRODUCTO ========================================================================== */ .zigzag-product-grid .product-title { flex: 0 0 52px !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; text-align: center !important; } .zigzag-product-grid .product-title a { display: -webkit-box !important; width: 100% !important; max-height: 45px !important; margin: 0 !important; padding: 0 !important; color: #434343 !important; font-family: "Oxygen", sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 22.4px !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; } /* ========================================================================== 19 · VALORACIONES FIGMA: 20px ========================================================================== */ .zigzag-product-grid .product-list-reviews { flex: 0 0 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; text-align: center !important; } .zigzag-product-grid .grade-stars { display: inline-flex !important; align-items: center !important; height: 20px !important; margin: 0 !important; padding: 0 !important; } /* Número de opiniones */ .zigzag-product-grid .comments-nb { display: inline-flex !important; align-items: center !important; margin: 0 0 0 5px !important; color: #434343 !important; font-family: "Oxygen", sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 20px !important; } /* ========================================================================== 20 · PRECIO FIGMA: Oxygen 18 / #678E8A ========================================================================== */ .zigzag-product-grid .product-price-and-shipping { flex: 0 0 30px !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; margin: 0 !important; padding: 7px 0 0 !important; color: #678e8a !important; font-family: "Oxygen", sans-serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 23px !important; text-align: center !important; opacity: 1 !important; visibility: visible !important; box-sizing: border-box !important; } .zigzag-product-grid .price, .zigzag-product-grid .price-sale { color: #678e8a !important; font-family: "Oxygen", sans-serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 23px !important; } /* Precio anterior */ .zigzag-product-grid .regular-price { margin-right: 10px !important; color: #678e8a !important; font-family: "Oxygen", sans-serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 23px !important; opacity: 1 !important; text-decoration: line-through !important; } /* No mostramos texto tipo "-10% Off" junto al precio */ .zigzag-product-grid .discount-product { display: none !important; } /* ========================================================================== 21 · QUITAR CUALQUIER BORDE / SOMBRA NATIVA ========================================================================== */ .zigzag-product-grid .product, .zigzag-product-grid .product-miniature, .zigzag-product-grid .thumbnail-container, .zigzag-product-grid .thumbnail-top, .zigzag-product-grid .product-thumbnail, .zigzag-product-grid .product-description { box-shadow: none !important; } /* ========================================================================== 22 · RESPONSIVE ========================================================================== */ /* 4 productos */ @media (max-width: 1199px) { .elementor-section:has(.zigzag-product-grid) { padding-top: 100px !important; } .zigzag-product-grid { padding-left: 15px !important; padding-right: 15px !important; } .zigzag-product-grid .product-loop { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* 3 productos */ @media (max-width: 991px) { .elementor-section:has(.zigzag-product-grid) .elementor-widget-heading .elementor-heading-title { font-size: 44px !important; line-height: 50px !important; } .zigzag-product-grid .product-loop { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* 2 productos */ @media (max-width: 767px) { .elementor-section:has(.zigzag-product-grid) { padding-top: 70px !important; } .elementor-section:has(.zigzag-product-grid) .elementor-widget-heading .elementor-heading-title { font-size: 36px !important; line-height: 42px !important; } .zigzag-product-grid { margin-top: 40px !important; } .zigzag-product-grid .product-loop { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 20px !important; } .zigzag-product-grid .swiper-slide.item { padding-left: 7px !important; padding-right: 7px !important; } } /* 1 producto */ @media (max-width: 480px) { .zigzag-product-grid .product-loop { grid-template-columns: 1fr !important; } .zigzag-product-grid .swiper-slide.item { padding-left: 0 !important; padding-right: 0 !important; } } body#category #subcategories .subcategory-image { width: 172px !important; height: 172px !important; overflow: hidden !important; border-radius: 20px !important; margin: 0 auto !important; } body#category #subcategories .subcategory-image > a.img, body#category #subcategories .subcategory-image picture { display: block !important; width: 172px !important; height: 172px !important; overflow: hidden !important; } body#category #subcategories .subcategory-image img { display: block !important; width: 172px !important; height: 172px !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; }