/* =========================================================================
   Racexotics — theme.css
   The ONLY custom stylesheet. Brand tokens, typography, hero, header/footer,
   and restrained Fomantic-UI overrides. Everything else is stock Fomantic.
   Mobile-first; breakpoints at 768px and 1024px.
   ========================================================================= */

:root {
	--rx-font:         "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--rx-font-display: "Inter Tight", var(--rx-font);

	--rx-ink:      #111214;   /* near-black */
	--rx-ink-2:    #45484d;
	--rx-ink-3:    #7c8087;
	--rx-line:     #e5e6e8;
	--rx-paper:    #ffffff;
	--rx-paper-2:  #f5f5f6;

	--rx-accent:       #d0342c; /* the one strong accent */
	--rx-accent-hover: #b52a23;
	--rx-accent-ink:   #ffffff;

	--rx-radius:    10px;
	--rx-radius-sm: 6px;
	--rx-shadow:    0 1px 2px rgba(17, 18, 20, .06), 0 8px 24px rgba(17, 18, 20, .06);

	--rx-tap: 44px;

	--rx-s1: .25rem;  --rx-s2: .5rem;  --rx-s3: .75rem; --rx-s4: 1rem;
	--rx-s5: 1.5rem;  --rx-s6: 2rem;   --rx-s7: 3rem;   --rx-s8: 4.5rem;

	--rx-container: 1200px;
}

/* ---------- Base ------------------------------------------------------- */

html { scroll-behavior: smooth; }
body.rx {
	font-family: var(--rx-font);
	color: var(--rx-ink);
	background: var(--rx-paper);
	-webkit-font-smoothing: antialiased;
	line-height: 1.55;
}
body.rx h1, body.rx h2, body.rx h3, body.rx h4,
body.rx .ui.header {
	font-family: var(--rx-font-display);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--rx-ink);
}
body.rx a { color: var(--rx-ink); }
body.rx a:hover { color: var(--rx-accent); }
body.rx img, body.rx video { max-width: 100%; height: auto; }

body.rx .ui.button,
body.rx .ui.input > input,
body.rx .ui.form input, body.rx .ui.form textarea, body.rx .ui.form select,
body.rx .ui.dropdown, body.rx .ui.menu, body.rx .ui.message, body.rx .ui.label {
	font-family: var(--rx-font);
}

.rx-skip {
	position: absolute; left: -999px; top: 0;
	background: var(--rx-ink); color: #fff; padding: .75rem 1rem; z-index: 2000;
}
.rx-skip:focus { left: 0; color: #fff; }

.rx-main { min-height: 60vh; }

/* Fomantic sidebar wrapper: keep normal layout when closed */
body.rx .pusher { min-height: 100vh; display: flex; flex-direction: column; }
body.rx .pusher .rx-main { flex: 1 0 auto; }

/* ---------- Fomantic overrides (brand only) ---------------------------- */

body.rx .ui.container { max-width: var(--rx-container) !important; }

body.rx .ui.primary.button,
body.rx .ui.primary.buttons .button {
	background: var(--rx-accent);
	color: var(--rx-accent-ink);
	border-radius: var(--rx-radius-sm);
	font-weight: 600;
	min-height: var(--rx-tap);
}
body.rx .ui.primary.button:hover,
body.rx .ui.primary.button:focus,
body.rx .ui.primary.button:active { background: var(--rx-accent-hover); color: var(--rx-accent-ink); }

body.rx .ui.button { min-height: var(--rx-tap); border-radius: var(--rx-radius-sm); }
body.rx .ui.basic.button { box-shadow: 0 0 0 1px var(--rx-ink) inset !important; color: var(--rx-ink) !important; }
body.rx .ui.basic.button:hover { background: var(--rx-ink) !important; color: #fff !important; }

body.rx .ui.form input:not([type]), body.rx .ui.form input[type="text"], body.rx .ui.form input[type="email"],
body.rx .ui.form input[type="tel"], body.rx .ui.form input[type="number"], body.rx .ui.form input[type="password"],
body.rx .ui.form textarea, body.rx .ui.form .ui.selection.dropdown, body.rx .ui.form select {
	min-height: var(--rx-tap);
	border-radius: var(--rx-radius-sm);
	border-color: var(--rx-line);
}
body.rx .ui.form input:focus, body.rx .ui.form textarea:focus, body.rx .ui.form select:focus,
body.rx .ui.form .ui.selection.dropdown:focus, body.rx .ui.form .ui.selection.active.dropdown {
	border-color: var(--rx-ink);
	box-shadow: 0 0 0 3px rgba(17, 18, 20, .08);
}
body.rx .ui.form .field > label { font-weight: 600; color: var(--rx-ink); }

/* Fomantic checkboxes and toggles default to its blue; use the brand accent. */
body.rx .ui.toggle.checkbox input:checked ~ .box:before,
body.rx .ui.toggle.checkbox input:checked ~ label:before { background-color: var(--rx-accent) !important; }
body.rx .ui.toggle.checkbox input:focus:checked ~ .box:before,
body.rx .ui.toggle.checkbox input:focus:checked ~ label:before { background-color: var(--rx-accent-hover) !important; }
body.rx .ui.checkbox input:checked ~ .box:after,
body.rx .ui.checkbox input:checked ~ label:after { color: var(--rx-ink); }

body.rx .ui.card, body.rx .ui.cards > .card {
	border-radius: var(--rx-radius);
	box-shadow: 0 0 0 1px var(--rx-line);
}
body.rx .ui.card:hover, body.rx .ui.cards > .card:hover { box-shadow: var(--rx-shadow), 0 0 0 1px var(--rx-line); transform: none; }
body.rx .ui.segment { border-radius: var(--rx-radius); border-color: var(--rx-line); box-shadow: none; }
body.rx .ui.message { border-radius: var(--rx-radius-sm); box-shadow: none; border: 1px solid var(--rx-line); }
body.rx .ui.placeholder { border-radius: var(--rx-radius-sm); }
body.rx .ui.label.rx-tag {
	background: var(--rx-paper-2); color: var(--rx-ink-2);
	font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .7rem;
}
body.rx .ui.label.rx-tag.accent { background: var(--rx-accent); color: var(--rx-accent-ink); }

/* ---------- Header ----------------------------------------------------- */

.rx-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(150%) blur(10px);
	-webkit-backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid var(--rx-line);
}
.rx-header__inner.ui.container {
	display: flex; align-items: center; justify-content: space-between; gap: var(--rx-s4);
	min-height: 64px;
}
/* Brand lockup: real artwork, cropped from the supplied logo. Sized by height so
   both pieces scale together; width auto keeps each one's aspect ratio. */
.rx-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; max-width: 100%; }
/* Scoped to body.rx so these beat the global `body.rx img { height: auto }`
   reset - otherwise the lockup renders at its natural size. */
