/* Generado por tools/build-visual-compat.mjs. Editar assets/css/legacy. */
@layer zti-legacy {
/* ============================================================================
   ZONATRONIK — CSS ÚNICO ML PRO v2025.12 ULTRA CLEAN
   Header ML FULL • Footer • Menú lateral con subcategorías
   Home avanzada • Category grid x4 • Single Product ML
   Badges + UX Premium • Botón flotante • Mobile tuned
============================================================================ */

/* ============================================================================
   0) BASE + TIPOGRAFÍA GLOBAL
============================================================================ */
body {
    margin: 0 ;
    padding: 0 ;
    background: #f5f5f5 ;
    font-family: "Roboto", sans-serif ;
    color: #111;
}

/* Contenedor global ML PRO */
.zt-home,
.zt-contenedor {
    width: 95%;
    max-width: 1350px;
    margin: 0 auto;
}

/* Quitar márgenes de secciones Elementor */
.elementor-section {
    margin: 0 ;
}

/* Menú lateral abierto bloquea scroll */
body.zt-menu-open {
    overflow: hidden ;
}

/* Quitar márgenes/gaps extra de temas */
.site-main,
#primary,
#content {
    margin: 0 ;
    padding: 0 ;
}

/* Botón "Categorías" */
.zt-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #222;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #333;
    font-size: 14px;
    text-transform: uppercase;
}

.zt-cat-btn i {
    font-size: 16px;
}

.zt-cat-btn:hover {
    background: #333;
    border-color: #444;
}

/* ============================================================================
   3) BOTÓN FLOTANTE ML — COMPRAR AHORA
============================================================================ */

#zt-float-btn {
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffd400;
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 800;
    color: #111;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .1s ease;
    z-index: 9999;
    box-shadow: 0 0 20px rgba(0,0,0,.25);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#zt-float-btn span {
    font-size: 14px;
}

/* Cuando JS le agrega esta clase, se muestra */
#zt-float-btn.zt-show {
    opacity: 1;
    pointer-events: auto;
}

/* Pequeña vibración para llamar la atención */
#zt-float-btn.zt-vibrate {
    animation: zt-vibrate .3s;
}

@keyframes zt-vibrate {
    0%   { transform: translate(-50%, 0); }
    25%  { transform: translate(-50%, -2px); }
    50%  { transform: translate(-50%, 2px); }
    75%  { transform: translate(-50%, -2px); }
    100% { transform: translate(-50%, 0); }
}

@media (min-width: 1025px) {
    #zt-float-btn {
        display: none ; /* Solo mobile/tablet */
    }
}

/* ============================================================================
   4) HOME ML PRO / HERO / SECCIONES
============================================================================ */

/* Cada bloque de la home (categorías, últimos productos, etc.) */
.zt-home-section {
    width: 95%;
    max-width: 1350px;
    margin: 40px auto;
}

/* Hero */
.zt-hero {
    width: 95%;
    max-width: 1350px;
    margin: 20px auto 50px;
    background: linear-gradient(90deg, #ffe600, #fff7b3);
    border-radius: 18px;
    padding: 40px 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 30px;
}

/* Columna izquierda (texto) */
.zt-hero-left h1 {
    font-size: 36px;
    font-weight: 900;
    color: #000;
    margin: 0 0 12px;
}

.zt-hero-left p {
    font-size: 16px;
    color: #333;
    margin: 0;
}

/* Botón principal del hero */
.zt-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #111;
    color: #fff ;
    padding: 12px 20px;
    margin-top: 20px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
}

.zt-hero-cta:hover {
    background: #000;
}

/* Columna derecha (imagen) */
.zt-hero-right img {
    width: 100%;
    border-radius: 12px;
    display: block;
}

/* Título de sección (Categorías principales / Últimos productos / etc.) */
.zt-titulo-seccion {
    background: #ffea00;
    color: #000;
    padding: 10px 18px;
    font-size: 26px;
    display: inline-block;
    border-radius: 6px;
    font-weight: 700;
    margin: 30px 0 20px;
}

/* Hero responsive */
@media (max-width: 900px) {
    .zt-hero {
        grid-template-columns: 1fr;
        padding: 28px 20px;
    }

    .zt-hero-left h1 {
        font-size: 30px;
    }
}

@media (max-width: 600px) {
    .zt-hero {
        margin: 16px auto 30px;
        padding: 22px 16px;
    }

    .zt-hero-left h1 {
        font-size: 24px;
    }

    .zt-hero-cta {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   5) GRID CATEGORÍAS HOME — ICONOS PRINCIPALES
============================================================================ */

/* Contenedor de las cards de categorías principales */
.zt-grid-cat-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 22px;
    text-align: center;
}

/* Card de categoría principal (link completo) */
.zt-cat-icon-card {
    background: #fff;
    padding: 18px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    border: 1px solid #eee;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Circulito donde va el SVG o la imagen de categoría */
.zt-cat-icon-img {
    width: 60px;
    height: 60px;
    background: #fff8bf;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 2px solid #ffea00;
}

/* Imagen o SVG adentro */
.zt-cat-icon-img img,
.zt-cat-icon-img svg {
    width: 70%;
    height: 70%;
    object-fit: contain;
    display: block;
}

/* Nombre de la categoría */
.zt-cat-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    text-transform: uppercase;
}

/* Hover estilo ML */
.zt-cat-icon-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.16);
    border-color: #ffea00;
}

/* ============================================================================
   6) ARCHIVE SHOP / CATEGORY — TÍTULO + CONTENEDOR
============================================================================ */

.zt-archive-container {
    width: 95%;
    max-width: 1350px;
    margin: 25px auto 40px;
}

/* Título general de la tienda o categoría */
.zt-archive-title {
    font-size: 26px;
    font-weight: 800;
    margin: 10px 0 20px;
    text-transform: uppercase;
    color: #111;
}

/* Ajuste de paginación */
.woocommerce-pagination {
    margin-top: 24px;
    text-align: center;
}

.woocommerce-pagination .page-numbers li {
    display: inline-block;
    margin: 0 3px;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 13px;
    text-decoration: none;
    color: #333;
}

.woocommerce-pagination .page-numbers .current {
    background: #ffea00;
    border-color: #ffea00;
    font-weight: 700;
    color: #000;
}

/* ============================================================================
   7) GRID HOME / SHOP / RELACIONADOS — ESTILO ML PRO
   4 col desktop · 3 col tablet · 2 col mobile
============================================================================ */

.products.zt-products-grid {
    display: grid ;
    grid-template-columns: repeat(4, minmax(0, 1fr)) ;
    gap: 20px ;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* 3 columnas en pantallas medianas */
@media (max-width: 1100px) {
    .products.zt-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) ;
    }
}

/* 2 columnas en tablet y mobile */
@media (max-width: 800px) {
    .products.zt-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }
}

/* Seguimos con 2 columnas también en celulares chicos */
@media (max-width: 480px) {
    .products.zt-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }
}

/* Solo en teléfonos MUY angostos (menos de 360px) pasamos a 1 columna */
@media (max-width: 360px) {
    .products.zt-products-grid {
        grid-template-columns: 1fr ;
    }
}


/* ============================================================================
   IMAGEN DE PRODUCTO — ESTILO ML PRO
============================================================================ */

/* Enlace contenedor de la miniatura */
.zt-product-thumb {
    width: 100% ;
    display: block ;
    margin-bottom: 8px;
}

/* Caja interna fija: define el alto real de la imagen */
.zt-thumb-inner {
    width: 100% ;
    height: 220px ;          /* 🔥 altura final aprobada */
    padding: 8px;
    border-radius: 14px;
    background: #ffffff;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    overflow: hidden;
}

/* Imagen siempre contenida y grande */
.zt-product-thumb img,
.zt-thumb-inner img {
    width: 100% ;
    height: 100% ;
    max-height: none ;
    object-fit: contain ;    /* respeta forma cuadrada, sin cortes */
    display: block;
    transition: transform .25s ease;
}

/* Hover suave */
.zt-product-item:hover .zt-product-thumb img,
.zt-product-item:hover .zt-thumb-inner img {
    transform: scale(1.03);
}

/* ============================================================================
   TÍTULO + PRECIO
============================================================================ */

.zt-product-title {
    margin: 4px 0 2px;
}

.zt-product-title a {
    color: #d7002e;
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
}

.zt-product-title a:hover {
    text-decoration: underline;
}

/* Precio centrado estilo ML */
.zt-product-price {
    font-size: 20px;
    font-weight: 700;
    margin: 8px 0 4px;
    text-align: center ;
    width: 100%;
}

.zt-product-price .woocommerce-Price-amount,
.zt-product-price bdi {
    display: inline-block;
    width: auto;
    text-align: center ;
}

/* ============================================================================
   CAJA DE CUOTAS ML PRO — HOME / GRID
============================================================================ */

.zt-cuotas-box {
    background: #fffbe6;                  /* Fondo amarillo suave ML */
    border: 1px solid #ffeb99;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    margin: 10px auto;
    width: 90%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.zt-cuotas-box span {
    display: block;
    margin: 2px 0;
    font-weight: 600;
}

/* Primera línea (cuotas) en azul tipo ML */
.zt-cuotas-box span:first-child {
    color: #0b72c9;
}

/* Última línea (transferencia / promo) en verde */
.zt-cuotas-box span:last-child {
    color: #008944;
}

/* Animación simple */
@keyframes ztFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* CAJA CUOTAS + TRANSFERENCIA — SINGLE PRODUCT */
.zt-box-cuotas-ml {
    background: #fff9d4;
    padding: 14px 14px;
    border-radius: 12px;
    border: 2px solid #ffea00;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.zt-box-cuotas-ml .zt-line-cuotas {
    color: #0b72c9;
    font-weight: 700;
}

.zt-box-cuotas-ml .zt-line-transf {
    color: #008944;
    font-weight: 700;
}

.zt-box-cuotas-ml .zt-line-info {
    color: #444;
    font-size: 13px;
}

/* TABS / DESCRIPCIÓN LARGA (Woo) */
.woocommerce-tabs {
    width: 95%;
    max-width: 1300px;
    margin: 30px auto 10px;
    background: #fff;
    padding: 16px 18px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #eee;
}

.woocommerce-tabs ul.tabs li {
    list-style: none;
    margin: 0;
}

.woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 8px 12px;
    font-size: 13px;
    text-decoration: none;
    color: #555;
    border-radius: 6px 6px 0 0;
}

.woocommerce-tabs ul.tabs li.active a {
    background: #ffea00;
    color: #000;
    font-weight: 700;
}

.woocommerce-tabs .panel {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.zt-menu-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 14px;
}

.zt-menu-title i {
    font-size: 16px;
}

#zt-menu-close {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

/* Cuerpo del menú */
.zt-menu-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0 16px;
}

/* Item principal */
.zt-menu-item {
    border-bottom: 1px solid #f2f2f2;
}

.zt-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 600;
}

.zt-menu-link:hover {
    background: #f9f9f9;
}

/* Flecha / icono de subcategorías */
.zt-menu-arrow {
    margin-left: 8px;
    font-size: 12px;
    color: #999;
}

/* Subcategorías (lista interna que JS muestra/oculta) */
.zt-subcat-list {
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
    display: none;
}

.zt-subcat-item a {
    display: flex;
    justify-content: space-between;
    padding: 6px 26px 6px 32px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
}

.zt-subcat-item a:hover {
    background: #f5f5f5;
    color: #111;
}

/* Contador de productos (si lo usás) */
.zt-cat-count {
    font-size: 11px;
    color: #999;
    margin-left: 6px;
}

/* Estados abiertos (JS agrega clases tipo .is-open) */
.zt-menu-item.is-open > .zt-subcat-list {
    display: block;
}

.zt-menu-item.is-open .zt-menu-link {
    background: #fffde0;
}

/* ============================================================================
   11) BADGES ML PRO + ROTADOR
============================================================================ */

/* Wrapper general en la card (ya lo usás en content-product.php) */
.zt-product-badges {
    min-height: 0;
    margin-bottom: 6px;
}

/* Para cuando uses múltiples badges apilados / rotando */
.zt-badges-wrapper,
.zt-badges-single {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

/* Badge base */
.zt-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #111;
    background: #ffeb00;
}

/* Colores específicos */
.zt-badge-oferta {
    background: #ff1744;
    color: #fff;
}

.zt-badge-nuevo {
    background: #00c853;
    color: #fff;
}

.zt-badge-top {
    background: #ffea00;
    color: #111;
}

.zt-badge-unidades {
    background: #ff9100;
    color: #111;
}

/* Rotador simple (si JS va cambiando .is-active) */
.zt-badge-rotator .zt-badge {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}

.zt-badge-rotator .zt-badge.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* Lista raíz */
#zt-menu-dynamic {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Nodo genérico */
.zt-cat-item {
    background: #ffffff;
    border-bottom: 1px solid #f1f1f1;
}

/* Fila principal */
.zt-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
}

/* Enlace principal */
.zt-cat-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #333;
}

/* Icono solo nivel 0 */
.zt-level-0 .zt-cat-main i {
    width: 18px;
    text-align: center;
    font-size: 15px;
}

/* Nombre */
.zt-cat-name {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Indentación por nivel (efecto árbol) */
.zt-level-0 .zt-cat-main { padding-left: 0; }
.zt-level-1 .zt-cat-main { padding-left: 16px; }
.zt-level-2 .zt-cat-main { padding-left: 32px; }
.zt-level-3 .zt-cat-main { padding-left: 48px; }
.zt-level-4 .zt-cat-main { padding-left: 64px; }

/* Botón flecha tipo tarjeta */
.zt-cat-toggle {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid #ff4081;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ff4081;
    transition: background .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
}

.zt-cat-toggle .zt-drop {
    font-size: 13px;
    transition: transform .15s ease;
}

/* Estado abierto (padre seleccionado) */
.zt-cat-item.open .zt-cat-row {
    background: #fffde7;
    border-left: 3px solid #ffea00;
}

.zt-cat-item.open .zt-cat-toggle {
    background: #ff4081;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.05);
}

.zt-cat-item.open .zt-cat-toggle .zt-drop {
    transform: rotate(180deg);
}

/* UL de subniveles – ¡SIN max-height! */
.zt-subcats {
    list-style: none;
    margin: 0;
    padding: 0 0 4px 0;
    background: #ffffff;
    display: none;          /* cerradas por defecto */
}

/* Cuando el nodo está abierto, mostramos hijos */
.zt-cat-item.open > .zt-subcats {
    display: block;
}

/* Hojas finales: contador a la derecha */
.zt-cat-count {
    font-size: 11px;
    color: #999;
    margin-left: 8px;
}

/* Hover general */
.zt-cat-item:hover .zt-cat-row {
    background: #fafafa;
}
/* ============================================================================
   MEJORA VISUAL — CATEGORÍA ABIERTA BIEN MARCADA
============================================================================ */

/* Estado normal de cada item (ya lo tenías parecido, lo reforzamos) */
.zt-cat-item {
    background: #ffffff;
    border-bottom: 1px solid #f1f1f1;
}

/* Bloque completo cuando está abierto */
.zt-cat-item.open {
    background: #fff8b0;                 /* amarillo suave */
    border-radius: 8px;
    box-shadow: 0 0 0 2px #ffea00;      /* marco amarillo alrededor */
    border-bottom-color: transparent;
    margin: 2px 6px;                     /* leve separación con el resto */
}

/* Fila principal dentro del bloque abierto */
.zt-cat-item.open .zt-cat-row {
    background: transparent;             /* ya se marca el contenedor */
    border-left: none;                   /* por si tenías un borde viejo */
}

/* Subniveles de la categoría abierta */
.zt-cat-item.open > .zt-subcats {
    display: block;                      /* siempre visibles cuando está open */
    border-radius: 0 0 8px 8px;
    padding-bottom: 4px;
}

/* Botón rosa mantiene el estado activo */
.zt-cat-toggle {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid #ff4081;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ff4081;
    transition: background .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
}

.zt-cat-toggle .zt-drop {
    font-size: 13px;
    transition: transform .15s ease;
}

/* Botón cuando el item está abierto */
.zt-cat-item.open .zt-cat-toggle {
    background: #ff4081;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

.zt-cat-item.open .zt-cat-toggle .zt-drop {
    transform: rotate(180deg);
}

/* Indentación por nivel para que el árbol se lea mejor */
.zt-level-0 .zt-cat-main { padding-left: 0; }
.zt-level-1 .zt-cat-main { padding-left: 16px; }
.zt-level-2 .zt-cat-main { padding-left: 32px; }
.zt-level-3 .zt-cat-main { padding-left: 48px; }
.zt-level-4 .zt-cat-main { padding-left: 64px; }

.zt-cat-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #333;
}

.zt-cat-name {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

/* UL de subniveles – sin trucos de max-height, solo se muestra con .open */
.zt-subcats {
    list-style: none;
    margin: 0;
    padding: 0 0 4px 0;
    background: #ffffff;
    display: none;
}

.zt-cat-item.open > .zt-subcats {
    display: block;
}

/* Contador de productos en hojas finales */
.zt-cat-count {
    font-size: 11px;
    color: #999;
    margin-left: 8px;
}

.zt-menu-title {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .04em;
}

#zt-menu-close {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.zt-step {
    padding: 4px 8px;
    border-radius: 999px;
    background: #eeeeee;
    color: #666;
}

.zt-step--active {
    background: #111;
    color: #ffea00;
}

.zt-step--done {
    background: #4caf50;
    color: #fff;
}

/* ============================================================================
   LOGIN / REGISTRO — AUTH ML PRO
============================================================================ */
.zt-auth-layout {
    width: 95%;
    max-width: 720px;
    margin: 24px auto 40px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.zt-auth-box {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    padding: 16px 18px 20px;
}

.zt-auth-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
}

.zt-auth-subtitle {
    font-size: 13px;
    color: #666;
    margin: 0 0 12px;
}

.zt-auth-social {
    margin-bottom: 10px;
}

.zt-auth-social-label {
    font-size: 12px;
    margin-bottom: 4px;
    color: #555;
}

.zt-auth-divider {
    text-align: center;
    font-size: 11px;
    color: #999;
    margin: 6px 0 10px;
    position: relative;
}

.zt-auth-divider span {
    background: #fff;
    padding: 0 8px;
    position: relative;
    z-index: 1;
}

.zt-auth-divider:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #eee;
    z-index: 0;
}

.zt-auth-form label {
    font-size: 12px;
}

.zt-auth-form .input-text {
    font-size: 13px;
}

.zt-auth-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.zt-auth-submit {
    padding: 8px 16px;
    border-radius: 999px;
    background: #ffea00 ;
    color: #111 ;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border: none;
}

.zt-auth-hint {
    font-size: 12px;
    color: #666;
}

/* Métodos de pago */
.zt-payment-methods {
    list-style: none;
    margin: 10px 0 12px;
    padding: 0;
}

.zt-payment-method {
    border-radius: 12px;
    border: 1px solid #ececec;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: #fafafa;
}

.zt-payment-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

.zt-payment-label-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.zt-payment-label input[type="radio"] {
    margin: 0;
}

.zt-payment-title {
    font-size: 13px;
    font-weight: 600;
}

.zt-payment-icon img {
    max-height: 18px;
}

/* Destacar Mercado Pago */
.zt-payment-method--highlight {
    border-color: #00b0ff;
    background: #e3f5ff;
}

.zt-payment-method--highlight .zt-payment-title {
    color: #0066cc;
}

.zt-place-order-btn {
    padding: 9px 18px;
    border-radius: 999px;
    background: #ffea00 ;
    color: #111 ;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border: none;
}
/* ============================================================================
   ZT — Avisos ML PRO (producto añadido, info, etc.)
============================================================================ */

/* Mensajes de WooCommerce (éxito + info genérica) */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
    border-radius: 12px;
    border: 1px solid #d8e9b0;
    background: #f8fff1;
    padding: 10px 14px;
    margin: 10px auto 6px;
    max-width: 1100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

/* Iconito al inicio (check / info) */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before {
    content: "✔";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #8bc34a;
    color: #fff;
    font-size: 13px;
    margin-right: 8px;
}

/* Botón "Ver carrito" dentro del aviso */
.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-info .button {
    background: #ffea00;
    color: #000;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    text-transform: uppercase;
}

.woocommerce-notices-wrapper .woocommerce-message .button:hover,
.woocommerce-notices-wrapper .woocommerce-info .button:hover {
    background: #ffd600;
}

/* En mobile: aviso en columna */
@media (max-width: 768px) {
    .woocommerce-notices-wrapper .woocommerce-message,
    .woocommerce-notices-wrapper .woocommerce-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .woocommerce-notices-wrapper .woocommerce-message .button,
    .woocommerce-notices-wrapper .woocommerce-info .button {
        margin-top: 6px;
    }
}

/* ============================================================================
   Badge "NUEVO" – que tenga sólo el ancho del texto
============================================================================ */
.zt-badge-new {
    display: inline-flex ;   /* que se achique al contenido */
    width: auto ;
    flex: 0 0 auto ;        /* cancela cualquier flex:1 que tuviera */
    align-self: flex-start;           /* que se pegue al inicio, no estire */
    padding: 4px 16px;                /* pill prolijo */
    border-radius: 999px;             /* por si no lo tenía redondeado */
}
/* ============================================================================
   Badge "ÚLTIMAS UNIDADES" – ancho sólo hasta el texto
============================================================================ */
.zt-badge-stock {
    display: inline-flex ;   /* se ajusta al contenido */
    width: auto ;
    flex: 0 0 auto ;
    align-self: flex-start;            /* no ocupa toda la fila */
    padding: 4px 16px;                 /* pastilla prolija */
    border-radius: 999px;

    background: #ff1744 ;    /* rojo alerta */
    color: #ffffff ;
    border-color: #ff1744 ;
}

.zt-badge-stock i,
.zt-badge-stock svg {
    color: #ffffff ;
    fill: #ffffff ;
}
/* Caja de cuotas ML PRO */
.zt-cuotas-box .zt-cuota-line {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}

/* Botón COMPRA DIRECTA dentro de la caja */
.zt-cuotas-box .zt-buy-now-btn {
    margin-top: 6px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    border: none;
    background: #ffea00;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 0 rgba(0,0,0,0.18);
}

.zt-cuotas-box .zt-buy-now-btn:hover {
    filter: brightness(0.95);
    transform: translateY(1px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
/* =========================================
   TARJETA DE PRODUCTO – ESTRUCTURA COLUMNA
========================================= */

.zt-product-item {
    display: flex;
    flex-direction: column;
}

/* TÍTULO CENTRADO */
.zt-product-item .zt-product-title {
    text-align: center;
    font-size: 18px;
    line-height: 1.3;
    margin: 12px 14px 8px;
}

/* Precio alineado con el título */
.zt-product-item .zt-product-price {
    text-align: center;
    margin-bottom: 8px;
}

/* BLOQUE DE ACCIONES (CUOTAS + COMPRA DIRECTA + CARRITO)
   Siempre pegado al pie de la tarjeta
*/
.zt-product-item .zt-card-actions {
    margin-top: auto;                 /* empuja el bloque hacia abajo */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 6px;
}

/* Caja de cuotas sin margen extra */
.zt-product-item .zt-cuotas-box {
    margin: 0;
}

/* Botón COMPRA DIRECTA dentro de la caja amarilla */
.zt-product-item .zt-buy-now-btn {
    display: block;
    text-align: center;
    font-weight: 700;
    border-radius: 999px;
    padding: 10px 12px;
    background: #ffeb00;
    color: #111;
    border: none;
    text-decoration: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,.05);
}

/* Ajustes en mobile */
@media (max-width: 768px) {
    .zt-product-item .zt-product-title {
        font-size: 16px;
        margin: 10px 10px 6px;
    }

    .zt-product-item .zt-card-actions {
        gap: 6px;
    }
}
/* =========================================
   TARJETA DE PRODUCTO – COLUMNAS ML PRO
========================================= */

.zt-product-item {
    display: flex;
    flex-direction: column;
}

/* TÍTULO CENTRADO */
.zt-product-item .zt-product-title {
    text-align: center;
    font-size: 18px;
    line-height: 1.3;
    margin: 12px 14px 8px;
}

/* Precio alineado con el título */
.zt-product-item .zt-product-price {
    text-align: center;
    margin-bottom: 8px;
}

/* BLOQUE DE ACCIONES (CUOTAS + COMPRA DIRECTA + CARRITO)
   Siempre pegado al pie de la card
*/
.zt-product-item .zt-card-actions {
    margin-top: auto;                 /* lo empuja hacia abajo */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 6px;
}

/* Caja de cuotas sin margen extra */
.zt-product-item .zt-cuotas-box {
    margin: 0;
}

/* Botón COMPRA DIRECTA (pastilla amarilla) */
.zt-product-item .zt-buy-now-btn {
    display: block;
    text-align: center;
    font-weight: 700;
    border-radius: 999px;
    padding: 10px 12px;
    background: #ffeb00;
    color: #111;
    border: none;
    text-decoration: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,.05);
}

/* Mobile */
@media (max-width: 768px) {
    .zt-product-item .zt-product-title {
        font-size: 16px;
        margin: 10px 10px 6px;
    }

    .zt-product-item .zt-card-actions {
        gap: 6px;
    }
}
/* ============================================================
   BLOQUE ACCIONES DE LA CARD
   (Cuotas / Transferencia + Compra directa + Añadir al carrito)
============================================================ */

.zt-product-item .zt-card-actions {
    margin-top: 12px;
    padding: 0 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

/* Caja de cuotas / transferencia dentro de la card */
.zt-product-item .zt-card-actions .zt-cuotas-box {
    background: #fff7d2;
    border-radius: 18px;
    padding: 10px 14px 14px;
    border: 1px solid #ffe38a;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
    font-size: 13px;
    line-height: 1.3;
}

/* Líneas internas de la caja (cuotas / transferencia) */
.zt-product-item .zt-card-actions .zt-cuotas-box p,
.zt-product-item .zt-card-actions .zt-cuotas-box span {
    display: block;
    margin: 2px 0;
}

/* Botón COMPRA DIRECTA (más protagonista) */
.zt-product-item .zt-card-actions .zt-buy-now-btn {
    background: #ffe200;
    color: #000;
}

/* TÍTULO centrado y con un poco de aire */
.zt-product-title {
    text-align: center;
    margin: 10px 12px 4px;
}

.zt-product-title a {
    color: #d90000;
    text-decoration: none;
}
/* Reordenar elementos dentro de la card:
   1) COMPRA DIRECTA
   2) AÑADIR AL CARRITO
   3) Caja cuotas / transferencia (abajo del todo)
*/
.zt-product-item .zt-card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 1) Botón COMPRA DIRECTA arriba */
.zt-product-item .zt-card-actions .zt-buy-now-btn {
    order: 1;
}

/* 3) Caja de cuotas / transferencia al final */
.zt-product-item .zt-card-actions .zt-cuotas-box {
    order: 3;
    margin-top: 4px;  /* si la querés más pegada, bajá este número */
}
/* ================================
   ESTRUCTURA GENERAL DE LA CARD
==================================*/
.zt-product-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Badges (NUEVO, Últimas unidades, etc.)
   los dejamos arriba, normalmente ya están
   posicionados por CSS, pero por las dudas:
*/
.zt-product-item .zt-product-badges {
    order: 0;
}

/* 1) IMAGEN DEL PRODUCTO */
.zt-product-item .zt-product-thumb {
    order: 1;
    margin-bottom: 8px;
}

/* 2) TÍTULO */
.zt-product-item .zt-product-title {
    order: 2;
    text-align: center;
    margin: 0 0 6px;
}

/* 3) PRECIO */
.zt-product-item .zt-product-price {
    order: 3;
    text-align: center;
    margin-bottom: 10px;
}

/* 4, 5 y 6) BLOQUE CUOTAS + BOTONES */
.zt-product-item .zt-card-actions {
    order: 4;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

/* 4) Caja de cuotas / transferencia ABAJO DEL PRECIO */
.zt-product-item .zt-card-actions .zt-cuotas-box {
    order: 1;
}

/* 5) Botón COMPRA DIRECTA */
.zt-product-item .zt-card-actions .zt-buy-now-btn {
    order: 2;
}

/* Botones genéricos ZT */
.zt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    transition: transform .08s ease, box-shadow .08s ease, background .08s ease;
}

.zt-btn-primary {
    background: #ffea00;
    color: #000;
    box-shadow: 0 2px 0 #e0c800;
}

.zt-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 0 #e0c800;
}

.zt-btn-secondary {
    background: #f1f1f1;
    color: #333;
}

.zt-toast-btn {
    padding: 6px 10px;
    border-radius: 999px;
    background: #ffea00;
    color: #000;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}

.zt-toast-close {
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}
/* Ocultar el selector de país en carrito y checkout
   (solo si VENDÉS EXCLUSIVAMENTE A ARGENTINA) */
.woocommerce-shipping-calculator #calc_shipping_country_field,
.woocommerce-billing-fields #billing_country_field,
.woocommerce-shipping-fields #shipping_country_field {
    display: none ;
}
/* ============================================================
   Badge ML PRO — "Llega en 24 hs"
============================================================ */

.zt-local-24-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 12px;
    border-radius: 999px;
    background: #e6f8ec;   /* verde muy clarito */
    color: #00a650;        /* verde tipo ML */
    font-size: 12px;
    font-weight: 600;
    margin: 6px auto 4px;
    line-height: 1.2;
}

.zt-local-24-badge .zt-local-24-text::before {
    content: "⚡";
    font-size: 13px;
    margin-right: 3px;
}

/* Ajuste específico para las cards del loop */
.zt-product-item .zt-local-24-badge-loop {
    margin-top: 4px;
}

/* Por si querés un pelín más de separación en el single */
.zt-local-24-badge-single {
    margin-top: 8px;
}
.zt-pay-label {
    font-weight: 600;
}

/* ============================================================================
   MENSAJES / AVISOS WOOCOMMERCE — ESTILO ML PRO
   ============================================================================ */

.woocommerce-notices-wrapper {
    width: 95%;
    max-width: 1350px;
    margin: 10px auto 0;        /* Centrado como el resto del layout */
}

/* Caja base de todos los mensajes */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 0 0 10px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Mensaje OK (producto agregado, etc.) */
.woocommerce-message {
    background: #e8f5e9;      /* Verde muy suave */
    border-color: #66bb6a;
    color: #1b5e20;
}

/* Mensaje de error */
.woocommerce-error {
    background: #ffebee;      /* Rojo suave */
    border-color: #ef5350;
    color: #b71c1c;
}

/* Mensaje informativo */
.woocommerce-info {
    background: #e3f2fd;      /* Azul suave */
    border-color: #42a5f5;
    color: #0d47a1;
}

/* Iconito de inicio tipo plataforma */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    display: inline-block;
    margin-right: 6px;
    font-size: 16px;
}

/* Emojis según tipo de mensaje */
.woocommerce-message::before {
    content: "✅";
}

.woocommerce-error::before {
    content: "⚠️";
}

.woocommerce-info::before {
    content: "ℹ️";
}

