/**
 * Category/shop archive page: layout wrapper, toolbar, pagination and
 * grid -- everything specific to THIS page. Individual product-card
 * presentation (badges, title, rating, price/actions, the add-to-cart
 * quick-action button) lives in product-card.css instead, scoped
 * generically so it's shared by any WooCommerce product loop rather than
 * needing to be redone for the next place products get listed (e.g. a
 * future homepage slider).
 *
 * Clean rebuild (see woocommerce/archive-product.php) -- targets
 * WooCommerce's own default classes (ul.products, li.product,
 * .woocommerce-loop-product__title, .price) plus our own new classes
 * (medimart-*), not Porto's renamed ones. Colours and spacing below are
 * taken from the values already captured in css-by-sss-team.css so the
 * result looks the same, even though the selectors and markup structure
 * are new.
 *
 * The sidebar filter widget itself (.main_cat, .parent_cat, etc.) is
 * intentionally NOT restyled here -- its CSS already exists in
 * css-by-sss-team.css and is already enqueued; only the two-column page
 * layout hosting it is new.
 */

/*
 * Layout. Width corrected to near-fullwidth (~90%) against the live
 * site, not the arbitrary 1400px cap this started with -- will need
 * revisiting once the real header (which this is meant to match) is
 * built.
 */
/*
 * Width/gutter now comes from the shared `.site-container` utility
 * (main.css) applied alongside this class in archive-product.php -- see
 * that file for why (same rule the header now uses, made persistent
 * site-wide rather than duplicated per page).
 */
.medimart-shop {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	padding-top: 25px;
	padding-bottom: 25px;
}

/*
 * Background matches the reference's light grey filter-panel tone,
 * distinguishing it from the white main content -- confirmed from the
 * mobile filter drawer screenshot (docs/source), which is the same
 * panel used inline here on desktop, just not slid-out.
 *
 * The `p` reset: the category name markup wraps each name in a <p> tag
 * (medimart_shortcode_category_filter()), and browsers give <p> a
 * default ~1em top/bottom margin that was never reset -- confirmed this
 * is what was causing the excess vertical spacing between items, not the
 * padding/margin values already set on .main_cat_wrap itself (those were
 * already correct).
 */
.medimart-shop__sidebar {
	flex: 0 0 25%;
	max-width: 25%;
	padding: 30px 12px 40px;
	background: #f8f8fa;
}

.medimart-shop__sidebar p {
	margin: 0;
}

/*
 * "Filters" heading with icon + "Clear all", shown on desktop too now --
 * it's a real part of the sidebar there, not just mobile-drawer chrome
 * (confirmed from the reference's own desktop sidebar, which has this
 * heading above "FILTER BY PRICE"). The close (X) button stays
 * mobile-only via the media query below.
 */
.medimart-shop__filters-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #010101;
	padding: 0 5px 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid rgba(1, 1, 1, 0.1);
}

.medimart-shop__filters-heading-label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.medimart-shop__filters-clear-all {
	font-size: 13px;
	font-weight: 400;
	color: rgba(1, 1, 1, 0.53);
}

.medimart-shop__filters-clear-all:hover {
	color: #589f3c;
}

.medimart-shop__filters-close {
	display: none;
}

/*
 * Small gap-fill, not a restyle of the widget itself (see file header
 * comment): the expanded sub-category list has no indent at all in the
 * legacy CSS, sitting flush with the parent category's left edge.
 */
.medimart-shop__sidebar .parent_cat.active > ul {
	padding-left: 15px;
}

.medimart-shop__main {
	position: relative;
	flex: 0 0 calc(75% - 30px);
	max-width: calc(75% - 30px);
}

/*
 * Loading state for pagination clicks handled by
 * archive-ajax-pagination.js -- a dimmed overlay + spinner over the whole
 * listing while the next page's markup is fetched, rather than a blank
 * page during a full navigation.
 */
.medimart-shop__main--loading::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 30;
	background: rgba(255, 255, 255, 0.6);
}

.medimart-shop__main--loading::before {
	content: "";
	position: absolute;
	top: 120px;
	left: 50%;
	z-index: 31;
	width: 32px;
	height: 32px;
	margin-left: -16px;
	border: 3px solid rgba(1, 1, 1, 0.15);
	border-top-color: #589f3c;
	border-radius: 50%;
	animation: medimart-spin 0.7s linear infinite;
}

@keyframes medimart-spin {
	to {
		transform: rotate(360deg);
	}
}

