/**
 * Styles for the [fitrx_replacement_parts] shortcode. Kept independent from
 * shop-page/style.scss on purpose — that stylesheet's selectors are scoped
 * under .wp-block-fitrx-blocks-shop-page, so nothing there reaches this page.
 * Same color values, font stack, and card anatomy as the Shop page, just
 * under an `rp-` prefix instead.
 */
.rp-page {
	--sp-ink: #181818;
	--sp-red: #ce0e2d;
	--sp-paper: #fffdfb;
	--sp-tray: #f2efe8;
	--sp-line: #e6e1d8;
	--sp-text-dim: #9a9d9f;
	--sp-card: #fff;

	/* Bump this if the theme has a fixed/sticky header — keeps the sidebar's
	   own sticky offset (and the mobile toggle button) below it instead of
	   overlapping. */
	--rp-sticky-top: 0px;

	width: 100%;
	background: var(--sp-paper);
	color: var(--sp-ink);
	font-family: Manrope, sans-serif;
}

.rp-head {
	padding: 0 0 24px;
	border-bottom: 1px solid var(--sp-line);
	margin-bottom: 28px;
}

.rp-heading {
	font-family: Anton, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(30px, 4.5vw, 46px);
	margin: 0 0 12px;
	line-height: 1;
}

.rp-heading em {
	font-style: normal;
	color: var(--sp-red);
}

.rp-sub {
	max-width: 62ch;
	margin: 0 0 16px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--sp-text-dim);
	font-weight: 500;
}

.rp-stats {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--sp-text-dim);
}

.rp-stats strong {
	color: var(--sp-ink);
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: 14px;
	margin-right: 4px;
}

.rp-stats-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--sp-line);
}

/* ---------- layout: sidebar + main (mirrors shop-page__layout) ---------- */

.rp-layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 22px;
	align-items: start;
}

@media (max-width: 900px) {
	.rp-layout {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Qualified with `button` for the same specificity reason as
   button.rp-nav-item above. */
button.rp-filter-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-bottom: 4px;
	border: 1.5px solid var(--sp-ink);
	border-radius: 999px;
	background: var(--sp-card);
	padding: 12px 18px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--sp-ink);
	cursor: pointer;
	font-family: inherit;
}

.rp-filter-toggle svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 900px) {
	button.rp-filter-toggle {
		display: flex;
	}
}

/* ---------- sidebar nav ---------- */

.rp-sidebar {
	position: sticky;
	top: calc(var(--rp-sticky-top) + 20px);
	max-height: calc(100vh - var(--rp-sticky-top) - 40px);
	overflow-y: auto;
	padding-right: 4px;

	/* Firefox */
	scrollbar-width: thin;
	scrollbar-color: var(--sp-line) transparent;
}

/* Chrome / Edge / Safari — same thin, brand-toned thumb as the Firefox rule above */
.rp-sidebar::-webkit-scrollbar {
	width: 6px;
}

.rp-sidebar::-webkit-scrollbar-track {
	background: transparent;
}

.rp-sidebar::-webkit-scrollbar-thumb {
	background: var(--sp-line);
	border-radius: 999px;
}

.rp-sidebar::-webkit-scrollbar-thumb:hover {
	background: var(--sp-text-dim);
}

@media (max-width: 900px) {
	.rp-sidebar {
		position: static;
		max-height: none;
		overflow-y: visible;
		display: none;
	}

	.rp-sidebar.is-open {
		display: block;
	}
}

.rp-sidebar-label {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--sp-text-dim);
	margin: 0 0 12px;
}

.rp-sidebar-search {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--sp-ink);
	border-radius: 999px;
	background: var(--sp-card);
	padding: 9px 14px;
	margin-bottom: 14px;
}

.rp-sidebar-search svg {
	width: 14px;
	height: 14px;
	stroke: var(--sp-text-dim);
	flex-shrink: 0;
}

/* Qualified with [type="text"] (not just `input`) so this beats the theme's
   own `input[type=text], ... { }` reset on specificity (0-2-1 vs 0-1-1)
   instead of depending on load order — same reasoning as button.rp-nav-item
   above. */
.rp-sidebar-search input[type="text"] {
	border: none;
	outline: none;
	background: none;
	font-size: 12.5px;
	font-weight: 600;
	width: 100%;
	min-width: 0;
	color: var(--sp-ink);
	font-family: inherit;
}