/* Ajuste responsive para mobile */
@media (max-width: 600px) {
    .woocommerce-notices-wrapper {
        width: 96%;
        margin-top: 8px;
    }

    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info {
        padding: 9px 10px;
        font-size: 12px;
    }
}
/* ============================================================
   HOME — BARRA DE BENEFICIOS
============================================================ */
.zt-benefits-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 28px;
    padding: 10px 16px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Aseguramos que no se pegue demasiado a los bordes de .zt-home si cambia el layout */
.zt-home .zt-benefits-bar {
    box-sizing: border-box;
}

.zt-benefit-item {
    flex: 1 1 180px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    white-space: nowrap;
}

.zt-benefit-item i {
    font-size: 18px;
    color: #ffdd00; /* amarillo ML */
}

/* Vista mobile */
@media (max-width: 768px) {
    .zt-benefits-bar {
        padding: 8px 12px;
        gap: 8px;
    }

    .zt-benefit-item {
        flex: 1 1 48%;
        font-size: 13px;
        white-space: normal;
    }

    .zt-benefit-item i {
        font-size: 16px;
    }
}

/* Vista muy chica (celus gama baja / 320px) */
@media (max-width: 400px) {
    .zt-benefit-item {
        flex: 1 1 100%;
    }
}


/* ================================================================================================================================================================================================================================================
   ML PRO — CARDS DE PRODUCTO SIEMPRE ALINEADAS (HOME / CATEGORÍAS)
   Pegar al final del zt-mlpro-style.css
============================================================ */

/* GRID base */
.products.zt-products-grid {
    display: grid ;
    grid-template-columns: repeat(4, minmax(0, 1fr)) ;
    gap: 22px ;
    width: 100%;
    padding: 0;
    margin: 0;
    align-items: stretch; /* estira todas las cards a la misma altura de fila */
}

/* Responsivo columnas */
@media (max-width: 1100px) {
    .products.zt-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) ;
    }
}

@media (max-width: 800px) {
    .products.zt-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }
}

/* Móviles chicos: seguimos con 2 productos por fila */
@media (max-width: 480px) {
    .products.zt-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }
}

/* Cada producto = columna flexible de alto completo */
.products.zt-products-grid .product,
.products.zt-products-grid .zt-product-item {
    list-style: none ;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Badges siempre arriba con un pequeño margen */
.products.zt-products-grid .zt-product-badges {
    margin-bottom: 4px;
}

/* Imagen */
.products.zt-products-grid .zt-product-thumb {
    display: block;
    margin-bottom: 8px;
}

.products.zt-products-grid .zt-thumb-inner {
    height: 220px ;      /* mismo alto para todas las imágenes */
    display: flex ;
    align-items: center ;
    justify-content: center ;
}

/* Título: máximo 2 líneas y misma altura siempre */
.products.zt-products-grid .zt-product-title {
    text-align: center;
    font-size: 17px;
    line-height: 1.3;
    margin: 8px 10px 4px;
    min-height: 44px;              /* reserva espacio para 2 líneas */
}

.products.zt-products-grid .zt-product-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;         /* corta en 2 líneas si es muy largo */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Precio centrado */
.products.zt-products-grid .zt-product-price {
    text-align: center ;
    margin: 4px 0 4px;
}

/* Badge "Llega en 24 hs" con espacio uniforme */
.products.zt-products-grid .zt-local-24-badge-loop {
    text-align: center;
    margin-bottom: 8px;
}

/* BLOQUE DE ACCIONES (cuotas + botones) SIEMPRE ABAJO */
.products.zt-products-grid .zt-card-actions {
    margin-top: auto;              /* pega todo el bloque al pie de la card */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 6px;
}

/* Caja de cuotas estandarizada */
.products.zt-products-grid .zt-card-actions .zt-cuotas-box {
    margin: 0 auto 2px;
    width: 90%;
    min-height: 40px;              /* evita que cambie mucho de alto si JS tarda */
}
/* Título más neutro y legible */
.zt-product-title a {
    color: #222 ;
}

/* Precio protagonista pero limpio */
.zt-product-price,
.zt-product-price bdi {
    color: #111 ;
    font-weight: 700;
}

/* Caja de cuotas más suave */
.zt-card-actions .zt-cuotas-box {
    background: #fffbe8 ; /* amarillo suave */
}

/* Botón principal "Compra directa" sigue siendo el más fuerte */
.zt-buy-now-btn {
    font-weight: 700;
}
/* ====================================================================================================================================================================================
   HERO — Tagline "Los mejores regalos siempre"
============================================================ */
.zt-hero-tagline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-radius: 999px;
    background: #000000;
    color: #ffeb3b; /* amarillo ML */
}

.zt-hero-tagline::before {
    content: "🎁";
    font-size: 14px;
}

@media (max-width: 768px) {
    .zt-hero-tagline {
        font-size: 12px;
        margin-bottom: 8px;
    }
}

/* ============================================================
   HERO — Imagen del local (base)
============================================================ */
.zt-hero-right .zt-hero-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
}

/* ============================================================
   HERO — Layout DESKTOP (pantallas grandes)
============================================================ */
@media (min-width: 1024px) {

    .zt-hero {
        /* reducimos padding y espacio entre columnas */
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        column-gap: 24px;
        align-items: center;
        padding: 24px 28px;
    }

    .zt-hero-left {
        max-width: 100%;
    }

    .zt-hero-left p {
        max-width: 460px;
        font-size: 15px;
        line-height: 1.5;
    }

    .zt-hero-right .zt-hero-img {
        max-height: 420px; /* un poco más protagonista en desktop */
    }
}

/* ============================================================
   HERO — Layout MOBILE (pantallas chicas)
============================================================ */
@media (max-width: 768px) {

    .zt-hero {
        padding: 20px 16px 22px;
    }

    .zt-hero-left h1 {
        font-size: 24px;
        line-height: 1.2;
    }

    .zt-hero-left p {
        font-size: 13px;
        line-height: 1.4;
    }

    .zt-hero-right {
        margin-top: 16px;
    }

    .zt-hero-right .zt-hero-img {
        max-height: 260px; /* no se come toda la pantalla en móvil */
    }
}

/* ============================================================
   BARRA DE BENEFICIOS — Ajustes MOBILE
============================================================ */
@media (max-width: 768px) {
    .zt-benefits-bar {
        margin: 12px 0 20px;
        padding: 8px 10px;
        gap: 6px;
    }

    .zt-benefit-item {
        font-size: 12px;
    }
}
/* ============================================================
   HERO — Cajita "Entregas en el día..."
============================================================ */
.zt-hero-shipping {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #ffffff;
    color: #000000;
    font-size: 13px;
    font-weight: 600;
}

.zt-hero-shipping i {
    font-size: 16px;
    color: #00c853; /* verde rápido/envío */
}

/* ============================================================
   HERO — Wrapper del botón (centrado)
============================================================ */
.zt-hero-cta-wrap {
    margin-top: 18px;
    display: flex;
    justify-content: flex-start;  /* desktop: alineado con el texto */
}

/* En mobile, centrado completo */
@media (max-width: 768px) {
    .zt-hero-cta-wrap {
        justify-content: center;
    }

    .zt-hero-shipping {
        margin-top: 10px;
        text-align: center;
        padding: 6px 10px;
    }
}
/* HERO — Columna izquierda como columna flex */
.zt-hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* ============================================================
   HERO — Tagline "Los mejores regalos siempre"
============================================================ */
.zt-hero-tagline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    border-radius: 999px;
    background: #000000;
    color: #ffeb3b; /* amarillo ML */
    align-self: center;    /* centrado dentro de la columna */
}

.zt-hero-tagline::before {
    content: "🎁";
    font-size: 16px;
}

@media (max-width: 768px) {
    .zt-hero-tagline {
        font-size: 13px;
        padding: 6px 16px;
        margin-bottom: 10px;
    }
}
/* ============================================================
   HERO — Cajita "Entregas en el día..."
============================================================ */
.zt-hero-shipping {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 20px;
    border-radius: 999px;
    background: #ffffff;
    color: #000000;
    font-size: 14px;
    font-weight: 700;
    align-self: center;   /* centrada igual que la tagline */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.zt-hero-shipping i {
    font-size: 18px;
    color: #00c853; /* verde "rápido" */
}

@media (max-width: 768px) {
    .zt-hero-shipping {
        padding: 8px 14px;
        font-size: 13px;
        text-align: center;
    }
}

/* =========================================================================================================================================================================/* ============================================================================
   GRID PRODUCTOS ML PRO — Alinear imagen, título y precio
   Aplica solo donde usamos .zt-products-grid (home, tienda, categorías)
============================================================================ */

/* 1) Asegurar que la card sea columna completa */
.zt-products-grid .zt-product-item {
    display: flex;
    flex-direction: column;
}

/* 2) Imagen con alto fijo y centrada dentro de su caja */
.zt-products-grid .zt-product-item .zt-thumb-inner {
    height: 220px;                 /* altura fija para TODAS las fotos */
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.zt-products-grid .zt-product-item .zt-thumb-inner img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

/* 3) Título con altura mínima para que el precio no “salte” */
.zt-products-grid .zt-product-item .zt-product-title {
    margin: 10px 12px 6px;
    font-size: 16px;
    line-height: 1.25;
    text-align: center;
    min-height: 54px;              /* reserva espacio para 2–3 líneas */
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.zt-products-grid .zt-product-item .zt-product-title a {
    display: block;
}

/* 4) Precio siempre en la misma línea visual */
.zt-products-grid .zt-product-item .zt-product-price {
    text-align: center;
    margin-bottom: 10px;
}

/* 5) Mobile: un poco más compacto */
@media (max-width: 768px) {

    .zt-products-grid .zt-product-item .zt-thumb-inner {
        height: 200px;
    }

    .zt-products-grid .zt-product-item .zt-product-title {
        font-size: 14px;
        min-height: 48px;
        margin: 8px 10px 4px;
    }
}

/* ====================================================================================================================================================================================
   ML PRO — Mejora HERO + BARRA DE BENEFICIOS (dic 2025)
   Pegar al final del zt-mlpro-style.css
============================================================ */

/* HERO — Desktop: más aire y título más protagonista */
@media (min-width: 1024px) {
    .zt-hero {
        margin-top: 32px;
        margin-bottom: 56px;
        padding: 38px 40px;
        column-gap: 32px;
    }

    .zt-hero-left h1 {
        font-size: 40px;
        line-height: 1.15;
    }

    .zt-hero-left p {
        max-width: 520px;
        font-size: 15px;
        line-height: 1.55;
    }
}

/* HERO — Etiqueta + cajita de envíos más visibles */
.zt-hero-tagline {
    font-size: 15px;
    padding: 7px 22px;
}

.zt-hero-shipping {
    margin-top: 14px;
    padding: 9px 22px;
}

/* HERO — Botón con icono y efecto suave */
.zt-hero-cta {
    position: relative;
    padding: 13px 22px;
    font-size: 14px;
}

.zt-hero-cta::after {
    content: "→";
    display: inline-block;
    margin-left: 6px;
    font-size: 16px;
    line-height: 1;
}

.zt-hero-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}

/* HERO — Mobile: más respirado y centrado */
@media (max-width: 768px) {
    .zt-hero {
        padding: 22px 16px 26px;
    }

    .zt-hero-left {
        align-items: center;
        text-align: center;
    }

    .zt-hero-left h1 {
        font-size: 24px;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    .zt-hero-left p {
        font-size: 13px;
        max-width: 360px;
    }

    .zt-hero-cta-wrap {
        justify-content: center;
        width: 100%;
    }

    .zt-hero-right {
        margin-top: 18px;
    }

    .zt-hero-right .zt-hero-img {
        max-height: 260px;
        border-radius: 18px;
    }
}

/* BARRA DE BENEFICIOS — Más look de “cards” */
.zt-benefits-bar {
    padding: 14px 20px;
    gap: 12px;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
}

.zt-benefit-item {
    padding: 8px 10px;
    border-radius: 999px;
    background: #fafafa;
    white-space: normal; /* permite que el texto haga salto de línea */
}

.zt-benefit-item i {
    font-size: 18px;
}

/* Mobile: dos por fila, cómodas */
@media (max-width: 768px) {
    .zt-benefit-item {
        flex: 1 1 48%;
        justify-content: flex-start;
    }
}
/* ====================================================================================================================================================================================
   ZT — Páginas legales (Términos, Privacidad, etc.)
============================================================ */

.zt-legal-wrapper {
    max-width: 980px;
    margin: 30px auto 60px;
    padding: 28px 26px 40px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.06);
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}

.zt-legal-inner {
    max-width: 880px;
    margin: 0 auto;
}

/* Título principal */
.zt-legal-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 6px;
}

/* Línea de "Última actualización" */
.zt-legal-meta {
    font-size: 13px;
    color: #777;
    margin-bottom: 22px;
    font-style: italic;
}

/* Párrafos base */
.zt-legal-inner p {
    margin: 0 0 14px;
}

/* Subtítulos de secciones */
.zt-legal-inner h2 {
    font-size: 19px;
    margin: 26px 0 10px;
    padding-top: 16px;
    border-top: 1px solid #f1f1f1;
}

/* Listas */
.zt-legal-inner ul,
.zt-legal-inner ol {
    margin: 8px 0 16px 1.2rem;
    padding-left: 0;
}

.zt-legal-inner li {
    margin-bottom: 6px;
}

/* Links dentro del texto legal */
.zt-legal-inner a {
    color: #0073e6;
    text-decoration: none;
    border-bottom: 1px dotted rgba(0, 115, 230, 0.5);
}

.zt-legal-inner a:hover {
    text-decoration: none;
    border-bottom-style: solid;
}

/* Frase final de contacto un poquito destacada */
.zt-legal-inner p:last-of-type {
    margin-top: 24px;
}

/* Versión responsive */
@media (max-width: 768px) {
    .zt-legal-wrapper {
        margin: 16px 12px 32px;
        padding: 22px 18px 30px;
        border-radius: 16px;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
        font-size: 14px;
    }

    .zt-legal-title {
        font-size: 24px;
    }

    .zt-legal-inner h2 {
        font-size: 18px;
    }
}
/* ============================================================
   ZT — Páginas legales (versión con toque ML)
============================================================ */

/* Fondo general un poquito más gris en páginas legales (opcional) */
.page-template-zt-terminos-condiciones .site,
.page-template-zt-politica-privacidad .site,
.page-template-zt-eliminacion-datos .site {
    background: #f5f5f5;
}

/* Caja principal: leve gradiente, borde más suave */
.zt-legal-wrapper {
    background: linear-gradient(180deg, #fffdf0 0%, #ffffff 35%, #ffffff 100%);
    border-radius: 22px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.07);
}

/* Cabecera del título con “bandita” amarilla */
.zt-legal-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #ffd600;
    font-size: 22px;
    margin-bottom: 10px;
}

/* Para que el texto del título no quede tan negro sobre el amarillo */
.zt-legal-title {
    color: #222;
}

/* Línea de “Última actualización” un poco más separada */
.zt-legal-meta {
    margin-top: 4px;
    margin-bottom: 24px;
}

/* Subtítulos con una barrita amarilla a la izquierda */
.zt-legal-inner h2 {
    position: relative;
    padding-top: 18px;
    padding-left: 10px;
    border-top: 1px solid #f1f1f1;
    margin-top: 26px;
}

.zt-legal-inner h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 4px;
    height: 18px;
    border-radius: 999px;
    background: #ffd600;
}

/* Responsive: que la “píldora” del título no quede tan grande en móvil */
@media (max-width: 768px) {
    .zt-legal-title {
        font-size: 18px;
        padding: 5px 12px;
    }
}

/* Resumen lateral del pedido */
.woocommerce-order-overview.order_details {
    flex: 1 1 260px;
    background: #fafafa;
    border-radius: 16px;
    padding: 14px 18px;
    border: 1px solid #ececec;
}

.woocommerce-order-overview.order_details li {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}

.woocommerce-order-overview.order_details li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.woocommerce-order-overview.order_details li span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    margin-bottom: 2px;
}

.woocommerce-order-overview.order_details li strong {
    font-size: 14px;
}

/* Datos de transferencia ordenados en filas */
.zt-transfer-data {
    margin: 8px 0 10px;
    border-radius: 12px;
    background: #fff9cf;
    padding: 10px 12px;
}

.zt-transfer-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}

.zt-transfer-data-row:last-child {
    border-bottom: none;
}

.zt-transfer-data-row span {
    color: #666;
}

.zt-transfer-data-row strong {
    font-weight: 600;
}

.zt-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    background: #25d366;
    border: none;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    padding: 9px 18px;
    font-size: 14px;
}

.zt-btn-whatsapp:hover {
    background: #1ebe5b;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.zt-btn-secondary {
    border-radius: 999px;
    background: #f4f4f4;
    border: 1px solid #dddddd;
    color: #333333;
    font-size: 13px;
    padding: 8px 16px;
}

.zt-btn-secondary:hover {
    background: #ececec;
}

.zt-btn-copy {
    border-radius: 999px;
    background: #000;
    border: none;
    color: #fff;
    font-size: 13px;
    padding: 8px 16px;
}

.zt-btn-copy.is-copied {
    background: #008a00;
}

/* Wrapper de los datos bancarios originales */
.zt-bank-details-wrap {
    margin-top: 24px;
}

/* Que la card del resumen use sólo el alto de su contenido */
.woocommerce-order-overview.order_details {
    align-self: flex-start;
}
/* ============================================================
   PÁGINA CÓMO COMPRAR — Zonatronik
============================================================ */

.zt-como-wrapper .zt-legal-inner {
    max-width: 960px;
}

.zt-como-section {
    margin-top: 28px;
}

.zt-como-section h2 {
    font-size: 18px;
    margin-bottom: 12px;
}

/* Grid de tarjetas (pasos / opciones) */
.zt-steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 768px) {
    .zt-como-opciones {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .zt-como-pasos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Tarjeta de paso/opción */
.zt-step-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #eeeeee;
    padding: 14px 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.04);
    font-size: 14px;
}

.zt-step-card h3 {
    font-size: 15px;
    margin: 4px 0 6px;
}

.zt-step-mini {
    font-size: 13px;
    color: #666;
}

/* Número / letra del paso */
.zt-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #ffd600;
    color: #222;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}

/* Notas informativas */
.zt-info-note {
    background: #f8f9ff;
    border-radius: 12px;
    border: 1px solid #e2e5ff;
    padding: 10px 12px;
    font-size: 14px;
    margin-top: 14px;
}

.zt-info-safe {
    background: #fffce8;
    border-color: #ffe58a;
}

.zt-info-help {
    background: #e8fff4;
    border-color: #9be7c4;
}

.zt-info-help a {
    font-weight: 600;
}

/* Grid de notas de seguridad */
.zt-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
}

