/*
 * UPSEX
 * Paginador profesional para resultados de búsqueda.
 *
 * Alcance:
 * - Solamente product/search.
 * - Solamente tablet y PC.
 */

@media screen and (min-width:768px){

    /*
     * Contenedor.
     */

    html body.product-search
    #content ul.pagination{
        display:inline-flex!important;
        float:none!important;
        flex-wrap:wrap!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:7px!important;

        width:auto!important;
        max-width:100%!important;

        margin:0!important;
        padding:0!important;

        list-style:none!important;
        vertical-align:middle!important;
    }

    html body.product-search
    #content ul.pagination::before,
    html body.product-search
    #content ul.pagination::after{
        display:none!important;
        content:none!important;
    }

    /*
     * Cada elemento.
     */

    html body.product-search
    #content ul.pagination > li{
        display:block!important;
        float:none!important;

        margin:0!important;
        padding:0!important;

        list-style:none!important;
    }

    /*
     * Botones normales.
     */

    html body.product-search
    #content ul.pagination > li > a,
    html body.product-search
    #content ul.pagination > li > span{
        position:relative!important;

        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;

        box-sizing:border-box!important;

        min-width:40px!important;
        width:auto!important;
        height:40px!important;

        margin:0!important;
        padding:0 11px!important;

        border:
            1px solid
            rgba(184,138,0,.25)!important;

        border-radius:11px!important;

        background:
            linear-gradient(
                145deg,
                #fffefa 0%,
                #fff8e9 100%
            )!important;

        box-shadow:
            0 4px 12px rgba(67,48,39,.07),
            inset 0 1px 0 rgba(255,255,255,.95)!important;

        color:#594a45!important;

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

        font-size:13px!important;
        font-weight:800!important;
        line-height:1!important;
        text-align:center!important;
        text-decoration:none!important;

        transition:
            background .16s ease,
            border-color .16s ease,
            color .16s ease,
            box-shadow .16s ease,
            transform .16s ease!important;
    }

    /*
     * Hover y teclado.
     */

    html body.product-search
    #content ul.pagination > li > a:hover,
    html body.product-search
    #content ul.pagination > li > a:focus{
        border-color:#b88a00!important;

        background:
            linear-gradient(
                145deg,
                #c99a1c 0%,
                #a87500 100%
            )!important;

        box-shadow:
            0 7px 17px rgba(151,105,0,.22),
            inset 0 1px 0 rgba(255,255,255,.22)!important;

        color:#ffffff!important;

        outline:0!important;
        text-decoration:none!important;

        transform:translateY(-1px)!important;
    }

    html body.product-search
    #content ul.pagination > li > a:active{
        transform:translateY(0)!important;
    }

    html body.product-search
    #content ul.pagination > li > a:focus-visible{
        outline:
            3px solid
            rgba(184,138,0,.22)!important;

        outline-offset:2px!important;
    }

    /*
     * Página activa.
     * Anula definitivamente el azul de --link-hover-color.
     */

    html body.product-search
    #content ul.pagination > li.active > span,
    html body.product-search
    #content ul.pagination > li.active > a,
    html body.product-search
    #content ul.pagination > li.active > span:hover,
    html body.product-search
    #content ul.pagination > li.active > span:focus,
    html body.product-search
    #content ul.pagination > li.active > a:hover,
    html body.product-search
    #content ul.pagination > li.active > a:focus{
        border-color:#493b36!important;

        background:
            linear-gradient(
                145deg,
                #594942 0%,
                #352a27 100%
            )!important;

        box-shadow:
            0 7px 17px rgba(45,33,29,.20),
            inset 0 1px 0 rgba(255,255,255,.13)!important;

        color:#fffaf0!important;

        cursor:default!important;
        transform:none!important;
    }

    /*
     * Primera, anterior, siguiente y última.
     */

    html body.product-search
    #content ul.pagination
    .upsex-pagination-nav-v1{
        width:40px!important;
        min-width:40px!important;
        padding:0!important;

        color:#6a5148!important;
    }

    html body.product-search
    #content ul.pagination
    .upsex-pagination-svg-v1{
        display:block!important;

        width:17px!important;
        height:17px!important;

        margin:0!important;

        fill:none!important;
        stroke:currentColor!important;
        stroke-width:2!important;
        stroke-linecap:round!important;
        stroke-linejoin:round!important;

        pointer-events:none!important;
    }

    /*
     * Estado deshabilitado, por si aparece.
     */

    html body.product-search
    #content ul.pagination > li.disabled > a,
    html body.product-search
    #content ul.pagination > li.disabled > span{
        border-color:rgba(99,79,70,.12)!important;
        background:#f4f0e9!important;
        box-shadow:none!important;
        color:#aaa09b!important;
        cursor:not-allowed!important;
        opacity:.70!important;
        transform:none!important;
    }

    /*
     * Evita que Bootstrap vuelva circulares
     * el primer y último elemento.
     */

    html body.product-search
    #content ul.pagination > li:first-child > a,
    html body.product-search
    #content ul.pagination > li:first-child > span,
    html body.product-search
    #content ul.pagination > li:last-child > a,
    html body.product-search
    #content ul.pagination > li:last-child > span{
        border-radius:11px!important;
    }
}