.elementor-56619 .elementor-element.elementor-element-2641597{padding:0px 16px 80px 16px;}.elementor-56619 .elementor-element.elementor-element-ce5366e > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-56619 .elementor-element.elementor-element-b8aeb3d{padding:0px 16px 40px 16px;}.elementor-56619 .elementor-element.elementor-element-af15e5f > .elementor-element-populated{padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-56619 .elementor-element.elementor-element-2641597{padding:0px 16px 60px 16px;}.elementor-56619 .elementor-element.elementor-element-b8aeb3d{padding:0px 16px 30px 16px;}}@media(max-width:767px){.elementor-56619 .elementor-element.elementor-element-2641597{padding:0px 10px 40px 10px;}.elementor-56619 .elementor-element.elementor-element-b8aeb3d{padding:0px 10px 30px 10px;}}/* Start custom CSS for shortcode, class: .elementor-element-c736085 *//* ===== 1. VARIABLES Y RESET ===== */

.cj-catalogo { 
    --cj-orange: #ff611a;
    --cj-black: #111;
    --cj-white: #fff;
    --cj-dark: #222;
    --cj-gray-light: #f6f4f4;
    
    position: relative;
    font-family: "WorkSans", sans-serif; 
    background: transparent; 
    padding: 20px 2px; 
    box-sizing: border-box; 
}

.cj-catalogo *, .cj-catalogo *::before, .cj-catalogo *::after {
    box-sizing: border-box;
}






/* ===== 2. FILTROS Y BOTÓN TOGGLE ===== */

/* Botón Toggle (Oculto en escritorio) */
.cj-cat-toggle {
    display: none;
    width: 100%;
    padding: 12px;
    background: var(--cj-black);
    color: var(--cj-white);
    border: none;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 15px;
    text-align: center;
    font-size: 15px;
}
.cj-cat-toggle.active {
    background: var(--cj-orange);
}

.cj-filtros { 
    background: var(--cj-gray-light); 
    padding: 24px; 
    border-radius: 10px; 
    display:flex; 
    flex-wrap:wrap; 
    gap:12px; 
    justify-content:center; 
    margin-bottom:30px; 
    /* Transición suave para el alto */
    transition: max-height 0.3s ease-out, opacity 0.3s ease;
}
.cj-filtro-btn, a.cj-filtro-btn, .cj-filtros button { 
    border:2px solid #0f0f0f; 
    background:var(--cj-white); 
    padding:10px 20px; 
    border-radius:40px; 
    font-weight:700; 
    letter-spacing:.6px; 
    font-size:14px; 
    text-transform:uppercase; 
    color:var(--cj-black); 
    line-height: 1;
    text-decoration: none;
    display: inline-block;
    transition: all .28s ease;
}
.cj-filtro-btn:hover, a.cj-filtro-btn:hover { 
    background:var(--cj-black); 
    border-color:var(--cj-black);
    color:var(--cj-white); 
    box-shadow: 0 6px 18px rgba(51,51,51,.08); 
    transform: translateY(-1px); 
}
.cj-filtro-btn.activo { 
    background:var(--cj-orange); 
    border-color:var(--cj-orange); 
    color:var(--cj-white); 
    box-shadow: 0 6px 18px rgba(255,97,26,.12); 
    transform: translateY(-1px); 
}






/* ===== 3. GRID Y TARJETA ===== */

.cj-grid { 
    display:grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap:24px; 
    align-items:stretch; 
}

.cj-producto { 
    background:var(--cj-white); 
    border-radius:16px; 
    overflow:hidden; 
    box-shadow: 0 14px 30px rgba(16,16,16,.08); 
    border:1px solid #eee; 
    display:flex; 
    flex-direction:column; 
    transition:transform .28s ease, box-shadow .28s ease; 
}
.cj-producto:hover { 
    transform: translateY(-6px); 
    box-shadow: 0 22px 46px rgba(16,16,16,.12); 
}

.cj-producto-img { 
    position:relative; 
    padding-top:72%; 
    background:#fafafa; 
    overflow:hidden; 
}
.cj-producto-img img { 
    position:absolute; top:0; left:0; 
    width:100%; height:100%; 
    object-fit:cover; 
    transition:transform .5s ease; 
}
.cj-producto:hover .cj-producto-img img { 
    transform: scale(1.04); 
}

