/* =========================================================
   SJ MUSIC CUSTOM
   SHOP / PRODUCT ARCHIVE
   VERSIÓN LIMPIA
   ========================================================= */


/* =========================================================
   01. CONTENEDOR PRINCIPAL
   ========================================================= */

body.post-type-archive-product #primary,
body.tax-product_cat #primary,
body.tax-product_tag #primary {
    width: 100%;
}

body.post-type-archive-product .content-area,
body.tax-product_cat .content-area,
body.tax-product_tag .content-area {
    width: 100%;
}


/* =========================================================
   02. CONTENEDOR WOOCOMMERCE
   ========================================================= */

body.post-type-archive-product .woocommerce,
body.tax-product_cat .woocommerce,
body.tax-product_tag .woocommerce {
    width: min(1280px, calc(100% - 64px));

    margin: 0 auto;

    padding: 35px 0 80px;

    box-sizing: border-box;
}


/* =========================================================
   03. BREADCRUMB
   ========================================================= */

body.post-type-archive-product .woocommerce-breadcrumb,
body.tax-product_cat .woocommerce-breadcrumb,
body.tax-product_tag .woocommerce-breadcrumb {
    margin: 0 0 28px;

    padding: 0;

    font-family: Arial, sans-serif;

    font-size: 12px;

    line-height: 1.5;

    color: #777;
}

body.post-type-archive-product .woocommerce-breadcrumb a,
body.tax-product_cat .woocommerce-breadcrumb a,
body.tax-product_tag .woocommerce-breadcrumb a {
    color: #777;

    text-decoration: none;
}

body.post-type-archive-product .woocommerce-breadcrumb a:hover,
body.tax-product_cat .woocommerce-breadcrumb a:hover,
body.tax-product_tag .woocommerce-breadcrumb a:hover {
    color: #111;
}


/* =========================================================
   04. CABECERA DE PRODUCTOS
   ========================================================= */

body.post-type-archive-product .woocommerce-products-header,
body.tax-product_cat .woocommerce-products-header,
body.tax-product_tag .woocommerce-products-header {
    margin: 0 0 28px;

    padding: 0;

    text-align: center;
}

body.post-type-archive-product .woocommerce-products-header__title,
body.tax-product_cat .woocommerce-products-header__title,
body.tax-product_tag .woocommerce-products-header__title {
    margin: 0;

    padding: 0;

    font-family: Arial, sans-serif;

    font-size: clamp(30px, 3vw, 42px);

    font-weight: 700;

    line-height: 1.12;

    letter-spacing: -1px;

    color: #111;
}


/* =========================================================
   05. DESCRIPCIÓN DE CATEGORÍA
   ========================================================= */

body.tax-product_cat .term-description,
body.tax-product_tag .term-description {
    max-width: 720px;

    margin: 15px auto 0;

    font-family: Arial, sans-serif;

    font-size: 13px;

    line-height: 1.7;

    color: #666;
}

body.tax-product_cat .term-description p,
body.tax-product_tag .term-description p {
    margin: 0;
}


/* =========================================================
   06. BARRA DE HERRAMIENTAS
   ========================================================= */

body.post-type-archive-product .woocommerce-result-count,
body.tax-product_cat .woocommerce-result-count,
body.tax-product_tag .woocommerce-result-count {
    float: none;

    margin: 0;

    padding: 0;

    font-family: Arial, sans-serif;

    font-size: 12px;

    line-height: 42px;

    color: #777;
}


body.post-type-archive-product .woocommerce-ordering,
body.tax-product_cat .woocommerce-ordering,
body.tax-product_tag .woocommerce-ordering {
    float: none;

    margin: 0;
}


/*
   Creamos una alineación limpia usando
   el bloque que WooCommerce ya genera.
*/

body.post-type-archive-product form.woocommerce-ordering,
body.tax-product_cat form.woocommerce-ordering,
body.tax-product_tag form.woocommerce-ordering {
    display: flex;

    align-items: center;

    justify-content: flex-end;
}


/* =========================================================
   07. SELECT DE ORDEN
   ========================================================= */

body.post-type-archive-product .woocommerce-ordering select,
body.tax-product_cat .woocommerce-ordering select,
body.tax-product_tag .woocommerce-ordering select {
    width: auto;

    min-width: 185px;

    height: 42px;

    margin: 0;

    padding: 0 38px 0 14px;

    box-sizing: border-box;

    font-family: Arial, sans-serif;

    font-size: 12px;

    font-weight: 400;

    color: #333;

    background-color: #fff;

    border: 1px solid #ddd;

    border-radius: 7px;

    outline: none;

    cursor: pointer;

    box-shadow: none;
}

