/* Shop pagination: big animated buttons with icons. */
.cb-pager { container-type: inline-size; margin: 44px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cb-pager-info { margin: 0; color: #64748b; font-size: 14px; }
.cb-pager ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cb-pager li { margin: 0; }
.cb-pager-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; height: 48px; padding: 0 16px; box-sizing: border-box; border: 1.5px solid #dbe3ee; border-radius: 14px; background: #fff; color: #1e293b; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); cursor: pointer; user-select: none; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease; }
.cb-pager-btn svg { width: 20px; height: 20px; flex: none; transition: transform .2s ease; }
a.cb-pager-btn:hover, a.cb-pager-btn:focus-visible { transform: translateY(-3px); border-color: var(--cb-primary, var(--cb-primary-dark, #1d4ed8)); color: var(--cb-primary, var(--cb-primary-dark, #1d4ed8)); box-shadow: 0 10px 20px rgba(29, 78, 216, .18); outline: none; }
a.cb-pager-btn:active { transform: translateY(0) scale(.96); box-shadow: 0 2px 4px rgba(29, 78, 216, .2); }
a.cb-pager-prev:hover svg, a.cb-pager-first:hover svg { transform: translateX(-4px); }
a.cb-pager-next:hover svg, a.cb-pager-last:hover svg { transform: translateX(4px); }
.cb-pager-next, .cb-pager-prev { background: linear-gradient(180deg, #fff, #f8fafc); }
a.cb-pager-next:hover, a.cb-pager-prev:hover, a.cb-pager-first:hover, a.cb-pager-last:hover { background: var(--cb-primary, var(--cb-primary-dark, #1d4ed8)); color: #fff; border-color: var(--cb-primary, var(--cb-primary-dark, #1d4ed8)); }
.cb-pager-current { background: var(--cb-primary, var(--cb-primary-dark, #1d4ed8)); border-color: var(--cb-primary, var(--cb-primary-dark, #1d4ed8)); color: #fff; box-shadow: 0 10px 22px rgba(29, 78, 216, .35); animation: cb-pager-pop .4s ease; cursor: default; }
.cb-pager-btn.is-disabled { opacity: .38; box-shadow: none; cursor: not-allowed; background: #f1f5f9; }
.cb-pager-gap { min-width: 22px; text-align: center; color: #94a3b8; font-size: 22px; letter-spacing: 2px; }
.cb-pager-status { display: none; font-weight: 600; color: #475569; padding: 0 6px; }
.cb-pager-btn.is-loading { pointer-events: none; color: transparent !important; }
.cb-pager-btn.is-loading > * { visibility: hidden; }
.cb-pager-btn.is-loading::after { content: ""; position: absolute; width: 22px; height: 22px; border: 3px solid #cbd5e1; border-top-color: var(--cb-primary, var(--cb-primary-dark, #1d4ed8)); border-radius: 50%; animation: cb-pager-spin .7s linear infinite; }
a.cb-pager-next.is-loading, a.cb-pager-prev.is-loading, a.cb-pager-first.is-loading, a.cb-pager-last.is-loading { background: #fff; }

@keyframes cb-pager-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes cb-pager-spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
	.cb-pager-first, .cb-pager-last, .cb-pager-num, .cb-pager-gap { display: none; }
	.cb-pager-status { display: block; }
	.cb-pager-btn { height: 56px; padding: 0 22px; }
	.cb-pager ul { gap: 12px; flex-wrap: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
	.cb-pager-btn, .cb-pager-btn svg, .cb-pager-current { transition: none; animation: none; }
	a.cb-pager-btn:hover { transform: none; }
}

/* First / Last are icon-only squares (their text stays for screen readers) so the whole bar fits beside the filters. */
.cb-pager-first, .cb-pager-last { padding: 0; }
.cb-pager-first .cb-pager-text, .cb-pager-last .cb-pager-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cb-pager-prev, .cb-pager-next { padding: 0 16px; }

/* Narrow column (or phone): Previous · Page X of Y · Next, at big tap size. */
@container (max-width: 600px) {
	.cb-pager-first, .cb-pager-last, .cb-pager-num, .cb-pager-gap { display: none; }
	.cb-pager-status { display: block; }
	.cb-pager-btn { height: 56px; padding: 0 22px; }
	.cb-pager ul { gap: 12px; flex-wrap: nowrap; }
}

.cb-pager-status { white-space: nowrap; }
/* Very narrow phones: Previous / Next become big icon buttons so "Page X of Y" always fits on one line. */
@container (max-width: 400px) {
	.cb-pager-prev .cb-pager-text, .cb-pager-next .cb-pager-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.cb-pager-prev, .cb-pager-next { padding: 0; min-width: 56px; }
}