@media (min-width: 768px) {
    .zt-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* ============================================================
   ZT — Página de categorías (Mapa visual)
============================================================ */

body.page-template-page-categorias-zonatronik .zt-legal-wrapper.zt-cats-wrapper {
    padding-top: 32px;
    padding-bottom: 40px;
}

.zt-cats-intro {
    max-width: 720px;
    font-size: 14px;
    color: #555;
}

/* ============================================================
   BOTONES-ANCLA SUPERIORES (con icono)
============================================================ */

.zt-cats-anchor-grid {
    margin: 22px 0 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.zt-cat-anchor {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #ffe066;
    background: linear-gradient(90deg, #fffce8, #ffe86f);
    font-size: 13px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition:
        box-shadow 0.15s ease,
        transform 0.05s ease,
        background 0.15s ease;
}

.zt-cat-anchor-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zt-cat-anchor-icon i {
    font-size: 16px;
}

.zt-cat-anchor-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.zt-cat-anchor-name {
    font-size: 13px;
}

.zt-cat-anchor-count {
    font-size: 11px;
    color: #777;
}

.zt-cat-anchor:hover {
    background: #ffef99;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

/* ============================================================
   SECCIÓN POR CATEGORÍA PADRE
============================================================ */

.zt-cat-section {
    margin-top: 26px;
    padding: 18px 18px 20px;
    border-radius: 20px;
    border: 1px solid #f1f1f1;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(0,0,0,0.03);
}

.zt-cat-section-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.zt-cat-section-thumb {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #fff9d6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.zt-cat-section-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder viejo (por si queda en algún lado) */
.zt-cat-section-thumb-placeholder {
    font-size: 22px;
}

/* Icono cuando no hay imagen de categoría */
.zt-cat-section-thumb-icon i {
    font-size: 24px;
    color: #444;
}

.zt-cat-section-text {
    max-width: 520px;
}

.zt-cat-section-title {
    font-size: 18px;
    margin: 0 0 4px;
}

.zt-cat-section-desc {
    margin: 0;
    font-size: 13px;
    color: #666;
}

/* Botón "Ver todo en X" */

.zt-cat-section-cta {
    flex-shrink: 0;
    align-self: center;
    padding: 9px 16px;
    border-radius: 999px;
    background: #ffe600;
    color: #333;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.05s ease;
}

.zt-cat-section-cta:hover {
    background: #ffdd00;
    box-shadow: 0 6px 14px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

/* Mensaje cuando no hay subcategorías */

.zt-cat-section-no-children {
    margin: 4px 0 0;
    font-size: 13px;
    color: #777;
}

/* ============================================================
   GRID DE SUBCATEGORÍAS (HIJOS)
============================================================ */

.zt-cat-pill-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.zt-cat-pill {
    border-radius: 14px;
    border: 1px solid #f0f0f0;
    background: #fafafa;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* link principal de la subcategoría */

.zt-cat-pill-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    text-decoration: none;
    color: #333;
}

.zt-cat-pill-name {
    font-size: 13px;
    font-weight: 600;
}

.zt-cat-pill-count {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}

/* Nietos (nivel 2) como pill links chiquitos */

.zt-cat-pill-children {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.zt-cat-pill-children a {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    text-decoration: none;
    color: #555;
}

.zt-cat-pill-children a:hover {
    border-color: #ffd600;
    color: #333;
}

/* ============================================================
   BLOQUE FINAL: AYUDA
============================================================ */

.zt-cat-help {
    margin-top: 30px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #fff9d6;
    border: 1px solid #ffe066;
}

.zt-cat-help h2 {
    margin: 0 0 6px;
    font-size: 16px;
}

.zt-cat-help p {
    margin: 0 0 10px;
    font-size: 13px;
    color: #555;
}

.zt-cat-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.zt-cat-help-btn:hover {
    filter: brightness(1.05);
}
/* ============================================================
   ML PRO — Productos AGOTADOS
   1) Listado / cards
   2) Single product (imagen + box WhatsApp)
============================================================ */

/* ============================================================
   1) LISTADO / CARDS — Franja roja "AGOTADO" + CTA WhatsApp
============================================================ */

/* La card del producto agotado será el contenedor del stripe */
.woocommerce ul.products li.product.outofstock {
    position: relative;
    overflow: hidden;
}

/* Franja roja con texto repetido */
.woocommerce ul.products li.product.outofstock::before {
    content: "AGOTADO · AGOTADO · AGOTADO · AGOTADO";
    position: absolute;
    top: 10px;
    left: -40px;
    right: -40px;
    padding: 4px 0;
    background: #ff1744;
    color: #ffffff;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    transform: rotate(-3deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 5;
    pointer-events: none;
}

/* Bajar un poco la fuerza del precio / botón en agotados */
.woocommerce ul.products li.product.outofstock .price,
.woocommerce ul.products li.product.outofstock .button {
    opacity: 0.6;
}

/* CTA dentro de la card cuando está agotado */
.woocommerce ul.products li.product .zt-outofstock-cta {
    margin-top: 6px;
    padding: 6px 8px 8px;
    border-radius: 12px;
    background: #fff9cf;
    border: 1px solid #ffe08a;
    font-size: 11px;
    line-height: 1.45;
}

.woocommerce ul.products li.product .zt-outofstock-text {
    margin: 0 0 5px;
}

.woocommerce ul.products li.product .zt-btn-whatsapp-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #25d366;
    border: none;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.woocommerce ul.products li.product .zt-btn-whatsapp-mini:hover {
    background: #1ebe5b;
}

.woocommerce ul.products li.product .zt-btn-whatsapp-mini i {
    font-size: 13px;
}

/* Ocultar badges "NUEVO", "ÚLTIMAS UNIDADES", etc. en cards agotadas */
.woocommerce ul.products li.product.outofstock .zt-product-badges,
.woocommerce ul.products li.product.outofstock .zt-badge,
.woocommerce ul.products li.product.outofstock .zt-badge-pill {
    display: none ;
}
/* ============================================================
   ZT — Página de categorías (Mapa visual ML PRO)
   /categorias/
============================================================ */

/* Fondo general un poco más suave solo para esta plantilla */
body.page-template-page-categorias-zonatronik {
    background: #f5f5f7;
}

/* Wrapper legal adaptado a mapa de categorías */
body.page-template-page-categorias-zonatronik .zt-legal-wrapper.zt-cats-wrapper {
    padding-top: 30px;
    padding-bottom: 42px;
}

/* Ancho más grande para aprovechar pantalla */
body.page-template-page-categorias-zonatronik .zt-legal-inner {
    max-width: 1120px;
}

/* Título principal */
body.page-template-page-categorias-zonatronik .zt-legal-title {
    font-size: 26px;
    margin-bottom: 8px;
}

/* Intro */
.zt-cats-intro {
    max-width: 760px;
    font-size: 14px;
    color: #555;
}

/* ------------------------------------------------------------
   BOTONES-ANCLA SUPERIORES (accesos rápidos)
------------------------------------------------------------ */

.zt-cats-anchor-grid {
    margin: 22px 0 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.zt-cat-anchor {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #ffe066;
    background: #fffdf0;
    text-decoration: none;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.05s ease,
        border-color 0.15s ease;
}

.zt-cat-anchor-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7c2;
    font-size: 18px;
}

.zt-cat-anchor-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.zt-cat-anchor-name {
    line-height: 1.25;
}

.zt-cat-anchor-count {
    font-size: 11px;
    color: #777;
}

.zt-cat-anchor:hover {
    background: #ffef99;
    border-color: #ffdd00;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}

/* ------------------------------------------------------------
   SECCIONES POR CATEGORÍA PADRE (tarjetas grandes)
------------------------------------------------------------ */

.zt-cat-section {
    margin-top: 26px;
    padding: 18px 18px 20px;
    border-radius: 20px;
    border: 1px solid #e9e9e9;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(0,0,0,0.04);
    scroll-margin-top: 110px; /* para que el header fijo no tape el título */
}

.zt-cat-section-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Icono grande de cada categoría */
.zt-cat-section-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, #fffbe0, #ffe066);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.zt-cat-section-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zt-cat-section-thumb-placeholder {
    font-size: 24px;
}

/* Texto principal de la categoría padre */
.zt-cat-section-text {
    max-width: 540px;
}

.zt-cat-section-title {
    font-size: 18px;
    margin: 0 0 4px;
}

.zt-cat-section-desc {
    margin: 0;
    font-size: 13px;
    color: #666;
}

/* Botón "Ver todo en X" */
.zt-cat-section-cta {
    flex-shrink: 0;
    align-self: center;
    padding: 9px 18px;
    border-radius: 999px;
    background: #ffe600;
    color: #333;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.05s ease;
}

.zt-cat-section-cta:hover {
    background: #ffdd00;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

/* Mensaje cuando no hay subcategorías (padres “puros”) */
.zt-cat-section-no-children {
    margin: 4px 0 0;
    font-size: 13px;
    color: #777;
}

/* ------------------------------------------------------------
   GRID DE SUBCATEGORÍAS (HIJOS)
------------------------------------------------------------ */

.zt-cat-pill-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

/* Tarjeta de subcategoría */
.zt-cat-pill {
    border-radius: 14px;
    border: 1px solid #f0f0f0;
    background: #fafafa;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.zt-cat-pill:hover {
    background: #ffffff;
    border-color: #ffd600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

/* Link principal de la subcategoría */
.zt-cat-pill-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    text-decoration: none;
    color: #333;
}

.zt-cat-pill-name {
    font-size: 13px;
    font-weight: 600;
    flex: 1 1 auto;
}

.zt-cat-pill-count {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}

/* Nietos (nivel 2) como chips */
.zt-cat-pill-children {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.zt-cat-pill-children a {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    text-decoration: none;
    color: #555;
}

.zt-cat-pill-children a:hover {
    border-color: #ffd600;
    color: #333;
}

/* ------------------------------------------------------------
   BLOQUE FINAL: AYUDA / WHATSAPP
------------------------------------------------------------ */

.zt-cat-help {
    margin-top: 34px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #fff9d6;
    border: 1px solid #ffe066;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
}

.zt-cat-help h2 {
    margin: 0 0 4px;
    font-size: 16px;
}

.zt-cat-help p {
    margin: 0;
    font-size: 13px;
    color: #555;
    max-width: 520px;
}

.zt-cat-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-left: auto;
    white-space: nowrap;
}

.zt-cat-help-btn:hover {
    filter: brightness(1.05);
}

@media (max-width: 768px) {
    body.page-template-page-categorias-zonatronik .zt-legal-wrapper.zt-cats-wrapper {
        padding-top: 22px;
        padding-bottom: 28px;
    }

    .zt-cats-anchor-grid {
        grid-template-columns: 1fr 1fr;
    }

    .zt-cat-section {
        padding: 14px 12px 18px;
    }

    .zt-cat-section-main {
        align-items: flex-start;
    }

    .zt-cat-section-thumb {
        width: 50px;
        height: 50px;
    }

    .zt-cat-pill-grid {
        grid-template-columns: 1fr;
    }

    .zt-cat-help {
        flex-direction: column;
        align-items: flex-start;
    }

    .zt-cat-help-btn {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .zt-cats-anchor-grid {
        grid-template-columns: 1fr;
    }

    .zt-cat-anchor {
        padding: 9px 12px;
    }
}
/* ============================================================
   ZT — Página de categorías (Mapa visual PRO v2)
   Aplica solo en la plantilla: Categorías Zonatronik
============================================================ */

/* Fondo general un poco más claro */
body.page-template-page-categorias-zonatronik {
    background: #f5f5f5;
}

/* Wrapper principal alineado con el resto del sitio */
body.page-template-page-categorias-zonatronik .zt-legal-wrapper.zt-cats-wrapper {
    padding-top: 28px;
    padding-bottom: 40px;
}

body.page-template-page-categorias-zonatronik .zt-legal-inner {
    background: transparent;
    box-shadow: none;
    padding: 0 0 32px;
}

/* Título + intro */
body.page-template-page-categorias-zonatronik .zt-legal-title {
    margin-bottom: 6px;
}

body.page-template-page-categorias-zonatronik .zt-cats-intro {
    max-width: 760px;
    font-size: 14px;
    color: #555;
}

/* ------------------------------------------------------------
   BOTONES-ANCLA SUPERIORES
------------------------------------------------------------ */

.zt-cats-anchor-grid {
    margin: 20px 0 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.zt-cat-anchor {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #ffe066;
    background: #fffbe6;
    text-decoration: none;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.zt-cat-anchor-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #ffe600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.zt-cat-anchor-label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.zt-cat-anchor-name {
    font-size: 13px;
    font-weight: 600;
}

.zt-cat-anchor-count {
    font-size: 11px;
    color: #777;
}

.zt-cat-anchor:hover {
    background: #ffef99;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}

/* ------------------------------------------------------------
   SECCIONES POR CATEGORÍA PADRE
------------------------------------------------------------ */

.zt-cat-section {
    margin-top: 24px;
    padding: 18px 18px 20px;
    border-radius: 20px;
    border: 1px solid #f1f1f1;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(0,0,0,0.03);
    /* Para que el ancla no quede tapada por el header ML */
    scroll-margin-top: 90px;
}

/* Alternamos un poco el fondo para que no sea todo igual */
.zt-cat-section:nth-of-type(even) {
    background: #fcfcfc;
}

.zt-cat-section-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.zt-cat-section-thumb {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #fff9d6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.zt-cat-section-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zt-cat-section-thumb-placeholder {
    font-size: 24px;
}

.zt-cat-section-text {
    max-width: 540px;
}

.zt-cat-section-title {
    font-size: 18px;
    margin: 0 0 4px;
}

.zt-cat-section-desc {
    margin: 0;
    font-size: 13px;
    color: #666;
}

/* Botón "Ver todo en X" */
.zt-cat-section-cta {
    flex-shrink: 0;
    align-self: center;
    padding: 9px 16px;
    border-radius: 999px;
    background: #ffe600;
    color: #333;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
    white-space: nowrap;
}

.zt-cat-section-cta:hover {
    background: #ffdd00;
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

/* Mensaje cuando no hay subcategorías */
.zt-cat-section-no-children {
    margin: 4px 0 0;
    font-size: 13px;
    color: #777;
}

/* ------------------------------------------------------------
   GRID DE SUBCATEGORÍAS (HIJOS)
------------------------------------------------------------ */

.zt-cat-pill-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.zt-cat-pill {
    border-radius: 14px;
    border: 1px solid #f0f0f0;
    background: #fafafa;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* link principal de la subcategoría */
.zt-cat-pill-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    text-decoration: none;
    color: #333;
}

.zt-cat-pill-name {
    font-size: 13px;
    font-weight: 600;
}

.zt-cat-pill-count {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}

/* Nietos (nivel 2) como pill links chiquitos */
.zt-cat-pill-children {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.zt-cat-pill-children a {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    text-decoration: none;
    color: #555;
}

.zt-cat-pill-children a:hover {
    border-color: #ffd600;
    color: #333;
}

/* ------------------------------------------------------------
   BLOQUE FINAL: AYUDA
------------------------------------------------------------ */

.zt-cat-help {
    margin-top: 30px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #fff9d6;
    border: 1px solid #ffe066;
}

.zt-cat-help h2 {
    margin: 0 0 6px;
    font-size: 16px;
}

.zt-cat-help p {
    margin: 0 0 10px;
    font-size: 13px;
    color: #555;
}

.zt-cat-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.zt-cat-help-btn:hover {
    filter: brightness(1.05);
}
/* ============================================================
   ML PRO — Cards 2 por fila en móvil (tipo ML / AliExpress)
============================================================ */
@media (max-width: 768px) {

    /* 1) Contenedor en GRID de 2 columnas */
    .woocommerce ul.products,
    .products.zt-products-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;                /* espacio entre cards */
        padding-inline: 6px;      /* un poquito de margen lateral */
    }

    /* Reset del sistema de floats de WooCommerce */
    .woocommerce ul.products li.product,
    .products.zt-products-grid li.product {
        float: none ;
        width: 100% ;   /* la celda del grid se encarga del ancho */
        margin: 0 ;
    }

    /* 2) Card compacta, más “catálogo” */
    .woocommerce ul.products li.product {
        padding: 8px 6px 9px;
        border-radius: 14px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        box-sizing: border-box;
        background: #ffffff;
    }

    /* 3) Imagen protagonista, pero controlada */
    .woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
        display: block;
    }

    .woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
        display: block;
        margin: 0 auto 6px;
        max-height: 160px;        /* para que no se haga eterna la card */
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    /* 4) Título y precio más compactos */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px;
        line-height: 1.25;
        min-height: 2.6em;        /* 2 líneas aprox, mantiene altura pareja */
        margin: 4px 0;
    }

    .woocommerce ul.products li.product .price {
        font-size: 14px;
        margin-bottom: 4px;
    }

    /* 5) Badges estilo “sellos” pero chiquitos */
    .zt-badges-wrapper {
        margin-bottom: 4px;
        gap: 2px;
    }

    .zt-badge {
        font-size: 9px;
        padding: 3px 6px;
    }

    /* 6) Botones más chicos y apilados */
    .woocommerce ul.products li.product .button {
        font-size: 11px;
        line-height: 1.2;
        padding: 7px 6px;
        white-space: normal;      /* deja que el texto se parta en 2 líneas si hace falta */
        width: 100%;
        box-sizing: border-box;
    }

    .woocommerce ul.products li.product .button + .button {
        margin-top: 4px;          /* separación entre “Compra directa” y “Añadir al carrito” */
    }
}
/* ==========================================
   ZT — Fuerza 2 productos por fila en móvil
   (shop, categorías, relacionados, etc.)
========================================== */
@media (max-width: 768px) {

    /* Contenedor de productos en WooCommerce */
    .woocommerce ul.products,
    .products {
        display: grid ;
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
        gap: 10px ;
    }

    /* Cada item del grid */
    .woocommerce ul.products li.product,
    .products li.product {
        width: 100% ;
        margin: 0 ;
    }
}

/* Celulares muy angostos: seguir con 2 columnas, no 1 */
@media (max-width: 480px) {
    .products.zt-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }
}
/* ============================================================
   HEADER MOBILE — Banner "Llega en 24 hs" + ocultar iconos
============================================================ */

/* Por defecto oculto el banner (solo se verá en mobile) */
#zt-delivery-banner {
    display: none;
}
/* HEADER MOBILE — Banner "Llega en 24 hs" + ocultar iconos */
#zt-delivery-banner {
    display: none;
}
.zt-buy-now-btn {
    cursor: pointer;
    position: relative;
    z-index: 2; /* se asegura de estar por encima de cualquier overlay de la card */
}

/* ================================================================================================================================================================
   ACOMODANDO CARTELES EN IMAGEN
============================================================ */
/* La imagen sirve de referencia para los overlays */
.zt-thumb-inner {
    position: relative;
}

/* Pill abajo-izquierda: Últimas unidades */
.zt-stock-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: #ff1453;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 4;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    white-space: nowrap;
}

.zt-stock-pill::before {
    content: "📦";
    margin-right: 4px;
    font-size: 12px;
}

/* Chips de esquina arriba dentro de la foto */
.zt-badge-corner {
    position: absolute;
    top: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
    white-space: nowrap;
}

.zt-badge-corner-new {
    left: 8px;
    background: #ffe600;
    color: #333;
}

.zt-badge-corner-top {
    right: 8px;
    background: #ff7a00;
    color: #fff;
}

/* Ocultar los badges “clásicos” NEW y TOP sólo en las cards del loop,
   para que no se dupliquen con los de la foto */
.zt-product-item .zt-badge-new,
.zt-product-item .zt-badge-top {
    display: none ;
}

/* Ya no usamos el badge clásico de stock en el loop */
.zt-product-item .zt-badge-stock {
    display: none ;
}

/* ============================================================
   CORNER BADGES — NUEVO (izq) + MÁS VENDIDO (der) EN TEXTO
============================================================ */

/* La imagen del producto debe ser relativa para posicionar los badges */
.zt-product-thumb {
    position: relative;
}

/* Base pill para los dos badges */
.zt-badge-corner {
    position: absolute;
    top: 6px;
    z-index: 6;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 3px 8px;
    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    background: #ffe600;
}

/* NUEVO → arriba izquierda */
.zt-badge-corner-new {
    left: 6px;
    background: #1e90ff; /* azul tipo “nuevo” */
}

/* MÁS VENDIDO → arriba derecha */
.zt-badge-corner-top {
    right: 6px;
    background: #ff4757; /* rojo/rosa para destacar más vendido */
}

/* Ocultar el emoji que mete WordPress (twemoji) */
.zt-badge-corner img.emoji,
.zt-badge-corner img {
    display: none ;
}

/* Texto real de cada badge */
.zt-badge-corner-new::before {
    content: "NUEVO";
}

.zt-badge-corner-top::before {
    content: "MÁS VENDIDO";
}

/* Opcional: en pantallas muy chicas, hacerlos un pelín más chicos */
@media (max-width: 480px) {
    .zt-badge-corner {
        font-size: 10px;
        padding: 2px 7px;
    }
}

/* ============================================================
   ML PRO — Caja de cuotas a ANCHO COMPLETO en la tarjeta
============================================================ */

/* Aseguramos que el bloque de acciones estire a sus hijos */
.zt-product-item .zt-card-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;  /* los hijos pueden usar width:100% */
    gap: 4px;
}

/* La caja de cuotas ocupa todo el ancho de la tarjeta */
.zt-product-item .zt-cuotas-box.zt-auto-cuotas {
    width: 100%;
    box-sizing: border-box;
}

/* Cada línea de texto de cuotas/transferencia ocupa el ancho */
.zt-product-item .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line {
    display: flex;
    justify-content: space-between; /* opcional: texto alineado izq/der */
    width: 100%;
}

/* Botón ⚡ Compra directa también ancho completo */
.zt-product-item .zt-cuotas-box.zt-auto-cuotas .zt-buy-now-btn {
    width: 100%;
    margin-top: 4px;
    text-align: center;
}
/* ============================================
   BADGES ESQUINA — NUEVO / MÁS VENDIDO (texto)
   ============================================ */

/* Estilo base del pill */
.zt-badge-corner {
    position: absolute;
    top: 6px;
    z-index: 4;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
    background: #ff4b6a;   /* color por defecto, se puede cambiar */
}

/* "Más vendido" arriba a la derecha */
.zt-badge-corner-top {
    right: 6px;
}

/* "Nuevo" arriba a la izquierda */
.zt-badge-corner-new {
    left: 6px;
    background: #00c853;   /* verde para nuevo, por ejemplo */
}

/* ⚠️ MUY IMPORTANTE:
   anulamos el texto viejo que se generaba con ::before */
.zt-badge-corner-top::before,
.zt-badge-corner-new::before {
    content: none ;
}
/* ============================================================
   ML PRO — Caja de cuotas FULL WIDTH en MOBILE
============================================================ */
@media (max-width: 768px) {

    /* El bloque de acciones acomoda todo en columna */
    .zt-product-item .zt-card-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    /* La caja de cuotas ocupa TODO el ancho de la tarjeta */
    .zt-product-item .zt-card-actions .zt-cuotas-box,
    .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas {
        display: block ;
        width: 100% ;
        max-width: 100% ;
        box-sizing: border-box;
    }

    /* Cada línea de cuotas/transferencia, a lo ancho */
    .zt-product-item .zt-card-actions .zt-cuotas-box .zt-cuota-line {
        display: block;
        width: 100%;
    }

    /* Botón ⚡ Compra directa, full width también */
    .zt-product-item .zt-card-actions .zt-cuotas-box .zt-buy-now-btn {
        width: 100%;
        margin-top: 4px;
        text-align: center;
        display: block;
    }
}
/* Pill de "Últimas unidades" dentro de la foto */
.zt-stock-pill {
    position: absolute;
    left: 8px;
    bottom: 8px;

    background: #ff3366;
    color: #fff;
    border-radius: 999px;
    padding: 2px 10px;

    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;

    /* 👉 Centrado perfecto del texto */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    white-space: nowrap;
    z-index: 4;
}
/* ============================================================
   MOBILE — Hacer que la caja de cuotas use TODO el ancho
============================================================ */
@media (max-width: 768px) {

    /* El bloque de acciones ocupa el ancho completo de la tarjeta */
    .zt-product-item .zt-card-actions {
        display: flex ;
        align-items: center;
        justify-content: space-between;
        width: 100% ;
        max-width: 100% ;
        box-sizing: border-box;
        padding: 0 8px 8px; /* opcional, ajustá márgenes internos */
        margin: 0;         /* evita márgenes que achiquen el área útil */
    }

    /* La caja de cuotas se estira dentro de zt-card-actions */
    .zt-product-item .zt-card-actions .zt-cuotas-box,
    .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas {
        flex: 1 1 auto ;
        width: auto ;   /* el ancho lo decide flex */
        max-width: 100% ;
        box-sizing: border-box;
    }

    /* Botón "Compra directa" full width DENTRO de la caja (si querés) */
    .zt-product-item .zt-card-actions .zt-cuotas-box .zt-buy-now-btn {
        width: 100%;
        margin-top: 4px;
        text-align: center;
        display: block;
    }
}
/* ============================================
   Píldora "Últimas unidades" (todas las vistas)
============================================ */
.zt-stock-pill {
    position: absolute;
    left: 8px;
    bottom: 8px;

    background: #ff3366;
    color: #fff;
    border-radius: 999px;

    padding: 2px 10px;          /* tamaño normal (desktop / tablet) */
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    white-space: nowrap;
    z-index: 4;
}

/* ============================================
   Ajustes SOLO para móvil
   - Píldora más chica
   - Ocultar "Llega en 24 hs" en el loop
============================================ */
@media (max-width: 480px) {

    /* Últimas unidades más pequeña */
    .zt-stock-pill {
        padding: 1px 7px;
        font-size: 9px;
    }

    /* Ocultar cartel verde "Llega en 24 hs" en las cards */
    .zt-local-24-badge-loop {
        display: none ;
    }
}
/* ============================================
   ML PRO — Precio centrado SOLO en móvil
============================================ */
@media (max-width: 768px) {

    /* Cards de productos en el loop */
    .woocommerce ul.products li.product .zt-product-price,
    .zt-product-item .zt-product-price {
        display: block;
        width: 100%;
        text-align: center ;
        margin: 6px 0 0 ;
    }

    /* Por si WooCommerce le mete estilos internos */
    .woocommerce ul.products li.product .zt-product-price .price,
    .zt-product-item .zt-product-price .price,
    .zt-product-item .zt-product-price span,
    .zt-product-item .zt-product-price bdi {
        display: inline-block;
    }
}

/* ============================================================
   MOBILE — Cuotas a TODO el ancho de la tarjeta
============================================================ */
@media (max-width: 768px) {

    /* El bloque de acciones ocupa todo el ancho interno de la card,
       sin padding lateral que achique la caja de cuotas */
    .zt-product-item .zt-card-actions {
        display: block ;
        width: 100% ;
        max-width: 100% ;
        padding-left: 0 ;
        padding-right: 0 ;
        box-sizing: border-box;
    }

    /* La caja de cuotas se estira de borde a borde de la card */
    .zt-product-item .zt-card-actions .zt-cuotas-box,
    .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas {
        display: block ;
        width: 100% ;
        max-width: 100% ;
        margin-left: 0 ;
        margin-right: 0 ;
        box-sizing: border-box;
    }

    /* Botón ⚡ Compra directa ancho completo dentro de la caja */
    .zt-product-item .zt-card-actions .zt-cuotas-box .zt-buy-now-btn {
        display: block;
        width: 100%;
        margin-top: 4px;
        text-align: center;
    }
}
/* ============================================================
   ML PRO — Precio + mini carrito sólo en MÓVIL
   (en desktop / tablet el precio queda como hasta ahora)
============================================================ */

/* Aseguramos que los badges "Nuevo / Más vendido / Últimas unidades" se vean */
.products.zt-products-grid .zt-product-badges {
    display: flex;
}
/* ============================================================
   TÍTULOS PRODUCTO — Primera letra mayúscula, resto minúscula
   (tarjetas de lista / categorías / tienda)
============================================================ */

.zt-product-title,
.zt-product-title a {
    text-transform: lowercase; /* todo minúscula */
}

/* Primera letra en mayúscula */
.zt-product-title::first-letter,
.zt-product-title a::first-letter {
    text-transform: uppercase;
}
/* ============================================================
   PRECIO + CARRITO MINI DEBAJO DEL NOMBRE — SÓLO MÓVIL
============================================================ */

/* Escritorio / tablet: mostramos precio clásico, ocultamos fila móvil */
@media (min-width: 769px) {
    .products.zt-products-grid .zt-price-row-mobile {
        display: none ;
    }
    .products.zt-products-grid .zt-price-desktop {
        display: block;
    }
}

/* ============================================================
   ML PRO — Badges dentro de la imagen (todas las vistas)
   NUEVO / MÁS VENDIDO / SALE / ÚLTIMAS UNIDADES
============================================================ */

/* El contenedor de la miniatura sirve de referencia */
.zt-product-thumb,
.zt-thumb-inner {
    position: relative;
}

/* El contenedor de badges se vuelve overlay encima de la foto */
.zt-product-item .zt-product-badges {
    position: absolute;
    inset: 0;
    margin: 0 ;
    padding: 0 ;
    display: block ;
    pointer-events: none;
    z-index: 4;
}

/* Wrapper interno por si existe (ej. .zt-badges-wrapper / .zt-badges-rotator) */
.zt-product-item .zt-badges-wrapper,
.zt-product-item .zt-badges-rotator {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Estilo base de cada pill */
.zt-product-item .zt-badge {
    position: absolute ;
    display: inline-flex ;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: #ffdd00;
    color: #111;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    pointer-events: none ;
}

/* Aseguramos que nunca estén ocultos */
.zt-product-item .zt-badge-sale,
.zt-product-item .zt-badge-new,
.zt-product-item .zt-badge-top,
.zt-product-item .zt-badge-stock {
    display: inline-flex ;
}

/* Sin iconos, SOLO texto */
.zt-product-item .zt-badge img,
.zt-product-item .zt-badge svg,
.zt-product-item .zt-badge i {
    display: none ;
}

/* Esquinas: cada tipo en una esquina distinta */
.zt-product-item .zt-badge-new {
    top: 6px;
    left: 6px;
}

.zt-product-item .zt-badge-top {
    top: 6px;
    right: 6px;
}

.zt-product-item .zt-badge-sale {
    bottom: 6px;
    left: 6px;
}

.zt-product-item .zt-badge-stock {
    bottom: 6px;
    right: 6px;
}
/* ============================================================
   ML PRO — Títulos del producto en móvil
   (letra más chica + altura fija = cards iguales)
============================================================ */
@media (max-width: 768px) {

    .products.zt-products-grid .zt-product-title {
        font-size: 11px ;
        line-height: 1.25 ;
        margin: 4px 6px 0 ;
        min-height: calc(1.25em * 2) ;
        max-height: calc(1.25em * 2) ;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .products.zt-products-grid .zt-product-title a {
        display: block;
    }
}

/* ============================================================
   ML PRO — Resaltar precio por transferencia en verde
============================================================ */

/* Segunda línea de la caja de cuotas: "Transferir: $X" */
.zt-cuotas-box .zt-cuota-line:nth-of-type(2) {
    color: #00a650;        /* verde tipo MercadoPago */
    font-weight: 700;      /* un poco más grueso para destacar */
}

/* ============================================================
   ZT — Header de archivo: contador + orden PRO
============================================================ */

/* Sacamos floats viejos de Woo y los centramos */
.woocommerce-result-count,
.woocommerce-ordering {
    float: none ;
}

/* ===== Estilo general del contador ===== */

.woocommerce-result-count.zt-result-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;

    padding: 6px 16px;
    margin: 8px auto 4px;

    background: #ffffff;
    border-radius: 999px;
    border: 1px solid #e3e8f0;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);

    font-size: 12px;
    line-height: 1.3;
    color: #4b5563;
    text-align: center;
}

.zt-result-count .zt-result-label {
    font-weight: 400;
    color: #6b7280;
}

.zt-result-count .zt-result-total {
    font-weight: 700;
    color: #111827;
}

.zt-result-count .zt-result-range {
    font-weight: 400;
    color: #6b7280;
}

/* ===== Selector “Relevancia” como pill + flechita visible ===== */

.woocommerce-ordering {
    position: relative;
    display: block;
    margin: 4px auto 12px;
    max-width: 320px;
}

.woocommerce-ordering select.orderby {
    width: 100%;
    padding: 8px 40px 8px 16px;

    font-size: 13px;
    font-weight: 500;
    color: #374151;

    background-color: #fffbe6;           /* amarillo suave ML */
    border: 1px solid #facc15;           /* amarillo más fuerte */
    border-radius: 999px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Flecha custom bien visible */
.woocommerce-ordering::after {
    content: "▼";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #9ca3af;
    pointer-events: none;
}

/* ===== Responsivo: mobile vs escritorio ===== */

/* Mobile: todo centrado y apilado */
@media (max-width: 768px) {

    .woocommerce-result-count.zt-result-count,
    .woocommerce-ordering {
        width: calc(100% - 32px);
    }

    .woocommerce-result-count.zt-result-count {
        justify-content: center;
    }
}

/* Escritorio: se ven alineados en la parte superior del listado */
@media (min-width: 769px) {

    .woocommerce-result-count.zt-result-count {
        display: inline-flex;
        margin: 0 10px 16px 0;
    }

    .woocommerce-ordering {
        display: inline-block;
        vertical-align: top;
        margin: 0 0 16px;
    }
}

/* ============================================================
   Versión MOBILE — apilados, ocupando casi todo el ancho
============================================================ */
@media (max-width: 768px) {

    .post-type-archive-product .zt-archive-container .woocommerce-result-count,
    .post-type-archive-product .zt-archive-container .woocommerce-ordering {
        display: block;
        max-width: 92%;
        margin: 4px auto 8px;
    }

    .post-type-archive-product .woocommerce-ordering .orderby {
        font-size: 13px;
    }
}

/* ============================================================
   ML PRO — Overlay "Categorías" estilo app (abre desde footer)
   Versión limpia / compacta
============================================================ */

/* Bloqueo de scroll cuando el overlay está abierto */
body.zt-no-scroll {
    overflow: hidden;
}

/* Capa oscura de fondo */
.zt-app-cats-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

/* Cuando el overlay está abierto */
.zt-app-cats-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Contenedor principal */
.zt-app-cats-modal {
    position: absolute;
    inset: 0;
    margin: 0;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
}

.zt-app-cats-close {
    border: none;
    background: transparent;
    margin-right: 10px;
    padding: 4px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #111;
    font-size: 18px;
}

.zt-app-cats-modal-title {
    font-size: 18px;
    margin: 0;
    font-weight: 700;
    color: #111;
}

/* Cuerpo y wrapper de dos columnas */
.zt-app-cats-modal-body {
    flex: 1 1 auto;
    padding: 10px 10px 16px;
    overflow: hidden;
}

.zt-app-cats-wrapper {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    display: flex;
    min-height: 360px;
    overflow: hidden;
}

/* ============================================================
   Columna izquierda (padres)
============================================================ */

.zt-app-cats-sidebar {
    width: 32%;
    max-width: 135px;
    background: #f7f7f7;
    box-shadow: inset -1px 0 0 rgba(0,0,0,0.03);
}

.zt-app-cats-sidebar-inner {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0,0,0,0.04);
}

.zt-app-cats-parent {
    width: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 6px 8px;
    text-align: left;
    font-size: 10px;
    color: #444;
    cursor: pointer;
    border-left: 3px solid transparent;
    outline: none;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.zt-app-cats-parent + .zt-app-cats-parent {
    border-top: 1px solid rgba(0,0,0,0.04);
}

/* Texto de categoría padre: hasta 2 líneas, corte por palabra */
.zt-app-cats-parent-label {
    display: block;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    line-height: 1.15;
}

/* Estado activo tipo app */
.zt-app-cats-parent.is-active {
    background: #ffffff;
    color: #111;
    font-weight: 600;
    border-left-color: #ffe600; /* amarillo ML */
    border-radius: 0 12px 12px 0;
    box-shadow:
        1px 0 0 rgba(0,0,0,0.03),
        0 2px 4px rgba(0,0,0,0.04);
}

/* Hover en padres no activos */
.zt-app-cats-parent:not(.is-active):hover {
    background: #efefef;
}

/* ============================================================
   Columna derecha (panel de hijos)
============================================================ */

.zt-app-cats-content {
    flex: 1 1 auto;
    padding: 14px 10px 18px;
    overflow-y: auto;
}

/* Cada panel raíz */
.zt-app-cats-grid {
    display: none;
    text-align: center; /* para el título pill */
}

.zt-app-cats-grid.is-active {
    display: block;
}

/* Título de la categoría raíz como pill centrado */
.zt-app-cats-grid .zt-app-cats-root-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin: 0 auto 14px;
    padding: 6px 16px;

    border-radius: 999px;
    border: 1px solid #ffe600;
    background: #fffdf1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);

    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #333;
}

/* Iconito circular a la izquierda del texto */
.zt-app-cats-root-title::before {
    content: "📂";
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #ffe600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

/* Mensaje cuando no hay hijos */
.zt-app-cats-no-children {
    font-size: 13px;
    color: #555;
    margin: 4px 0 10px;
}

/* ============================================================
   Subcategorías (grid de hijos)
============================================================ */

.zt-app-cats-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 16px;
    justify-items: center;
}

/* Cada item hijo va en una “cajita” */
.zt-app-cats-item {
    width: 100%;
    max-width: 80px;
    padding: 4px 2px 8px;
    border-radius: 14px;
    background: transparent;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease;
}

/* Hover (sobre todo se nota en desktop) */
.zt-app-cats-item:hover {
    background: #f9f9f9;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transform: translateY(-1px);
}

/* Bolita con imagen / letra */
.zt-app-cats-thumb {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin: 0 auto 4px;
}

.zt-app-cats-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zt-app-cats-thumb-placeholder {
    font-size: 20px;
    font-weight: 600;
    color: #999;
}

/* Nombre de la subcategoría */
.zt-app-cats-item-name {
    display: block;
    margin-top: 2px;
    padding: 0 2px;
    font-size: 10px;
    line-height: 1.15;
    color: #333;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ============================================================
   Botón "Ver todos los productos disponibles en X"
============================================================ */

.zt-app-cats-root-link {
    margin-top: 12px;
    margin-bottom: 6px;
    display: flex;
    justify-content: center;
}

/* Botón pill compacto tipo app */
.zt-app-cats-root-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    max-width: 80%;
    padding: 5px 10px;
    border-radius: 999px;

    background: #ffe600;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);

    color: #111 ;
    font-size: 9.5px;
    font-weight: 600;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-align: center;

    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Flechita al final del texto */
.zt-app-cats-root-link a::after {
    content: "›";
    font-size: 11px;
    line-height: 1;
}

/* Hover / active del botón */
.zt-app-cats-root-link a:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.16);
    transform: translateY(-1px);
}

.zt-app-cats-root-link a:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* ============================================================
   Desktop: overlay como ventana centrada
============================================================ */

@media (min-width: 769px) {

    .zt-app-cats-modal {
        max-width: 1080px;
        max-height: 640px;
        margin: 30px auto;
        border-radius: 18px;
        overflow: hidden;
    }

    .zt-app-cats-modal-body {
        padding: 16px 16px 20px;
    }

    /* Sidebar un poco más angosta en desktop */
    .zt-app-cats-sidebar {
        width: 26%;
        max-width: 210px;
    }

    /* Thumb un pelín más grande y nombre más legible */
    .zt-app-cats-thumb {
        width: 68px;
        height: 68px;
    }

    .zt-app-cats-item-name {
        font-size: 11px;
    }
}

/* ============================================================
   Mobile muy chico
============================================================ */

@media (max-width: 480px) {

    .zt-app-cats-modal-body {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Thumb y texto un poquito más chicos */
    .zt-app-cats-thumb {
        width: 52px;
        height: 52px;
    }

    .zt-app-cats-item-name {
        font-size: 9.5px;
    }

    /* Título-pill más compacto */
    .zt-app-cats-grid .zt-app-cats-root-title {
        padding: 5px 12px;
        font-size: 12px;
        margin-bottom: 12px;
    }

    .zt-app-cats-root-title::before {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
}
/* ============================================================
   FIX FUERTE — Menú categorías tipo app
   Fuerza la versión compacta que veníamos usando
============================================================ */

/* Sidebar compacto siempre (desktop y mobile) */
.zt-app-cats-overlay .zt-app-cats-sidebar {
    width: 32% ;
    max-width: 135px ;
    background: #f7f7f7 ;
    box-shadow: inset -1px 0 0 rgba(0,0,0,0.03) ;
}

.zt-app-cats-overlay .zt-app-cats-sidebar-inner {
    display: flex ;
    flex-direction: column ;
    border-right: 1px solid rgba(0,0,0,0.04) ;
}

/* Botones de categoría padre: bajos y letra chica */
.zt-app-cats-overlay .zt-app-cats-sidebar .zt-app-cats-parent {
    width: 100% ;
    padding: 6px 8px ;
    font-size: 10px ;
    line-height: 1.2 ;
    font-weight: 400 ;
    color: #444 ;

    border: none ;
    border-left: 3px solid transparent ;
    border-radius: 0 ;

    background: transparent ;
    text-align: left ;
    cursor: pointer ;
}

/* Separadores entre padres */
.zt-app-cats-overlay .zt-app-cats-sidebar .zt-app-cats-parent + .zt-app-cats-parent {
    border-top: 1px solid rgba(0,0,0,0.04) ;
}

/* Texto de la categoría padre: 2 renglones máximo, corte por palabra */
.zt-app-cats-overlay .zt-app-cats-sidebar .zt-app-cats-parent-label {
    display: block ;
    white-space: normal ;
    word-break: normal ;
    overflow-wrap: break-word ;
    line-height: 1.15 ;
}

/* Estado activo tipo app: franja amarilla, bordes redondeados a la derecha */
.zt-app-cats-overlay .zt-app-cats-sidebar .zt-app-cats-parent.is-active {
    background: #ffffff ;
    color: #111 ;
    font-weight: 600 ;
    border-left-color: #ffe600 ;
    border-radius: 0 12px 12px 0 ;
    box-shadow:
        1px 0 0 rgba(0,0,0,0.03),
        0 2px 4px rgba(0,0,0,0.04) ;
}

/* Hover suave en no activos */
.zt-app-cats-overlay .zt-app-cats-sidebar .zt-app-cats-parent:not(.is-active):hover {
    background: #efefef ;
}

/* ============================================================
   Subcategorías (columna derecha) — versión compacta
============================================================ */

.zt-app-cats-overlay .zt-app-cats-items {
    grid-template-columns: repeat(3, minmax(0, 1fr)) ;
    column-gap: 10px ;
    row-gap: 16px ;
    justify-items: center ;
}

/* Cajita de cada subcategoría */
.zt-app-cats-overlay .zt-app-cats-item {
    width: 100% ;
    max-width: 80px ;
    padding: 4px 2px 8px ;
    border-radius: 14px ;
    background: transparent ;
}

/* Bolita con imagen / inicial */
.zt-app-cats-overlay .zt-app-cats-thumb {
    width: 56px ;
    height: 56px ;
    margin: 0 auto 4px ;
}

/* Texto de la subcategoría más chico */
.zt-app-cats-overlay .zt-app-cats-item-name {
    font-size: 10px ;
    line-height: 1.15 ;
}

/* Ajuste extra para móviles muy chicos */
@media (max-width: 480px) {
    .zt-app-cats-overlay .zt-app-cats-thumb {
        width: 52px ;
        height: 52px ;
    }
    .zt-app-cats-overlay .zt-app-cats-item-name {
        font-size: 9.5px ;
    }
}
/* ============================================================
   SCROLL INTERNO — Menú categorías tipo app
   (padres a la izquierda e hijos a la derecha)
============================================================ */

/* Que el body del modal deje scrollear a sus hijos */
.zt-app-cats-modal-body {
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0; /* clave en flexbox para permitir scroll interno */
}

/* El wrapper ocupa todo el alto disponible */
.zt-app-cats-wrapper {
    height: 100%;
}

/* Scroll vertical en la lista de padres y en el panel de hijos */
.zt-app-cats-sidebar-inner,
.zt-app-cats-content {
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox: scrollbar finita */
}

/* Scrollbar finita en navegadores WebKit (Chrome, Edge, etc.) */
.zt-app-cats-sidebar-inner::-webkit-scrollbar,
.zt-app-cats-content::-webkit-scrollbar {
    width: 6px;
}

.zt-app-cats-sidebar-inner::-webkit-scrollbar-thumb,
.zt-app-cats-content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.16);
    border-radius: 999px;
}

/* El título ocupa el espacio central */
.zt-app-cats-modal-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

/* Flecha e X comparten estilo base */
.zt-app-cats-close,
.zt-app-cats-close-x {
    border: none;
    background: transparent;
    padding: 4px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #111;
    font-size: 18px;
}

/* Botones de volver / cerrar: redondos tipo app */
.zt-app-cats-overlay .zt-app-cats-close {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    margin: 0;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    color: #333;
    font-size: 16px;
    cursor: pointer;

    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    transition:
        background 0.15s ease,
        transform 0.12s ease,
        box-shadow 0.15s ease;
}

/* Hover / active */
.zt-app-cats-overlay .zt-app-cats-close:hover {
    background: #fff7c2;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.20);
}

.zt-app-cats-overlay .zt-app-cats-close:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.16);
}

/* Aseguramos posición: back a la izquierda, X a la derecha */
.zt-app-cats-overlay #zt-app-cats-close {
    justify-self: flex-start;
}

.zt-app-cats-overlay .zt-app-cats-close-x {
    justify-self: flex-end;
}

/* Título centrado con "pill" y pequeño icono */
.zt-app-cats-overlay .zt-app-cats-modal-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto;
    padding: 4px 16px;

    border-radius: 999px;
    background: #fffdf1;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);

    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #333;
    text-align: center;
}

/* Iconito carpeta antes del texto "Categorías" */
.zt-app-cats-overlay .zt-app-cats-modal-title::before {
    content: "📂";
    margin-right: 6px;
    font-size: 14px;
}
/* =======================================================================================================================
   ZT — Estilo PRO para título de archivo / búsqueda
============================================================ */

.zt-archive-title {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 6px;

    padding: 10px 18px;
    margin: 10px auto 8px;

    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);

    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.03em;
    text-transform: none;        /* que no fuerce todo mayúsculas */
    color: #111827;
}