.rp-sidebar-search input[type="text"]::placeholder {
	color: var(--sp-text-dim);
}

.rp-nav {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-bottom: 18px;
}

.rp-nav-empty {
	display: none;
	font-size: 12px;
	color: var(--sp-text-dim);
	padding: 8px 9px 16px;
	margin: 0;
}

.rp-nav-empty.is-visible {
	display: block;
}

/* Qualified with the `button` tag (not just `.rp-nav-item`) so this beats the
   theme's own `button { ... }` reset on specificity (0-1-1 vs 0-0-1) instead
   of depending on which stylesheet happens to print later in <head> — that
   dependency is exactly what broke this after replacement-parts.css's
   enqueue moved earlier (see fitrx_blocks_enqueue_replacement_parts_assets()
   in replacement-parts-helpers.php). */
button.rp-nav-item {
	position: relative; /* anchor for .is-active's ::before accent bar */
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-radius: 10px;
	padding: 7px 10px;
	cursor: pointer;
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.15s, transform 0.15s;
}

button.rp-nav-item[hidden] {
	display: none;
}

button.rp-nav-item:hover {
	background: var(--sp-tray);
	transform: translateX(2px);
}

button.rp-nav-item:active {
	/* Without this, the button falls back to the browser/OS's own native
	   "pressed" look for the instant between mousedown and the click
	   finishing (varies by browser — a dark flash in some), before
	   .is-active's JS-applied style ever gets a say. */
	background: var(--sp-tray);
}

/* The theme's own `button:focus { background: #c36 }` reset otherwise shows
   through here: clicking a button applies :focus (persists until blur) but
   not :focus-visible (that's keyboard-focus only in most browsers), so
   without this rule nothing in this file ever contests it. Selection is
   shown via .is-active below, not the native focus fill, so this just
   neutralizes it — .is-active (declared after, same specificity) still
   wins whenever both apply. */
button.rp-nav-item:focus {
	background: none;
}

button.rp-nav-item:focus-visible {
	outline: 2px solid var(--sp-red);
	outline-offset: 1px;
}

button.rp-nav-item.is-active {
	/* A light red wash + a left accent bar reads as "selected" without
	   painting the whole row the same strength as the brand red — a solid
	   --sp-pink fill here made the red thumb ring and red name text sit on
	   top of an already-pink background, which muddied together instead of
	   standing out. */
	background: rgba(206, 14, 45, 0.07);
}

.rp-nav-item.is-active::before {
	/* A plain box-shadow accent bar follows the row's own 10px corner
	   radius, so a bar this thin (3px) got visibly clipped into a short
	   floating sliver instead of a clean full-height line. An absolutely
	   positioned bar with its own small radius and a bit of vertical inset
	   clears the parent's curve entirely. */
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 3px;
	border-radius: 2px;
	background: var(--sp-red);
}

.rp-nav-item.is-active .rp-nav-thumb {
	box-shadow: 0 0 0 1.5px var(--sp-red);
}

.rp-nav-thumb {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	overflow: hidden;
	background: var(--sp-paper);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 1px var(--sp-line);
	transition: box-shadow 0.15s;
}

.rp-nav-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rp-nav-name {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--sp-ink);

	/* Belt-and-suspenders against a long, space-free name forcing this row
	   wider than the sidebar: white-space/word-break/overflow-wrap all
	   explicitly reset (in case anything upstream sets nowrap), and the
	   line-clamp caps it at 2 lines with an ellipsis instead of growing the
	   row indefinitely or spilling past the sidebar's fixed width. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.rp-nav-item.is-active .rp-nav-name {
	color: var(--sp-red);
}

.rp-nav-count {
	font-size: 11px;
	font-weight: 700;
	color: var(--sp-text-dim);
}

/* ---------- shared image swatch (real product photo, sidebar + section) ---------- */

.rp-swatch-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	padding: 4px;
}

.rp-swatch-placeholder {
	width: 60%;
	height: 60%;
	stroke: var(--sp-line);
	fill: none;
	stroke-width: 1.4;
}

/* ---------- model sections: tray background gives real separation ---------- */

.rp-main {
	min-width: 0;
}

.rp-section {
	scroll-margin-top: calc(var(--rp-sticky-top) + 20px);
	background: var(--sp-tray);
	border: 1px solid var(--sp-line);
	border-radius: 24px;
	padding: 26px 26px 28px;
	margin-bottom: 26px;
}