/*
 * Header row: title + toolbar (sort/per-page/mobile filters button) side
 * by side, matching the reference where the sort dropdown sits top-right
 * next to the title, not below the description as the first pass had it.
 */
/*
 * Clearance banner (medimart_clearance_banner(), Clearance category only):
 * full-width image, then the intro line in live's grey 16/22 with a blank
 * line's worth of space above it (live used a <br>) and 20px below, then
 * live's 17px down to the title row.
 */
.medimart-clearance-banner {
	margin-bottom: 17px;
}

.medimart-clearance-banner img {
	display: block;
	width: 100%;
	height: auto;
}

.medimart-clearance-banner p {
	margin: 22px 0 20px;
	color: #7b858a;
	font-size: 16px;
	line-height: 22px;
}

/* Live's phone paragraph style (Porto, up to 575px): 13/20, 0.2px tracking. */
@media (max-width: 575px) {
	.medimart-clearance-banner p {
		margin: 20px 0 19px;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 0.2px;
	}
}

.medimart-shop__header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 2px solid #e1e1e3;
}

.medimart-shop__title {
	font-family: "Roboto", sans-serif;
	font-size: 28px;
	font-weight: 500;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.medimart-shop__toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/*
 * "Sort by:" label, matching the reference -- the form itself isn't a
 * replaced element (unlike the <select> inside it), so ::before works
 * here without needing a JS-injected span the way the price filter's
 * "$" did.
 */
/*
 * Font matched to the reference site's own var()-based shorthand
 * (`font: var(--porto-body-fst, normal) var(--porto-body-fw, 400)
 * var(--porto-body-fs, 14px) / var(--porto-body-lh, 24px)
 * var(--porto-body-ff), sans-serif`) -- copied as plain values, not the
 * shorthand itself, since none of those custom properties are defined in
 * this theme (Porto's own token system, not ported) and an undefined
 * var() with no fallback makes the whole shorthand invalid, silently
 * dropping the entire declaration rather than degrading gracefully.
 */
.medimart-shop__toolbar .woocommerce-ordering::before {
	content: "Sort by:";
	margin-right: 8px;
	font-family: "Roboto", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	color: rgba(1, 1, 1, 0.53);
	white-space: nowrap;
}

/*
 * The form itself (.woocommerce-ordering, display: flex) is a flex item of
 * .medimart-shop__toolbar -- without this, its default flex min-width:auto
 * let it shrink below the "Sort by:" label's natural text width, wrapping
 * the label onto a second line rather than ever actually shrinking the
 * (fixed-ish) select next to it.
 */
.medimart-shop__toolbar .woocommerce-ordering {
	flex-shrink: 0;
}

.medimart-shop__toolbar .woocommerce-ordering,
.medimart-shop__toolbar .woocommerce-viewing {
	display: flex;
	align-items: center;
}

/*
 * appearance: none + a custom SVG arrow, rather than each browser's own
 * native select arrow -- the native one sat right at the edge of the
 * padding box regardless of how much right padding was given, reading as
 * "cut off"/too close to the border. A custom arrow, positioned
 * explicitly, is the only way to actually control that gap.
 */
.medimart-shop__toolbar .woocommerce-ordering select,
.medimart-shop__toolbar .woocommerce-viewing select {
	display: inline-flex;
	align-items: center;
	padding: 0 30px 0 15px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23010101' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 10px 6px;
	border-radius: 66px;
	border: 1px solid rgba(1, 1, 1, 0.12);
	color: #010101;
	height: 34px;
	font-family: "Roboto", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
}

/*
 * Mobile-only toolbar (Filters button + sort + per-page, sticky) hidden
 * entirely on desktop -- the desktop toolbar (sort + per-page next to the
 * title) is the --desktop variant instead. Sidebar backdrop and the
 * header-row's own Filters trigger are mobile-only too.
 */
.medimart-shop__toolbar--mobile,
.medimart-shop__filters-toggle--header,
.medimart-shop__sidebar-backdrop {
	display: none;
}

/*
 * Grid. Found live that "only 3 products in the first row" wasn't the
 * grid-template-columns being wrong -- it computed correctly (4 equal
 * 305px tracks) -- the actual `display` was computing to `flex`, not
 * `grid`, because some other WooCommerce rule was still winning on that
 * one property despite this selector's specificity. Same recurring class
 * of bug as the button/badge specificity fights earlier; !important here
 * is deliberate, not laziness, given how many rounds of "increase the
 * selector, it still loses" this particular fight has already gone
 * through.
 */
.medimart-shop__main ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * WooCommerce's own ul.products[class*="columns-"]::before/::after are a
 * clearfix left over from its float-based layout ("content: ''; display:
 * block; clear: both;"). Confirmed live via DevTools (the reported
 * "invisible first product") that a generated ::before with real content
 * is a genuine grid item in a CSS Grid container, silently occupying the
 * first cell and pushing every real product one slot to the right/into
 * the next row. Not needed in a grid layout regardless.
 */
.medimart-shop__main ul.products::before,
.medimart-shop__main ul.products::after {
	display: none !important;
	content: none !important;
}

/*
 * Responsive. Below 991px the sidebar becomes a slide-in drawer (matches
 * the reference screenshots, docs/source) rather than stacking inline --
 * hidden off-screen by default, toggled via .medimart-filters-open on
 * <body> (see archive-mobile-filters.js).
 */
@media (max-width: 991px) {
	/*
	 * Reverted: `overflow-x: hidden` here previously (on body and this
	 * wrapper) as a blanket safety net against horizontal scroll. Confirmed
	 * live (via a genuinely narrow iframe, not just this element resized --
	 * window/device resizing doesn't affect actual rendering in this
	 * environment) that there was no real horizontal overflow to contain in
	 * the first place, so it was pure downside: setting overflow-x without
	 * overflow-y computes overflow-y to `auto` (CSS spec behaviour), turning
	 * body and this wrapper into their own independent scroll containers
	 * instead of the page itself scrolling -- confirmed live that
	 * window.scrollTo() stopped moving the page at all as a result. That
	 * silently broke position: sticky for .medimart-shop__toolbar--mobile
	 * further down (sticky positioning is relative to the nearest scroll
	 * container, and there were now two new ones between it and the
	 * viewport), which is why the sticky Filters/sort/per-page bar
	 * disappeared. If a genuine horizontal-overflow case turns up later, fix
	 * whatever specific element is causing it, not overflow-x on an
	 * ancestor of this sticky element.
	 */
	.medimart-shop {
		width: 100%;
		padding: 15px;
	}

	.medimart-shop__main {
		flex: 1 1 100%;
		max-width: 100%;
	}

	/*
	 * Title + a Filters trigger on the same row, matching the desktop
	 * title/toolbar pattern -- this is separate from the sticky bar
	 * further down (which stays for once you've scrolled past this row).
	 */
	.medimart-shop__header-row {
		flex-wrap: nowrap;
		align-items: center;
	}

	.medimart-shop__title {
		font-size: 20px !important;
		font-weight: 500 !important;
		margin-bottom: 0;
	}

	.medimart-shop__filters-toggle--header {
		display: inline-flex !important;
		align-items: center;
		gap: 4px;
		flex: 0 0 auto;
		height: 32px;
		padding: 0 10px;
		border-radius: 66px;
		border: 1px solid rgba(1, 1, 1, 0.12);
		background: #fff;
		color: #010101;
		font-family: "Roboto", sans-serif;
		font-size: 12px;
		white-space: nowrap;
	}

	/*
	 * !important throughout this rule -- the desktop grid rule's
	 * !important isn't scoped to a media query, so without matching
	 * !important here it would keep winning even on mobile regardless of
	 * this block (the same shorthand-vs-longhand footgun as before: `gap`
	 * shorthand with !important overrides row-gap/column-gap longhands
	 * without it, even across a media query boundary).
	 */
	.medimart-shop__main ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		column-gap: 8px !important;
		row-gap: 1em !important;
	}

	.medimart-shop__toolbar--desktop {
		display: none;
	}

	/*
	 * The sticky mobile toolbar is now a direct child of .medimart-shop__main
	 * (see woocommerce/archive-product.php), a sibling of the product grid
	 * rather than nested inside the short header row -- confirmed live
	 * that a sticky element needs a tall containing block to actually
	 * have room to stick while scrolling; the header row was only ever as
	 * tall as the toolbar itself, so it never appeared to stick at all.
	 */
	/*
	 * All three controls (Filters, sort, per-page) on one line -- reduced
	 * sizing throughout so they actually fit rather than wrapping to 3
	 * lines. "Sort by:" label hidden here specifically (kept on desktop)
	 * since there isn't room for it as well once all three controls need
	 * to share one row.
	 */
	/*
	 * Breaks out of .medimart-shop's own 15px side padding to reach the
	 * true screen edges (negative margin matching that padding), with the
	 * same 15px restored as internal padding so the controls inside don't
	 * sit flush against the edge -- background/border-radius apply to the
	 * now-full-width box, not the inset one.
	 */
	.medimart-shop__toolbar--mobile {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 6px;
		background: #f8f8fa;
		margin: 0 -15px 15px;
		padding: 8px 15px;
		border-radius: 0;
		position: sticky;
		top: 0;
		z-index: 20;
	}

	/*
	 * Logged-in users: WordPress's toolbar is position: fixed from 600px
	 * up (46px tall, 32px from 783px), so a top: 0 sticky bar sits hidden
	 * underneath it and looks like it isn't sticking at all -- exactly
	 * what tablet testing showed at 820px. Below 600px the toolbar is
	 * position: absolute and scrolls away, so no offset there. Same rule
	 * header.css applies to the mobile sticky header block.
	 */
	@media (min-width: 600px) {
		body.admin-bar .medimart-shop__toolbar--mobile {
			top: 46px;
		}
	}

	@media (min-width: 783px) {
		body.admin-bar .medimart-shop__toolbar--mobile {
			top: 32px;
		}
	}

	.medimart-shop__toolbar--mobile .woocommerce-ordering::before {
		display: none;
	}

	/*
	 * Confirmed live: css-by-sss-team.css has a leftover Porto-era rule,
	 * `@media (max-width: 900px) { .woocommerce-ordering { display: none
	 * !important; } }` -- presumably written for a different, separate
	 * mobile sort mechanism Porto used to have. That's the actual reason
	 * "Sort by" never appeared on mobile at all (not a scroll-triggered
	 * staggered reveal, despite how it read) -- Filters and the per-page
	 * count sat in the same flex row the whole time, sort was just always
	 * missing from it. A more specific selector is enough to beat it even
	 * though both are !important.
	 */
	.medimart-shop__toolbar--mobile .woocommerce-ordering {
		display: flex !important;
	}

	/*
	 * min-width raised from 0 -- at 0, the sort/per-page selects could
	 * shrink to an illegibly narrow sliver (or effectively disappear
	 * against the Filters button and each other) whenever the row was
	 * tight, rather than sharing the remaining space evenly once each has
	 * enough room to actually read.
	 */
	.medimart-shop__toolbar--mobile .woocommerce-ordering,
	.medimart-shop__toolbar--mobile .woocommerce-viewing {
		order: 2;
		flex: 1 1 0;
		min-width: 64px;
	}

	/*
	 * background-color, not the `background` shorthand -- the shorthand
	 * would reset the custom arrow (background-image/position/repeat/size)
	 * the base desktop rule already sets on these same elements (this
	 * selector matches on top of it, both classes are present together:
	 * .medimart-shop__toolbar.medimart-shop__toolbar--mobile), wiping the
	 * arrow out on mobile specifically.
	 */
	.medimart-shop__toolbar--mobile .woocommerce-ordering select,
	.medimart-shop__toolbar--mobile .woocommerce-viewing select {
		background-color: #fff;
		width: 100%;
		height: 32px;
		padding: 0 22px 0 8px;
		background-position: right 8px center;
		font-size: 12px;
	}

	.medimart-shop__filters-toggle {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		flex: 0 0 auto;
		height: 32px;
		padding: 0 10px;
		border-radius: 66px;
		border: 1px solid rgba(1, 1, 1, 0.12);
		background: #fff;
		color: #010101;
		font-family: "Roboto", sans-serif;
		font-size: 12px;
		white-space: nowrap;
	}

	.medimart-shop__sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 101;
		width: 320px;
		max-width: 85vw;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		box-shadow: 2px 0 12px 0 rgba(0, 0, 0, 0.15);
	}

	/*
	 * No redefinition needed here -- the desktop .medimart-shop__filters-heading
	 * rule already covers layout/weight; this used to duplicate it with a
	 * stale font-weight: 600 that had been fixed in one place but not the
	 * other. Only the close (X) button is genuinely mobile-only, below.
	 */

	.medimart-shop__filters-close {
		display: block;
		background: none;
		border: none;
		font-size: 24px;
		line-height: 1;
		cursor: pointer;
	}

	body.medimart-filters-open .medimart-shop__sidebar {
		transform: translateX(0);
	}

	body.medimart-filters-open .medimart-shop__sidebar-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100;
		background: rgba(0, 0, 0, 0.4);
	}

	body.medimart-filters-open {
		overflow: hidden;
	}

	/*
	 * "Show: x" and pagination centred and stacked (per-page above
	 * pagination), rather than desktop's left/right split -- there's no
	 * room for them side by side in a narrow column. All the pill/circle
	 * changes further down this file (border-radius, spacing, the 4-number
	 * limit, Next/Previous sizing) are unscoped by media query, so they
	 * already apply here unchanged.
	 */
	.medimart-shop__footer-toolbar {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* Room under the pagination before the category description or
		 * footer (only 16px otherwise; Cooper, 2026-10-15). */
		margin-bottom: 40px;
	}

	.medimart-shop__footer-toolbar .woocommerce-viewing {
		order: 1;
		margin: 0 auto;
	}

	.medimart-shop__footer-toolbar .woocommerce-pagination {
		order: 2;
		margin: 8px auto 0;
	}
}

