/**
* Zippyn Search-Location — Redesign 2026 (overlay)
*
* Capa de override visual sobre la pantalla `mobile/page-search-location.php`
* (vista Mapa + Lista). NO toca PHP/queries/Leaflet/markup.
*
* Spec: tipografía Inter/-apple-system, primario #071828, WhatsApp #22c55e, PRO #f59e0b.
* Grid 8px, mobile-first 375/390px.
*
* Body class root: `body.zp-sl-category-mode` (la página search-location en modo categoría)
* + `body.page-template-page-search-location` (resto de variantes).
*
* Carga última en la cascada (prioridad 220) — gana a:
* - zp-search-location-category.css
* - zp-search-location-app-2026.css
* - zp-home-mobile-premium-2026.css
* - readability-large-2027.css
*/
/* ============================================================
* 1. DESIGN TOKENS (reutilizamos los del home redesign si existe)
* ============================================================ */
body.zp-sl-category-mode,
body.page-template-page-search-location {
--zp-c-primary: #071828;
--zp-c-primary-dark: #1e3bbf;
--zp-c-primary-bg: #eff4ff;
--zp-c-primary-bord: #c7d2fe;
--zp-c-wa: #22c55e;
--zp-c-wa-press: #16a34a;
--zp-c-pro: #f59e0b;
--zp-c-pro-bg: #fef3c7;
--zp-c-pro-bord: #fcd34d;
--zp-c-pro-text: #92400e;
--zp-c-text-1: #111827;
--zp-c-text-2: #6b7280;
--zp-c-text-3: #9ca3af;
--zp-c-text-strong-dark: #374151;
--zp-c-text-inv: #ffffff;
--zp-c-bg-page: #f9fafb;
--zp-c-bg-card: #e8ecf2;
--zp-sl-card-surface: linear-gradient(165deg, #eceff4 0%, #dfe6ef 100%);
--zp-sl-card-surface-pro: linear-gradient(165deg, #e9eef5 0%, #d8e2ef 100%);
--zp-c-bg-soft: #f3f4f6;
--zp-c-bg-pill-active-soft: #eff2ff;
--zp-c-border: #e5e7eb;
--zp-c-border-strong: #d1d5db;
--zp-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
--zp-r-card: 14px;
--zp-r-btn: 10px;
--zp-r-pill: 999px;
--zp-r-badge: 6px;
--zp-r-icon: 10px;
--zp-trans: all 0.15s ease;
/* Mismo azul que header (zp-header-global-lock: --zp-header-bg) */
--zp-sl-top-bg: var(--zp-header-bg, #0b224f);
}
/* ============================================================
* 2. BARRA DE UBICACIÓN + FILTROS (toolbar superior)
*
* `.zp-sl-explore--toolbar` es el contenedor azul que continúa el topbar.
* `.zp-sl-explore__location` es el search box blanco con texto + "Cambiar" + filtro.
* ============================================================ */
body.zp-sl-category-mode .zp-sl-explore.zp-sl-explore--toolbar,
body.page-template-page-search-location .zp-sl-explore.zp-sl-explore--toolbar {
background: var(--zp-sl-top-bg, #0b224f) !important;
padding: 12px 16px 6px !important;
margin: 0 calc(-1 * var(--zp-sl-pad, 16px)) 0 !important;
width: calc(100% + 2 * var(--zp-sl-pad, 16px)) !important;
max-width: none !important;
border: 0 !important;
border-bottom: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body.zp-sl-category-mode .zp-sl-explore__masthead,
body.zp-sl-category-mode .zp-sl-explore__masthead--compact {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
/* Search box: tarjeta blanca con map-pin + texto + cambiar + filtro */
body.zp-sl-category-mode .zp-sl-explore__location,
body.zp-sl-category-mode .zp-sl-explore__location--toolbar {
background: #fff !important;
border-radius: 12px !important;
border: 0 !important;
padding: 10px 12px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
margin: 0 !important;
}
body.zp-sl-category-mode .zp-sl-explore__loc-pin,
body.zp-sl-category-mode .zp-sl-explore__location i.fa-map-marker {
color: var(--zp-c-primary) !important;
font-size: 17px !important;
flex: 0 0 auto !important;
margin: 0 !important;
}
body.zp-sl-category-mode .zp-sl-explore__loc-text {
font-size: 13px !important;
color: var(--zp-c-text-strong-dark) !important;
font-weight: 500 !important;
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
margin: 0 !important;
padding: 0 !important;
}
body.zp-sl-category-mode .zp-sl-explore__loc-actions {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex: 0 0 auto !important;
}
body.zp-sl-category-mode .zp-sl-explore__loc-change,
body.zp-sl-category-mode .zp-sl-explore__loc-change.zp-js-geolocate {
background: transparent !important;
color: var(--zp-c-primary) !important;
font-size: 12px !important;
font-weight: 500 !important;
border: 0 !important;
padding: 4px 6px !important;
cursor: pointer !important;
box-shadow: none !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
body.zp-sl-category-mode .zp-sl-explore__filter-btn,
body.zp-sl-category-mode .zp-sl-filters-toggle {
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
background: var(--zp-c-bg-pill-active-soft) !important;
color: var(--zp-c-primary) !important;
border: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
cursor: pointer !important;
box-shadow: none !important;
transition: var(--zp-trans);
}
body.zp-sl-category-mode .zp-sl-explore__filter-btn:active {
transform: scale(0.95);
background: #e5e7eb !important;
}
/* ============================================================
* 3. RAILS DE RUBROS Y CATEGORÍAS (pills)
*
* `.zp-sl-cat-rail-stack` contiene los stacks de pills (Rubros + Categorías).
* Cada stack tiene `__label` + `.zp-sl-cat-rail` con N `.zp-sl-cat-rail__btn`.
* ============================================================ */
body.zp-sl-category-mode .zp-sl-cat-rail-stack,
body.zp-sl-category-mode .zp-sl-cat-rail-stack--with-macros {
background: var(--zp-sl-top-bg, #0b224f) !important;
padding: 2px 0 14px !important;
border: none !important;
margin: 0 !important;
width: 100% !important;
max-width: none !important;
border-radius: 0 0 22px 22px !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack__label {
font-size: 12px !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.92) !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
margin: 0 0 7px !important;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
padding: 3px 10px 3px 8px !important;
background: rgba(255, 255, 255, 0.14) !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
border-radius: 999px !important;
width: fit-content !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack__label::before {
background: #fff !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-wrap,
body.zp-sl-category-mode .zp-sl-cat-rail-wrap--cats,
body.zp-sl-category-mode .zp-sl-cat-rail-wrap--macros {
display: block !important;
margin-bottom: 10px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-wrap:last-child,
body.zp-sl-category-mode .zp-sl-cat-rail-stack__group:last-child .zp-sl-cat-rail-wrap {
margin-bottom: 0 !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail,
body.zp-sl-category-mode .zp-sl-cat-rail--macro,
body.zp-sl-category-mode .zp-sl-cat-rail--cats {
display: flex !important;
gap: 6px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
-webkit-overflow-scrolling: touch;
}
body.zp-sl-category-mode .zp-sl-cat-rail::-webkit-scrollbar {
display: none !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail__btn,
body.zp-sl-category-mode .zp-sl-cat-rail__btn--all,
body.zp-sl-category-mode .zp-sl-cat-rail__btn--more {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
white-space: nowrap !important;
font-size: 14px !important;
font-weight: 500 !important;
padding: 7px 14px !important;
border-radius: var(--zp-r-pill) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
background: rgba(255, 255, 255, 0.08) !important;
color: rgba(255, 255, 255, 0.86) !important;
cursor: pointer !important;
transition: var(--zp-trans);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
text-transform: none !important;
letter-spacing: 0 !important;
height: auto !important;
line-height: 1.4 !important;
min-width: 0 !important;
max-width: none !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn:hover {
background: rgba(255, 255, 255, 0.14) !important;
color: #fff !important;
border-color: rgba(255, 255, 255, 0.34) !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail__btn:active {
transform: scale(0.95);
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn--active,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn.zp-sl-cat-rail__btn--active {
background: #fff !important;
color: var(--zp-header-bg, #0b224f) !important;
border-color: rgba(255, 255, 255, 0.98) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail__btn .zp-sl-cat-rail__label {
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
color: inherit !important;
margin: 0 !important;
padding: 0 !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail__media,
body.zp-sl-category-mode .zp-sl-cat-rail__media--svg {
width: 14px !important;
height: 14px !important;
flex: 0 0 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail__media img,
body.zp-sl-category-mode .zp-sl-cat-rail__media svg {
width: 14px !important;
height: 14px !important;
}
/* ============================================================
* 4. TOGGLE MAPA / LISTA — segmented control
*
* `.zp-sl-mobile-map-list-toggle.zp-sl-mlt--segmented`
* Botones: `.zp-sl-mlt-btn` / `.zp-sl-mlt-btn--active`
* ============================================================ */
body.zp-sl-category-mode .zp-sl-mobile-map-list-toggle,
body.zp-sl-category-mode .zp-sl-mlt--segmented {
margin: 10px 16px !important;
background: #091522 !important;
border-radius: 10px !important;
padding: 3px !important;
display: flex !important;
gap: 0 !important;
border: 0 !important;
box-shadow: none !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
}
body.zp-sl-category-mode .zp-sl-mlt-btn {
flex: 1 1 auto !important;
text-align: center !important;
padding: 8px 0 !important;
border-radius: 8px !important;
font-size: 12px !important;
font-weight: 500 !important;
color: var(--zp-c-text-3) !important;
background: transparent !important;
border: 0 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
box-shadow: none !important;
transition: var(--zp-trans);
text-transform: none !important;
letter-spacing: 0 !important;
height: auto !important;
line-height: 1.3 !important;
min-height: 0 !important;
}
body.zp-sl-category-mode .zp-sl-mlt-btn .zp-sl-mlt-ico,
body.zp-sl-category-mode .zp-sl-mlt-btn i.fa {
font-size: 14px !important;
color: inherit !important;
}
body.zp-sl-category-mode .zp-sl-mlt-btn--active,
body.zp-sl-category-mode .zp-sl-mlt-btn.zp-sl-mlt-btn--active {
background: #fff !important;
color: var(--zp-c-primary) !important;
border: 0.5px solid var(--zp-c-border) !important;
font-weight: 600 !important;
}
/* ============================================================
* 5. CONTENEDOR DEL MAPA
*
* `#google_canvas_wrap` o `.zp-sl-map-col` envuelve el Leaflet.
* Mobile: edge-to-edge (sin márgenes laterales).
* Desktop ≥768px: con margen y border-radius.
* ============================================================ */
body.zp-sl-category-mode #google_canvas_wrap,
body.zp-sl-category-mode .zp-sl-category-map,
body.zp-sl-category-mode .zp-sl-map-col {
/* Sangra fuera del padding del .search-location-wrap para ser edge-to-edge */
margin-left: calc(-1 * var(--zp-sl-pad, 16px)) !important;
margin-right: calc(-1 * var(--zp-sl-pad, 16px)) !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
width: calc(100% + 2 * var(--zp-sl-pad, 16px)) !important;
max-width: none !important;
border-radius: 0 !important;
overflow: hidden !important;
border: none !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode #google_canvas,
body.zp-sl-category-mode .zp-sl-map-canvas {
min-height: 240px !important;
border-radius: 0 !important;
overflow: hidden !important;
}
body.zp-sl-category-mode #osm_canvas {
width: 100% !important;
min-height: 240px !important;
border-radius: 0 !important;
}
/* Controles del mapa (zoom + ubicación) */
body.zp-sl-category-mode .leaflet-control-zoom a,
body.zp-sl-category-mode .leaflet-bar a,
body.zp-sl-category-mode .leaflet-bar a:hover {
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
background: #fff !important;
border: 1px solid var(--zp-c-border) !important;
border-radius: 8px !important;
color: var(--zp-c-text-strong-dark) !important;
font-size: 16px !important;
font-weight: 600 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
}
body.zp-sl-category-mode .leaflet-control-zoom-in,
body.zp-sl-category-mode .leaflet-control-zoom-out {
margin-bottom: 6px !important;
}
/* ============================================================
* 6. BANNER "Ver lista" debajo del mapa
*
* `.zp-sl-bottom-cta` con avatares + número + botón.
* ============================================================ */
body.zp-sl-category-mode .zp-sl-bottom-cta {
margin: 0 16px 12px !important;
background: #fff !important;
border: 1px solid var(--zp-c-border) !important;
border-radius: 12px !important;
padding: 12px 14px !important;
box-shadow: none !important;
display: block !important;
}
body.zp-sl-category-mode .zp-sl-bottom-cta__inner,
body.zp-sl-category-mode .zp-sl-bottom-cta__inner--row {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 0 !important;
margin: 0 !important;
}
body.zp-sl-category-mode .zp-sl-bottom-cta__icon {
flex: 0 0 auto !important;
}
body.zp-sl-category-mode .zp-sl-bottom-cta__text {
flex: 1 1 auto !important;
min-width: 0 !important;
font-size: 11px !important;
color: var(--zp-c-text-2) !important;
line-height: 1.4 !important;
}
/* Si el texto incluye un span con número, lo agrandamos */
body.zp-sl-category-mode .zp-sl-bottom-cta__text strong,
body.zp-sl-category-mode .zp-sl-bottom-cta__text .zp-sl-bottom-cta__count {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--zp-c-primary) !important;
display: inline-block !important;
margin-right: 4px !important;
}
body.zp-sl-category-mode .zp-sl-bottom-cta__btn {
padding: 8px 14px !important;
border-radius: 8px !important;
background: #071828 !important;
color: #fff !important;
font-size: 12px !important;
font-weight: 500 !important;
border: 0 !important;
margin-left: auto !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
box-shadow: none !important;
transition: var(--zp-trans);
}
body.zp-sl-category-mode .zp-sl-bottom-cta__btn:active {
transform: scale(0.97);
background: #1e3a8a !important;
}
/* ============================================================
* 7. HEADER DE LISTA — número compacto
*
* Estructura real (inyectada por zpSyncCount en zp-search-location-category.js):
*
*
* 683
* talentos cerca tuyo para ayudarte
*
*
*
* H1 anterior (zp-sl-sheet__title--app "Soluciones cerca tuyo") → ocultamos.
* ============================================================ */
/* Ocultar H1 "Soluciones cerca tuyo" + subtítulo — demasiado espacio */
body.zp-sl-category-mode .zp-sl-sheet__head,
body.zp-sl-category-mode .zp-sl-sheet__head--app,
body.zp-sl-category-mode .zp-sl-sheet__title,
body.zp-sl-category-mode .zp-sl-sheet__title--app,
body.zp-sl-category-mode .zp-sl-sheet__subtitle,
body.zp-sl-category-mode .zp-sl-sheet__subtitle--app {
display: none !important;
}
/* Intro wrapper: padding mínimo */
body.zp-sl-category-mode .zp-sl-sheet__intro,
body.zp-sl-category-mode .zp-sl-sheet__intro--app {
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
/* contenedor del count */
body.zp-sl-category-mode .zp-sl-sheet__count,
body.zp-sl-category-mode .zp-sl-hero__count,
body.zp-sl-category-mode .zp-sl-sheet__count--app {
padding: 14px 16px 8px !important;
margin: 0 !important;
font-size: inherit !important;
}
/* Stack: fila inline número + descripción */
body.zp-sl-category-mode .zp-sl-sheet__count-stack {
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
/* El número */
body.zp-sl-category-mode .zp-sl-sheet__count-huge {
font-size: 26px !important;
font-weight: 700 !important;
color: var(--zp-c-primary) !important;
line-height: 1.1 !important;
letter-spacing: -0.02em !important;
}
/* El texto "talentos cerca tuyo…" */
body.zp-sl-category-mode .zp-sl-sheet__count-sub {
font-size: 13px !important;
font-weight: 400 !important;
color: var(--zp-c-text-2) !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
}
/* ============================================================
* 8. PILLS DE SORT
*
* `.zp-sl-chips` con `.zp-sl-chip` / `.zp-sl-chip--active`
* ============================================================ */
body.zp-sl-category-mode .zp-sl-chips {
display: flex !important;
gap: 6px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
padding: 0 16px 12px !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
}
body.zp-sl-category-mode .zp-sl-chips::-webkit-scrollbar {
display: none !important;
}
body.zp-sl-category-mode .zp-sl-chip {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-size: 11px !important;
font-weight: 500 !important;
padding: 5px 12px !important;
border-radius: var(--zp-r-pill) !important;
border: 1px solid var(--zp-c-border) !important;
background: #fff !important;
color: var(--zp-c-text-2) !important;
cursor: pointer !important;
white-space: nowrap !important;
transition: var(--zp-trans);
box-shadow: none !important;
text-transform: none !important;
letter-spacing: 0 !important;
height: auto !important;
line-height: 1.4 !important;
}
body.zp-sl-category-mode .zp-sl-chip i.fa,
body.zp-sl-category-mode .zp-sl-chip svg {
font-size: 12px !important;
}
body.zp-sl-category-mode .zp-sl-chip--active,
body.zp-sl-category-mode .zp-sl-chip.zp-sl-chip--active {
background: #1d4ed8 !important;
color: #fff !important;
border-color: #1d4ed8 !important;
}
body.zp-sl-category-mode .zp-sl-chip:active {
transform: scale(0.95);
}
/* ============================================================
* 9. CARDS DE RESULTADO — el cambio más grande
*
* Markup observado:
*
*
*
*
*
* PRO
*
*
* Nombre
*
* stars
* (N)
* Categoría
*
* texto
*
*
* heart
* whatsapp
* Ver perfil
* X.X km
*
*
*
*
* ============================================================ */
/* ============================================================
* 8. CARDS DE RESULTADO — diseño según mockup
*
* Layout:
* [Foto 80px + badge PRO] | [Título, rating, descripción, loc, dist] | [WA btn]
* ============================================================ */
/* Lista */
body.zp-sl-category-mode .result-search-location,
body.zp-sl-category-mode .zp-sl-sheet__results {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
body.zp-sl-category-mode #zp-sl-results-list > li,
body.zp-sl-category-mode .search-location-list-place > li {
padding: 0 0 10px !important;
margin: 0 !important;
float: none !important;
width: 100% !important;
box-sizing: border-box !important;
display: block !important;
}
/* Card */
body.zp-sl-category-mode .zp-sl-card {
background: var(--zp-sl-card-surface, linear-gradient(165deg, #eceff4 0%, #dfe6ef 100%)) !important;
border: 1px solid rgba(148, 163, 184, 0.32) !important;
border-radius: 16px !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
display: block !important;
transition: none !important;
}
body.zp-sl-category-mode .zp-sl-card.zp-sl-card--pro {
background: var(--zp-sl-card-surface-pro, linear-gradient(165deg, #e9eef5 0%, #d8e2ef 100%)) !important;
border: 1px solid rgba(148, 163, 184, 0.32) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
body.zp-sl-category-mode .zp-sl-card:active {
transform: none !important;
}
/* Inner — fila completa (svc2026 usa grid foto + contenido + pie de botones) */
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__inner:not(.zp-sl-card__inner--svc2026) {
display: flex !important;
align-items: stretch !important;
padding: 14px !important;
gap: 12px !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
min-height: 0 !important;
grid-template-columns: unset !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__inner--svc2026 {
display: grid !important;
grid-template-columns: 84px minmax(0, 1fr) !important;
align-items: start !important;
}
/* FOTO + nombre debajo */
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__media {
flex: 0 0 80px !important;
width: 80px !important;
min-width: 80px !important;
height: auto !important;
min-height: 80px !important;
border-radius: 0 !important;
overflow: visible !important;
position: relative !important;
background: transparent !important;
align-self: flex-start !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 4px !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__imglink:not(.zp-sl-card__imglink--initials):not(.zp-sl-card__imglink--placeholder) {
display: block !important;
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
overflow: hidden !important;
aspect-ratio: 1 / 1 !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__thumb {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
}
/* Badge PRO encima de la foto */
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__pro-label {
position: absolute !important;
top: 6px !important;
left: 6px !important;
z-index: 2 !important;
padding: 5px 11px 5px 8px !important;
border-radius: 999px !important;
line-height: 1 !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__pro-label .yrl-pro-badge__icon {
font-size: 14px !important;
}
/* CONTENIDO CENTRAL */
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__main {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
padding: 0 !important;
margin: 0 !important;
align-self: center !important;
grid-column: unset !important;
}
/* Título */
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__title,
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__titlerow h3 {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--zp-c-text-1) !important;
margin: 0 0 2px !important;
line-height: 1.25 !important;
display: block !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__title a,
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__titlerow h3 a {
color: var(--zp-c-text-1) !important;
text-decoration: none !important;
}
/* titlerow: reset del grid legacy */
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__titlerow {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
/* Rating: estrella + score + (N reseñas) */
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__rating-row {
display: flex !important;
align-items: center !important;
gap: 3px !important;
margin: 0 !important;
flex-wrap: nowrap !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__rating-row .rate-it {
color: #f59e0b !important;
line-height: 1 !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__rating-row .rate-it img,
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__rating-row .raty-svg {
width: 13px !important;
height: 13px !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__score {
font-size: 12px !important;
font-weight: 700 !important;
color: var(--zp-c-text-1) !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__revcount {
font-size: 12px !important;
color: var(--zp-c-text-2) !important;
font-weight: 400 !important;
}
/* Sin reseñas → ocultar estrellas */
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__rating-row:has(.rate-it[data-score="0"]) .rate-it,
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__rating-row:has(.rate-it[data-score=""]) .rate-it {
display: none !important;
}
/* Descripción */
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__excerpt {
font-size: 12px !important;
color: var(--zp-c-text-2) !important;
line-height: 1.4 !important;
margin: 1px 0 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Ubicación */
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__loc,
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__loc--muted {
font-size: 12px !important;
color: var(--zp-c-text-2) !important;
margin: 2px 0 0 !important;
line-height: 1.3 !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__loc .fa,
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__loc i {
color: var(--zp-c-primary) !important;
font-size: 11px !important;
flex-shrink: 0 !important;
}
/* Distancia */
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__distance {
font-size: 11px !important;
color: var(--zp-c-text-3) !important;
margin: 1px 0 0 !important;
line-height: 1.3 !important;
display: block !important;
}
/* BOTÓN WA — columna derecha, alto y verde */
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__aside:not(.zp-sl-card__actions-bottom) {
flex: 0 0 64px !important;
width: 64px !important;
min-width: 64px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
align-self: stretch !important;
grid-column: unset !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__aside:has(.zp-sl-card__rec-above-wa) {
justify-content: flex-start !important;
gap: 5px !important;
padding-top: 2px !important;
}
body.zp-sl-category-mode .zp-sl-card__aside .zp-sl-card__rec-above-wa .zp-sl-card__rec-badge,
body.zp-sl-category-mode .zp-sl-card__aside .zp-sl-card__rec-above-wa .zp-sl-card__badge--rec.zp-card-pro-badge {
font-size: 4.8px !important;
padding: 1px 2px !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__btn--wa:not(.zp-sl-card__btn--wa-text) {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
width: 58px !important;
min-height: 64px !important;
border-radius: 12px !important;
background: var(--zp-c-wa) !important;
color: #fff !important;
border: 0 !important;
text-decoration: none !important;
cursor: pointer !important;
padding: 10px 6px !important;
transition: background 0.12s ease, transform 0.12s ease !important;
box-shadow: 0 3px 10px rgba(34,197,94,.35) !important;
flex-shrink: 0 !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__btn--wa:not(.zp-sl-card__btn--wa-text):active {
transform: scale(0.95) !important;
background: var(--zp-c-wa-press) !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__btn--wa:not(.zp-sl-card__btn--wa-text) i.fa {
color: #fff !important;
font-size: 22px !important;
line-height: 1 !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__btn--wa:not(.zp-sl-card__btn--wa-text) span {
color: #fff !important;
font-size: 10px !important;
font-weight: 600 !important;
line-height: 1 !important;
text-align: center !important;
white-space: nowrap !important;
}
/* Sin teléfono → botón gris "Ver perfil" */
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__btn--wa-nophone {
background: #f1f5f9 !important;
color: var(--zp-c-text-2) !important;
box-shadow: none !important;
border: 1px solid var(--zp-c-border) !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__btn--wa-nophone i.fa,
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__btn--wa-nophone span {
color: var(--zp-c-text-2) !important;
}
/* Ocultar basura legacy */
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__badge-row,
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__probadge,
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__fav,
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__avail,
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__drive,
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__verified-badge,
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__actions {
display: none !important;
}
/* Asegurar que los nuevos elementos sean visibles */
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__badges {
display: flex !important;
visibility: visible !important;
}
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__badge,
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__btn--profile {
display: inline-flex !important;
visibility: visible !important;
}
/* ============================================================
* 10. PAGINACIÓN
* ============================================================ */
body.zp-sl-category-mode .search-location-pagination,
body.zp-sl-category-mode .result-pagination {
display: block !important;
padding: 12px 0 4px !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
text-align: center;
}
/* etiqueta "Página X de Y" */
body.zp-sl-category-mode .zp-sl-pag-label {
font-size: 12px !important;
color: #6b7280 !important;
margin-bottom: 8px !important;
text-align: center;
}
/* wrapper flex de los botones */
body.zp-sl-category-mode .search-location-pagination .paginations-wrapper,
body.zp-sl-category-mode .result-pagination .paginations-wrapper {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
background: transparent !important;
border: 0 !important;
}
/* botones individuales */
body.zp-sl-category-mode .search-location-pagination .page-link,
body.zp-sl-category-mode .result-pagination .page-link {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
border-radius: 9px !important;
border: 1.5px solid #e2e8f0 !important;
background: #fff !important;
color: #374151 !important;
font-size: 13px !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
text-decoration: none !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
body.zp-sl-category-mode .search-location-pagination .page-link.active,
body.zp-sl-category-mode .result-pagination .page-link.active,
body.zp-sl-category-mode .search-location-pagination .page-link.current,
body.zp-sl-category-mode .result-pagination .page-link.current {
background: #1d4ed8 !important;
color: #fff !important;
border-color: #1d4ed8 !important;
}
body.zp-sl-category-mode .search-location-pagination .page-link:active {
transform: scale(0.95);
}
body.zp-sl-category-mode .search-location-pagination .page-ellipsis,
body.zp-sl-category-mode .result-pagination .page-ellipsis {
background: transparent !important;
border: 0 !important;
color: #9ca3af !important;
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px !important;
min-width: 0 !important;
}
body.zp-sl-category-mode .search-location-pagination .page-link--prev,
body.zp-sl-category-mode .search-location-pagination .page-link--next {
font-size: 15px !important;
font-weight: 700 !important;
}
/* ============================================================
* 11. SEPARADORES Y BACKGROUND DE LISTA
* ============================================================ */
body.zp-sl-category-mode .zp-sl-sheet__results,
body.zp-sl-category-mode .result-search-location {
background: #f9fafb !important;
padding-top: 4px !important;
padding-bottom: 8px !important;
}
body.zp-sl-category-mode .result-search-location .no_result_location {
background: #fff !important;
border: 1px solid var(--zp-c-border) !important;
border-radius: 12px !important;
padding: 24px 16px !important;
margin: 16px !important;
text-align: center !important;
color: var(--zp-c-text-2) !important;
font-size: 13px !important;
font-style: normal !important;
}
/* ============================================================
* 12. FONT AWESOME safe restore (igual que en home redesign)
* Solo reset light, sin pisar font-family ni font-weight.
* ============================================================ */
body.zp-sl-category-mode i.fa[class*="fa-"],
body.zp-sl-category-mode i.fas[class*="fa-"],
body.zp-sl-category-mode i.fab[class*="fa-"],
body.zp-sl-category-mode i.fa-solid[class*="fa-"],
body.zp-sl-category-mode i.fa-brands[class*="fa-"] {
font-style: normal !important;
text-rendering: auto !important;
-webkit-font-smoothing: antialiased !important;
line-height: 1 !important;
}
/* ============================================================
* 14. AJUSTES LAYOUT — Map view compacto y más limpio
* ============================================================ */
/* ── Ocultar el field de ubicación (ocupa demasiado espacio) ── */
@media (max-width: 991px) {
body.zp-sl-category-mode .zp-sl-explore__location,
body.zp-sl-category-mode .zp-sl-explore__location--toolbar {
display: none !important;
}
/* Compactar toolbar al mínimo cuando no hay location box */
body.zp-sl-category-mode .zp-sl-explore.zp-sl-explore--toolbar {
padding: 6px 16px 10px !important;
}
/* ── Rails de rubros/categorías: sin íconos, más compactos ── */
body.zp-sl-category-mode .zp-sl-cat-rail__media,
body.zp-sl-category-mode .zp-sl-cat-rail__media--svg {
display: none !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack,
body.zp-sl-category-mode .zp-sl-cat-rail-stack--with-macros {
padding: 8px 0 !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack__label {
margin-bottom: 5px !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-wrap,
body.zp-sl-category-mode .zp-sl-cat-rail-wrap--cats,
body.zp-sl-category-mode .zp-sl-cat-rail-wrap--macros {
margin-bottom: 6px !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail__btn,
body.zp-sl-category-mode .zp-sl-cat-rail__btn--all,
body.zp-sl-category-mode .zp-sl-cat-rail__btn--more {
padding: 5px 10px !important;
font-size: 12px !important;
}
/* ── Toggle Mapa/Lista más compacto ── */
body.zp-sl-category-mode .zp-sl-mobile-map-list-toggle,
body.zp-sl-category-mode .zp-sl-mlt--segmented {
margin: 6px 16px !important;
}
/* ── Mapa más alto, sin margen inferior excesivo ── */
body.zp-sl-category-mode #google_canvas_wrap,
body.zp-sl-category-mode .zp-sl-category-map,
body.zp-sl-category-mode .zp-sl-map-col {
margin-bottom: 0 !important;
}
body.zp-sl-category-mode #google_canvas,
body.zp-sl-category-mode .zp-sl-map-canvas,
body.zp-sl-category-mode #osm_canvas {
min-height: 300px !important;
}
/* ── Lista de resultados siempre visible debajo del mapa ── */
/* Ocultar el banner "Ver lista" (el usuario ve la lista directamente) */
body.zp-sl-category-mode .zp-sl-bottom-cta {
display: none !important;
}
/* Eliminar padding-top excesivo antes de los resultados */
body.zp-sl-category-mode .zp-sl-sheet__count,
body.zp-sl-category-mode .zp-sl-hero__count,
body.zp-sl-category-mode .zp-sl-sheet__count--app {
padding: 10px 16px 6px !important;
}
/* Asegurar que la lista de resultados sea siempre visible (no colapsada) */
body.zp-sl-category-mode .zp-sl-sheet__results,
body.zp-sl-category-mode .result-search-location,
body.zp-sl-category-mode #zp-sl-results-list {
display: flex !important;
visibility: visible !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
}
@media (min-width: 768px) {
body.zp-sl-category-mode .zp-sl-card {
margin: 0 24px !important;
}
body.zp-sl-category-mode .zp-sl-explore.zp-sl-explore--toolbar {
padding: 0 24px 16px !important;
}
body.zp-sl-category-mode #google_canvas_wrap,
body.zp-sl-category-mode .zp-sl-category-map,
body.zp-sl-category-mode .zp-sl-map-col {
margin: 0 24px 12px !important;
border-radius: 14px !important;
border: 1px solid var(--zp-c-border) !important;
width: auto !important;
max-width: calc(100% - 48px) !important;
}
body.zp-sl-category-mode #google_canvas,
body.zp-sl-category-mode .zp-sl-map-canvas,
body.zp-sl-category-mode #osm_canvas {
border-radius: 14px !important;
min-height: 300px !important;
}
}
/* ============================================================
* TOGGLE MAPA / LISTA — más visible y prominente
* ============================================================ */
@media (max-width: 991px) {
.zp-sl-mobile-map-list-toggle.zp-sl-mlt--segmented {
display: flex !important;
align-items: center;
gap: 6px;
margin: 8px 12px 6px !important;
background: #f1f5f9;
border-radius: 14px;
padding: 4px;
box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.zp-sl-mlt-btn {
flex: 1 1 50%;
display: flex !important;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 14px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #64748b !important;
background: transparent !important;
border: none !important;
border-radius: 10px !important;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
line-height: 1;
}
.zp-sl-mlt-btn .zp-sl-mlt-ico {
font-size: 15px;
}
.zp-sl-mlt-btn--active {
background: #fff !important;
color: #2563eb !important;
box-shadow: 0 2px 8px rgba(37,99,235,.15) !important;
}
.zp-sl-mlt-btn--active .zp-sl-mlt-ico {
color: #2563eb;
}
/* ============================================================
* CARDS — badge PRO, badge Recomendado, botón Ver perfil
* ============================================================ */
.zp-sl-card__badges {
display: flex;
flex-direction: column;
align-items: center;
align-self: flex-start;
flex-wrap: nowrap;
gap: 4px;
margin-bottom: 6px;
width: fit-content;
max-width: 100%;
}
.zp-sl-card__badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
border-radius: 999px;
padding: 5px 11px 5px 8px;
line-height: 1;
}
.zp-sl-card__badge--pro {
/* Colores: yrl-pro-badge / zp-pro-badge unificado */
}
.zp-sl-card__badge--pro .yrl-pro-badge__icon {
font-size: 14px;
}
.zp-sl-card__badge--rec {
/* Estilo unificado: .zp-card-pro-badge (ver .zp-sl-card__rec-badge) */
}
.zp-sl-card__rec-badge,
.zp-sl-card__badge--rec.zp-card-pro-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 5.5px;
padding: 1px 3px;
border-radius: 999px;
line-height: 1.1;
font-weight: 600;
letter-spacing: 0.02em;
width: auto;
max-width: fit-content;
flex-shrink: 0;
white-space: nowrap;
text-transform: none;
background: rgba(251, 191, 36, 0.14);
color: #a16207;
border: 1px solid rgba(251, 191, 36, 0.28);
box-shadow: none;
opacity: 0.9;
}
.zp-sl-card__rec-badge .zp-card-pro-badge__inner {
display: block;
line-height: 1.1;
white-space: nowrap;
}
.zp-sl-card__btn--profile {
display: inline-flex;
align-items: center;
margin-top: 8px;
padding: 7px 14px;
font-size: 12px;
font-weight: 600;
color: #1e40af;
background: #f0f7ff;
border: 1.5px solid #bfdbfe;
border-radius: 8px;
text-decoration: none;
transition: background 0.12s ease, color 0.12s ease;
}
.zp-sl-card__btn--profile:hover,
.zp-sl-card__btn--profile:active {
background: #e0eeff;
color: #1d4ed8;
}
} /* end @media max-width:991px */
/* ============================================================
* MOCKUP 2026 — Redesign completo mobile (search-location page)
* Todas las reglas siguientes están scoped a mobile max-width:767px
* y no afectan desktop.
* ============================================================ */
/* Header: zp-header-global-lock.css (site-wide) */
/* ── SEARCH BAR — blanca grande (dentro de la zona azul del header) ── */
@media (max-width: 767px) {
body.zp-sl-category-mode .zp-sl-explore__masthead {
background: #071828 !important;
padding: 10px 16px 14px !important;
}
body.zp-sl-category-mode .zp-sl-explore__location {
display: none !important;
}
/* Si hay una barra de búsqueda en el header de la página */
body.zp-sl-category-mode #search_keywords,
body.zp-sl-category-mode .zp-sl-search-input {
background: #fff !important;
border-radius: 28px !important;
border: none !important;
padding: 12px 20px !important;
font-size: 15px !important;
color: #374151 !important;
box-shadow: 0 2px 12px rgba(0,0,0,.15) !important;
width: 100% !important;
}
} /* end @media 767px search */
/* ── RUBRO RAIL — cards con scroll horizontal ── */
@media (max-width: 767px) {
body.zp-sl-category-mode .zp-sl-cat-rail-stack {
gap: 0 !important;
margin: 0 !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-wrap:first-child {
padding: 12px 0 4px !important;
margin: 0 !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail__label {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.6px !important;
color: #6b7280 !important;
padding: 0 16px 6px !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail__track {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
gap: 8px !important;
padding: 4px 16px 8px !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail__track::-webkit-scrollbar { display: none !important; }
/* Legacy card rails (track antiguo; no aplica al carril compacto del mapa) */
body.zp-sl-category-mode .zp-sl-cat-rail__track .zp-sl-cat-rail__btn {
flex-shrink: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-width: 80px !important;
max-width: 96px !important;
padding: 10px 8px !important;
background: #fff !important;
border: 1.5px solid #e8ecf4 !important;
border-radius: 16px !important;
box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
cursor: pointer !important;
gap: 5px !important;
font-size: 10px !important;
font-weight: 600 !important;
color: #374151 !important;
text-align: center !important;
line-height: 1.3 !important;
transition: border-color 0.12s ease, box-shadow 0.12s ease !important;
white-space: normal !important;
overflow: visible !important;
word-break: break-word !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail__media {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
font-size: 24px !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail__media img,
body.zp-sl-category-mode .zp-sl-cat-rail__media i {
max-width: 32px !important;
max-height: 32px !important;
font-size: 24px !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail__name {
font-size: 10px !important;
font-weight: 600 !important;
color: inherit !important;
line-height: 1.3 !important;
text-align: center !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
white-space: normal !important;
}
/* Chips de categoría (segunda rail) */
body.zp-sl-category-mode .zp-sl-cat-rail-wrap:nth-child(2) .zp-sl-cat-rail__btn,
body.zp-sl-category-mode .zp-sl-cat-rail--cats .zp-sl-cat-rail__btn {
flex-direction: row !important;
min-width: auto !important;
max-width: none !important;
padding: 8px 14px !important;
border-radius: 50px !important;
font-size: 13px !important;
white-space: nowrap !important;
gap: 0 !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-wrap:nth-child(2) .zp-sl-cat-rail__media,
body.zp-sl-category-mode .zp-sl-cat-rail--cats .zp-sl-cat-rail__media {
display: none !important;
}
} /* end @media 767px rails */
/* ── RESULTS COUNT BLOCK (zp-sl-sheet__intro) ── */
@media (max-width: 767px) {
body.zp-sl-category-mode .zp-sl-sheet__intro {
padding: 14px 16px 10px !important;
background: #fff !important;
}
body.zp-sl-category-mode .zp-sl-sheet__head {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 10px !important;
}
body.zp-sl-category-mode .zp-sl-sheet__title {
font-size: 14px !important;
font-weight: 600 !important;
color: #374151 !important;
margin: 0 !important;
line-height: 1.3 !important;
}
body.zp-sl-category-mode .zp-sl-sheet__count {
font-size: 38px !important;
font-weight: 800 !important;
color: #071828 !important;
line-height: 1 !important;
display: block !important;
margin: 0 0 2px !important;
}
/* Pill de distancia "5.2 km • 12 min" */
body.zp-sl-category-mode .zp-sl-sheet__subtitle {
font-size: 12px !important;
color: #6b7280 !important;
margin: 2px 0 10px !important;
}
} /* end @media 767px results */
/* ── CARDS APP2026 ── */
@media (max-width: 767px) {
/* Lista sin padding extra */
body.zp-sl-category-mode #zp-sl-results-list {
padding: 0 0 !important;
gap: 10px !important;
display: flex !important;
flex-direction: column !important;
}
body.zp-sl-category-mode .zp-sl-card-li--app2026 {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
/* Card wrapper */
body.zp-sl-category-mode .zp-sl-card--app2026 {
background: var(--zp-sl-card-surface, linear-gradient(165deg, #eceff4 0%, #dfe6ef 100%)) !important;
border-radius: 15px !important;
box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
border: 1px solid rgba(148, 163, 184, 0.32) !important;
overflow: hidden !important;
}
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--app2026 {
background: var(--zp-sl-card-surface, linear-gradient(165deg, #eceff4 0%, #dfe6ef 100%)) !important;
border: 1px solid rgba(148, 163, 184, 0.32) !important;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}
body.zp-sl-category-mode .zp-sl-card--app2026.zp-sl-card--pro {
background: var(--zp-sl-card-surface-pro, linear-gradient(165deg, #e9eef5 0%, #d8e2ef 100%)) !important;
border: 1px solid rgba(148, 163, 184, 0.32) !important;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}
/* Inner layout */
body.zp-sl-category-mode .zp-sl-card__inner2026 {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
padding: 14px !important;
}
/* Foto circular + nombre sutil debajo */
body.zp-sl-category-mode .zp-sl-card__media2026 {
flex-shrink: 0 !important;
width: 72px !important;
min-width: 72px !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 4px !important;
}
body.zp-sl-category-mode .zp-sl-card__media2026 .zp-sl-card__imglink {
display: block !important;
width: 68px !important;
height: 68px !important;
border-radius: 50% !important;
overflow: hidden !important;
background: #f1f5f9 !important;
}
body.zp-sl-category-mode .zp-sl-card__media2026 .zp-sl-card__thumb {
width: 68px !important;
height: 68px !important;
object-fit: cover !important;
border-radius: 50% !important;
display: block !important;
}
body.zp-sl-category-mode .zp-sl-card__media2026 .zp-sl-card__imglink--placeholder {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.zp-sl-category-mode .zp-sl-card__media2026 .zp-sl-card__thumb-ph {
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
border-radius: 50% !important;
background: linear-gradient(145deg, #cbd5e1 0%, #94a3b8 100%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Main content column */
body.zp-sl-category-mode .zp-sl-card__main2026 {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
/* PRO pill: separado del título (Recomendado va en columna de acciones) */
body.zp-sl-category-mode .zp-sl-card__pro-pills,
body.zp-sl-category-mode .zp-sl-card .zp-sl-card__badges {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
align-self: flex-start !important;
flex-wrap: nowrap !important;
gap: 4px !important;
margin: 0 0 6px !important;
width: fit-content !important;
max-width: 100% !important;
}
body.zp-sl-category-mode .zp-sl-card__pro-pills .zp-sl-card__pro-pill,
body.zp-sl-category-mode .zp-sl-card__pro-pills .yrl-pro-badge.zp-sl-card__pro-pill {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
align-self: center !important;
margin-bottom: 0 !important;
}
body.zp-sl-category-mode .zp-sl-card__pro-pills .zp-sl-card__rec-badge,
body.zp-sl-category-mode .zp-sl-card__pro-pills .zp-sl-card__badge--rec.zp-card-pro-badge,
body.zp-sl-category-mode .zp-sl-card__badges .zp-sl-card__rec-badge,
body.zp-sl-category-mode .zp-sl-card__badges .zp-sl-card__badge--rec.zp-card-pro-badge {
align-self: center !important;
margin: 0 !important;
}
/* PRO pill inline */
body.zp-sl-category-mode .zp-sl-card__pro-pill {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-size: 10px !important;
border-radius: 999px !important;
padding: 5px 11px 5px 8px !important;
margin-bottom: 2px !important;
visibility: visible !important;
}
body.zp-sl-category-mode .zp-sl-card__pro-pill .yrl-pro-badge__icon {
font-size: 14px !important;
}
/* Nombre bajo la foto (sutil) */
body.zp-sl-category-mode .zp-sl-card__media-name {
margin: 0 !important;
padding: 0 2px !important;
width: 100% !important;
max-width: 80px !important;
font-size: 10px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
text-align: center !important;
color: #64748b !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-break: break-word !important;
}
body.zp-sl-category-mode .zp-sl-card__media2026 .zp-sl-card__media-name,
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__media-name {
max-width: 84px !important;
font-size: 10px !important;
color: #94a3b8 !important;
margin-top: 2px !important;
}
body.zp-sl-category-mode .zp-sl-card__media-name a {
color: inherit !important;
text-decoration: none !important;
}
body.zp-sl-category-mode .zp-sl-card__media-name a:active {
color: #475569 !important;
}
/* Foto: nombre de usuario; bloque central: título del servicio (ambos visibles) */
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__title2026,
body.zp-sl-category-mode .zp-sl-card__main .zp-sl-card__title,
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__title--app {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
visibility: visible !important;
}
/* Category inline */
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__cat-wrap {
display: block !important;
max-width: 100% !important;
min-width: 0 !important;
}
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__cat-inline {
display: inline-block !important;
max-width: 100% !important;
font-size: 8px !important;
font-weight: 600 !important;
color: #64748b !important;
margin: 0 !important;
padding: 1px 6px !important;
background: #f1f5f9 !important;
border: 1px solid #e2e8f0 !important;
border-radius: 5px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
/* Rating row */
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__rating-row--app {
display: flex !important;
align-items: center !important;
gap: 4px !important;
flex-wrap: nowrap !important;
}
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__score-val {
font-size: 12px !important;
font-weight: 700 !important;
color: #1a1a2e !important;
}
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__revcount {
font-size: 12px !important;
color: #6b7280 !important;
}
/* Distance + drive time */
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__distdrive {
font-size: 12px !important;
color: #6b7280 !important;
margin: 2px 0 0 !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__distdrive .fa {
font-size: 11px !important;
color: #2563eb !important;
}
/* View count */
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__views {
font-size: 11px !important;
color: #9ca3af !important;
margin: 1px 0 0 !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__views .fa {
font-size: 11px !important;
}
/* Actions column */
body.zp-sl-category-mode .zp-sl-card__actions2026 {
flex-shrink: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
align-items: stretch !important;
min-width: 96px !important;
}
/* Recomendado: encima del botón WhatsApp (columna de acciones) */
body.zp-sl-category-mode .zp-sl-card__actions2026 .zp-sl-card__rec-above-wa,
body.zp-sl-category-mode .zp-sl-card__aside .zp-sl-card__rec-above-wa {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
body.zp-sl-category-mode .zp-sl-card__actions2026 .zp-sl-card__rec-badge,
body.zp-sl-category-mode .zp-sl-card__actions2026 .zp-sl-card__badge--rec.zp-card-pro-badge,
body.zp-sl-category-mode .zp-sl-card__aside .zp-sl-card__rec-above-wa .zp-sl-card__rec-badge,
body.zp-sl-category-mode .zp-sl-card__aside .zp-sl-card__rec-above-wa .zp-sl-card__badge--rec.zp-card-pro-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
align-self: stretch !important;
box-sizing: border-box !important;
white-space: nowrap !important;
background: rgba(251, 191, 36, 0.14) !important;
color: #a16207 !important;
border: 1px solid rgba(251, 191, 36, 0.28) !important;
box-shadow: none !important;
font-size: 5.5px !important;
font-weight: 600 !important;
padding: 1px 3px !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
opacity: 0.9 !important;
}
body.zp-sl-category-mode .zp-sl-card__actions2026 .zp-sl-card__rec-above-wa,
body.zp-sl-category-mode .zp-sl-card__aside .zp-sl-card__rec-above-wa {
margin-bottom: 1px !important;
}
/* WA button */
body.zp-sl-category-mode .zp-sl-card__btn2--wa {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
padding: 9px 10px !important;
background: #fff !important;
border: 1.5px solid #22c55e !important;
border-radius: 10px !important;
color: #16a34a !important;
font-size: 12px !important;
font-weight: 700 !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: background 0.12s ease !important;
}
body.zp-sl-category-mode .zp-sl-card__btn2--wa .fa {
font-size: 16px !important;
color: #22c55e !important;
}
body.zp-sl-category-mode .zp-sl-card__btn2--wa:active {
background: #f0fdf4 !important;
}
body.zp-sl-category-mode .zp-sl-card__profile-stack {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 4px !important;
width: 100% !important;
}
body.zp-sl-category-mode .zp-sl-card--pro .zp-sl-carousel__slide-swipe-hint,
body.zp-sl-category-mode .zp-sl-card--pro .zp-sl-card__swipe-hint-below {
color: #b45309 !important;
}
/* Ver perfil button */
body.zp-sl-category-mode .zp-sl-card__btn2--profile {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 9px 10px !important;
background: #f0f7ff !important;
border: 1.5px solid #bfdbfe !important;
border-radius: 10px !important;
color: #1e40af !important;
font-size: 12px !important;
font-weight: 700 !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: background 0.12s ease !important;
}
body.zp-sl-category-mode .zp-sl-card__btn2--profile:active {
background: #e0eeff !important;
}
} /* end @media 767px cards */
/* ── FILTER CHIPS (Todos / PRO / Cerca / 24hs / Con reseñas) ── */
@media (max-width: 767px) {
body.zp-sl-category-mode .zp-sl-chips {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
gap: 7px !important;
padding: 6px 16px 8px !important;
background: #fff !important;
}
body.zp-sl-category-mode .zp-sl-chips::-webkit-scrollbar { display: none !important; }
body.zp-sl-category-mode .zp-sl-chip {
flex-shrink: 0 !important;
padding: 8px 16px !important;
border-radius: 50px !important;
font-size: 13px !important;
font-weight: 600 !important;
border: 1.5px solid #e2e8f0 !important;
background: #fff !important;
color: #374151 !important;
cursor: pointer !important;
white-space: nowrap !important;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
}
body.zp-sl-category-mode .zp-sl-chip--active,
body.zp-sl-category-mode .zp-sl-chip[aria-pressed="true"] {
background: #1d4ed8 !important;
border-color: #1d4ed8 !important;
color: #fff !important;
}
} /* end @media 767px chips */
/* ============================================================
* FULL WIDTH MOBILE — elimina paddings laterales del wrapper
* ============================================================ */
@media (max-width: 767px) {
body.zp-sl-category-mode .search-location-wrap {
--zp-sl-pad: 0px !important;
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100vw !important;
width: 100% !important;
overflow-x: hidden !important;
}
body.zp-sl-category-mode .zp-sl-layout--category {
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Bootstrap row negative margins */
body.zp-sl-category-mode .zp-sl-category-row,
body.zp-sl-category-mode .zp-sl-layout--category > .search-location-wrap > .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
body.zp-sl-category-mode .zp-sl-main-col,
body.zp-sl-category-mode .col-md-12 {
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Sheet / resultados */
body.zp-sl-category-mode .zp-sl-sheet-shell,
body.zp-sl-category-mode .zp-sl-cat-sheet-wrap,
body.zp-sl-category-mode .zp-sl-explore {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Mapa edge-to-edge */
body.zp-sl-category-mode .zp-sl-category-map,
body.zp-sl-category-mode .zp-sl-cat-map-wrap,
body.zp-sl-category-mode #google_canvas_wrap {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
}
} /* end @media 767px full-width */
/* ============================================================
* CARD TITLE: clamp + prevent overlap with action buttons
* ============================================================ */
@media (max-width: 767px) {
/* Title: truncate long names, adaptative font-size */
body.zp-sl-category-mode .zp-sl-card__title2026 {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-break: break-word !important;
hyphens: auto !important;
font-size: clamp(12px, 3.5vw, 15px) !important;
line-height: 1.3 !important;
max-width: 100% !important;
}
/* Inner layout: prevent actions from overlapping main */
body.zp-sl-category-mode .zp-sl-card__inner2026 {
align-items: flex-start !important;
flex-wrap: nowrap !important;
min-width: 0 !important;
}
body.zp-sl-category-mode .zp-sl-card__main2026 {
flex: 1 1 0 !important;
min-width: 0 !important;
overflow: hidden !important;
}
body.zp-sl-category-mode .zp-sl-card__actions2026 {
flex: 0 0 auto !important;
min-width: 90px !important;
max-width: 106px !important;
align-self: center !important;
}
/* Also clamp category and distance lines */
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__cat-inline,
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__distdrive {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 100% !important;
}
} /* end @media */
/* ============================================================
* CARD SIZE, WA VERDE, CATEGORÍAS LEGIBLES
* ============================================================ */
@media (max-width: 767px) {
/* Cards más grandes y aireadas */
body.zp-sl-category-mode .zp-sl-card__inner2026 {
padding: 16px 14px !important;
gap: 14px !important;
align-items: center !important;
}
/* Foto un poco más grande */
body.zp-sl-category-mode .zp-sl-card__media2026 .zp-sl-card__imglink,
body.zp-sl-category-mode .zp-sl-card__media2026 .zp-sl-card__imglink--initials,
body.zp-sl-category-mode .zp-sl-card__media2026 .zp-sl-card__thumb {
width: 72px !important;
height: 72px !important;
flex-shrink: 0 !important;
}
/* Main: más espacio entre filas */
body.zp-sl-category-mode .zp-sl-card__main2026 {
gap: 5px !important;
}
/* Título más legible */
body.zp-sl-category-mode .zp-sl-card__title2026 {
font-size: clamp(13px, 3.8vw, 16px) !important;
}
/* Rating + reseñas más grandes */
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__score-val,
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__revcount {
font-size: 13px !important;
}
/* Distancia + drive legibles */
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__distdrive {
font-size: 13px !important;
}
/* Botón WhatsApp — FONDO VERDE */
body.zp-sl-category-mode .zp-sl-card__btn2--wa {
background: #22c55e !important;
border-color: #22c55e !important;
color: #fff !important;
padding: 10px 8px !important;
font-size: 13px !important;
}
body.zp-sl-category-mode .zp-sl-card__btn2--wa .fa {
color: #fff !important;
font-size: 17px !important;
}
body.zp-sl-category-mode .zp-sl-card__btn2--wa:active {
background: #16a34a !important;
border-color: #16a34a !important;
}
/* Botón Ver perfil — más visible */
body.zp-sl-category-mode .zp-sl-card__btn2--profile {
padding: 10px 8px !important;
font-size: 13px !important;
}
/* Botones column más ancho */
body.zp-sl-category-mode .zp-sl-card__actions2026 {
min-width: 100px !important;
max-width: 112px !important;
gap: 7px !important;
}
/* ── RUBRO CARDS: categorías legibles ── */
body.zp-sl-category-mode .zp-sl-cat-rail__btn {
min-width: 82px !important;
max-width: 96px !important;
padding: 12px 8px 10px !important;
gap: 6px !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail__name {
font-size: 11px !important;
line-height: 1.35 !important;
word-break: break-word !important;
white-space: normal !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
width: 100% !important;
}
/* Chips de categoría (segunda fila) — texto completo */
body.zp-sl-category-mode .zp-sl-cat-rail-wrap:nth-child(2) .zp-sl-cat-rail__btn,
body.zp-sl-category-mode .zp-sl-cat-rail--cats .zp-sl-cat-rail__btn {
font-size: 13px !important;
padding: 8px 14px !important;
}
} /* end @media */
/* ============================================================
* CARDS FULL WIDTH — aprovechan todo el ancho
* ============================================================ */
@media (max-width: 767px) {
body.zp-sl-category-mode #zp-sl-results-list {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
body.zp-sl-category-mode .zp-sl-card-li--app2026 {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
body.zp-sl-category-mode .zp-sl-card--app2026 {
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
box-shadow: 0 1px 0 #f1f5f9 !important;
margin: 0 !important;
}
/* Separador entre cards */
body.zp-sl-category-mode .zp-sl-card-li--app2026 + .zp-sl-card-li--app2026 .zp-sl-card--app2026 {
border-top: 1px solid #f1f5f9 !important;
}
/* Primer y último sin borde top/bottom extra */
body.zp-sl-category-mode #zp-sl-results-list > li:first-child .zp-sl-card--app2026 {
border-top: none !important;
}
/* Contenedor de resultados sin padding lateral */
body.zp-sl-category-mode .zp-sl-sheet__results,
body.zp-sl-category-mode .result-search-location {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.zp-sl-category-mode .zp-sl-sheet-shell {
padding-left: 0 !important;
padding-right: 0 !important;
}
} /* end @media */
/* ============================================================
* PRO PILL — fit-content + badge Recomendado (debajo de PRO)
* ============================================================ */
@media (max-width: 767px) {
body.zp-sl-category-mode .zp-sl-card__pro-pills .zp-sl-card__pro-pill {
display: inline-flex !important;
width: auto !important;
max-width: fit-content !important;
align-self: center !important;
}
} /* end @media */
@media (max-width: 767px) {
body.zp-sl-category-mode .zp-sl-card__rec-badge,
body.zp-sl-category-mode .zp-sl-card__badge--rec.zp-card-pro-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 5.5px !important;
padding: 1px 3px !important;
border-radius: 999px !important;
line-height: 1.1 !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
width: auto !important;
max-width: fit-content !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
text-transform: none !important;
align-self: center !important;
background: rgba(251, 191, 36, 0.14) !important;
color: #a16207 !important;
border: 1px solid rgba(251, 191, 36, 0.28) !important;
box-shadow: none !important;
opacity: 0.9 !important;
}
body.zp-sl-category-mode .zp-sl-card__rec-badge .zp-card-pro-badge__inner {
display: block;
line-height: 1.05;
white-space: nowrap;
font-size: inherit;
font-weight: inherit;
}
} /* end @media */
/* ============================================================
* DISTANCIA + TIEMPO — más chico para no tapar "Ver perfil"
* ============================================================ */
@media (max-width: 767px) {
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__distdrive {
font-size: 11px !important;
color: #9ca3af !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
display: flex !important;
align-items: center !important;
gap: 3px !important;
}
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__distdrive .fa {
font-size: 10px !important;
flex-shrink: 0 !important;
}
/* Views también chico */
body.zp-sl-category-mode .zp-sl-card--app2026 .zp-sl-card__views {
font-size: 11px !important;
}
} /* end @media */
/* ============================================================
* UNIFICACIÓN: mismos tokens del home (fuentes, azul, logo)
* ============================================================ */
/* 1. Hereda tokens CSS del home para consistencia */
body.zp-sl-category-mode {
--zp-c-primary: #071828 !important;
--zp-c-primary-dark: #1e3bbf !important;
--zp-c-primary-bg: #eff4ff !important;
--zp-c-primary-bord: #c7d2fe !important;
--zp-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif !important;
}
/* 2. Fuente consistente con el home — solo texto, no íconos FA */
@media (max-width: 767px) {
body.zp-sl-category-mode .zp-sl-sheet-shell,
body.zp-sl-category-mode .zp-sl-explore,
body.zp-sl-category-mode .zp-sl-cat-rail-stack {
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif !important;
}
} /* end font */
/* 5. Quitar la franja azul del masthead (sobre el mapa/lista) */
@media (max-width: 767px) {
body.zp-sl-category-mode .zp-sl-explore__masthead,
body.zp-sl-category-mode .zp-sl-explore__masthead--compact,
body.zp-sl-category-mode .zp-sl-explore__masthead--stack,
body.zp-sl-category-mode .zp-sl-explore__masthead--no-search {
background: transparent !important;
padding: 0 !important;
}
} /* end masthead */
/* 6. Overrides finales — sin fondos oscuros ni azules */
@media (max-width: 767px) {
body.zp-sl-category-mode .zp-sl-card__btn2--profile { background: #f0f7ff !important; border-color: #bfdbfe !important; color: #1e40af !important; }
body.zp-sl-category-mode .zp-sl-chip--active { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; }
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn.zp-sl-cat-rail__btn--active { border-color: rgba(255, 255, 255, 0.98) !important; color: var(--zp-header-bg, #0b224f) !important; background: #fff !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important; }
body.zp-sl-category-mode .zp-sl-mlt-btn--active { color: #1d4ed8 !important; }
body.zp-sl-category-mode .zp-sl-card__distdrive .fa { color: #6b7280 !important; }
body.zp-sl-category-mode .zp-sl-sheet__count { color: #071828 !important; }
} /* end color overrides */
/* ── Categorías: pills horizontales igual que Rubro (texto completo, sin …) ── */
body.zp-sl-category-mode .zp-sl-cat-rail__btn {
flex: 0 0 auto !important;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
padding: 11px 19px 11px 12px !important;
min-height: 50px !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
border-radius: 999px !important;
overflow: hidden !important;
white-space: nowrap !important;
word-break: normal !important;
height: auto !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail__btn .zp-sl-cat-rail__label,
body.zp-sl-category-mode .zp-sl-cat-rail__btn span.zp-sl-cat-rail__label {
font-size: 0.98rem !important;
font-weight: 700 !important;
line-height: 1 !important;
white-space: nowrap !important;
overflow: visible !important;
color: inherit !important;
word-break: normal !important;
flex-shrink: 0 !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail__btn .zp-sl-cat-rail__media--svg,
body.zp-sl-category-mode .zp-sl-cat-rail__btn .zp-sl-cat-rail__media {
width: 31px !important;
height: 31px !important;
border-radius: 10px !important;
flex-shrink: 0 !important;
}
/* Mapa — fondo azul sutil en todas las cards */
body.zp-sl-category-mode .zp-sl-card--app,
body.zp-sl-category-mode .zp-sl-card--app2026 {
background: var(--zp-sl-card-surface, linear-gradient(165deg, #eceff4 0%, #dfe6ef 100%)) !important;
border-color: rgba(191, 219, 254, 0.55) !important;
}
/* Mapa — cards PRO: mismo contorno que el resto (sin glow dorado) */
body.zp-sl-category-mode .zp-sl-card--app.zp-sl-card--pro,
body.zp-sl-category-mode .zp-sl-card.zp-sl-card--pro,
body.zp-sl-category-mode .zp-sl-card--app2026.zp-sl-card--pro {
background: var(--zp-sl-card-surface-pro, linear-gradient(165deg, #e9eef5 0%, #d8e2ef 100%)) !important;
border: 1px solid rgba(148, 163, 184, 0.32) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
/* Mapa — carrusel por card (scroll horizontal nativo + lista con scroll vertical) */
body.zp-sl-category-mode .search-location-list-place > li.zp-sl-card-li--app2026 {
overflow: visible !important;
touch-action: manipulation !important;
}
body.zp-sl-category-mode .zp-sl-card-li--app2026.zp-sl-card-li--await-reveal,
body.zp-sl-category-mode .zp-sl-card-li--app2026.zp-sl-card-li--revealed {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
body.zp-sl-category-mode .zp-sl-card--carousel {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
cursor: default !important;
-webkit-tap-highlight-color: transparent !important;
user-select: none !important;
transform: none !important;
will-change: auto !important;
}
body.zp-sl-category-mode .zp-sl-card--carousel:active,
body.zp-sl-category-mode .zp-sl-card--app2026:active,
body.zp-sl-category-mode .zp-sl-card-li--app2026:active {
background: var(--zp-sl-card-surface, linear-gradient(165deg, #eceff4 0%, #dfe6ef 100%)) !important;
transform: none !important;
}
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--pro:active,
body.zp-sl-category-mode .zp-sl-card--app2026.zp-sl-card--pro:active {
background: var(--zp-sl-card-surface-pro, linear-gradient(165deg, #e9eef5 0%, #d8e2ef 100%)) !important;
}
body.zp-sl-category-mode .zp-sl-card--carousel .zp-sl-carousel__slide--main:active,
body.zp-sl-category-mode .zp-sl-card--carousel .zp-sl-card__inner--svc2026:active {
background: transparent !important;
}
body.zp-sl-category-mode .zp-sl-card-li--app2026,
body.zp-sl-category-mode .zp-sl-card--carousel,
body.zp-sl-category-mode .zp-sl-card--app,
body.zp-sl-category-mode .zp-sl-card--app2026,
body.zp-sl-category-mode .zp-sl-carousel__track {
-webkit-tap-highlight-color: transparent !important;
}
body.zp-sl-category-mode .zp-sl-card-li--app2026,
body.zp-sl-category-mode .zp-sl-card--carousel,
body.zp-sl-category-mode .zp-sl-card--app,
body.zp-sl-category-mode .zp-sl-card--app2026 {
transition: none !important;
transform: none !important;
}
body.zp-sl-category-mode .zp-sl-carousel {
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
position: relative !important;
}
/* Flechas de navegación (sin swipe) */
body.zp-sl-category-mode .zp-sl-carousel__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
margin: 0;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.14);
color: #2563eb;
font-size: 1.65rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
z-index: 8;
-webkit-tap-highlight-color: transparent;
}
body.zp-sl-category-mode .zp-sl-carousel__arrow span {
display: block;
margin-top: -2px;
pointer-events: none;
}
body.zp-sl-category-mode .zp-sl-carousel__arrow--prev {
left: 8px;
}
body.zp-sl-category-mode .zp-sl-carousel__arrow--next {
right: 8px;
}
body.zp-sl-category-mode .zp-sl-carousel__arrow:active {
transform: translateY(-50%) !important;
}
body.zp-sl-category-mode .zp-sl-carousel__arrow[hidden] {
display: none !important;
}
body.zp-sl-category-mode .zp-sl-card--pro .zp-sl-carousel__arrow {
color: #1d4ed8;
}
/* Sin fade lateral: tapaba el badge PRO en la esquina derecha */
body.zp-sl-category-mode .zp-sl-carousel::before {
display: none !important;
content: none !important;
}
body.zp-sl-category-mode .zp-sl-carousel__track {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
width: 100% !important;
overflow-x: hidden !important;
overflow-y: hidden !important;
scroll-snap-type: none !important;
scroll-behavior: auto !important;
overscroll-behavior-x: none !important;
overscroll-behavior-y: none !important;
touch-action: pan-y !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
body.zp-sl-category-mode .zp-sl-carousel__track::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide {
flex: 0 0 100% !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
scroll-snap-align: start !important;
scroll-snap-stop: always !important;
box-sizing: border-box !important;
pointer-events: auto !important;
}
body.zp-sl-category-mode .zp-sl-card--carousel a,
body.zp-sl-category-mode .zp-sl-card--carousel button {
cursor: pointer !important;
-webkit-tap-highlight-color: transparent !important;
}
body.zp-sl-category-mode .zp-sl-carousel__empty {
color: #94a3b8 !important;
font-style: italic !important;
}
/* Slide Resumen — layout referencia (avatar | título+cat | botones / ubicación / desc / stats) */
body.zp-sl-category-mode .zp-sl-carousel__slide--main {
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
background: transparent !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--desc,
body.zp-sl-category-mode .zp-sl-carousel__slide--gallery {
background: transparent !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__inner2026--ref {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
padding: 12px 12px 10px !important;
width: 100% !important;
min-width: 0 !important;
min-height: 143px !important;
box-sizing: border-box !important;
position: relative !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__head-row {
display: grid !important;
grid-template-columns: 61px minmax(0, 1fr) !important;
column-gap: 10px !important;
row-gap: 4px !important;
align-items: start !important;
min-width: 0 !important;
min-height: 0 !important;
padding-right: 0 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__media2026 {
grid-column: 1 !important;
grid-row: 1 / 3 !important;
flex: none !important;
width: 61px !important;
min-width: 61px !important;
max-width: 61px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 5px !important;
position: relative !important;
z-index: 2 !important;
isolation: isolate !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__media2026 .zp-sl-card__imglink:not(.zp-sl-card__imglink--initials):not(.zp-sl-card__imglink--placeholder),
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__media2026 .zp-sl-card__imglink--initials,
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__media2026 .zp-sl-card__imglink--placeholder {
display: flex !important;
flex: 0 0 61px !important;
width: 61px !important;
height: 61px !important;
min-width: 61px !important;
min-height: 61px !important;
max-width: 61px !important;
max-height: 61px !important;
aspect-ratio: 1 / 1 !important;
border-radius: 50% !important;
overflow: hidden !important;
padding: 0 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__media2026 .zp-sl-card__thumb {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 100% !important;
max-height: 100% !important;
aspect-ratio: 1 / 1 !important;
border-radius: 50% !important;
object-fit: cover !important;
object-position: center center !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__media2026 .zp-sl-card__imglink--initials .zp-place-thumb--initials,
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__media2026 .zp-sl-card__imglink--placeholder .zp-sl-card__thumb-ph {
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__identity2026 {
display: contents !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__media2026 .zp-sl-card__pro-pills {
order: 0 !important;
margin: 0 0 4px !important;
padding: 0 !important;
width: 100% !important;
max-width: 61px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex: 0 0 auto !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__pro-pill--mini {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 2px 7px !important;
border-radius: 4px !important;
border: none !important;
background: rgba(37, 99, 235, 0.1) !important;
color: #2563eb !important;
font-size: 8px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
box-shadow: none !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__media2026 .zp-sl-card__imglink,
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__media2026 > a.zp-sl-card__imglink {
order: 1 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__title2026 {
grid-column: 2 / -1 !important;
grid-row: 1 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
color: #0f172a !important;
overflow: visible !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
-webkit-box-orient: unset !important;
word-break: break-word !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__title2026 a {
color: inherit !important;
text-decoration: none !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__rating-row {
grid-column: 2 / -1 !important;
grid-row: 2 !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__stars {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: #475569 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__stars .fa-star {
color: #eab308 !important;
font-size: 11px !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__reviews-count {
color: #94a3b8 !important;
font-weight: 500 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__cat-under-title {
grid-column: 2 / -1 !important;
grid-row: 3 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
font-size: 11px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
color: #a8b4c4 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__head-row:not(:has(.zp-sl-card__rating-row)) .zp-sl-card__cat-under-title {
grid-row: 2 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__actions2026 {
position: absolute !important;
right: 12px !important;
bottom: 8px !important;
top: auto !important;
left: auto !important;
flex: none !important;
width: 86px !important;
min-width: 86px !important;
max-width: 86px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-end !important;
align-self: auto !important;
margin: 0 !important;
padding: 0 !important;
gap: 5px !important;
z-index: 3 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__rec-mini {
order: 0 !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__rec-mini-badge,
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__rec-mini .zp-card-pro-badge,
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__rec-mini .zp-sl-card__rec-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 2px 7px !important;
border-radius: 999px !important;
border: none !important;
background: rgba(37, 99, 235, 0.1) !important;
color: #2563eb !important;
font-size: 8px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
letter-spacing: 0.02em !important;
box-shadow: none !important;
white-space: nowrap !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__rec-mini .zp-card-pro-badge__inner {
font-size: inherit !important;
line-height: inherit !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__actions2026 .zp-sl-card__btn2--wa,
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__actions2026 .zp-sl-card__profile-stack {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__btn2--wa {
padding: 8px 9px !important;
font-size: 11px !important;
font-weight: 700 !important;
border-radius: 12px !important;
background: var(--zp-c-wa, #22c55e) !important;
border: none !important;
color: #ffffff !important;
box-shadow: 0 3px 10px rgba(34, 197, 94, 0.35) !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__btn2--wa .fa {
color: #ffffff !important;
font-size: 14px !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__btn2--profile {
padding: 8px 9px !important;
font-size: 11px !important;
font-weight: 600 !important;
border-radius: 12px !important;
background: #f1f5f9 !important;
border: none !important;
color: #475569 !important;
box-shadow: none !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__profile-stack {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
margin: 0 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__swipe-hint-below {
margin: 0 !important;
font-size: 9px !important;
text-align: center !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__media2026 .zp-sl-card__fast-tag {
order: 2 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
max-width: 72px !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto !important;
text-align: center !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__actions2026 .zp-sl-card__btn2--wa {
order: 1 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__actions2026 .zp-sl-card__profile-stack {
order: 2 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__metrics-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
margin: 0 !important;
padding: 2px 92px 0 71px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__metric-chip {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 3px 8px !important;
border-radius: 999px !important;
font-size: 10px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: #64748b !important;
background: #f1f5f9 !important;
border: none !important;
white-space: nowrap !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__metric-chip--dist {
background: rgba(37, 99, 235, 0.1) !important;
color: #2563eb !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__metric-chip--drive {
background: rgba(148, 163, 184, 0.14) !important;
color: #64748b !important;
font-weight: 500 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__metric-chip--drive .fa,
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__metric-chip--views .fa {
font-size: 10px !important;
opacity: 0.85 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__metric-chip--views {
background: rgba(148, 163, 184, 0.1) !important;
color: #94a3b8 !important;
font-weight: 500 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__media2026 .zp-sl-card__fast-tag .zp-card-pro-badge,
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__media2026 .zp-sl-card__fast-tag .zp-sl-card__rec-badge {
display: inline-flex !important;
justify-content: center !important;
max-width: 72px !important;
font-size: 8px !important;
padding: 3px 6px !important;
line-height: 1.15 !important;
white-space: normal !important;
text-align: center !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__media2026 .zp-sl-card__fast-tag--avail span {
display: inline-block !important;
padding: 3px 8px !important;
border-radius: 999px !important;
font-size: 9px !important;
font-weight: 700 !important;
color: #15803d !important;
background: rgba(34, 197, 94, 0.12) !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__location-line {
margin: 0 !important;
padding: 0 92px 0 71px !important;
font-size: 11px !important;
line-height: 1.35 !important;
color: #64748b !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 4px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__location-line .fa-map-marker {
color: #2563eb !important;
font-size: 12px !important;
flex-shrink: 0 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__loc-sep {
color: #94a3b8 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__excerpt-snippet {
margin: 0 !important;
padding: 0 !important;
font-size: 13px !important;
line-height: 1.45 !important;
color: #64748b !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
overflow: hidden !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__stats-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px 16px !important;
margin: 0 !important;
padding: 4px 108px 0 84px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
border-top: none !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__stat {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
font-size: 12px !important;
line-height: 1.2 !important;
color: #64748b !important;
white-space: nowrap !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__stat--rating {
color: #475569 !important;
font-weight: 600 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__stat--rating .fa-star {
color: #eab308 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__stat-muted {
color: #94a3b8 !important;
font-weight: 500 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--desc,
body.zp-sl-category-mode .zp-sl-carousel__slide--gallery,
body.zp-sl-category-mode .zp-sl-carousel__slide--reviews {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
min-height: 100% !important;
padding: 14px !important;
background: transparent !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide-body {
flex: 1 1 auto !important;
min-width: 0 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide-swipe-hint,
body.zp-sl-category-mode .zp-sl-card__swipe-hint-below {
display: block !important;
margin: 8px 0 0 !important;
padding: 0 !important;
font-size: 10px !important;
font-weight: 700 !important;
line-height: 1.1 !important;
text-align: center !important;
color: #64748b !important;
letter-spacing: 0.02em !important;
pointer-events: none !important;
user-select: none !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__swipe-hint-below {
margin-top: 4px !important;
}
body.zp-sl-category-mode .zp-sl-card--pro .zp-sl-carousel__slide--desc,
body.zp-sl-category-mode .zp-sl-card--pro .zp-sl-carousel__slide--gallery,
body.zp-sl-category-mode .zp-sl-card--pro .zp-sl-carousel__slide--reviews {
background: linear-gradient(165deg, #f5f9ff 0%, #edf3fa 100%) !important;
}
body.zp-sl-category-mode .zp-sl-carousel__reviews-summary {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px 10px !important;
margin: 0 0 12px !important;
padding: 10px 12px !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.72) !important;
border: 1px solid rgba(148, 163, 184, 0.22) !important;
}
body.zp-sl-category-mode .zp-sl-carousel__reviews-summary .rate-it {
display: inline-flex !important;
}
body.zp-sl-category-mode .zp-sl-carousel__reviews-score {
font-size: 1.15rem !important;
font-weight: 800 !important;
color: #0f172a !important;
line-height: 1 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__reviews-count {
font-size: 0.8rem !important;
font-weight: 600 !important;
color: #64748b !important;
}
body.zp-sl-category-mode .zp-sl-carousel__stars {
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
color: #eab308 !important;
font-size: 12px !important;
line-height: 1 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__reviews-list {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
max-height: 220px !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding-right: 2px !important;
}
body.zp-sl-category-mode .zp-sl-carousel__review {
margin: 0 !important;
padding: 10px 12px !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.85) !important;
border: 1px solid rgba(148, 163, 184, 0.2) !important;
}
body.zp-sl-category-mode .zp-sl-carousel__review-head {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 4px 8px !important;
margin-bottom: 6px !important;
}
body.zp-sl-category-mode .zp-sl-carousel__review-author {
font-size: 0.78rem !important;
font-weight: 700 !important;
color: #334155 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__review-date {
font-size: 0.72rem !important;
font-weight: 500 !important;
color: #94a3b8 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__review-text {
margin: 0 !important;
font-size: 0.82rem !important;
line-height: 1.45 !important;
color: #475569 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__reviews-link {
display: inline-flex !important;
margin-top: 8px !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
color: #2563eb !important;
text-decoration: none !important;
}
body.zp-sl-category-mode .zp-sl-carousel__tabs {
gap: 4px !important;
}
body.zp-sl-category-mode .zp-sl-carousel__tab,
body.zp-sl-category-mode .zp-sl-carousel__dot {
padding: 5px 6px !important;
font-size: 9px !important;
}
body.zp-sl-category-mode .zp-sl-carousel__kicker {
margin: 0 0 10px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: #64748b !important;
}
body.zp-sl-category-mode .zp-sl-card--pro .zp-sl-carousel__kicker {
color: #b45309 !important;
}
body.zp-sl-category-mode .zp-sl-carousel__text {
margin: 0 !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: #334155 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 6 !important;
line-clamp: 6 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-break: break-word !important;
}
body.zp-sl-category-mode .zp-sl-carousel__gallery {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 10px !important;
min-height: 120px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-x: contain !important;
touch-action: pan-x !important;
scrollbar-width: none !important;
padding-bottom: 4px !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode .zp-sl-carousel__gallery--empty {
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 120px !important;
border-radius: 12px !important;
background: #e2e8f0 !important;
border: 1px dashed rgba(148, 163, 184, 0.55) !important;
}
body.zp-sl-category-mode .zp-sl-carousel__gallery--empty .zp-sl-carousel__empty {
margin: 0 !important;
padding: 0 12px !important;
text-align: center !important;
font-style: italic !important;
}
body.zp-sl-category-mode .zp-sl-carousel__gallery-link {
flex: 0 0 auto !important;
display: block !important;
width: 120px !important;
height: 120px !important;
border-radius: 12px !important;
overflow: hidden !important;
background: #e2e8f0 !important;
border: 1px solid rgba(191, 219, 254, 0.65) !important;
}
body.zp-sl-category-mode .zp-sl-carousel__gallery-img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
body.zp-sl-category-mode .zp-sl-carousel__footer {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 10px 12px 12px !important;
border-top: 1px solid rgba(191, 219, 254, 0.35) !important;
background: rgba(241, 245, 249, 0.88) !important;
touch-action: pan-y !important;
}
body.zp-sl-category-mode .zp-sl-carousel__swipe-tip {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 11px !important;
font-weight: 600 !important;
color: #475569 !important;
line-height: 1.2 !important;
pointer-events: none !important;
user-select: none !important;
}
body.zp-sl-category-mode .zp-sl-carousel__swipe-tip-icon {
display: inline-flex !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #2563eb !important;
animation: zp-sl-carousel-nudge 1.6s ease-in-out infinite !important;
}
body.zp-sl-category-mode .zp-sl-card--pro .zp-sl-carousel__swipe-tip-icon {
color: #d97706 !important;
}
@keyframes zp-sl-carousel-nudge {
0%,
100% {
transform: translateX(0);
opacity: 0.85;
}
50% {
transform: translateX(4px);
opacity: 1;
}
}
body.zp-sl-category-mode .zp-sl-carousel__tabs {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
width: 100% !important;
}
body.zp-sl-category-mode .zp-sl-carousel__tab,
body.zp-sl-category-mode .zp-sl-carousel__dot {
flex: 1 1 0 !important;
min-width: 0 !important;
padding: 6px 8px !important;
margin: 0 !important;
border: 1px solid #dbeafe !important;
border-radius: 999px !important;
background: #fff !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
color: #64748b !important;
cursor: pointer !important;
transition: none !important;
-webkit-tap-highlight-color: transparent !important;
}
body.zp-sl-category-mode .zp-sl-carousel__tab:not(.is-active):active,
body.zp-sl-category-mode .zp-sl-carousel__dot:not(.is-active):active {
transform: none !important;
background: #fff !important;
border-color: #dbeafe !important;
color: #64748b !important;
}
body.zp-sl-category-mode .zp-sl-carousel__tab.is-active,
body.zp-sl-category-mode .zp-sl-carousel__dot.is-active {
background: #2563eb !important;
border-color: #2563eb !important;
color: #fff !important;
}
body.zp-sl-category-mode .zp-sl-card--pro .zp-sl-carousel__tab.is-active,
body.zp-sl-category-mode .zp-sl-card--pro .zp-sl-carousel__dot.is-active {
background: linear-gradient(90deg, #3b82f6, #2563eb) !important;
border-color: #2563eb !important;
color: #fff !important;
}
body.zp-sl-category-mode .zp-sl-carousel__track.zp-sl-carousel__track--snap {
scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
body.zp-sl-category-mode .zp-sl-carousel__swipe-tip-icon {
animation: none !important;
}
}
/* Slide Resumen: prioridad sobre reglas genéricas de card en móvil */
@media (max-width: 767px) {
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__inner2026--ref {
padding: 12px 12px 10px !important;
min-height: 143px !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__location-line,
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__metrics-row {
padding-left: 71px !important;
padding-right: 92px !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__actions2026 {
right: 12px !important;
bottom: 8px !important;
width: 86px !important;
min-width: 86px !important;
max-width: 86px !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__title2026 {
font-size: 14px !important;
}
}
/* Lista categoría — chip chico dentro del headline */
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__title--app,
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__title--app a {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__headline-left .zp-sl-card__cat-wrap {
display: block !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__headline-left .zp-sl-card__cat-inline {
display: inline-block !important;
max-width: 100% !important;
margin: 0 !important;
padding: 1px 6px !important;
font-size: 8px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: #64748b !important;
background: #f1f5f9 !important;
border: 1px solid #e2e8f0 !important;
border-radius: 5px !important;
box-sizing: border-box !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
vertical-align: top !important;
}
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__distdrive {
margin: 4px 0 2px !important;
font-size: 12px !important;
font-weight: 500 !important;
color: #64748b !important;
display: flex !important;
align-items: center !important;
gap: 5px !important;
flex-wrap: wrap !important;
}
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__distdrive .fa-map-marker {
color: #2563eb !important;
font-size: 12px !important;
flex-shrink: 0 !important;
}
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__views {
margin: 2px 0 0 !important;
font-size: 11px !important;
color: #94a3b8 !important;
}
/* WhatsApp + Ver perfil: pie de card, centrados y alargados */
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__actions-bottom {
grid-column: 1 / -1 !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
margin-top: 4px !important;
padding-top: 12px !important;
border-top: 1px solid #f1f5f9 !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__actions-bottom-row {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: stretch !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode .zp-sl-card__actions-bottom .zp-sl-card__btn--wa-text,
body.zp-sl-category-mode .zp-sl-card__actions-bottom .zp-sl-card__btn--profile-app {
display: inline-flex !important;
flex: 1 1 0 !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
box-sizing: border-box !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 44px !important;
padding: 11px 14px !important;
margin: 0 !important;
border-radius: 12px !important;
font-size: 0.92rem !important;
font-weight: 700 !important;
line-height: 1.15 !important;
text-decoration: none !important;
white-space: nowrap !important;
}
body.zp-sl-category-mode .zp-sl-card__actions-bottom .zp-sl-card__btn--wa-text {
background: var(--zp-c-wa, #22c55e) !important;
color: #ffffff !important;
border: none !important;
box-shadow: 0 3px 10px rgba(34, 197, 94, 0.35) !important;
}
body.zp-sl-category-mode .zp-sl-card__actions-bottom .zp-sl-card__btn--wa-text:active {
transform: scale(0.98) !important;
background: var(--zp-c-wa-press, #16a34a) !important;
}
body.zp-sl-category-mode .zp-sl-card__actions-bottom .zp-sl-card__btn--wa-text .fa {
color: #ffffff !important;
font-size: 1.15rem !important;
line-height: 1 !important;
}
body.zp-sl-category-mode .zp-sl-card__actions-bottom .zp-sl-card__btn--profile-app {
background: rgba(37, 99, 235, 0.08) !important;
border: 1px solid rgba(37, 99, 235, 0.2) !important;
color: #1d4ed8 !important;
box-shadow: none !important;
}
body.zp-sl-category-mode .zp-sl-card__actions-bottom .zp-sl-card__rec-above-wa {
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
body.zp-sl-category-mode .zp-sl-card__actions-bottom .zp-sl-card__rec-above-wa .zp-sl-card__rec-badge,
body.zp-sl-category-mode .zp-sl-card__actions-bottom .zp-sl-card__rec-above-wa .zp-card-pro-badge {
font-size: 7px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
padding: 2px 6px !important;
}
/* Carrusel horizontal + layout svc2026 en slide Resumen */
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--app {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
body.zp-sl-category-mode .search-location-list-place > li.zp-sl-card-li--app.zp-sl-card-li--app2026 {
overflow: visible !important;
}
body.zp-sl-category-mode .zp-sl-carousel__slide--main .zp-sl-card__inner--svc2026 {
width: 100% !important;
min-width: 0 !important;
min-height: 168px !important;
box-sizing: border-box !important;
position: relative !important;
}
/* Badge PRO: esquina superior derecha de la card (no bajo la foto) */
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__probadge--corner,
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__probadge--under-photo {
position: absolute !important;
top: 10px !important;
right: 10px !important;
left: auto !important;
bottom: auto !important;
margin: 0 !important;
z-index: 12 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
visibility: visible !important;
opacity: 1 !important;
background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%) !important;
color: #ffffff !important;
border: none !important;
box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35) !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
padding: 5px 10px 5px 8px !important;
border-radius: 999px !important;
line-height: 1.1 !important;
pointer-events: none !important;
}
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__probadge--corner .yrl-pro-badge__icon,
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__probadge--corner .fa-bolt {
color: #ffffff !important;
font-size: 12px !important;
}
/* Título no queda debajo del badge PRO */
body.zp-sl-category-mode .zp-sl-card--pro .zp-sl-card__inner--svc2026 .zp-sl-card__headline,
body.zp-sl-category-mode .zp-sl-card--pro .zp-sl-card__inner--svc2026 .zp-sl-card__main--app {
padding-right: 52px !important;
box-sizing: border-box !important;
}
/* Misma altura: gratis y PRO (pie de botones alineado) */
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__actions-bottom {
min-height: 88px !important;
justify-content: flex-start !important;
}
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__actions-bottom-row {
margin-top: auto !important;
}
body.zp-sl-category-mode .zp-sl-card--pro .zp-sl-card__inner--svc2026,
body.zp-sl-category-mode .zp-sl-card:not(.zp-sl-card--pro) .zp-sl-card__inner--svc2026 {
padding-top: 18px !important;
padding-bottom: 14px !important;
}
body.zp-sl-category-mode .zp-sl-card--app.zp-sl-card--pro,
body.zp-sl-category-mode .zp-sl-card--app2026.zp-sl-card--pro,
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--pro {
min-height: 0 !important;
}
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--pro .zp-sl-carousel__tab.is-active,
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--pro .zp-sl-carousel__dot.is-active {
background: linear-gradient(90deg, #f59e0b, #d97706) !important;
border-color: #d97706 !important;
color: #fff !important;
}
/* ── Distancia: km en negrita ── */
body.zp-sl-category-mode .zp-sl-card__distdrive .zp-sl-card__km,
body.zp-sl-category-mode .zp-sl-card__distdrive strong.zp-sl-card__km {
font-weight: 800 !important;
color: #0f172a !important;
letter-spacing: -0.01em !important;
}
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 .zp-sl-card__distdrive {
font-weight: 500 !important;
}
body.zp-sl-category-mode .zp-sl-card__distdrive .zp-sl-card__dist-sep {
font-weight: 500 !important;
color: #94a3b8 !important;
}
/* ── Cards: sombras sutiles, sin líneas de borde ── */
body.zp-sl-category-mode .zp-sl-card,
body.zp-sl-category-mode .zp-sl-card.zp-sl-card--pro,
body.zp-sl-category-mode .zp-sl-card--app,
body.zp-sl-category-mode .zp-sl-card--app.zp-sl-card--pro,
body.zp-sl-category-mode .zp-sl-card--app2026,
body.zp-sl-category-mode .zp-sl-card--app2026.zp-sl-card--pro,
body.zp-sl-category-mode .zp-sl-card--carousel,
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--app,
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--app2026,
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--pro {
border: none !important;
border-color: transparent !important;
outline: none !important;
box-shadow:
0 2px 10px rgba(15, 23, 42, 0.07),
0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
body.zp-sl-category-mode .zp-sl-card-li--app2026 + .zp-sl-card-li--app2026 .zp-sl-card--app2026,
body.zp-sl-category-mode .zp-sl-card-li--app2026 + .zp-sl-card-li--app2026 .zp-sl-card--carousel {
border-top: none !important;
}
@media (max-width: 767px) {
body.zp-sl-category-mode #zp-sl-results-list {
gap: 10px !important;
padding: 0 0 12px !important;
}
body.zp-sl-category-mode .zp-sl-card--app2026,
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--app2026 {
border-radius: 16px !important;
border-left: none !important;
border-right: none !important;
margin: 0 0 10px !important;
box-shadow:
0 2px 12px rgba(15, 23, 42, 0.08),
0 1px 4px rgba(15, 23, 42, 0.05) !important;
}
body.zp-sl-category-mode #zp-sl-results-list > li:first-child .zp-sl-card--app2026,
body.zp-sl-category-mode #zp-sl-results-list > li:first-child .zp-sl-card--carousel {
border-top: none !important;
}
}
/* ============================================================
* Zona superior — mismo azul que header (#0b224f), sin huecos blancos
* ============================================================ */
body.zp-sl-category-mode form#search-location-form.zp-sl-category-form {
background: var(--zp-sl-top-bg, #0b224f) !important;
padding-top: calc(var(--zp-header-desktop-min-h, 72px) + env(safe-area-inset-top, 0px)) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
body.zp-sl-category-mode .zp-sl-explore,
body.zp-sl-category-mode form#search-location-form.zp-sl-category-form > .zp-sl-explore.zp-sl-explore--toolbar {
background: var(--zp-sl-top-bg, #0b224f) !important;
background-image: none !important;
border-radius: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
box-shadow: none !important;
}
body.zp-sl-category-mode form#search-location-form.zp-sl-category-form > .zp-sl-cat-rail-stack,
body.zp-sl-category-mode form#search-location-form.zp-sl-category-form > .zp-sl-cat-rail-stack--with-macros {
background: var(--zp-sl-top-bg, #0b224f) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
border-radius: 0 0 22px 22px !important;
}
body.zp-sl-category-mode .zp-sl-explore--toolbar .zp-sl-explore__location--toolbar,
body.zp-sl-category-mode .zp-sl-explore__location--toolbar {
background: #fff !important;
border: 0 !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14) !important;
}
body.zp-sl-category-mode .zp-sl-mobile-map-list-toggle {
margin-top: 10px !important;
}
body.zp-sl-category-mode .search-location-wrap {
padding-top: 0 !important;
}
/* ============================================================
* Rails rubro/categoría — chips pro (solo el activo es pill blanca)
* ============================================================ */
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__btn {
position: relative !important;
transition:
background 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
color 0.2s ease !important;
}
/* Inactivo: ghost — texto e íconos claros (nunca negro) */
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__btn:not(.zp-sl-macro-rail__btn--active),
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail.zp-sl-cat-rail--compact .zp-sl-cat-rail__btn:not(.zp-sl-cat-rail__btn--active):not(.zp-sl-cat-rail__btn--more) {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: rgba(255, 255, 255, 0.86) !important;
box-shadow: none !important;
font-weight: 500 !important;
transform: none !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn:not(.zp-sl-cat-rail__btn--active) .zp-sl-cat-rail__label,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn:not(.zp-sl-cat-rail__btn--active) span.zp-sl-cat-rail__label,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__btn:not(.zp-sl-macro-rail__btn--active) .zp-sl-macro-rail__label {
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 500 !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn:not(.zp-sl-cat-rail__btn--active) .zp-sl-cat-rail__media--svg,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn:not(.zp-sl-cat-rail__btn--active) .zp-sl-cat-rail__media {
background: rgba(255, 255, 255, 0.12) !important;
color: rgba(255, 255, 255, 0.95) !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn:not(.zp-sl-cat-rail__btn--active) .zp-sl-cat-rail__media--svg .zp-sl-hi {
color: rgba(255, 255, 255, 0.95) !important;
stroke: rgba(255, 255, 255, 0.95) !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__btn:not(.zp-sl-macro-rail__btn--active) .zp-sl-macro-rail__emoji {
opacity: 0.88;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn--more:not(.zp-sl-cat-rail__btn--active) {
background: transparent !important;
border: 1px dashed rgba(255, 255, 255, 0.32) !important;
color: rgba(255, 255, 255, 0.72) !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn--more:not(.zp-sl-cat-rail__btn--active) .zp-sl-cat-rail__label {
color: rgba(255, 255, 255, 0.72) !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__btn:not(.zp-sl-macro-rail__btn--active):hover,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn:not(.zp-sl-cat-rail__btn--active):not(.zp-sl-cat-rail__btn--more):hover {
background: rgba(255, 255, 255, 0.14) !important;
border-color: rgba(255, 255, 255, 0.34) !important;
color: #fff !important;
}
/* Activo: única pill blanca elevada + barra de acento inferior */
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__btn--active,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__btn[aria-pressed="true"],
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn--active,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn[aria-pressed="true"] {
background: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.98) !important;
color: var(--zp-header-bg, #0b224f) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
font-weight: 600 !important;
transform: none !important;
padding-bottom: 11px !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__btn--active::before,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__btn[aria-pressed="true"]::before {
content: '';
position: absolute;
left: 14px;
right: 14px;
bottom: 5px;
height: 3px;
border-radius: 99px;
background: linear-gradient(90deg, #f59e0b, #fcd34d);
pointer-events: none;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn--active::before,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn[aria-pressed="true"]::before {
content: '';
position: absolute;
left: 14px;
right: 14px;
bottom: 5px;
height: 3px;
border-radius: 99px;
background: linear-gradient(90deg, #3b82f6, #93c5fd);
pointer-events: none;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn--active::after,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__btn--active::after {
display: none !important;
content: none !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn--active .zp-sl-cat-rail__label,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn--active span.zp-sl-cat-rail__label,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__btn--active .zp-sl-macro-rail__label {
color: var(--zp-header-bg, #0b224f) !important;
font-weight: 600 !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn--active .zp-sl-cat-rail__media--svg {
background: rgba(11, 34, 79, 0.07) !important;
color: var(--zp-header-bg, #0b224f) !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn--active .zp-sl-cat-rail__media--svg .zp-sl-hi {
color: var(--zp-header-bg, #0b224f) !important;
stroke: var(--zp-header-bg, #0b224f) !important;
}
/* Rails rubro/categoría — +20% tipografía y contenedores */
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail-stack__label {
font-size: 0.8rem !important;
padding: 4px 12px 4px 10px !important;
margin-bottom: 9px !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail.zp-sl-cat-rail--compact,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail.zp-sl-cat-rail--macro.zp-sl-cat-rail--compact {
gap: 10px !important;
padding: 5px 0 17px !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail-wrap--macros {
padding: 14px 0 19px !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail.zp-sl-cat-rail--compact .zp-sl-cat-rail__btn,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn {
min-height: 50px !important;
padding: 11px 19px 11px 12px !important;
gap: 10px !important;
font-size: 0.98rem !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__btn {
min-height: 55px !important;
padding: 12px 19px 12px 14px !important;
gap: 12px !important;
font-size: 0.98rem !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn .zp-sl-cat-rail__label,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn span.zp-sl-cat-rail__label,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__btn .zp-sl-macro-rail__label {
font-size: 0.98rem !important;
line-height: 1.12 !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn .zp-sl-cat-rail__media--svg,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn .zp-sl-cat-rail__media {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
border-radius: 10px !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__media--svg .zp-sl-hi,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn .zp-sl-cat-rail__media--svg .zp-sl-hi {
width: 22px !important;
height: 22px !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__emoji {
font-size: 1.74rem !important;
width: 1.74em !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn--active,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail__btn[aria-pressed="true"],
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__btn--active,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-macro-rail__btn[aria-pressed="true"] {
padding-bottom: 13px !important;
}
/* Carruseles rubro/categoría — ancho completo en móvil (sin padding lateral del contenedor) */
@media (max-width: 991px) {
body.zp-sl-category-mode .zp-sl-cat-rail-stack,
body.zp-sl-category-mode .zp-sl-cat-rail-stack--with-macros {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail-wrap,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail-wrap--macros,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail-wrap--cats {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail-stack__label {
margin-left: 14px !important;
}
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail.zp-sl-cat-rail--compact,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail.zp-sl-cat-rail--macro.zp-sl-cat-rail--compact,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail--cats,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail--macro {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-top: 5px !important;
padding-bottom: 17px !important;
padding-left: 0 !important;
padding-right: 0 !important;
scroll-padding-left: 14px !important;
scroll-padding-right: 14px !important;
}
/* Aire al inicio/fin del scroll sin encoger el carril */
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail.zp-sl-cat-rail--compact::before,
body.zp-sl-category-mode .zp-sl-cat-rail-stack .zp-sl-cat-rail.zp-sl-cat-rail--compact::after {
content: '' !important;
display: block !important;
flex: 0 0 14px !important;
width: 14px !important;
height: 1px !important;
}
}
body.zp-sl-category-mode .zp-sl-layout--category,
body.zp-sl-category-mode #wrapper,
body.zp-sl-category-mode #page,
body.zp-sl-category-mode #main {
background: var(--zp-c-bg-page, #f9fafb) !important;
}
/* Cards lista — casi full-bleed en móvil con mini margen a los bordes */
@media (max-width: 991px) {
body.zp-sl-category-mode {
--zp-sl-card-edge-pad: 8px;
}
body.zp-sl-category-mode .zp-sl-sheet-shell,
body.zp-sl-category-mode .zp-sl-sheet-shell.zp-sl-cat-sheet-wrap {
padding-left: var(--zp-sl-card-edge-pad) !important;
padding-right: var(--zp-sl-card-edge-pad) !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode .zp-sl-stat-card {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode #zp-sl-results-list,
body.zp-sl-category-mode .search-location-list-place,
body.zp-sl-category-mode .search-location-list-place.row {
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode #zp-sl-results-list > li,
body.zp-sl-category-mode .search-location-list-place > li,
body.zp-sl-category-mode .zp-sl-card-li--app2026 {
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 10px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode .zp-sl-card--app2026,
body.zp-sl-category-mode .zp-sl-card--carousel,
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--app2026,
body.zp-sl-category-mode .zp-sl-card--app,
body.zp-sl-category-mode .zp-sl-card {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
body.zp-sl-category-mode .zp-sl-chips {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
padding-left: var(--zp-sl-card-edge-pad) !important;
padding-right: var(--zp-sl-card-edge-pad) !important;
box-sizing: border-box !important;
}
}
/* Sin «deslizá» ni efecto «botón» al tocar la card (fondo/sombra fijos) */
body.zp-sl-category-mode .zp-sl-carousel__swipe-tip,
body.zp-sl-category-mode .zp-sl-carousel__swipe-tip-icon,
body.zp-sl-category-mode .zp-sl-carousel__swipe-tip-text,
body.zp-sl-category-mode .zp-sl-carousel__slide-swipe-hint,
body.zp-sl-category-mode .zp-sl-card__swipe-hint-below {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body.zp-sl-category-mode .zp-sl-card,
body.zp-sl-category-mode .zp-sl-card--app,
body.zp-sl-category-mode .zp-sl-card--app2026,
body.zp-sl-category-mode .zp-sl-card--carousel,
body.zp-sl-category-mode .zp-sl-card-li--app2026,
body.zp-sl-category-mode #zp-sl-results-list > li.zp-sl-card-li--app2026,
body.zp-sl-category-mode .zp-sl-carousel,
body.zp-sl-category-mode .zp-sl-carousel__track,
body.zp-sl-category-mode .zp-sl-carousel__slide,
body.zp-sl-category-mode .zp-sl-card__inner--svc2026 {
-webkit-tap-highlight-color: transparent !important;
-webkit-touch-callout: none !important;
transition: none !important;
outline: none !important;
-webkit-user-select: none !important;
user-select: none !important;
cursor: default !important;
}
body.zp-sl-category-mode .zp-sl-card--carousel a,
body.zp-sl-category-mode .zp-sl-card--carousel button,
body.zp-sl-category-mode .zp-sl-card a[href],
body.zp-sl-category-mode .zp-sl-card button {
cursor: pointer !important;
}
body.zp-sl-category-mode .zp-sl-card:focus,
body.zp-sl-category-mode .zp-sl-card:focus-visible,
body.zp-sl-category-mode .zp-sl-card--app:focus,
body.zp-sl-category-mode .zp-sl-card--app:focus-visible,
body.zp-sl-category-mode .zp-sl-card--carousel:focus,
body.zp-sl-category-mode .zp-sl-card--carousel:focus-visible {
outline: none !important;
}
body.zp-sl-category-mode .zp-sl-card:active,
body.zp-sl-category-mode .zp-sl-card--app:active,
body.zp-sl-category-mode .zp-sl-card--app2026:active,
body.zp-sl-category-mode .zp-sl-card--carousel:active,
body.zp-sl-category-mode .zp-sl-card-li--app2026:active,
body.zp-sl-category-mode #zp-sl-results-list > li.zp-sl-card-li--app2026:active,
body.zp-sl-category-mode .zp-sl-carousel:active,
body.zp-sl-category-mode .zp-sl-carousel__track:active,
body.zp-sl-category-mode .zp-sl-carousel__slide:active {
transform: none !important;
filter: none !important;
opacity: 1 !important;
outline: none !important;
background: var(--zp-sl-card-surface, linear-gradient(165deg, #eceff4 0%, #dfe6ef 100%)) !important;
box-shadow:
0 2px 10px rgba(15, 23, 42, 0.07),
0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
body.zp-sl-category-mode .zp-sl-card.zp-sl-card--pro:active,
body.zp-sl-category-mode .zp-sl-card--app.zp-sl-card--pro:active,
body.zp-sl-category-mode .zp-sl-card--app2026.zp-sl-card--pro:active,
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--pro:active {
background: var(--zp-sl-card-surface-pro, linear-gradient(165deg, #e9eef5 0%, #d8e2ef 100%)) !important;
box-shadow:
0 2px 10px rgba(15, 23, 42, 0.07),
0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
@media (max-width: 767px) {
body.zp-sl-category-mode .zp-sl-card--app2026:active,
body.zp-sl-category-mode .zp-sl-card--carousel:active,
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--app2026:active {
box-shadow:
0 2px 12px rgba(15, 23, 42, 0.08),
0 1px 4px rgba(15, 23, 42, 0.05) !important;
}
}
body.zp-sl-category-mode .zp-sl-card--carousel .zp-sl-carousel__slide--main:active,
body.zp-sl-category-mode .zp-sl-card--carousel .zp-sl-card__inner--svc2026:active,
body.zp-sl-category-mode .zp-sl-card--carousel *:active:not(a):not(button):not(.zp-sl-carousel__arrow):not(.rate-it):not(.rate-it *) {
background: transparent !important;
box-shadow: none !important;
transform: none !important;
filter: none !important;
opacity: 1 !important;
}
/* PRO: glow azul sutil en el contorno */
body.zp-sl-category-mode .zp-sl-card.zp-sl-card--pro,
body.zp-sl-category-mode .zp-sl-card--app.zp-sl-card--pro,
body.zp-sl-category-mode .zp-sl-card--app2026.zp-sl-card--pro,
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--pro {
box-shadow:
0 0 0 1px rgba(37, 99, 235, 0.12),
0 2px 10px rgba(15, 23, 42, 0.07),
0 1px 3px rgba(15, 23, 42, 0.04),
0 0 10px rgba(37, 99, 235, 0.06) !important;
}
body.zp-sl-category-mode .zp-sl-card.zp-sl-card--pro:active,
body.zp-sl-category-mode .zp-sl-card--app.zp-sl-card--pro:active,
body.zp-sl-category-mode .zp-sl-card--app2026.zp-sl-card--pro:active,
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--pro:active,
body.zp-sl-category-mode .zp-sl-card.zp-sl-card--pro:focus,
body.zp-sl-category-mode .zp-sl-card--app.zp-sl-card--pro:focus,
body.zp-sl-category-mode .zp-sl-card--app2026.zp-sl-card--pro:focus,
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--pro:focus {
box-shadow:
0 0 0 1px rgba(37, 99, 235, 0.12),
0 2px 10px rgba(15, 23, 42, 0.07),
0 1px 3px rgba(15, 23, 42, 0.04),
0 0 10px rgba(37, 99, 235, 0.06) !important;
}
@media (max-width: 767px) {
body.zp-sl-category-mode .zp-sl-card--app2026.zp-sl-card--pro,
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--pro,
body.zp-sl-category-mode .zp-sl-card--carousel.zp-sl-card--app2026.zp-sl-card--pro {
box-shadow:
0 0 0 1px rgba(37, 99, 235, 0.14),
0 2px 12px rgba(15, 23, 42, 0.08),
0 1px 4px rgba(15, 23, 42, 0.05),
0 0 12px rgba(37, 99, 235, 0.07) !important;
}
}