body.rx .rx-brand__mark { height: 30px; width: auto; flex: 0 0 auto; display: block; }
/* Height drives the size, but the wordmark is a wide image: without a width cap
   it pushes past narrow containers (it overflowed the sign-in card). min-width:0
   lets it shrink inside the flex row, and object-fit keeps the aspect ratio
   while it does. */
body.rx .rx-brand__wordmark {
	height: 15px; width: auto; display: block;
	min-width: 0; max-width: 100%; object-fit: contain; object-position: left center;
}
.rx-brand__word {
	font-family: var(--rx-font-display); font-weight: 700; font-size: 1.2rem;
	letter-spacing: -0.02em; text-transform: uppercase; color: var(--rx-ink);
}
.rx-brand:hover .rx-brand__word { color: var(--rx-ink); }
body.rx .rx-brand--footer .rx-brand__mark { height: 34px; }
body.rx .rx-brand--footer .rx-brand__wordmark { height: 17px; }
/* Narrow phones: keep the lockup from crowding the menu button. */
@media (max-width: 400px) {
	body.rx .rx-brand__mark { height: 25px; }
	body.rx .rx-brand__wordmark { height: 12px; }
}

.rx-nav { display: none; }
.rx-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--rx-s5); }
.rx-nav__link {
	display: inline-flex; align-items: center; min-height: var(--rx-tap);
	font-weight: 500; color: var(--rx-ink-2); position: relative;
}
.rx-nav__link:hover { color: var(--rx-ink); }
.rx-nav__link.is-active { color: var(--rx-ink); }
.rx-nav__link.is-active::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--rx-accent);
}

.rx-header__actions { display: flex; align-items: center; gap: var(--rx-s3); }
.rx-header__cta { display: none !important; }

.rx-burger {
	width: var(--rx-tap); height: var(--rx-tap);
	display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
	background: transparent; border: 0; border-radius: var(--rx-radius-sm); cursor: pointer;
}
.rx-burger span { display: block; width: 22px; height: 2px; background: var(--rx-ink); border-radius: 2px; }
.rx-burger:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: 2px; }

body.rx .ui.sidebar.rx-mobile-nav { background: var(--rx-paper); width: min(84vw, 320px); padding-top: var(--rx-s4); }
body.rx .ui.sidebar.rx-mobile-nav .item { font-size: 1.1rem; font-weight: 500; min-height: var(--rx-tap); color: var(--rx-ink); }
body.rx .ui.sidebar.rx-mobile-nav .item.active { color: var(--rx-accent); }
body.rx .ui.sidebar.rx-mobile-nav .rx-mobile-nav__cta { padding-top: var(--rx-s5); }

/* ---------- Sections --------------------------------------------------- */

.rx-section { padding: var(--rx-s7) 0; }
.rx-section--tight { padding: var(--rx-s6) 0; }
.rx-section--alt { background: var(--rx-paper-2); }
.rx-section__head {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: var(--rx-s3); margin-bottom: var(--rx-s5);
}
.rx-section__head h2 { margin: 0; font-size: 1.6rem; }
.rx-section__head .rx-more { font-weight: 600; color: var(--rx-ink-2); white-space: nowrap; }
.rx-section__head .rx-more:hover { color: var(--rx-accent); }
.rx-eyebrow {
	display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--rx-ink-3); margin-bottom: var(--rx-s2);
}
.rx-lede { font-size: 1.15rem; color: var(--rx-ink-2); max-width: 60ch; }
.rx-prose { max-width: 68ch; }
.rx-prose h2 { font-size: 1.35rem; margin-top: var(--rx-s6); }
.rx-prose h3 { font-size: 1.1rem; margin-top: var(--rx-s5); }
.rx-prose p, .rx-prose li { color: var(--rx-ink-2); }
.rx-prose p { margin-bottom: var(--rx-s4); }
.rx-prose .rx-updated { color: var(--rx-ink-3); font-size: .9rem; }

/* ---------- Hero ------------------------------------------------------- */