/* mini etiqueta "Resultados para" */
.zt-archive-title .zt-search-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #6b7280;
}

/* término buscado destacado como pill ML */
.zt-archive-title .zt-search-term {
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    color: #111827;

    padding: 2px 10px;
    border-radius: 999px;
    background: #fffbe6;         /* amarillo suave */
    border: 1px solid #facc15;   /* borde amarillo */
}

/* ===== Responsivo ===== */

@media (max-width: 768px) {
    .zt-archive-title {
        width: calc(100% - 32px);
        text-align: center;
    }
}

@media (min-width: 769px) {
    .zt-archive-title {
        width: auto;
        align-self: flex-start;
    }
}
/* ============================================================
   CARTEL DE CATEGORÍA / BÚSQUEDA — ESTILO PRO
   (usa el <h1 class="zt-archive-title">JUGUETES</h1>)
============================================================ */

.zt-archive-container {
    padding: 10px 16px 18px;
    text-align: center;              /* centra el cartel */
}

/* Pastilla principal */
.zt-archive-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin: 8px auto 4px;
    padding: 9px 18px;

    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);

    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #222;
    text-transform: none;            /* deja el texto normal (no todo MAYUS) */
}

/* Chip “Categoría” + iconito */
.zt-archive-title::before {
    content: "🧩 CATEGORÍA";
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;

    padding: 3px 10px;
    border-radius: 999px;
    background: #fff7c2;             /* amarillito estilo ML */
    color: #665200;
    text-transform: none;
}

/* Ajustes responsive */
@media (max-width: 768px) {
    .zt-archive-container {
        padding-top: 4px;
    }

    .zt-archive-title {
        width: 100%;
        max-width: 320px;
        font-size: 16px;
        padding-inline: 14px;
    }
}
/* ============================================================
   ML PRO — GRID DE SUBCATEGORÍAS (overlay tipo app)
   Iconos grandes pero burbuja compacta
============================================================ */

.zt-app-cats-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 10px;              /* separación filas/columnas */
    padding: 6px 4px 14px;
    justify-content: center;
}

/* En pantallas más grandes, 4 por fila */
@media (min-width: 1024px) {
    .zt-app-cats-items {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px 14px;
    }
}

/* Cada ítem: burbuja + texto abajo */
.zt-app-cats-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    gap: 6px;
}

/* Círculo contenedor del icono
   → burbuja un poco más chica que antes */
.zt-app-cats-thumb {
    width: 78px;
    height: 78px;
    border-radius: 999px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.03);

    overflow: hidden;
}

/* En pantallas muy chicas, bajamos un poquito más */
@media (max-width: 380px) {
    .zt-app-cats-thumb {
        width: 72px;
        height: 72px;
    }
}

/* Imagen interna: más grande, para que “llene” mejor el círculo */
.zt-app-cats-thumb img {
    max-width: 88%;
    max-height: 88%;
    display: block;
}

/* Placeholder con letra inicial (cuando no hay icono) */
.zt-app-cats-thumb-placeholder {
    width: 100%;
    height: 100%;
    border-radius: inherit;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    font-weight: 700;
    color: #999;
    background: #f7f7f7;
}

/* Texto de la subcategoría (BEBIDAS, BOX, RAMEN, etc.) */
.zt-app-cats-item-name {
    font-size: 12px;          /* un pelín más grande */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #444;
    line-height: 1.35;
    max-width: 105px;
}

/* Botón amarillo inferior “Ver los X productos…” */
.zt-app-cats-root-link {
    margin: 6px 0 0;
    display: flex;
    justify-content: center;
}

.zt-app-cats-root-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 80%;
    max-width: 100%;

    padding: 8px 16px;
    border-radius: 999px;

    background: #ffe000;
    color: #333;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;

    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    border: none;
}

/* Un poquito menos ancho en escritorio para que respire */
@media (min-width: 1024px) {
    .zt-app-cats-root-link a {
        min-width: 60%;
        font-size: 13px;
    }
}

/* ZT — Cartel del título: Categoría vs Búsqueda */

/* En páginas de categoría de producto -> mostrar "CATEGORÍA" */
body.tax-product_cat .zt-archive-title::before {
    content: "CATEGORÍA";
}

/* En resultados de búsqueda de productos -> mostrar "BÚSQUEDA" */
body.search.post-type-archive-product .zt-archive-title::before,
body.search.woocommerce-page .zt-archive-title::before {
    content: "BÚSQUEDA";
}

/* =============================================================================================================================================================================================
/* ============================================================
   HOME — SLIDER "EXPLORÁ POR CATEGORÍAS" (FRONT PAGE)
   Zonatronik ML PRO 2025
============================================================ */

/* Bloque general de la sección (debajo de la barra de beneficios) */
.zt-home-main-cats {
    padding-top: 8px;
    padding-bottom: 4px;
}

.zt-home-main-cats-title {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: #ffe500;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: none;
    color: #111;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.zt-home-main-cats-title::after {
    content: "categorías";
    margin-left: 4px;
    font-weight: 600;
}

/* Flechas del slider */
.zt-home-main-cats-arrows {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.zt-home-main-cats-arrow {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #ff4081;
    background: #fff;
    color: #ff4081;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.zt-home-main-cats-arrow:hover {
    background: #ff4081;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}

/* Contenedor que recorta el slider (para que no se vea el overflow) */
.zt-home-main-cats-slider-outer {
    position: relative;
    margin: 4px 4px 0;
    padding: 6px 0 2px;
    overflow: hidden;
}

/* Tira deslizable horizontal (scroll-x) */
.zt-home-main-cats-slider {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 2px 8px 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* Ocultar scrollbar en navegadores modernos */
.zt-home-main-cats-slider::-webkit-scrollbar {
    display: none;
}
.zt-home-main-cats-slider {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Cada "pill" de categoría */
.zt-home-cat-pill {
    flex: 0 0 auto;
    width: 88px;
    padding: 4px 6px 6px;
    border-radius: 18px;
    background: #ffffff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #111;
    scroll-snap-align: start;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.03);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.zt-home-cat-pill:active {
    transform: scale(0.97);
}

.zt-home-cat-pill:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    border-color: rgba(255, 208, 0, 0.9);
}

/* Burbuja circular (icono / imagen inside) */
.zt-home-cat-icon {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: #ffffff;
    border: 3px solid #ffe500;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    flex-shrink: 0;
}

/* Si hay imagen del término, se muestra acá */
.zt-home-cat-icon img {
    display: block;
    width: 76%;
    height: 76%;
    object-fit: contain;
}

/* Fallback: si NO hay imagen, mostramos la letra inicial */
.zt-home-cat-icon:not(:has(img)) {
    font-size: 26px;
    font-weight: 800;
    color: #333;
}

/* Nombre de la categoría debajo del círculo */
.zt-home-cat-name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-align: center;
    color: #333;
    max-width: 90px;
}

.zt-home-main-cats-title {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: #ffe000;
    border-radius: 999px;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.zt-home-main-cats-arrows {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zt-home-main-cats-arrow {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255, 64, 129, 0.55);
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    color: #ff4081;
    cursor: pointer;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        opacity 0.18s ease;
}

.zt-home-main-cats-arrow i {
    font-size: 13px;
    line-height: 1;
}

.zt-home-main-cats-arrow:hover:not(:disabled) {
    background: #ff4081;
    color: #ffffff;
    border-color: #ff4081;
    box-shadow: 0 3px 10px rgba(255, 64, 129, 0.45);
    transform: translateY(-1px);
}

.zt-home-main-cats-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    background: #f5f5f5;
    color: #bdbdbd;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: none;
    transform: none;
}

/* Un toque más compacto en pantallas muy chicas */
@media (max-width: 480px) {
    .zt-home-main-cats-title {
        font-size: 15px;
        padding: 7px 14px;
    }
    .zt-home-main-cats-arrow {
        width: 32px;
        height: 32px;
    }
}

/* Cartel amarillo "Explorá por categorías" */
.zt-home-main-cats-title {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #ffe000;
    color: #111;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;              /* evita que se corte "EXPLORÁ POR" */
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

/* Parte fuerte "categorías" (strong o b) */
.zt-home-main-cats-title strong,
.zt-home-main-cats-title b {
    font-size: 13px;
    font-weight: 800;
}

/* Por si usás spans internos */
.zt-home-main-cats-title span {
    display: inline-block;
}

/* Contenedor de flechas */
.zt-home-main-cats-arrows {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Botones de flecha redondos */
.zt-home-main-cats-arrow {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: none;
    outline: none;

    background: #ff2f7a;              /* rosa Zonatronik */
    color: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 4px 12px rgba(0,0,0,0.22);
    cursor: pointer;
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background-color 0.12s ease;
}

.zt-home-main-cats-arrow i {
    font-size: 13px;
}

/* Hover / active */
.zt-home-main-cats-arrow:hover {
    transform: translateY(-1px);
    background: #ff4c8a;
    box-shadow: 0 6px 16px rgba(0,0,0,0.24);
}

.zt-home-main-cats-arrow:active {
    transform: translateY(0) scale(0.94);
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}

/* Ajustes para pantallas muy chicas */
@media (max-width: 380px) {
    .zt-home-main-cats-title {
        font-size: 11px;
        padding: 5px 10px;
    }

    .zt-home-main-cats-arrow {
        width: 30px;
        height: 30px;
    }
}

/* Cartel amarillo "Explorá por categorías" */
.zt-home-main-cats-title {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #ffe000;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #222;
    box-shadow: 0 3px 8px rgba(0,0,0,0.07);
}

/* Grupo de flechas */
.zt-home-main-cats-arrows {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Botón redondo: usamos selector con button+clase para ganar especificidad */
.zt-home-main-cats-arrows button.zt-home-main-cats-arrow {
    width: 32px;
    height: 32px;
    border-radius: 999px ;   /* nos aseguramos que sea círculo */
    border: none ;
    padding: 0;
    background: #ff4b8c ;    /* fucsia tipo MercadoLibre ofertas */
    color: #fff ;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Icono de Font Awesome dentro del botón */
.zt-home-main-cats-arrows button.zt-home-main-cats-arrow i {
    font-size: 13px;
    line-height: 1;
    color: inherit;
}

/* Hover / active */
.zt-home-main-cats-arrows button.zt-home-main-cats-arrow:hover {
    background: #ff6aa2 ;
    box-shadow: 0 4px 10px rgba(0,0,0,0.22);
    transform: translateY(-1px);
}

.zt-home-main-cats-arrows button.zt-home-main-cats-arrow:active {
    background: #e73676 ;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    transform: translateY(0);
}

/* Mobile muy chico: hacemos todo un poco más compacto */
@media (max-width: 380px) {
    .zt-home-main-cats-title {
        padding: 7px 10px;
        font-size: 12px;
    }

    .zt-home-main-cats-arrows button.zt-home-main-cats-arrow {
        width: 28px;
        height: 28px;
    }
}
.zt-home-cat-icon img {
    max-width: 100%;
    max-height:100%;
    display: block;
}
/* ============================================================
   HOME — Slider "Explorá por categorías"
   Burbuja + icono interno al 100%
============================================================ */

/* Burbuja */
.zt-home-cat-icon {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: #ffffff;
    border: 3px solid #ffd900;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;   /* recorta lo que se pase */
    font-size: 0;       /* que no moleste ningún texto interno */
}

/* Imagen dentro de la burbuja: ocupa el 100% */
.zt-home-cat-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;  /* si querés que se recorte un poquito cambiá a "cover" */
}

/* ============================================================
   CATEGORIAS BOTONES DENTRO DE CATEGORIAS PAGINA
============================================================ */
/* ZT — Strip de subcategorías en páginas de categoría */
body.tax-product_cat .zt-child-cats-strip {
    margin: 16px 0 24px;
}

/* Cards un poquito más compactas que las de home */
body.tax-product_cat .zt-cat-icon-card-child {
    padding: 14px 8px;
}

/* Fallback cuando no hay imagen: letra centrada */
.zt-child-cat-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 700;
    font-size: 18px;
    color: #333;
}
/* ============================================================
   ML PRO — Agrandar iconos dentro de la burbuja (subcategorías)
============================================================ */
.zt-child-cats-strip .zt-cat-icon-img img,
.zt-child-cats-strip .zt-cat-icon-img svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* ============================================================
   Burbujas de iconos — fondo blanco + contorno amarillo
   Aplica a las cards de categorías (nietos, etc.)
============================================================ */

.zt-cat-icon-img {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 50%;

    /* NUEVO ESTILO */
    background-color: #ffffff;          /* fondo blanco */
    border: 3px solid #ffd600;         /* contorno amarillo sólido */

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;                  /* por si alguna imagen es más grande */
}

/* ============================================================
   Override burbujas: icono interno más grande
============================================================ */

.zt-cat-icon-img {
    /* mantenemos forma y estilo general */
    width: 86px;
    height: 86px;
}

/* ICONO INTERNO MÁS GRANDE */
.zt-cat-icon-img img {
    position: relative;
    width: 110% ;   /* antes ~78% */
    height: 110% ;
    object-fit: contain;
    display: block;
}
/* ============================================================
   ML PRO — Centrar "6 cuotas" y "Transferir" SOLO EN ESCRITORIO
============================================================ */
@media (min-width: 1024px) {

    /* Caja amarilla de cuotas dentro de la card */
    .zt-product-item .zt-cuotas-box.zt-auto-cuotas {
        text-align: center ;
    }

    /* Las dos líneas de texto dentro de la caja */
    .zt-product-item .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line {
        display: block;
        width: 100%;
        margin: 0 auto;
        text-align: center ;
        float: none ;
    }
}

/* ============================================================
   ZT PROMOS — Landing de promociones
============================================================ */

.zt-promos-page {
    background: #f5f5f5;
}

/* HERO PROMOS */

.zt-promos-hero {
    background: #ffdd00;
    padding: 20px 16px 28px;
    text-align: center;
}

.zt-promos-hero-inner {
    max-width: 960px;
    margin: 0 auto;
}

.zt-promos-badge {
    display: inline-block;
    padding: 4px 10px;
    margin-bottom: 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #111;
    color: #fff;
}

.zt-promos-title {
    font-size: 22px;
    line-height: 1.25;
    margin: 4px 0 6px;
    font-weight: 800;
}

.zt-promos-subtitle {
    font-size: 14px;
    margin: 0 0 12px;
}

.zt-promos-countdown-text {
    font-size: 13px;
    margin-bottom: 8px;
}

.zt-promos-countdown {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}

.zt-promos-count-item {
    background: #fffbe3;
    border-radius: 12px;
    padding: 6px 10px;
    min-width: 58px;
}

.zt-promos-count-number {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
}

.zt-promos-count-label {
    font-size: 11px;
    text-transform: uppercase;
}

.zt-promos-cta {
    display: inline-block;
    margin-top: 4px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.zt-promos-cta:hover {
    opacity: 0.92;
}

.zt-promos-note {
    margin-top: 8px;
    font-size: 12px;
}

/* BENEFICIOS */

.zt-promos-benefits {
    padding: 16px 12px 8px;
}

.zt-promos-benefits-inner {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.zt-promos-benefit {
    background: #fff;
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 13px;
}

.zt-promos-benefit strong {
    display: block;
    margin-bottom: 2px;
}

/* LISTA / SECCIONES */

.zt-promos-list {
    max-width: 1200px;
    margin: 10px auto 24px;
    padding: 0 8px 0 10px;
}

.zt-promos-section {
    margin-bottom: 18px;
}

.zt-promos-section-title {
    font-size: 16px;
    font-weight: 700;
}

.zt-promos-section-link {
    font-size: 12px;
    text-decoration: none;
    color: #0077cc;
}

/* Slider horizontal simple reutilizando tus cards */

.zt-promos-slider {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 4px 10px;
    scroll-snap-type: x mandatory;
}

.zt-promos-slider .product,
.zt-promos-slider .zt-product-item {
    scroll-snap-align: start;
    flex: 0 0 220px;
}

/* FAQ */

.zt-promos-faq {
    padding: 8px 12px 28px;
}

.zt-promos-faq-inner {
    max-width: 960px;
    margin: 0 auto;
}

.zt-promos-faq-inner > h2 {
    font-size: 16px;
    margin-bottom: 10px;
}

.zt-promos-faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    font-size: 13px;
}

.zt-promos-faq-item {
    background: #fff;
    border-radius: 14px;
    padding: 10px 12px;
}

/* Desktop tweaks */

@media (min-width: 768px) {
    .zt-promos-title {
        font-size: 26px;
    }

    .zt-promos-benefits-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .zt-promos-faq-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .zt-promos-slider .product,
    .zt-promos-slider .zt-product-item {
        flex-basis: 240px;
    }
}
.zt-promo-countdown {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 12px 0 4px;
}

.zt-count-box {
    background: #000;
    color: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    text-align: center;
    min-width: 70px;
}

.zt-count-number {
    display: block;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.1;
}

.zt-count-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.zt-countdown-finished .zt-count-number {
    opacity: 0.6;
}
/* ============================================================
   PÁGINA DE PROMOS — Títulos de sección por categoría
============================================================ */
.zt-promos-section {
    padding: 24px 0 8px;
}

.zt-promos-section-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #000;              /* fondo negro ML style */
    color: #fff;
    padding: 6px 16px;
    border-radius: 999px;          /* píldora */
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.zt-promos-section-title::before {
    content: "🔥";
    margin-right: 2px;
}

.zt-promos-section-link {
    font-size: 0.85rem;
    color: #0077cc;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.zt-promos-section-link:hover {
    text-decoration: underline;
}
/* ============================================================
   PRECIOS CON DESCUENTO — Cards ML PRO
============================================================ */

.zt-product-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

/* Precio viejo (Woo lo envuelve en <del>) */
.zt-product-price del {
    order: 1;
    margin-right: 4px;
    color: #e53935;                /* rojo */
    text-decoration: line-through;
    font-weight: 500;
}

.zt-product-price del .amount,
.zt-product-price del bdi {
    color: inherit;
}

/* Precio vigente (Woo lo envuelve en <ins>) */
.zt-product-price ins {
    order: 2;
    color: #111;
    font-weight: 700;
}

.zt-product-price ins .amount,
.zt-product-price ins bdi {
    color: inherit;
}

/* Badge de porcentaje de descuento */
.zt-price-discount {
    order: 3;
    background: #e8f5e9;
    color: #2e7d32;                /* verde */
    font-weight: 700;
    font-size: 0.80rem;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.2;
}
/* ============================================================
   PÁGINA DE PROMOS — ocultar la fila de precio móvil duplicada
   (solo en /promos-zonatronik/)
============================================================ */

/* Cubre las variantes típicas de body class para la plantilla */
body.page-template-page-promos .zt-price-row-mobile,
body.page-template-page-promos-php .zt-price-row-mobile,
body.page-template-page-templatespage-promos .zt-price-row-mobile,
body.page-template-page-templatespage-promos-php .zt-price-row-mobile,
body[class*="page-promos"] .zt-price-row-mobile {
    display: none ;
}

/* Por si algún estilo apunta directo al bloque de precio mobile */
body.page-template-page-promos .zt-product-price.zt-price-mobile,
body.page-template-page-promos-php .zt-product-price.zt-price-mobile,
body.page-template-page-templatespage-promos .zt-product-price.zt-price-mobile,
body.page-template-page-templatespage-promos-php .zt-product-price.zt-price-mobile,
body[class*="page-promos"] .zt-product-price.zt-price-mobile {
    display: none ;
}
/* ============================================================
   LOOP PRODUCTOS — precio viejo tachado en rojo cuando hay oferta
   (solo afecta a nuestras cards .zt-product-item)
============================================================ */

/* Precio original (el que Woo pone dentro de <del>...) */
.zt-product-item .zt-product-price del,
.zt-product-item .zt-product-price del .woocommerce-Price-amount,
.zt-product-item .zt-product-price del .woocommerce-Price-amount bdi {
    color: #777;                          /* texto más suave */
    text-decoration-line: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: #ff3b3b;       /* línea roja */
}

/* Un poco de aire entre precio viejo y nuevo */
.zt-product-item .zt-product-price del {
    margin-right: 4px;
}
.zt-cuotas-box .zt-cuota-line {
    display: block;
    font-size: 0.78rem;
    line-height: 1.25;
}

/* Línea de TRANSFERENCIA más grande y verde */
.zt-cuotas-box .zt-cuota-line-transfer {
    margin-top: 2px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0a9b5b;
}
/* ============================================================
   HOME — SLIDERS: Ofertas, Más vendidos, Últimos productos
   (todos comparten el mismo comportamiento de carrusel)
============================================================ */

/* Separación vertical de las secciones */
.zt-home-promos,
.zt-home-bestsellers,
.zt-home-latest {
    margin-top: 24px;
}

/* ============================================================
   CONTENEDOR EXTERNO DE LOS SLIDERS
   (recorta overflow horizontal)
============================================================ */

.zt-home-promos-slider-outer,
.zt-home-bestsellers-slider-outer,
.zt-home-latest-slider-outer {
    position: relative;
    overflow: hidden;
}

/* ============================================================
   CARRUSEL HORIZONTAL
   - Convierte la grilla .zt-products-grid en fila horizontal
============================================================ */

.products.zt-home-promos-slider,
.products.zt-home-bestsellers-slider,
.products.zt-home-latest-slider {
    display: flex ;          /* deja de ser grid */
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 4px 2px 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    /* Anulamos cualquier grid previo */
    grid-template-columns: none ;
}

/* Scrollbar finita (opcional) */
.products.zt-home-promos-slider::-webkit-scrollbar,
.products.zt-home-bestsellers-slider::-webkit-scrollbar,
.products.zt-home-latest-slider::-webkit-scrollbar {
    height: 6px;
}
.products.zt-home-promos-slider::-webkit-scrollbar-track,
.products.zt-home-bestsellers-slider::-webkit-scrollbar-track,
.products.zt-home-latest-slider::-webkit-scrollbar-track {
    background: transparent;
}
.products.zt-home-promos-slider::-webkit-scrollbar-thumb,
.products.zt-home-bestsellers-slider::-webkit-scrollbar-thumb,
.products.zt-home-latest-slider::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
}

/* Cada card dentro de los sliders */
.products.zt-home-promos-slider > .zt-product-item,
.products.zt-home-promos-slider > .product,
.products.zt-home-bestsellers-slider > .zt-product-item,
.products.zt-home-bestsellers-slider > .product,
.products.zt-home-latest-slider > .zt-product-item,
.products.zt-home-latest-slider > .product {
    scroll-snap-align: start;
}

/* ============================================================
   ANCHOS DE LAS CARDS (mismo “tamaño visual” que el grid)
============================================================ */

/* MOBILE: 2 columnas virtuales (50% aprox), igual que la grilla */
@media (max-width: 767px) {
    .products.zt-home-promos-slider > .zt-product-item,
    .products.zt-home-promos-slider > .product,
    .products.zt-home-bestsellers-slider > .zt-product-item,
    .products.zt-home-bestsellers-slider > .product,
    .products.zt-home-latest-slider > .zt-product-item,
    .products.zt-home-latest-slider > .product {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
}

/* TABLET / ESCRITORIO: ~4 productos a la vista */
@media (min-width: 768px) {
    .products.zt-home-promos-slider > .zt-product-item,
    .products.zt-home-promos-slider > .product,
    .products.zt-home-bestsellers-slider > .zt-product-item,
    .products.zt-home-bestsellers-slider > .product,
    .products.zt-home-latest-slider > .zt-product-item,
    .products.zt-home-latest-slider > .product {
        flex: 0 0 calc(25% - 12px);
        max-width: calc(25% - 12px);
    }
}

/* ============================================================
   BOTÓN "VER TODAS LAS PROMOS" (sólo sección Navidad)
============================================================ */

.zt-home-promos-more {
    margin-top: 16px;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.zt-home-promos-more-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 8px 18px;
    border-radius: 999px;
    background: #ffe600;
    color: #111;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border: 1px solid #111;
    box-shadow: 0 2px 0 #111;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.zt-home-promos-more-btn:hover {
    background: #fff159;
    transform: translateY(-1px);
    box-shadow: 0 3px 0 #111;
}
/* =========================
   SHOP — ML PRO HERO + TOOLBAR
========================= */
.zt-shop-page{ width:100%; }

.zt-shop-hero{
  background:#fff;
  border-radius:18px;
  padding:14px 14px 10px;
  margin:14px 0 12px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}

.zt-shop-title{
  margin:0 0 4px;
  font-size:1.25rem;
  font-weight:800;
}

.zt-shop-subtitle{
  margin:0;
  color:#555;
  font-size:.95rem;
}

.zt-shop-shortcuts{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.zt-shop-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#f5f5f5;
  border:1px solid rgba(0,0,0,.08);
  text-decoration:none;
  font-weight:700;
  color:#111;
}

.zt-shop-trustbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.06);
}

.zt-shop-trustitem{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.9rem;
  color:#222;
}

.zt-shop-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:10px 0 10px;
}

.zt-shop-products{
  margin-top:8px;
}
/* SHOP PRO */
.zt-shop-archive{ padding: 12px 0 18px; }

.zt-shop-hero{
  background:#fff;
  border-radius:18px;
  padding:14px 14px 10px;
  margin:14px 0 12px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}

.zt-shop-subtitle{
  margin:6px 0 0;
  color:#555;
  font-size:.95rem;
}

.zt-shop-shortcuts{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.zt-shop-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#f5f5f5;
  border:1px solid rgba(0,0,0,.08);
  text-decoration:none;
  font-weight:800;
  color:#111;
}

.zt-shop-trustbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.06);
}

.zt-shop-trustitem{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.9rem;
  color:#222;
}

.zt-shop-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:10px 0 10px;
}

/* hace que el result count + ordering queden prolijos */
.zt-shop-toolbar .woocommerce-result-count{ margin:0; }
.zt-shop-toolbar form.woocommerce-ordering{ margin:0; }
/* ============================================================
   PÁGINA /categorias/ — Directorio PRO
============================================================ */
.zt-cats-page{ padding: 14px 0 22px; }

.zt-cats-hero{
  background:#fff;
  border-radius:18px;
  padding:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  margin-bottom:14px;
}

.zt-cats-title{ margin:0; font-size:1.25rem; font-weight:900; }
.zt-cats-subtitle{ margin:6px 0 0; color:#555; }

.zt-cats-actions{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:12px;
}

.zt-cats-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:#f5f5f5; border:1px solid rgba(0,0,0,.08);
  text-decoration:none; font-weight:800; color:#111;
}

.zt-cats-search{
  display:flex; gap:10px;
  margin-top:12px;
}

.zt-cats-search-input{
  flex:1; min-width:0;
  padding:10px 12px; border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
}

.zt-cats-search-btn{
  padding:10px 14px; border-radius:12px;
  border:2px solid #111; background:#ffeb00;
  font-weight:900; cursor:pointer;
}

.zt-cats-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

