/**
 * Name: Dainty Blue Pagination (Nuclear CSS Override)
 * Function: Forces visibility and styles dainty blue numbers.
 */

/* 1. SMASH THE THEME HIDE RULES */
/* This forces the container to show and have height regardless of other snippets */
html body #primary .woocommerce-pagination, 
html body #content .woocommerce-pagination,
.site-main .woocommerce-pagination {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    text-align: center !important;
    padding: 30px 0 !important;
    clear: both !important;
}

/* 2. DAINTY BLUE STYLE (Numbers Only) */
.woocommerce-pagination ul {
    border: none !important;
    display: inline-flex !important;
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 25px !important; /* Clean, professional spacing */
}

.woocommerce-pagination ul li {
    border: none !important;
    margin: 0 !important;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    background: transparent !important; /* Removes all bulky boxes */
    border: none !important;
    color: #1a0f2e !important; /* Midnight Blue per request */
    font-weight: 700 !important;
    font-size: 1.25rem !important; /* Professional, dainty scaling */
    text-decoration: none !important;
    padding: 0 !important;
}

/* 3. ACTIVE PAGE INDICATOR */
/* Simple underline for the current page in blue */
.woocommerce-pagination ul li span.current {
    text-decoration: underline !important;
    text-underline-offset: 8px !important;
    color: #1a0f2e !important;
}

/* 4. HIDE THE REDUNDANT BAR */
/* This kills the bottom sorting bar logic if the theme tries to show it */
.storefront-sorting {
    border: none !important;
    padding: 0 !important;
}