.rx-hero {
	position: relative; color: #fff; overflow: hidden;
	min-height: clamp(520px, 78vh, 820px); display: flex; flex-direction: column; justify-content: flex-end;
	background: var(--rx-ink);
}
.rx-hero__media {
	position: absolute; inset: 0;
	background-color: #1a1c20;
	/* Two scrims, not one: the vertical fade seats the copy at the bottom, and the
	   left-to-right fade keeps the headline legible over a bright subject. Without
	   it, white text lands on whatever happens to be in that part of the photo. */
	background-image:
		linear-gradient(100deg, rgba(17,18,20,.88) 0%, rgba(17,18,20,.55) 36%, rgba(17,18,20,0) 66%),
		linear-gradient(180deg, rgba(17,18,20,.15) 0%, rgba(17,18,20,.30) 45%, rgba(17,18,20,.88) 100%),
		url("../img/hero-poster.jpg"),
		radial-gradient(120% 80% at 80% 10%, #3a3d44 0%, #1a1c20 55%, #0d0e10 100%);
	background-size: cover, cover, cover, cover;
	background-position: center, center, center 40%, center;
}
.rx-hero__media video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9;
}
.rx-hero__content.ui.container { position: relative; padding: var(--rx-s8) 0 var(--rx-s7); }
.rx-hero .rx-eyebrow { color: rgba(255,255,255,.72); }
body.rx .rx-hero h1 {
	color: #fff; font-size: clamp(2.2rem, 7vw, 4.4rem); line-height: 1.02; margin: 0 0 var(--rx-s4);
	max-width: 14ch;
}
.rx-hero p { color: rgba(255,255,255,.82); font-size: 1.1rem; max-width: 46ch; margin-bottom: var(--rx-s5); }
.rx-hero__actions { display: flex; flex-wrap: wrap; gap: var(--rx-s3); }
body.rx .rx-hero .ui.basic.button.rx-hero__secondary {
	box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset !important; color: #fff !important;
}
body.rx .rx-hero .ui.basic.button.rx-hero__secondary:hover { background: #fff !important; color: var(--rx-ink) !important; }

/* ---------- Upcoming rally card ---------------------------------------- */

.rx-rally-card {
	display: grid; gap: var(--rx-s5);
	background: var(--rx-paper); border: 1px solid var(--rx-line); border-radius: var(--rx-radius);
	padding: var(--rx-s5);
}
/* Hero banner bleeds to the card edges; negative margins track the card padding. */
.rx-rally-card__media {
	grid-column: 1 / -1; display: block;
	margin: calc(-1 * var(--rx-s5)) calc(-1 * var(--rx-s5)) 0;
	border-radius: var(--rx-radius) var(--rx-radius) 0 0; overflow: hidden;
	background: var(--rx-paper-2); aspect-ratio: 16 / 9;
}
.rx-rally-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rx-rally-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rx-s3); margin-bottom: var(--rx-s3); }
.rx-rally-card__spots { font-weight: 600; color: var(--rx-accent); font-size: .9rem; }
body.rx .rx-rally-card__title { font-size: 1.5rem; margin: 0 0 var(--rx-s2); }
.rx-rally-card__title a { text-decoration: none; }
.rx-rally-card__tagline { color: var(--rx-ink-2); font-size: 1.05rem; margin: 0 0 var(--rx-s3); }
.rx-rally-card__teaser { color: var(--rx-ink-2); margin: 0 0 var(--rx-s4); }
.rx-rally-card__cta { margin-top: var(--rx-s2); }
.rx-rally-card__facts {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rx-s4);
	margin: 0; padding: var(--rx-s4) 0 0; border-top: 1px solid var(--rx-line);
}
.rx-fact { margin: 0; }
.rx-fact__label { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rx-ink-3); }
.rx-fact__value { font-weight: 600; font-size: 1.05rem; margin: 0; }

.rx-rally-list { display: grid; gap: var(--rx-s5); }

/* Video cards */
.rx-video__title { font-size: 1.05rem; margin: var(--rx-s3) 0 var(--rx-s1); line-height: 1.3; }
.rx-video__title a { text-decoration: none; }
.rx-video__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rx-s2); color: var(--rx-ink-3); font-size: .85rem; margin: 0; }
body.rx .rx-video .ui.embed { border-radius: var(--rx-radius-sm); overflow: hidden; background: var(--rx-paper-2); }

/* Instagram tiles */
.rx-ig-tile { position: relative; }
.rx-ig-tile__badge {
	position: absolute; right: 8px; bottom: 8px; color: #fff;
	text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.rx-frame__blank { display: block; width: 100%; height: 100%; background: var(--rx-paper-2); }

/* ---------- Media grids ------------------------------------------------ */

.rx-video-grid { display: grid; gap: var(--rx-s4); grid-template-columns: 1fr; }
.rx-video-grid .ui.placeholder .rectangular.image, .rx-video-grid .rx-embed { aspect-ratio: 16 / 9; height: auto; width: 100%; max-width: 100%; padding: 0; }
body.rx .ui.placeholder { max-width: none; }
.rx-video-grid > .ui.placeholder, .rx-ig-grid > .ui.placeholder, .rx-frame > .ui.placeholder { margin-top: 0 !important; }

.rx-ig-grid { display: grid; gap: var(--rx-s2); grid-template-columns: repeat(2, 1fr); }
.rx-ig-grid .ui.placeholder .square.image, .rx-ig-grid .rx-ig-tile { aspect-ratio: 1 / 1; height: auto; }
.rx-ig-tile { display: block; border-radius: var(--rx-radius-sm); overflow: hidden; background: var(--rx-paper-2); }
/* body.rx img sets height:auto; match its specificity or tiles letterbox. */
body.rx .rx-ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Past-rally film strip: horizontal scroll on mobile, grid on desktop */
.rx-filmstrip {
	display: flex; gap: var(--rx-s3); overflow-x: auto; scroll-snap-type: x mandatory;
	padding-bottom: var(--rx-s2); margin: 0 calc(-1 * var(--rx-s4)); padding-left: var(--rx-s4); padding-right: var(--rx-s4);
	-webkit-overflow-scrolling: touch;
}
.rx-filmstrip::-webkit-scrollbar { height: 6px; }
.rx-filmstrip::-webkit-scrollbar-thumb { background: var(--rx-line); border-radius: 3px; }
.rx-frame {
	flex: 0 0 72%; scroll-snap-align: start;
	border-radius: var(--rx-radius); overflow: hidden; position: relative; background: var(--rx-paper-2);
	aspect-ratio: 4 / 3; text-decoration: none; color: inherit;
}
.rx-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.rx-frame:hover img { transform: scale(1.03); }
.rx-frame__caption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: var(--rx-s4);
	background: linear-gradient(180deg, transparent, rgba(17,18,20,.85)); color: #fff;
}
.rx-frame__caption strong { display: block; font-family: var(--rx-font-display); font-size: 1.05rem; }
.rx-frame__caption span { font-size: .85rem; opacity: .85; }
.rx-frame .ui.placeholder { height: 100%; }

/* ---------- Rally detail ----------------------------------------------- */