@media (min-width: 768px){
  .zt-cats-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.zt-cat-card{
  background:#fff;
  border-radius:18px;
  padding:12px;
  text-decoration:none;
  color:#111;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.zt-cat-card-top{ display:flex; gap:12px; align-items:center; }

.zt-cat-icon{
  width:56px; height:56px;
  border-radius:14px;
  background:#f6f6f6;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex:0 0 56px;
}

.zt-cat-icon img{ width:100%; height:100%; object-fit:contain; }

.zt-cat-fallback{ font-weight:900; font-size:1.2rem; color:#333; }

.zt-cat-name{ font-weight:900; line-height:1.1; }
.zt-cat-count{ color:#666; font-size:.9rem; margin-top:2px; }

.zt-cat-children{ display:flex; flex-wrap:wrap; gap:6px; }
.zt-cat-child{
  font-size:.8rem;
  background:#f5f5f5;
  border:1px solid rgba(0,0,0,.06);
  padding:4px 8px;
  border-radius:999px;
  color:#333;
}

.zt-cat-cta{ margin-top:auto; font-weight:900; }

/* ============================================================
   /categorias/ — Directorio PRO (ML PRO)
============================================================ */
.zt-cats-page{ padding: 14px 0 22px; }

.zt-cats-hero{
  background:#fff;
  border-radius:18px;
  padding:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  margin-bottom:14px;
  border:1px solid rgba(0,0,0,.06);
}

.zt-cats-title{ margin:0; font-size:1.35rem; font-weight:900; }
.zt-cats-subtitle{ margin:6px 0 0; color:#555; }

.zt-cats-actions{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:12px;
}

.zt-cats-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:#f5f5f5; border:1px solid rgba(0,0,0,.08);
  text-decoration:none; font-weight:900; color:#111;
}

.zt-cats-filters{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.06);
}

.zt-cats-filter-group{ display:flex; gap:8px; flex-wrap:wrap; }

.zt-cats-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  text-decoration:none;
  font-weight:900;
  color:#111;
}
.zt-cats-pill.is-active{
  background:#ffeb00;
  border-color:#111;
}

.zt-cats-search{ position:relative; margin-top:12px; }
.zt-cats-search-input{
  width:100%;
  padding:11px 120px 11px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
}
.zt-cats-search-btn{
  position:absolute;
  right:8px; top:50%;
  transform:translateY(-50%);
  padding:9px 14px;
  border-radius:10px;
  border:2px solid #111;
  background:#ffeb00;
  font-weight:900;
  cursor:pointer;
}

/* Grid */
.zt-cats-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (min-width: 768px){
  .zt-cats-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Card */
.zt-cat-card{
  background:#fff;
  border-radius:18px;
  padding:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.zt-cat-card-main{ text-decoration:none; color:#111; }
.zt-cat-card-top{ display:flex; gap:12px; align-items:center; }

.zt-cat-icon{
  width:58px; height:58px;
  border-radius:14px;
  background:#f6f6f6;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex:0 0 58px;
  border:1px dashed rgba(0,0,0,.18);
}
.zt-cat-icon img{ width:100%; height:100%; object-fit:contain; }
.zt-cat-fallback{ font-weight:900; font-size:1.2rem; color:#333; }

.zt-cat-name{ font-weight:900; line-height:1.1; }
.zt-cat-count{ color:#666; font-size:.9rem; margin-top:4px; display:flex; gap:8px; align-items:center; }
.zt-cat-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:20px;
  padding:0 8px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-weight:900;
  font-size:.8rem;
}

/* children */
.zt-cat-children{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.zt-cat-child{
  font-size:.82rem;
  background:#f5f5f5;
  border:1px solid rgba(0,0,0,.06);
  padding:5px 9px;
  border-radius:999px;
  color:#111;
  text-decoration:none;
  font-weight:800;
}
.zt-cat-child:hover{ filter:brightness(.97); }

.zt-cat-more-btn{
  font-size:.82rem;
  background:#fff;
  border:1px solid rgba(0,0,0,.16);
  padding:5px 9px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}

.zt-cat-children-more{ display:none; }
.zt-cat-card.is-open .zt-cat-children-more{ display:flex; }

.zt-cat-children-empty{ color:#666; font-size:.9rem; }
.zt-cat-children-note{ font-weight:700; }
.zt-cat-cta{ text-decoration:none; font-weight:900; color:#111; }
/* ============================================================
   /categorias/ — Directorio PRO (ML PRO)
============================================================ */

.zt-cats-page{
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 14px 28px;
}

.zt-cats-hero{
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  margin-bottom: 14px;
}

.zt-cats-title{
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.1;
}

.zt-cats-subtitle{
  margin: 6px 0 0;
  opacity: .75;
}

.zt-cats-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.zt-cats-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: #f4f5f6;
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 700;
  text-decoration: none;
}

.zt-cats-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.zt-cats-filter-group{
  display: inline-flex;
  gap: 8px;
  background: #f7f7f7;
  border: 1px solid rgba(0,0,0,.08);
  padding: 6px;
  border-radius: 999px;
}

.zt-cats-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  opacity: .75;
}

.zt-cats-pill.is-active{
  opacity: 1;
  background: #ffeb00;
  color: #111;
}

.zt-cats-search{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 12px;
}

.zt-cats-search-input{
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 0 12px;
  outline: none;
}

.zt-cats-search-btn{
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background: #ffeb00;
  font-weight: 800;
  padding: 0 14px;
  cursor: pointer;
}

/* Grid responsive */
.zt-cats-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 560px){
  .zt-cats-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px){
  .zt-cats-grid{ grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 1200px){
  .zt-cats-grid{ grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* Card */
.zt-cat-card{
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,.06);
}

.zt-cat-card-main{
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 12px 12px 8px;
}

.zt-cat-card-top{
  display: flex;
  gap: 12px;
  align-items: center;
}

.zt-cat-icon{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #f4f5f6;
  border: 1px dashed rgba(0,0,0,.18);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 56px;
}

.zt-cat-icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zt-cat-fallback{
  font-weight: 900;
  font-size: 1.2rem;
  opacity: .65;
}

.zt-cat-meta{ min-width: 0; }

.zt-cat-name{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height: 1.1;
}

.zt-cat-count{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: .8;
}

.zt-cat-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f2f3;
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 900;
}

/* Subcategorías */
.zt-cat-children{
  padding: 0 12px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.zt-cat-child{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f7f7f7;
  border: 1px solid rgba(0,0,0,.08);
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
}

.zt-cat-more-btn{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.18);
  font-weight: 900;
  cursor: pointer;
}

/* “Ver más” expandible (controlado por JS con .is-open) */
.zt-cat-children-more{
  padding-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height .25s ease, opacity .2s ease;
}

.zt-cat-card.is-open .zt-cat-children-more{
  max-height: 320px; /* suficiente para varias pills */
  opacity: 1;
  pointer-events: auto;
}

.zt-cat-cta{
  font-weight: 900;
  text-decoration: none;
}
/* ============================================================
   /categorias/ — Featured + Live search (ML PRO)
============================================================ */

.zt-cats-search-live{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 12px;
}

.zt-cats-search-clear{
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  font-weight: 900;
  padding: 0 14px;
  cursor: pointer;
}

.zt-cats-search-hint{
  margin-top: 8px;
  opacity: .7;
  font-size: .92rem;
}

.zt-cats-featured{
  margin: 14px 0 10px;
}

.zt-cats-featured-title{
  margin: 0;
  font-size: 1.1rem;
  font-weight: 900;
}

.zt-cats-featured-link{
  font-weight: 900;
  text-decoration: none;
}

.zt-cats-featured-row{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px 2px;
  scroll-snap-type: x mandatory;
}

.zt-cat-featured-pill{
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 16px rgba(0,0,0,.05);
  text-decoration: none;
  color: inherit;
  min-width: 220px;
}

.zt-cat-featured-ico{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #f4f5f6;
  border: 1px dashed rgba(0,0,0,.18);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.zt-cat-featured-ico img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zt-cat-featured-name{
  font-weight: 900;
  letter-spacing: .3px;
  font-size: .95rem;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zt-cat-featured-count{
  font-weight: 900;
  opacity: .7;
}

.zt-cat-card.is-hidden{
  display: none ;
}

/* Cuando se está buscando, ocultamos el “featured” para enfocarse en resultados */
.zt-cats-page.is-searching .zt-cats-featured{
  display: none;
}

/* Empty state */
.zt-cats-empty{
  padding: 16px 0 0;
}

.zt-cats-empty-box{
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}

.zt-cats-empty-title{
  font-weight: 900;
  font-size: 1.1rem;
}

.zt-cats-empty-sub{
  margin-top: 6px;
  opacity: .75;
}

.zt-cats-empty-btn{
  margin-top: 12px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background: #ffeb00;
  font-weight: 900;
  padding: 0 14px;
  cursor: pointer;
}
/* Ocultar elementos filtrados */
.zt-cat-card.is-hidden,
.zt-cat-featured-pill.is-hidden,
.zt-cats-featured.is-hidden {
  display: none ;
}
/* ============================================================
   /categorias/ — Directorio PRO (ML PRO) — ESTÉTICA FULL
============================================================ */

/* Fondo general y contenedor */
.zt-cats-page{
  background:#f5f6f7;
  padding: 18px 0 28px;
}
.zt-cats-page > *{
  max-width: 1180px;
  margin-left:auto;
  margin-right:auto;
  padding-left: 14px;
  padding-right: 14px;
}

/* HERO */
.zt-cats-hero{
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  padding: 18px;
}
.zt-cats-hero-top{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
}
.zt-cats-title{
  margin:0;
  font-size: 30px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.2px;
  color:#111;
}
.zt-cats-subtitle{
  margin:0;
  font-size: 14px;
  color:#666;
}

/* Chips (Novedades / Promos / Ir a tienda) */
.zt-cats-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
.zt-cats-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  background:#f7f7f7;
  border: 1px solid rgba(0,0,0,.10);
  text-decoration:none;
  color:#111;
  font-weight: 700;
  font-size: 13px;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.zt-cats-chip:hover{
  background:#fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Filtros (píldoras) */
.zt-cats-filters{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.zt-cats-filter-group{
  display:flex;
  gap:10px;
  background:#f7f7f7;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  padding: 6px;
}
.zt-cats-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration:none;
  color:#333;
  font-weight: 800;
  font-size: 12px;
  letter-spacing:.2px;
  border: 1px solid transparent;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.zt-cats-pill:hover{
  transform: translateY(-1px);
}
.zt-cats-pill.is-active{
  background:#ffeb00;
  border-color:#111;
  color:#111;
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}

/* Buscador EN VIVO */
.zt-cats-search-live{
  display:flex;
  gap:10px;
  margin-top: 12px;
  align-items:center;
}
.zt-cats-search-input{
  width:100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background:#fff;
  padding: 0 14px;
  font-size: 14px;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.zt-cats-search-input:focus{
  border-color:#111;
  box-shadow: 0 0 0 4px rgba(255,235,0,.45);
}
.zt-cats-search-clear{
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background:#fff;
  font-weight: 800;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.zt-cats-search-clear:hover{
  background:#f7f7f7;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}
.zt-cats-search-hint{
  margin-top: 8px;
  font-size: 12px;
  color:#777;
}

/* =========================
   CATEGORÍAS PRINCIPALES
========================= */
.zt-cats-featured{
  margin-top: 18px;
}
.zt-cats-featured-title{
  margin:0;
  font-size: 18px;
  font-weight: 900;
  color:#111;
}
.zt-cats-featured-link{
  text-decoration:none;
  font-weight: 900;
  color:#d6336c; /* tu acento actual; si querés ML puro, lo pasamos a #3483fa */
}
.zt-cats-featured-row{
  display:flex;
  gap: 10px;
  overflow:auto;
  padding: 6px 2px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.zt-cats-featured-row::-webkit-scrollbar{ height: 8px; }
.zt-cats-featured-row::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.16);
  border-radius: 999px;
}
.zt-cat-featured-pill{
  scroll-snap-align: start;
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  text-decoration:none;
  color:#111;
  transition: transform .15s ease, box-shadow .15s ease;
}
.zt-cat-featured-pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 22px rgba(0,0,0,.10);
}
.zt-cat-featured-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background:#f5f6f7;
  border: 1px dashed rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.zt-cat-featured-ico img{
  width: 26px;
  height: 26px;
  object-fit: contain;
  display:block;
}
.zt-cat-featured-name{
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .2px;
}
.zt-cat-featured-count{
  margin-left: 2px;
  font-weight: 900;
  font-size: 12px;
  color:#555;
  background:#f7f7f7;
  border: 1px solid rgba(0,0,0,.10);
  padding: 4px 8px;
  border-radius: 999px;
}

/* =========================
   GRID DE CARDS
========================= */
.zt-cats-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.zt-cat-card{
  background:#fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  padding: 14px;
  display:flex;
  flex-direction:column;
  min-height: 175px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.zt-cat-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0,0,0,.10);
}

.zt-cat-card-main{ text-decoration:none; color:inherit; }
.zt-cat-card-top{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.zt-cat-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background:#f5f6f7;
  border: 1px dashed rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex: 0 0 auto;
}
.zt-cat-icon img{
  width: 34px;
  height: 34px;
  object-fit: contain;
  display:block;
}
.zt-cat-fallback{
  font-weight: 950;
  color:#111;
}
.zt-cat-meta{ flex:1; }
.zt-cat-name{
  font-weight: 950;
  color:#111;
  letter-spacing: .2px;
  line-height: 1.15;
  text-transform: uppercase;
  font-size: 14px;
}
.zt-cat-count{
  margin-top: 6px;
  display:flex;
  gap: 8px;
  align-items:center;
  color:#666;
  font-size: 13px;
}
.zt-cat-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 10px;
  border-radius: 999px;
  background:#f7f7f7;
  border: 1px solid rgba(0,0,0,.10);
  color:#111;
  font-weight: 950;
}

/* Subcategorías como tags */
.zt-cat-children{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.zt-cat-child{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  background:#f7f7f7;
  border: 1px solid rgba(0,0,0,.10);
  text-decoration:none;
  color:#333;
  font-weight: 800;
  font-size: 11px;
  transition: background .15s ease, transform .15s ease;
}
.zt-cat-child:hover{
  background:#fff;
  transform: translateY(-1px);
}

.zt-cat-more-btn{
  appearance:none;
  border:none;
  background:transparent;
  padding: 0;
  margin-left: 2px;
  font-weight: 950;
  color:#3483fa;
  cursor:pointer;
  font-size: 12px;
  text-decoration: underline;
}

/* Bloque “more” oculto hasta abrir */
.zt-cat-children-more{
  display:none;
}
.zt-cat-card.is-open .zt-cat-children-more{
  display:flex;
}
.zt-cat-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height: 42px;
  border-radius: 12px;
  background:#ffeb00;
  border: 1px solid #111;
  font-weight: 950;
  text-decoration:none;
  color:#111;
  transition: transform .15s ease, box-shadow .15s ease;
}
.zt-cat-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.12);
}

/* Empty state */
.zt-cats-empty[hidden]{ display:none ; }
.zt-cats-empty{
  margin-top: 16px;
}
.zt-cats-empty-box{
  background:#fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  padding: 18px;
  text-align:center;
}
.zt-cats-empty-title{
  font-weight: 950;
  color:#111;
  font-size: 18px;
}
.zt-cats-empty-sub{
  margin-top: 6px;
  color:#666;
  font-size: 13px;
}
.zt-cats-empty-btn{
  margin-top: 12px;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid #111;
  background:#ffeb00;
  font-weight: 950;
  cursor:pointer;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1024px){
  .zt-cats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ============================================================
   TIENDA — Hero ML PRO (Shop)
============================================================ */

.woocommerce-shop .zt-shop-archive {
  max-width: 1220px;
  margin: 0 auto;
  padding: 18px 12px 26px;
  box-sizing: border-box;
}

.woocommerce-shop .zt-shop-hero {
  background: #fff;
  border-radius: 18px;
  padding: 18px 18px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
}

.woocommerce-shop .zt-shop-hero-top {
  display: grid;
  gap: 8px;
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.woocommerce-shop .zt-shop-pill {
  width: fit-content;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f5f6f7;
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 700;
  letter-spacing: .3px;
  font-size: 12px;
  color: #333;
}

.woocommerce-shop .zt-shop-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 800;
  color: #111;
}

.woocommerce-shop .zt-shop-subtitle {
  margin: 0;
  font-size: 14px;
  color: #555;
}

.woocommerce-shop .zt-shop-chips {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 14px 0 10px;
  flex-wrap: wrap;
}

.woocommerce-shop .zt-shop-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #f7f7f7;
  border: 1px solid rgba(0,0,0,.10);
  color: #111;
  font-weight: 800;
  text-decoration: none ;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease;
  user-select: none;
}

.woocommerce-shop .zt-shop-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

.woocommerce-shop .zt-shop-chip i {
  font-size: 14px;
  opacity: .95;
}

.woocommerce-shop .zt-shop-chip.is-active {
  background: #ffeb00;
  border-color: rgba(0,0,0,.22);
}

.woocommerce-shop .zt-shop-benefits {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
  margin-top: 6px;
}

.woocommerce-shop .zt-shop-benefit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #333;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fbfbfb;
  border: 1px solid rgba(0,0,0,.06);
}

.woocommerce-shop .zt-shop-benefit i {
  font-size: 14px;
}

.woocommerce-shop .zt-shop-cats-strip {
  margin-top: 14px;
}

.woocommerce-shop .zt-shop-loopbar {
  margin: 14px 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Result count + ordering (Woo) más “ML” */
.woocommerce-shop .zt-shop-loopbar .woocommerce-result-count {
  margin: 0 ;
  font-size: 13px;
  color: #444;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

.woocommerce-shop .zt-shop-loopbar .woocommerce-ordering {
  margin: 0 ;
}

.woocommerce-shop .zt-shop-loopbar .woocommerce-ordering select {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  font-weight: 700;
}

/* Mobile: chips scrolleables (más ML) */
@media (max-width: 768px) {
  .woocommerce-shop .zt-shop-hero {
    padding: 14px 12px 12px;
    border-radius: 16px;
  }

  .woocommerce-shop .zt-shop-title {
    font-size: 22px;
  }

  .woocommerce-shop .zt-shop-chips {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 2px 8px;
  }

  .woocommerce-shop .zt-shop-chip {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .woocommerce-shop .zt-shop-benefits {
    justify-content: flex-start;
    gap: 10px;
  }

  .woocommerce-shop .zt-shop-benefit {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .woocommerce-shop .zt-shop-loopbar {
    justify-content: flex-start;
  }
}
/* ============================================================
   TIENDA — Hero ML PRO (alineado y profesional)
============================================================ */

:root{
  --zt-container: 1220px;
  --zt-gutter: 16px;
}

/* Container global reutilizable */
.zt-container{
  max-width: var(--zt-container);
  margin: 0 auto;
  padding-left: var(--zt-gutter);
  padding-right: var(--zt-gutter);
}

/* Fondo general de la tienda */
.zt-shop-archive{
  background: #f5f5f5;
  padding: 14px 0 28px;
}

.zt-shop-archive-inner{
  width: 100%;
}

/* Hero */
.zt-shop-archive .zt-shop-hero{
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  padding: 18px;
  margin: 12px 0 16px;
}

/* Top */
.zt-shop-hero-top{
  text-align: center;
}

.zt-shop-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  background: #fff7cc;
  border: 1px solid #ffeb00;
  color: #111;
}

.zt-shop-title{
  margin: 10px 0 4px;
  font-size: 26px;
  line-height: 1.1;
}

.zt-shop-subtitle{
  margin: 0 auto;
  max-width: 60ch;
  color: #666;
}

/* Chips */
.zt-shop-chips{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.zt-shop-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,.08);
  color: #222;
  text-decoration: none;
  font-weight: 800;
}

.zt-shop-chip:hover{
  filter: brightness(.98);
}

.zt-shop-chip.is-active{
  background: #ffeb00;
  border-color: rgba(0,0,0,.18);
}

/* Beneficios */
.zt-shop-benefits{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.zt-shop-benefit{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  color: #222;
  font-weight: 600;
}

/* Barra del loop (ordenar / resultados) */
.zt-shop-loopbar{
  margin: 10px 0 12px;
}

/* Mobile: sin cortes, beneficios scrolleables */
@media (max-width: 768px){
  .zt-shop-archive{
    padding: 10px 0 22px;
  }

  .zt-shop-archive .zt-shop-hero{
    padding: 14px;
    border-radius: 16px;
  }

  .zt-shop-title{
    font-size: 22px;
  }

  .zt-shop-chips{
    gap: 8px;
  }

  .zt-shop-chip{
    flex: 1 1 auto;
    justify-content: center;
  }

  .zt-shop-benefits{
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .zt-shop-benefit{
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
/* ============================================================
   TIENDA — Tabs estilo ML + loopbar pro + beneficios
============================================================ */

/* Tabs (reemplaza chips) */
.zt-shop-tabs{
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.zt-shop-tab{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,.08);
  color: #222;
  text-decoration: none;
  font-weight: 800;
  line-height: 1;
}

.zt-shop-tab:hover{ filter: brightness(.98); }

.zt-shop-tab.is-active{
  background: #fff;
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.zt-shop-tab.is-active::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -8px;
  height: 3px;
  border-radius: 999px;
  background: #ffeb00; /* ML */
}

/* Beneficios más “equilibrados” */
.zt-shop-benefits{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.zt-shop-benefit{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  color: #222;
  font-weight: 650;
}

/* Loopbar pro (result count + ordering) */
.zt-shop-loopbar{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,.05);
  padding: 10px 12px;
  margin: 12px 0 12px;
}

.zt-shop-loopbar .woocommerce-before-shop-loop{
  margin: 0;
}

.zt-shop-loopbar .woocommerce-result-count{
  margin: 0;
  color: #444;
  font-weight: 650;
}

.zt-shop-loopbar .woocommerce-ordering{
  margin: 0;
}

.zt-shop-loopbar select.orderby{
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #f8f8f8;
  font-weight: 700;
}

/* Si Woo imprime result count + ordering juntos */
.zt-shop-loopbar{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

/* Mobile: tabs scrolleables (estilo ML), beneficios scrolleables */
@media (max-width: 768px){

  .zt-shop-tabs{
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 2px 2px 8px;
    gap: 8px;
  }
  .zt-shop-tabs::-webkit-scrollbar{ height: 0; }

  .zt-shop-tab{
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    border-radius: 999px; /* más ML en mobile */
  }

  .zt-shop-tab.is-active::after{
    left: 14px; right: 14px; bottom: -6px;
  }

  .zt-shop-benefits{
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .zt-shop-benefit{
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .zt-shop-loopbar{
    grid-template-columns: 1fr;
  }
  .zt-shop-loopbar .woocommerce-ordering{
    width: 100%;
  }
  .zt-shop-loopbar select.orderby{
    width: 100%;
  }
}

/* ============================================================
   ML PRO — AJUSTES PRO (TIENDA + /CATEGORIAS/) — v2025.12.14
   Objetivo: estética ML + alineación con header + mejor jerarquía
============================================================ */

:root{
  --zt-ml-yellow: #ffeb00;
  --zt-ml-black:  #111111;
  --zt-ml-bg:     #f5f5f5;
  --zt-ml-card:   #ffffff;
  --zt-ml-text:   #222222;
  --zt-ml-muted:  #666666;
  --zt-ml-border: rgba(0,0,0,.10);
  --zt-ml-shadow: 0 10px 24px rgba(0,0,0,.08);
  --zt-ml-radius: 18px;
}

/* Base de contenedores: misma grilla para Shop y Categorías */
.zt-archive-container.zt-shop-archive,
.zt-cats-page{
  width: 100%;
  max-width: 1200px;
  margin: 14px auto 28px;
  padding: 0 14px;
  box-sizing: border-box;
}

/* ============================================================
   1) TIENDA (/tienda/) — Hero ML PRO (más profesional)
============================================================ */

.zt-shop-hero{
  background: var(--zt-ml-card);
  border: 1px solid var(--zt-ml-border);
  border-radius: var(--zt-ml-radius);
  box-shadow: var(--zt-ml-shadow);
  padding: 18px 18px 14px;
}

.zt-shop-hero-top{
  text-align: center;
}

.zt-shop-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--zt-ml-border);
  background: #fff;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1;
}

.zt-shop-pill i{
  color: #18a957;
  font-size: 12px;
}

.zt-shop-title{
  margin: 10px 0 6px;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--zt-ml-text);
}

.zt-shop-subtitle{
  margin: 0 auto;
  max-width: 680px;
  color: var(--zt-ml-muted);
  font-size: 15px;
  line-height: 1.35;
}

.zt-shop-chips{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.zt-shop-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--zt-ml-border);
  background: #f7f7f7;
  color: #111;
  font-weight: 800;
  text-decoration: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.zt-shop-chip i{
  font-size: 14px;
}

.zt-shop-chip:hover{
  transform: translateY(-1px);
  background: #ffffff;
  border-color: rgba(0,0,0,.16);
}

.zt-shop-chip.is-active{
  background: var(--zt-ml-yellow);
  border-color: rgba(0,0,0,.25);
}

.zt-shop-benefits{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 18px;
}

.zt-shop-benefit{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #333;
  font-weight: 700;
  font-size: 13px;
}

.zt-shop-benefit i{
  font-size: 14px;
  color: #111;
}

@media (max-width: 680px){
  .zt-shop-hero{
    padding: 14px 12px 12px;
    border-radius: 16px;
  }
  .zt-shop-title{
    font-size: 26px;
  }
  .zt-shop-chip{
    padding: 9px 12px;
    font-size: 13px;
  }
  .zt-shop-benefits{
    justify-content: flex-start;
  }
}

/* ============================================================
   2) /categorias/ — Directorio PRO ML (más “ML”, más orden)
============================================================ */

.zt-cats-hero{
  background: var(--zt-ml-card);
  border: 1px solid var(--zt-ml-border);
  border-radius: var(--zt-ml-radius);
  box-shadow: var(--zt-ml-shadow);
  padding: 18px 18px 14px;
}

.zt-cats-hero-top{
  text-align: left;
}

.zt-cats-title{
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--zt-ml-text);
}

.zt-cats-subtitle{
  margin: 8px 0 0;
  color: var(--zt-ml-muted);
  font-size: 15px;
  line-height: 1.35;
}

/* Acciones arriba (chips) */
.zt-cats-actions{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.zt-cats-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--zt-ml-border);
  background: #f7f7f7;
  color: #111;
  font-weight: 800;
  text-decoration: none;
  transition: background .12s ease, transform .12s ease, border-color .12s ease;
}

.zt-cats-chip:hover{
  background: #fff;
  border-color: rgba(0,0,0,.16);
  transform: translateY(-1px);
}

/* Filtros (pills) */
.zt-cats-filters{
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.zt-cats-filter-group{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: #f7f7f7;
  border: 1px solid var(--zt-ml-border);
  border-radius: 999px;
}

.zt-cats-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  color: #333;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}

.zt-cats-pill.is-active{
  background: var(--zt-ml-yellow);
  border-color: rgba(0,0,0,.22);
  color: #111;
}

.zt-cats-pill:not(.is-active):hover{
  background: #fff;
  border-color: rgba(0,0,0,.10);
}

/* Buscador en vivo (nuevo markup) */
.zt-cats-search-live{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.zt-cats-search-input{
  flex: 1;
  min-width: 0;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--zt-ml-border);
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.zt-cats-search-input:focus{
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 0 0 4px rgba(255,235,0,.35);
}

.zt-cats-search-clear{
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.zt-cats-search-clear:hover{
  background: #f7f7f7;
  border-color: rgba(0,0,0,.24);
  transform: translateY(-1px);
}

.zt-cats-search-hint{
  margin-top: 8px;
  color: #777;
  font-size: 13px;
}

/* Featured: scroll más “ML” */
.zt-cats-featured{
  margin-top: 16px;
}

.zt-cats-featured-title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.zt-cats-featured-link{
  font-weight: 900;
  text-decoration: none;
}

.zt-cats-featured-row{
  margin-top: 12px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.zt-cats-featured-row::-webkit-scrollbar{
  height: 8px;
}
.zt-cats-featured-row::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.14);
  border-radius: 999px;
}

.zt-cat-featured-pill{
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--zt-ml-border);
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  text-decoration: none;
  color: #111;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.zt-cat-featured-pill:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.zt-cat-featured-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #f7f7f7;
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
}

.zt-cat-featured-ico img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zt-cat-featured-name{
  flex: 1;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zt-cat-featured-count{
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #f3f3f3;
  font-weight: 900;
  font-size: 12px;
  color: #333;
}

/* Grid de cards */
.zt-cats-grid{
  margin-top: 14px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px){
  .zt-cats-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .zt-cats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .zt-cats-grid{ grid-template-columns: 1fr; }
}

.zt-cat-card{
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--zt-ml-border);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.zt-cat-card:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.16);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
}

.zt-cat-card.is-hidden{
  display: none ;
}

.zt-cat-card-main{
  display: block;
  padding: 14px 14px 8px;
  text-decoration: none;
  color: inherit;
}

.zt-cat-card-top{
  display: flex;
  align-items: center;
  gap: 12px;
}

.zt-cat-icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #f7f7f7;
  border: 1px solid rgba(0,0,0,.08);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.zt-cat-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zt-cat-meta{
  min-width: 0;
  flex: 1;
}

.zt-cat-name{
  font-weight: 900;
  color: #111;
  font-size: 16px;
  line-height: 1.1;
}

.zt-cat-count{
  margin-top: 6px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #555;
  font-weight: 700;
  font-size: 13px;
}

.zt-cat-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: #f3f3f3;
  border: 1px solid rgba(0,0,0,.10);
  font-weight: 900;
  color: #111;
}

/* Subcategorías */
.zt-cat-children{
  padding: 0 14px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.zt-cat-child{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fafafa;
  text-decoration: none;
  color: #333;
  font-weight: 800;
  font-size: 12px;
  transition: background .12s ease, border-color .12s ease;
}

.zt-cat-child:hover{
  background: #fff;
  border-color: rgba(0,0,0,.16);
}

.zt-cat-more-btn{
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px dashed rgba(0,0,0,.18);
  background: #fff;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}

.zt-cat-more-btn::after{
  content: "▾";
  display: inline-block;
  line-height: 1;
  transform: translateY(-1px);
}

.zt-cat-card.is-open .zt-cat-more-btn::after{
  content: "▴";
}

.zt-cat-children-more{
  display: none;
}

.zt-cat-card.is-open .zt-cat-children-more{
  display: flex;
}

.zt-cat-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border-radius: 12px;
  background: var(--zt-ml-yellow);
  border: 1px solid rgba(0,0,0,.22);
  font-weight: 900;
  text-decoration: none;
  color: #111;
  transition: transform .12s ease;
}

.zt-cat-cta:hover{
  transform: translateY(-1px);
}

/* Empty state */
.zt-cats-empty{
  margin-top: 16px;
}

.zt-cats-empty-box{
  background: #fff;
  border: 1px solid var(--zt-ml-border);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  padding: 18px;
  text-align: center;
}

.zt-cats-empty-title{
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 6px;
}

.zt-cats-empty-sub{
  color: #666;
  font-weight: 600;
  margin-bottom: 12px;
}

.zt-cats-empty-btn{
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 680px){
  .zt-cats-hero{
    padding: 14px 12px 12px;
    border-radius: 16px;
  }
  .zt-cats-title{
    font-size: 26px;
  }
  .zt-cats-filter-group{
    width: 100%;
    justify-content: center;
  }
  .zt-cats-actions{
    justify-content: center;
  }
  .zt-cats-hero-top{
    text-align: center;
  }
  .zt-cats-search-live{
    flex-direction: column;
    align-items: stretch;
  }
  .zt-cats-search-clear{
    width: 100%;
  }
}
/* ============================================================
   ML PRO — STRIP SUBCATEGORÍAS (centrado + lindo)
   Arregla: “queda a la derecha con vacío a la izquierda”
============================================================ */

/* 1) En el loopbar, forzamos que el strip ocupe TODO el ancho */
.zt-shop-loopbar .zt-child-cats-strip,
.zt-shop-loopbar .zt-child-cats-strip.zt-grid-cat-icons {
  width: 100% ;
  max-width: 1200px;
  margin: 12px auto 16px ;
  justify-self: stretch;
  align-self: stretch;

  /* si tenías reglas previas que lo empujaban */
  float: none ;
}

/* 2) Grid responsive centrado */
.zt-child-cats-strip.zt-grid-cat-icons {
  display: grid ;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;

  justify-items: center;
  align-items: stretch;

  padding: 14px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}

/* 3) Card */
.zt-child-cats-strip .zt-cat-icon-card-child {
  width: 100%;
  max-width: 180px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  text-align: center;
  padding: 12px 10px;

  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.zt-child-cats-strip .zt-cat-icon-card-child:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.14);
}

/* 4) Círculo + icono */
.zt-child-cats-strip .zt-cat-icon-img {
  width: 74px;
  height: 74px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  border: 2px solid #ffeb00; /* amarillo ML */
}

.zt-child-cats-strip .zt-cat-icon-img img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
}

/* 5) Título */
.zt-child-cats-strip .zt-cat-title {
  font-weight: 800;
  font-size: .85rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Responsive */
@media (max-width: 768px) {
  .zt-child-cats-strip.zt-grid-cat-icons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 12px 10px;
    border-radius: 16px;
  }
  .zt-child-cats-strip .zt-cat-icon-card-child {
    max-width: none;
  }
}

@media (max-width: 420px) {
  .zt-child-cats-strip.zt-grid-cat-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .zt-child-cats-strip .zt-cat-icon-img {
    width: 66px;
    height: 66px;
  }
}
/* ============================================================
   ML PRO — LOOPBAR PRO (Strip + Result count + Ordering)
============================================================ */

/* 1) Evita que el loopbar “sea grid” y te corra el strip */
.zt-shop-loopbar{
  display:flex ;
  flex-direction:column ;
  gap:14px;
  width:100%;
}

/* 1b) El strip de subcategorías ocupa todo y centra contenido */
.zt-child-cats-strip{
  width:100%;
  justify-content:center ;
  margin:0 auto;
}
/* ============================================================
   ML PRO — SHOP LOOPBAR “card” + centrado strip categorías
============================================================ */

/* La barra completa (strip + mostrando/ordenar) como tarjeta */
.zt-shop-loopbar{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:14px 16px;
  margin:14px 0 16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* Centrar el strip de categorías y que quede “equilibrado” */
.zt-shop-loopbar .zt-child-cats-strip,
.zt-shop-loopbar .zt-grid-cat-icons{
  width:100%;
  margin:0 auto 12px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center; /* clave: centrado real */
  gap:12px;
}

/* Si tus cards del strip tienen ancho raro, esto los estabiliza */
.zt-shop-loopbar .zt-cat-icon-card-child{
  flex:0 0 auto;
}
/* ============================================================
   MOBILE — Strip de subcategorías como slider horizontal (ML)
============================================================ */
@media (max-width: 768px){

  .zt-shop-loopbar .zt-child-cats-strip,
  .zt-shop-loopbar .zt-grid-cat-icons{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:10px;

    padding:6px 6px 12px;
    margin:0 0 12px;
  }

  .zt-shop-loopbar .zt-cat-icon-card-child{
    flex:0 0 132px;          /* ancho “card” cómodo */
    scroll-snap-align:start;
  }
}
/* ============================================================
   ML PRO — Loop Header (Mostrando / Ordenar) centrado + prolijo
============================================================ */

/* Tu contenedor */
.zt-shop-loopbar{
  width: 100%;
  display: flex;
  justify-content: center;  /* clave */
  margin: 14px 0 18px;
}

/* Fallback: si NO existiera .zt-loop-header, centramos igual */
.zt-shop-loopbar > .woocommerce-result-count,
.zt-shop-loopbar > .woocommerce-ordering{
  float: none ;
}

/* Result count “cajita” */
.zt-shop-loopbar .woocommerce-result-count{
  margin: 0 ;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  font-weight: 700;
}

/* Ordering form como bloque */
.zt-shop-loopbar form.woocommerce-ordering{
  margin: 0 ;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Etiqueta “Ordenar” (sin tocar PHP) */
.zt-shop-loopbar form.woocommerce-ordering::before{
  content: "Ordenar";
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  font-weight: 800;
}

/* Select: arregla la flecha “doble” (appearance:none) y queda prolijo */
.zt-shop-loopbar select.orderby{
  -webkit-appearance: none;
  appearance: none;
  height: 40px;
  padding: 0 44px 0 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background-color: #fff;
  font-weight: 800;
  cursor: pointer;
  line-height: 40px;

  /* Flecha consistente (SVG inline) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
}

.zt-shop-loopbar select.orderby::-ms-expand{ display:none; }

.zt-home-hero-banners{
  position: relative;
  margin: 14px 0 14px;
}

.zt-home-hero-banners-track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.zt-home-hero-banners-track::-webkit-scrollbar{ display:none; }

.zt-home-hero-banner{
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: block;
  border-radius: 18px;
  overflow: hidden;
}

.zt-home-hero-banner img{
  width: 100%;
  height: auto;
  display: block;
}

.zt-home-hero-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  z-index: 2;
  background: #ffeb00;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
}
.zt-home-hero-prev{ left: 10px; }
.zt-home-hero-next{ right: 10px; }

@media (max-width: 768px){
  .zt-home-hero-arrow{ display:none; }
  .zt-home-hero-banners-track{ gap: 10px; }
  .zt-home-hero-banner{ border-radius: 14px; }
}
/* FIN DE PROMO (cartel) */
.zt-promos-ended {
  max-width: 960px;
  margin: 14px auto 0;
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  text-align: center;
}

.zt-promos-ended h2 {
  font-size: 16px;
  margin: 0 0 6px;
  font-weight: 800;
}

.zt-promos-ended p {
  margin: 0;
  font-size: 13px;
}

.zt-promos-ended-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.zt-promos-ended-btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}

.zt-promos-ended-link {
  display: inline-block;
  padding: 8px 6px;
  color: #111;
  text-decoration: underline;
  font-size: 13px;
}
/* ============================================================
   ZT PROMOS — MEJORAS ESTÉTICAS (Reyes / campañas)
   Scope: solo dentro de .zt-promos-page
============================================================ */

/* Fondo general + espacios */
.zt-promos-page{
  background: #f6f6f6;
  padding-bottom: 18px;
}

/* HERO: franja amarilla con “card” blanca encima */
.zt-promos-hero{
  background: linear-gradient(180deg, #FFE600 0%, #FFD200 100%);
  padding: 18px 12px 14px;
}

.zt-promos-hero-inner{
  max-width: 1160px;
  margin: 0 auto;
  background: rgba(255,255,255,0.92);
  border-radius: 20px;
  padding: 16px 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.06);
  text-align: center;
}

.zt-promos-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #111;
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 12px;
  margin: 0 0 10px;
}

.zt-promos-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.05;
}

.zt-promos-subtitle{
  margin: 10px auto 0;
  max-width: 820px;
  font-size: 14px;
  opacity: 0.90;
}

.zt-promos-countdown-text{
  margin: 12px 0 8px;
  font-size: 13px;
  opacity: 0.85;
}

/* COUNTDOWN en “cards” */
.zt-promos-countdown{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 auto 10px;
}

.zt-promos-count-item{
  width: 92px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 14px;
  padding: 10px 10px 9px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.zt-promos-count-number{
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.zt-promos-count-label{
  margin-top: 5px;
  font-size: 11px;
  opacity: 0.75;
  letter-spacing: 0.08em;
}

/* CTA principal (estilo ML PRO) */
.zt-promos-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #FFE600;
  color: #111;
  text-decoration: none;
  font-weight: 900;
  border-radius: 999px;
  padding: 10px 18px;
  margin-top: 6px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
}

.zt-promos-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 22px rgba(0,0,0,0.14);
}

.zt-promos-note{
  margin: 10px 0 0;
  font-size: 12px;
  opacity: 0.75;
}

/* Beneficios como “cards” */
.zt-promos-benefits{
  padding: 12px 12px 0;
}

.zt-promos-benefits-inner{
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}

.zt-promos-benefit{
  background: #fff;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

.zt-promos-benefit strong{
  display: block;
  font-weight: 900;
  margin-bottom: 4px;
}

.zt-promos-benefit span{
  display: block;
  font-size: 13px;
  opacity: 0.85;
}

/* Secciones “card” */
.zt-promos-section{
  max-width: 1160px;
  margin: 12px auto 0;
  background: #fff;
  border-radius: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}

.zt-promos-section-title{
  margin: 0;
  font-weight: 900;
  font-size: 18px;
}

.zt-promos-section-link{
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  opacity: 0.85;
}
.zt-promos-section-link:hover{ opacity: 1; text-decoration: underline; }

/* Grilla “Todos los productos” (NO slider) */
.zt-promos-all-grid{
  display: grid ;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* Slider por categoría (sí slider) — copiamos el patrón de Home */
.zt-promos-slider{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.zt-promos-slider > .product,
.zt-promos-slider > .zt-product-item{
  flex: 0 0 25%;
  min-width: 240px;
  scroll-snap-align: start;
}

.zt-promos-slider::-webkit-scrollbar{ height: 8px; }
.zt-promos-slider::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.14);
  border-radius: 999px;
}

/* Flechas (mismas clases Home) — mejor contraste en promos */
.zt-promos-page .zt-home-main-cats-arrows{
  display: flex;
  gap: 8px;
}
.zt-promos-page .zt-home-main-cats-arrow{
  width: 34px;
  height: 34px;
  border-radius: 999px ;
  background: #FFE600 ;
  border: 1px solid rgba(0,0,0,0.10) ;
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}
.zt-promos-page .zt-home-main-cats-arrow:hover{
  transform: translateY(-1px);
}

/* Paginación */
.zt-promos-pagination{
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.zt-promos-pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  text-decoration: none;
  color: #111;
  font-weight: 800;
  box-shadow: 0 8px 16px rgba(0,0,0,0.06);
}

.zt-promos-pagination .page-numbers.current{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* FAQ como cards */
.zt-promos-faq{
  padding: 12px 12px 0;
}
.zt-promos-faq-inner{
  max-width: 1160px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}
.zt-promos-faq-inner h2{
  margin: 0 0 10px;
  font-weight: 900;
}
.zt-promos-faq-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.zt-promos-faq-item{
  background: #f7f7f7;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(0,0,0,0.06);
}
.zt-promos-faq-item h3{
  margin: 0 0 6px;
  font-weight: 900;
  font-size: 14px;
}
.zt-promos-faq-item p{
  margin: 0;
  font-size: 13px;
  opacity: 0.85;
}

/* Fin de promo (cartel) más “prolijo” */
.zt-promos-ended{
  max-width: 860px;
  margin: 12px auto 0;
  background: #fff;
  border-radius: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 12px 22px rgba(0,0,0,0.10);
}
.zt-promos-ended h2{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 900;
}
.zt-promos-ended p{
  margin: 0;
  opacity: 0.85;
}
.zt-promos-ended-actions{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.zt-promos-ended-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
}
.zt-promos-ended-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 10px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid rgba(0,0,0,0.10);
}

/* Responsive */
@media (max-width: 980px){
  .zt-promos-benefits-inner{ grid-template-columns: 1fr; }
  .zt-promos-faq-grid{ grid-template-columns: 1fr; }
  .zt-promos-all-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .zt-promos-count-item{ width: 82px; }
  .zt-promos-all-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .zt-promos-section{ padding: 12px 12px; }
}
.zt-promos-total{
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  opacity: .9;
}
.zt-promos-total strong{
  font-weight: 900;
}
.zt-promos-catnav{
  margin-top: 10px;
}
/* PROMOS: forzar slider horizontal en secciones por categoría */
.zt-promos-page .zt-promos-slider{
  display: flex ;
  flex-wrap: nowrap ;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

.zt-promos-page .zt-promos-slider > .product,
.zt-promos-page .zt-promos-slider > .zt-product-item{
  flex: 0 0 25%;
  min-width: 240px;
  scroll-snap-align: start;
}

@media (max-width: 980px){
  .zt-promos-page .zt-promos-slider > .product,
  .zt-promos-page .zt-promos-slider > .zt-product-item{
    flex-basis: 50%;
    min-width: 240px;
  }
}
/* ============================================================
   PROMOS (Reyes) — Unificar estética de cards dentro del slider
   Scope: solo /promos-zonatronik/
============================================================ */
#zt-promos-page .zt-promos-slider{
  align-items: stretch;               /* todas con misma altura */
}

/* Cada card: misma estructura/alturas (aunque falte el badge 24hs o el % off) */
#zt-promos-page li.zt-product-item{
  height: 100%;
  display: grid ;
  grid-template-rows:
    190px               /* imagen */
    minmax(44px, auto)  /* título (2 líneas) */
    44px                /* precio */
    28px                /* reserva para "Llega en 24 hs" (aunque no esté) */
    1fr;                /* acciones (cuotas + botones) */
  align-content: start;
}

/* IMAGEN */
#zt-promos-page .zt-product-thumb{
  grid-row: 1;
  margin: 0 ;
}
#zt-promos-page .zt-thumb-inner{
  height: 190px ;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
#zt-promos-page .zt-thumb-inner img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* TÍTULO (misma altura visual) */
#zt-promos-page .zt-product-title{
  grid-row: 2;
  margin: 8px 0 0 ;
}
#zt-promos-page .zt-product-title a{
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.15;
  min-height: 2.3em;             /* asegura “alto” estable */
}

/* PRECIO (alto fijo + centrado) */
#zt-promos-page .zt-product-price.zt-price-desktop{
  grid-row: 3;
  margin: 6px 0 0 ;
  min-height: 44px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: center;
}
#zt-promos-page .zt-product-price.zt-price-desktop .price{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* BADGE 24HS: si existe ocupa su fila, si no existe igualmente queda la fila reservada */
#zt-promos-page .zt-local-24-badge-loop{
  grid-row: 4;
  margin: 6px auto 0 ;
}

/* ACCIONES (cuotas + botones) alineadas y “empujadas” al fondo */
#zt-promos-page .zt-card-actions{
  grid-row: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}

/* Cuotas: altura mínima uniforme para que el botón no “salte” */
#zt-promos-page .zt-cuotas-box.zt-auto-cuotas{
  min-height: 118px;
}
/* PROMOS: cartel contador total */
#zt-promos-page .zt-promos-total-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 10px auto 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 10px 18px rgba(0,0,0,0.12);
}
#zt-promos-page .zt-promos-total-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #FFE600;
  color: #111;
}
#zt-promos-page .zt-promos-total-text{
  font-size: 13px;
  opacity: .95;
}
/* ============================================================
   ZT — Unificar tamaño de cards: HOME sliders = PROMOS sliders
   (para que se vean iguales en ancho y “sensación” visual)
============================================================ */

