/* =======================================================
   1. REGLA GLOBAL: OCULTAR PRODUCTOS AGOTADOS 
   (Aplica para PC y Móvil)
   ======================================================= */
.theme-product-item:has(.theme-out-of-stock-overlay),
.product-item:has(.theme-out-of-stock-overlay),
[data-zs-product-id]:has(.theme-out-of-stock-overlay) {
    display: none !important;
}


/* ******************************************************* */
/* 2. VISTA MÓVIL (Catálogo estilo iHerb + Header Limpio)  */
/* ******************************************************* */

@media screen and (max-width: 768px) {
    
    /* --- CATÁLOGO: Contenedor Principal --- */
    .theme-product-box-inner {
        display: flex !important; 
        flex-direction: column !important;
        justify-content: center !important; 
        position: relative !important; 
        padding: 5px 5px 5px 110px !important; 
        min-height: 120px !important; 
        border-bottom: 1px solid #e5e5e5 !important;
        margin: 0 !important;
    }

    /* --- CATÁLOGO: La Imagen --- */
    .theme-product-box-inner > .theme-prod-img {
        position: absolute !important;
        left: 10px !important; 
        top: 40% !important; 
        transform: translateY(-50%) !important; 
        width: 100px !important; 
        height: 120px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;    
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .theme-prod-img img {
        width: 100% !important;
        max-width: 100px !important; 
        aspect-ratio: 1 / 1 !important; 
        object-fit: contain !important; 
        margin: 0 auto !important;
        background-color: transparent !important;
    }

    /* --- CATÁLOGO: Neutralizar CSS de Zoho --- */
    .theme-prod-box-content,
    .theme-prod-name,
    .theme-prod-price,
    .theme-out-of-stock,
    .theme-ribbon {
        position: static !important; 
        float: none !important;
        text-align: left !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* --- CATÁLOGO: Etiqueta Agotado --- */
    .theme-product-box-inner .theme-out-of-stock,
    .theme-product-box-inner .theme-ribbon {
        display: inline-block !important;
        width: auto !important;
        margin-bottom: 4px !important; 
        white-space: nowrap !important;
    }

    /* --- CATÁLOGO: Título del Producto --- */
    html body .theme-prod-name a {
        font-size: 11px !important;
        line-height: 1.3 !important;
        font-weight: 400 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin-bottom: 4px !important; 
    }

    /* --- CATÁLOGO: Precio --- */
    .theme-prod-price {
        font-size: 15px !important;
        font-weight: 700 !important;
        display: block !important;
        padding: 0 !important;
    }

    /* --- CATÁLOGO: Enlace invisible --- */
    .theme-prod-link-overlay {
        position: absolute !important;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 10 !important;
    }

    /* --- ENCABEZADO: Reducir padding (Recuadro 1) --- */
    html body .theme-header,
    html body header[data-zs-header] {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    /* --- ENCABEZADO: Subir el buscador (Recuadro 2) --- */
    html body .theme-search-wrap,
    html body .theme-search,
    html body [data-zs-search] {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        padding-top: 0px !important;
    }

    /* --- CATÁLOGO: Ocultar TODOS los Títulos de Categorías --- */
    html body h1.theme-section-heading,
    html body h2.theme-section-heading,
    html body h1.theme-store-list-heading-temp-06,
    html body h2.theme-store-list-heading-temp-06,
    html body .theme-page-heading,
    html body .theme-heading,
    html body .theme-category-name,
    html body [data-zs-category-heading],
    html body .theme-category-description { /* <--- Añadido para eliminar el contenedor de la captura */
        display: none !important;
    }
  
  /* --- CATÁLOGO: Colapsar Espacios en Blanco de Categorías en Móvil --- */
    /* Apuntamos a la estructura específica que revelaron tus capturas */
    html body [data-theme-content-container="theme-content-container"] > div > div.theme-section {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        margin: 0px !important;
        min-height: 0px !important;
    }
    
    /* Mantenemos la orden de ocultar las columnas donde vivía la foto */
    html body .theme-category-col,
    html body .theme-category-col-left,
    html body .theme-category-col-right,
    html body .theme-category-image-container,
    html body .theme-category-image-col,
    html body .theme-category-description,
    html body .theme-category-row {
        display: none !important;
    }
  
  /* --- CATÁLOGO: Eliminar el espacio blanco gigante del contenedor principal --- */
    html body .theme-content-area,
    html body .theme-content-wrap,
    html body .theme-section,
    html body [data-zs-content-wrap],
    html body .theme-product-collection-container {
        padding-top: 0px !important;
        margin-top: 0px !important;
    }

    /* --- Controlar el tamaño del Logo en Móvil --- */
    html body .theme-logo img,
    html body [data-zs-logo] img {
        max-height: 35px !important; /* Logo compacto al 30% extra */
        margin: 0 auto !important; 
    }

} /* <--- FIN DE LA VISTA MÓVIL (Cierra el bloque @media screen max-width 768px) */


/* =======================================================
   3. REGLAS DE ESCRITORIO Y GLOBALES
   ======================================================= */

/* --- Ocultar el nombre en texto para evitar redundancia (Aplica a todo) --- */
html body .theme-site-name,
html body div[data-zs-sitename] {
    display: none !important; 
}

/* --- CATÁLOGO GLOBAL: Alinear cajas e imágenes responsivas --- */
.theme-prod-img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* Obliga a la CAJA a ser un cuadrado perfecto para que todos los textos inicien en la misma línea */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 15px !important; 
}

.theme-prod-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important; /* Anula la restricción de 100px en PC */
    object-fit: contain !important; 
    margin: 0 auto !important;
    background-color: transparent !important;
}

/* --- CATÁLOGO GLOBAL: Limitar Título del Producto a 3 líneas (PC y Móvil) --- */
html body .theme-prod-name a {
    font-size: 14px !important; /* Un tamaño legible para escritorio */
    line-height: 1.3 !important;
    font-weight: 400 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Aquí está la magia que acorta el texto */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 4px !important; 
}

/* --- Controlar el tamaño del Logo en Escritorio (PC) --- */
@media screen and (min-width: 769px) {
    html body .theme-logo img,
    html body [data-zs-logo] img {
        height: auto !important; 
        max-height: 90px !important; /* Ajusta este valor a tu gusto para PC */
        width: auto !important;
        max-width: 100% !important;
    }
  
}