/**
 * RTCL Pagination Horizontal Scroll Fix - CSS
 *
 * Scope: ONLY prevents horizontal page-shift caused by the pagination
 * bar overflowing the viewport width. Does not change colors, fonts,
 * spacing, grid layout, header, footer, or any other element.
 *
 * Safe-guard: overflow-x is only forced to hidden on html/body, which
 * is a standard, non-destructive safety net — it does not resize,
 * hide, or reflow any visible content, it only blocks sideways
 * scrolling of the whole page if something tries to cause it.
 */

/* 1. Prevent the whole page from ever scrolling sideways.
      This does not hide or move any content - it only removes the
      ability to drag/scroll the page horizontally. */
html {
	max-width: 100%;
	overflow-x: hidden !important;
}
body {
	max-width: 100%;
	overflow-x: hidden !important;
	position: relative;
}

/* 2. Keep the pagination bar as ONE single row on every page
      (page 1, 2, 3... all look identical - no second line ever
      appears), AND make it fit fully on screen with NO horizontal
      scrolling at all - the buttons shrink slightly on narrow
      screens instead of scrolling or wrapping. Only targets known
      RTCL / WordPress pagination classes. */
.rtcl-pagination,
.rtcl-pagination ul,
.rtcl-pagination .page-numbers,
nav.pagination,
nav.woocommerce-pagination,
ul.page-numbers {
	display: flex !important;
	flex-wrap: nowrap !important;   /* never break into a 2nd line */
	flex-direction: row !important;
	max-width: 100%;
	width: 100%;
	overflow: hidden !important;    /* no scrollbar, no side-scroll */
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	gap: 4px;
}

.rtcl-pagination li,
ul.page-numbers li {
	flex: 0 1 auto;   /* allow shrinking instead of overflowing */
	min-width: 0;
}

.rtcl-pagination .page-numbers.current,
.rtcl-pagination a.page-numbers,
.rtcl-pagination span.page-numbers,
ul.page-numbers a,
ul.page-numbers span {
	white-space: nowrap;
	box-sizing: border-box;
}

/* On narrow phone screens, shrink the button size a bit so all
   items (including the arrows) fit in one row with no scrolling. */
@media (max-width: 480px) {
	.rtcl-pagination a.page-numbers,
	.rtcl-pagination span.page-numbers,
	ul.page-numbers a,
	ul.page-numbers span {
		padding: 6px 8px !important;
		font-size: 13px !important;
		min-width: 26px !important;
	}
}

@media (max-width: 380px) {
	.rtcl-pagination,
	.rtcl-pagination ul,
	ul.page-numbers {
		gap: 2px;
	}
	.rtcl-pagination a.page-numbers,
	.rtcl-pagination span.page-numbers,
	ul.page-numbers a,
	ul.page-numbers span {
		padding: 5px 6px !important;
		font-size: 12px !important;
		min-width: 22px !important;
	}
}

/* 3. Safety net: if any Elementor section/container on this template
      is wider than the viewport (the actual source of the overflow),
      clip it instead of letting it push the page sideways. This only
      affects horizontal overflow - vertical layout, spacing, and
      design are completely untouched. */
.elementor-section-wrap,
.elementor-widget-container {
	max-width: 100%;
}