/*
 * Bottom toolbar: layout only. The pagination styling itself (current
 * page circled green, Next/Previous pills with text swapped in via
 * ::before) is NOT redefined here -- it already exists in
 * css-by-sss-team.css keyed off ".shop-loop-after .page-numbers" and
 * ".woocommerce-pagination li span.current" etc. (confirmed by reading
 * that file directly, per instruction to treat it as the reference for
 * existing custom styling). Redefining it here was fighting that
 * already-correct CSS instead of using it -- the "shop-loop-after" class
 * on this wrapper (see archive-product.php) is what activates it.
 */
.medimart-shop__footer-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 2px solid #e1e1e3;
}

/*
 * The per-page form carries the legacy "show_mob_on" class (part of the
 * viewing-form markup ported from porto-child), which css-by-sss-team.css
 * hides by default on desktop (it's designed for a mobile-only control
 * elsewhere) -- confirmed live this is exactly why "Show: 24" wasn't
 * appearing here at all. Forced visible for this specific instance.
 */
.medimart-shop__footer-toolbar .woocommerce-viewing.show_mob_on {
	display: block !important;
}

.medimart-shop__footer-toolbar .woocommerce-viewing select {
	border-radius: 66px;
	border: 1px solid rgba(1, 1, 1, 0.12);
	padding: 0 30px 0 15px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23010101' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 10px 6px;
	height: 34px;
	color: #010101;
}