.rx-draft-banner {
	background: var(--rx-ink); color: #fff; text-align: center;
	padding: var(--rx-s3) var(--rx-s4); font-size: .9rem;
}
.rx-draft-banner a { color: #fff; text-decoration: underline; }
.rx-rally-hero {
	background: var(--rx-ink); background-size: cover; background-position: center;
	color: #fff; padding: var(--rx-s7) 0 var(--rx-s6);
}
.rx-rally-hero--plain { background: linear-gradient(160deg, #1a1c20, #0d0e10); }
body.rx .rx-rally-hero h1 { color: #fff; font-size: clamp(1.9rem, 6vw, 3.2rem); line-height: 1.05; margin: var(--rx-s3) 0 var(--rx-s2); }
.rx-rally-hero__tagline { color: rgba(255,255,255,.85); font-size: 1.1rem; margin: 0 0 var(--rx-s3); }
.rx-rally-hero__meta { color: rgba(255,255,255,.75); display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--rx-s5); }
.rx-rally-hero__spots { display: block; margin-top: var(--rx-s3); color: rgba(255,255,255,.85); font-weight: 600; }
.rx-crumbs { font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: var(--rx-s3); }
.rx-crumbs a { color: rgba(255,255,255,.85); }
.rx-crumbs a:hover { color: #fff; }
body.rx .rx-rally-hero .ui.label.rx-tag { background: rgba(255,255,255,.15); color: #fff; }
body.rx .rx-rally-hero .ui.label.rx-tag.accent { background: var(--rx-accent); color: #fff; }

.rx-receipt { margin-top: var(--rx-s5); }
/* .ui.container is two classes, so it outranks a single-class rule - the
   grid only applies when this selector matches its specificity. */
.ui.container.rx-rally-body { display: grid; gap: var(--rx-s6); padding-top: var(--rx-s5); }
.rx-h2 { font-size: 1.4rem; margin: 0 0 var(--rx-s4); }
.rx-aside-h { font-size: .95rem; margin: 0 0 var(--rx-s2); }
.rx-rally-facts dl { margin: 0; }
.rx-rally-facts .rx-fact { padding: var(--rx-s3) 0; border-bottom: 1px solid var(--rx-line); }
.rx-rally-facts .rx-fact:last-of-type { border-bottom: 0; }
.rx-rally-facts .ui.button { margin-top: var(--rx-s4); }

/* Itinerary */
.rx-day { margin-bottom: var(--rx-s6); }
.rx-day__label {
	font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rx-ink-3);
	margin: 0 0 var(--rx-s3); padding-bottom: var(--rx-s2); border-bottom: 1px solid var(--rx-line);
}
.rx-day__items { list-style: none; margin: 0; padding: 0; }
.rx-stop { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--rx-s3); padding: var(--rx-s3) 0; }
.rx-stop__time { color: var(--rx-ink-3); font-size: .9rem; font-variant-numeric: tabular-nums; padding-top: 2px; }
.rx-stop__title { font-size: 1.05rem; margin: 0 0 2px; }
.rx-stop__location { color: var(--rx-ink-3); font-size: .9rem; margin: 0 0 var(--rx-s1); }
.rx-stop__desc { color: var(--rx-ink-2); margin: 0; }

/* Gallery */
.rx-gallery { display: grid; gap: var(--rx-s3); grid-template-columns: repeat(2, 1fr); }
.rx-gallery__item { margin: 0; }
.rx-gallery__item img { width: 100%; border-radius: var(--rx-radius-sm); display: block; aspect-ratio: 4/3; object-fit: cover; }
.rx-gallery__item figcaption { font-size: .85rem; color: var(--rx-ink-2); margin-top: var(--rx-s2); }

/* Roster */
.rx-roster { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rx-s2); }
.rx-roster__item {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rx-s3);
	padding: var(--rx-s3) 0; border-bottom: 1px solid var(--rx-line);
}
.rx-roster__name { font-weight: 600; }
.rx-roster__handle { color: var(--rx-ink-3); font-size: .9rem; }
.rx-roster__car { color: var(--rx-ink-2); margin-left: auto; font-size: .95rem; }

/* Signup form */
.rx-signup { max-width: 44rem; }
.rx-fieldset { border: 0; margin: 0 0 var(--rx-s6); padding: 0; }
.rx-legend {
	font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rx-ink-3);
	padding: 0 0 var(--rx-s3); width: 100%; border-bottom: 1px solid var(--rx-line); margin-bottom: var(--rx-s4);
}
.rx-hint { display: block; color: var(--rx-ink-3); font-size: .85rem; margin-top: var(--rx-s1); }
.rx-hint--block { margin: 0 0 var(--rx-s4); }
.rx-optional { color: var(--rx-ink-3); font-weight: 400; }
body.rx .rx-signup .field { margin-bottom: var(--rx-s4); }
.rx-signup__submit { margin-top: var(--rx-s5); }
.rx-signup__submit .rx-hint { margin-top: var(--rx-s3); }
/* Payment choice: deposit / full / custom */
.rx-payopts { display: grid; gap: var(--rx-s3); }
.rx-payopt {
	display: flex; align-items: flex-start; gap: var(--rx-s3);
	padding: var(--rx-s4); border: 1px solid var(--rx-line); border-radius: var(--rx-radius);
	cursor: pointer; background: var(--rx-paper); min-height: var(--rx-tap);
}
.rx-payopt:hover { border-color: var(--rx-ink-3); }
.rx-payopt input { margin-top: .3rem; accent-color: var(--rx-accent); width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.rx-payopt:has(input:checked) { border-color: var(--rx-accent); box-shadow: 0 0 0 1px var(--rx-accent); }
.rx-payopt:has(input:focus-visible) { outline: 2px solid var(--rx-ink); outline-offset: 2px; }
.rx-payopt__body { flex: 1 1 auto; min-width: 0; }
.rx-payopt__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--rx-s2); }
.rx-payopt__label { font-weight: 600; }
.rx-payopt__amount { font-weight: 600; font-family: var(--rx-font-display); }
.rx-payopt__note { display: block; color: var(--rx-ink-2); font-size: .88rem; margin-top: var(--rx-s1); }
.rx-custom-amount { margin-top: var(--rx-s4); }
.rx-custom-amount[hidden] { display: none; }
.rx-deposit-terms { display: block; font-size: .8rem; font-weight: 400; }

/* Inline verification feedback on the email/phone fields */
.rx-checking { color: var(--rx-ink-3); font-size: .85rem; margin-top: var(--rx-s1); display: block; }
body.rx .ui.form .field.rx-verified > label::after {
	content: " verified"; color: #1a7f4b; font-size: .75rem; font-weight: 600; letter-spacing: .04em;
}

/* ---------- Footer ----------------------------------------------------- */