:root{
  --zt-promo-card-w-mobile: 220px;  /* igual que promos */
  --zt-promo-card-w-desktop: 240px; /* igual que promos */
}

/* HOME sliders: promos / bestsellers / latest */
.products.zt-home-promos-slider > li.product,
.products.zt-home-bestsellers-slider > li.product,
.products.zt-home-latest-slider > li.product{
  flex: 0 0 var(--zt-promo-card-w-mobile) ;
  max-width: var(--zt-promo-card-w-mobile) ;
  scroll-snap-align: start;
}

/* Desktop */
@media (min-width: 900px){
  .products.zt-home-promos-slider > li.product,
  .products.zt-home-bestsellers-slider > li.product,
  .products.zt-home-latest-slider > li.product{
    flex-basis: var(--zt-promo-card-w-desktop) ;
    max-width: var(--zt-promo-card-w-desktop) ;
  }
}
.products.zt-home-celulares-slider > li.product{
  flex: 0 0 var(--zt-promo-card-w-mobile) ;
  max-width: var(--zt-promo-card-w-mobile) ;
  scroll-snap-align: start;
}

@media (min-width: 900px){
  .products.zt-home-celulares-slider > li.product{
    flex-basis: var(--zt-promo-card-w-desktop) ;
    max-width: var(--zt-promo-card-w-desktop) ;
  }
}
/* ============================================================
   HOME — CARRUSEL CELULARES (FIX: si quedó como grilla)
============================================================ */

.zt-home-celulares-slider-outer{
  position: relative;
  overflow: hidden;
}

.products.zt-home-celulares-slider{
  display: flex ;
  flex-wrap: nowrap ;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px 2px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* Anula cualquier grid previo */
  grid-template-columns: none ;
}

.products.zt-home-celulares-slider::-webkit-scrollbar{
  height: 6px;
}
.products.zt-home-celulares-slider::-webkit-scrollbar-track{
  background: transparent;
}
.products.zt-home-celulares-slider::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.25);
  border-radius: 999px;
}

.products.zt-home-celulares-slider > .zt-product-item,
.products.zt-home-celulares-slider > .product{
  scroll-snap-align: start;
}

/* MOBILE: 2 “cards” visibles */
@media (max-width: 767px){
  .products.zt-home-celulares-slider > .zt-product-item,
  .products.zt-home-celulares-slider > .product{
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}

/* DESKTOP: ~4 cards visibles */
@media (min-width: 768px){
  .products.zt-home-celulares-slider > .zt-product-item,
  .products.zt-home-celulares-slider > .product{
    flex: 0 0 calc(25% - 12px);
    max-width: calc(25% - 12px);
  }
}
/* ============================================================
  3 Filas de texto en Cards 
============================================================ */
/* ZT FIX — Título mobile: 2 líneas sin recorte */
.products .zt-product-item .zt-product-title,
.products .zt-product-item .zt-product-title a{
  line-height: 1.25;
}

.products .zt-product-item .zt-product-title{
  height: auto ;
  max-height: none ;
  overflow: visible;
  padding-bottom: 2px; /* evita “corte” por rounding */
}

.products .zt-product-item .zt-product-title a{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere; /* evita palabras largas rompiendo layout */
}

@media (max-width: 768px){
  .products .zt-product-item .zt-product-title a{
    -webkit-line-clamp: 2;
    max-height: calc(1.25em * 2);
  }
  .products .zt-product-item .zt-product-title{
    min-height: calc(1.25em * 2);
  }
}
/* ============================================================
   ZT — BENEFICIOS UNIFICADOS (SHOP/CATEGORÍAS/BÚSQUEDA)
   Objetivo: que .zt-shop-benefits se vea como la barra linda del front
============================================================ */

/* Contenedor */
.zt-shop-benefits{
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 12px 14px;
  display: grid ;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  align-items: stretch;
}

@media (max-width: 900px){
  .zt-shop-benefits{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Items (soporta <div>, <a>, etc) */
.zt-shop-benefits > *{
  display: flex ;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.03);
  min-height: 44px;
  text-decoration: none ;
  color: #111 ;
}

/* Texto */
.zt-shop-benefits > * span,
.zt-shop-benefits > * strong,
.zt-shop-benefits > * p{
  margin: 0 ;
  font-size: 13px;
  line-height: 1.2;
  color: #111 ;
}

/* Íconos: soporta i / img / svg */
.zt-shop-benefits > * :is(i, img, svg){
  width: 28px ;
  height: 28px ;
  border-radius: 10px ;
  background: #FFE600 ;
  color: #111 ;
  display: inline-flex ;
  align-items: center ;
  justify-content: center ;
  flex: 0 0 auto ;
  padding: 6px ;
  box-sizing: border-box ;
}

/* Para imágenes reales */
.zt-shop-benefits > * img{
  object-fit: contain ;
}

/* Si el item trae algo raro (por ej. <br> o bloques), lo ordenamos */
.zt-shop-benefits > * br{ display:none ; }
/* ============================================================
   ZT — BENEFICIOS (UNIFICAR HOME + SHOP/CATEGORÍAS/BÚSQUEDA)
   Home: .zt-benefits-bar
   Shop/Archive: .zt-shop-benefits
============================================================ */
.zt-benefits-bar,
.zt-shop-benefits{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
}

@media (max-width: 900px){
  .zt-benefits-bar,
  .zt-shop-benefits{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Items: en Home son .zt-benefit-item, en Shop tomamos los hijos directos */
.zt-benefits-bar .zt-benefit-item,
.zt-shop-benefits > *{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  min-height: 56px;
  box-sizing: border-box;
}

/* Si los items del shop son links, que no se “rompa” el look */
.zt-shop-benefits > a{
  text-decoration: none;
  color: inherit;
}

/* Iconos: normaliza tamaño y centra (FontAwesome / SVG / IMG) */
.zt-benefits-bar .zt-benefit-item i,
.zt-shop-benefits > * :is(i, svg){
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  background: #FFE600;
  border-radius: 12px;
  color: #111;
  font-size: 18px;
  line-height: 1;
}

.zt-shop-benefits > * img{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  background: #FFE600;
  border-radius: 12px;
  padding: 8px;
  box-sizing: border-box;
  object-fit: contain;
}

/* Texto */
.zt-benefits-bar .zt-benefit-item span,
.zt-shop-benefits > * :is(span, p){
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.15;
  color: #111;
}

/* Hover sutil */
@media (hover:hover){
  .zt-benefits-bar .zt-benefit-item:hover,
  .zt-shop-benefits > *:hover{
    background: rgba(0,0,0,.045);
  }
}
/* ============================================================
   ZT — BENEFICIOS: igualar SHOP/CATEGORÍAS al HOME
   (evita texto cortado + saca "apretado" en mobile)
============================================================ */

/* Contenedor: mismo comportamiento que el home */
.zt-benefits-bar,
.zt-shop-benefits{
  display: grid ;
  grid-template-columns: repeat(2, minmax(0, 1fr)) ;
  gap: 12px ;
  grid-auto-flow: row ;
  overflow: visible ;
}

/* Desktop: 4 columnas como “barra” */
@media (min-width: 900px){
  .zt-benefits-bar,
  .zt-shop-benefits{
    grid-template-columns: repeat(4, minmax(0, 1fr)) ;
  }
}

/* Items (en shop a veces no tienen clase fija: por eso el > * ) */
.zt-benefits-bar .zt-benefit-item,
.zt-shop-benefits > *{
  min-width: 0 ;              /* CLAVE para que el texto pueda envolver */
  display: flex ;
  align-items: center ;
  gap: 10px ;
  padding: 12px 14px ;
  border-radius: 16px ;
  background: #f6f6f6 ;
  border: 1px solid rgba(0,0,0,.06) ;
  box-shadow: 0 10px 22px rgba(0,0,0,.04) ;
}

/* Íconos: tamaño consistente (y no “come” el texto) */
.zt-benefits-bar .zt-benefit-item i,
.zt-shop-benefits > * i{
  flex: 0 0 34px ;
  width: 34px ;
  height: 34px ;
  display: inline-flex ;
  align-items: center ;
  justify-content: center ;
  border-radius: 12px ;
  background: #ffe600 ;
  color: #111 ;
  font-size: 16px ;
  line-height: 1 ;
}

/* Texto: permitir 2 líneas (sin cortar) */
.zt-benefits-bar .zt-benefit-item span,
.zt-shop-benefits > * span,
.zt-shop-benefits > * p{
  margin: 0 ;
  min-width: 0 ;
  font-weight: 600 ;
  font-size: 13px ;
  line-height: 1.15 ;

  white-space: normal ;       /* CLAVE: permite wrap */
  overflow: visible ;
  text-overflow: unset ;
}

/* Ajuste fino en pantallas muy chicas */
@media (max-width: 380px){
  .zt-benefits-bar .zt-benefit-item span,
  .zt-shop-benefits > * span,
  .zt-shop-benefits > * p{
    font-size: 12.5px ;
  }
}

.zt-local-24-pill{
  background: #e6f3ff;
  border: 1px solid #b8dfff;
  color: #0b72c9;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.zt-stock-pill{
  border: 1px solid rgba(0,0,0,.12);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #fff;
}

.zt-stock-pill.zt-stock-ok{ color: #0a7a2d; }
.zt-stock-pill.zt-stock-low{ color: #c0392b; }
/* ============================================================
   SINGLE PRODUCT — ML PRO (UI/UX Upgrade v2026.01)
   Pegar al FINAL del zt-mlpro-style.css
============================================================ */

/* 1) Ocultar textos de accesibilidad si tu CSS no lo hace (evita:
   "El precio original era..." visible) */
.screen-reader-text {
  border: 0 ;
  clip: rect(1px, 1px, 1px, 1px) ;
  -webkit-clip-path: inset(50%) ;
  clip-path: inset(50%) ;
  height: 1px ;
  margin: -1px ;
  overflow: hidden ;
  padding: 0 ;
  position: absolute ;
  width: 1px ;
  white-space: nowrap ;
}
/* ============================================================
   ZT — SINGLE: Colores ML PRO para "Compra Ya" + "Añadir al carrito"
   (igual que el resto del sitio)
   Pegar AL FINAL de zt-mlpro-style.css
============================================================ */

:root{
  --zt-ml-yellow: #ffe600;
  --zt-ml-yellow-border: #ffdd00;
  --zt-ml-text: #111;
}



/* ============================================================
   ZT — SHOP TABS: dejar de ser slider y pasar a GRID
   Aplica principalmente en mobile/tablet
============================================================ */
@media (max-width: 768px){

  /* contenedor: ya no scrollea */
  .zt-shop-tabs{
    display: grid ;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    overflow: visible ;
    overflow-x: visible ;
    -webkit-overflow-scrolling: auto ;

    scroll-snap-type: none ;
    padding: 10px 12px ;
  }

  /* ítems (links/botones): full width y sin “min-width” de slider */
  .zt-shop-tabs a,
  .zt-shop-tabs button{
    width: 100%;
    min-width: 0 ;

    justify-content: center;
    text-align: center;

    white-space: normal ;
    line-height: 1.1;
    padding: 10px 10px ;
  }

  /* por si tenías el snap en cada pill */
  .zt-shop-tabs a,
  .zt-shop-tabs button{
    scroll-snap-align: none ;
  }

  /* si existiera un wrapper de flechas del slider, lo ocultamos */
  .zt-shop-tabs-arrows,
  .zt-shop-tabs .zt-shop-tabs-arrows{
    display: none ;
  }
}
/* ZT FIX — HOME: evitar duplicado "CATEGORÍAS" en el título de categorías */
.zt-home-main-cats-title .zt-home-main-cats-chip::after,
.zt-home-main-cats-title::after {
  content: none ;
}

/* 2) Título: más fino, menos “bloque”, con subrayado suave ML */
.zt-titulo-seccion{
  display: inline-block;
  margin: 0 ;
  padding: 2px 6px 4px;
  border-radius: 8px;
  background: linear-gradient(transparent 70%, rgba(255,230,0,.55) 0);
  color: #111;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: .2px;
  text-align: center;
}
/* ============================================================
   ZT — FIX DUPLICADO "CATEGORÍAS" EN HOME MAIN CATS
   (El contenedor NO debe verse como chip, solo los .chip)
============================================================ */
.zt-home-main-cats-title{
  background: transparent ;
  padding: 0 ;
  border-radius: 0 ;
  box-shadow: none ;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Chips reales */
.zt-home-main-cats-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #222;
  box-shadow: 0 3px 8px rgba(0,0,0,.06);
}

.zt-home-main-cats-chip.zt-chip-yellow{
  background: #ffe600;
  border-color: #ffe600;
}

/* Título centrado */
.zt-home-main-cats-title{
  justify-content: center ;
  width: 100%;
}

/* 2) Título: limpio (sin fondo/box-shadow grande) */
.zt-titulo-seccion{
  position: relative;
  display: inline-block;
  margin: 12px auto 14px ;
  padding: 0 6px ;

  background: none ;
  box-shadow: none ;
  border: 0 ;

  text-align: center ;
  text-decoration: none ;
}

/* 3) Subrayado corto, fino y centrado */
.zt-titulo-seccion::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -7px;

  width: 72px;          /* DESKTOP: corto */
  height: 4px;          /* fino */
  border-radius: 999px; /* pill */
  background: #FFE600;
  opacity: .95;
}

/* Mobile: un poco más corto y más fino */
@media (max-width: 768px){
  .zt-titulo-seccion::after{
    width: 56px;
    height: 3px;
    bottom: -6px;
  }
}


.zt-titulo-seccion{
  font-weight: 700 ;
  letter-spacing: .2px;
}
/* ============================================================
   HOME — BANNERS PROMO (bloque intermedio)
============================================================ */
.zt-home-mid-banners{
  position: relative;
  margin: 14px 0 18px;
}

.zt-home-mid-banners-track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0; /* para que no se “corte” la sombra */
}
.zt-home-mid-banners-track::-webkit-scrollbar{ display:none; }

.zt-home-mid-banner{
  flex: 0 0 calc((100% - 14px) / 2); /* 2 visibles en desktop */
  scroll-snap-align: start;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
  aspect-ratio: 1200 / 270; /* desktop */
}

.zt-home-mid-banner picture,
.zt-home-mid-banner img{
  width: 100%;
  height: 100%;
  display: block;
}

.zt-home-mid-banner img{
  object-fit: cover; /* si respetás 1200x270 y 550x580, no recorta */
}

/* Flechas (solo desktop) */
.zt-home-mid-banners-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  z-index: 2;
  background: #ffeb00;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
}
.zt-home-mid-banners-prev{ left: 10px; }
.zt-home-mid-banners-next{ right: 10px; }

.zt-home-mid-banners-arrow:disabled{
  opacity: .35;
  cursor: default;
}

@media (max-width: 768px){
  .zt-home-mid-banner{
    flex: 0 0 86%;       /* 1 grande visible + “peek” del siguiente */
    border-radius: 16px;
    aspect-ratio: 550 / 580; /* mobile */
  }
  .zt-home-mid-banners-arrow{ display:none; }
}

@media (max-width: 380px){
  .zt-home-mid-banner{ flex-basis: 92%; }
}
/* Flechas fuera del banner (gutter lateral) */
.zt-home-mid-banners{
  position: relative;
  padding: 0 52px;           /* espacio para flechas */
  overflow: visible;
}

.zt-home-mid-banners-track{
  margin: 0 -52px;           /* recupera ancho visual */
  padding: 2px 52px;         /* mantiene el “gutter” real */
}

/* Flechas “en el gutter”, no encima de la imagen */
.zt-home-mid-banners-prev{ left: 10px; }
.zt-home-mid-banners-next{ right: 10px; }

/* Opcional: que se vean solo al pasar el mouse (desktop) */
@media (min-width: 769px){
  .zt-home-mid-banners-arrow{
    opacity: .0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  .zt-home-mid-banners:hover .zt-home-mid-banners-arrow{
    opacity: 1;
    pointer-events: auto;
  }
}
@media (min-width: 769px){
  .zt-home-mid-banner{
    flex: 0 0 100%;          /* 1 por vez, ancho completo */
    aspect-ratio: 1200 / 270;
  }
}
/* ============================================================
   ZT — HOME MID BANNERS (PRO)
   - Desktop: 1 banner por vista (100%)
   - Flechas fuera del arte (en gutter)
   - Sin cortes / sin molestar visualmente
============================================================ */

/* Asegurar que nada recorte las flechas */
.zt-home-mid-banners,
.zt-home-mid-banners *{
  box-sizing: border-box;
}
.zt-home-mid-banners{
  position: relative;
  overflow: visible ;
  margin: 16px 0 22px;
  padding: 0 46px; /* gutter para flechas */
}

/* Track */
.zt-home-mid-banners-track{
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  display: flex;
  gap: 14px;

  /* el banner queda “casi full width” y las flechas viven en el gutter */
  padding: 2px 0;
}
.zt-home-mid-banners-track::-webkit-scrollbar{ display:none; }

/* Banner card */
.zt-home-mid-banner{
  flex: 0 0 100%;            /* 1 por vista en desktop */
  scroll-snap-align: start;
  display: block;

  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  aspect-ratio: 1200 / 270;
}

/* Imagen */
.zt-home-mid-banner picture,
.zt-home-mid-banner img{
  width: 100%;
  height: 100%;
  display: block;
}
.zt-home-mid-banner img{
  object-fit: cover;
}

/* Flechas (fuera del arte, en el gutter) */
.zt-home-mid-banners-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 40px;
  height: 40px;
  border-radius: 999px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.16);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  backdrop-filter: blur(6px);
}
.zt-home-mid-banners-prev{ left: 6px; }
.zt-home-mid-banners-next{ right: 6px; }

.zt-home-mid-banners-arrow:disabled{
  opacity: .35;
  cursor: default;
}

/* Más “pro”: que aparezcan al hover (desktop) */
@media (min-width: 769px){
  .zt-home-mid-banners-arrow{
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  .zt-home-mid-banners:hover .zt-home-mid-banners-arrow{
    opacity: 1;
    pointer-events: auto;
  }
}

/* Mobile: mantené el look tipo carrusel (peek) + sin flechas */
@media (max-width: 768px){
  .zt-home-mid-banners{
    padding: 0;              /* en mobile no hace falta gutter */
    margin: 12px 0 18px;
  }
  .zt-home-mid-banner{
    flex: 0 0 92%;
    border-radius: 16px;
    aspect-ratio: 550 / 580;
  }
  .zt-home-mid-banners-arrow{ display:none ; }
}
/* ============================================================
   ZT — FIX MOBILE: Mid banners con el mismo “container” del sitio
============================================================ */
@media (max-width: 768px){

  /* mismo padding lateral que el resto de grids (ajustable) */
  .zt-home-section.zt-home-mid-banners{
    padding-left: 12px ;
    padding-right: 12px ;
  }

  /* el track no debe empujar a 100vw ni meter márgenes raros */
  .zt-home-mid-banners-track{
    padding: 0 ;
    margin: 0 ;
    width: 100% ;
  }

  /* banner 100% del “container”, no de la pantalla completa */
  .zt-home-mid-banner{
    flex: 0 0 100% ;
    width: 100% ;
    max-width: 100% ;
  }

  /* por si algún lado estaba en 100vw */
  .zt-home-mid-banner picture,
  .zt-home-mid-banner img{
    width: 100% ;
    max-width: 100% ;
  }
}

/* Acciones a la derecha (VER TODOS + flechas) */
.zt-home-section-actions{
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* Link “VER TODOS” estilo sutil */
.zt-home-viewall{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.45);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.18);
  padding-bottom: 2px;
  line-height: 1.1;
}
.zt-home-viewall:hover{
  color: rgba(0,0,0,.70);
  border-bottom-color: rgba(0,0,0,.30);
}

/* Flechas más “suaves” (similar ejemplo) */
.zt-home-main-cats-arrow{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #f4f4f4;
  border: 1px solid #e7e7e7;
  color: rgba(0,0,0,.55);
}
.zt-home-main-cats-arrow:hover{
  background: #efefef;
}

/* En móvil, compactamos */
@media (max-width: 768px){
  .zt-home-viewall{ font-size: 11px; }
  .zt-home-main-cats-arrow{ width: 34px; height: 34px; }
}

/* B) Títulos: más delicados + underline corto (NO gigante) */
.zt-titulo-seccion{
  background: transparent ;
  padding: 0 ;
  border-radius: 0 ;
  display: inline-block;
  font-weight: 800;
  margin: 0 ;
  line-height: 1.15;
  font-size: clamp(18px, 2.1vw, 26px);
  position: relative;
  padding-bottom: 10px ;
}

/* underline corto centrado */
.zt-titulo-seccion::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2px;
  height: 4px;
  width: clamp(46px, 7vw, 86px);
  border-radius: 999px;
  background: #ffe600;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* C) “Explorá por categorías” centrado y sin duplicaciones */
.zt-home-main-cats-title{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* Si en algún momento quedó un ::after que agregaba “CATEGORÍAS” extra */
.zt-home-main-cats-title::after,
.zt-home-main-cats-chip::after{
  content: none ;
  display: none ;
}

/* D) Ocultar “Ver todos” abajo en desktop (para que no duplique con el de arriba) */
@media (min-width: 769px){
  .zt-home-promos-more,
  .zt-home-latest-more{
    display: none ;
  }
  /* Si querés también ocultar el de Celulares abajo en desktop */
  .zt-home-celulares .zt-home-promos-more{
    display: none ;
  }
}

/* ============================================================
   ZT PATCH — Tienda/Archivo: ancho + beneficios “no apretados”
============================================================ */

/* Asegurar que el contenedor de archivo tenga el mismo “aire” que home */
.woocommerce.archive .zt-shop-archive-inner{
  width: 95%;
  max-width: 1350px;
  margin: 0 auto;
}

/* Unificar estilo entre HOME (.zt-benefits-bar) y TIENDA (.zt-shop-benefits) */
.zt-benefits-bar,
.zt-shop-benefits{
  width: 100%;
  margin: 10px auto 14px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 768px){
  .zt-benefits-bar,
  .zt-shop-benefits{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
    gap: 10px;
  }
}

/* Items (HOME y SHOP) */
.zt-benefit-item,
.zt-shop-benefits > *{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  background: #f7f7f7;
  border: 1px solid #eee;
}

/* Ícono en “pastilla amarilla” */
.zt-benefit-item i,
.zt-shop-benefits i{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #ffe600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111;
  flex: 0 0 36px;
}

/* ============================================================
   ZT PATCH — Tabs tienda: de slider a GRID
============================================================ */
.zt-shop-tabs{
  overflow: visible ;
  scroll-snap-type: none ;
  -webkit-overflow-scrolling: auto ;
  display: grid ;
  gap: 10px ;
  padding: 8px 8px 12px ;
  grid-template-columns: repeat(2, minmax(0, 1fr)) ;
}

@media (min-width: 769px){
  .zt-shop-tabs{
    grid-template-columns: repeat(4, minmax(0, 1fr)) ;
  }
}

/* Cada “botón tab” que sea full-width */
.zt-shop-tabs > a,
.zt-shop-tabs > button{
  width: 100% ;
  justify-content: center ;
}
/* ============================================================
   ZT — HOME: "Ver todos" (solo estilo, sin mover posición)
   Opción A: Amarillo ML
============================================================ */
.zt-home .zt-home-viewall{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;

  background: #ffe600;                 /* amarillo ML */
  border: 1px solid rgba(0,0,0,.10);
  color: #111;

  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;

  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.zt-home .zt-home-viewall:hover{
  filter: brightness(.96);
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
  transform: translateY(-1px);
}

.zt-home .zt-home-viewall:active{
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

.zt-home .zt-home-viewall:focus-visible{
  outline: 2px solid #111;
  outline-offset: 2px;
}

@media (max-width: 768px){
  .zt-home .zt-home-viewall{
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
    letter-spacing: .07em;
  }
}
/* ============================================================
   ZT — Página Mangas del Mes (estilos livianos)
============================================================ */
.zt-mangas-hero{
  padding: 18px 0 8px;
}
.zt-mangas-hero-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 12px;
}
.zt-mangas-badge{
  display:inline-block;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(255,230,0,.25);
  border: 1px solid rgba(0,0,0,.10);
  padding: 6px 10px;
  border-radius: 999px;
  margin: 0 0 10px;
}
.zt-mangas-title{ margin: 0 0 6px; }
.zt-mangas-subtitle{ margin: 0 0 12px; opacity: .9; }
.zt-mangas-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.zt-mangas-cta{
  display:inline-flex; align-items:center; justify-content:center;
  height: 36px; padding: 0 14px; border-radius: 999px;
  background:#ffe600; color:#111; font-weight: 800; text-decoration:none;
  border: 1px solid rgba(0,0,0,.10);
}
.zt-mangas-cta.alt{ background:#fff; }
.zt-mangas-note{ margin: 6px 0 0; opacity:.85; }

.zt-mangas-genres-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.zt-mangas-genre-card{
  display:block;
  text-decoration:none;
  color: inherit;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.zt-mangas-genre-top{ display:flex; gap:10px; align-items:center; font-weight:900; }
.zt-mangas-genre-ico{ font-size: 18px; }
.zt-mangas-genre-desc{ margin-top: 8px; font-size: 13px; opacity:.9; }
.zt-mangas-genre-link{ margin-top: 10px; font-weight: 900; color:#0b57d0; }

.zt-mangas-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.zt-mangas-pill{
  display:inline-flex; align-items:center; justify-content:center;
  height: 32px; padding: 0 12px;
  border-radius: 999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  text-decoration:none; color:#111; font-weight:800;
}

@media (max-width: 900px){
  .zt-mangas-genres-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ============================================================
   ZT — Mangas del Mes: mejoras estéticas + responsive
   (solo afecta la landing /mangas-recomendados-del-mes/)
============================================================ */

#zt-mangas-mes.zt-mangas-mes-page{
  background: #f6f7f9;
  padding-bottom: 26px;
}

/* Anclas: evita que el header fijo tape las secciones */
#zt-mangas-generos,
#zt-mangas-destacados{
  scroll-margin-top: 92px;
}

/* -------------------------
   HERO (centrado + más “ML PRO”)
------------------------- */
#zt-mangas-mes .zt-mangas-hero{
  padding: 18px 12px 10px;
}

#zt-mangas-mes .zt-mangas-hero-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  text-align: center;
}

#zt-mangas-mes .zt-mangas-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff7b8;
  border: 1px solid rgba(255,230,0,.65);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  margin: 0 0 10px;
}

#zt-mangas-mes .zt-mangas-title{
  margin: 0 0 8px;
  line-height: 1.12;
}

#zt-mangas-mes .zt-mangas-subtitle{
  max-width: 820px;
  margin: 0 auto;
  color: rgba(0,0,0,.72);
  font-size: 15px;
  line-height: 1.45;
}

#zt-mangas-mes .zt-mangas-subtitle small{
  font-size: 12px;
  margin-top: 6px;
  opacity: .65;
}

