/* ============================================
   PLP — minimal CSS, rest lives in each Impreza
   element's Design Options tab in the content
   template "TO Shop archive".
   ============================================ */

/* Mobile filter toggle — pre-existing UX */
.mobile-filters { display: none !important; }
@media (max-width: 1024px) {
    .mobile-filters { display: flex !important; cursor: pointer; background: #e9edef; padding: 15px; max-width: 100% !important; margin-bottom: 2rem; }
    .mobile-filters::after { content: '\f107'; font-family: FontAwesome; position: absolute; right: 20px; font-size: 20px; }
    .wc_sidebar > .wpb_wrapper { padding-top: 2rem; }
    .wc_sidebar .close-mobile-filters { position: absolute; top: 25px; right: 25px; font-size: 30px; color: #3d5663; cursor: pointer; }
}

/* Sidebar list color */
.wc_sidebar .product-categories a { color: var(--to-ink-soft); }

/* Product card images — keep the whole product visible with breathing room.
 * Applies to Impreza grids (layout_6936 and 2551) and WC fallback loops. */
.w-grid .w-grid-item .post_image {
    background: var(--to-bg-alt);
    border-radius: var(--to-radius-lg);
    overflow: hidden;
}
.w-grid .w-grid-item.type-product .post_image img {
    padding: 10%;
}
.w-grid .w-grid-item .post_image img {
    object-fit: contain !important;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
ul.products li.product .wp-post-image,
ul.products li.product img {
    aspect-ratio: 4/5;
    width: 100% !important;
    height: auto;
    object-fit: contain;
    padding: 12%;
    border-radius: var(--to-radius-lg);
    background: var(--to-bg-alt);
    margin-bottom: 14px !important;
    box-sizing: border-box;
}

/* ============================================
   Leeftijd filter — vertical pills
   Only applied to the pa_geschikte_leeftijd widget; JS adds .has-leeftijd-pills.
   ============================================ */
.widget_layered_nav.has-leeftijd-pills .widgettitle {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--to-font-body);
    color: var(--to-ink-muted);
    font-weight: 500;
    margin: 0 0 12px;
}
.widget_layered_nav.has-leeftijd-pills .woocommerce-widget-layered-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.widget_layered_nav.has-leeftijd-pills .woocommerce-widget-layered-nav-list__item {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.widget_layered_nav.has-leeftijd-pills .woocommerce-widget-layered-nav-list__item > a {
    display: block;
    padding: 10px 18px;
    border-radius: 100px;
    font-size: 14px;
    color: var(--to-ink-soft);
    font-weight: 400;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.widget_layered_nav.has-leeftijd-pills .woocommerce-widget-layered-nav-list__item > a:hover {
    background: var(--to-bg-alt);
    color: var(--to-ink);
}
.widget_layered_nav.has-leeftijd-pills .woocommerce-widget-layered-nav-list__item.is-active > a,
.widget_layered_nav.has-leeftijd-pills .woocommerce-widget-layered-nav-list__item.chosen > a {
    background: var(--to-surface-cream);
    color: var(--to-ink);
    font-weight: 500;
}
.widget_layered_nav.has-leeftijd-pills .count {
    display: none;
}
/* Kill the checkbox pseudo-element that wc_shop_sidebar.css adds */
.widget_layered_nav.has-leeftijd-pills .woocommerce-widget-layered-nav-list__item a::before {
    content: none !important;
    display: none !important;
    margin: 0 !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
}

/* ============================================
   Pagination — Editorial / professional
   Hairline strip, sans-serif numbers, terracotta
   underline op de actieve pagina. Geen pills.
   ============================================ */
nav.pagination,
nav.woocommerce-pagination {
    margin: 56px 0 40px;
    padding: 20px 0 0;
    border-top: 1px solid var(--to-line-soft);
}
nav.pagination .nav-links,
nav.pagination > .nav-links,
nav.woocommerce-pagination ul.page-numbers {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border: none !important;
    background: transparent !important;
    width: 100%;
    flex-wrap: wrap;
}
nav.woocommerce-pagination ul.page-numbers li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: none !important;
    background: transparent !important;
}
nav.woocommerce-pagination ul.page-numbers li::before {
    display: none !important;
    content: none !important;
}

/* Wrapper voor de numerieke pagina's tussen prev/next.
   Gebruik flex:1 + center voor de "1 2 3 … 18" reeks. */
nav.pagination .nav-links::before,
nav.pagination .nav-links::after {
    content: '';
    flex: 1;
}

/* Standaard pagina-link */
.pagination .page-numbers,
.woocommerce-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 6px 10px;
    margin: 0 4px;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--to-font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--to-ink-soft) !important;
    text-decoration: none !important;
    line-height: 1;
    letter-spacing: 0.04em;
    box-sizing: border-box;
    position: relative;
    transition: color .15s;
}
.pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:hover {
    color: var(--to-ink) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none;
}
.pagination a.page-numbers:hover::after,
.woocommerce-pagination a.page-numbers:hover::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -2px;
    height: 1px;
    background: var(--to-ink);
}

/* Actieve pagina — terracotta accent, dikker, met onderstreep */
html body nav.pagination div.nav-links span.page-numbers.current,
html body nav.pagination div.nav-links span.page-numbers.current > span,
html body nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current {
    color: var(--to-ink) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    cursor: default;
}
.pagination span.page-numbers.current::after,
.woocommerce-pagination .page-numbers.current::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -2px;
    height: 2px;
    background: var(--to-accent);
}
.pagination span.page-numbers.current > span {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
}

/* Ellipsis (…) */
.pagination .page-numbers.dots,
.woocommerce-pagination .page-numbers.dots {
    color: var(--to-ink-muted) !important;
    cursor: default;
    padding: 6px 4px;
    letter-spacing: 0.2em;
}
.pagination .page-numbers.dots:hover::after,
.woocommerce-pagination .page-numbers.dots:hover::after { display: none !important; content: none !important; }

/* Vorige / Volgende — text-link met pijl */
.pagination a.page-numbers.prev,
.pagination a.page-numbers.next,
.woocommerce-pagination a.page-numbers.prev,
.woocommerce-pagination a.page-numbers.next {
    flex: 0 0 auto;
    padding: 6px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--to-ink) !important;
    font-family: var(--to-font-body) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: none !important;
    box-shadow: none !important;
    gap: 8px;
    min-width: 0;
    width: auto;
}
.pagination a.page-numbers.prev:hover,
.pagination a.page-numbers.next:hover,
.woocommerce-pagination a.page-numbers.prev:hover,
.woocommerce-pagination a.page-numbers.next:hover {
    color: var(--to-accent) !important;
    background: transparent !important;
}
.pagination a.page-numbers.prev:hover::after,
.pagination a.page-numbers.next:hover::after { display: none !important; content: none !important; }
.pagination a.page-numbers.prev::before {
    content: '←';
    font-size: 16px;
    letter-spacing: 0;
    transition: transform .2s;
    line-height: 1;
}
.pagination a.page-numbers.next::after {
    content: '→';
    font-size: 16px;
    letter-spacing: 0;
    transition: transform .2s;
    line-height: 1;
    position: static !important;
    background: transparent !important;
    height: auto !important;
    width: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}
.pagination a.page-numbers.next:hover::after { transform: translateX(4px); background: transparent !important; }
.pagination a.page-numbers.prev:hover::before { transform: translateX(-4px); }
.pagination a.page-numbers.prev > span,
.pagination a.page-numbers.next > span { display: inline; font: inherit; letter-spacing: inherit; }

/* Pagination responsive — zie to-responsive.css */