.medimart-shop__footer-toolbar .woocommerce-pagination {
	margin-left: auto;
}

/*
 * WooCommerce assigns the class "page-numbers" both to the wrapping <ul>
 * AND to every individual number inside it. css-by-sss-team.css's
 * ".shop-loop-after .page-numbers" rule (border-radius: 66px) was written
 * for the individual number pills, but it also matches the <ul> itself --
 * confirmed live via computed style -- giving the whole strip a huge
 * border-radius that combines with WooCommerce core's own 1px border on
 * the ul (.woocommerce nav.woocommerce-pagination ul) into a wavy/rounded
 * box wrapping the whole row. The reference site shows no such box, only
 * the individual pills. Reset the wrapper only; numbers inside keep their
 * intended pill shape from the legacy rule.
 *
 * Switched to flex + a real `gap` -- WooCommerce core's own layout for
 * this list is float-based (ul li { float: left }) with each li carrying
 * its own `border-right: 1px solid` as the only thing separating one
 * number from the next. That's both the stray vertical line down the
 * right edge of each pill and the reason there was no actual visible gap
 * between numbers, even the current/selected one (adjoining borders, not
 * spacing). Flex + gap replaces that whole mechanism with real space.
 */
.medimart-shop__footer-toolbar .woocommerce-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	gap: 6px;
	border-radius: 0 !important;
	border: 0 !important;
}