/* CTAs del hero */
#zt-mangas-mes .zt-mangas-hero-actions{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

#zt-mangas-mes .zt-mangas-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: #ffe600;
  border: 1px solid rgba(0,0,0,.12);
  color: #111;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}

#zt-mangas-mes .zt-mangas-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.12);
}

#zt-mangas-mes .zt-mangas-cta.alt{
  background: #fff;
}

#zt-mangas-mes .zt-mangas-note{
  margin: 0;
  color: rgba(0,0,0,.62);
}

/* -------------------------
   Géneros: que se centre la última fila (mejor que grid)
------------------------- */
#zt-mangas-mes .zt-mangas-genres-grid{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* clave: centra cuando queda 1 card “colgada” */
  gap: 12px;
}

#zt-mangas-mes .zt-mangas-genre-card{
  flex: 1 1 240px;
  max-width: 340px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 14px 14px 12px;
  text-decoration: none;
  color: #111;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#zt-mangas-mes .zt-mangas-genre-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,230,0,.9);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

#zt-mangas-mes .zt-mangas-genre-top{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

#zt-mangas-mes .zt-mangas-genre-ico{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff7b8;
  border: 1px solid rgba(255,230,0,.6);
  font-size: 18px;
}

#zt-mangas-mes .zt-mangas-genre-name{
  font-weight: 900;
}

#zt-mangas-mes .zt-mangas-genre-desc{
  color: rgba(0,0,0,.70);
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 10px;
}

#zt-mangas-mes .zt-mangas-genre-link{
  font-weight: 900;
  color: #0b57d0;
}

/* -------------------------
   Editoriales: centrado y más prolijo
------------------------- */
#zt-mangas-mes .zt-mangas-pills{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

#zt-mangas-mes .zt-mangas-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  color: #111;
  text-decoration: none;
  font-weight: 800;
}

/* -------------------------
   Sección “Destacados”: ancho consistente
------------------------- */
#zt-mangas-mes .zt-mangas-destacados{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 6px;
}

/* -------------------------
   Mobile / Tablet
------------------------- */
@media (max-width: 768px){

  #zt-mangas-mes .zt-mangas-hero{
    padding: 12px 10px 8px;
  }

  #zt-mangas-mes .zt-mangas-hero-inner{
    padding: 18px 14px;
    border-radius: 16px;
  }

  #zt-mangas-mes .zt-mangas-title{
    font-size: 26px;
  }

  #zt-mangas-mes .zt-mangas-subtitle{
    font-size: 14px;
  }

  /* Botones: en móvil mejor que ocupen ancho y queden prolijos */
  #zt-mangas-mes .zt-mangas-hero-actions{
    gap: 10px;
  }

  #zt-mangas-mes .zt-mangas-cta{
    width: 100%;
    max-width: 420px;
    height: 42px;
  }

  /* Géneros: cards full width controladas */
  #zt-mangas-mes .zt-mangas-genre-card{
    max-width: 520px;
  }

  /* Editoriales: centradas */
  #zt-mangas-mes .zt-mangas-pills{
    justify-content: center;
  }
}
/* ============================================================
   ZT — Mangas del Mes: ajustes estéticos + sliders de 5 (desktop)
   Scope: #zt-mangas-mes
============================================================ */

/* Contenedor y aire general */
#zt-mangas-mes{
  padding-bottom: 22px;
}
#zt-mangas-mes .zt-mangas-hero-inner,
#zt-mangas-mes .zt-home-section{
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}

/* HERO: centrado real + botones prolijos */
#zt-mangas-mes .zt-mangas-hero{
  padding: 18px 0 10px;
}
#zt-mangas-mes .zt-mangas-hero-inner{
  text-align: center;
}
#zt-mangas-mes .zt-mangas-title{
  margin: 10px 0 8px;
}
#zt-mangas-mes .zt-mangas-subtitle{
  max-width: 860px;
  margin: 0 auto;
}
#zt-mangas-mes .zt-mangas-hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

/* Géneros: grilla más pareja (6 items = 3x2) */
#zt-mangas-mes .zt-mangas-genres-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1024px){
  #zt-mangas-mes .zt-mangas-genres-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  #zt-mangas-mes .zt-mangas-genres-grid{
    grid-template-columns: 1fr;
  }
}

/* Botón "Ver todos" (solo en Mangas) más visible */
#zt-mangas-mes .zt-home-viewall{
  background: #ffe600;
  border-color: rgba(0,0,0,.10);
  color: #111;
}
#zt-mangas-mes .zt-home-viewall:hover{
  background: #ffef66;
}

/* ============================================================
   Sliders: forzar 5 tarjetas visibles en desktop (como Home)
   Importante: tu slider ya usa flex + scroll, acá solo ajustamos el ancho.
============================================================ */
#zt-mangas-mes .zt-mangas-slider .zt-product-item{
  flex: 0 0 20% ;
  max-width: 20% ;
}

/* Tablet: 3 visibles */
@media (max-width: 1024px){
  #zt-mangas-mes .zt-mangas-slider .zt-product-item{
    flex-basis: 33.3333% ;
    max-width: 33.3333% ;
  }
}

/* Mobile: 2 visibles */
@media (max-width: 768px){
  #zt-mangas-mes .zt-mangas-slider .zt-product-item{
    flex-basis: 50% ;
    max-width: 50% ;
  }

  /* Ajuste: hero y títulos respiren mejor */
  #zt-mangas-mes .zt-mangas-title{
    font-size: 26px;
    line-height: 1.15;
  }
  #zt-mangas-mes .zt-mangas-subtitle{
    font-size: 14px;
  }
}
/* ============================================================
   FIX — Mangas del Mes: 5 cards completas (sin corte por gap)
   Scope: #zt-mangas-mes
============================================================ */
#zt-mangas-mes .zt-mangas-slider{
  --zt-mangas-gap: 12px;
  gap: var(--zt-mangas-gap) ;
}

/* Limpia márgenes viejos si tu theme los usa en lugar de gap */
#zt-mangas-mes .zt-mangas-slider .zt-product-item{
  margin: 0 ;
  box-sizing: border-box;
  flex: 0 0 calc((100% - (4 * var(--zt-mangas-gap))) / 5) ;
  max-width: calc((100% - (4 * var(--zt-mangas-gap))) / 5) ;
}

/* Tablet: 3 visibles */
@media (max-width: 1024px){
  #zt-mangas-mes .zt-mangas-slider .zt-product-item{
    flex-basis: calc((100% - (2 * var(--zt-mangas-gap))) / 3) ;
    max-width: calc((100% - (2 * var(--zt-mangas-gap))) / 3) ;
  }
}

/* Mobile: 2 visibles */
@media (max-width: 768px){
  #zt-mangas-mes .zt-mangas-slider .zt-product-item{
    flex-basis: calc((100% - (1 * var(--zt-mangas-gap))) / 2) ;
    max-width: calc((100% - (1 * var(--zt-mangas-gap))) / 2) ;
  }
}
/* ============================================================
   ZT — ARCHIVE / CATEGORÍAS / BÚSQUEDA: 5 cards por fila (desktop)
   Afecta: Tienda, Categorías, Tags y Resultados de búsqueda de productos
============================================================ */

/* Contenedor de grilla en páginas de WooCommerce (no HOME sliders) */
body.post-type-archive-product.woocommerce ul.products,
body.tax-product_cat.woocommerce ul.products,
body.tax-product_tag.woocommerce ul.products,
body.search.woocommerce ul.products,
body.search.search-results ul.products{
  display: grid ;
  grid-template-columns: repeat(5, minmax(0, 1fr)) ;
  gap: 18px ;
  margin: 0 ;
  padding: 0 ;
}

/* Neutraliza floats/márgenes viejos de Woo/tema */
body.post-type-archive-product.woocommerce ul.products > li.product,
body.tax-product_cat.woocommerce ul.products > li.product,
body.tax-product_tag.woocommerce ul.products > li.product,
body.search.woocommerce ul.products > li.product,
body.search.search-results ul.products > li.product{
  width: auto ;
  float: none ;
  margin: 0 ;
}

/* Asegura que la card no “rompa” el grid */
body.post-type-archive-product.woocommerce ul.products > li.product,
body.tax-product_cat.woocommerce ul.products > li.product,
body.tax-product_tag.woocommerce ul.products > li.product,
body.search.woocommerce ul.products > li.product{
  min-width: 0 ;
}

/* Breakpoints (ajustados para que se vea “ML PRO” y no quede apretado) */
@media (max-width: 1320px){
  body.post-type-archive-product.woocommerce ul.products,
  body.tax-product_cat.woocommerce ul.products,
  body.tax-product_tag.woocommerce ul.products,
  body.search.woocommerce ul.products{
    grid-template-columns: repeat(4, minmax(0, 1fr)) ;
    gap: 16px ;
  }
}

@media (max-width: 1024px){
  body.post-type-archive-product.woocommerce ul.products,
  body.tax-product_cat.woocommerce ul.products,
  body.tax-product_tag.woocommerce ul.products,
  body.search.woocommerce ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) ;
    gap: 14px ;
  }
}

@media (max-width: 768px){
  body.post-type-archive-product.woocommerce ul.products,
  body.tax-product_cat.woocommerce ul.products,
  body.tax-product_tag.woocommerce ul.products,
  body.search.woocommerce ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    gap: 12px ;
  }
}
/* ============================================================
   ZT — ARCHIVE (Tienda / Categorías / Búsqueda): 5 cards desktop
   Pegar al FINAL del zt-mlpro-style.css
============================================================ */

/* 5 columnas en escritorio (solo en listados/archivos) */
@media (min-width: 1200px){
  .zt-archive-container .products.zt-products-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr)) ;
  }
}

/* Por si alguna búsqueda cae en otra plantilla sin .zt-archive-container */
@media (min-width: 1200px){
  body.search .products.zt-products-grid,
  body.search-results .products.zt-products-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr)) ;
  }
}
/* ============================================================
   ZT — CATEGORÍAS (product_cat): 5 cards en escritorio
   Pegar al FINAL del zt-mlpro-style.css
============================================================ */

@media (min-width: 1200px){
  /* Categorías WooCommerce */
  body.tax-product_cat .products.zt-products-grid,
  body.tax-product_cat ul.products.zt-products-grid,
  body.product-category .products.zt-products-grid,
  body.product-category ul.products.zt-products-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr)) ;
  }
}
@media (min-width: 1200px){
  body.tax-product_cat .products.zt-products-grid{
    display: grid ; /* fuerza grid si algún CSS la pasa a flex */
  }
}
/* ============================================================
   ZT — ETIQUETAS (product_tag): 5 cards en escritorio
   Pegar al FINAL del zt-mlpro-style.css
============================================================ */

@media (min-width: 1200px){
  /* Archivo de etiquetas WooCommerce: /etiqueta-producto/slug/ */
  body.tax-product_tag .products.zt-products-grid,
  body.tax-product_tag ul.products.zt-products-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr)) ;
  }

  /* Plan B: si algún CSS la fuerza a flex */
  body.tax-product_tag .products.zt-products-grid{
    display: grid ;
  }
}
/* ============================================================
   ZT — ARCHIVES: mismo ancho en BÚSQUEDA = CATEGORÍAS / ETIQUETAS
   (unifica estética entre /categoria-producto/ y ?s=... post_type=product)
============================================================ */

:root{
  /* Ancho “ML” (si querés más/menos, cambiá solo este valor) */
  --zt-archive-max: 1350px;
}

/* 1) En búsquedas, a veces Hello/Elementor limita #primary/site-main:
      liberamos ese tope para que el contenedor ZT pueda crecer */
body.search.post-type-archive-product #primary.site-main,
body.search.post-type-archive-product .content-area,
body.search.post-type-archive-product .site-main{
  max-width: none ;
  width: 100% ;
}

/* 2) Aplicamos el ancho final de ZT a todos los listados:
      tienda / categorías / etiquetas / búsqueda */
body.post-type-archive-product .zt-shop-archive > .zt-container,
body.tax-product_cat .zt-shop-archive > .zt-container,
body.tax-product_tag .zt-shop-archive > .zt-container,
body.search.post-type-archive-product .zt-shop-archive > .zt-container{
  width: 95% ;
  max-width: var(--zt-archive-max) ;
  margin-left: auto ;
  margin-right: auto ;
}

/* 3) Padding lateral consistente (para que “respire” igual que categorías) */
body.post-type-archive-product .zt-shop-archive > .zt-container,
body.tax-product_cat .zt-shop-archive > .zt-container,
body.tax-product_tag .zt-shop-archive > .zt-container,
body.search.post-type-archive-product .zt-shop-archive > .zt-container{
  padding-left: 14px;
  padding-right: 14px;
}

@media (max-width: 768px){
  body.post-type-archive-product .zt-shop-archive > .zt-container,
  body.tax-product_cat .zt-shop-archive > .zt-container,
  body.tax-product_tag .zt-shop-archive > .zt-container,
  body.search.post-type-archive-product .zt-shop-archive > .zt-container{
    padding-left: 10px;
    padding-right: 10px;
  }
}
/* ============================================================
   ZT — PRODUCT SEARCH: mismo ancho que etiquetas/categorías
   - Solo afecta a búsquedas de productos (body.zt-product-search)
============================================================ */

/* 1) Quitamos el tope de ancho del layout (Hello Elementor) en búsqueda de productos */
body.zt-product-search .content-area,
body.zt-product-search #primary,
body.zt-product-search .site-main,
body.zt-product-search .site-content,
body.zt-product-search #content{
  max-width: none ;
  width: 100% ;
}

/* 2) Igualamos el contenedor del archivo al ancho de tags/categorías */
body.zt-product-search .zt-shop-archive > .zt-container{
  width: 95% ;
  max-width: var(--zt-archive-max) ;
  margin-left: auto ;
  margin-right: auto ;
  padding-left: 14px ;
  padding-right: 14px ;
}

@media (max-width: 768px){
  body.zt-product-search .zt-shop-archive > .zt-container{
    padding-left: 10px ;
    padding-right: 10px ;
  }
}
/* ============================================================
   ZT — ARCHIVES: mismo ancho en BÚSQUEDA = CATEGORÍAS / ETIQUETAS
============================================================ */

:root{
  --zt-archive-max: 1350px;
}

/* 1) En búsquedas, liberamos topes de ancho del wrapper */
body.search.search-results #primary.site-main,
body.search.search-results .content-area,
body.search.search-results .site-main,
body.search.woocommerce-page #primary.site-main,
body.search.woocommerce-page .content-area,
body.search.woocommerce-page .site-main{
  max-width: none ;
  width: 100% ;
}

/* 2) Ancho final “ML” igual que cat/tag (PERO ahora sí matchea búsqueda) */
body.post-type-archive-product .zt-shop-archive > .zt-container,
body.tax-product_cat .zt-shop-archive > .zt-container,
body.tax-product_tag .zt-shop-archive > .zt-container,
body.search.search-results .zt-shop-archive > .zt-container,
body.search.woocommerce-page .zt-shop-archive > .zt-container{
  width: 95% ;
  max-width: var(--zt-archive-max) ;
  margin-left: auto ;
  margin-right: auto ;
}

/* 3) Refuerzo directo al contenedor exacto que estás midiendo (tu screenshot):
      div.zt-container.zt-shop-archive-inner */
body.search.search-results .zt-container.zt-shop-archive-inner,
body.search.woocommerce-page .zt-container.zt-shop-archive-inner{
  width: 95% ;
  max-width: var(--zt-archive-max) ;
  margin-left: auto ;
  margin-right: auto ;
}

/* 4) Padding consistente */
body.post-type-archive-product .zt-shop-archive > .zt-container,
body.tax-product_cat .zt-shop-archive > .zt-container,
body.tax-product_tag .zt-shop-archive > .zt-container,
body.search.search-results .zt-shop-archive > .zt-container,
body.search.woocommerce-page .zt-shop-archive > .zt-container{
  padding-left: 14px;
  padding-right: 14px;
}

@media (max-width: 768px){
  body.post-type-archive-product .zt-shop-archive > .zt-container,
  body.tax-product_cat .zt-shop-archive > .zt-container,
  body.tax-product_tag .zt-shop-archive > .zt-container,
  body.search.search-results .zt-shop-archive > .zt-container,
  body.search.woocommerce-page .zt-shop-archive > .zt-container{
    padding-left: 10px;
    padding-right: 10px;
  }
}
/* FORZAR ancho ML SOLO en búsqueda (WP search) */
body.search.search-results .zt-container.zt-shop-archive-inner{
  width: 95% ;
  max-width: 1350px ;
  margin-left: auto ;
  margin-right: auto ;
}
/* ============================================================
   ZT — FIX ancho en BÚSQUEDA de productos (FiboSearch / ?s=...&post_type=product)
   Objetivo: mismo ancho que categorías (romper "boxed" de Elementor/Hello)
============================================================ */

body.search-results.woocommerce-page{
  --zt-archive-max: 1450px; /* ajustá si tus categorías usan otro */
}

/* 1) Quitar cualquier "max-width" del layout base en búsquedas */
body.search-results.woocommerce-page #page,
body.search-results.woocommerce-page #content,
body.search-results.woocommerce-page .site,
body.search-results.woocommerce-page .site-content,
body.search-results.woocommerce-page .content-area,
body.search-results.woocommerce-page .site-main,
body.search-results.woocommerce-page .elementor,
body.search-results.woocommerce-page .elementor-section-wrap{
  max-width: none ;
  width: 100% ;
}

/* 2) Si el contenido cae dentro de contenedores “boxed” de Elementor */
body.search-results.woocommerce-page .elementor-section.elementor-section-boxed > .elementor-container,
body.search-results.woocommerce-page .elementor-container,
body.search-results.woocommerce-page .e-con.e-con-boxed > .e-con-inner,
body.search-results.woocommerce-page .e-con-inner{
  max-width: var(--zt-archive-max) ;
  width: min(var(--zt-archive-max), 95vw) ;
  margin-left: auto ;
  margin-right: auto ;
  padding-left: 12px ;
  padding-right: 12px ;
}

/* 3) Tu contenedor ML PRO (por las dudas, lo reforzamos en búsqueda) */
body.search-results.woocommerce-page .zt-shop-archive,
body.search-results.woocommerce-page .zt-container{
  max-width: var(--zt-archive-max) ;
  width: min(var(--zt-archive-max), 95vw) ;
  margin-left: auto ;
  margin-right: auto ;
}
/* ============================================================
   FIGURAS DEL DÍA — PILL "-10%" SOBRE LA IMAGEN (solo este slider)
============================================================ */
.zt-home-figuras-promo .zt-home-figpromo-slider .zt-product-thumb{
  position: relative;
}

.zt-home-figuras-promo .zt-home-figpromo-slider .zt-product-thumb::after{
  content: "-10%";
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;

  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;

  background: rgba(0,0,0,.78);
  color: #fff;

  box-shadow: 0 10px 20px rgba(0,0,0,.18);
  pointer-events: none; /* no bloquea el click al producto */
}

@media (max-width: 768px){
  .zt-home-figuras-promo .zt-home-figpromo-slider .zt-product-thumb::after{
    left: 8px;
    bottom: 8px;
    padding: 6px 9px;
    font-size: 12px;
  }
}
/* USD prefix en precio principal (cards + single) */
.zt-price-usd .price::before{
  content: "USD ";
  display: inline-block;
  margin-right: 6px;
  color: #00A650;        /* negro */
  font-weight: 800;
  letter-spacing: .2px;
}
/* ================================
   ML PRO — Prefijo USD en cards
================================ */
.zt-product-price.zt-price-usd::before{
  content: "USD";
  display: inline-block;
  margin-right: 6px;
  font-weight: 800;
  color: #00A650; /* negro */
  font-size: 20px;
  letter-spacing: .2px;
}
/* ============================================================
   ML PRO — Aviso mínimo de compra (PRO / compacto)
============================================================ */
.zt-min-order-notice{
  width: min(1120px, calc(100% - 20px));
  margin: 10px auto 0;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 230, 0, .45);
  background: rgba(255, 230, 0, .16);
  color: #111;
  display: none;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  backdrop-filter: blur(6px);
}

.zt-min-order-notice.is-visible{ display:flex; }

.zt-min-order-notice .zt-min-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  font-size: 16px;
}

.zt-min-order-notice .zt-min-body{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.zt-min-order-notice .zt-min-title{
  font-size: 13px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .2px;
}

.zt-min-order-notice .zt-min-row{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

.zt-min-order-notice .zt-min-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.08);
}

.zt-min-order-notice .zt-min-pill strong{
  font-weight: 900;
}