.rx-footer { background: var(--rx-paper-2); border-top: 1px solid var(--rx-line); padding: var(--rx-s7) 0 var(--rx-s5); margin-top: var(--rx-s7); }
.rx-quote { margin: 0 0 var(--rx-s7); padding: 0; border: 0; max-width: 34ch; }
.rx-quote p { font-family: var(--rx-font-display); font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1.2; margin: 0 0 var(--rx-s2); }
.rx-quote cite { font-style: normal; color: var(--rx-ink-3); }
.rx-footer__grid { display: grid; gap: var(--rx-s6); grid-template-columns: 1fr; }
.rx-footer__brand p { color: var(--rx-ink-2); max-width: 36ch; margin-top: var(--rx-s3); }
.rx-footer__heading { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rx-ink-3); margin: 0 0 var(--rx-s3); font-weight: 600; }
.rx-footer__col ul { list-style: none; margin: 0; padding: 0; }
.rx-footer__col li { color: var(--rx-ink-2); min-height: 36px; display: flex; align-items: center; }
.rx-footer__col a { color: var(--rx-ink-2); }
.rx-footer__col a:hover { color: var(--rx-accent); }
.rx-social a { display: inline-flex; align-items: center; gap: .4rem; }
.rx-footer__legal {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rx-s3);
	margin-top: var(--rx-s7); padding-top: var(--rx-s4); border-top: 1px solid var(--rx-line);
	font-size: .85rem; color: var(--rx-ink-3);
}
.rx-footer__legal-links a { color: var(--rx-ink-3); margin-left: var(--rx-s4); }
.rx-footer__staff { opacity: .7; }
.rx-footer__staff:hover { opacity: 1; }

/* ---------- Page header & utilities ----------------------------------- */

.rx-page-head { padding: var(--rx-s7) 0 var(--rx-s5); }
.rx-page-head h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 var(--rx-s3); }

.rx-empty {
	text-align: center; padding: var(--rx-s7) var(--rx-s4);
	border: 1px dashed var(--rx-line); border-radius: var(--rx-radius); color: var(--rx-ink-2);
}
.rx-empty h3 { margin-bottom: var(--rx-s2); }

.rx-error-page { text-align: center; padding: var(--rx-s8) 0; }
.rx-error-page__code { font-family: var(--rx-font-display); font-size: 5rem; line-height: 1; color: var(--rx-line); }
.rx-error-page h1 { margin-top: var(--rx-s2); }
.rx-error-page .rx-lede { margin: 0 auto var(--rx-s5); }
.rx-error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--rx-s3); }
.rx-error-page__ref { margin-top: var(--rx-s5); font-size: .85rem; color: var(--rx-ink-3); }
.rx-error-page pre { text-align: left; overflow: auto; background: var(--rx-paper-2); padding: var(--rx-s4); border-radius: var(--rx-radius-sm); font-size: .8rem; }

.rx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* Read by screen readers, not shown. Lives here (not admin.css) so public pages have it too. */
.rx-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rx-muted { color: var(--rx-ink-3); }
.rx-mt-0 { margin-top: 0 !important; }

/* ---------- Pay page (Square Web Payments SDK) ------------------------- */

.rx-pay { padding-bottom: var(--rx-s7); }
.rx-pay__grid { display: grid; gap: var(--rx-s5); }
.rx-pay__summary dl { display: grid; gap: var(--rx-s3); margin: 0 0 var(--rx-s3); }
.rx-pay__amount { font-size: 1.5rem; }
.rx-pay__card { min-height: 90px; margin-bottom: var(--rx-s3); }
.rx-pay__secure { margin-top: var(--rx-s3); text-align: center; }
body.rx .rx-pay__form .ui.button { min-height: 48px; }
.rx-pay__wallets { display: grid; gap: var(--rx-s3); margin-bottom: var(--rx-s3); }
#rx-google-pay { min-height: 48px; }
.rx-apple-pay {
	display: block; width: 100%; height: 48px; cursor: pointer;
	-webkit-appearance: -apple-pay-button;
	-apple-pay-button-type: plain;
	-apple-pay-button-style: black;
}
.rx-pay__or { display: flex; align-items: center; gap: var(--rx-s3); color: var(--rx-ink-3); font-size: .85rem; margin: var(--rx-s2) 0 0; }
.rx-pay__or::before, .rx-pay__or::after { content: ""; flex: 1; border-top: 1px solid var(--rx-line); }

/* ---------- Breakpoints ------------------------------------------------ */

@media (min-width: 768px) {
	.rx-nav { display: block; }
	.rx-burger { display: none; }
	.rx-header__cta { display: inline-flex !important; }
	.rx-section { padding: var(--rx-s8) 0; }
	.rx-section__head h2 { font-size: 2rem; }
	.rx-hero { min-height: clamp(560px, 84vh, 860px); }
	.rx-rally-card--feature { grid-template-columns: 1.3fr 1fr; align-items: center; padding: var(--rx-s6); }
	.rx-rally-card--feature .rx-rally-card__facts { padding: 0 0 0 var(--rx-s5); border-top: 0; border-left: 1px solid var(--rx-line); }
	.rx-rally-card--feature .rx-rally-card__media,
	.rx-rally-card--list .rx-rally-card__media { margin: calc(-1 * var(--rx-s6)) calc(-1 * var(--rx-s6)) 0; aspect-ratio: 21 / 9; }
	.rx-rally-card--list { grid-template-columns: 1.3fr 1fr; align-items: center; padding: var(--rx-s6); }
	.rx-pay__grid { grid-template-columns: 1fr 1.4fr; align-items: start; }
	.rx-rally-card--list .rx-rally-card__facts { padding: 0 0 0 var(--rx-s5); border-top: 0; border-left: 1px solid var(--rx-line); }
	.rx-video-grid { grid-template-columns: repeat(2, 1fr); }
	.rx-ig-grid { grid-template-columns: repeat(4, 1fr); }
	.rx-frame { flex-basis: 40%; }
	.rx-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
	.rx-gallery { grid-template-columns: repeat(3, 1fr); }
	.rx-rally-hero { padding: var(--rx-s8) 0 var(--rx-s7); }
}

@media (min-width: 1024px) {
	.ui.container.rx-rally-body { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--rx-s7); align-items: start; }
	.rx-rally-aside { position: sticky; top: 88px; }
}