.medimart-shop__footer-toolbar .woocommerce-pagination ul.page-numbers li {
	float: none;
	border-right: 0 !important;
	display: flex;
}

/*
 * Individual number pills: fixed, equal width/height rather than the
 * legacy rule's padding-driven sizing (.5em padding around a 1-character
 * vs 2-character number produces a slightly wider-than-tall box once
 * border-radius rounds it -- an oval, not a circle, and the cutoff-looking
 * edge the instruction called out). A fixed box + border-radius: 50% is a
 * true circle regardless of whether the label is "1" or "18". Ellipsis
 * dots and the Next/Previous pills are excluded -- they keep their own
 * shapes below.
 */
/*
 * Element-typed (a./span.), not the bare ".page-numbers:not(...)" this
 * replaces -- that version also matched the wrapping <ul class="page-numbers">
 * itself (WooCommerce puts the same class on the list AND every item in
 * it), forcing the whole nav down to one 32x32 circle with the real
 * numbers overflowing outside it, invisible. Confirmed live via computed
 * style: the <ul> itself was rendering at 32x32. An element-type qualifier
 * excludes it -- "ul.page-numbers" can't match "a.page-numbers" or
 * "span.page-numbers".
 */
.medimart-shop__footer-toolbar .woocommerce-pagination a.page-numbers:not(.next):not(.prev),
.medimart-shop__footer-toolbar .woocommerce-pagination span.page-numbers:not(.dots) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-width: 32px;
	padding: 0 !important;
	border-radius: 50% !important;
	font-size: 13px;
	font-weight: 400;
}