.rp-section:last-child {
	margin-bottom: 0;
}

.rp-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--sp-line);
}

.rp-section-title-group {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.rp-section-accent {
	flex-shrink: 0;
	width: 4px;
	height: 40px;
	border-radius: 999px;
	background: var(--sp-red);
}

.rp-model-swatch {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 13px;
	overflow: hidden;
	background: var(--sp-paper);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 1px var(--sp-line);
}

.rp-section-title-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	min-width: 0;
}

.rp-section-title {
	font-family: Anton, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 21px;
	margin: 0;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.rp-section-count {
	font-size: 12px;
	font-weight: 700;
	color: var(--sp-text-dim);
}

.rp-view-model {
	flex-shrink: 0;
	font-size: 11.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--sp-text-dim);
	text-decoration: underline;
	transition: color 0.15s;
}

.rp-view-model:hover,
.rp-view-model:focus-visible {
	color: var(--sp-red);
}

.rp-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

@media (max-width: 1100px) {
	.rp-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 700px) {
	.rp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 420px) {
	.rp-grid {
		grid-template-columns: 1fr;
	}
}

.rp-card {
	/* CSS grid items default to min-width: auto, which stops them shrinking
	   below their content's intrinsic width — a long, unbreakable product
	   name would otherwise push this card (and the whole grid row) past its
	   track and cause page-level horizontal scroll. */
	min-width: 0;
	background: var(--sp-card);
	border: 1px solid var(--sp-line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 18px -12px rgba(24, 24, 24, 0.12);
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}

.rp-card:hover {
	box-shadow: 0 20px 40px -20px rgba(24, 24, 24, 0.28);
	transform: translateY(-4px);
	border-color: var(--sp-red);
}

.rp-card:hover .rp-media-img,
.rp-card:hover .rp-media-placeholder {
	transform: scale(1.06);
}

.rp-media {
	aspect-ratio: 1 / 1;
	background: var(--sp-paper);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* wp_get_attachment_image() prints width/height attributes — override them,
   same reasoning as .shop-page__img in shop-page/style.scss: an <img> is a
   replaced element, inset alone won't size it. */
.rp-media-img {
	position: absolute;
	top: 6%;
	left: 6%;
	width: 88% !important;
	height: 88% !important;
	object-fit: contain;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rp-media-placeholder {
	width: 46%;
	height: 46%;
	stroke: var(--sp-line);
	fill: none;
	stroke-width: 1.4;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rp-body {
	padding: 14px 15px 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.rp-name {
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: 14.5px;
	text-transform: uppercase;
	margin: 0 0 12px;
	line-height: 1.25;
	flex: 1;

	/* Same reasoning as .rp-nav-name — clamp to 2 lines with an ellipsis so
	   one long product name can't blow out the card width or leave cards in
	   the same row at mismatched heights. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.rp-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.rp-price {
	font-family: Anton, sans-serif;
	font-size: 17px;
	color: var(--sp-ink);
	font-variant-numeric: tabular-nums;
}

.rp-view-btn {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	background: transparent;
	border: 1.5px solid var(--sp-ink);
	border-radius: 999px;
	color: var(--sp-ink);
	padding: 7px 13px;
	text-decoration: none;
	transition: 0.2s;
	white-space: nowrap;
}

.rp-view-btn:hover,
.rp-view-btn:focus-visible {
	background: var(--sp-red);
	border-color: var(--sp-red);
	color: #fff;
}

.rp-empty {
	border: 1.5px dashed var(--sp-line);
	border-radius: 18px;
	padding: 60px 20px;
	text-align: center;
	font-weight: 700;
	color: var(--sp-text-dim);
}

/* ---------- back to top ---------- */

/* Qualified with `button` for the same specificity reason as
   button.rp-nav-item above. */
button.rp-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	display: flex;
	align-items: center;
	gap: 7px;
	background: var(--sp-ink);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 12px 18px 12px 14px;
	font-size: 11.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-family: inherit;
	cursor: pointer;
	box-shadow: 0 10px 26px -10px rgba(24, 24, 24, 0.45);
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s, background 0.2s;
	z-index: 6;
}

.rp-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.rp-top:hover,
.rp-top:focus-visible {
	background: var(--sp-red);
}

.rp-top svg {
	width: 13px;
	height: 13px;
}

@media (prefers-reduced-motion: reduce) {
	.rp-page *,
	.rp-top {
		transition: none !important;
	}
}