/* ========================================================================
 * AquaNetica Marketplace: browse page pagination (1.11.3).
 *
 * Shared by the used, new and feed grids. Uses the tokens both directory
 * stylesheets already define (--c-teal, --c-border, --c-surface, --c-text,
 * --c-muted), with the brand values as fallbacks. Every control is at least
 * 44px tall; on a phone Previous and Next shrink to their arrows and the
 * numbers keep only the current page between the first and the last, so the
 * row never overflows.
 * ===================================================================== */

.aqnm-pager-bar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 8px 16px; margin: 0 0 14px;
}
.aqnm-pager-count {
	margin: 0; font-size: 14px; color: var(--c-muted, #64748b);
}
.aqnm-pager-count:focus { outline: none; }
.aqnm-pager-count:focus-visible { outline: 2px solid var(--c-teal, #15807d); outline-offset: 2px; border-radius: 4px; }
.aqnm-pager-per { margin: 0; }
.aqnm-pager-per label {
	display: inline-flex; align-items: center; gap: 8px; margin: 0;
	font-size: 14px; color: var(--c-muted, #64748b); font-weight: 600;
}
.aqnm-pager-per select {
	min-height: 44px; min-width: 76px; padding: 8px 30px 8px 12px; width: auto;
	border: 1px solid var(--c-border, #e2e8f0); border-radius: 10px;
	background-color: var(--c-surface, #fff); color: var(--c-text, #0f172a);
	font: inherit; font-size: 16px;
}
.aqnm-pager-per select:focus-visible { outline: 2px solid var(--c-teal, #15807d); outline-offset: 2px; }
.aqnm-pager-apply {
	min-height: 44px; margin-left: 8px; padding: 0 14px;
	border: 1px solid var(--c-border, #e2e8f0); border-radius: 10px;
	background: var(--c-surface, #fff); color: var(--c-text, #0f172a); font: inherit; font-weight: 600; cursor: pointer;
}

.aqnm-pager { margin: 24px 0 8px; }
.aqnm-pager[hidden], .aqnm-pager-per[hidden] { display: none !important; }
.aqnm-pager-list {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 6px; margin: 0; padding: 0; list-style: none;
}
.aqnm-pager-list > li { margin: 0; padding: 0; list-style: none; }
.aqnm-pager-link {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-width: 44px; min-height: 44px; padding: 0 12px; box-sizing: border-box;
	border: 1px solid var(--c-border, #e2e8f0); border-radius: 10px;
	background: var(--c-surface, #fff); color: var(--c-text, #0f172a);
	font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none;
	transition: border-color .15s, color .15s, background-color .15s;
}
a.aqnm-pager-link:hover { border-color: var(--c-teal, #15807d); color: var(--c-teal, #15807d); }
a.aqnm-pager-link:focus-visible { outline: 2px solid var(--c-teal, #15807d); outline-offset: 2px; }
.aqnm-pager-link.is-current {
	background: var(--c-teal, #15807d); border-color: var(--c-teal, #15807d); color: #fff;
}
.aqnm-pager-link.is-disabled { color: var(--c-muted, #64748b); opacity: .5; cursor: default; }
.aqnm-pager-gap {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; min-height: 44px; color: var(--c-muted, #64748b);
}
.aqnm-pager .aqnm-visually-hidden,
.aqnm-pager-bar .aqnm-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Phones: Previous and Next become their arrows (the words stay for screen readers). */
@media (max-width: 479px) {
	.aqnm-pager-list { gap: 4px; }
	.aqnm-pager-link { padding: 0 8px; }
	.aqnm-pager-prev .aqnm-pager-word, .aqnm-pager-next .aqnm-pager-word {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
	}
	.aqnm-pager-prev, .aqnm-pager-next { font-size: 20px; }
}

/* ========================================================================
 * Section switcher: Used equipment, New equipment, Feed & Nutrition. One
 * row on every width; on a narrow phone the row scrolls sideways inside
 * itself rather than wrapping or widening the page.
 * ===================================================================== */
.aqnm-section-tabs { margin: 14px 0 18px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.aqnm-section-tabs::-webkit-scrollbar { display: none; }
.aqnm-section-tabs ul {
	display: inline-flex; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 4px; list-style: none;
	border: 1px solid var(--c-border, #e2e8f0); border-radius: 12px; background: var(--c-surface, #fff);
}
.aqnm-section-tabs li { flex: 0 0 auto; margin: 0; padding: 0; list-style: none; }
.aqnm-section-tab {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 16px; border-radius: 9px; white-space: nowrap;
	font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none;
	color: var(--c-text, #0f172a); transition: background-color .15s, color .15s;
}
a.aqnm-section-tab:hover { color: var(--c-teal, #15807d); background: var(--c-chip, #f1f5f9); }
a.aqnm-section-tab:focus-visible { outline: 2px solid var(--c-teal, #15807d); outline-offset: 2px; }
.aqnm-section-tab.is-current, a.aqnm-section-tab.is-current:hover { background: var(--c-teal, #15807d); color: #fff; }
@media (max-width: 479px) {
	.aqnm-section-tabs ul { gap: 2px; padding: 3px; }
	.aqnm-section-tab { padding: 0 6px; font-size: 13px; }
}