/*
 * WooCommerce core's own default current/hover state
 * (.woocommerce nav.woocommerce-pagination ul li span.current) is more
 * specific than css-by-sss-team.css's ".woocommerce-pagination li
 * span.current" and wins on background-color -- confirmed live via
 * computed style -- leaving the current page a pale grey instead of the
 * intended solid green from that rule (its color: #fff is !important, but
 * its background isn't, so specificity decided it). Re-asserted here to
 * match the reference site's solid green current-page circle.
 */
.medimart-shop__footer-toolbar .woocommerce-pagination li a:focus,
.medimart-shop__footer-toolbar .woocommerce-pagination li a:hover,
.medimart-shop__footer-toolbar .woocommerce-pagination li span.current {
	background: #589f3c !important;
}

/* White number on the green circle. WooCommerce core's purple
   (#816f98, .woocommerce nav.woocommerce-pagination ul li span.current)
   was winning on the current page (user, 2026-10-14). */
.medimart-shop__footer-toolbar .woocommerce-pagination li span.current,
.medimart-shop__footer-toolbar .woocommerce-pagination li a:hover,
.medimart-shop__footer-toolbar .woocommerce-pagination li a:focus {
	color: #fff !important;
}

/*
 * "Show:" label in front of the per-page count selector, matching the
 * reference -- the form itself isn't a replaced element (unlike the
 * <select> inside it), so ::before works here the same way it does for
 * "Sort by:" above.
 */
.medimart-shop__footer-toolbar .woocommerce-viewing::before {
	content: "Show:";
	margin-right: 8px;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	color: #010101;
}

/*
 * Both the ordering form and viewing form carry a WooCommerce/legacy
 * default bottom margin (confirmed live: 0 16px on .woocommerce-ordering)
 * meant for the old float-based layout -- inside our flex toolbars it
 * throws off vertical centering, since align-items: center centers the
 * whole margin box, so the extra bottom margin visibly shifts the control
 * upward relative to siblings that don't carry it (the Filters button,
 * the per-page select). Reset for both toolbars, desktop and mobile.
 */
.medimart-shop__toolbar .woocommerce-ordering,
.medimart-shop__toolbar .woocommerce-viewing {
	margin: 0;
}

/*
 * Next/Previous pills: WooCommerce's own bundled core CSS
 * (.woocommerce nav.woocommerce-pagination ul li a, ...ul li span) is more
 * specific than css-by-sss-team.css's ".woocommerce-pagination .next,
 * .prev" override (2 classes + 4 elements beats 2 classes + 0 elements)
 * and wins on padding -- confirmed live via computed style, and confirmed
 * against the legacy/reference site directly: there, the *competing*
 * default rule is Porto's own base theme CSS, not WooCommerce core, and
 * it's LOWER specificity than the legacy override, so the legacy padding
 * always won there. This theme has no Porto CSS filling that role, so
 * WooCommerce core's genuinely higher-specificity rule wins instead here,
 * collapsing "Next" from a padded 40px pill down to an ~16px sliver.
 * Restored explicitly rather than left to fight it. flex-direction forced
 * to row (the legacy rule uses column, which stacked the hidden arrow
 * character above/below the label and pushed it outside the button's own
 * edge -- confirmed live with a debug outline); font-size: 0 collapses
 * that now-redundant arrow character to nothing so it doesn't affect
 * sizing at all.
 */
/*
 * "Next"/"Previous" are now real server-rendered anchor text (see
 * medimart_pagination_args() -- prev_text/next_text), not WooCommerce's
 * default arrow characters hidden via the legacy rule's text-indent with
 * a JS-injected replacement span sitting on top. That JS-injected
 * approach was confirmed live, repeatedly and by several different
 * methods (colour swap, background swap, elementFromPoint hit-testing),
 * to size/position/hit-test perfectly while the actual text glyphs simply
 * never painted -- rather than continuing to patch around whatever that
 * was, real text sidesteps it entirely. text-indent explicitly zeroed to
 * undo the legacy hiding rule; font-size no longer needs collapsing to 0
 * since there's no separate arrow glyph left to hide.
 */