@media (min-width: 1024px) {
	.rx-video-grid { grid-template-columns: repeat(3, 1fr); }
	.rx-filmstrip { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; }
	.rx-frame { flex-basis: auto; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.rx-frame img { transition: none; }
}

/* ---------- Sponsors (public) ---------- */
.rx-section--sponsors { padding: var(--rx-s6) 0; border-top: 1px solid var(--rx-line); }
.rx-sponsors { display: grid; gap: var(--rx-s5); }
body.rx h3.rx-sponsors__tier {
	font-family: var(--rx-font); font-size: .72rem; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--rx-ink-3); margin: 0 0 var(--rx-s2);
}
.rx-sponsors__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--rx-s3) var(--rx-s6); }
body.rx .rx-sponsor { display: flex; align-items: center; min-height: 64px; min-width: var(--rx-tap); text-decoration: none; }
body.rx img.rx-sponsor__logo {
	display: block; width: auto; height: auto; max-height: 48px; max-width: 150px;
	filter: grayscale(1); opacity: .7; transition: filter .2s ease, opacity .2s ease;
}
.rx-sponsors__group:first-child:not(:only-child) img.rx-sponsor__logo { max-height: 64px; max-width: 190px; }
body.rx a.rx-sponsor:hover img.rx-sponsor__logo,
body.rx a.rx-sponsor:focus-visible img.rx-sponsor__logo { filter: none; opacity: 1; }
.rx-sponsor__name { font-family: var(--rx-font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--rx-ink-2); }
body.rx a.rx-sponsor:hover .rx-sponsor__name { color: var(--rx-accent); }
@media (prefers-reduced-motion: reduce) {
	body.rx img.rx-sponsor__logo { transition: none; }
}
/* ---------- Signup: car photo + discount code, roster photos ---------- */
.rx-carphoto__row { display: flex; align-items: center; gap: var(--rx-s3); flex-wrap: wrap; }
.rx-carphoto__row input[type="file"] { min-height: var(--rx-tap); max-width: 100%; }
body.rx img.rx-carphoto__preview { width: 96px; height: 72px; object-fit: cover; border-radius: var(--rx-radius-sm); border: 1px solid var(--rx-line); }
.rx-fieldset .field.rx-discount { margin-top: var(--rx-s5); }
.rx-discount__status { margin: var(--rx-s2) 0 0; color: #1a7f4b; font-size: .95rem; }
.rx-discount__status s { color: var(--rx-ink-3); }
body.rx .rx-discount .ui.action.input > input[readonly] { background: var(--rx-paper-2); }
.rx-roster__item--photo { align-items: center; }
body.rx img.rx-roster__photo { width: 96px; height: 72px; object-fit: cover; border-radius: var(--rx-radius-sm); background: var(--rx-paper-2); flex: 0 0 auto; }

/* Roster thumbnail opens the enlarged photo. */
.rx-roster__zoom {
	flex: 0 0 auto; padding: 0; margin: 0; border: 0; background: none;
	border-radius: var(--rx-radius-sm); cursor: zoom-in; line-height: 0;
	transition: transform .15s ease, box-shadow .15s ease;
}
.rx-roster__zoom:hover { transform: scale(1.04); box-shadow: 0 4px 14px rgba(17,18,20,.18); }
.rx-roster__zoom:focus-visible { outline: 3px solid var(--rx-accent); outline-offset: 2px; }

/* Enlarged photo: a basic Fomantic modal on a blurred, dimmed page. */
body.rx .ui.basic.modal.rx-photo-modal { width: auto; max-width: min(1100px, 94vw); position: relative; }
.rx-photo-modal__figure { margin: 0; text-align: center; }
.rx-photo-modal__img {
	display: block; margin: 0 auto; max-width: 100%; max-height: 80vh;
	border-radius: var(--rx-radius); box-shadow: 0 20px 60px rgba(0,0,0,.45); background: #111214;
}
.rx-photo-modal__caption { color: #fff; margin-top: var(--rx-s3); font-size: 1rem; font-weight: 600; }
.rx-photo-modal__close {
	position: absolute; top: -52px; right: 0; width: 44px; height: 44px;
	border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff;
	font-size: 1.25rem; cursor: pointer; line-height: 1;
}
.rx-photo-modal__close:hover, .rx-photo-modal__close:focus-visible { background: rgba(255,255,255,.3); outline: none; }
.rx-photo-modal__close .icon { margin: 0; }
/* ---------- Driver account: rally kit & room ---------- */
.rx-kitcard { border-left: 3px solid var(--rx-ink); }
.rx-kitcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--rx-s3); }
.rx-kitpick { padding: var(--rx-s3) 0; border-top: 1px solid var(--rx-line); }
.rx-kitpick:first-of-type { border-top: 0; }
.rx-kitpick__name { display: block; font-weight: 600; color: var(--rx-ink); margin-bottom: var(--rx-s2); padding: 0; font-size: 1rem; }
.rx-kitpick__help { margin: -4px 0 var(--rx-s2); }
.rx-kitpick__auto { margin: 0; }
body.rx .rx-kitpick__slot { border: 0; margin: 0 0 var(--rx-s3); padding: 0; min-width: 0; }
.rx-kitpick__who { padding: 0; margin-bottom: 6px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rx-ink-3); }
.rx-chips { display: flex; flex-wrap: wrap; gap: var(--rx-s2); }
.rx-chip__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rx-chip {
	display: inline-flex; align-items: center; justify-content: center; min-width: var(--rx-tap); min-height: var(--rx-tap);
	padding: 0 var(--rx-s4); border: 1px solid var(--rx-line); border-radius: var(--rx-radius-sm);
	background: var(--rx-paper); color: var(--rx-ink); font-weight: 600; cursor: pointer; user-select: none;
	transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.rx-chip:hover { border-color: var(--rx-ink); }
.rx-chip__input:checked + .rx-chip { background: var(--rx-ink); border-color: var(--rx-ink); color: #fff; }
.rx-chip__input:focus-visible + .rx-chip { outline: 2px solid var(--rx-accent); outline-offset: 2px; }
.rx-chip__input:disabled + .rx-chip { color: var(--rx-ink-3); background: var(--rx-paper-2); text-decoration: line-through; cursor: not-allowed; border-color: var(--rx-line); }

/* ---------- Driver account ---------- */
/* /account/*: sign-in, entries, profile, photos. Pills, money rows and the
   photo grid mirror admin.css (not loaded here), scoped to these pages. */
.rx-header__account { display: none; align-items: center; min-height: var(--rx-tap); font-weight: 500; color: var(--rx-ink-2); }
body.rx a.rx-header__account:hover { color: var(--rx-ink); }
@media (min-width: 768px) { .rx-header__account { display: inline-flex; } }

.rx-acct-narrow { max-width: 28rem; }
.rx-acct-narrow--wide { max-width: 44rem; }
.rx-acct-landing { margin: 0 auto; padding-bottom: var(--rx-s7); }
.rx-acct-foot { margin-top: var(--rx-s5); }
.rx-acct-head.rx-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--rx-s4); }
.rx-acct-actions { display: flex; flex-wrap: wrap; gap: var(--rx-s2); }
.rx-acct-actions form { margin: 0; }
body.rx .rx-acct-actions .ui.button { margin: 0; }
.rx-acct-back { display: inline-flex; align-items: center; min-height: var(--rx-tap); font-weight: 500; color: var(--rx-ink-2); margin-bottom: var(--rx-s2); }