.cj-badge { 
    position:absolute; top:8px; left:8px; 
    padding:3px 16px; border-radius:20px; 
    font-size:12px; font-weight:800; color:var(--cj-white); z-index:3; 
    text-transform:uppercase; 
}
.cj-badge-agotado { 
    background:var(--cj-dark); 
    box-shadow: 0 6px 18px rgba(0,0,0,.18); 
}
.cj-badge-oferta { 
    background:var(--cj-orange); 
}

.cj-producto-info { 
    padding:12px 16px 20px; display:flex; 
    flex-direction:column; gap:4px; flex:1; 
}
.cj-producto-cat { 
    font-size:12px; color:var(--cj-orange); 
    font-weight:600; text-transform:uppercase; 
    letter-spacing:1px; 
}
/* Bloque corregido para el título */
.cj-producto-titulo { 
    font-size:16px; 
    margin:0 0 6px 0; 
    color:var(--cj-black); 
    line-height:1.2; 
}
/* Aumentamos la prioridad apuntando al contenedor y al enlace */
.cj-catalogo .cj-producto-titulo a {
    font-size: 18px !important;
    font-weight:600;
    letter-spacing: -0.2px;
    color: inherit !important;
}
.cj-producto-titulo a { color:inherit; text-decoration:none; }
.cj-producto-desc { 
    font-size:13px; color:#777; 
    line-height:1.45; margin:0; 
}

.cj-precio-wrap { 
    display:flex; align-items:center; 
    gap:12px; margin-top:0; 
}
.cj-precio { 
    color:var(--cj-orange); font-weight:900; 
    font-size:24px;
    padding-bottom: 12px;
}
.cj-precio-old { 
    color:#999; font-size:16px; 
    text-decoration:line-through; 
}

.cj-acciones { 
    display:flex; gap:12px; margin-top:auto; 
    align-items:center; 
}
.cj-btn, .cj-acciones form button { 
    border-radius:20px; 
    padding:8px 16px; 
    font-weight:700; 
    font-size:14px; cursor:pointer; 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    gap:8px; line-height: 1;
}
.cj-btn-cart, .cj-acciones form button.cj-btn-cart { 
    background:var(--cj-orange); 
    color:var(--cj-white); 
    border:2px solid var(--cj-orange); 
    box-shadow: 0 6px 18px rgba(255,97,26,.12); 
}
.cj-btn-cart{
    transition: transform 0.2s ease, color 0.2s ease;
}
.cj-btn-cart:hover, .cj-acciones form button.cj-btn-cart:hover { 
    transform:translateY(-2px); 
}
.cj-btn-ver { 
    background:var(--cj-white); 
    border:2px solid var(--cj-black); 
    color:var(--cj-black);
    transition: background 0.2s ease, color 0.2s ease;
}
.cj-btn-ver:hover { 
    background:var(--cj-black); color:var(--cj-white); 
}
.cj-btn-disabled { 
    background:#e7e7e7; color:#7a7a7a; border:0; 
    padding:10px 14px; border-radius:10px; 
}






/* ===== 4. CARRITO FLOTANTE ===== */