.zt-min-order-notice .zt-min-pill.is-bad{
  background: rgba(255, 0, 0, .06);
  border-color: rgba(255, 0, 0, .14);
}

.zt-min-order-notice .zt-min-actions{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 0 0 auto;
}

.zt-min-order-notice .zt-min-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: #111;
  font-weight: 800;
  font-size: 12px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

.zt-min-order-notice .zt-min-cta:hover{
  transform: translateY(-1px);
}

.zt-min-order-notice .zt-min-close{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.85);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

/* Mobile: apila y ocupa bien */
@media (max-width: 640px){
  .zt-min-order-notice{
    padding: 10px 10px;
    gap: 8px;
  }
  .zt-min-order-notice .zt-min-body{
    gap: 8px;
  }
  .zt-min-order-notice .zt-min-actions{
    width: 100%;
    justify-content: flex-end;
  }
  .zt-min-order-notice .zt-min-cta{
    flex: 1 1 auto;
    justify-content: center;
  }
}
const css = `
  .zt-min-order-notice{
    display:none;
    align-items:flex-start;
    gap:12px;
    max-width:1200px;
    margin:10px auto 0;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid rgba(0,0,0,.08);
    background:linear-gradient(180deg, rgba(255,239,170,.55), rgba(255,255,255,.9));
    box-shadow:0 8px 22px rgba(0,0,0,.08);
    color:#111;
  }
  .zt-min-order-notice.is-visible{ display:flex; }

  .zt-min-ico{
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    border-radius:12px;
    background:rgba(0,0,0,.06);
    flex:0 0 auto;
    font-size:18px;
    margin-top:2px;
  }

  .zt-min-body{ flex:1 1 auto; min-width:0; }

  .zt-min-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin:0 0 6px;
  }
  .zt-min-title{ font-weight:900; font-size:14px; margin:0; }

  .zt-min-close{
    width:34px;height:34px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.10);
    background:rgba(255,255,255,.75);
    cursor:pointer;
    font-size:20px;
    line-height:1;
    flex:0 0 auto;
  }

  .zt-min-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    font-size:12px;
  }
  .zt-min-pill{
    display:inline-flex;
    gap:6px;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.8);
    border:1px solid rgba(0,0,0,.07);
    line-height:1;
    white-space:nowrap;
  }
  .zt-min-pill.is-bad{
    background:rgba(255,220,220,.85);
    border-color:rgba(255,0,0,.12);
  }

  .zt-min-progress{
    height:8px;
    border-radius:999px;
    background:rgba(0,0,0,.08);
    overflow:hidden;
    margin-top:10px;
  }
  .zt-min-bar{
    height:100%;
    width:0%;
    background:#00A650; /* verde ML */
  }
  .zt-min-meta{
    margin-top:6px;
    font-size:12px;
    color:rgba(0,0,0,.72);
    font-weight:700;
  }

  .zt-min-actions{
    display:flex;
    gap:10px;
    align-items:center;
    margin-top:10px;
  }
  .zt-min-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:#111 ;
    color:#fff ;
    font-weight:800;
    font-size:12px;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.08);
    width:auto;
  }
  .zt-min-cta:active{ transform: translateY(1px); }

  @media (max-width: 680px){
    .zt-min-order-notice{ margin:8px 10px 0; padding:12px 12px; }
    .zt-min-row{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:8px;
    }
    .zt-min-pill{
      width:100%;
      justify-content:space-between;
      white-space:nowrap;
    }
    .zt-min-pill:nth-child(3){ grid-column:1 / -1; } /* “Faltan” full width */
    .zt-min-actions{ width:100%; }
    .zt-min-cta{ flex:1 1 auto; width:100%; }
  }
`;
/* ============================================================
   PROMOS / REVENDEDORES — FORZAR 5 CARDS (como Front Page)
   Scope: SOLO dentro de la landing de promos
   (si tu wrapper es #zt-promos-page, queda 100% aislado)
============================================================ */

#zt-promos-page{
  --zt-promos-gap: 12px;
}

/* ---------- CASO A: el listado está en modo SLIDER (flex) ---------- */
/* (Ej: .zt-promos-slider o un .products con display:flex) */
#zt-promos-page .zt-promos-slider{
  gap: var(--zt-promos-gap) ;
}

/* Desktop: 5 visibles */
@media (min-width: 992px){
  #zt-promos-page .zt-promos-slider > .zt-product-item,
  #zt-promos-page .zt-promos-slider > li.product,
  #zt-promos-page .zt-promos-slider > .product{
    flex: 0 0 calc((100% - (4 * var(--zt-promos-gap))) / 5) ;
    max-width: calc((100% - (4 * var(--zt-promos-gap))) / 5) ;
    min-width: 0 ; /* clave: saca el “mínimo” que te impide 5 */
    margin: 0 ;
  }
}

/* Tablet: 3 visibles */
@media (min-width: 768px) and (max-width: 991px){
  #zt-promos-page .zt-promos-slider > .zt-product-item,
  #zt-promos-page .zt-promos-slider > li.product,
  #zt-promos-page .zt-promos-slider > .product{
    flex: 0 0 calc((100% - (2 * var(--zt-promos-gap))) / 3) ;
    max-width: calc((100% - (2 * var(--zt-promos-gap))) / 3) ;
    min-width: 0 ;
    margin: 0 ;
  }
}

/* Mobile: 2 visibles */
@media (max-width: 767px){
  #zt-promos-page .zt-promos-slider{
    gap: 10px ;
  }
  #zt-promos-page .zt-promos-slider > .zt-product-item,
  #zt-promos-page .zt-promos-slider > li.product,
  #zt-promos-page .zt-promos-slider > .product{
    flex: 0 0 calc((100% - 10px) / 2) ;
    max-width: calc((100% - 10px) / 2) ;
    min-width: 0 ;
    margin: 0 ;
  }
}


/* ---------- CASO B: el listado está en modo GRILLA (ul.products) ---------- */
/* Esto te asegura 5 columnas aunque Woo te lo deje en 4 por defecto.
   OJO: excluimos el slider para no pisarlo. */
@media (min-width: 992px){
  #zt-promos-page ul.products:not(.zt-promos-slider){
    display: grid ;
    grid-template-columns: repeat(5, minmax(0, 1fr)) ;
    gap: 16px ;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  #zt-promos-page ul.products:not(.zt-promos-slider){
    grid-template-columns: repeat(3, minmax(0, 1fr)) ;
    gap: 14px ;
  }
}
@media (max-width: 767px){
  #zt-promos-page ul.products:not(.zt-promos-slider){
    grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    gap: 10px ;
  }
}
/* Centro y ancho controlado del bloque contraseña */
.zt-access-body{
  text-align: center;
}

.zt-field{
  justify-items: center;
  margin: 0 0 12px;
}

.zt-field label{
  width: 100%;
  max-width: 380px;
  text-align: left;
}

.zt-field input{
  max-width: 380px;   /* antes 100% */
}

/* Botones mantienen ancho del card, queda más prolijo */
.zt-btn{
  max-width: 420px;
  margin: 0 auto;
}

/* Fila de beneficios */
.zt-benefits{
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.zt-benefit{
  font-size: 12px;
  color: #111827;
  background: #ffffff;
  border: 1px solid var(--zt-border);
  border-radius: 999px;
  padding: 6px 10px;
  opacity: .95;
}
.zt-home-cat-count{
  display:block;
  margin-top:4px;
  font-size:11px;
  font-weight:800;
  color:rgba(0,0,0,.55);
  line-height:1.1;
}
/* HOME cats count chip */
.zt-home-cat-name{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.zt-home-cat-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.2px;
  line-height:1;
  background:rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.10);
  color:rgba(0,0,0,.70);
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}

/* estados */
.zt-home-cat-count.is-ok{
  background:rgba(0,166,80,.10);
  border-color:rgba(0,166,80,.22);
  color:#0b6b3a;
}

.zt-home-cat-count.is-zero{
  background:rgba(0,0,0,.05);
  border-color:rgba(0,0,0,.10);
  color:rgba(0,0,0,.45);
}

/* opcional: más compacto en mobile */
@media (max-width: 768px){
  .zt-home-cat-count{ padding:4px 9px; font-size:10.5px; }
}
/* ==============================
   Categorías: mismo ALTO (sin tocar ancho)
================================ */

/* Alto fijo de la tarjeta + espacio fijo para el título */
.zt-home-main-cats{
  --zt-cat-card-h: 126px;  /* ajustá si querés más/menos alto */
  --zt-cat-name-h: 34px;   /* espacio reservado para 1-2 líneas */
}

/* La card */
.zt-home-main-cats .zt-home-cat-pill{
  min-height: var(--zt-cat-card-h);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 10px; /* mantené tu padding si ya lo tenías */
}

/* Icono: área estable */
.zt-home-main-cats .zt-home-cat-pill .zt-home-cat-icon{
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Título: alto fijo + clamp 2 líneas */
.zt-home-main-cats .zt-home-cat-pill .zt-home-cat-name{
  width: 100%;
  text-align: center;
  min-height: var(--zt-cat-name-h);
  line-height: 1.1;
  margin-top: 8px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* ============================================================
   HOME — Botón flotante Canal mayorista (desktop + mobile PRO)
============================================================ */
.zt-home-whatsapp-float{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 99999;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  min-height: 56px;
  max-width: calc(100vw - 24px);
  padding: 0 16px 0 12px;

  border-radius: 999px;
  text-decoration: none ;

  background: linear-gradient(135deg, #25D366 0%, #1ebe5d 100%);
  color: #fff ;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);

  font-weight: 900;
  font-size: 14px;
  letter-spacing: .1px;
  line-height: 1;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(.96);

  transition:
    opacity .22s ease,
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease,
    visibility .22s ease;
}

.zt-home-whatsapp-float.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.zt-home-whatsapp-float:hover{
  color: #fff ;
  box-shadow: 0 18px 38px rgba(0,0,0,.25);
  filter: brightness(1.02);
}

.zt-home-whatsapp-float:focus{
  outline: none;
  color: #fff ;
  box-shadow:
    0 18px 38px rgba(0,0,0,.25),
    0 0 0 3px rgba(37,211,102,.20);
}

.zt-home-whatsapp-float:active{
  transform: translateY(1px) scale(.985);
}

.zt-home-whatsapp-float__icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.16);
  flex: 0 0 auto;
}

.zt-home-whatsapp-float__icon i{
  font-size: 18px;
  line-height: 1;
}

.zt-home-whatsapp-float__text{
  display: inline-block;
  line-height: 1.1;
  white-space: nowrap;
}

.zt-home-whatsapp-float.is-pulse{
  animation: ztHomeWhatsappPulse .65s ease;
}

@keyframes ztHomeWhatsappPulse{
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(0) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

/* Desktop grande */
@media (min-width: 1280px){
  .zt-home-whatsapp-float{
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* Tablet */
@media (max-width: 991px){
  .zt-home-whatsapp-float{
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    min-height: 54px;
    padding: 0 15px 0 11px;
    font-size: 13px;
  }

  .zt-home-whatsapp-float__icon{
    width: 33px;
    height: 33px;
  }

  .zt-home-whatsapp-float__icon i{
    font-size: 17px;
  }
}

/* Celular */
@media (max-width: 767px){
  .zt-home-whatsapp-float{
    right: 12px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    min-height: 50px;
    max-width: calc(100vw - 20px);
    padding: 0 14px 0 10px;
    gap: 8px;
    font-size: 13px;
    box-shadow: 0 12px 26px rgba(0,0,0,.22);
  }

  .zt-home-whatsapp-float__icon{
    width: 32px;
    height: 32px;
  }

  .zt-home-whatsapp-float__icon i{
    font-size: 17px;
  }

  .zt-home-whatsapp-float__text{
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Celular chico */
@media (max-width: 430px){
  .zt-home-whatsapp-float{
    right: 10px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    min-height: 48px;
    padding: 0 12px 0 9px;
    font-size: 12px;
    gap: 7px;
  }

  .zt-home-whatsapp-float__icon{
    width: 30px;
    height: 30px;
  }

  .zt-home-whatsapp-float__icon i{
    font-size: 16px;
  }

  .zt-home-whatsapp-float__text{
    max-width: 125px;
  }
}
.zt-child-cats-strip.zt-grid-cat-icons {
  padding-right: 40px ; /* deja ver el siguiente */
}
.zt-child-cats-strip a {
  transition: transform .12s ease, box-shadow .12s ease;
}

.zt-child-cats-strip a:active {
  transform: scale(0.92);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.zt-child-cats-strip .zt-cat-icon-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}




/* ============================================================
   ZT — Imagen card: carrito + badges ordenados estilo ML
   - NUEVO arriba izquierda
   - ÚLTIMAS medio derecha
   - Carrito + abajo derecha
============================================================ */

/* Contexto general */
.zt-product-thumb,
.zt-thumb-inner {
  position: relative;
}

.zt-product-thumb {
  display: block;
}

.zt-product-thumb .zt-thumb-link {
  display: block;
  text-decoration: none;
}

/* ============================================================
   BADGES SOBRE IMAGEN
============================================================ */

.zt-product-badges {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

/* Badges generales: NUEVO / OFERTA / MÁS VENDIDO */
.zt-product-badges .zt-badge {
  pointer-events: none;
}

/* NUEVO y otros badges quedan arriba izquierda */
.zt-product-badges .zt-badge:not(.zt-badge-stock) {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 7;
}

/* ÚLTIMAS al medio derecha, más chico */
.zt-product-badges .zt-badge-stock {
  position: absolute ;
  top: 50% ;
  right: 7px ;
  transform: translateY(-50%) ;

  z-index: 7;
  margin: 0 ;

  display: inline-flex ;
  align-items: center;
  justify-content: center;

  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;

  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;

  box-shadow: 0 2px 6px rgba(0,0,0,.14);
}


/* ============================================================
   ZT — Badges card ordenados
   Desktop: compactos
   Mobile: ocultar OFERTA HOY / MÁS VENDIDO
============================================================ */

/* Reset fuerte para evitar badges gigantes */
.zt-product-badges .zt-badge {
  width: auto ;
  height: auto ;
  min-width: 0 ;
  max-width: calc(100% - 16px) ;
  min-height: 20px ;

  padding: 0 9px ;
  border-radius: 999px ;

  display: inline-flex ;
  align-items: center ;
  justify-content: center ;

  font-size: 10px ;
  font-weight: 900 ;
  line-height: 1 ;
  white-space: nowrap ;

  transform: none ;
  box-shadow: 0 2px 6px rgba(0,0,0,.14) ;
}

/* Badges generales arriba izquierda */
.zt-product-badges .zt-badge:not(.zt-badge-stock) {
  position: absolute ;
  top: 8px ;
  left: 8px ;
  right: auto ;
  bottom: auto ;
  z-index: 7 ;
}

/* ÚLTIMAS queda al medio derecha */
.zt-product-badges .zt-badge-stock {
  position: absolute ;
  top: 50% ;
  right: 7px ;
  left: auto ;
  bottom: auto ;
  transform: translateY(-50%) ;

  min-height: 20px ;
  padding: 0 8px ;
  font-size: 9px ;
  z-index: 7 ;
}

/* ============================================================
   Mobile: ocultar badges de marketing para no cargar la card
============================================================ */

@media (max-width: 768px) {

  /* Ocultamos oferta / más vendido en mobile */
  .zt-product-badges .zt-badge-sale,
  .zt-product-badges .zt-badge-offer,
  .zt-product-badges .zt-badge-oferta,
  .zt-product-badges .zt-badge-best,
  .zt-product-badges .zt-badge-bestseller,
  .zt-product-badges .zt-badge-top,
  .zt-product-badges .zt-badge-top-seller {
    display: none ;
  }

  /* Badge nuevo compacto */
  .zt-product-badges .zt-badge:not(.zt-badge-stock) {
    top: 7px ;
    left: 7px ;

    min-height: 18px ;
    padding: 0 7px ;
    font-size: 8.5px ;
  }

  /* Últimas más chico */
  .zt-product-badges .zt-badge-stock {
    right: 6px ;

    min-height: 18px ;
    padding: 0 7px ;
    font-size: 8.5px ;
  }
}
/* ============================================================
   ZT — FORZAR CARRITO SOBRE IMAGEN EN TODAS LAS VISTAS
============================================================ */

/* El contenedor de imagen debe ser relativo */
.zt-products-grid .zt-product-item .zt-product-thumb {
  position: relative ;
  display: block ;
  overflow: visible ;
}

/* El link de la imagen queda debajo del botón */
.zt-products-grid .zt-product-item .zt-product-thumb .zt-thumb-link {
  position: relative ;
  z-index: 1 ;
  display: block ;
}

/* ============================================================
   ZT — Ajuste tamaño imagen en cards
   Imagen más grande, limpia y sin recortar producto
============================================================ */

/* Contenedor de imagen */
.zt-product-item .zt-product-thumb {
  width: 100%;
}

/* Caja interna de imagen */
.zt-product-item .zt-thumb-inner {
  width: 100%;
  height: 250px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

/* Imagen producto */
.zt-product-item .zt-thumb-inner img {
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  padding: 0 ;
  margin: 0 ;

  transform: scale(1.08);
  transform-origin: center;
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .zt-product-item .zt-thumb-inner {
    height: 215px;
  }

  .zt-product-item .zt-thumb-inner img {
    transform: scale(1.07);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .zt-product-item .zt-thumb-inner {
    height: 175px;
  }

  .zt-product-item .zt-thumb-inner img {
    padding: 0 ;
    transform: scale(1.08);
  }
}

/* Precio lista tachado */
.zt-card-list-price {
  font-size: 10px ;
  color: #777 ;
  font-weight: 700 ;
}

.zt-card-list-price del {
  color: #777 ;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: #999;
}

/* ============================================================
   LOOP CARDS — USD + Transferir + Compra Ya en un solo módulo
   (celular, tablet y escritorio)
============================================================ */

/* 1) Ocultar el precio desktop viejo en todas las vistas */
.zt-product-item .zt-product-price.zt-price-desktop,
.zt-product-item .zt-product-price.zt-price-desktop.zt-price-usd{
  display: none ;
}

/* 2) Módulo completo */
.zt-product-item .zt-card-actions{
  display: flex ;
  flex-direction: column ;
  align-items: stretch ;
  justify-content: flex-start ;
  gap: 0 ;

  width: 100% ;
  max-width: 100% ;
  margin: 10px 0 0 ;
  padding: 0 0 10px ;
  box-sizing: border-box ;

  background: #fffdf7 ;
  border: 1px solid #f0cf57 ;
  border-radius: 14px ;
  overflow: hidden ;

  min-height: 0 ;
  height: auto ;
}

/* 3) USD arriba, dentro del mismo módulo */
.zt-product-item .zt-card-actions .zt-price-row-mobile{
  order: 1 ;

  display: flex ;
  align-items: center ;
  justify-content: center ;

  width: 100% ;
  margin: 0 ;
  padding: 12px 12px 10px ;
  box-sizing: border-box ;

  background: transparent ;
  border: 0 ;
  border-bottom: 1px solid rgba(240, 207, 87, .65) ;
  border-radius: 0 ;

  text-align: center ;
  min-height: 0 ;
}

/* 4) Precio real */
.zt-product-item .zt-card-actions .zt-product-price.zt-price-mobile{
  order: 1 ;

  display: inline-flex ;
  align-items: center ;
  justify-content: center ;
  gap: 6px ;

  width: auto ;
  min-width: 0 ;
  max-width: none ;

  margin: 0 ;
  padding: 0 ;

  background: transparent ;
  border: 0 ;
  box-shadow: none ;

  text-align: center ;
  line-height: 1.1 ;
  white-space: nowrap ;
}

/* 5) Prefijo USD */
.zt-product-item .zt-card-actions .zt-product-price.zt-price-mobile::before{
  content: "USD";
  display: inline-block;
  margin-right: 4px;

  font-size: 13px;
  font-weight: 900;
  color: #00A650;
  letter-spacing: .2px;
}

/* 6) Monto */
.zt-product-item .zt-card-actions .woocommerce-Price-amount,
.zt-product-item .zt-card-actions .amount,
.zt-product-item .zt-card-actions bdi{
  font-size: 18px ;
  font-weight: 900 ;
  line-height: 1.1 ;
  color: #111 ;
}

/* 7) Transferir + Compra Ya abajo */
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas{
  order: 2 ;

  width: 100% ;
  max-width: 100% ;
  margin: 0 ;
  padding: 8px 10px 0 ;
  box-sizing: border-box ;

  background: transparent ;
  border: 0 ;
  box-shadow: none ;
  border-radius: 0 ;

  display: block ;
}

/* 8) Texto de transferir prolijo */
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line{
  display: block ;
  margin: 0 ;
  padding: 0 ;
  line-height: 1.25 ;
  text-align: center ;
}

/* 9) Botón compra ya */
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-buy-now-btn{
  margin-top: 8px ;
}

/* ============================================================
   TABLET
============================================================ */
@media (min-width: 769px) and (max-width: 1024px){
  .zt-product-item .zt-card-actions{
    margin-top: 10px ;
    padding-bottom: 10px ;
    border-radius: 14px ;
  }

  .zt-product-item .zt-card-actions .zt-price-row-mobile{
    padding: 11px 12px 9px ;
  }

  .zt-product-item .zt-card-actions .woocommerce-Price-amount,
  .zt-product-item .zt-card-actions .amount,
  .zt-product-item .zt-card-actions bdi{
    font-size: 18px ;
  }
}

/* ============================================================
   MOBILE
============================================================ */
@media (max-width: 768px){
  .zt-product-item .zt-card-actions{
    margin-top: 8px ;
    padding-bottom: 8px ;
    border-radius: 12px ;
  }

  .zt-product-item .zt-card-actions .zt-price-row-mobile{
    padding: 10px 12px 8px ;
  }

  .zt-product-item .zt-card-actions .zt-product-price.zt-price-mobile::before{
    font-size: 12px;
  }

  .zt-product-item .zt-card-actions .woocommerce-Price-amount,
  .zt-product-item .zt-card-actions .amount,
  .zt-product-item .zt-card-actions bdi{
    font-size: 17px ;
  }

  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas{
    padding: 6px 10px 0 ;
  }

  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-buy-now-btn{
    margin-top: 6px ;
  }
}
/* ============================================================
   AJUSTE FINAL — sin línea divisoria + Transferir más protagonista
============================================================ */

/* Sacar la línea divisoria entre USD y Transferir */
.zt-product-item .zt-card-actions .zt-price-row-mobile{
  border-bottom: 0 ;
  padding-bottom: 6px ;
}

/* Ajustar un poco el aire entre USD y Transferir */
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas{
  padding-top: 2px ;
}

/* Hacer más grande y protagonista la línea de Transferir */
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line{
  font-size: 22px ;
  font-weight: 900 ;
  line-height: 1.15 ;
  text-align: center ;
  color: #0057c8 ;
  letter-spacing: -.2px;
}

/* Darle más protagonismo al monto en pesos */
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line strong,
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line b,
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line .amount,
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line bdi{
  font-size: 24px ;
  font-weight: 900 ;
  color: #0057c8 ;
}

/* Botón apenas más cerca del precio de transferencia */
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-buy-now-btn{
  margin-top: 6px ;
}

/* ============================================================
   MOBILE — bajar apenas para que no quede exagerado
============================================================ */
@media (max-width: 768px){
  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line{
    font-size: 18px ;
  }

  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line strong,
  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line b,
  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line .amount,
  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line bdi{
    font-size: 20px ;
  }
}
/* ============================================================
   AJUSTE FINAL — Transferir más protagonista
============================================================ */

/* Quitar línea divisoria entre USD y Transferir */
.zt-product-item .zt-card-actions .zt-price-row-mobile{
  border-bottom: 0 ;
  padding-bottom: 4px ;
}

/* Menos espacio arriba del bloque de transferencia */
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas{
  padding-top: 0 ;
}

/* USD un poco más secundario */
.zt-product-item .zt-card-actions .zt-product-price.zt-price-mobile::before{
  font-size: 12px ;
  opacity: .95;
}

.zt-product-item .zt-card-actions .woocommerce-Price-amount,
.zt-product-item .zt-card-actions .amount,
.zt-product-item .zt-card-actions bdi{
  font-size: 17px ;
  font-weight: 900 ;
}

/* Transferir más protagonista */
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line{
  display: block ;
  margin: 0 ;
  padding: 0 ;

  font-size: 17px ;
  font-weight: 900 ;
  line-height: 1.1 ;
  text-align: center ;
  color: #0057c8 ;
  letter-spacing: -.2px;
}

/* Monto en pesos todavía más fuerte */
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line strong,
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line b,
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line .amount,
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line bdi{
  font-size: 19px ;
  font-weight: 900 ;
  color: #0057c8 ;
}

/* Botón un poco más cerca */
.zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-buy-now-btn{
  margin-top: 5px ;
}

/* ============================================================
   DESKTOP / TABLET — un poquito más fuerte
============================================================ */
@media (min-width: 769px){
  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line{
    font-size: 18px ;
  }

  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line strong,
  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line b,
  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line .amount,
  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line bdi{
    font-size: 21px ;
  }
}

/* ============================================================
   MOBILE — mantenerlo fuerte pero equilibrado
============================================================ */
@media (max-width: 768px){
  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line{
    font-size: 16px ;
  }

  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line strong,
  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line b,
  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line .amount,
  .zt-product-item .zt-card-actions .zt-cuotas-box.zt-auto-cuotas .zt-cuota-line bdi{
    font-size: 18px ;
  }
}

/* ============================================================
   SINGLE PRODUCT — Sliders visuales de categorías con iconos
============================================================ */
.zt-sp-cat-nav {
    width: 95%;
    max-width: 1000px;
    margin: 14px auto 0;
}

.zt-cat-archive-nav {
    width: 100%;
    max-width: none;
    margin: 12px 0 18px;
}

.zt-sp-cat-nav-inner {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    padding: 10px 12px 12px;
    overflow: hidden;
}

.zt-sp-cat-back {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 12px;
    margin: 0 0 8px;
    border-radius: 999px;
    background: #fff159;
    color: #111;
    border: 1px solid rgba(0,0,0,.08);
    text-decoration: none;
    box-shadow: 0 2px 7px rgba(0,0,0,.10);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.zt-sp-cat-back:hover {
    background: #ffe600;
    color: #111;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0,0,0,.15);
}

.zt-sp-cat-back-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,.7);
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

.zt-sp-cat-back-text {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.zt-sp-cat-back small {
    max-width: 170px;
    color: rgba(0,0,0,.68);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zt-sp-cat-nav-row + .zt-sp-cat-nav-row {
    margin-top: 9px;
}

.zt-sp-cat-nav-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 6px;
}

.zt-sp-cat-nav-title {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f5f5f5;
    color: #222;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.zt-sp-cat-nav-arrows {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.zt-sp-cat-arrow {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #ff4081;
    background: #fff;
    color: #ff4081;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, opacity .15s ease, transform .15s ease;
}

.zt-sp-cat-arrow:hover:not(:disabled) {
    background: #ff4081;
    color: #fff;
    transform: translateY(-1px);
}

.zt-sp-cat-arrow:disabled {
    opacity: .28;
    cursor: default;
}

.zt-sp-cat-slider-outer {
    position: relative;
    overflow: hidden;
}

.zt-sp-cat-slider {
    display: flex;
    align-items: stretch;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 1px 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.zt-sp-cat-slider::-webkit-scrollbar {
    display: none;
}

.zt-sp-cat-card {
    flex: 0 0 auto;
    width: 88px;
    min-height: 106px;
    padding: 6px 5px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    color: #111;
    text-decoration: none;
    text-align: center;
    scroll-snap-align: start;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.zt-sp-cat-card:hover {
    color: #111;
    transform: translateY(-2px);
    border-color: rgba(255,64,129,.55);
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.zt-sp-cat-card.is-active {
    border-color: #ff4081;
    box-shadow: 0 5px 16px rgba(255,64,129,.20);
}

.zt-sp-cat-img {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(116, 16, 171, .18);
}

.zt-sp-cat-img img {
    display: block;
    width: 88%;
    height: 88%;
    object-fit: contain;
}

.zt-sp-cat-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
    text-shadow: 0 2px 7px rgba(0,0,0,.30);
}

.zt-sp-cat-name {
    width: 100%;
    color: #1f1f1f;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: .015em;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zt-sp-cat-nav + .zt-sp-container {
    margin-top: 18px;
}

.zt-cat-archive-nav + .woocommerce-notices-wrapper,
.zt-cat-archive-nav + .zt-shop-loopbar {
    margin-top: 14px;
}

@media (min-width: 1024px) {
    .zt-sp-cat-nav-inner {
        padding: 12px 14px 14px;
    }

    .zt-sp-cat-card {
        width: 96px;
        min-height: 112px;
    }

    .zt-sp-cat-img {
        width: 72px;
        height: 72px;
    }

    .zt-sp-cat-name {
        font-size: 10.5px;
    }
}

@media (max-width: 600px) {
    .zt-sp-cat-nav {
        width: calc(100% - 18px);
        margin-top: 10px;
    }

    .zt-cat-archive-nav {
        width: 100%;
        margin: 10px 0 16px;
    }

    .zt-sp-cat-nav-inner {
        border-radius: 14px;
        padding: 9px 9px 10px;
    }

    .zt-sp-cat-back {
        min-height: 32px;
        padding: 6px 10px;
        margin-bottom: 7px;
    }

    .zt-sp-cat-back small {
        max-width: 135px;
    }

    .zt-sp-cat-nav-title {
        max-width: calc(100vw - 130px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
    }

    .zt-sp-cat-card {
        width: 82px;
        min-height: 101px;
        border-radius: 12px;
    }

    .zt-sp-cat-img {
        width: 64px;
        height: 64px;
    }

    .zt-sp-cat-name {
        font-size: 9.5px;
    }

    .zt-sp-cat-nav + .zt-sp-container {
        margin-top: 14px;
    }
}

/* ============================================================
   SEARCH RESULTS — Navegación inteligente por categorías
============================================================ */
.zt-search-cat-nav {
    margin-top: 14px;
}

.zt-sp-cat-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}

.zt-sp-cat-actions .zt-sp-cat-back {
    margin: 0;
}

.zt-sp-cat-smart-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: #ffffff;
    color: #222;
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 2px 7px rgba(0,0,0,.07);
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.zt-sp-cat-smart-link:hover {
    color: #111;
    background: #fffdf0;
    border-color: rgba(255, 209, 0, .75);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0,0,0,.12);
}

.zt-sp-cat-smart-link-primary {
    background: #1f1f1f;
    color: #ffffff;
    border-color: #1f1f1f;
}

.zt-sp-cat-smart-link-primary:hover {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}

.zt-search-cat-nav .zt-sp-cat-nav-row-search .zt-sp-cat-nav-title {
    background: #fff7cc;
}

@media (max-width: 600px) {
    .zt-sp-cat-actions {
        gap: 6px;
        margin-bottom: 7px;
    }

    .zt-sp-cat-smart-link {
        min-height: 32px;
        padding: 6px 10px;
        font-size: 10.5px;
    }
}

}