body.post-type-archive-product .woocommerce-ordering select:focus,
body.tax-product_cat .woocommerce-ordering select:focus,
body.tax-product_tag .woocommerce-ordering select:focus {
    border-color: #999;
}


/* =========================================================
   08. GRID
   ========================================================= */

body.post-type-archive-product ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    column-gap: 22px !important;

    row-gap: 42px !important;

    width: 100% !important;

    margin: 32px 0 0 !important;

    padding: 0 !important;

    box-sizing: border-box;

    list-style: none !important;

    float: none !important;
}


/*
   Eliminamos pseudo-elementos
   heredados de WooCommerce/tema.
*/

body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after,
body.tax-product_cat ul.products::before,
body.tax-product_cat ul.products::after,
body.tax-product_tag ul.products::before,
body.tax-product_tag ul.products::after {
    display: none !important;

    content: none !important;
}


/* =========================================================
   09. TARJETA
   ========================================================= */

body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product {
    position: relative;

    display: flex !important;

    flex-direction: column !important;

    width: auto !important;

    max-width: none !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;

    text-align: left !important;
}


/* =========================================================
   10. ENLACE DEL PRODUCTO
   ========================================================= */

body.post-type-archive-product ul.products li.product > a.woocommerce-LoopProduct-link,
body.tax-product_cat ul.products li.product > a.woocommerce-LoopProduct-link,
body.tax-product_tag ul.products li.product > a.woocommerce-LoopProduct-link {
    display: block;

    width: 100%;

    margin: 0;

    padding: 0;

    text-decoration: none;

    color: inherit;
}


/* =========================================================
   11. ÁREA DE IMAGEN
   ========================================================= */

body.post-type-archive-product ul.products li.product > a.woocommerce-LoopProduct-link,
body.tax-product_cat ul.products li.product > a.woocommerce-LoopProduct-link,
body.tax-product_tag ul.products li.product > a.woocommerce-LoopProduct-link {
    position: relative;
}


/* =========================================================
   12. IMAGEN
   ========================================================= */

body.post-type-archive-product ul.products li.product img,
body.tax-product_cat ul.products li.product img,
body.tax-product_tag ul.products li.product img {
    display: block !important;

    width: 100% !important;

    height: 260px !important;

    max-width: 100% !important;

    margin: 0 0 18px !important;

    padding: 20px !important;

    box-sizing: border-box !important;

    object-fit: contain !important;

    border-radius: 12px !important;

    border: 0 !important;

    box-shadow: none;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


body.post-type-archive-product ul.products li.product:hover img,
body.tax-product_cat ul.products li.product:hover img,
body.tax-product_tag ul.products li.product:hover img {
    transform: translateY(-3px);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .07);
}


/* =========================================================
   13. ETIQUETA OFERTA
   ========================================================= */

body.post-type-archive-product ul.products li.product .onsale,
body.tax-product_cat ul.products li.product .onsale,
body.tax-product_tag ul.products li.product .onsale {
    position: absolute;

    top: 12px;

    left: 12px;

    right: auto;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    width: auto;

    min-width: 0;

    min-height: 0;

    margin: 0;

    padding: 6px 9px;

    box-sizing: border-box;

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: 700;

    line-height: 1;

    color: #fff;

    background: #111;

    border-radius: 5px;

    transform: none;
}


/* =========================================================
   14. NOMBRE
   ========================================================= */

body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
body.tax-product_tag ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;

    min-height: 42px;

    margin: 0 0 8px !important;

    padding: 0 !important;

    font-family: Arial, sans-serif !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    line-height: 1.45 !important;

    color: #111 !important;

    text-align: left !important;
}


/* =========================================================
   15. PRECIO
   ========================================================= */

body.post-type-archive-product ul.products li.product .price,
body.tax-product_cat ul.products li.product .price,
body.tax-product_tag ul.products li.product .price {
    display: flex !important;

    align-items: baseline;

    flex-wrap: wrap;

    gap: 7px;

    min-height: 22px;

    margin: 0 0 15px !important;

    padding: 0 !important;

    font-family: Arial, sans-serif !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    line-height: 1.4 !important;

    color: #111 !important;
}


body.post-type-archive-product ul.products li.product .price del,
body.tax-product_cat ul.products li.product .price del,
body.tax-product_tag ul.products li.product .price del {
    margin: 0;

    font-size: 12px;

    font-weight: 400;

    color: #999;
}


