/* Listados de productos (categorias, busqueda y Nuevas Ofertas del inicio) - rediseño
   Todo está bajo #imgprod.kd-listado / .kd-banner / .kd-card para no afectar al resto del sitio
   y para ganarle en especificidad a las reglas de k.css (#cuerpo #row #imgprod #imgproductos ...). */

/* ---------- Paletas ----------
   Default (azul). Las paletas por categoría solo redefinen estas variables. */
.kd-banner,
.kd-card {
    --kd-banner-bg: linear-gradient(100deg, #2384f2 0%, #1262dc 45%, #0b4bc6 100%);
    --kd-banner-sombra: rgba(18, 98, 220, .28);

    --kd-acento: #1664d8;
    --kd-acento-hover: #0f4fb4;
    --kd-acento-sombra: rgba(22, 100, 216, .28);
    --kd-precio: #0d2c6e;
    --kd-titulo: #1f2a44;
    --kd-texto: #4a5568;
    --kd-card-borde: #e1e7f0;
    --kd-card-borde-hover: #b9cbe6;
}

/* Categoría 9 (Damas) y sus subcategorías */
.kd-banner.kd-tema-damas,
.kd-card.kd-tema-damas {
    --kd-banner-bg: linear-gradient(100deg, #f2577a 0%, #dc2249 35%, #c8143a 70%, #e33e64 100%);
    --kd-banner-sombra: rgba(200, 20, 58, .28);

    --kd-acento: #d42a4e;
    --kd-acento-hover: #b51f3f;
    --kd-acento-sombra: rgba(212, 42, 78, .28);
    --kd-precio: #c8102e;
    --kd-titulo: #2b2b3a;
    --kd-texto: #4d4d5c;
    --kd-card-borde: #efe1e5;
    --kd-card-borde-hover: #f0b9c7;
}

/* Categoría 10 (Chicos) y sus subcategorías */
.kd-banner.kd-tema-chicos,
.kd-card.kd-tema-chicos {
    --kd-banner-bg: linear-gradient(100deg, #93dba9 0%, #2aa59a 17%, #1b8496 50%, #2aa59a 83%, #a8dc72 100%);
    --kd-banner-sombra: rgba(27, 132, 150, .28);

    --kd-acento: #1d8c97;
    --kd-acento-hover: #15707a;
    --kd-acento-sombra: rgba(29, 140, 151, .28);
    --kd-precio: #163a5a;
    --kd-titulo: #1f3346;
    --kd-texto: #44586a;
    --kd-card-borde: #dbe9eb;
    --kd-card-borde-hover: #a9d6db;
}

/* ---------- Grilla ---------- */
#cuerpo #row #imgprod.kd-listado {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 10px 0;
    padding: 0 6px;
    box-sizing: border-box;
}

/* Banners y mensajes ("Aun no hay productos...") ocupan toda la fila */
#cuerpo #row #imgprod.kd-listado > .titulo,
#cuerpo #row #imgprod.kd-listado > p {
    grid-column: 1 / -1;
}

/* ---------- Banner de subcategoría ---------- */
#cuerpo #row .titulo.kd-banner {
    position: relative;
    overflow: hidden;
    margin: 18px 0 2px;
    padding: 18px 190px;
    border-radius: 12px;
    color: #fff;
    font-family: 'Poppins', Montserrat, Arial, sans-serif;
    font-weight: 700;
    font-size: 2.1rem;
    line-height: 1.2;
    letter-spacing: .3px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .18);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='64' viewBox='0 0 230 64' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg fill='white' stroke='none' opacity='.85'%3E%3Ccircle cx='8' cy='14' r='2.6'/%3E%3Ccircle cx='22' cy='14' r='2.6'/%3E%3Ccircle cx='36' cy='14' r='2.6'/%3E%3Ccircle cx='50' cy='14' r='2.6'/%3E%3Ccircle cx='8' cy='28' r='2.6'/%3E%3Ccircle cx='22' cy='28' r='2.6'/%3E%3Ccircle cx='36' cy='28' r='2.6'/%3E%3Ccircle cx='50' cy='28' r='2.6'/%3E%3Ccircle cx='8' cy='42' r='2.6'/%3E%3Ccircle cx='22' cy='42' r='2.6'/%3E%3Ccircle cx='36' cy='42' r='2.6'/%3E%3Ccircle cx='50' cy='42' r='2.6'/%3E%3C/g%3E%3Cg opacity='.9' stroke-width='3'%3E%3Ccircle cx='118' cy='34' r='13'/%3E%3Cpath d='M168 36v18M159 45h18'/%3E%3Cpath d='M70 52c10-4 18-14 22-26' stroke-width='2' stroke-dasharray='4 5'/%3E%3C/g%3E%3Cpath d='M205 8l8 8-8 8-8-8z' stroke-width='2.5' opacity='.9'/%3E%3C/svg%3E") left 18px center / auto 62% no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='64' viewBox='0 0 230 64' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg opacity='.9' stroke-width='3.5'%3E%3Cpath d='M10 54L38 12M26 54L54 12M42 54L70 12'/%3E%3C/g%3E%3Cg opacity='.9' stroke-width='3'%3E%3Ccircle cx='130' cy='30' r='13'/%3E%3C/g%3E%3Cpath d='M170 40l8 8-8 8-8-8z' stroke-width='2.5' opacity='.9'/%3E%3Cg fill='white' stroke='none' opacity='.8'%3E%3Ccircle cx='200' cy='12' r='2.4'/%3E%3Ccircle cx='212' cy='18' r='2'/%3E%3Ccircle cx='222' cy='10' r='2.4'/%3E%3Ccircle cx='204' cy='26' r='2'/%3E%3Ccircle cx='218' cy='30' r='2.4'/%3E%3Ccircle cx='226' cy='22' r='1.8'/%3E%3Ccircle cx='210' cy='38' r='1.8'/%3E%3C/g%3E%3C/svg%3E") right 18px center / auto 62% no-repeat,
        var(--kd-banner-bg);
    box-shadow: 0 4px 14px var(--kd-banner-sombra);
}

