/* RM Product Rail — tokens from Figma "Research Market" (Products — Catalogue, node 115:337). */

.rm-cards {
	--rm-text: #101111;
	--rm-text-2: #585a5a;
	--rm-surface: #edf2f2;
	--rm-panel: #c3f8f8;
	--rm-brand: #057f80;
	--rm-brand-hover: #046a6b;
	--rm-pill-border: #b3c7c7;
	--rm-track: #d3dfdf;
	--rm-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--rm-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-family: var(--rm-font);
	color: var(--rm-text);
}

.rm-rail {
	--rm-card-w: 280px;
	--rm-gap: 32px;
	/* Set by rail.js to the edges of the element the shortcode sits in, so the first card lines
	   up with the section heading while the rail itself bleeds to the viewport edge. */
	--rm-inset-start: max(20px, calc((100vw - 1216px) / 2));
	--rm-inset-end: var(--rm-inset-start);

	position: relative;
	width: var(--rm-vw, 100vw);
	max-width: none;
	margin-left: calc(-1 * var(--rm-inset-start));
}

@media (max-width: 767px) {
	.rm-rail {
		--rm-gap: 16px;
		--rm-card-w: min(280px, 76vw);
	}
}

/* ---- Track: native scrolling + snap. On iOS this IS the system scroller: momentum, rubber band
   and snap physics come from UIKit, which is why it feels like an app and a JS carousel never does. */

.rm-rail__track {
	display: flex;
	gap: var(--rm-gap);
	overflow-x: auto;
	overflow-y: hidden;
	padding: 4px var(--rm-inset-end) 8px var(--rm-inset-start);
	scroll-padding-inline: var(--rm-inset-start) var(--rm-inset-end);
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	outline: none;
}

.rm-rail__track::-webkit-scrollbar {
	display: none;
}

.rm-rail__track:focus-visible {
	outline: 2px solid var(--rm-brand);
	outline-offset: -2px;
}

/* Mouse drag (desktop): snap is lifted while dragging, rail.js lands it on a card. */
.rm-rail.is-dragging .rm-rail__track {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.rm-rail.is-dragging .rm-card {
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.rm-rail__track {
		cursor: grab;
	}
}

/* ---- Progress bar */

.rm-rail__progress {
	position: relative;
	height: 5px;
	margin: 40px var(--rm-inset-end) 0 var(--rm-inset-start);
	border-radius: 16px;
	background: var(--rm-track);
	overflow: hidden;
}

.rm-rail__thumb {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--rm-thumb-w, 30%);
	border-radius: inherit;
	background: var(--rm-text);
	opacity: 0.6;
	transform: translate3d(var(--rm-thumb-x, 0px), 0, 0);
	will-change: transform;
}

.rm-rail.is-static .rm-rail__progress {
	display: none;
}

@media (max-width: 767px) {
	.rm-rail__progress {
		margin-top: 20px;
	}
}

/* ---- Card (option A, "Figma, sharpened"). Selectors carry .rm-cards so the Elementor kit's global
   h3 (32px), button (12/22px padding, pill, 16px) and link rules cannot win. */

.rm-card {
	position: relative;
	flex: 0 0 var(--rm-card-w);
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	border-radius: 16px;
	background: var(--rm-surface);
	color: var(--rm-text);
	overflow: hidden;
	/* Own layer while the track scrolls: no repaint flicker on iOS. */
	transform: translateZ(0);
}

.rm-card__panel {
	display: flex;
	flex-direction: column;
	height: 228px;
	padding: 16px 16px 0;
	background: var(--rm-panel);
}

.rm-cards .rm-card__title {
	margin: 0;
	font-family: var(--rm-font);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.22px;
	color: var(--rm-text);
	overflow-wrap: anywhere;
	text-wrap: balance;
}

/* !important is deliberate: the kit's link colour is `.elementor-kit-N .elementor-widget-container
   *:not(…)…> a:not(…)…`, a :not() chain no class selector can outrank. */
.rm-cards .rm-card__title a {
	color: inherit !important;
	text-decoration: none;
}

.rm-cards .rm-card__type {
	margin: 2px 0 0;
	font-family: var(--rm-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.48px;
	text-transform: uppercase;
	color: var(--rm-text-2);
}

/* The vial fills what the name leaves and runs ~18px into the buy area; a two-line name gets a
   slightly smaller vial instead of the cap covering the text. */
.rm-card__vial {
	position: relative;
	z-index: 1;
	display: block;
	flex: 1 1 0;
	width: 200px;
	max-height: 200px;
	min-height: 0;
	margin: 4px auto -18px;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
	-webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
	.rm-card:hover .rm-card__vial {
		transform: translateY(-6px);
	}
}

.rm-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	border-radius: 0 !important; /* kit rounds every img (16/14/12px) */
	-webkit-user-drag: none;
	user-select: none;
}

/* ---- Buy area: size control, then price + add. */

.rm-card__buy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: auto;
	padding: 26px 16px 16px;
}

.rm-card__seg {
	display: flex;
	gap: 4px;
	padding: 3px;
	border: 1px solid var(--rm-track);
	border-radius: 999px;
	background: #fff;
}

