/**
* Styles for [jakmax_search_results].
*
* Hand-written, not built — the results page loads no React, so there is
* nothing for esbuild to do here and a build step would only be one more
* thing to forget before a deploy.
*
* Only the pagination. The product cards deliberately reuse the theme's
* markup and classes so Divi's styling applies to them unchanged, and
* restyling those here would fight the theme rather than match it.
*
* The pagination was the exception: the site's own rules for it are scoped
* to `.search-page-contain.product-filter-row .pagination` in the Custom CSS
* plugin, so the shortcode only looked right when it happened to be placed
* inside that wrapper and rendered as unstyled default links anywhere else.
*
* Every value below is lifted from those rules rather than invented, so the
* two cannot disagree about what the pagination looks like. The theme's
* selectors are more specific and still win where that wrapper exists —
* which is intended, and harmless, because they set the same values.
*/
.jakmax-pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
column-gap: 8px;
row-gap: 8px;
margin-top: 36px;
}
.jakmax-pagination a {
font-family: "proxima-nova", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
padding: 6px 14px;
color: #000;
text-decoration: none;
border-radius: 6px;
}
/*
* The current page. A link to itself rather than a span, because the site's
* own rule targets `.pagination a.active` — styling it as anything else
* would silently lose the highlight on pages that do sit inside the theme's
* wrapper.
*/
.jakmax-pagination a.active {
background: #162112;
color: #fff;
}
/*
* Feedback on hover, which the site's rules don't define. Pagination with no
* hover state reads as static text, and the current page is deliberately
* excluded — it is already where you are.
*/
.jakmax-pagination a:not(.active):hover,
.jakmax-pagination a:not(.active):focus-visible {
background: #f2f2f2;
color: #000;
}
/*
* The gap between the first pages and the last. Narrower padding than a
* link, so the ellipsis reads as a break in the sequence rather than
* another thing to click.
*/
.jakmax-pagination .dots {
font-family: "proxima-nova", sans-serif;
font-size: 16px;
line-height: 24px;
padding: 6px 2px;
color: #6b6b6b;
user-select: none;
}
/*
* The filter sidebar (includes/search-filters.php).
*
* Every option is a plain link with no JS behind it — selecting one is a
* full page reload to a new ?s=…&filter_x=… URL, the same pattern the
* pagination above already uses. `.jakmax-filter-box` is a hand-drawn
* checkbox rather than a real , since a real checkbox has no way to
* *navigate* on click without JS to intercept it.
*
* `.pro-card-div` itself is untouched — it keeps whatever grid the theme's
* Custom CSS gives it (see this file's top docblock); wrapping it in
* `.jakmax-search-results` only affects the space beside it, and a
* descendant selector like `.search-page-contain .pro-card-div` still
* matches through the extra nesting.
*/
.jakmax-search-layout {
display: flex;
align-items: flex-start;
gap: 32px;
}
.jakmax-search-filters {
flex: 0 0 240px;
width: 240px;
}
.jakmax-search-results {
flex: 1 1 auto;
min-width: 0;
}
@media (max-width: 900px) {
.jakmax-search-layout {
flex-direction: column;
gap: 16px;
}
.jakmax-search-filters {
width: 100%;
flex-basis: auto;
}
}
.jakmax-filters-toggle {
border: 1px solid #e2e2e2;
border-radius: 8px;
padding: 0;
}
/*
* The filter panel is a native , open by default at every screen
* size (see jakmax_render_search_filters_sidebar()) — a shopper can
* collapse it themselves on any device, this just doesn't start that way
* for them. Below 901px that's also what replaces the second, mobile-only
* shortcode (with its own popup) product_list_short_code_mobile used to
* need for this.
*/
.jakmax-filters-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
font-family: "proxima-nova", sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 24px;
color: #000;
cursor: pointer;
list-style: none;
}
.jakmax-filters-summary::-webkit-details-marker {
display: none;
}
/*
* The chevron that tells a shopper this bar is collapsible — a real