/* ============================================
   QJ_SELLOS_DISTRIBUCION_V8
   Grupo máximo 90% de ancho
   ============================================ */

/* Contenedor exterior */
.single-product .qj-producto-sellos {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    overflow: hidden !important;
}

/* Área destinada a los sellos */
.single-product .qj-producto-sellos .qj-producto-sellos-lista {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    width: 90% !important;
    max-width: 90% !important;
    min-width: 0 !important;
    height: auto !important;

    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Base de cada sello */
.single-product .qj-producto-sellos
.qj-producto-sellos-lista > .qj-producto-sello {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;

    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Imágenes completas, sin deformación */
.single-product .qj-producto-sellos
.qj-producto-sellos-lista > .qj-producto-sello img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: left center !important;
    aspect-ratio: auto !important;

    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    clip-path: none !important;
}

/* ============================================
   1 SELLO
   Grande, en la parte izquierda
   ============================================ */

.single-product .qj-producto-sellos-lista
> .qj-producto-sello:only-child {
    width: 90% !important;
    max-width: 90% !important;
    flex: 0 0 90% !important;
}

/* ============================================
   2 SELLOS
   En lista vertical
   ============================================ */

.single-product .qj-producto-sellos-lista:has(
    > .qj-producto-sello:nth-child(2):last-child
) {
    flex-direction: column !important;
    align-items: flex-start !important;
}

.single-product .qj-producto-sellos-lista:has(
    > .qj-producto-sello:nth-child(2):last-child
) > .qj-producto-sello {
    width: 90% !important;
    max-width: 90% !important;
    flex: 0 0 auto !important;
}

/* ============================================
   3 O MÁS SELLOS
   Horizontal, máximo 3 por fila
   ============================================ */

.single-product .qj-producto-sellos-lista:has(
    > .qj-producto-sello:nth-child(3)
) {
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

.single-product .qj-producto-sellos-lista:has(
    > .qj-producto-sello:nth-child(3)
) > .qj-producto-sello {
    width: calc((100% - 24px) / 3) !important;
    max-width: calc((100% - 24px) / 3) !important;
    flex: 0 0 calc((100% - 24px) / 3) !important;
}

/* ============================================
   MÓVILES
   ============================================ */

@media (max-width: 600px) {

    .single-product .qj-producto-sellos {
        padding: 12px !important;
    }

    .single-product .qj-producto-sellos .qj-producto-sellos-lista {
        width: 90% !important;
        max-width: 90% !important;
        gap: 10px !important;
    }

    /* Con 3 o más, mostrar 2 por fila */
    .single-product .qj-producto-sellos-lista:has(
        > .qj-producto-sello:nth-child(3)
    ) > .qj-producto-sello {
        width: calc((100% - 10px) / 2) !important;
        max-width: calc((100% - 10px) / 2) !important;
        flex: 0 0 calc((100% - 10px) / 2) !important;
    }
}

/* QJ_SELLOS_ESPACIADO_V10_INICIO */

/* Separación equilibrada entre reconocimientos */
.single-product .qj-producto-sellos
.qj-producto-sellos-lista {
    column-gap: 8px !important;
    row-gap: 8px !important;
}

/* Ajustar tres sellos por fila al nuevo espacio */
.single-product .qj-producto-sellos-lista:has(
    > .qj-producto-sello:nth-child(3)
) > .qj-producto-sello {
    flex: 0 0 calc((100% - 16px) / 3) !important;
    width: calc((100% - 16px) / 3) !important;
    max-width: calc((100% - 16px) / 3) !important;
}

@media (max-width: 600px) {
    .single-product .qj-producto-sellos
    .qj-producto-sellos-lista {
        column-gap: 6px !important;
        row-gap: 6px !important;
    }

    .single-product .qj-producto-sellos-lista:has(
        > .qj-producto-sello:nth-child(3)
    ) > .qj-producto-sello {
        flex: 0 0 calc((100% - 6px) / 2) !important;
        width: calc((100% - 6px) / 2) !important;
        max-width: calc((100% - 6px) / 2) !important;
    }
}

/* QJ_SELLOS_ESPACIADO_V10_FIN */

/* QJ_SELLOS_COMPACTOS_V11_INICIO */

/* Lista compacta sin espacios verticales innecesarios */
.single-product .qj-producto-sellos .qj-producto-sellos-lista {
    row-gap: 4px !important;
    column-gap: 6px !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Evita que cada sello reserve una altura adicional */
.single-product .qj-producto-sellos
.qj-producto-sellos-lista > .qj-producto-sello {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    align-self: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
}

/* Mantiene las dimensiones naturales de la imagen */
.single-product .qj-producto-sellos
.qj-producto-sellos-lista > .qj-producto-sello img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Dos sellos: verticales y próximos */
.single-product .qj-producto-sellos-lista:has(
    > .qj-producto-sello:nth-child(2):last-child
) {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 4px !important;
}

/* Ajustar filas de tres o más al espaciado reducido */
.single-product .qj-producto-sellos-lista:has(
    > .qj-producto-sello:nth-child(3)
) > .qj-producto-sello {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    width: calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
}

@media (max-width: 600px) {
    .single-product .qj-producto-sellos-lista:has(
        > .qj-producto-sello:nth-child(3)
    ) > .qj-producto-sello {
        flex: 0 0 calc((100% - 6px) / 2) !important;
        width: calc((100% - 6px) / 2) !important;
        max-width: calc((100% - 6px) / 2) !important;
    }
}

/* QJ_SELLOS_COMPACTOS_V11_FIN */

/* QJ_SELLOS_BLANCO_COMPACTO_V12_INICIO */

/* Fondo blanco y sin bordes */
body.single-product .qj-producto-sellos {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    background-image: none !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    padding: 8px 12px !important;
}

/* Título más próximo a las imágenes */
body.single-product .qj-producto-sellos
.qj-producto-sellos-titulo {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
}

/* Eliminar espacio adicional encima de los sellos */
body.single-product .qj-producto-sellos
.qj-producto-sellos-lista {
    margin-top: 0 !important;
    padding-top: 0 !important;
    row-gap: 4px !important;
}

/* Mantener las imágenes completas y proporcionales */
body.single-product .qj-producto-sellos
.qj-producto-sellos-lista .qj-producto-sello img {
    object-fit: contain !important;
    height: auto !important;
    max-width: 100% !important;
}

/* QJ_SELLOS_BLANCO_COMPACTO_V12_FIN */

/* QJ_SELLOS_TITULO_COMPACTO_V13_INICIO */

/* Acercar el sello al título */
body.single-product .qj-producto-sellos .qj-producto-sellos-titulo {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.15 !important;
}

/* Eliminar separación superior de las imágenes */
body.single-product .qj-producto-sellos .qj-producto-sellos-lista {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* QJ_SELLOS_TITULO_COMPACTO_V13_FIN */