.page-account .rx-pill {
	display: inline-block; padding: .18rem .5rem; border-radius: 999px;
	font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
	background: var(--rx-paper-2); color: var(--rx-ink-2); white-space: nowrap;
}
.page-account .rx-pill--confirmed, .page-account .rx-pill--paid { background: #e7f5ec; color: #1a7f4b; }
.page-account .rx-pill--pendingpayment { background: #fdf2e2; color: #9a6212; }
.page-account .rx-pill--waitlisted { background: #e8effb; color: #2a5db0; }
.page-account .rx-pill--cancelled, .page-account .rx-pill--refunded, .page-account .rx-pill--partiallyrefunded { background: #fdecea; color: #b0281f; }

.rx-acct-entries { display: grid; gap: var(--rx-s4); margin-bottom: var(--rx-s6); }
.rx-acct-entry { display: grid; grid-template-columns: 1fr; border: 1px solid var(--rx-line); border-radius: var(--rx-radius); overflow: hidden; background: var(--rx-paper); }
.rx-acct-entry__photo { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--rx-paper-2); color: var(--rx-ink-3); text-decoration: none; }
body.rx .rx-acct-entry__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rx-acct-entry__nophoto { font-size: .85rem; }
.rx-acct-entry__body { padding: var(--rx-s4) var(--rx-s5) var(--rx-s5); }
.rx-acct-entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rx-s2); margin-bottom: var(--rx-s2); font-size: .9rem; }
body.rx .rx-acct-entry__title { font-size: 1.3rem; margin: 0 0 var(--rx-s1); }
.rx-acct-entry__title a { text-decoration: none; }
.rx-acct-entry__sub { color: var(--rx-ink-2); margin: 0 0 var(--rx-s4); }
.rx-acct-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rx-s3); margin: 0 0 var(--rx-s4); padding: var(--rx-s3) 0; border-top: 1px solid var(--rx-line); border-bottom: 1px solid var(--rx-line); }
.rx-acct-money dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rx-ink-3); }
.rx-acct-money dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.rx-acct-discount { display: block; font-weight: 400; font-size: .8rem; color: var(--rx-ink-3); }
.rx-acct-owing { color: var(--rx-accent); }

.rx-acct-grid { display: grid; gap: var(--rx-s4); grid-template-columns: 1fr; margin-bottom: var(--rx-s4); }
.rx-acct-card { border: 1px solid var(--rx-line); border-radius: var(--rx-radius); padding: var(--rx-s5); background: var(--rx-paper); margin-bottom: var(--rx-s4); min-width: 0; }
.rx-acct-grid > .rx-acct-card { margin-bottom: 0; }
body.rx .rx-acct-card__title { font-size: 1.15rem; margin: 0 0 var(--rx-s3); }
body.rx .rx-acct-card__sub { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rx-ink-3); margin: var(--rx-s5) 0 var(--rx-s2); }
.rx-acct-section { margin: var(--rx-s6) 0; }
body.rx .ui.message.rx-acct-locked { margin: 0 0 var(--rx-s4); }

.page-account .rx-sum { display: grid; gap: var(--rx-s1); }
.page-account .rx-sum__row { display: flex; justify-content: space-between; gap: var(--rx-s4); font-variant-numeric: tabular-nums; }
.page-account .rx-sum__row--total { border-top: 1px solid var(--rx-line); padding-top: var(--rx-s2); font-weight: 600; }
.rx-acct-pay { margin-top: var(--rx-s4); padding: var(--rx-s3) var(--rx-s4); background: var(--rx-paper-2); border-radius: var(--rx-radius-sm); }
.rx-acct-pay p { margin: 0; color: var(--rx-ink-2); }
.rx-acct-payments { list-style: none; margin: 0; padding: 0; }
.rx-acct-payments li { display: grid; gap: 2px; padding: var(--rx-s2) 0; border-bottom: 1px solid var(--rx-line); font-size: .92rem; }
.rx-acct-payments__main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rx-s2); }

.rx-acct-carphoto { margin: 0 0 var(--rx-s4); border-radius: var(--rx-radius-sm); overflow: hidden; background: var(--rx-paper-2); aspect-ratio: 4 / 3; }
.rx-acct-carphoto--square { aspect-ratio: 1 / 1; max-width: 16rem; }
body.rx .rx-acct-carphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-account input[type="file"] { min-height: var(--rx-tap); max-width: 100%; }
.rx-acct-btnrow { display: flex; flex-wrap: wrap; gap: var(--rx-s2); }
body.rx .rx-acct-btnrow .ui.button { margin: 0; }
.rx-acct-savebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--rx-s3); }
.rx-acct-status { margin-right: auto; color: var(--rx-ink-2); font-size: .9rem; }
.rx-acct-current { font-weight: 600; margin: 0 0 var(--rx-s3); overflow-wrap: anywhere; }
.rx-fieldset.rx-acct-pax { margin-bottom: var(--rx-s4); }
.rx-acct-paxlist { margin: 0; padding-left: 1.1rem; }
.rx-acct-kv { display: grid; grid-template-columns: 1fr; gap: var(--rx-s1) var(--rx-s4); margin: 0; }
.rx-acct-kv dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rx-ink-3); margin-top: var(--rx-s2); }
.rx-acct-kv dd { margin: 0; overflow-wrap: anywhere; }