.rm-cards .rm-card__seg button.rm-card__size {
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 6px 4px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	font-family: var(--rm-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.26px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--rm-text-2);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.rm-cards .rm-card__seg button.rm-card__size:hover,
.rm-cards .rm-card__seg button.rm-card__size:focus {
	background: var(--rm-surface);
	color: var(--rm-text);
}

.rm-cards .rm-card__seg button.rm-card__size[aria-checked="true"],
.rm-cards .rm-card__seg button.rm-card__size[aria-checked="true"]:hover,
.rm-cards .rm-card__seg button.rm-card__size[aria-checked="true"]:focus {
	background: var(--rm-text);
	color: #fff;
}

.rm-cards .rm-card__seg button.rm-card__size:active {
	transform: scale(0.96);
}

.rm-cards .rm-card__seg button.rm-card__size:focus-visible {
	outline: 2px solid var(--rm-brand);
	outline-offset: 1px;
}

/* Same height as the control, so every card's price row sits on one line across the rail. */
.rm-cards .rm-card__one {
	display: flex;
	align-items: center;
	min-height: 34px;
	margin: 0;
	font-family: var(--rm-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.48px;
	text-transform: uppercase;
	color: var(--rm-text-2);
}

.rm-card__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
}

.rm-card__amount {
	min-width: 0;
}

.rm-cards .rm-card__price {
	font-family: var(--rm-font);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.24px;
	color: var(--rm-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}

.rm-card__price.is-swapping {
	opacity: 0.35;
}

.rm-card__price .woocommerce-Price-amount {
	font-weight: inherit;
}

.rm-card__price del {
	margin-right: 6px;
	font-size: 16px;
	font-weight: 500;
	color: var(--rm-text-2);
}

.rm-card__price ins {
	text-decoration: none;
}

.rm-card__price .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.rm-cards .rm-card__unit {
	margin-top: 2px;
	font-family: var(--rm-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.24px;
	color: var(--rm-text-2);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.rm-card__save {
	color: var(--rm-brand);
}

/* ---- Add pill: 36px drawn, 44px touch target. */

.rm-cards .rm-card__row .rm-card__add {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: var(--rm-brand);
	box-shadow: none;
	color: #fff;
	font-family: var(--rm-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.52px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.18s ease, transform 0.12s ease;
}

.rm-cards .rm-card__row .rm-card__add::before {
	content: "";
	position: absolute;
	inset: -4px;
}

.rm-cards .rm-card__row .rm-card__add:hover,
.rm-cards .rm-card__row .rm-card__add:focus,
.rm-cards .rm-card__row .rm-card__add.is-added {
	background: var(--rm-text);
	color: #fff;
}

.rm-cards .rm-card__row .rm-card__add:active {
	transform: scale(0.96);
}

.rm-cards .rm-card__row .rm-card__add:focus-visible {
	outline: 2px solid var(--rm-brand);
	outline-offset: 2px;
}

.rm-card__check,
.rm-card__spinner {
	display: none;
}

.rm-card__add.is-added .rm-card__check {
	display: block;
}

/* Loading keeps the pill's width: the label goes invisible, the spinner sits on top. */
.rm-card__add.is-loading .rm-card__add-label,
.rm-card__add.is-loading .rm-card__check {
	visibility: hidden;
}

.rm-card__add.is-loading .rm-card__spinner {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: rm-spin 0.7s linear infinite;
}

.rm-card__add.is-error {
	animation: rm-shake 0.35s ease;
}

/* WooCommerce appends a "View cart" link after the button on added_to_cart; the side cart covers it.
   !important: on shop pages `.woocommerce a.added_to_cart` (body class) outranks this. */
.rm-cards .rm-card__row .added_to_cart {
	display: none !important;
}

/* ---- Grid ([rm_product_grid]): shop, category and tag archives, product search.
   4 columns at the 1216px content width (280px cards, as on the rail), 2 on tablet, 1 on phones. */

.rm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 32px;
}

.rm-grid .rm-card {
	height: 100%;
	transform: none;
}

@media (max-width: 1024px) {
	.rm-grid {
		gap: 24px;
	}
}

@media (max-width: 559px) {
	.rm-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.rm-grid__foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 48px;
}

/* Outline pill, as the Loop Grid's "Load more" was. Colour needs !important against the kit's link rule. */
.rm-cards .rm-grid__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 24px;
	border: 1.5px solid var(--rm-text);
	border-radius: 999px;
	background: transparent;
	color: var(--rm-text) !important;
	font-family: var(--rm-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.96px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.rm-cards .rm-grid__more:hover,
.rm-cards .rm-grid__more:focus-visible {
	background: var(--rm-text);
	color: #fff !important;
}

.rm-cards .rm-grid__more.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

.rm-grid-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 48px 0;
}

.rm-grid-empty .rm-grid-empty__title {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--rm-text);
}

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

@keyframes rm-shake {
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
	.rm-card__vial,
	.rm-card__price,
	.rm-cards .rm-card__seg button.rm-card__size,
	.rm-cards .rm-card__row .rm-card__add {
		transition: none;
	}
	.rm-card__add.is-error {
		animation: none;
	}
}