body.post-type-archive-product ul.products li.product .price ins,
body.tax-product_cat ul.products li.product .price ins,
body.tax-product_tag ul.products li.product .price ins {
    margin: 0;

    text-decoration: none;

    color: #111;
}


/* =========================================================
   16. BOTÓN
   ========================================================= */

body.post-type-archive-product ul.products li.product a.add_to_cart_button,
body.post-type-archive-product ul.products li.product a.button,
body.tax-product_cat ul.products li.product a.add_to_cart_button,
body.tax-product_cat ul.products li.product a.button,
body.tax-product_tag ul.products li.product a.add_to_cart_button,
body.tax-product_tag ul.products li.product a.button {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    min-height: 44px !important;

    margin: auto 0 0 !important;

    padding: 0 15px !important;

    box-sizing: border-box !important;

    font-family: Arial, sans-serif !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    line-height: 1.2 !important;

    text-align: center !important;

    color: #fff !important;

    background: #111 !important;

    border: 0 !important;

    border-radius: 7px !important;

    text-decoration: none !important;

    box-shadow: none !important;

    transition:
        background .2s ease,
        transform .2s ease;
}


body.post-type-archive-product ul.products li.product a.add_to_cart_button:hover,
body.post-type-archive-product ul.products li.product a.button:hover,
body.tax-product_cat ul.products li.product a.add_to_cart_button:hover,
body.tax-product_cat ul.products li.product a.button:hover,
body.tax-product_tag ul.products li.product a.add_to_cart_button:hover,
body.tax-product_tag ul.products li.product a.button:hover {
    color: #fff !important;

    background: #333 !important;

    transform: translateY(-1px);
}


/* =========================================================
   17. ESTADO "AÑADIENDO..."
   ========================================================= */

body.post-type-archive-product ul.products li.product a.add_to_cart_button.loading,
body.tax-product_cat ul.products li.product a.add_to_cart_button.loading,
body.tax-product_tag ul.products li.product a.add_to_cart_button.loading {
    opacity: .7;

    pointer-events: none;
}


/* =========================================================
   18. PAGINACIÓN
   ========================================================= */