.cj-carrito-float { 
    position: fixed; 
    bottom: 18px; 
    right: 18px; 
    left: auto;
    z-index: 500 !important;
    
    /* Dimensiones */
    width: 300px;
    max-width: 90vw;
    padding: 20px;
    
    /* Estética contenedor */
    border-radius: 16px; 
    background: var(--cj-black); 
    color: var(--cj-white); 
    box-shadow: 0 12px 40px rgba(0,0,0,.35); 
    z-index: 99999; 
    
    /* LAYOUT PRINCIPAL: Vertical (Info arriba, Botones abajo) */
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

/* --- FILA SUPERIOR: Icono (Izquierda) y Precio (Derecha) --- */
.cj-carrito-info { 
    display: flex;
    flex-direction: row; /* Horizontal */
    justify-content: space-between; /* Empuja extremos */
    align-items: center;
    width: 100%;
}

.cj-carrito-icono { 
    position: relative; 
    font-size: 24px; /* Tamaño del icono de carrito */
    color: #fff; /* Icono blanco */
    display: flex;
    align-items: center;
    /* Se usa 'color' para iconos de fuente o SVG fill */
    fill: #fff; 
}

/* Badge Naranja (Contador) */
.cj-carrito-count { 
    position: absolute; 
    top: -8px; 
    right: -10px;
    background: var(--cj-orange); 
    color: var(--cj-white); 
    min-width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 800; 
    font-size: 11px;
    padding: 0 4px;
    border: 2px solid var(--cj-black); /* Pequeño borde para separar del icono */
}

/* Precio Total (Derecha Superior) */
.cj-carrito-total {
    font-size: 22px; 
    font-weight: 900; /* Extra bold */
    color: var(--cj-white);
    line-height: 1;
    text-align: right;
}

/* --- FILA INFERIOR: Botones Apilados --- */
.cj-carrito-btns { 
    display: flex;
    flex-direction: column; 
    gap: 12px; /* Espacio entre botones */
    width: 100%;
}

/* Estilo Base de Botones */
.cj-btn-checkout { 
    width: 100%;
    padding: 8px 10px;
    border-radius: 50px; /* Pill shape (muy redondeado) */
    font-weight: 600; 
    font-size: 16px;
    text-align: center;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 0.2s ease;
}

/* Botón "Ver carrito" (Blanco) */
.cj-btn-checkout.secondary {
    background: var(--cj-white); 
    color: var(--cj-black); 
    border: none;
}

/* Botón "Tramitar pedido" (Naranja) */
.cj-btn-checkout.primary {
    background: var(--cj-orange);
    color: var(--cj-white);
    border: none;
}

.cj-btn-checkout:hover {
    transform: scale(1.02);
    opacity: 0.95;
}




/* Ajuste Móvil */

@media (max-width: 600px) {
    .cj-carrito-float {
        left: 12px; 
        right: 12px; 
        bottom: 12px;
        width: auto;
        padding: 18px 16px;
        gap: 10px; /* Menos espacio entre la fila de arriba y los botones */
    }

    /* Icono más pequeño */
    .cj-carrito-icono {
        font-size: 20px; 
    }

    /* Precio más pequeño */
    .cj-carrito-total {
        font-size: 20px; 
    }

    /* Botones más compactos */
    .cj-btn-checkout {
        padding: 8px 10px;
        font-size: 14px;   /* Texto un poco más pequeño */
    }

    /* Menos espacio entre los dos botones */
    .cj-carrito-btns {
        gap: 8px;
    }
}






/* ===== 5. RESPONSIVE ===== */


@media (max-width: 1024px) { .cj-grid { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 767px) { 
    .cj-grid { grid-template-columns: repeat(2, 1fr); gap:20px; } 
    .cj-filtros { padding:14px; }
    
    .cj-catalogo {
        padding-bottom: 160px !important;
    }
}


/* --- MÓVIL --- */

@media (max-width: 460px) {

    /* Grid de productos a 1 columna */
    .cj-grid { grid-template-columns: 1fr; gap:40px;} 

    /* Carrito flotante en móvil */
    .cj-carrito-float { 
        left:12px; right:12px; bottom:12px; 
        width:auto; max-width: 100%; 
    } 
}

@media (max-width:600px) { 
    /* Mostrar botón toggle */
    .cj-cat-toggle { display: block; }

    /* ESTILO BASE (CERRADO) */
    .cj-filtros {
        /* Eliminamos display: none para permitir animación */
        display: flex; 
        flex-direction: column;
        align-items: stretch;
        background: transparent;
        overflow: hidden; /* Oculta el contenido que exceda la altura */
        
        /* ESTADO INICIAL: Altura 0 y oculto */
        max-height: 0;
        opacity: 0;
        padding: 0;
        margin: 0;
        border: 0;
        
        /* TRANSICIÓN: Anima la altura, opacidad y padding */
        transition: all 0.4s ease-in-out;
    }
    
    /* ESTILO ABIERTO (CLASE .open) */
    .cj-filtros.open {
        /* Altura suficiente para mostrar todo el contenido */
        max-height: 1000px; 
        opacity: 1;
        
        /* Restauramos espaciado y bordes */
        padding: 0; 
        margin-bottom: 30px;
        border: 1px solid #eee;
    }

    /* Estilo de botones en móvil */
    .cj-filtro-btn, a.cj-filtro-btn {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 0;
    }
}/* End custom CSS */