.medimart-shop__footer-toolbar .woocommerce-pagination .next,
.medimart-shop__footer-toolbar .woocommerce-pagination .prev {
	padding: 0 !important;
	height: 30px !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	text-indent: 0 !important;
	font-family: "Roboto", sans-serif;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: #010101 !important;
}

.medimart-shop__footer-toolbar .woocommerce-pagination .next {
	width: 80px !important;
}

.medimart-shop__footer-toolbar .woocommerce-pagination .prev {
	width: 104px !important;
}

/*
 * The legacy ::before (content: "Next"/"Previous") would otherwise show
 * alongside the real anchor text now, doubling it up.
 */
.medimart-shop__footer-toolbar .woocommerce-pagination .next::before,
.medimart-shop__footer-toolbar .woocommerce-pagination .prev::before {
	content: none !important;
}

.medimart-shop__footer-toolbar .woocommerce-pagination a.next:hover,
.medimart-shop__footer-toolbar .woocommerce-pagination a.prev:hover {
	color: #fff !important;
}

/* Next/Previous: a rounded grey outline that is always visible, solid
   green with white text on hover, focus and click (user, 2026-10-14).
   The green background comes from the li a:hover/:focus rule above. */
.medimart-shop__footer-toolbar .woocommerce-pagination a.next,
.medimart-shop__footer-toolbar .woocommerce-pagination a.prev {
	border: 1px solid #d7d7d7 !important;
	border-radius: 30px !important;
	box-sizing: border-box;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.medimart-shop__footer-toolbar .woocommerce-pagination a.next:hover,
.medimart-shop__footer-toolbar .woocommerce-pagination a.prev:hover,
.medimart-shop__footer-toolbar .woocommerce-pagination a.next:focus,
.medimart-shop__footer-toolbar .woocommerce-pagination a.prev:focus,
.medimart-shop__footer-toolbar .woocommerce-pagination a.next:active,
.medimart-shop__footer-toolbar .woocommerce-pagination a.prev:active {
	border-color: #589f3c !important;
	background: #589f3c !important;
	color: #fff !important;
}

/*
 * "Filter by Price" widget (WC_Widget_Price_Filter, see
 * woocommerce/archive-product.php for why the classic widget is used
 * instead of the WooCommerce Blocks version).
 *
 * The classic widget's own template already has real, visible #min_price
 * / #max_price text inputs side by side (confirmed by reading
 * content-widget-price-filter.php directly) -- WooCommerce's own
 * price-slider.js just hides them once the slider initialises, showing
 * a ".price_label" text summary instead. Forcing the inputs to stay
 * visible and hiding the label instead gets the "two boxes you can also
 * type in" behaviour the reference shows, without needing the block
 * version's query-context requirements.
 */
.medimart-shop__sidebar .widget_price_filter .widgettitle {
	display: none;
}

.medimart-shop__sidebar .price_slider_wrapper {
	padding: 0 5px;
}

/*
 * !important throughout -- jQuery UI ships its own theme CSS (the purple
 * default look) which was still winning over these without it, same
 * recurring specificity pattern as the grid/badges/button earlier.
 */
.medimart-shop__sidebar .price_slider.ui-slider {
	height: 6px !important;
	background: #e1e1e3 !important;
	border: none !important;
	border-radius: 10px !important;
	margin-bottom: 20px;
}

.medimart-shop__sidebar .price_slider .ui-slider-range {
	background: #589f3c !important;
	border-radius: 10px !important;
}

.medimart-shop__sidebar .price_slider .ui-slider-handle {
	width: 16px !important;
	height: 16px !important;
	top: -5px !important;
	background: #fff !important;
	border: 2px solid #010101 !important;
	border-radius: 50% !important;
	outline: none;
}

.medimart-shop__sidebar .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.medimart-shop__sidebar .price_label {
	display: none !important;
}

/*
 * "$" prefix: the widget's inputs are plain <input type="text"> with no
 * currency affordance, and ::before doesn't render on replaced elements
 * like inputs, so the visible "$" is a wrapping span injected by
 * price-filter-enhance.js, not CSS alone -- this just styles/positions it.
 */
.medimart-price-input {
	position: relative;
	flex: 1 1 calc(50% - 4px);
	display: block;
}

.medimart-price-input::before {
	content: "$";
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(1, 1, 1, 0.5);
	font-family: "Roboto", sans-serif;
	font-size: 13px;
	pointer-events: none;
}

.medimart-shop__sidebar .price_slider_amount input[type="text"] {
	display: block !important;
	width: 100%;
	padding: 8px 10px 8px 20px;
	border: 1px solid rgba(1, 1, 1, 0.15);
	border-radius: 6px;
	font-family: "Roboto", sans-serif;
	font-size: 13px;
	color: #010101;
}

/*
 * No visible submit button -- filtering applies automatically once the
 * slider is released or a value is typed (see price-filter-enhance.js).
 * Not removed from the DOM (still usable without JS/for screen readers
 * pressing Enter in the field), just hidden.
 */
.medimart-shop__sidebar .price_slider_amount button.button {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/**
 * Sidebar category filter tree -- migrated from css-by-sss-team.css on
 * 2026-09-11, confirmed still active via live A/B test (the rebuilt
 * sidebar's markup, generated by medimart_shortcode_category_filter() in
 * inc/woocommerce-archive.php, reuses these exact class names).
 */
.main_cat_wrap {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 5px;
	border-radius: 5px;
	margin-bottom: 5px;
}

.main_cat_wrap p {
	color: #010101;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-transform: capitalize;
}

.main_cat .parent_cat {
	border: none;
}

.parent_cat ul li input {
	order: 2;
	margin: 0 !important;
	width: 15px;
	height: 15px;
	display: none;
}

.parent_cat ul {
	display: none;
}

.parent_cat ul li label:hover span {
	color: #589F3C;
}

.active_checkbox label span {
	color: #589f3cbd !important;
}

.parent_cat ul li span {
	color: #0101018c;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	line-height: 1.5;
}

.parent_cat ul li {
	color: #010101;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	padding: 10px 0;
	border: none;
}

/* Third level and deeper (Mobility Scooters > Accessories & Spare
 * Parts) indented under its parent, which otherwise sat flush with the
 * second level (2026-10-15, project lead). The nested list follows the
 * parent row's label, so the parent's 10px bottom padding stays below
 * the whole branch. */
.parent_cat ul ul {
	padding-left: 15px;
	margin-top: 10px;
}

.parent_cat ul ul li:last-child {
	padding-bottom: 0;
}

.parent_cat ul li label {
	cursor: pointer;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 5px;
}

.main_cat_wrap:hover {
	background: #589f3c14;
}

.active .main_cat_wrap {
	background: #589f3c14;
}

.main_cat_wrap svg {
	opacity: 0.5;
}

.main_cat_wrap a {
	width: 100%;
}

/*
 * Deliberately every descendant list, not just the direct child --
 * only the top level has its own toggle (medimart_render_category_node(),
 * inc/woocommerce-archive.php), so opening it needs to reveal every
 * nested level under it in one go. User decision, 2026-09-22.
 */
.parent_cat.active ul {
	display: block;
}

.parent_cat.active .main_cat_wrap svg {
	transform: rotate(180deg);
}

.parent_cat input {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	display: inline-block;
	vertical-align: middle;
	width: 17px !important;
	height: 17px !important;
	outline: 0;
	padding: 4px;
	margin-right: 5px;
	position: relative;
	border: 2px solid #999;
	border-radius: 2px;
}

.parent_cat ul .active_checkbox input:after {
	content: "";
	width: 7px;
	height: 12px;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	display: block;
	position: absolute;
	top: 0;
	left: 5px;
	transform: rotate(45deg);
}

.parent_cat .active_checkbox input {
	background: #589F3C;
	border: none;
	display: none;
}

.main_cat_wrap:hover p {
	color: #589F3C;
}

.main_cat_wrap:hover path {
	stroke: #589F3C;
}

.parent_cat.active .main_cat_wrap path {
	stroke: #589F3C;
}

.parent_cat.active .main_cat_wrap p {
	color: #589F3C;
}

h3.main_cat_title {
	color: #01010173;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-transform: uppercase;
	padding: 0 5px;
	margin-bottom: 10px;
}

.show_mob_on {
	display: none;
}

@media (max-width: 768px) {
	.scrolled .show_mob_on {
		display: block;
		order: 2;
	}
}

/*
 * Category / shop pages on mobile: the archive's own Filters / sort bar
 * is the sticky element here (see .medimart-shop__toolbar--mobile above),
 * so the global header's sticky block (header.css, #site-header-sticky)
 * stands down -- two competing sticky bars would stack up and eat the
 * screen. This file is only enqueued on shop/category archives
 * (functions.php), so no body-class scoping is needed. transform: none
 * also neutralises header-nav.js's hide-on-scroll class, which would
 * otherwise slide a now-static header up and down while scrolling.
 */
@media (max-width: 991px) {
	.site-header__sticky {
		position: static;
		transform: none;
	}
}