body.post-type-archive-product .woocommerce-pagination,
body.tax-product_cat .woocommerce-pagination,
body.tax-product_tag .woocommerce-pagination {

    clear: both;

    width: 100%;

    margin: 60px 0 20px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   CONTENEDOR
   ========================================================= */

body.post-type-archive-product .woocommerce-pagination ul.page-numbers,
body.tax-product_cat .woocommerce-pagination ul.page-numbers,
body.tax-product_tag .woocommerce-pagination ul.page-numbers {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin: 0;

    padding: 0;

    border: 0;

    list-style: none;

}


/* =========================================================
   ELEMENTOS
   ========================================================= */

body.post-type-archive-product .woocommerce-pagination ul.page-numbers li,
body.tax-product_cat .woocommerce-pagination ul.page-numbers li,
body.tax-product_tag .woocommerce-pagination ul.page-numbers li {

    display: block;

    margin: 0;

    padding: 0;

    border: 0;

    list-style: none;

}


/* =========================================================
   NÚMEROS
   ========================================================= */

body.post-type-archive-product .woocommerce-pagination .page-numbers,
body.tax-product_cat .woocommerce-pagination .page-numbers,
body.tax-product_tag .woocommerce-pagination .page-numbers {

    

    height: 42px;

    margin: 0;

    box-sizing: border-box;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-family: inherit;

    font-weight: 500;

    line-height: 1;

    color: #333;

    background: #fff;

    border: 1px solid #dedede;

    border-radius: 7px;

    text-decoration: none;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


/* =========================================================
   HOVER
   ========================================================= */

body.post-type-archive-product .woocommerce-pagination .page-numbers:hover,
body.tax-product_cat .woocommerce-pagination .page-numbers:hover,
body.tax-product_tag .woocommerce-pagination .page-numbers:hover {

    color: #111;

    background: #f7f7f7;

    border-color: #bcbcbc;

    text-decoration: none;

    transform: translateY(-1px);

}


/* =========================================================
   PÁGINA ACTIVA
   ========================================================= */

body.post-type-archive-product .woocommerce-pagination .page-numbers.current,
body.tax-product_cat .woocommerce-pagination .page-numbers.current,
body.tax-product_tag .woocommerce-pagination .page-numbers.current {

    color: #fff;

    background: #111;

    border-color: #111;

    font-weight: 600;

    cursor: default;

}


/* =========================================================
   HOVER PÁGINA ACTIVA
   ========================================================= */

body.post-type-archive-product .woocommerce-pagination .page-numbers.current:hover,
body.tax-product_cat .woocommerce-pagination .page-numbers.current:hover,
body.tax-product_tag .woocommerce-pagination .page-numbers.current:hover {

    color: #fff;

    background: #111;

    border-color: #111;

    transform: none;

}


/* =========================================================
   ANTERIOR / SIGUIENTE
   ========================================================= */

body.post-type-archive-product .woocommerce-pagination .page-numbers.prev,
body.post-type-archive-product .woocommerce-pagination .page-numbers.next,
body.tax-product_cat .woocommerce-pagination .page-numbers.prev,
body.tax-product_cat .woocommerce-pagination .page-numbers.next,
body.tax-product_tag .woocommerce-pagination .page-numbers.prev,
body.tax-product_tag .woocommerce-pagination .page-numbers.next {

    width: auto;

    min-width: 42px;

    padding: 0 15px;

    font-size: 12px;

    font-weight: 600;

}


/* =========================================================
   SEPARADOR / ELLIPSIS
   ========================================================= */

body.post-type-archive-product .woocommerce-pagination .page-numbers.dots,
body.tax-product_cat .woocommerce-pagination .page-numbers.dots,
body.tax-product_tag .woocommerce-pagination .page-numbers.dots {

    width: 30px;

    min-width: 30px;

    border: 0;

    background: transparent;

    color: #777;

    cursor: default;

}


/* =========================================================
   HOVER ELLIPSIS
   ========================================================= */

body.post-type-archive-product .woocommerce-pagination .page-numbers.dots:hover,
body.tax-product_cat .woocommerce-pagination .page-numbers.dots:hover,
body.tax-product_tag .woocommerce-pagination .page-numbers.dots:hover {

    background: transparent;

    border-color: transparent;

    color: #777;

    transform: none;

}


/* =========================================================
   18.1 PAGINACIÓN — MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    body.post-type-archive-product .woocommerce-pagination,
    body.tax-product_cat .woocommerce-pagination,
    body.tax-product_tag .woocommerce-pagination {

        margin-top: 45px;

        margin-bottom: 10px;

        padding: 0 5px;

    }


    body.post-type-archive-product .woocommerce-pagination ul.page-numbers,
    body.tax-product_cat .woocommerce-pagination ul.page-numbers,
    body.tax-product_tag .woocommerce-pagination ul.page-numbers {

        gap: 6px;

        flex-wrap: wrap;

    }


    body.post-type-archive-product .woocommerce-pagination .page-numbers,
    body.tax-product_cat .woocommerce-pagination .page-numbers,
    body.tax-product_tag .woocommerce-pagination .page-numbers {

        width: 40px;

        height: 40px;

        font-size: 12px;

    }


    body.post-type-archive-product .woocommerce-pagination .page-numbers.prev,
    body.post-type-archive-product .woocommerce-pagination .page-numbers.next,
    body.tax-product_cat .woocommerce-pagination .page-numbers.prev,
    body.tax-product_cat .woocommerce-pagination .page-numbers.next,
    body.tax-product_tag .woocommerce-pagination .page-numbers.prev,
    body.tax-product_tag .woocommerce-pagination .page-numbers.next {

        min-width: 40px;

        padding: 0 12px;

        font-size: 11px;

    }

}


/* =========================================================
   18.2 PAGINACIÓN — MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 390px) {

    body.post-type-archive-product .woocommerce-pagination ul.page-numbers,
    body.tax-product_cat .woocommerce-pagination ul.page-numbers,
    body.tax-product_tag .woocommerce-pagination ul.page-numbers {

        gap: 5px;

    }


    body.post-type-archive-product .woocommerce-pagination .page-numbers,
    body.tax-product_cat .woocommerce-pagination .page-numbers,
    body.tax-product_tag .woocommerce-pagination .page-numbers {

        width: 36px;

        height: 36px;

        font-size: 11px;

        border-radius: 6px;

    }


    body.post-type-archive-product .woocommerce-pagination .page-numbers.prev,
    body.post-type-archive-product .woocommerce-pagination .page-numbers.next,
    body.tax-product_cat .woocommerce-pagination .page-numbers.prev,
    body.tax-product_cat .woocommerce-pagination .page-numbers.next,
    body.tax-product_tag .woocommerce-pagination .page-numbers.prev,
    body.tax-product_tag .woocommerce-pagination .page-numbers.next {

        min-width: 36px;

        padding: 0 9px;

    }

}


/* =========================================================
   19. TABLET
   ========================================================= */

@media (max-width: 1050px) {

    body.post-type-archive-product .woocommerce,
    body.tax-product_cat .woocommerce,
    body.tax-product_tag .woocommerce {
        width: min(100% - 40px, 900px);
    }

    body.post-type-archive-product ul.products,
    body.tax-product_cat ul.products,
    body.tax-product_tag ul.products {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        column-gap: 18px !important;

        row-gap: 35px !important;
    }

    body.post-type-archive-product ul.products li.product img,
    body.tax-product_cat ul.products li.product img,
    body.tax-product_tag ul.products li.product img {
        height: 230px !important;
    }
}


/* =========================================================
   20. MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    body.post-type-archive-product .woocommerce,
    body.tax-product_cat .woocommerce,
    body.tax-product_tag .woocommerce {
        width: calc(100% - 24px);

        padding: 25px 0 55px;
    }


    body.post-type-archive-product .woocommerce-breadcrumb,
    body.tax-product_cat .woocommerce-breadcrumb,
    body.tax-product_tag .woocommerce-breadcrumb {
        margin-bottom: 20px;

        font-size: 11px;
    }


    body.post-type-archive-product .woocommerce-products-header,
    body.tax-product_cat .woocommerce-products-header,
    body.tax-product_tag .woocommerce-products-header {
        margin-bottom: 25px;
    }


    body.post-type-archive-product .woocommerce-products-header__title,
    body.tax-product_cat .woocommerce-products-header__title,
    body.tax-product_tag .woocommerce-products-header__title {
        font-size: 29px;

        letter-spacing: -.5px;
    }


    body.tax-product_cat .term-description,
    body.tax-product_tag .term-description {
        font-size: 12px;
    }


    body.post-type-archive-product .woocommerce-result-count,
    body.tax-product_cat .woocommerce-result-count,
    body.tax-product_tag .woocommerce-result-count {
        font-size: 11px;

        line-height: 38px;
    }


    body.post-type-archive-product .woocommerce-ordering select,
    body.tax-product_cat .woocommerce-ordering select,
    body.tax-product_tag .woocommerce-ordering select {
        min-width: 160px;

        height: 38px;

        font-size: 11px;
    }


    body.post-type-archive-product ul.products,
    body.tax-product_cat ul.products,
    body.tax-product_tag ul.products {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 12px !important;

        row-gap: 28px !important;

        margin-top: 22px !important;
    }


    body.post-type-archive-product ul.products li.product img,
    body.tax-product_cat ul.products li.product img,
    body.tax-product_tag ul.products li.product img {
        height: 175px !important;

        margin-bottom: 11px !important;

        padding: 12px !important;

        border-radius: 9px !important;
    }


    body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
    body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
    body.tax-product_tag ul.products li.product .woocommerce-loop-product__title {
        min-height: 38px;

        font-size: 12px !important;
    }


    body.post-type-archive-product ul.products li.product .price,
    body.tax-product_cat ul.products li.product .price,
    body.tax-product_tag ul.products li.product .price {
        margin-bottom: 11px !important;

        font-size: 12px !important;
    }


    body.post-type-archive-product ul.products li.product a.add_to_cart_button,
    body.post-type-archive-product ul.products li.product a.button,
    body.tax-product_cat ul.products li.product a.add_to_cart_button,
    body.tax-product_cat ul.products li.product a.button,
    body.tax-product_tag ul.products li.product a.add_to_cart_button,
    body.tax-product_tag ul.products li.product a.button {
        min-height: 40px !important;

        padding: 0 10px !important;

        font-size: 10px !important;
    }


    body.post-type-archive-product ul.products li.product .onsale,
    body.tax-product_cat ul.products li.product .onsale,
    body.tax-product_tag ul.products li.product .onsale {
        top: 8px;

        left: 8px;

        padding: 5px 7px;

        font-size: 9px;
    }


    body.post-type-archive-product .woocommerce-pagination,
    body.tax-product_cat .woocommerce-pagination,
    body.tax-product_tag .woocommerce-pagination {
        margin-top: 45px;
    }
}


/* =========================================================
   21. MÓVIL MUY PEQUEÑO
   ========================================================= */

@media (max-width: 390px) {

    body.post-type-archive-product .woocommerce,
    body.tax-product_cat .woocommerce,
    body.tax-product_tag .woocommerce {
        width: calc(100% - 18px);
    }


    body.post-type-archive-product ul.products,
    body.tax-product_cat ul.products,
    body.tax-product_tag ul.products {
        grid-template-columns: 1fr !important;
    }


    body.post-type-archive-product ul.products li.product img,
    body.tax-product_cat ul.products li.product img,
    body.tax-product_tag ul.products li.product img {
        height: 240px !important;
    }
}