.page-account .rx-photo-grid { list-style: none; margin: var(--rx-s4) 0 0; padding: 0; display: grid; gap: var(--rx-s3); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.page-account .rx-photo { border: 1px solid var(--rx-line); border-radius: var(--rx-radius-sm); overflow: hidden; background: var(--rx-paper); display: flex; flex-direction: column; }
.page-account .rx-photo__img { display: block; aspect-ratio: 1 / 1; background: var(--rx-paper-2); }
body.rx.page-account .rx-photo__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-account .rx-photo__body { padding: var(--rx-s2); display: grid; gap: var(--rx-s1); font-size: .88rem; }
body.rx.page-account .rx-photo__body .ui.button { margin: 0; }

@media (min-width: 768px) {
	.rx-acct-entry { grid-template-columns: 14rem minmax(0, 1fr); }
	.rx-acct-entry__photo { aspect-ratio: auto; min-height: 100%; }
	.rx-acct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rx-acct-kv { grid-template-columns: 11rem 1fr; }
	.rx-acct-kv dt { margin-top: 0; padding-top: 2px; }
}
/* ---------- Shop ---------- */
/* Catalog grid: two up on phones, three on tablets, four on desktop. */
.rx-products { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rx-s5) var(--rx-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.rx .rx-product__link { display: grid; gap: var(--rx-s1); text-decoration: none; color: var(--rx-ink); }
.rx-product__img { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--rx-radius); overflow: hidden; background: var(--rx-paper-2); margin-bottom: var(--rx-s2); }
body.rx .rx-product__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.rx-product__link:hover .rx-product__img img { transform: scale(1.03); }
.rx-product.is-soldout .rx-product__img img { opacity: .55; }
.rx-product__flag {
	position: absolute; top: var(--rx-s2); left: var(--rx-s2); background: var(--rx-ink); color: #fff;
	font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px;
}
.rx-product__name { font-family: var(--rx-font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.rx-product__sub { color: var(--rx-ink-3); font-size: .88rem; }
.rx-product__price { font-weight: 600; display: flex; flex-wrap: wrap; gap: var(--rx-s2); align-items: baseline; }
.rx-product__link:hover .rx-product__name { color: var(--rx-accent); }

/* Product page */
.rx-crumbs--light { color: var(--rx-ink-3); margin: var(--rx-s5) 0 var(--rx-s4); }
body.rx .rx-crumbs--light a { color: var(--rx-ink-2); }
.rx-pdp { display: grid; gap: var(--rx-s6); grid-template-columns: minmax(0, 1fr); padding-bottom: var(--rx-s7); }
.rx-pdp__main { aspect-ratio: 1 / 1; border-radius: var(--rx-radius); overflow: hidden; background: var(--rx-paper-2); }
body.rx .rx-pdp__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rx-pdp__thumbs { list-style: none; margin: var(--rx-s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--rx-s2); }
.rx-pdp__thumb {
	width: 64px; height: 64px; padding: 0; border: 1px solid var(--rx-line); border-radius: var(--rx-radius-sm);
	background: var(--rx-paper-2); overflow: hidden; cursor: pointer;
}
.rx-pdp__thumb.is-active { border-color: var(--rx-ink); box-shadow: 0 0 0 1px var(--rx-ink); }
.rx-pdp__thumb:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: 2px; }
body.rx .rx-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.rx h1.rx-pdp__name { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; margin: 0 0 var(--rx-s2); }
.rx-pdp__sub { color: var(--rx-ink-2); font-size: 1.1rem; margin: 0 0 var(--rx-s4); }
.rx-pdp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rx-s3); font-family: var(--rx-font-display); font-weight: 700; font-size: 1.5rem; margin: 0 0 var(--rx-s5); }
.rx-pdp__price s { font-size: 1.1rem; font-weight: 500; }
body.rx .rx-pdp__label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rx-ink-3); margin: 0 0 var(--rx-s2); }
.rx-options { list-style: none; margin: 0 0 var(--rx-s5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--rx-s2); }
.rx-option {
	display: inline-flex; align-items: center; gap: .4rem; min-height: var(--rx-tap); padding: 0 var(--rx-s4);
	border: 1px solid var(--rx-line); border-radius: var(--rx-radius-sm); font-weight: 500;
}
.rx-option.is-soldout { color: var(--rx-ink-3); background: var(--rx-paper-2); }
.rx-option.is-soldout .rx-option__label { text-decoration: line-through; }
.rx-option__price { color: var(--rx-ink-2); font-size: .88rem; }
.rx-option__note { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
body.rx .ui.message.rx-pdp__soon { margin: 0 0 var(--rx-s5); background: var(--rx-paper-2); }
.rx-pdp__desc { margin-top: var(--rx-s2); }

@media (min-width: 768px) {
	.rx-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rx-s6) var(--rx-s5); }
	.rx-pdp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--rx-s7); align-items: start; }
	.rx-pdp__gallery { position: sticky; top: 88px; }
}
@media (min-width: 1024px) {
	.rx-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	body.rx .rx-product__img img { transition: none; }
}
/* ---------- Rally recap, rally videos, home feature video ---------- */
.rx-recap { padding-top: 0; }
.rx-recap__title, .rx-feature-video__title { margin: var(--rx-s2) 0 0; color: var(--rx-ink-2); font-size: .95rem; }
body.rx .ui.embed.rx-embed { border-radius: var(--rx-radius-sm); overflow: hidden; background-color: var(--rx-ink); }
.rx-rally-videos { display: grid; gap: var(--rx-s4); grid-template-columns: 1fr; margin-bottom: var(--rx-s4); }
.rx-rally-video { margin: 0; }
.rx-rally-video figcaption { font-size: .85rem; color: var(--rx-ink-2); margin-top: var(--rx-s2); }
/* latest episode: home page and top of /watch/ */
.rx-feature-video { max-width: 880px; margin: 0 auto; }
@media (min-width: 768px) {
	.rx-rally-videos { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Watch page ---------- */
.rx-more-row { margin: var(--rx-s6) 0 0; text-align: center; }