#cuerpo #row #imgprod.kd-listado > .titulo.kd-banner:first-child {
    margin-top: 0;
}

/* ---------- Tarjeta de producto ---------- */
#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card {
    display: flex;
    flex-direction: column;
    position: relative;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 10px 10px 12px;
    background: #fff;
    border: 1px solid var(--kd-card-borde);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .06);
    box-sizing: border-box;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card:hover {
    border-color: var(--kd-card-borde-hover);
    box-shadow: 0 8px 20px rgba(16, 24, 40, .10);
    transform: translateY(-2px);
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .divimg {
    height: auto;
    width: 100%;
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .carousel-container {
    width: 100%;
    margin: 0 auto;
    box-shadow: none;
    border-radius: 8px;
}

/* Descripción */
#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .div-desc {
    height: auto;
    margin-top: 10px;
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .div-desc a {
    display: block;
    color: var(--kd-titulo) !important;
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .div-desc br {
    display: none;
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .div-desc .p-desc {
    float: none;
    margin: 0;
    padding: 0 4px;
    color: var(--kd-titulo);
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Precio */
#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .div-prec {
    position: static;
    height: auto;
    width: 100%;
    margin-top: auto;
    padding-top: 10px;
    text-align: center;
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .div-prec > a {
    display: block;
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .price-alt {
    margin: 0 !important;
    color: var(--kd-texto);
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .div-prec .p-prec {
    height: auto;
    margin: 2px 0 10px;
    color: var(--kd-precio);
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
}

/* Sin precio visible (servicio de precios apagado): el PHP deja un p-prec vacío */
#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .div-prec .p-prec[style],
#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .div-prec .p-prec:empty {
    display: none;
}

/* Botón "Ver producto" / "Ver más" */
#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .product-actions {
    margin: 0 !important;
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .vermas {
    position: static !important;
    float: none;
    display: block;
    width: 100%;
    margin: 0 !important;
    color: #fff;
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .div-prec + .vermas {
    margin-top: 10px !important;
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .vermas div {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 6px;
    border-radius: 6px;
    background: var(--kd-acento);
    color: #fff;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 3px 8px var(--kd-acento-sombra);
    transition: background .2s ease;
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .vermas div::before {
    content: "\f07a";
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 10px;
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .vermas div:hover {
    background: var(--kd-acento-hover);
    color: #fff;
}

/* Carrito rápido (- cantidad +) para productos que no son ropa (usuarios logueados).
   Mismo ancho y alto que el botón "Ver producto"; fast-cart.js solo cambia el value del input. */
#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .qty-holder {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 41px;
    box-sizing: border-box;
    border: 2px solid var(--kd-acento);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 3px 8px var(--kd-acento-sombra);
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .qty-dec-btn,
#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .qty-inc-btn {
    flex: 0 0 44px;
    width: 44px;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--kd-acento);
    color: #fff;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 37px;
    transition: background .2s ease;
}

#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .qty-dec-btn:hover,
#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .qty-dec-btn:focus,
#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .qty-inc-btn:hover,
#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .qty-inc-btn:focus {
    background: var(--kd-acento-hover);
    color: #fff;
}

/* Otra hoja fuerza el ancho de .qty-input con !important */
#cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .qty-input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: var(--kd-precio);
    -webkit-text-fill-color: var(--kd-precio);
    opacity: 1;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 950px) {
    #cuerpo #row #imgprod.kd-listado {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    #cuerpo #row .titulo.kd-banner {
        padding: 14px 100px;
        font-size: 1.6rem;
        background-size: auto 55%, auto 55%, auto;
        background-position: left -40px center, right -40px center, 0 0;
    }
}

@media screen and (max-width: 550px) {
    #cuerpo #row #imgprod.kd-listado {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 0 4px;
    }

    #cuerpo #row .titulo.kd-banner {
        margin-top: 12px;
        padding: 12px 46px;
        border-radius: 10px;
        font-size: 1.3rem;
        /* En celular la decoración completa no entra: solo puntos a la izquierda y barras a la derecha */
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='white' opacity='.85'%3E%3Ccircle cx='5' cy='5' r='2.4'/%3E%3Ccircle cx='15' cy='5' r='2.4'/%3E%3Ccircle cx='25' cy='5' r='2.4'/%3E%3Ccircle cx='5' cy='15' r='2.4'/%3E%3Ccircle cx='15' cy='15' r='2.4'/%3E%3Ccircle cx='25' cy='15' r='2.4'/%3E%3Ccircle cx='5' cy='25' r='2.4'/%3E%3Ccircle cx='15' cy='25' r='2.4'/%3E%3Ccircle cx='25' cy='25' r='2.4'/%3E%3C/svg%3E") left 10px center / 26px 26px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' opacity='.9'%3E%3Cpath d='M3 27L13 3M11 27L21 3M19 27L29 3'/%3E%3C/svg%3E") right 10px center / 26px 26px no-repeat,
            var(--kd-banner-bg);
    }

    #cuerpo #row #imgprod.kd-listado #imgproductos.kd-card {
        padding: 6px 6px 8px;
        border-radius: 8px;
    }

    #cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .div-desc .p-desc {
        font-size: 13px;
    }

    #cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .price-alt {
        font-size: 11px;
    }

    #cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .div-prec .p-prec {
        font-size: 20px;
        margin-bottom: 8px;
    }

    #cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .vermas div {
        padding: 9px 4px;
        font-size: 13px;
    }

    #cuerpo #row #imgprod.kd-listado #imgproductos.kd-card .vermas div::before {
        margin-right: 6px;
    }
}