@layer rl-framework {
/**
 * RubyLane UI Framework - ADA Compliant
 * Version: 1.0.0
 * 
 * A vintage-inspired UI framework for antiques and collectibles
 */

/* Media break points
 * Token	min-width	max-width	Target
 * xs		—			575px		phones portrait
 * sm		576px		767px		phones landscape
 * md		768px		991px		tablets
 * lg		992px		1199px		desktops
 * xl		1200px		1399px		large desktops
 * xxl		1400px		—			wide screens

	Base: mobile (0–575px) — no query needed 

	@media (min-width: 576px) {
		sm: phones landscape
	}
	
	@media (min-width: 768px) {
		md: tablets
	}
	
	@media (min-width: 992px) {
		lg: desktops
	}
	
	@media (min-width: 1200px) {
		xl: large desktops
	}
	
	@media (min-width: 1400px) {
		xxl: wide screens 
	}
 # Media break points
 */

/* Fonts (Crimson Text, Lato): loaded by a <link> in rlsitehead.tcl, as an
 * @import inside this @layer block would be ignored */

:root {
	/* Base Colors - HSL format for easy variations */
	/* RubyLane Brand Red: #d92e34 */
	--rl-primary-h: 358;
	--rl-primary-s: 73%;
	--rl-primary-l: 52%;

	--rl-neutral-h: 30;
	--rl-neutral-s: 20%;

	/* Danger red - slightly different from brand red */
	--rl-danger-h: 352;
	--rl-danger-s: 60%;
	--rl-danger-l: 44%;

	--rl-success-h: 120;
	--rl-success-s: 45%;
	--rl-success-l: 38%;

	--rl-warning-h: 51;
	--rl-warning-s: 100%;
	--rl-warning-l: 53%;

	--rl-info-h: 210;
	--rl-info-s: 82%;
	--rl-info-l: 85%;

	/* Semantic Color Variables */
	--rl-primary: hsl(var(--rl-primary-h), var(--rl-primary-s), var(--rl-primary-l));
	--rl-primary-dark: hsl(var(--rl-primary-h), var(--rl-primary-s), 35%);
	--rl-primary-light: hsl(var(--rl-primary-h), var(--rl-primary-s), 55%);

	--rl-text-dark: hsl(var(--rl-neutral-h), 25%, 15%);
	--rl-text-medium: hsl(var(--rl-neutral-h), var(--rl-neutral-s), 35%);
	--rl-text-light: hsl(var(--rl-neutral-h), var(--rl-neutral-s), 55%);
	--rl-text-muted: hsl(var(--rl-neutral-h), var(--rl-neutral-s), 58%);

	--rl-border: hsl(var(--rl-neutral-h), 25%, 75%);
	--rl-border-hover: hsl(var(--rl-neutral-h), 20%, 62%);
	--rl-border-focus: hsl(var(--rl-neutral-h), 30%, 45%);
	--rl-border-dark: hsl(var(--rl-neutral-h), 20%, 45%);

	--rl-spacing-xs: 4px;
	--rl-spacing-sm: 8px;
	--rl-spacing-md: 16px;
	--rl-spacing-lg: 24px;
	--rl-spacing-xl: 32px;

	/* The type scale (a 1.25 ratio), also as the .rl-text-* classes */
	--rl-text-xs: 0.64rem;
	--rl-text-sm: 0.8rem;
	--rl-text-base: 1rem;
	--rl-text-lg: 1.25rem;
	--rl-text-xl: 1.563rem;
	--rl-text-2xl: 1.953rem;
	--rl-text-3xl: 2.441rem;

	--rl-busy-spinner: rgba(0, 0, 0, 0.4));

	--rl-bg-white: hsl(0, 0%, 100%);
	--rl-bg-light: hsl(var(--rl-neutral-h), 30%, 98%);
	--rl-bg-hover: hsl(var(--rl-neutral-h), 25%, 96%);
	--rl-bg-disabled: hsl(var(--rl-neutral-h), 20%, 93%);

	--rl-danger: hsl(var(--rl-danger-h), var(--rl-danger-s), var(--rl-danger-l));
	--rl-danger-dark: hsl(var(--rl-danger-h), var(--rl-danger-s), 40%);
	--rl-danger-light: hsl(var(--rl-danger-h), 70%, 96%);
	--rl-danger-text: hsl(var(--rl-danger-h), 65%, 22%);

	--rl-success: hsl(var(--rl-success-h), var(--rl-success-s), var(--rl-success-l));
	--rl-success-dark: hsl(var(--rl-success-h), var(--rl-success-s), 30%);
	--rl-success-light: hsl(var(--rl-success-h), 43%, 90%);
	--rl-success-text: hsl(var(--rl-success-h), 35%, 28%);

	--rl-warning: hsl(var(--rl-warning-h), var(--rl-warning-s), var(--rl-warning-l));
	--rl-warning-dark: hsl(var(--rl-warning-h), 75%, 40%);
	--rl-warning-light: hsl(var(--rl-warning-h), 80%, 96%);
	--rl-warning-text: hsl(var(--rl-warning-h), 75%, 40%);

	--rl-info: hsl(var(--rl-info-h), var(--rl-info-s), var(--rl-info-l));
	--rl-info-dark: hsl(var(--rl-info-h), 75%, 40%);
	--rl-info-light: hsl(var(--rl-info-h), 80%, 96%);
	--rl-info-text: hsl(var(--rl-info-h), 70%, 28%);


	/* Dark Mode Colors */
	--rl-dark-bg: hsl(var(--rl-neutral-h), 15%, 17%);
	--rl-dark-bg-hover: hsla(0, 0%, 100%, 0.08);
	--rl-dark-bg-hover-strong: hsla(0, 0%, 100%, 0.12);
	--rl-dark-bg-focus: hsla(0, 0%, 100%, 0.15);
	--rl-dark-border: hsl(var(--rl-neutral-h), 12%, 42%);
	--rl-dark-border-hover: hsl(var(--rl-neutral-h), 15%, 52%);
	--rl-dark-text: hsl(var(--rl-neutral-h), 20%, 97%);
	--rl-dark-text-medium: hsl(var(--rl-neutral-h), 20%, 82%);

	/* Focus Shadow */
	--rl-focus-shadow: 0 0 0 3px hsla(var(--rl-neutral-h), 30%, 45%, 0.25);
	--rl-focus-shadow-primary: 0 0 0 3px hsla(var(--rl-primary-h), var(--rl-primary-s), var(--rl-primary-l), 0.3);
	--rl-focus-shadow-danger: 0 0 0 3px hsla(var(--rl-danger-h), var(--rl-danger-s), var(--rl-danger-l), 0.3);
	--rl-focus-shadow-success: 0 0 0 3px hsla(var(--rl-success-h), var(--rl-success-s), var(--rl-success-l), 0.3);
	--rl-focus-shadow-warning: 0 0 0 3px hsla(var(--rl-warning-h), var(--rl-warning-s), var(--rl-warning-l), 0.3);
	--rl-focus-shadow-info: 0 0 0 3px hsla(var(--rl-info-h), var(--rl-info-s), var(--rl-info-l), 0.3);
	--rl-focus-shadow-dark: 0 0 0 3px hsla(var(--rl-neutral-h), 20%, 82%, 0.3);

/* ============================================
 * SEASONAL COLOR VARIABLES
 * Define base variables that will be set dynamically
 * ============================================ */

	/* Primary seasonal colors (set dynamically) */
	/* Default: Fall palette */
	--seasonal-color-1: #E6D7C3; /* Warm Beige */
	--seasonal-color-1-text: #1A1A1A;

	--seasonal-color-2: #9CAF88; /* Sage Green */
	--seasonal-color-2-text: #1A1A1A;

	--seasonal-color-3: #D4A5A5; /* Dusty Rose */
	--seasonal-color-3-text: #1A1A1A;

	--seasonal-color-4: #C8B99C; /* Warm Taupe */
	--seasonal-color-4-text: #1A1A1A;

	--seasonal-border: #CD7F32; /* Warm Bronze */

	/* Universal text colors */
	--seasonal-text-dark: #1A1A1A;
	--seasonal-text-light: #FFFFFF;

	--rl-font-cursive: 'emmeline_regularregular', cursive;
    --rl-font-serif: 'Crimson Text', serif;
    --rl-font-sans-serif: 'Lato', sans-serif;
    --rl-font-mono: monospace;
}

/* retire these */
.esmall {font-size:60%}
.small {font-size:80%}
.medium {font-size:110%}
.large {font-size:120%}
.elarge {font-size:150%}
.eelarge {font-size:200%}

.rl-text-xs   { font-size: var(--rl-text-xs);   line-height: 1.6; }
.rl-text-sm   { font-size: var(--rl-text-sm);   line-height: 1.5; }
.rl-text-base { font-size: var(--rl-text-base); line-height: 1.5; }
.rl-text-lg.rl-text-lg   { font-size: var(--rl-text-lg); line-height: 1.4; }
.rl-text-xl.rl-text-xl   { font-size: var(--rl-text-xl); line-height: 1.3; }
.rl-text-2xl  { font-size: var(--rl-text-2xl);  line-height: 1.2; }
.rl-text-3xl  { font-size: var(--rl-text-3xl);  line-height: 1.1; }

.rl-overflow-hidden { overflow: hidden; }

.rl-font-serif { font-family: var(--rl-font-serif); }
.rl-font-sans-serif { font-family: var(--rl-font-sans-serif); }
.rl-font-monospace { font-family: var(--rl-font-mono); }
.rl-font-cursive { font-family: var(--rl-font-cursive); }
.rl-font-bold { font-weight: 700; }
.rl-font-normal { font-weight: 400; }

/* retire these */
.font-serif { font-family: var(--rl-font-serif); }
.font-sans-serif { font-family: var(--rl-font-sans-serif); }
.font-monospace { font-family: var(--rl-font-mono); }
.font-cursive { font-family: var(--rl-font-cursive); }
.font-bold { font-weight: 700; }
.font-normal { font-weight: 400; }

.rl-body {
    font-family: var(--rl-font-sans-serif);
	font-size: 16px;
	line-height: 1.5;
	color: var(--rl-text-dark);
	background-color: var(--rl-bg-white);
	width: 100%;
	min-height: 100vh;
	padding: 0;
	margin: 0 auto;
	position: relative;
	font-weight: normal;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow-x: hidden;
}

#maincontent, #maincontent_grey {
	max-width: 1320px;
	width: 100%;
	justify-self: center;
	padding: 0 15px;
}
#maincontent_grey {
	background-color: var(--rl-bg-light);
}

#header {
	max-width: 1320px;
	width: 100%;
	justify-self: center;
}
#shopsellrelax .rl-btn {
	color: var(--rl-text-dark);
	font-size: 20px;
	border-radius: 4px;
	border: none;
	font-family: var(--rl-font-serif);
	text-transform: uppercase;
}

#shopsellrelax .rl-btn--link {
	box-shadow: none;
	padding: 0 1.5em 0 0;
	&:hover,
	&:focus {
		color: var(--rl-primary);
	}
}
/* The site menu's bars (was bt-2x, unlayered in rl_legacy.css) */
#shopsellrelax .rl-menu-icon {
	font-size: 2em;
	vertical-align: -20%;
}
/* Phones: the menu button and the search box as one compact row, lined up
 * with the page's 15px gutters */
@media (max-width: 767px) {
	#shopsellrelax {
		padding-left: 7px;
	}
	#shopsellrelax .rl-drawer-toggle {
		padding: 6px 8px;
	}
	/* Sell and Relax: their buttons are rl-hidden-xs, but the empty
	 * wrappers still took a gap each */
	#shopsellrelax > .rl-dropdown {
		display: none;
	}
	#shopsellrelax .rl-menu-icon {
		font-size: 1.5em;
	}
	#navbar-search .rl-input {
		height: 44px;
		padding-block: 8px;
	}
}

#util {
	padding-right: 10px;
}
/* One solid panel behind the icons and their labels: the seasonal garland
 * under the header showed through and between separate translucent patches */
#util > .rl-flex {
	/* As the logo's (#rubylane in rl_legacy.css): a hint of the garland */
	background: rgba(255, 255, 255, 0.92);
	border-radius: 16px;
	padding: 2px 8px 4px;
	margin-block: 6px;
}
#util .rl-btn,
#util button.rl-dropdown-toggle {
	box-shadow: none;
	font-weight: bold;
	border-color: transparent;
	border-radius: 20px;
	background: transparent;
	/* Short, so the panel covers little of the garland */
	padding-block: 4px;
}
#util .utillabel {
	font-size: 12px;
	letter-spacing: -0.3px;
}
#util .rl-btn:hover,
#util button.rl-dropdown-toggle:hover,
#util .rl-btn:focus,
#util button.rl-dropdown-toggle:focus {
	background: var(--rl-bg-hover);
	border-color: var(--rl-border-hover);
}
#util .rl-btn:hover span,
#util button.rl-dropdown-toggle:hover span,
#util .rl-btn:focus span,
#util button.rl-dropdown-toggle:focus span,
#util .rl-btn:hover svg,
#util button.rl-dropdown-toggle:hover svg,
#util .rl-btn:focus svg,
#util button.rl-dropdown-toggle:focus svg {
	color: var(--rl-primary);
}
@media (max-width: 767px) {
	/* Icons only, no labels: the panel is a pill */
	#util > .rl-flex {
		border-radius: 999px;
		padding: 2px 4px;
		box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.25);
	}
	#util .rl-btn,
	#util button.rl-dropdown-toggle {
		padding: 5px;
	}
	/* A menu taller than the screen scrolls inside itself, so its pinned
	 * item (Sign Out) stays in sight.  Its top is measured as it opens
	 * (openDropdown), as a banner above the header pushes it down */
	#util .rl-dropdown-menu {
		max-height: calc(100dvh - var(--rl-dropdown-top, 70px) - 8px);
	}
}

/* ============================================
 * SEASONAL THEME CLASSES
 * Applied to html or body element
 * ============================================ */

/* SPRING - Fresh Garden Palette */
.theme-spring {
	--seasonal-color-1: #F7D5D3; /* Soft Blush */
	--seasonal-color-1-text: #1A1A1A; /* 13.5:1 ✅ AAA */

	--seasonal-color-2: #A4B8A0; /* Sage Green */
	--seasonal-color-2-text: #1A1A1A; /* 8.8:1 ✅ AAA */

	--seasonal-color-3: #FFF5E1; /* Buttercream */
	--seasonal-color-3-text: #1A1A1A; /* 17.2:1 ✅ AAA */

	--seasonal-color-4: #D4C5D8; /* Lavender Mist */
	--seasonal-color-4-text: #1A1A1A; /* 11.1:1 ✅ AAA */

	--seasonal-border: #A4B8A0; /* Soft Sage */
}

/* SUMMER - Sun-Drenched Coast Palette */
.theme-summer {
	--seasonal-color-1: #F4E8D0; /* Sun-Bleached Sand */
	--seasonal-color-1-text: #1A1A1A; /* 15.2:1 ✅ AAA */

	--seasonal-color-2: #4A90A4; /* Deep Coastal Blue (darkened for AA) */
	--seasonal-color-2-text: #FFFFFF; /* 4.8:1 ✅ AA */

	--seasonal-color-3: #E8C5A8; /* Driftwood Coral */
	--seasonal-color-3-text: #1A1A1A; /* 11.4:1 ✅ AAA */

	--seasonal-color-4: #F8F3E8; /* Sea Salt */
	--seasonal-color-4-text: #1A1A1A; /* 17.5:1 ✅ AAA */

	--seasonal-border: #3D7A8C; /* Ocean Depth */
}

/* FALL - Autumn Harvest Palette */
.theme-fall {
	--seasonal-color-1: #E6D7C3; /* Warm Beige */
	--seasonal-color-1-text: #1A1A1A; /* 12.3:1 ✅ AAA */

	--seasonal-color-2: #9CAF88; /* Sage Green */
	--seasonal-color-2-text: #1A1A1A; /* 7.6:1 ✅ AAA */

	--seasonal-color-3: #D4A5A5; /* Dusty Rose */
	--seasonal-color-3-text: #1A1A1A; /* 9.4:1 ✅ AAA */

	--seasonal-color-4: #C8B99C; /* Warm Taupe */
	--seasonal-color-4-text: #1A1A1A; /* 10.1:1 ✅ AAA */

	--seasonal-border: #CD7F32; /* Warm Bronze */
}

/* WINTER - Icy Elegance Palette */
.theme-winter {
	--seasonal-color-1: #E8F1F5; /* Frost White */
	--seasonal-color-1-text: #1A1A1A; /* 15.8:1 ✅ AAA */

	--seasonal-color-2: #B8D4E0; /* Glacier Blue */
	--seasonal-color-2-text: #1A1A1A; /* 11.8:1 ✅ AAA */

	--seasonal-color-3: #C8D5DB; /* Silver Mist */
	--seasonal-color-3-text: #1A1A1A; /* 11.5:1 ✅ AAA */

	--seasonal-color-4: #D4DFE8; /* Powder Blue */
	--seasonal-color-4-text: #1A1A1A; /* 12.4:1 ✅ AAA */

	--seasonal-border: #7A9AAD; /* Steel Blue */
}

/* EASTER - Spring Celebration Palette */
.theme-easter {
	--seasonal-color-1: #C8E3E8; /* Robin's Egg Blue */
	--seasonal-color-1-text: #1A1A1A; /* 12.7:1 ✅ AAA */

	--seasonal-color-2: #D8C8E0; /* Soft Lilac */
	--seasonal-color-2-text: #1A1A1A; /* 11.4:1 ✅ AAA */

	--seasonal-color-3: #F8E8B8; /* Buttercup Yellow */
	--seasonal-color-3-text: #1A1A1A; /* 15.9:1 ✅ AAA */

	--seasonal-color-4: #D5E8D4; /* Mint Green */
	--seasonal-color-4-text: #1A1A1A; /* 13.8:1 ✅ AAA */

	--seasonal-border: #B8A8C0; /* Lavender */
}

/* VALENTINE'S DAY - Romantic Elegance Palette */
.theme-valentines {
	--seasonal-color-1: #C8708A; /* Deep Rose (richer pink) */
	--seasonal-color-1-text: #FFFFFF;

	--seasonal-color-2: #6B1A2F; /* Rich Burgundy (deeper red) */
	--seasonal-color-2-text: #FFFFFF;

	--seasonal-color-3: #f5e6d3; /* Rich Gold (deeper champagne) */
	--seasonal-color-3-text: #1A1A1A;

	--seasonal-color-4: #9B5565; /* Deep Mauve (richer rose) */
	--seasonal-color-4-text: #FFFFFF;

	--seasonal-border: #9B2847;
}

/* CHRISTMAS - Traditional Elegance Palette */
.theme-christmas {
	--seasonal-color-1: #9B2847; /* Cranberry Red */
	--seasonal-color-1-text: #FFFFFF; /* 7.2:1 ✅ AAA */

	--seasonal-color-2: #2F5233; /* Evergreen */
	--seasonal-color-2-text: #FFFFFF; /* 10.4:1 ✅ AAA */

	--seasonal-color-3: #F5E6D3; /* Champagne Gold */
	--seasonal-color-3-text: #1A1A1A; /* 14.2:1 ✅ AAA */

	--seasonal-color-4: #F8F9FA; /* Snow White */
	--seasonal-color-4-text: #1A1A1A; /* 18.5:1 ✅ AAA */

	--seasonal-border: #4A6741; /* Deep Pine */
	--seasonal-border-text: #FFFFFF;
}

/* HALLOWEEN - Spooky Elegance Palette */
.theme-halloween {
	--seasonal-color-1: #D57A3D; /* Pumpkin Spice (warm orange-tan) */
	--seasonal-color-1-text: #1A1A1A; /* Dark text */

	--seasonal-color-2: #6B4478; /* Twilight Plum (rich purple) */
	--seasonal-color-2-text: #FFFFFF; /* White text */

	--seasonal-color-3: #F5EFE0; /* Bone Ivory (cream) */
	--seasonal-color-3-text: #1A1A1A; /* Dark text */

	--seasonal-color-4: #3D3D3D; /* Shadow Charcoal (dark gray) */
	--seasonal-color-4-text: #FFFFFF; /* White text */

	--seasonal-border: #7D5A8C; /* Dusk Plum */
}

/* ============================================
 * UTILITY CLASSES USING VARIABLES
 * ============================================ */

/* Background color utilities */
.bg-seasonal-1 { background-color: var(--seasonal-color-1); }
.bg-seasonal-2 { background-color: var(--seasonal-color-2); }
.bg-seasonal-3 { background-color: var(--seasonal-color-3); }
.bg-seasonal-4 { background-color: var(--seasonal-color-4); }
.bg-seasonal-border { background-color: var(--seasonal-border); }

/* Text color utilities */
.text-seasonal-1 { color: var(--seasonal-color-1-text); }
.text-seasonal-2 { color: var(--seasonal-color-2-text); }
.text-seasonal-3 { color: var(--seasonal-color-3-text); }
.text-seasonal-4 { color: var(--seasonal-color-4-text); }

/* Border utilities */
.border-seasonal { border-color: var(--seasonal-border); }

/* Text color utilities */
.text-seasonal-dark { color: var(--seasonal-text-dark); }
.text-seasonal-light { color: var(--seasonal-text-light); }


h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 16px; }
h6, .h6 { font-size: 14px; }

h1, .h1, h2, h3, h4, h5, h6 {
	margin: 0.7em 0;
	font-family: var(--rl-font-serif);
	font-weight: bold;
	line-height: 1.2em;
}

/* :is(h1, .h1, h2, h3) {
	small, .small { font-size: 65%; }
}

:is(h4, h5, h6) {
	small, .small { font-size: 70%; }
}
*/

#maincontent_grey {
	:is(h1, .h1, h2, h3, h4, h5, h6) {
		small, .small {
			color: var(--rl-text-dark);
		}
	}

	.text-muted {
		color: var(--rl-text-dark);
	}
}
/* ── rl-heading ─────────────────────────────────── */

.rl-heading {
	text-wrap: balance;
	color: var(--ada-heading, inherit);
	margin: 1.25rem 0;
}


.rl-heading a {
	text-decoration: none !important;
}

/* -- line ------------------------------------------------
* Makes the heading a flex row so pseudo-element lines
* can fill remaining space.
* Default (no --center): line on the right only (::after).
* With --center: lines on both sides (::before + ::after).
* --------------------------------------------------------- */
.rl-heading--line {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 1rem;
}
@media (min-width: 768px) {
	.rl-heading--line {
		gap: 3rem;
	}
}

.rl-heading--line::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background-color: var(--rl-text-light);
	min-width: 15px;
}

.rl-heading--center.rl-heading--line::before {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background-color: var(--rl-text-light);
	min-width: 15px;
}

/* -- center ---------------------------------------------- */
.rl-heading--center {
	text-align: center;
}

/* Default is serif — change this one line to change the default */
.rl-heading {
	font-family: var(--rl-font-serif);
}

.rl-heading--cursive {
	font-family: var(--rl-font-cursive);
	font-weight: normal;
}

.rl-heading--sans-serif {
	font-family: var(--rl-font-sans-serif);
}

.rl-heading--serif {
	font-family: var(--rl-font-serif);
}

/* -- cursive --------------------------------------------- */
.rl-heading--cursive {
	font-size: 2rem;
	line-height: 1.1;
}
@media (min-width: 768px) {
	.rl-heading--cursive {
		font-size: 3rem;
	}
}

h1.rl-heading--cursive {
	font-size: 3rem;
	line-height: 1.1;
}
@media (min-width: 768px) {
	h1.rl-heading--cursive {
		font-size: 5rem;
	}
}

/* -- condensed ------------------------------------------- */
.rl-heading--condensed {
	margin: 0.1em;
}

/* -- inline children ------------------------------------- */
.rl-heading__inline {
	font-weight: normal;
	font-family: var(--rl-font-sans-serif);
	font-size: 0.64em;
	color: var(--rl-text-muted);
	margin-left: 0.5em;
	padding-left: 0.5em;
	border-left: 1px solid var(--rl-text-light);
	border-left-style: dashed;
}

.rl-heading__sup {
	text-transform: none;
}

/* -- undertext (sits after the heading element) ---------- */
.rl-heading__undertext {
	margin-top: -1.25rem;
	margin-bottom: 1rem;
	font-family: var(--rl-font-sans-serif);
	color: var(--rl-text-muted);
}

.rl-heading__undertext--center {
	text-align: center;
}

.heading-main, .heading-sub {
	text-wrap: balance;
	font-family: var(--rl-font-serif);
	a {
		text-decoration: none !important;
	}
	display: flex;
	align-items: center;
	width: 100%;
	margin: 20px 0;
	color: var(--ada-heading, inherit);
	gap: 1rem;
	@media (min-width: 768px) {
		gap: 3rem;
	}
}

.heading-main :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}
.heading-sub :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}
.heading-center {
	justify-content: center;
	text-align: center;
}

.heading-cursive {
	font-family: var(--rl-font-cursive);
	font-weight: normal;
	font-size: 3rem;
	line-height : 3rem;
	@media (min-width: 768px) {
		font-size: 4rem;
		line-height : 4rem;
	}
}
.heading-cursive > h1 {
	margin: 15px;
	font-size: 5rem;
	line-height : 5rem;
	@media (min-width: 768px) {
		font-size: 10rem;
		line-height : 10rem;
	}
}
.heading-condensed {
	margin-top: 0.1em;
}
.heading-line {
	flex-grow: 1;
	height: 1px;
	background-color: var(--rl-text-light);
	min-width: 15px;
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Credit: HTML5 Boilerplate */

.sr-only-focusable {
	&:active,
	&:focus {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
	}
}


/* Plain text inside an ada container uses the computed text color.
   Kept ahead of the component rules so their own color wins on a tie */
[data-ada-colors] {
	color: var(--ada-text, inherit);
}

/* The search filters' links (search_filters.tcl) style their own */
a:not(.rl-btn):not(.link-item):not(.rl-activity__row):not([role="option"]):not(.rl-breadcrumb-item a):not(.rl-filter-option):not(.rl-filter-toggle):not(.rl-filter-chip):not(.rl-tab):not(.rl-wl-lists__link) {
	color: var(--ada-link, var(--rl-text-dark));
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration: none;
	font-weight: bold;

	&:hover,
	&:focus {
		color: var(--ada-link-hover, var(--rl-primary-dark));
		text-decoration-color: var(--ada-link-hover, var(--rl-primary-dark));
		text-decoration-line: underline;
	}

	&:not(.rl-btn):focus {
		.tab-focus();
		border-radius: 4px;
	}
}

.rl-link--underline a {
	text-decoration: underline !important;
}
.rl-link--nobold a {
	font-weight: normal !important;
}


hr {
	border: none;
	border-top: 1px solid var(--rl-text-medium);
	margin-block: var(--rl-spacing-lg);
}

/* Base Input Container */
.rl-input-wrapper {
    position: relative;
    margin-bottom: var(--rl-spacing-lg);
}
.rl-checkbox-wrapper.rl-input-compact,
.rl-radio-wrapper.rl-input-compact,
.rl-input-wrapper.rl-input-compact,
.rl-input-compact .rl-checkbox-wrapper,
.rl-input-compact .rl-radio-wrapper,
.rl-input-compact .rl-input-wrapper {
    margin-bottom: 0;
}
/* A checkbox, radio or toggle's inline-flex label sits on a text line, which
   leaves a descender gap below it: in a compact row (centred with a link, say)
   that would lift the label above its neighbours */
.rl-checkbox-wrapper.rl-input-compact > :is(.rl-checkbox, .rl-toggle),
.rl-radio-wrapper.rl-input-compact > .rl-radio,
.rl-input-compact :is(.rl-checkbox-wrapper, .rl-toggle-wrapper) > :is(.rl-checkbox, .rl-toggle),
.rl-input-compact .rl-radio-wrapper > .rl-radio {
    vertical-align: top;
}

/* In a flex row the gap spaces the fields, and their bottom margin (for fields
   stacked down a form) would push the row's alignment off, eg. a button in an
   -items end row sitting a margin below the input next to it: the row keeps the
   space below it instead (unless it's compact) */
.rl-flex > :is(.rl-input-wrapper, .rl-radio-group),
.rl-flex > * > :is(.rl-input-wrapper, .rl-radio-group):only-child {
    margin-bottom: 0;
}
.rl-flex:not(.rl-input-compact, .rl-input-compact *):has(> :is(.rl-input-wrapper, .rl-radio-group), > * > :is(.rl-input-wrapper, .rl-radio-group):only-child) {
    margin-bottom: var(--rl-spacing-lg);
}

/* Base Input Styles - Light Background */
.rl-input {
    width: 100%;
    padding: 16px 12px 8px;
    font-size: 16px;
    font-family: var(--rl-font-sans-serif);
    border: 2px solid var(--rl-border);
    border-radius: 2px;
    background: var(--rl-bg-white);
    color: var(--rl-text-dark);
    transition: all 0.2s ease;
    box-sizing: border-box;
    line-height: 1.5;
}

.rl-input:hover {
    border-color: var(--rl-border-hover);
}

.rl-input:focus {
    outline: none;
    border-color: var(--rl-border-focus);
    box-shadow: var(--rl-focus-shadow);
}

/* Input with left icon */
.rl-input-wrapper.has-icon-left .rl-input {
    padding-left: 40px;
}
.rl-input-wrapper.has-icon-left {
	flex-grow: 1;
}

/* Input with right icon */
.rl-input-wrapper.has-icon-right .rl-input {
    padding-right: 40px;
}
.rl-input-wrapper.has-icon-right {
	flex-grow: 1;
}

/* Icon Styles */
.rl-icon {
    position: absolute;
    top: 18px;
    color: var(--rl-text-medium);
    font-size: 16px;
    pointer-events: none;
    font-weight: 600;
}

.rl-icon.left {
    left: 12px;
}

.rl-icon.right {
    right: 12px;
}

.rl-input-wrapper.dark .rl-icon {
    color: var(--rl-dark-text-medium);
}

/* A button in the field's end (rl_form_input -endbutton), eg. show password */
.rl-input-wrapper.has-endbutton .rl-input {
    padding-right: 48px;
}
.rl-input-endbutton {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    color: var(--rl-text-medium);
    cursor: pointer;
}
.rl-input-endbutton:hover {
    color: var(--rl-text-dark);
}
.rl-input-endbutton:focus-visible {
    outline: none;
    box-shadow: var(--rl-focus-shadow);
}
/* Pressed (showing the password): the eye struck through */
.rl-show-password[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 0 0 1px var(--rl-bg-white);
    transform: rotate(-45deg);
}

.rl-input:focus ~ .rl-icon {
    color: var(--rl-border-focus);
}

.rl-input-wrapper.dark .rl-input:focus ~ .rl-icon {
    color: hsl(var(--rl-neutral-h), 20%, 90%);
}

/* Floating Label */
.rl-label {
    position: absolute;
    left: 12px;
    top: 14px;
    font-size: 16px;
    color: var(--rl-text-medium);
    pointer-events: none;
    transition: all 0.2s ease;
    font-family: var(--rl-font-serif);
    background: var(--rl-bg-white);
    padding: 0 4px;
    line-height: 1;
}

/* Required indicator */
.rl-label .required, .rl-radio-group-label .required {
    color: var(--rl-danger);
    margin-left: 2px;
}

/* Adjust label position for left icon */
.rl-input-wrapper.has-icon-left .rl-label {
    left: 40px;
}

/* Label when input is focused or has value */
/* or placeholder visible and input field is empty */
.rl-input:focus + .rl-label,
.rl-input:placeholder-shown + .rl-label,
.rl-input.has-value ~ .rl-label {
    top: -8px;
    font-size: 16px;
    color: var(--rl-border-focus);
    font-weight: 600;
    left: 12px;
}

/* Placeholder (use sparingly) */
.rl-input::placeholder {
    color: var(--rl-text-muted);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.rl-input:focus::placeholder {
    opacity: 0.9;
}
/* Hide placeholder when input has a value */
.rl-input.has-value::placeholder {
	opacity: 0;
}

/* Dark Background Variant */
.rl-input-wrapper.dark .rl-input {
    background: var(--rl-dark-bg-hover);
    border-color: var(--rl-dark-border);
    color: var(--rl-dark-text);
}

.rl-input-wrapper.dark .rl-input:hover {
    border-color: var(--rl-dark-border-hover);
}

.rl-input-wrapper.dark .rl-input:focus {
    border-color: var(--rl-border);
    box-shadow: var(--rl-focus-shadow-dark);
    background: var(--rl-dark-bg-focus);
}

.rl-input-wrapper.dark .rl-label {
    color: var(--rl-dark-text-medium);
    background: transparent;
}

.rl-input-wrapper.dark .rl-input:focus + .rl-label,
.rl-input-wrapper.dark .rl-input.has-value + .rl-label {
    color: hsl(var(--rl-neutral-h), 20%, 90%);
    background: var(--rl-dark-bg);
    top: -8px;
}

.rl-input-wrapper.dark .rl-input::placeholder {
    color: var(--rl-text-muted);
}

/* Select/Dropdown Styles */
select.rl-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a4d43' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.rl-input-wrapper.dark select.rl-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4cdc4' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

select.rl-input option {
    background: var(--rl-bg-white);
    color: var(--rl-text-dark);
}

.rl-input-wrapper.dark select.rl-input option {
    background: var(--rl-dark-bg);
    color: var(--rl-dark-text);
}

/* Group headings in the list, where the platform draws it from css (Windows
   and Linux; macOS and phones use their own menus) */
select.rl-input optgroup {
	background: var(--rl-bg-hover);
	color: var(--rl-primary);
	font-style: normal;
	font-weight: 700;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
select.rl-input optgroup option {
	font-weight: normal;
	font-size: 1rem;
	text-transform: none;
	letter-spacing: normal;
}
.rl-input-wrapper.dark select.rl-input optgroup {
	background: var(--rl-dark-bg-hover);
	color: var(--rl-dark-text);
}

/* Where the browser can draw the list itself (Chrome and Edge 135+, on macOS
   too), a grouped select's list is drawn in the page and styled like the
   rl-suggest menus.  Elsewhere it stays the platform's menu. */
@supports (appearance: base-select) {
	select.rl-input:has(optgroup),
	select.rl-input:has(optgroup)::picker(select) {
		appearance: base-select;
	}
	/* The closed select keeps its own arrow (background-image), and its height
	   with the empty option chosen: a line plus .rl-input's padding and border */
	select.rl-input:has(optgroup)::picker-icon {
		display: none;
	}
	select.rl-input:has(optgroup) {
		min-height: calc(1lh + 28px);
	}
	select.rl-input:has(optgroup)::picker(select) {
		/* As wide as the select, not its longest title */
		width: anchor-size(width);
		max-width: calc(100vw - 16px);
		max-height: min(70vh, 34rem);
		overflow-x: hidden;
		padding: var(--rl-spacing-xs) 0;
		background: var(--rl-bg-white);
		border: 1px solid var(--rl-border);
		border-radius: 8px;
		box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.15);
		font-family: var(--rl-font-sans-serif);
	}
	select.rl-input:has(optgroup) optgroup {
		padding: 6px 0 2px;
	}
	select.rl-input:has(optgroup) optgroup + optgroup {
		margin-top: var(--rl-spacing-xs);
		border-top: 1px solid var(--rl-border);
	}
	select.rl-input:has(optgroup) optgroup legend {
		padding: 2px 16px 6px;
	}
	select.rl-input:has(optgroup) option {
		padding: 6px 16px;
		white-space: normal;
	}
	select.rl-input:has(optgroup) option::checkmark {
		display: none;
	}
	select.rl-input:has(optgroup) option:hover,
	select.rl-input:has(optgroup) option:focus-visible {
		background: var(--rl-bg-hover);
		color: var(--rl-primary);
		outline: none;
	}
	select.rl-input:has(optgroup) option:checked {
		background: var(--rl-bg-hover);
		box-shadow: inset 3px 0 0 var(--rl-primary);
		font-weight: 700;
	}
}

/* Always float label for select */
select.rl-input + .rl-label {
    top: -8px;
    font-size: 16px;
    font-weight: 600;
}

/* Date Input Styles */
input[type="date"].rl-input {
    cursor: pointer;
}

/* Always float label for date inputs */
input[type="date"].rl-input + .rl-label {
    top: -8px;
    font-size: 16px;
    font-weight: 600;
}

/* Search Input with Clear Button */
.rl-search-wrapper {
    position: relative;
}

.rl-search-clear {
    position: absolute;
    right: 12px;
    top: 12px;
    background: none;
    border: 2px solid transparent;
    color: var(--rl-text-medium);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 18px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    border-radius: 2px;
}

.rl-search-wrapper .rl-input.has-value ~ .rl-search-clear {
    opacity: 1;
    pointer-events: auto;
}

.rl-search-clear:hover {
    color: var(--rl-text-dark);
    background: hsla(0, 0%, 0%, 0.05);
}

.rl-search-clear:focus {
    outline: none;
    border-color: var(--rl-border-focus);
    box-shadow: var(--rl-focus-shadow);
}

/* Search submit button */
.rl-search-submit {
	border: none;
	background: transparent;
	color: var(--rl-text-medium);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	z-index: 5;
	cursor: pointer;
	left: 3px;
}
/* No floating label beside the submit icon, so center the text to line up with it */
.rl-search-wrapper.has-icon-left .rl-input {
	padding-block: 12px;
}
.rl-search-submit:hover,
.rl-search-submit:focus,
.rl-search-submit:focus-visible {
	background: var(--rl-bg-hover);
	outline: none;
	border-radius: 20px;
}


.rl-input-wrapper.dark .rl-search-clear {
    color: var(--rl-dark-text-medium);
}

.rl-input-wrapper.dark .rl-search-clear:hover {
    color: var(--rl-dark-text);
    background: hsla(0, 0%, 100%, 0.1);
}

.rl-input-wrapper.dark .rl-search-clear:focus {
    border-color: var(--rl-border);
    box-shadow: var(--rl-focus-shadow-dark);
}

/* Checkbox Styles */
.rl-checkbox-wrapper {
    margin-bottom: 16px;
}

.rl-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    user-select: none;
}

/* Inline checkbox group variant */
.rl-checkbox-group-inline .rl-checkbox-wrapper {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 8px;
}

.rl-checkbox-group-inline .rl-checkbox-wrapper:last-child {
    margin-right: 0;
}

.rl-checkbox input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.rl-checkbox-box {
	width: 20px;
	height: 20px;
	border: 2px solid var(--rl-border);
	border-radius: 2px;
	background: var(--rl-bg-white);
	margin-right: 10px;
	transition: all 0.2s ease;
	flex-shrink: 0;
	position: relative;
}

.rl-checkbox:hover .rl-checkbox-box {
	border-color: var(--rl-border-hover);
}

.rl-checkbox input[type="checkbox"]:checked ~ .rl-checkbox-box {
	background: var(--rl-border-focus);
	border-color: var(--rl-border-focus);
}

.rl-checkbox input[type="checkbox"]:focus ~ .rl-checkbox-box {
	outline: none;
	box-shadow: var(--rl-focus-shadow);
}

/* Checkmark */
.rl-checkbox-box::after {
	content: '';
	position: absolute;
	display: none;
	left: 5px;
	top: 2px;
	width: 6px;
	height: 10px;
	border: solid var(--rl-bg-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.rl-checkbox input[type="checkbox"]:checked ~ .rl-checkbox-box::after {
	display: block;
}

.rl-checkbox-label {
	font-family: var(--rl-font-sans-serif);
	color: var(--rl-text-dark);
	line-height: 1.4;
}

/* Dark checkbox variant */
.rl-checkbox-wrapper.dark .rl-checkbox-box {
	background: var(--rl-dark-bg-hover);
	border-color: var(--rl-dark-border);
}

.rl-checkbox-wrapper.dark .rl-checkbox:hover .rl-checkbox-box {
	border-color: var(--rl-dark-border-hover);
	background: var(--rl-dark-bg-hover-strong);
}

.rl-checkbox-wrapper.dark .rl-checkbox input[type="checkbox"]:checked ~ .rl-checkbox-box {
	background: var(--rl-border);
	border-color: var(--rl-border);
}

.rl-checkbox-wrapper.dark .rl-checkbox input[type="checkbox"]:focus ~ .rl-checkbox-box {
	box-shadow: var(--rl-focus-shadow-dark);
}

.rl-checkbox-wrapper.dark .rl-checkbox-label {
	color: var(--rl-dark-text);
}

/* Checkbox disabled state */
.rl-checkbox input[type="checkbox"]:disabled ~ .rl-checkbox-box {
	opacity: 0.5;
	cursor: not-allowed;
	background: var(--rl-bg-disabled);
}

.rl-checkbox input[type="checkbox"]:disabled ~ .rl-checkbox-label {
	opacity: 0.6;
	cursor: not-allowed;
}

.rl-checkbox:has(input[type="checkbox"]:disabled) {
    cursor: not-allowed;
}

.rl-checkbox-wrapper.dark .rl-checkbox input[type="checkbox"]:disabled ~ .rl-checkbox-box {
    background: hsla(0, 0%, 100%, 0.03);
}
/* Toggle switch (sliding checkbox).  The track keeps 3:1 against a light
   background either way (WCAG 1.4.11): --rl-border-dark off, --rl-success
   on.  Give the input role="switch" so it's read as on/off. */
.rl-toggle-wrapper {
	margin-bottom: 1rem;
}

.rl-toggle {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
	user-select: none;
}

.rl-toggle input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.rl-toggle-switch {
	position: relative;
	width: 52px;
	height: 28px;
	background: var(--rl-border-dark);
	border-radius: 14px;
	transition: background 0.3s ease;
	flex-shrink: 0;
}

.rl-toggle-switch::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	background: white;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	transition: transform 0.3s ease;
}

.rl-toggle input:checked + .rl-toggle-switch {
	background: var(--rl-success);
}

.rl-toggle input:checked + .rl-toggle-switch::after {
	transform: translateX(24px);
}

/* A ring for the keyboard only, not on a click */
.rl-toggle input:focus-visible + .rl-toggle-switch {
	outline: 3px solid var(--rl-border-focus);
	outline-offset: 2px;
}

.rl-toggle:has(input:disabled) {
	cursor: not-allowed;
	opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
	.rl-toggle-switch,
	.rl-toggle-switch::after {
		transition: none;
	}
}

.rl-toggle-label {
	flex: 1;
}

/* Radio Button Styles */
.rl-radio-group {
    margin-bottom: var(--rl-spacing-lg);
}

.rl-radio-group-label {
	font-family: var(--rl-font-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--rl-border-focus);
    margin-bottom: 12px;
    display: block;
}

.rl-radio-wrapper {
    margin-bottom: 12px;
}

/* Inline radio group variant */
.rl-radio-group-inline .rl-radio-wrapper {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 8px;
}

.rl-radio-group-inline .rl-radio-wrapper:last-child {
    margin-right: 0;
}

.rl-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.rl-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.rl-radio-circle {
	width: 20px;
	height: 20px;
	border: 2px solid var(--rl-border);
	border-radius: 50%;
	background: var(--rl-bg-white);
	margin-right: 10px;
	transition: all 0.2s ease;
	flex-shrink: 0;
	position: relative;
}

.rl-radio:hover .rl-radio-circle {
	border-color: var(--rl-border-hover);
}

.rl-radio input[type="radio"]:checked ~ .rl-radio-circle {
	border-color: var(--rl-border-focus);
}

.rl-radio input[type="radio"]:focus ~ .rl-radio-circle {
	outline: none;
	box-shadow: var(--rl-focus-shadow);
}

/* Radio dot */
.rl-radio-circle::after {
	content: '';
	position: absolute;
	display: none;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--rl-border-focus);
}

.rl-radio input[type="radio"]:checked ~ .rl-radio-circle::after {
    display: block;
}

.rl-radio-label {
	font-family: var(--rl-font-sans-serif);
	font-size: 16px;
	color: var(--rl-text-dark);
	line-height: 1.4;
}

/* Dark radio variant */
.rl-radio-group.dark .rl-radio-circle {
	background: var(--rl-dark-bg-hover);
	border-color: var(--rl-dark-border);
}

.rl-radio-group.dark .rl-radio:hover .rl-radio-circle {
	border-color: var(--rl-dark-border-hover);
	background: var(--rl-dark-bg-hover-strong);
}

.rl-radio-group.dark .rl-radio input[type="radio"]:checked ~ .rl-radio-circle {
    border-color: var(--rl-border);
}

.rl-radio-group.dark .rl-radio input[type="radio"]:focus ~ .rl-radio-circle {
    box-shadow: var(--rl-focus-shadow-dark);
}

.rl-radio-group.dark .rl-radio-circle::after {
    background: var(--rl-border);
}

.rl-radio-group.dark .rl-radio-label {
    color: var(--rl-dark-text);
}

.rl-radio-group.dark .rl-radio-group-label {
    color: var(--rl-dark-text-medium);
}

/* Radio disabled state */
.rl-radio input[type="radio"]:disabled ~ .rl-radio-circle {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--rl-bg-disabled);
}

.rl-radio input[type="radio"]:disabled ~ .rl-radio-label {
    opacity: 0.6;
    cursor: not-allowed;
}

.rl-radio:has(input[type="radio"]:disabled) {
    cursor: not-allowed;
}

.rl-radio-group.dark .rl-radio input[type="radio"]:disabled ~ .rl-radio-circle {
    background: hsla(0, 0%, 100%, 0.03);
}

/* Fieldset override */
fieldset {
	margin-top: -10px;
	margin-bottom: var(--rl-spacing-lg);
	border: 2px solid var(--rl-border);
}

/* File Upload Styles */
.rl-file-wrapper {
    margin-bottom: var(--rl-spacing-lg);
}

.rl-file-label {
	font-family: var(--rl-font-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--rl-text-medium);
    margin-bottom: 8px;
    display: block;
}

.rl-file-wrapper.dark .rl-file-label {
    color: var(--rl-dark-text-medium);
}

.rl-file-input-wrapper {
    position: relative;
    display: inline-block;
}

.rl-file-input {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.rl-file-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    border: 2px dashed var(--rl-border);
    border-radius: 2px;
    background: var(--rl-bg-white);
    color: var(--rl-text-medium);
	font-family: var(--rl-font-sans-serif);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rl-file-button:hover {
    border-color: var(--rl-border-hover);
    background: var(--rl-bg-hover);
}

.rl-file-input:focus ~ .rl-file-button {
    border-color: var(--rl-border-focus);
    box-shadow: var(--rl-focus-shadow);
}

.rl-file-button-icon {
    margin-right: 8px;
    font-size: 18px;
}

.rl-file-name {
    margin-top: 8px;
    font-size: 14px;
    color: var(--rl-text-medium);
    font-style: italic;
}

/* Dark file upload variant */
.rl-file-wrapper.dark .rl-file-button {
    background: var(--rl-dark-bg-hover);
    border-color: var(--rl-dark-border);
    color: var(--rl-dark-text-medium);
}

.rl-file-wrapper.dark .rl-file-button:hover {
    border-color: var(--rl-dark-border-hover);
    background: var(--rl-dark-bg-hover-strong);
}

.rl-file-wrapper.dark .rl-file-input:focus ~ .rl-file-button {
    border-color: var(--rl-border);
    box-shadow: var(--rl-focus-shadow-dark);
}

.rl-file-wrapper.dark .rl-file-name {
    color: var(--rl-dark-text-medium);
}

/* Error State */
.rl-input.error {
    border-color: var(--rl-danger);
}

.rl-input.error:focus {
    box-shadow: var(--rl-focus-shadow-danger);
}

/* Disabled State */
.rl-input[readonly],
.rl-input:disabled {
	background: var(--rl-bg-disabled);
	color: var(--rl-text-muted);
	cursor: not-allowed;
	border-color: var(--rl-dark-text-medium);
	/* Removed opacity - let the background color and text color do the work */
	-webkit-text-fill-color: var(--rl-text-muted);
}

.rl-input-wrapper.dark .rl-input:disabled {
    background: hsla(0, 0%, 0%, 0.3);
    color: var(--rl-text-muted);
    border-color: var(--rl-text-medium);
}
/* Typeahead Firefox Fix */

/* 1. CRITICAL: Prevent hint from blocking input (your fix) */
.twitter-typeahead .tt-hint {
	pointer-events: none !important;
	z-index: 1;
}

.twitter-typeahead .tt-input {
	position: relative;
	z-index: 2;
}

/* 2. IMPORTANT: Ensure wrapper doesn't break layout */
.twitter-typeahead {
	display: block !important;
	width: 100%;
}

/* 3. RECOMMENDED: Fix disabled state (original complaint about grey) */
.twitter-typeahead .tt-input.rl-input:disabled {
	background: var(--rl-bg-disabled, #f5f5f5) !important;
	color: var(--rl-text-muted, #999999);
	cursor: not-allowed;
	opacity: 1; /* Remove the 0.6 opacity that was causing issues */
}

/* 4. RECOMMENDED: Ensure enabled inputs have proper background */
.twitter-typeahead .tt-input.rl-input:not(:disabled) {
	background: var(--rl-bg-input, #ffffff) !important;
}

/* Helper Text */
.rl-helper-text {
    font-size: 16px;
    color: var(--rl-text-medium);
    margin-top: 6px;
    font-style: italic;
	font-family: var(--rl-font-serif);
}

.rl-input-wrapper.dark .rl-helper-text {
    color: var(--rl-dark-text-medium);
}

.rl-helper-text.error {
    color: var(--rl-danger);
    font-weight: 600;
}

/* themed facets_input: an item's search filters, two or more to a row where there's room */
.rl-facet-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); column-gap: var(--rl-spacing-md); }

/* rl_form_input -count: "N of max", right of the help under the field */
.rl-input-count {
	float: right;
	margin: 6px 0 0 var(--rl-spacing-md);
	font-size: var(--rl-text-sm);
	color: var(--rl-text-medium);
	font-variant-numeric: tabular-nums;
}

/* Textarea variant */
textarea.rl-input {
    min-height: 100px;
    resize: vertical;
    padding-top: 20px;
}

textarea.rl-input + .rl-label {
    top: 20px;
}

textarea.rl-input:focus + .rl-label,
textarea.rl-input.has-value + .rl-label {
    top: -8px;
}

/* Live region for screen readers */
.rl-live-region {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Button Styles */
.rl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
	font-family: var(--rl-font-sans-serif);
    font-size: 15px;
    font-weight: normal;
    border: 2px solid;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
	gap: 4px;
    background: var(--rl-bg-white);
    border-color: var(--rl-border);
    color: var(--rl-text-medium);
}

.rl-btn:hover:not(:disabled):not([aria-disabled="true"]) {
	border-color: var(--rl-primary);
	color: var(--rl-brand-red);
	background: hsla(358, 72%, 51%, 0.04);
}

.rl-btn:focus {
    outline: none;
    border-color: var(--rl-border-focus) !important;
    box-shadow: var(--rl-focus-shadow) !important;
}

.rl-btn[aria-disabled="true"],
.rl-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
	pointer-events: none;
}

/* Button - Primary */
.rl-btn--primary {
    background: var(--rl-primary);
    border-color: var(--rl-primary-dark);
    color: var(--rl-bg-white);
	--rl-busy-spinner: rgba(255, 255, 255, 0.7);
}

.rl-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--rl-primary-dark);
    border-color: var(--rl-primary-light);
	color: white;
}

.rl-btn--primary:focus {
    box-shadow: var(--rl-focus-shadow-primary);
}

/* Button - Success */
.rl-btn--success {
    background: var(--rl-success);
    border-color: var(--rl-success-dark);
    color: var(--rl-bg-white);
}

.rl-btn--success:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--rl-success-dark);
    border-color: var(--rl-success-light);
    color: var(--rl-bg-white);
}

.rl-btn--success:focus {
    box-shadow: var(--rl-focus-shadow-success);
}

/* Button - Warning */
.rl-btn--warning {
    background: var(--rl-warning);
    border-color: var(--rl-warning-dark);
    color: var(--rl-text-dark);
}

.rl-btn--warning:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--rl-warning-dark);
    border-color: var(--rl-warning);
}

.rl-btn--warning:focus {
    box-shadow: var(--rl-focus-shadow-warning);
}

/* Button - Danger */
.rl-btn--danger {
    background: var(--rl-danger);
    border-color: var(--rl-danger-dark);
    color: var(--rl-bg-white);
}

.rl-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--rl-danger-dark);
    border-color: var(--rl-danger-light);
    color: var(--rl-bg-white);
}

.rl-btn--danger:focus {
    box-shadow: var(--rl-focus-shadow-danger);
}

/* Button - Info */
.rl-btn--info {
    background: var(--rl-bg-white);
    border-color: var(--rl-dark-border-hover);
    color: var(--rl-text-medium);
}

.rl-btn--info:hover:not(:disabled):not([aria-disabled="true"]) {
}

/* Button sizing */
.rl-btn--block {
	width: 100%;
}

// Vertically space out multiple block buttons
.rl-btn--block + .rl-btn--block,
.rl-btn--block + .rl-btn--xs-block,
.rl-btn--xs-block + .rl-btn--block,
.rl-btn--xs-block + .rl-btn--xs-block {
	margin-top: 5px;
}
.rl-btn--xs-block {
	width: 100%;
	@media (min-width: 768px) {
		width: auto;
	}
}

.rl-btn--lg {
	padding: 10px 16px;
	font-size: 20px;
	line-height: 1.5;
	border-radius: 24px;
}
.rl-btn--sm {
	padding: 5px 10px;
	font-size: 14px;
	line-height: 1.5;
	border-radius: 15px;
}
.rl-btn--xs {
	padding: 1px 5px;
	font-size: 14px;
	line-height: 1.5;
	border-radius: 15px;
}

.rl-btn--transparent {
	color: black;
	background-color: transparent;
}

.rl-btn--noborder {
	border-color: transparent;
}


/* Link-style button — renders <a> or <button> as plain text with interactive states */
.rl-btn--link {
	font-weight: bold;
	color: var(--ada-text, var(--rl-text-color));
	border-color: transparent;
	background-color: transparent;
	box-shadow: none;
	text-decoration: none;
	padding: 2px;
}

.rl-btn--link:hover,
.rl-btn--link:focus-visible {
	color: var(--ada-link-hover, var(--rl-primary));
	border-color: var(--ada-link-hover, inherit);
}

.rl-btn--link:active {
	color: var(--ada-accent, var(--rl-primary-dark));
	border-color: var(--ada-link-hover, inherit);
}

.rl-btn--link:disabled,
.rl-btn--link[aria-disabled="true"] {
	color: var(--ada-text-muted, var(--rl-text-muted));
	pointer-events: none;
}

/* ============================================================
   rl-flex — flex layout primitive
   ============================================================ */

.rl-flex {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;                 /* matches -wrap nowrap default */
	align-items: stretch;
	justify-content: flex-start;
	gap: var(--rl-spacing-sm, 0.5rem);   /* matches -gap sm default */
}

/* note there are no classes if the default is defined above */
.rl-flex--inline { display: inline-flex; }

/* Direction */
.rl-flex--row-reverse { flex-direction: row-reverse; }
.rl-flex--col         { flex-direction: column; }
.rl-flex--col-reverse { flex-direction: column-reverse; }

/* Wrap */
.rl-flex--wrap         { flex-wrap: wrap; }
.rl-flex--wrap-reverse { flex-wrap: wrap-reverse; }

/* Justify */
.rl-flex--justify-end     { justify-content: flex-end; }
.rl-flex--justify-center  { justify-content: center; }
.rl-flex--justify-between { justify-content: space-between; }
.rl-flex--justify-around  { justify-content: space-around; }
.rl-flex--justify-evenly  { justify-content: space-evenly; }

/* Align-items */
.rl-flex--items-start    { align-items: flex-start; }
.rl-flex--items-end      { align-items: flex-end; }
.rl-flex--items-center   { align-items: center; }
.rl-flex--items-baseline { align-items: baseline; }
.rl-flex--items-normal   { align-items: normal; }

/* Equal-width children */
.rl-flex--equal > * { flex: 1 1 0; min-width: 0; }

/* Gap scale */
.rl-flex--gap-0  { gap: 0; }
.rl-flex--gap-xs { gap: var(--rl-spacing-xs, 4px); }
.rl-flex--gap-md { gap: var(--rl-spacing-md, 16px); }
.rl-flex--gap-lg { gap: var(--rl-spacing-lg, 24px); }
.rl-flex--gap-xl { gap: var(--rl-spacing-xl, 32px); }


/* XXX stacked */
.rl-flex--stacked,
.rl-flex--stack {
	flex-direction: column;
}

@media (max-width: 767px) {
	/* Base: stacked full-width */
	.rl-flex--stack-xs {
		flex-direction: column;
		flex-wrap: wrap;
	}
	.rl-flex--stack-xs > div.rl-flex,
	.rl-flex--stack-xs > .rl-btn,
	.rl-flex--stack-xs > button {
		width: 100%;
	}
}

/* ============================================================
   rl-grid — grid layout primitive
   ============================================================ */
.rl-grid {
	display: grid;
	width: 100%;
	gap: var(--rl-spacing-sm, 8px);
	transition: all 0.3s ease-in-out 0.2s;
}

/* Gap scale */
.rl-grid--gap-none { gap: 0; }
.rl-grid--gap-xs   { gap: var(--rl-spacing-xs, 4px); }
.rl-grid--gap-md   { gap: var(--rl-spacing-md, 16px); }
.rl-grid--gap-lg   { gap: var(--rl-spacing-lg, 24px); }
.rl-grid--gap-xl   { gap: var(--rl-spacing-xl, 32px); }

/* Equal-height rows */
.rl-grid--equal-height { grid-auto-rows: 1fr; }

/* Full-row children */
.rl-grid__header,
.rl-grid__divider { grid-column: 1 / -1; }

/* Horizontal line between rows */
.rl-grid__divider {
	height: 1px;
	background-color: var(--rl-border, #d2d2d2);
	margin: var(--rl-spacing-sm, 8px) 0;
}

/* ------------------------------------------------------------
   Fixed column counts
   ------------------------------------------------------------ */
.rl-grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
.rl-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rl-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rl-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rl-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rl-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rl-grid--cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* ------------------------------------------------------------
   Responsive flow variants
   Breakpoints: xs <767, sm ≥767, md ≥991, lg ≥1199
   ------------------------------------------------------------ */

/* 1to2: 1 → 2 */
.rl-grid--cols-1to2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 767px)  { .rl-grid--cols-1to2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 1to3: 1 → 2 → 3 */
.rl-grid--cols-1to3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 767px)  { .rl-grid--cols-1to3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 991px)  { .rl-grid--cols-1to3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 1to4: 1 → 3 → 4 */
.rl-grid--cols-1to4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 767px)  { .rl-grid--cols-1to4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 991px)  { .rl-grid--cols-1to4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 1to5: 1 → 3 → 4 → 5 */
.rl-grid--cols-1to5 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 767px)  { .rl-grid--cols-1to5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 991px)  { .rl-grid--cols-1to5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1199px) { .rl-grid--cols-1to5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* 2to3: 2 → 3 */
.rl-grid--cols-2to3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 767px)  { .rl-grid--cols-2to3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 2to4: 2 → 3 → 4 */
.rl-grid--cols-2to4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 767px)  { .rl-grid--cols-2to4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 991px)  { .rl-grid--cols-2to4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 2to5: 2 → 3 → 4 → 5 */
.rl-grid--cols-2to5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 767px)  { .rl-grid--cols-2to5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 991px)  { .rl-grid--cols-2to5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1199px) { .rl-grid--cols-2to5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* 2to6: 2 → 3 → 6 */
.rl-grid--cols-2to6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 767px)  { .rl-grid--cols-2to6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 991px)  { .rl-grid--cols-2to6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* 2to7: 2 → 5 → 6 → 7 */
.rl-grid--cols-2to7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 767px)  { .rl-grid--cols-2to7 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 991px)  { .rl-grid--cols-2to7 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1199px) { .rl-grid--cols-2to7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* 3to7: 3 → 5 → 6 → 7 */
.rl-grid--cols-3to7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 767px)  { .rl-grid--cols-3to7 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 991px)  { .rl-grid--cols-3to7 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1199px) { .rl-grid--cols-3to7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* 1and3: 1 → 3 */
.rl-grid--cols-1and3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 767px)  { .rl-grid--cols-1and3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 2and4: 2 → 4 */
.rl-grid--cols-2and4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 767px)  { .rl-grid--cols-2and4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------------------
   Mobile single-column override
   ------------------------------------------------------------ */
@media (max-width: 767px) {
	.rl-grid--stack-xs { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ------------------------------------------------------------
   Borders between cells
   ------------------------------------------------------------ */
.rl-grid--borders-all,
.rl-grid--borders-row,
.rl-grid--borders-col {
	--rl-grid-line-offset: calc(var(--rl-spacing-sm, 8px) / 2);
	--rl-grid-line-thickness: 2px;
	--rl-grid-line-color: var(--rl-border, #d2d2d2);
	overflow: hidden;
}
.rl-grid--borders-all > *,
.rl-grid--borders-row > *,
.rl-grid--borders-col > * { position: relative; }

.rl-grid--borders-all > *::before,
.rl-grid--borders-all > *::after,
.rl-grid--borders-row > *::after,
.rl-grid--borders-col > *::before {
	content: '';
	position: absolute;
	background-color: var(--rl-grid-line-color);
	z-index: 1;
}

/* Row lines (top edge) */
.rl-grid--borders-all > *::after,
.rl-grid--borders-row > *::after {
	inline-size: 100vw;
	block-size: var(--rl-grid-line-thickness);
	inset-inline-start: 0;
	inset-block-start: calc(var(--rl-grid-line-offset) * -1);
}

/* Column lines (left edge) */
.rl-grid--borders-all > *::before,
.rl-grid--borders-col > *::before {
	inline-size: var(--rl-grid-line-thickness);
	block-size: 100vh;
	inset-inline-start: calc(var(--rl-grid-line-offset) * -1);
}

/* Stacked grids with known track count:
   show row borders only between original row groups */
@media (max-width: 767px) {
	.rl-grid--stack-xs[data-tracks].rl-grid--borders-row > *::after,
	.rl-grid--stack-xs[data-tracks].rl-grid--borders-all > *::after {
		display: none;
	}
	.rl-grid--stack-xs[data-tracks="2"].rl-grid--borders-row > *:nth-child(2n+1)::after,
	.rl-grid--stack-xs[data-tracks="2"].rl-grid--borders-all > *:nth-child(2n+1)::after,
	.rl-grid--stack-xs[data-tracks="3"].rl-grid--borders-row > *:nth-child(3n+1)::after,
	.rl-grid--stack-xs[data-tracks="3"].rl-grid--borders-all > *:nth-child(3n+1)::after,
	.rl-grid--stack-xs[data-tracks="4"].rl-grid--borders-row > *:nth-child(4n+1)::after,
	.rl-grid--stack-xs[data-tracks="4"].rl-grid--borders-all > *:nth-child(4n+1)::after,
	.rl-grid--stack-xs[data-tracks="5"].rl-grid--borders-row > *:nth-child(5n+1)::after,
	.rl-grid--stack-xs[data-tracks="5"].rl-grid--borders-all > *:nth-child(5n+1)::after,
	.rl-grid--stack-xs[data-tracks="6"].rl-grid--borders-row > *:nth-child(6n+1)::after,
	.rl-grid--stack-xs[data-tracks="6"].rl-grid--borders-all > *:nth-child(6n+1)::after,
	.rl-grid--stack-xs[data-tracks="7"].rl-grid--borders-row > *:nth-child(7n+1)::after,
	.rl-grid--stack-xs[data-tracks="7"].rl-grid--borders-all > *:nth-child(7n+1)::after {
		display: block;
	}
	/* No border above the very first cell */
	.rl-grid--stack-xs[data-tracks].rl-grid--borders-row > *:first-child::after,
	.rl-grid--stack-xs[data-tracks].rl-grid--borders-all > *:first-child::after {
		display: none;
	}
	/* Hide column borders — there's only one column */
	.rl-grid--stack-xs.rl-grid--borders-all > *::before,
	.rl-grid--stack-xs.rl-grid--borders-col > *::before {
		display: none;
	}

	/* Stacked grids WITHOUT known track count (responsive variants):
	fall back to a line between every cell */
	.rl-grid--stack-xs:not([data-tracks]).rl-grid--borders-row > *::after,
	.rl-grid--stack-xs:not([data-tracks]).rl-grid--borders-all > *::after {
		inline-size: 100%;
	}
	.rl-grid--stack-xs:not([data-tracks]).rl-grid--borders-row > *:first-child::after,
	.rl-grid--stack-xs:not([data-tracks]).rl-grid--borders-all > *:first-child::after {
		display: none;
	}
}

/* note .btn-row > a without class rl-btn will not be 100% width. Wrap in div to get full width */
.rl-btn-row, .rl-btn-row--stacked {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem 0;
	justify-content: flex-start;
	align-items: center;
}

.rl-btn-row > .rl-btn,
.rl-btn-row > button,
.rl-btn-row > div {
	width: 100%;
}

/* sm+ is horizontal row, unless stacked */
@media (min-width: 576px) {
	.rl-btn-row:not(.rl-btn-row--stacked) {
		flex-direction: row;
		align-items: flex-end;
		flex-wrap: wrap;
		gap: .5rem;
	}

	.rl-btn-row > .rl-btn,
	.rl-btn-row > button,
	.rl-btn-row > div {
		width: auto;
	}
}

/* Button wishlist */

.rl-btn.wishlist {
	border-color: transparent;
}
.rl-btn.wishlist:hover {
	border-color: var(--rl-border-hover);
}


/* Alert Styles */
.rl-alert {
    position: relative;
    padding: 16px 48px 16px 20px;
    margin-bottom: 20px;
    border: 2px solid;
    border-radius: 12px;
	font-family: var(--rl-font-sans-serif);
    font-size: 15px;
    line-height: 1.6;
    background: var(--rl-bg-white);
}

.rl-alert > :first-child { margin-top: 0; }
.rl-alert > :last-child  { margin-bottom: 0; }

.rl-alert-title, .rl-box-title {
	font-family: var(--rl-font-sans-serif);
	font-size: 1.25rem;
	line-height: 1.4;
	font-weight: 700;
	color: var(--rl-text-dark);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.rl-alert-icon {
	font-size: 20px;
}

.rl-alert-content {
	font-family: var(--rl-font-sans-serif);
	font-size: 16px;
	color: var(--rl-text);
	line-height: 1.6;
} 

.rl-alert-content p {
	margin-bottom: 8px;
} 

.rl-alert-content p:last-child {
	margin-bottom: 0;
} 
.rl-alert-content strong {
	font-weight: 600;
	color: var(--rl-text-dark);
} 

.rl-alert-text {
	flex: 1;
	min-width: 200px;
}

.rl-alert-link {
    font-weight: 600;
    text-decoration: underline;
    //color: inherit;
}

.rl-alert-link:hover {
    text-decoration: none;
}

.rl-alert-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.rl-alert-close {
    position: absolute;
    right: 16px;
    top: 16px;
    background: none;
	border: none;
    font-size: 24px;
    line-height: 24px;
	width: 24px;
	height: 24px;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 0;
    transition: all 0.4s ease;
}

.rl-alert-close:hover {
    opacity: 1;
	transform: scale(1.3);
}

.rl-alert-close:focus {
    outline: none;
    opacity: 1;
    text-decoration: underline;
}

/* Alert - Error/Danger */
.rl-alert-error,
.rl-alert-danger {
    border-color: var(--rl-danger);
    background: var(--rl-danger-light);
    color: var(--rl-danger-text);
}

/* Alert - Success */
.rl-alert-success {
    border-color: var(--rl-success);
    background: var(--rl-success-light);
    color: var(--rl-success-text);
}

/* Alert - Warning */
.rl-alert-warning {
    border-color: var(--rl-warning);
    background: var(--rl-warning-light);
    color: var(--rl-text-dark);
}

/* Alert - Info */
.rl-alert-info {
    border-color: var(--rl-info);
    background: var(--rl-info-light);
    color: var(--rl-info-text);
}

/* Button groups in alerts */
.rl-alert .rl-btn {
    font-size: 14px;
    padding: 6px 16px;
	text-decoration: none;
}

/* Box Styles */
.rl-box {
	position: relative;
	color: var(--ada-text, var(--rl-text-dark));
	background: var(--rl-bg-white);
	border: 2px solid var(--rl-bg-light);
	border-radius: 5px;
	padding: 1rem;
	margin: 1rem 0;
	box-shadow: 0 4px 20px 0 rgba(0,0,0,.15);
}

/* color classes are in the themed proc box */

.rl-box > :first-child { margin-top: 0; }
.rl-box > :last-child:not(.rl-btn)  { margin-bottom: 0; }

.rl-box--dashed {
	border-style: dashed;
	border-color: gray;
}

.rl-box--stacked {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.rl-box--stacked > :last-child {
	margin-top: auto;
}
.rl-box--stacked > :last-child:not(.rl-btn) {
	padding-bottom: 0;
}

a.rl-box {
	display: block;
	transition: all 0.3s ease-in-out 0.2s;
}

a.rl-box:active, a.rl-box:hover {
	color: initial;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.rl-box--newsletter {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-color: #764ba2;
	color: var(--ada-text, var(--rl-text-light));
}
.rl-box--seasonal-1 {
	background: var(--seasonal-color-1);
	border-color: var(--seasonal-border);
	color: var(--ada-text, var(--seasonal-color-1-text));
}
.rl-box--seasonal-2 {
	background: var(--seasonal-color-2);
	border-color: var(--seasonal-border);
	color: var(--ada-text, var(--seasonal-color-2-text));
}
.rl-box--instruction {
	--instruction-bg: #e7f5ff;
	--instruction-border: #339af0;
	background: var(--instruction-bg);
	border-color: var(--instruction-border);
	color: var(--ada-text, var(--seasonal-color-2-text));
}
.rl-box--highlight {
	--highlight-bg: hsl(36, 95%, 92%);
	--highlight-border: hsl(36, 85%, 55%);
	background: var(--highlight-bg);
	border-color: var(--highlight-border);
	color: hsl(36, 85%, 28%);
	.rl-box-title {
		color: hsl(36, 85%, 28%);
	}
}
.rl-box--warning {
	--warning-bg: #f8d7da;
	--warning-border: #d63131;
	background: var(--warning-bg);
	border-color: var(--warning-border);
}
.rl-box--success {
	background: var(--rl-success-light);
	border-color: var(--rl-success);
}
.rl-box--tip {
	--tip-bg: #d1f2eb;
	--tip-border: #a3e4d7;
	background: var(--tip-bg);
	border-color: var(--tip-border);
}

/* Tab Styles */
.rl-tabs {
	margin-bottom: var(--rl-spacing-lg);
}

.rl-tab-list {
	display: flex;
	border-bottom: 2px solid var(--rl-border);
	margin-bottom: 0;
	gap: 4px;
	flex-wrap: wrap;
}

.rl-tab {
	padding: 12px 24px;
	font-family: var(--rl-font-serif);
	font-size: 16px;
	font-weight: 600;
	background: var(--rl-bg-disabled);
	border: 2px solid var(--rl-border);
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	color: var(--rl-text-medium);
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	margin-bottom: -2px;
}

.rl-tab:hover:not(.active) {
    color: var(--rl-text-dark);
    background: var(--rl-bg-hover);
    border-color: var(--rl-border-hover);
}

.rl-tab:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--rl-border-focus);
}

.rl-tab.active {
    color: var(--rl-primary);
    border-color: var(--rl-border);
    background: var(--rl-bg-white);
    z-index: 1;
}

.rl-tab-panel {
    display: none;
    animation: fadeIn 0.2s ease;
    padding: 20px;
    border: 2px solid var(--rl-border);
    border-top: none;
    background: var(--rl-bg-white);
}

.rl-tab-panel.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Mobile tabs - stack vertically */
@media (max-width: 767px) {
	.rl-tabs {
		margin: 0 -15px var(--rl-spacing-lg);
	}
	.rl-tab-list {
		flex-direction: column;
		border-bottom: none;
		gap: 0;
	}

	.rl-tab {
		width: 100%;
		border-radius: 0;
		border-bottom: 2px solid var(--rl-border);
		margin-bottom: 0;
		text-align: left;
	}

	.rl-tab.active {
		border-left: 4px solid var(--rl-primary);
	}

    .rl-tab-panel {
        border-top: 2px solid var(--rl-border);
    	padding: 5px;
    }
}

/* Dark tabs variant */
.rl-tabs.dark .rl-tab-list {
    border-bottom-color: var(--rl-dark-border);
}

.rl-tabs.dark .rl-tab {
    color: var(--rl-dark-text-medium);
    background: var(--rl-dark-bg-hover);
    border-color: var(--rl-dark-border);
}

.rl-tabs.dark .rl-tab:hover:not(.active) {
    color: var(--rl-dark-text);
    background: var(--rl-dark-bg-hover-strong);
    border-color: var(--rl-dark-border-hover);
}

.rl-tabs.dark .rl-tab:focus {
    box-shadow: inset 0 0 0 2px var(--rl-border);
}

.rl-tabs.dark .rl-tab.active {
    color: var(--rl-primary);
    background: var(--rl-dark-bg);
    border-color: var(--rl-dark-border);
}

.rl-tabs.dark .rl-tab-panel {
    background: var(--rl-dark-bg);
    border-color: var(--rl-dark-border);
}

/* Mobile dark tabs */
@media (max-width: 767px) {
    .rl-tabs.dark .rl-tab {
        border-bottom-color: var(--rl-dark-border);
    }

    .rl-tabs.dark .rl-tab-panel {
        border-top-color: var(--rl-dark-border);
    }
}

/* Tooltip Styles */
.rl-tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.rl-tooltip {
    position: absolute;
    background: var(--rl-text-dark);
    color: var(--rl-bg-white);
    padding: 8px 12px;
    border-radius: 4px;
	font-family: var(--rl-font-sans-serif);
    font-size: 13px;
    line-height: 1.4;
	min-width: 200px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    visibility: hidden;
    box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.2);
	.table {
	    background: var(--rl-text-dark);
	}
	.table-striped>tbody>tr:nth-of-type(odd) {
		background-color: #555;
	}
}

.rl-tooltip::before {
    content: '';
    position: absolute;
    border: 6px solid transparent;
}

/* Tooltip positions */
.rl-tooltip-top {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.rl-tooltip-top::before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--rl-text-dark);
}

.rl-tooltip-bottom {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.rl-tooltip-bottom::before {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--rl-text-dark);
}

.rl-tooltip-left {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

.rl-tooltip-left::before {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--rl-text-dark);
}

.rl-tooltip-right {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

.rl-tooltip-right::before {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--rl-text-dark);
}

/* Show tooltip on hover and focus */
.rl-tooltip-wrapper:hover .rl-tooltip,
.rl-tooltip-wrapper:focus-within .rl-tooltip,
.rl-tooltip-wrapper button:focus ~ .rl-tooltip,
.rl-tooltip-wrapper .rl-input:focus ~ .rl-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Interactive tooltip (popover style) */
.rl-tooltip.interactive {
    pointer-events: auto;
    white-space: normal;
    max-width: 300px;
}

/* Show state for interactive tooltips */
.rl-tooltip.interactive.open {
    opacity: 1;
    visibility: visible;
}

/* Keep regular hover tooltips working */
.rl-tooltip-wrapper:hover .rl-tooltip:not(.interactive),
.rl-tooltip-wrapper:focus-within .rl-tooltip:not(.interactive) {
    opacity: 1;
    visibility: visible;
}

/* For interactive tooltips, only show when .open class is present */
.rl-tooltip-wrapper:hover .rl-tooltip.interactive,
.rl-tooltip-wrapper:focus-within .rl-tooltip.interactive {
    opacity: 0;
    visibility: hidden;
}

/* Trigger button for interactive tooltips */
.rl-tooltip-trigger {
    cursor: pointer;
}

.rl-tooltip-trigger[aria-expanded="true"] {
    /* Style for when popover is open */
}

/* Close button inside interactive tooltip */
.rl-tooltip-close {
    position: absolute;
    top: 4px;
    right: 4px;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    opacity: 0.7;
    font-size: 16px;
}

.rl-tooltip-close:hover {
    opacity: 1;
}

/* Content inside interactive tooltips */
.rl-tooltip.interactive .rl-tooltip-content {
    display: block;
}

.rl-tooltip.interactive .rl-btn {
    margin-top: 8px;
    font-size: 13px;
    padding: 6px 12px;
}

/* Dark tooltip variant */
.rl-tooltip.dark {
    background: var(--rl-dark-text);
    color: var(--rl-text-dark);
}

.rl-tooltip.dark.rl-tooltip-top::before {
    border-top-color: var(--rl-dark-text);
}

.rl-tooltip.dark.rl-tooltip-bottom::before {
    border-bottom-color: var(--rl-dark-text);
}

.rl-tooltip.dark.rl-tooltip-left::before {
    border-left-color: var(--rl-dark-text);
}

.rl-tooltip.dark.rl-tooltip-right::before {
    border-right-color: var(--rl-dark-text);
}

/* Accordion Styles */
.rl-accordion {
    margin-bottom: var(--rl-spacing-lg);
}

.rl-accordion-item {
    border: 2px solid var(--rl-border);
    border-radius: 4px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.rl-accordion-item:hover {
    border-color: var(--rl-border-hover);
}

.rl-accordion-header {
    width: 100%;
    padding: 16px 48px 16px 20px;
    background: var(--rl-bg-white);
    border: none;
	font-family: var(--rl-font-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--rl-text-dark);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    transition: all 0.2s ease;
}

.rl-accordion-header:hover {
    background: var(--rl-bg-hover);
}

.rl-accordion-header:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--rl-border-focus);
}

.rl-accordion-header[aria-expanded="true"] {
    background: var(--rl-bg-hover);
    color: var(--rl-primary);
}

.rl-accordion-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.rl-accordion-icon::before,
.rl-accordion-icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: all 0.2s ease;
}

.rl-accordion-icon::before {
    width: 12px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.rl-accordion-icon::after {
    width: 2px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.rl-accordion-header[aria-expanded="true"] .rl-accordion-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.rl-accordion-content {
    max-height: 0;
    overflow: visible;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease;
    opacity: 0;
}

.rl-accordion-content.open {
    max-height: 3000px;
    opacity: 1;
}

.rl-accordion-body {
    padding: 20px;
    background: var(--rl-bg-white);
    color: var(--rl-text-dark);
    line-height: 1.6;
    border-top: 1px solid var(--rl-border);
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark accordion variant */
.rl-accordion.dark .rl-accordion-item {
    border-color: var(--rl-dark-border);
}

.rl-accordion.dark .rl-accordion-item:hover {
    border-color: var(--rl-dark-border-hover);
}

.rl-accordion.dark .rl-accordion-header {
    background: var(--rl-dark-bg-hover);
    color: var(--rl-dark-text);
}

.rl-accordion.dark .rl-accordion-header:hover {
    background: var(--rl-dark-bg-hover-strong);
}

.rl-accordion.dark .rl-accordion-header:focus {
    box-shadow: inset 0 0 0 2px var(--rl-border);
}

.rl-accordion.dark .rl-accordion-header[aria-expanded="true"] {
    background: var(--rl-dark-bg-hover-strong);
}

.rl-accordion.dark .rl-accordion-body {
    background: var(--rl-dark-bg);
    color: var(--rl-dark-text);
    border-top-color: var(--rl-dark-border);
}

/* Dropdown Menu Styles */
.rl-dropdown {
    position: relative;
    display: inline-block;
}

.rl-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
	font-family: var(--rl-font-sans-serif);
    font-size: 15px;
    font-weight: 400;
    border: 2px solid var(--rl-border);
    border-radius: 4px;
    background: var(--rl-bg-white);
    color: var(--rl-text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
}

.rl-dropdown-toggle:hover {
    background: var(--rl-bg-hover);
    border-color: var(--rl-border-hover);
}

.rl-dropdown-toggle:focus {
    outline: none;
    border-color: var(--rl-border-focus);
    box-shadow: var(--rl-focus-shadow);
}

.rl-dropdown-toggle[aria-expanded="true"] {
    background: var(--rl-bg-hover);
    border-color: var(--rl-border-focus);
}

.rl-dropdown-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.2s ease;
}

.rl-dropdown-toggle[aria-expanded="true"] .rl-dropdown-arrow {
    transform: rotate(180deg);
}

.rl-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    background: var(--rl-bg-white);
    border: 2px solid var(--rl-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.15);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: fit-content;
    overflow-y: auto;
}

.rl-dropdown-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rl-dropdown-menu[role="menu"] {
    padding: 8px 0;
}

.rl-dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
	font-family: var(--rl-font-sans-serif);
    font-size: 15px;
    color: var(--rl-text-dark);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
	gap: 4px;
}

.rl-dropdown-item:hover,
.rl-dropdown-item:focus {
    background: var(--rl-bg-hover);
    color: var(--rl-primary);
    outline: none;
}

/* Stays at the bottom of a menu that scrolls (Sign Out) */
.rl-dropdown-item--pinned {
    position: sticky;
    bottom: -8px;
    background: inherit;
    border-top: 1px solid var(--rl-border);
}

.rl-dropdown-item[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.rl-dropdown-divider {
    height: 1px;
    background: var(--rl-border);
    // margin: 8px 0;
}

.rl-dropdown-header {
    padding: 8px 16px;
	font-family: var(--rl-font-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--rl-text-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dropdown alignment variants */
.rl-dropdown-menu.right {
    left: auto;
    right: 0;
}
.rl-dropdown-menu.center {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

/* Dark dropdown variant */
.rl-dropdown.dark .rl-dropdown-toggle {
    background: var(--rl-dark-bg-hover);
    border-color: var(--rl-dark-border);
    color: var(--rl-dark-text);
}

.rl-dropdown.dark .rl-dropdown-toggle:hover {
    background: var(--rl-dark-bg-hover-strong);
    border-color: var(--rl-dark-border-hover);
}

.rl-dropdown.dark .rl-dropdown-toggle:focus {
    border-color: var(--rl-border);
    box-shadow: var(--rl-focus-shadow-dark);
}

.rl-dropdown.dark .rl-dropdown-toggle[aria-expanded="true"] {
    background: var(--rl-dark-bg-hover-strong);
    border-color: var(--rl-border);
}

.rl-dropdown.dark .rl-dropdown-menu {
    background: var(--rl-dark-bg);
    border-color: var(--rl-dark-border);
}

.rl-dropdown.dark .rl-dropdown-item {
    color: var(--rl-dark-text);
}

.rl-dropdown.dark .rl-dropdown-item:hover,
.rl-dropdown.dark .rl-dropdown-item:focus {
    background: var(--rl-dark-bg-hover);
}

.rl-dropdown.dark .rl-dropdown-divider {
    background: var(--rl-dark-border);
}

.rl-dropdown.dark .rl-dropdown-header {
    color: var(--rl-dark-text-medium);
}

/* A search that found nothing (search_noresults in search.tcl): what
   happened, then the best way on */
.rl-noresults__box {
	max-width: 52rem;
	margin: var(--rl-spacing-lg) auto;
}
.rl-noresults__box .rl-heading {
	margin-top: 0;
	font-size: var(--rl-text-2xl);
}
.rl-noresults__lead {
	font-size: var(--rl-text-lg);
	margin: var(--rl-spacing-sm) 0 var(--rl-spacing-md);
}
.rl-noresults__more {
	margin-top: var(--rl-spacing-lg);
	padding-top: var(--rl-spacing-md);
	border-top: 1px solid var(--rl-border);
}
.rl-noresults__count {
	color: var(--rl-text-medium);
	font-variant-numeric: tabular-nums;
}
.rl-noresults__tips {
	margin: 0 0 var(--rl-spacing-md);
	padding-left: 1.25em;
}

/* Suggestions under an input (an ARIA combobox listbox, built by
   combobox() in js/search_suggestions.mjs): a full-width rl-dropdown-menu
   whose options are rl-dropdown-items, highlighted by aria-selected for the
   arrow keys */
.rl-suggest {
	position: relative;
}
.rl-dropdown-menu.rl-suggest__menu {
	right: 0;
	min-width: 0;
	max-height: min(70vh, 34rem);
	padding: var(--rl-spacing-xs) 0;
	border-width: 1px;
	border-radius: 8px;
	text-align: left;
	overscroll-behavior: contain;
}
.rl-suggest__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--rl-font-sans-serif);
	font-size: 12px;
}
[role="group"] + [role="group"] > .rl-suggest__header {
	margin-top: var(--rl-spacing-xs);
	border-top: 1px solid var(--rl-border);
}
.rl-suggest__clear {
	border: none;
	background: none;
	padding: 2px 4px;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	color: var(--rl-primary);
	cursor: pointer;
}
.rl-suggest__clear:hover {
	text-decoration: underline;
}
.rl-dropdown-item.rl-suggest__option {
	font-weight: normal;
	gap: 10px;
	padding: 8px 16px;
	min-height: 40px;
}
.rl-dropdown-item.rl-suggest__option[aria-selected="true"] {
	background: var(--rl-bg-hover);
	color: var(--rl-primary);
	box-shadow: inset 3px 0 0 var(--rl-primary);
}
.rl-suggest__icon {
	flex: none;
	display: inline-flex;
	color: var(--rl-text-light);
}
.rl-suggest__option[aria-selected="true"] .rl-suggest__icon,
.rl-suggest__option:hover .rl-suggest__icon {
	color: inherit;
}
.rl-suggest__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rl-suggest__match,
.rl-suggest__query {
	font-weight: 700;
}
.rl-suggest__muted {
	color: var(--rl-text-medium);
}
.rl-suggest__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.rl-suggest__itemline {
	display: flex;
	align-items: center;
	gap: var(--rl-spacing-sm);
	min-width: 0;
}
.rl-suggest__itemid {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--rl-text-medium);
}
.rl-suggest__badge {
	flex: none;
	font-size: 12px;
	padding: 2px 6px;
}
@media (max-width: 767px) {
	.rl-dropdown-menu.rl-suggest__menu {
		max-height: 60vh;
	}
	.rl-suggest__text {
		white-space: normal;
	}
}

/* List Styles */
.faq-article-content ol:not(.rl-list), 
.faq-article-content ul:not(.rl-list), 
.rl-list {
    margin: 0 0 12px 0;
    padding-left: 0;
    list-style: none;
}

.faq-article-content ol:not(.rl-list) > li, 
.faq-article-content ul:not(.rl-list) > li, 
.rl-list > li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
	font-family: var(--rl-font-sans-serif);
    font-size: 15px;
    line-height: 1.6;
    color: var(--rl-text-dark);
}
.rl-list > li.heading {
	color: var(--ada-heading,var(--rl-primary));
	font-size: var(--rl-text-xl);
}
.rl-list > li.heading:after {
	border-bottom: 1px solid var(--ada-border,var(--rl-border));
}

/* Plain list - no markers */
.rl-list--plain li {
    padding-left: 0;
}

.rl-list--plain li::before {
    display: none;
}

/* The .rl-list.ordered, .rl-list.unordered, .rl-list.compact, ol.letters-lower and
   ol.roman-upper selectors below are deprecated aliases kept for FAQ article content
   stored in OpenSearch - remove them once those articles use the rl-list--* names */

/* Unordered list bullets */
.faq-article-content ul:not(.rl-list) > li::before, 
.rl-list--unordered > li::before,
.rl-list.unordered > li::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 10px;
    width: 6px;
    height: 6px;
    background: var(--rl-primary);
    border-radius: 50%;
}

/* Ordered list numbers - a native ::marker sits on the baseline of the li's first
   line (even when that line is in a heading), unlike an absolutely positioned ::before */
.faq-article-content ol:not(.rl-list):not([type="I"]):not([type="a"]),
.rl-list--ordered,
.rl-list.ordered {
    list-style: decimal outside;
    padding-left: 28px;
}

.faq-article-content ol:not(.rl-list):not([type="I"]):not([type="a"]) > li,
.rl-list--ordered > li,
.rl-list.ordered > li {
    padding-left: 4px;
}

.faq-article-content ol:not(.rl-list):not([type="I"]):not([type="a"]) > li::marker,
.rl-list--ordered > li::marker,
.rl-list.ordered > li::marker {
	font-size: 24px;
	font-family: var(--rl-font-serif);
    font-weight: 600;
    color: var(--rl-primary);
}

/* Nested lists */
.faq-article-content ol:not(.rl-list) > li ol:not(.rl-list),
.faq-article-content ol:not(.rl-list) > li ul:not(.rl-list),
.faq-article-content ul:not(.rl-list) > li ul:not(.rl-list),
.faq-article-content ul:not(.rl-list) > li ol:not(.rl-list),
.rl-list > li .rl-list {
    margin-top: 8px;
    margin-bottom: 8px;
}

.faq-article-content ul:not(.rl-list) > li ul:not(.rl-list) > li::before,
.rl-list--unordered > li .rl-list--unordered > li::before,
.rl-list.unordered > li .rl-list.unordered > li::before {
    width: 5px;
    height: 5px;
    background: var(--rl-text-medium);
}

/* List variants */
.rl-list--compact li,
.rl-list.compact li {
    margin-bottom: 6px;
}

.rl-list--spacious li {
    margin-bottom: 16px;
}

/* Style all lists with lowercase letters */
/* Lower Alpha */
ol[type="a"], .rl-list--letters-lower, ol.letters-lower {
	counter-reset: rl-list-counter !important;
}

ol[type="a"] > li, .rl-list--letters-lower > li, ol.letters-lower > li {
	counter-increment: rl-list-counter !important;
}

ol[type="a"] > li::before, .rl-list--letters-lower > li::before, ol.letters-lower > li::before {
	content: counter(rl-list-counter, lower-alpha) ". ";
	/* Keep existing rl-list styling for ::before */
	display: inline-block;
	margin-right: 0.5rem;
	font-size: 20px;
    color: var(--rl-primary);
	background: transparent;
}

/* Style the list items within Roman numeral lists */
/* Upper Roman Numerals */
ol[type="I"], .rl-list--roman-upper, ol.roman-upper {
	counter-reset: rl-list-counter;
}

ol[type="I"] > li, .rl-list--roman-upper > li, ol.roman-upper > li {
	counter-increment: rl-list-counter;
}

ol[type="I"] > li::before, .rl-list--roman-upper > li::before, ol.roman-upper > li::before {
	content: counter(rl-list-counter, upper-roman) ". ";
	/* Keep existing rl-list styling for ::before */
	display: inline-block;
	margin-right: 0.5rem;
	min-width: 2rem;
	font-size: 20px;
    color: var(--rl-primary);
	background: transparent;
}

/* Dark list variant */
.rl-list--dark li {
    color: var(--rl-dark-text);
}

.rl-list--dark.rl-list--unordered li::before {
    background: var(--rl-primary);
}

.rl-list--dark.rl-list--ordered li::marker {
	color: var(--rl-primary);
}

.rl-list--dark.rl-list--unordered li .rl-list--unordered li::before {
	background: var(--rl-dark-text-medium);
}
/* icons in text */
.rl-list:not(.rl-list--horizontal) li svg {
	margin-right: .5em;
}

/* Horizontal list (for inline items) */
.rl-list--horizontal {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding-left: 0;
	justify-content: space-between;
	align-items: flex-start;
}

.rl-list--horizontal li {
	margin-bottom: 0;
}

.rl-list--horizontal.rl-list--compact li {
	padding-left: 0;
}

.rl-list--horizontal li::before {
	left: 0;
}

.rl-list--horizontal.rl-list--unordered li::before {
	top: 8px;
}
.rl-list--horizontal.rl-list--nowrap {
	flex-wrap: nowrap;
	white-space: nowrap;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none; /* Firefox */
}
/* A page's sub menu (themed hilite_navbar): scrolls sideways on a phone, fading
   out at the edge to show there's more, and wraps where there's room */
.rl-subnav .rl-list--nowrap {
	mask-image: linear-gradient(to right, #000 85%, transparent);
	@media (min-width: 768px) {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: .5rem 1.5rem;
		overflow-x: visible;
		mask-image: none;
	}
}

/* Breadcrumb Navigation */
.rl-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--rl-font-sans-serif);
	font-size: 14px;
	gap: 0;
}

.rl-breadcrumb-item {
	display: inline-flex;
	align-items: center;
	color: var(--rl-text-medium);
	line-height: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rl-breadcrumb-item + .rl-breadcrumb-item::before {
	content: '/';
	margin: 0 8px;
	color: var(--rl-text-light);
}

.rl-breadcrumb-item a {
	color: var(--rl-text-medium);
	font-weight: normal;
	text-decoration: none;
	transition: color 0.2s ease;
	padding: 4px 2px;
	border-radius: 2px;
}

.rl-breadcrumb-item a:hover {
	color: var(--rl-primary);
	text-decoration: underline;
}

.rl-breadcrumb-item a:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--rl-border-focus);
	color: var(--rl-primary);
}

/* Current page (last item) */
.rl-breadcrumb-item:last-child a,
.rl-breadcrumb-item.active a,
.rl-breadcrumb-item[aria-current="page"] a {
	color: var(--rl-text-dark);
	font-weight: bold;
}

/* Arrow separator variant */
.rl-breadcrumb.arrow .rl-breadcrumb-item + .rl-breadcrumb-item::before {
	content: '›';
	font-size: 16px;
}

/* Chevron separator variant */
.rl-breadcrumb.chevron .rl-breadcrumb-item + .rl-breadcrumb-item::before {
	content: '⟩';
	font-size: 16px;
}

/* Dot separator variant */
.rl-breadcrumb.dot .rl-breadcrumb-item + .rl-breadcrumb-item::before {
	content: '•';
}

/* Greater-than separator variant */
.rl-breadcrumb.gt .rl-breadcrumb-item + .rl-breadcrumb-item::before {
	content: '>';
}

/* Compact variant */
.rl-breadcrumb.compact {
	font-size: 13px;
}

.rl-breadcrumb.compact .rl-breadcrumb-item + .rl-breadcrumb-item::before {
	margin: 0 6px;
}

/* Large variant */
.rl-breadcrumb.large {
	font-size: 16px;
}

.rl-breadcrumb.large .rl-breadcrumb-item + .rl-breadcrumb-item::before {
	margin: 0 12px;
}

/* Dark theme */
.rl-breadcrumb.dark .rl-breadcrumb-item {
	color: var(--rl-dark-text-medium);
}

.rl-breadcrumb.dark .rl-breadcrumb-item + .rl-breadcrumb-item::before {
	color: var(--rl-dark-border);
}

.rl-breadcrumb.dark .rl-breadcrumb-item a {
	color: var(--rl-dark-text-medium);
}

.rl-breadcrumb.dark .rl-breadcrumb-item a:hover {
	color: var(--rl-primary);
}

.rl-breadcrumb.dark .rl-breadcrumb-item a:focus {
	box-shadow: 0 0 0 2px var(--rl-border);
}

.rl-breadcrumb.dark .rl-breadcrumb-item:last-child,
.rl-breadcrumb.dark .rl-breadcrumb-item.active,
.rl-breadcrumb.dark .rl-breadcrumb-item[aria-current="page"] {
	color: var(--rl-dark-text);
}

/* Mobile responsive */
@media (max-width: 767px) {
	.rl-breadcrumb {
		font-size: 13px;
	}

	.rl-breadcrumb .rl-breadcrumb-item + .rl-breadcrumb-item::before {
		margin: 0 6px;
	}
}

/* Bordered variant */
.rl-breadcrumb.bordered {
	border-bottom: 1px solid var(--rl-border);
	padding-bottom: 12px;
}

.rl-breadcrumb.bordered.dark {
	border-bottom-color: var(--rl-dark-border);
}

/* Background variant */
.rl-breadcrumb.background {
	background: var(--rl-bg-light);
	padding: 12px 16px;
	border-radius: 4px;
}

.rl-breadcrumb.background.dark {
	background: var(--rl-dark-bg-hover);
}

/* Collapsed breadcrumb - shows first, last, and ellipsis */
.rl-breadcrumb.collapsed .rl-breadcrumb-item:not(:first-child):not(:last-child) {
	display: none;
}

.rl-breadcrumb.collapsed .rl-breadcrumb-item:first-child::after {
	content: '...';
	margin: 0 8px;
	color: var(--rl-text-light);
}

/* Remove separator after first item in collapsed mode */
.rl-breadcrumb.collapsed .rl-breadcrumb-item:first-child + .rl-breadcrumb-item::before {
	display: none;
}

/* Auto-collapse on mobile */
@media (max-width: 767px) {
	.rl-breadcrumb.auto-collapse .rl-breadcrumb-item:not(:first-child):not(:last-child) {
		display: none;
	}

	.rl-breadcrumb.auto-collapse .rl-breadcrumb-item:first-child::after {
		content: '...';
		margin: 0 8px;
		color: var(--rl-text-light);
	}

	.rl-breadcrumb.auto-collapse .rl-breadcrumb-item:first-child + .rl-breadcrumb-item::before {
		display: none;
	}
}

/* Badges */

/* Base badge — shared structure */
.rl-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375em;
	padding: 0.25em 0.625em;
	font-family: var(--rl-font-sans-serif, sans-serif);
	font-weight: 500;
	line-height: 1.2;
	font-size: 0.9em;
	letter-spacing: 0.02em;
	color: var(--rl-badge-fg);
	background: var(--rl-badge-bg);
	box-shadow: var(--rl-badge-shadow);
	border-radius: 4px;
}

/* Platinum — top tier, cool bright sheen */
.rl-badge--shop-platinum {
	--rl-badge-fg: hsl(210 25% 20%);
	--rl-badge-bg: linear-gradient(135deg,
	hsl(210 15% 70%) 0%,
	hsl(210 20% 100%) 45%,
	hsl(205 25% 94%) 55%,
	hsl(210 12% 58%) 100%);
	--rl-badge-shadow:
	inset 0 0 0 1px hsl(0 0% 100% / 0.6),
	0 1px 2px hsl(0 0% 0% / 0.15),
	0 0 12px hsl(205 35% 78% / 0.55);
	border: 1px solid hsl(210 20% 70%);
}

/* Gold — second tier, warm polished metal */
.rl-badge--shop-gold {
	--rl-badge-fg: hsl(35 60% 20%);
	--rl-badge-bg: linear-gradient(135deg,
	hsl(40 90% 38%) 0%,
	hsl(48 100% 50%) 40%,
	hsl(50 100% 82%) 50%,
	hsl(48 100% 50%) 60%,
	hsl(40 100% 30%) 100%);
	--rl-badge-shadow:
	      inset 0 0 0 1px hsl(50 100% 96% / 0.7),
		      0 1px 2px hsl(0 0% 0% / 0.18),
			      0 0 12px hsl(45 100% 60% / 0.45);
	border: 1px solid hsl(210 20% 70%);
}

/* Silver — third tier, neutral mid-tone */
.rl-badge--shop-silver {
	--rl-badge-fg: hsl(0 0% 20%);
	--rl-badge-bg: linear-gradient(135deg,
	hsl(0 0% 60%) 0%,
	hsl(0 0% 85%) 50%,
	hsl(0 0% 66%) 100%);
	--rl-badge-shadow:
	inset 0 1px 2px hsl(0 0% 0% / 0.12);
}

/* Bronze — fourth tier, warm earthy copper */
.rl-badge--shop-bronze {
	--rl-badge-fg: hsl(25 40% 96%);
	--rl-badge-bg: linear-gradient(135deg,
	hsl(25 70% 30%) 0%,
	hsl(28 60% 50%) 45%,
	hsl(30 70% 63%) 55%,
	hsl(20 55% 40%) 100%);
	--rl-badge-shadow:
	inset 0 0 0 1px hsl(30 70% 70% / 0.5),
	0 1px 2px hsl(0 0% 0% / 0.15);
}

/* New — status flag, not a tier */
.rl-badge--shop-,
.rl-badge--shop-new {
	--rl-badge-fg: hsl(160 80% 12%);
	--rl-badge-bg: linear-gradient(135deg,
	hsl(160 85% 31%) 0%,
	hsl(160 84% 39%) 50%,
	hsl(158 65% 52%) 100%);
	--rl-badge-shadow:
	inset 0 0 0 1px hsl(150 80% 87% / 0.6),
	0 1px 2px hsl(0 0% 0% / 0.12),
	0 0 10px hsl(158 65% 52% / 0.4);
}

.rl-badge::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	flex-shrink: 0;
}

/* states */
.rl-badge--pending {
	--rl-badge-bg: hsl(36, 95%, 90%);
	--rl-badge-fg: hsl(36, 85%, 28%);
}
.rl-badge--pending::before {
	background: hsl(36, 85%, 55%);
}

.rl-badge--success {
	--rl-badge-bg: var(--rl-success-light);
	--rl-badge-fg: var(--rl-success-dark);
}

.rl-badge--success::before {
	background: var(--rl-success);
}

.rl-badge--warning {
	--rl-badge-bg: hsl(24, 90%, 90%);
	--rl-badge-fg: hsl(24, 80%, 26%);
}
.rl-badge--warning > svg {
	color: hsl(24, 85%, 52%);
}
.rl-badge--warning::before {
	background: hsl(24, 85%, 52%);
}

.rl-badge--danger {
	--rl-badge-bg: hsl(0, 90%, 90%);
	--rl-badge-fg: hsl(0, 65%, 30%);
	--rl-badge-bg: hsl(0, 74%, 95%);
	--rl-badge-fg: hsl(1, 57%, 41%);
}
.rl-badge--danger::before {
	background: hsl(0, 65%, 55%);
}

.rl-badge--info {
	--rl-badge-bg: hsl(210, 60%, 93%);
	--rl-badge-fg: hsl(210, 70%, 28%);
}
.rl-badge--info::before {
	background: hsl(210, 70%, 50%);
}

.rl-badge--neutral {
	--rl-badge-bg: hsl(0, 0%, 93%);
	--rl-badge-fg: hsl(0, 0%, 35%);
}
.rl-badge--neutral::before {
	background: hsl(0, 0%, 60%);
}

.rl-badge--secondary {
	--rl-badge-bg: hsl(210, 20%, 92%);
	--rl-badge-fg: hsl(210, 25%, 30%);
}
.rl-badge--secondary::before {
	background: hsl(210, 18%, 50%);
}

/* optional: no dot */
.rl-badge--no-dot::before {
	display: none;
}

.rl-throb {
	animation: rl-throb 1.5s 5;
}
@media (prefers-reduced-motion: reduce) {
	.rl-throb {
		animation: none;
	}
}
@keyframes rl-throb {
	0%,
	100% {
		box-shadow: 0 0 8px rgba(255, 165, 0, 0.8);
		transform: scale(1);
	}
	50% {
		box-shadow: 0 0 16px rgba(255, 165, 0, 0.9), 0 0 24px rgba(255, 165, 0, 0.4);
		transform: scale(1.02);
	}
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: white;
	border: 1px solid var(--rl-border);
	border-radius: 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--rl-text);
}
.rl-badge--shop {
	padding: .5rem .75rem;
}
.rl-badge--shop:before {
	display: none;
}
.rl-badge--shop-gold,
.badge.warning {
}
.rl-badge--shop-platinum {
}

.rl-badge--shop-silver,
.badge.secondary {
}

.rl-badge--shop-bronze {
}

.rl-badge--shop-,
.rl-badge--shop-new,
.badge.success {
}
.badge.danger {
	background: var(--rl-danger);
	color: var(--rl-danger-light);
}
.badge.info {
	background: #dbeafe;
	color: #1e40af;
}

/* Dialog */
/* Base dialog styles */
/* Mobile first */
dialog.rl-dialog {
	border: none;
	border-radius: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 92vh;
	box-shadow: none;
}

dialog.rl-dialog[open] {
	animation: fade-in 0.15s ease-out;
}

dialog.rl-dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.5);
}

@keyframes fade-in {
	from { opacity: 0; transform: translateY(-20px); }
}

/* Dialog structure */
.dialog-container {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.dialog-content {
	display: flex;
	flex-direction: column;
	background: #fff;
	width: 100%;
}

.dialog-header {
	position: relative;
	padding: 1rem 3rem 1rem 1rem;
	border-bottom: 1px solid #e5e5e5;
	flex-shrink: 0;
}

.dialog-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 500;
	text-transform: capitalize;
}

.dialog-body {
	padding: 1rem;
	overflow-y: auto;
	flex: 1 1 auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

.dialog-footer {
	padding: 1rem;
	border-top: 1px solid #e5e5e5;
	text-align: right;
	flex-shrink: 0;
}

.dialog-footer:empty {
	display: none;
}

/* Close button */
/* Ruby Lane Dialog Close Button */
.rl-dialog-close {
	position: absolute;
	top: .75rem;
	right: .75rem;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--rl-primary);
	border: 2px solid var(--rl-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	z-index: 10;
}

/* X icon using pseudo-elements */
.rl-dialog-close::before,
.rl-dialog-close::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 2px;
	background-color: #FFFFFF;
	transition: background-color 0.3s ease;
}

.rl-dialog-close::before {
	transform: rotate(45deg);
}

.rl-dialog-close::after {
	transform: rotate(-45deg);
}

/* Hover state */
.rl-dialog-close:hover {
	background-color: var(--rl-primary-dark);
	border-color: var(--rl-primary-dark);
	transform: scale(1.1);
	transform: rotate(90deg);
	box-shadow: 0 2px 8px rgba(196, 30, 58, 0.3);
}

.rl-dialog-close:hover::before,
.rl-dialog-close:hover::after {
	background-color: #FFFFFF;
}

/* Focus state for keyboard navigation (ADA compliance) */
.rl-dialog-close:focus {
	outline: 3px solid #4A90E2; /* Accessible focus color */
	outline-offset: 2px;
	background-color: #A01828;
}

.rl-dialog-close:focus:not(:focus-visible) {
	outline: none;
}

.rl-dialog-close:focus-visible {
	outline: 3px solid #4A90E2;
	outline-offset: 2px;
}

/* Active/pressed state */
.rl-dialog-close:active {
	transform: scale(0.95);
	background-color: #8A1522;
}

/* Screen reader text for accessibility */
.rl-dialog-close .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 767px) {
	.rl-dialog-close {
		top: .5rem;
		right: .5rem;
		width: 36px;
		height: 36px;
	}

	.rl-dialog-close::before,
	.rl-dialog-close::after {
		width: 16px;
	}
}

/* Button spacing in footer */
.dialog-footer .rl-btn + .rl-btn {
	margin-left: 0.5rem;
}

/* Tablet/Desktop */
@media (min-width: 768px) {
	dialog.rl-dialog {
		border-radius: 6px;
		width: fit-content;
		height: fit-content;
		max-height: 96vh;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
	}

	.dialog-container {
		width: 600px;
		max-width: 90vw;
		height: auto;
	}

	.dialog-container.dialog-lg { width: 900px; }
	.dialog-container.dialog-sm { width: 300px; }

	.dialog-content {
		height: auto;
		/* max-height: 96vh;*/
	}

	.dialog-header {
		padding: 1.5rem 3.5rem 1.5rem 1.5rem;
	}

	.dialog-body {
		overflow-y: auto;
		padding: 1.5rem;
		& > .heading:first-child,
		& > .heading-sub:first-child {
			margin-top: 0;
		}
	}

	.dialog-footer {
		padding: 1rem 1.5rem;
	}

	.dialog-header .close {
		top: 1rem;
		right: 1rem;
	}
}

/* Focus management */
dialog.rl-dialog:focus {
	outline: none;
}

/* Print */
@media print {
	dialog.rl-dialog::backdrop,
	.dialog-header .close {
		display: none;
	}
}

/* Drawer: a modal <dialog> that slides in from the left (the site menu).
 * showModal() gives it the top layer, the backdrop, the focus trap and Escape;
 * setupDrawers in rl_uiframework_es6.mjs wires the .rl-drawer-toggle button.
 * The slide out needs @starting-style and allow-discrete; browsers without
 * them just show and hide it. */
dialog.rl-drawer {
	position: fixed;
	inset: 0 auto 0 0;
	margin: 0;
	padding: 0;
	border: none;
	width: min(60rem, 100% - 4rem);
	max-width: none;
	height: 100dvh;
	max-height: none;
	background: var(--rl-bg-white);
	color: var(--rl-text-dark);
	box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(-100%);
	transition:
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		overlay 0.3s allow-discrete,
		display 0.3s allow-discrete;

	&[open] {
		transform: none;
		@starting-style {
			transform: translateX(-100%);
		}
	}

	&::backdrop {
		background-color: rgba(0, 0, 0, 0);
		transition:
			background-color 0.3s ease-in-out,
			overlay 0.3s allow-discrete,
			display 0.3s allow-discrete;
	}
	&[open]::backdrop {
		background-color: rgba(0, 0, 0, 0.5);
		@starting-style {
			background-color: rgba(0, 0, 0, 0);
		}
	}

	&:focus {
		outline: none;
	}

	@media (max-width: 767px) {
		width: 100%;
	}
	@media (prefers-reduced-motion: reduce) {
		&, &::backdrop {
			transition: none;
		}
	}
}

/* The page behind doesn't scroll while a drawer is open */
html:has(dialog.rl-drawer[open]) {
	overflow: hidden;
}

/* Stays put while the drawer scrolls, so the close button is always there */
.rl-drawer__header {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: 4rem;
	padding: var(--rl-spacing-sm) 4rem var(--rl-spacing-sm) var(--rl-spacing-lg);
	background: inherit;
	border-bottom: 1px solid var(--rl-border);
}

/* Links take their color from the framework's a:not(...) rule, through --ada-link */
.rl-drawer__title {
	--ada-link: var(--rl-text-dark);
	font-size: var(--rl-text-xl);
	font-weight: 700;
}

.rl-drawer__body {
	padding: var(--rl-spacing-md) var(--rl-spacing-lg) calc(var(--rl-spacing-xl) + env(safe-area-inset-bottom, 0px));
}

/* The links keep their width beside the lane tiles */
.rl-drawer__nav {
	flex: none;
}

/* The header's border already separates the first group */
.rl-drawer__nav > .rl-dropdown-divider:first-child {
	display: none;
}

/* Comfortable touch targets for the menu's links */
.rl-drawer__nav a {
	display: block;
	padding-block: var(--rl-spacing-xs);
}

.rl-drawer__nav .rl-dropdown-divider {
	margin-block: var(--rl-spacing-xs);
}

/* The page being shown (aria-current, set by setupDrawers) */
.rl-drawer__nav a[aria-current="page"] {
	--ada-link: var(--rl-primary);
	border-inline-start: 3px solid var(--rl-primary);
	padding-inline-start: var(--rl-spacing-sm);
}

@media (max-width: 767px) {
	.rl-drawer__header {
		padding-left: var(--rl-spacing-md);
	}
	.rl-drawer__body {
		padding-inline: var(--rl-spacing-md);
	}

	/* Stacked by -stack-xs, which wraps: a wrapped column is as wide as its
	 * widest content, not the drawer, so the lanes row below couldn't scroll */
	.rl-drawer__body > .rl-flex--stack-xs {
		flex-wrap: nowrap;
	}

	/* The lanes come first on a phone, as a row that scrolls sideways, with
	 * the next tile peeking in to show there's more */
	.rl-drawer__lanes {
		order: -1;
		margin-inline: calc(-1 * var(--rl-spacing-md));
		padding-bottom: var(--rl-spacing-md);
		border-bottom: 1px solid var(--rl-border);
	}
	.rl-drawer__lanes .rl-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 38%;
		gap: var(--rl-spacing-sm);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--rl-spacing-md);
		padding-inline: var(--rl-spacing-md);
		scrollbar-width: none;
	}
	.rl-drawer__lanes .rl-grid > * {
		scroll-snap-align: start;
	}
	.rl-drawer__lanes .large {
		font-size: var(--rl-text-base, 1rem);
	}

	/* That divider separated the links from the lanes below them */
	.rl-drawer__nav > .rl-dropdown-divider:last-child {
		display: none;
	}
}

@media print {
	dialog.rl-drawer {
		display: none;
	}
}

/* Card */
.rl-card {
	background: var(--rl-bg-white);
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	margin-bottom: 1.5rem;
}

/* default is slate gray */
.rl-card-header {
	background: linear-gradient(135deg, hsl(210,18%, 45%)  0%, hsl(210, 18%, 38%, 100%));
	color: var(--ada-text,white);
	padding: 0.5rem 1rem;
	margin-bottom: 0.5rem;
	@media (min-width: 768px) {
		margin-bottom: 0;
		padding: 0.5rem 2rem;
	}
}
/* A heading in the header is the card's title: one size, whatever its level,
   in the header's own colour */
.rl-card-header :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-size: 1.25rem;
	color: inherit;
}
/* all other colors are defined in the themed proc */
.rl-card-content {
	border: 2px solid  hsl(210,18%, 45%);
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	border-style: dotted;
	border-top: none;
	padding: .5rem;
	@media (min-width: 768px) {
		padding: 2rem;
	}
}

/* Link count: a count beside a menu entry or tab, like My Orders' (themed mobile_nav, tablist) */
.link-count {
	display: inline-block;
	min-width: 1.75em;
	margin-left: 0.4em;
	padding: 0.1em 0.5em;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 12%, transparent);
	color: inherit;
	font-size: 0.85em;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}

/* Account activity: what's happening in the account (themed account_activity,
   on the home page and My Account) */
.rl-activity__list {
	margin: var(--rl-spacing-sm) 0 0;
	padding: 0;
	list-style: none;
}
.rl-activity__list li + li {
	border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.rl-activity__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 4px;
	color: inherit;
	font-weight: bold;
	text-decoration: none;
}
.rl-activity__row:hover .rl-activity__title {
	text-decoration: underline;
}
.rl-activity__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 12%, transparent);
	font-size: 1.125rem;
}
.rl-activity__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.rl-activity__title {
	font-weight: 700;
	line-height: 1.25;
}
.rl-activity__detail {
	overflow: hidden;
	font-size: 0.875rem;
	line-height: 1.3;
	opacity: .8;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.rl-activity__pic {
	flex: none;
	width: 48px;
}

/* Radio Pill Group */
fieldset.rl-radio-pill-group {
	border: none;
	padding: 0;
	margin: 0 0 1.5rem 0;
}

.rl-radio-pill-group > .rl-radio-group-label {
	display: block;
	margin-bottom: .5rem;
}

.rl-radio-pill-group--hide-legend > .rl-radio-group-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.rl-radio-pill-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 1rem;
}

/* Each card fills its grid cell, so a row's cards are one height when
   their descriptions wrap to different lengths */
.rl-radio-pill-option { display: flex; flex-direction: column; }
.rl-radio-pill-option > .rl-radio-wrapper { flex: 1; display: flex; flex-direction: column; margin-bottom: 0; }
.rl-radio-pill-option > .rl-radio-wrapper > .rl-radio { flex: 1; }

.rl-radio-pill-group--stack .rl-radio-pill-options {
	grid-template-columns: 1fr;
}

.rl-radio-pill-group[aria-invalid="true"] .rl-radio-pill-options {
	outline: 2px solid var(--rl-danger);
	outline-offset: 4px;
	border-radius: 4px;
}

/* The radio itself is invisible but covers its pill: the browser's "select one"
   message for a required group points at the pill, which a 0x0 radio gave it nowhere to */
.rl-radio-pill-group input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

/* Suppress per-pill asterisks — the legend carries the required marker */
.rl-radio-pill-group .rl-radio-label .required {
	display: none;
}

/* Circle hidden by default; opt in with --control class */
.rl-radio-pill-group:not(.rl-radio-pill-group--control) .rl-radio-circle {
	display: none;
}

.rl-radio-pill-group .rl-radio {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: white;
	border: 2px solid hsl(30, 15%, 85%);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	min-height: 80px;
	margin: 0;
	height: 100%;
	box-sizing: border-box;
}

.rl-radio-pill-group .rl-radio:hover {
	border-color: hsl(30, 20%, 70%);
}

.rl-radio-pill-group .rl-radio:has(input[type="radio"]:checked) {
	border-color: hsl(165, 25%, 42%);
	background: hsl(165, 25%, 95%);
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.rl-radio-pill-group .rl-radio:has(input[type="radio"]:focus-visible) {
	outline: 3px solid hsl(165, 25%, 42%);
	outline-offset: 2px;
}

.rl-radio-pill-group .rl-radio:has(input[type="radio"]:disabled) {
	background: var(--rl-bg-disabled, #f3f2f0);
	color: var(--rl-text-disabled, #9b9b98);
	border-color: hsl(30, 10%, 80%);
	cursor: not-allowed;
}

.rl-radio-pill-group .rl-radio-label {
	text-align: center;
	line-height: 1.2;
	font-size: 1rem;
	font-weight: 600;
	color: hsl(30, 10%, 20%);
}

.rl-radio-pill-title {
	display: block;
	font-weight: 600;
}

.rl-radio-pill-desc {
	display: block;
	margin-top: .2rem;
	font-size: .875em;
	font-weight: 400;
	color: var(--rl-text-muted, #55595f);
}

/* --control: circle visible, inline left of label text
   Must follow .rl-radio-pill-group .rl-radio to override flex-direction */
.rl-radio-pill-group--control .rl-radio {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

.rl-radio-pill-group--control .rl-radio-circle {
	flex: 0 0 auto;
}

.rl-radio-pill-group--control .rl-radio-label {
	text-align: left;
}

/* --swatches: each pill is just its swatch (.rl-swatch, with a bg-* class
   or a background image), and its name (.rl-swatch__name) is for screen
   readers.  Set --rl-swatch-size and --rl-swatch-ratio for bigger ones */
.rl-radio-pill-group--swatches .rl-radio-pill-options {
	grid-template-columns: repeat(auto-fill, minmax(var(--rl-swatch-size, 44px), 1fr));
	gap: var(--rl-spacing-sm);
}

.rl-radio-pill-group--swatches .rl-radio {
	padding: 3px;
	min-height: 0;
	border-radius: 6px;
}

.rl-radio-pill-group--swatches .rl-radio-label,
.rl-radio-pill-group--swatches .rl-radio-pill-title {
	display: block;
	width: 100%;
}

.rl-swatch {
	display: block;
	width: 100%;
	aspect-ratio: var(--rl-swatch-ratio, 1);
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.15);
	background-size: cover;
	background-position: center;
}

.rl-swatch__name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Toggle Content - for radio pill groups with data-toggle-target */
.rl-toggle-target .toggle-content {
	display: none;
}

.rl-toggle-target .toggle-content.active {
	display: block;
	animation: fadeIn 0.2s ease;
}

/* RL Product Carousel */
.rl-carousel {
	position: relative;
	padding: 0 36px; /* room for nav arrows */
}

.rl-carousel-track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none; /* Firefox */
}

.rl-carousel-item {
	flex: 0 0 calc((100% - 60px) / 6); /* 6 columns with 5 gaps */
	scroll-snap-align: start;
	min-width: 0;
}

/* Responsive: 2 columns on mobile */
@media (max-width: 767px) {
	.rl-carousel {
		padding: 0 12px; /* room for nav arrows */
	}
	.rl-carousel-item {
		flex: 0 0 calc((100% - 12px) / 2); /* 2 columns with 1 gap */
	}
}

/* 3 columns on small tablets */
@media (min-width: 768px) and (max-width: 991px) {
	.rl-carousel {
		padding: 0 24px; /* room for nav arrows */
	}
	.rl-carousel-item {
		flex: 0 0 calc((100% - 24px) / 3); /* 3 columns */
	}
}

/* 4 columns on large tablets */
@media (min-width: 992px) and (max-width: 1199px) {
	.rl-carousel-item {
		flex: 0 0 calc((100% - 36px) / 4); /* 4 columns */
	}
}

/* Gallery image container */
.rl-carousel-item .gallery-img {
	border-radius: var(--rl-radius-sm, 4px);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.rl-carousel-item .gallery-img:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.rl-carousel-item .gallery-img a {
	display: block;
	padding: 10px 0;
}

.rl-carousel-item .gallery-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .26));
}

.rl-carousel-item .itemlisting-price {
	padding: 6px 8px;
	font-size: 14px;
	text-align: center;
}

/* Carousel navigation arrows */
/* An arrow that can be used stands out: dark on white with a ring and a
   shadow (over item pictures too); a disabled one fades right back */
.rl-carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rl-bg-white);
	border: 2px solid var(--rl-text-dark);
	border-radius: 50%;
	box-shadow: 0 2px 6px hsla(0, 0%, 0%, 0.25);
	cursor: pointer;
	color: var(--rl-text-dark);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	z-index: 2;
	padding: 0;
}

.rl-carousel-nav:hover {
	background: var(--rl-primary);
	border-color: var(--rl-primary);
	color: var(--rl-bg-white);
}

.rl-carousel-nav:focus {
	outline: none;
}

.rl-carousel-nav:focus-visible {
	box-shadow: var(--rl-focus-shadow, 0 0 0 3px rgba(107, 93, 82, 0.25)), 0 2px 6px hsla(0, 0%, 0%, 0.25);
}

.rl-carousel-nav[disabled] {
	border-color: var(--rl-border);
	color: var(--rl-text-light);
	box-shadow: none;
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

.rl-carousel-prev { left: 0; }
.rl-carousel-next { right: 0; }

.rl-carousel-nav svg {
	width: 18px;
	height: 18px;
	fill: currentcolor;
}


/* ============================================================
 * RL UI FRAMEWORK — Table Component
 * Replaces Bootstrap 3 .table classes with framework variables.
 * Uses :where() for low-specificity defaults so overrides stay easy.
 * ============================================================ */

/* ------------------------------------------------------------------
 * Base Table
 * ------------------------------------------------------------------ */
	.rl-table {
		width: 100%;
		max-width: 100%;
		margin-bottom: var(--rl-spacing-lg);
		font-size: 0.9375rem;
		color: var(--rl-text-dark);
		border-collapse: collapse;
	}

	.rl-table :where(th, td) {
		padding: var(--rl-spacing-sm);
		line-height: 1.5;
		vertical-align: top;
		border-top: 1px solid var(--rl-border);
	}

	.rl-table :where(thead th) {
		vertical-align: bottom;
		border-bottom: 2px solid var(--rl-border);
		font-weight: 600;
		color: var(--rl-text-medium);
		text-align: left;
		background-color: var(--rl-bg-hover);
		text-wrap-style: balance;
	}

	/* Remove top border on first header row when preceded by caption/colgroup */
	.rl-table :where(caption + thead, colgroup + thead, thead:first-child) > tr:first-child :where(th, td) {
		border-top: 0;
	}

	/* Double border between adjacent tbody sections */
	.rl-table :where(tbody + tbody) {
		border-top: 2px solid var(--rl-border);
	}

	/* Nested table background */
	.rl-table .rl-table {
		background-color: var(--rl-bg-white);
	}


	/* ------------------------------------------------------------------
	 * Condensed Variant
	 * ------------------------------------------------------------------ */
.rl-table--condensed :where(th, td) {
	padding: var(--rl-spacing-xs) var(--rl-spacing-sm);
}


/* ------------------------------------------------------------------
 *    Bordered Variant
 *       ------------------------------------------------------------------ */
.rl-table--bordered {
	border: 1px solid var(--rl-border);
}

.rl-table--bordered :where(th, td) {
	border: 1px solid var(--rl-border);
}

.rl-table--bordered :where(thead th, thead td) {
	border-bottom-width: 2px;
}


/* ------------------------------------------------------------------
 * Striped Variant
 * ------------------------------------------------------------------ */
.rl-table--striped :where(tbody tr:nth-of-type(odd)) {
	background-color: var(--rl-bg-light);
}


/* ------------------------------------------------------------------
 * Hover Variant
 * ------------------------------------------------------------------ */
.rl-table--hover :where(tbody tr):hover {
	background-color: var(--rl-bg-hover);
}


/* ------------------------------------------------------------------
 * Contextual Row / Cell States
 * ------------------------------------------------------------------ */
.rl-table :where(.is-active) {
	background-color: var(--rl-bg-hover);
}

.rl-table--hover :where(tbody tr):hover :where(.is-active),
.rl-table--hover :where(tbody tr.is-active):hover {
	background-color: var(--rl-bg-disabled);
}

.rl-table :where(.is-success) {
	background-color: var(--rl-success-light);
}

.rl-table--hover :where(tbody tr):hover :where(.is-success),
.rl-table--hover :where(tbody tr.is-success):hover {
	background-color: hsl(var(--rl-success-h), 40%, 91%);
}

.rl-table :where(.is-info) {
	background-color: var(--rl-info-light);
}

.rl-table--hover :where(tbody tr):hover :where(.is-info),
.rl-table--hover :where(tbody tr.is-info):hover {
	background-color: hsl(210, 50%, 91%);
}

.rl-table :where(.is-warning) {
	background-color: var(--rl-warning-light);
}

.rl-table--hover :where(tbody tr):hover :where(.is-warning),
.rl-table--hover :where(tbody tr.is-warning):hover {
	background-color: hsl(var(--rl-warning-h), 80%, 91%);
}

.rl-table :where(.is-danger) {
	background-color: var(--rl-danger-light);
}

.rl-table--hover :where(tbody tr):hover :where(.is-danger),
.rl-table--hover :where(tbody tr.is-danger):hover {
	background-color: hsl(var(--rl-danger-h), 70%, 91%);
}


/* ------------------------------------------------------------------
 * Responsive Table
 * Mobile: stacks cells vertically using data-title for labels.
 * Desktop (768px+): reverts to normal table layout.
 *
 * Usage:
 * <table class="rl-table rl-table--responsive">
 *  <thead>...</thead>
 *  <tbody>
 *   <tr>
 *    <td data-title="Item">Widget</td>
 *    <td data-title="Price">$12.00</td>
 *   </tr>
 *  </tbody>
 * </table>
 * ------------------------------------------------------------------ */

/* Mobile-first: stacked card layout */
.rl-table.rl-table--responsive {
	display: block;
	width: 100%;
}

.rl-table--responsive :where(thead, tbody, tr, th, td) {
	display: block;
}

.rl-table--responsive thead tr {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

.rl-table--responsive td {
	position: relative;
	white-space: normal;
	padding-left: 50%;
	text-align: right;
}

.rl-table--responsive td::before {
	content: attr(data-title);
	position: absolute;
	left: var(--rl-spacing-sm);
	max-width: 48%;
	white-space: normal;
	font-weight: 600;
	text-align: left;
	color: var(--rl-text-medium);
}

.rl-table--responsive td:empty::after {
	content: "\00a0";
}

.rl-table--responsive td.not-responsive {
	padding-left: 0;
	text-align: left;
}

.rl-table .financial {
	text-align: right;
}

/* ------------------------------------------------------------------
 * Scroll Wrapper
 * Wrap any wide table in a div for horizontal scrolling
 * 
 * Usage:
 *  <div class="rl-table-scroll">
 *   <table class="rl-table">...</table>
 *  </div>
 * ------------------------------------------------------------------ */
.rl-table-scroll {
	overflow-x: auto;
}

/* Desktop: revert to standard table layout */
@media only screen and (min-width: 768px) {
	.rl-table.rl-table--responsive {
		display: table;
	}

	.rl-table--responsive :where(thead, tbody) {
		display: table-row-group;
	}

	.rl-table--responsive :where(tr) {
		display: table-row;
	}

	.rl-table--responsive :where(th, td) {
		display: table-cell;
	}

	.rl-table--responsive thead tr {
		position: relative;
		top: unset;
		left: unset;
	}

	.rl-table--responsive td {
		padding-left: var(--rl-spacing-sm);
		text-align: left;
	}

	.rl-table--responsive td::before {
		content: "";
	}

	.rl-table--responsive th {
		text-align: left;
	}

	/* Bordered inside responsive — remove redundant outer edges */
	.rl-table--responsive.rl-table--bordered {
		border: 0;
	}

	.rl-table--responsive.rl-table--bordered :where(th:first-child, td:first-child) {
		border-left: 0;
	}

	.rl-table--responsive.rl-table--bordered :where(th:last-child, td:last-child) {
		border-right: 0;
	}

	.rl-table--responsive.rl-table--bordered :where(tbody tr:last-child, tfoot tr:last-child) :where(th, td) {
		border-bottom: 0;
	}
}


/* Responsive visibility utilities */

/* Hidden on mobile (below breakpoint), visible on larger screens */
@media (max-width: 767px) {
	.rl-hidden-xs {
		display: none !important;
	}
}
/* Hidden on non-mobile (below breakpoint), visible on mobile */
@media (min-width: 768px) {
	.rl-hidden-sm-up {
		display: none !important;
	}
}

/* Print visibility utilities */
@media print {
	.rl-hidden-print {
		display: none !important;
	}
}

.rl-visible-print {
	display: none !important;
}

@media print {
	.rl-visible-print {
		display: initial !important;
	}
}

/* Pagination */
.rl-pagination {
	display: flex;
	margin: 0 0 12px;
	padding-left: 0;
	list-style: none;
	align-items: center;
	justify-content: safe center;
	overflow-x: auto;
}

.rl-pagination__item {
	display: inline-flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.rl-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: -1px;
	line-height: 1.5;
	padding: 0;
	color: var(--ada-text, var(--rl-text-color));
	text-decoration: none;
	background-color: var(--rl-bg-white, #fff);
	border: 1px solid transparent;
	border-radius: 50% !important;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.2rem;
}

.rl-pagination__link:hover,
.rl-pagination__link:focus-visible {
	z-index: 2;
	color: var(--ada-link-hover, var(--rl-primary));
	background-color: var(--rl-bg-hover, #d2d2d2);
	border-color: var(--rl-border, #ddd);
}

/* First & last item spacing */
.rl-pagination__item:first-child .rl-pagination__link {
	margin-left: 0;
	padding-left: 0;
}

.rl-pagination__item:last-child .rl-pagination__link {
	margin-right: 0;
	padding-right: 0;
}

/* Active state */
.rl-pagination__item--active .rl-pagination__link,
.rl-pagination__item--active .rl-pagination__link:hover,
.rl-pagination__item--active .rl-pagination__link:focus-visible {
	z-index: 3;
	color: var(--rl-bg-white, #fff);
	cursor: default;
	background-color: var(--rl-primary, #d92e34);
	border-color: var(--rl-primary, #d92e34);
}

/* Disabled state */
.rl-pagination__item--disabled .rl-pagination__link,
.rl-pagination__item--disabled .rl-pagination__link:hover,
.rl-pagination__item--disabled .rl-pagination__link:focus-visible {
	color: var(--ada-text-muted, var(--rl-text-muted, #727272));
	cursor: not-allowed;
	background-color: var(--rl-bg-white, #fff);
	border-color: transparent;
	pointer-events: none;
}

/* rl-busy: double-click prevention + spinner */
.rl-busy {
	pointer-events: none;
	position: relative;
	cursor: default;
	color: transparent !important;
	&> svg {
		display: none;
	}
}

.rl-busy::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.2em;
	height: 1.2em;
	border: 2px solid var(--rl-busy-spinner, rgba(0, 0, 0, 0.4));
	border-right-color: transparent;
	border-radius: 50%;
	animation: rl-spin 0.6s linear infinite;
}

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


.rl-detail {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.rl-detail__label {
	font-size: 0.7em;
	color: var(--ada-text-muted,--rl-text-light);
	line-height: 1.5;
}

.rl-detail__value {
	font-size: 1em;
	color: var(--ada-text,--rl-text);
	line-height: 1.4;
}

/* horizontal group */
.rl-detail-group {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}


.rl-state {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.2;
    color: var(--rl-text-dark);
    margin-bottom: var(--rl-spacing-md);
}

.rl-state::before {
	content: "";
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	flex-shrink: 0;
	background: currentColor;
}

/* An empty one is a live region (role="status") waiting for js to fill it */
.rl-state:empty::before {
	content: none;
}

/* states */
.rl-state--pending {
	color: hsl(36, 85%, 55%);
}

.rl-state--success {
    color: var(--rl-success-text);
}

.rl-state--warning {
	color: hsl(48, 100%, 40%);
}
.rl-state--warning::before {
	background: var(--rl-warning);
}

.rl-state--danger {
    color: var(--rl-danger);
}

.rl-state--info {
    color: var(--rl-info-text);
}

.rl-state--neutral {
	color: var(--rl-text-muted);
}

/* optional: no dot */
.rl-state--no-dot::before {
	display: none;
}


.rl-hilite {
	color: var(--ada-hilite, var(--rl-primary));
}
.rl-text-center {
	text-align: center;
}


/* Backgroundds */
/* Class names are doubled (.bg-x.bg-x) to win specificity
   against component backgrounds without using !important. */
.bg-transparent.bg-transparent {
  background-color: transparent;
}
.bg-translucent.bg-translucent {
  background-color: rgba(255, 255, 255, 0.7);
}
.bg-red.bg-red {
  background-color: #c73d32;
}
.bg-rubylane-red.bg-rubylane-red {
  background-color: var(--rl-primary);
}
.bg-white.bg-white {
  background-color: #ffffff;
}
.bg-black.bg-black {
  background-color: #000000;
}
.bg-gray-base.bg-gray-base {
  background-color: #000;
}
.bg-gray-darker.bg-gray-darker {
  background-color: #222222;
}
.bg-gray-dark.bg-gray-dark {
  background-color: #333333;
}
.bg-gray.bg-gray {
  background-color: #666;
}
.bg-gray-light.bg-gray-light {
  background-color: #727272;
}
.bg-gray-lighter.bg-gray-lighter {
  background-color: #d2d2d2;
}
.bg-gray-lightest.bg-gray-lightest {
  background-color: #ededed;
}
.bg-default.bg-default {
  background-color: #ededed;
}
.bg-gray-white.bg-gray-white {
  background-color: #f7f7f7;
}
.bg-pastel-green.bg-pastel-green {
  background-color: #A8E6CE;
}
.bg-bright-green.bg-bright-green {
  background-color: #7BE495;
}
.bg-light-pink.bg-light-pink {
  background-color: #fcdfdf;
}
.bg-pastelBlue.bg-pastelBlue {
  background-color: #A8DEE0;
}
.bg-light-aqua.bg-light-aqua {
  background-color: #D6F9EF;
}
.bg-aqua.bg-aqua {
  background-color: #45ffff;
}
.bg-lightBabyBlue.bg-lightBabyBlue {
  background-color: #e3f6fc;
}
.bg-light-gold.bg-light-gold {
  background-color: #e0ce82;
}
.bg-vintageYellow.bg-vintageYellow {
  background-color: #f7f4cd;
}
.bg-vintageLightGreen.bg-vintageLightGreen {
  background-color: #83a9a0;
}
.bg-pistachio.bg-pistachio {
  background-color: #ddeabb;
}
.bg-vintageLighterGreen.bg-vintageLighterGreen {
  background-color: #efecdb;
}
.bg-vintageGreen.bg-vintageGreen {
  background-color: #55897d;
}
.bg-vintageDarkGreen.bg-vintageDarkGreen {
  background-color: #758282;
}
.bg-vintageDarkerGreen.bg-vintageDarkerGreen {
  background-color: #425454;
}
.bg-tuscanRed.bg-tuscanRed {
  background-color: #753d39;
}
.bg-vintageChocolate.bg-vintageChocolate {
  background-color: #896156;
}
.bg-vintageWhite.bg-vintageWhite {
  background-color: #fff9ef;
}
.bg-vintageLightPink.bg-vintageLightPink {
  background-color: #f8a7a7;
}
.bg-vintagePink.bg-vintagePink {
  background-color: #f68787;
}
.bg-vintageBrown.bg-vintageBrown {
  background-color: #594e4a;
}
.bg-vintageRose.bg-vintageRose {
  background-color: #e1b3ac;
}
.bg-vintageCream.bg-vintageCream {
  background-color: #feecc8;
}
.bg-vintageLightBeige.bg-vintageLightBeige {
  background-color: #e7e0d0;
}
.bg-vintageBeige.bg-vintageBeige {
  background-color: #d8cbbb;
}
.bg-vintageSalmon.bg-vintageSalmon {
  background-color: #fcc8b1;
}
.bg-lightPurple.bg-lightPurple {
  background-color: #f0e3ff;
}
.bg-lightBluePurple.bg-lightBluePurple {
  background-color: #dae0ff;
}
.bg-BluePurple.bg-BluePurple {
  background-color: #c6cfff;
}
.bg-vintageDarkBlue.bg-vintageDarkBlue {
  background-color: #69779b;
}
.bg-vintageLightBlue.bg-vintageLightBlue {
  background-color: #99abbc;
}
.bg-vintageLighterBlue.bg-vintageLighterBlue {
  background-color: #c1ccd6;
}
.bg-vintageBlue.bg-vintageBlue {
  background-color: #9aa5bf;
}
.bg-lightcoral.bg-lightcoral {
  background-color: #f6929f;
}
.bg-coral.bg-coral {
  background-color: #f36a7b;
}
.bg-blush.bg-blush {
  background-color: #fae6de;
}
.bg-lightTiffanyBlue.bg-lightTiffanyBlue {
  background-color: #7ae0e5;
}
.bg-tiffanyBlue.bg-tiffanyBlue {
  background-color: #49d5dc;
}
.bg-vintageBrick.bg-vintageBrick {
  background-color: #5c1819;
}
.bg-vintageLightOrange.bg-vintageLightOrange {
  background-color: #ff8c41;
}
.bg-vintageOrange.bg-vintageOrange {
  background-color: #ff6600;
}
.bg-lightOatmeal.bg-lightOatmeal {
  background-color: #f3f0e5;
}
.bg-lightBlush.bg-lightBlush {
  background-color: #fbf8f9;
}
.bg-flesh.bg-flesh {
  background-color: #bebba7;
}
.bg-wax.bg-wax {
  background-color: #e4eedf;
}
.bg-wheat.bg-wheat {
  background-color: #ccae80;
}
.bg-babyBlue.bg-babyBlue {
  background-color: #8bc5d6;
}
.bg-darkBabyBlue.bg-darkBabyBlue {
  background-color: #49a5bf;
}
.bg-BlueGray.bg-BlueGray {
  background-color: #737c93;
}
.bg-darkBlueGray.bg-darkBlueGray {
  background-color: #3F4C6B;
}
.bg-lightBlueGray.bg-lightBlueGray {
  background-color: #86AECC;
}
.bg-lighterBlueGray.bg-lighterBlueGray {
  background-color: #b2cbde;
}
.bg-silverChalice.bg-silverChalice {
  background-color: #a5acb4;
}
.bg-slateGray.bg-slateGray {
  background-color: #727e8a;
}
.bg-valentino-red.bg-valentino-red {
  background-color: #ee0000;
}
.bg-lux-red.bg-lux-red {
  background-color: #6d0019;
}
.bg-lux-lightteal.bg-lux-lightteal {
  background-color: #45a3a4;
}
.bg-lux-teal.bg-lux-teal {
  background-color: #008182;
}
.bg-lux-blue.bg-lux-blue {
  background-color: #1e3f70;
}
.bg-lux-bluegray.bg-lux-bluegray {
  background-color: #5f6c76;
}
.bg-lux-darkblue.bg-lux-darkblue {
  background-color: #152c4e;
}
.bg-lux-lightbluegray.bg-lux-lightbluegray {
  background-color: #8a949b;
}
.bg-lux-yellow.bg-lux-yellow {
  background-color: #eee9d7;
}
.bg-lux-purple.bg-lux-purple {
  background-color: #734772;
}
.bg-lux-lightpurple.bg-lux-lightpurple {
  background-color: #997998;
}
.bg-pink-glow.bg-pink-glow {
  background-color: #dd3183;
}
.bg-blazing-yellow.bg-blazing-yellow {
  background-color: #f2de4d;
}
.bg-light-comet-streak.bg-light-comet-streak {
  background-color: #cbd7d8;
}
.bg-moroccan-blue.bg-moroccan-blue {
  background-color: #2d485f;
}
.bg-acid-lime.bg-acid-lime {
  background-color: #83ad4d;
}
.bg-savvy-red.bg-savvy-red {
  background-color: #8c1f29;
}
.bg-crimson.bg-crimson {
  background-color: #ae0f36;
}
.bg-treetop.bg-treetop {
  background-color: #4b6433;
}
.bg-tortuga-bay.bg-tortuga-bay {
  background-color: #5d7c29;
}
.bg-lime-green.bg-lime-green {
  background-color: #83ad4d;
}
.bg-royal-blue.bg-royal-blue {
  background-color: #334eac;
}
.bg-moon.bg-moon {
  background-color: #f7f2eb;
}
.bg-china.bg-china {
  background-color: #7096d1;
}
.bg-midnight.bg-midnight {
  background-color: #0c1f53;
}
.bg-dawn.bg-dawn {
  background-color: #d0e3ff;
}
.bg-teal-green.bg-teal-green {
  background-color: #3d7278;
}
.bg-foam.bg-foam {
  background-color: #eaf2f1;
}
.bg-lime.bg-lime {
  background-color: #d2e458;
}
.bg-sand.bg-sand {
  background-color: #f6f3eb;
}
.bg-tangerine.bg-tangerine {
  background-color: #f19b38;
}
.bg-iris.bg-iris {
  background-color: #9899db;
}
.bg-tan.bg-tan {
  background-color: #e8e7d7;
}
.bg-var-blackcream,
.bg-var-burgandy {
  --carousel-bg-gradient: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 20%, rgba(0, 0, 0, 0.8) 100%), radial-gradient(ellipse 30% 40% at 50% 0%,   rgba(255,252,235,0.95) 0%, transparent 60%), radial-gradient(ellipse 90% 35% at 20% 52%,  rgba(255,252,220,0.70) 0%, transparent 65%), radial-gradient(ellipse 90% 35% at 80% 52%,  rgba(255,252,220,0.70) 0%, transparent 65%), radial-gradient(ellipse 70% 20% at 50% 45%,  rgba(255,252,220,0.55) 0%, transparent 60%), radial-gradient(ellipse 45% 35% at 50% 85%,  rgba(255,252,210,0.60) 0%, transparent 60%);
}
.bg-var-blackcream {
  background-color: #2d485f;
}
.bg-var-burgandy {
  background-color: #dd3183;
}
.bg-var-blue,
.bg-var-green,
.bg-var-emerald {
  --carousel-bg-gradient: radial-gradient(ellipse 60% 65% at 30% 65%, rgba(255, 255, 255, 0.7) 0%, transparent 65%), radial-gradient(ellipse 25% 80% at 68% 40%, rgba(255,255,255,0.75) 0%, transparent 55%), radial-gradient(ellipse 40% 35% at 72% 8%,  rgba(255,255,255,0.40) 0%, transparent 50%), radial-gradient(ellipse 70% 40% at 50% 0%,  rgba(0,0,0,0.55) 0%, transparent 60%), radial-gradient(ellipse 30% 60% at 100% 50%, rgba(0,0,0,0.45) 0%, transparent 55%), radial-gradient(ellipse 25% 40% at 45% 45%, rgba(200,200,200,0.25) 0%, transparent 50%);
}
.bg-var-blue {
  background-color: #8bc5d6;
}
.bg-var-green {
  background-color: #758282;
  /* swap for any color */
}
.bg-var-emerald {
  background-color: #3d7278;
}
.bg-var-bluegray,
.bg-var-brown {
  --carousel-bg-gradient: radial-gradient(ellipse 80% 60% at 15% 50%, rgba(255, 255, 255, 0.85) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,255,255,0.35) 0%, transparent 65%), radial-gradient(ellipse 55% 45% at 100% 20%, rgba(0,0,0,0.35) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 100% 80%, rgba(0,0,0,0.30) 0%, transparent 55%), radial-gradient(ellipse 70% 40% at 60% 45%, rgba(0,0,0,0.15) 0%, transparent 60%);
}
.bg-var-bluegray {
  background-color: #737c93;
}
.bg-var-brown {
  background-color: #896156;
}
.bg-var-purple,
.bg-var-red {
  --carousel-bg-gradient: radial-gradient(ellipse 40% 35% at 62% 32%, #f04060 0%, transparent 55%), radial-gradient(ellipse 30% 28% at 32% 52%, #d03060 0%, transparent 50%), radial-gradient(ellipse 60% 30% at 50% 75%, #5a3880 0%, transparent 60%), radial-gradient(ellipse 80% 40% at 50% 8%,  rgba(0,0,0,0.70) 0%, transparent 55%), radial-gradient(ellipse 40% 50% at 0%  0%,  rgba(0,0,0,0.60) 0%, transparent 50%), radial-gradient(ellipse 30% 50% at 100% 50%,rgba(0,0,0,0.50) 0%, transparent 55%), radial-gradient(ellipse 10% 12% at 3%  4%,  rgba(255,255,255,0.60) 0%, transparent 40%);
}
.bg-var-purple {
  background-color: #734772;
}
.bg-var-red {
  background-color: #6d0019;
}
.bg-var-yellow {
  background-color: #eee9d7;
  --carousel-bg-gradient: radial-gradient(ellipse 45% 60% at 25% 45%, rgba(255, 255, 255, 0.75) 0%, transparent 65%), radial-gradient(ellipse 50% 55% at 60% 55%, rgba(0,0,0,0.55) 0%, transparent 60%), radial-gradient(ellipse 30% 25% at 50% 5%,  rgba(255,255,255,0.50) 0%, transparent 55%), radial-gradient(ellipse 35% 25% at 10% 90%, rgba(0,0,0,0.30) 0%, transparent 50%), radial-gradient(ellipse 30% 20% at 95% 95%, rgba(0,0,0,0.25) 0%, transparent 45%), radial-gradient(ellipse 80% 30% at 50% 100%,rgba(255,255,255,0.20) 0%, transparent 60%);
  --carousel-bg-gradient: radial-gradient(ellipse 50% 55% at 60% 52%, #1a2fa0 0%, transparent 60%), radial-gradient(ellipse 40% 35% at 57% 28%, #5a7fa0 0%, transparent 55%), radial-gradient(ellipse 35% 30% at 50% 8%,  #d8e0e0 0%, transparent 50%), radial-gradient(ellipse 45% 55% at 28% 42%, rgba(255,255,255,0.80) 0%, transparent 60%), radial-gradient(ellipse 35% 25% at 8%  88%, #e05040 0%, transparent 50%), radial-gradient(ellipse 40% 25% at 50% 92%, #d4a0b0 0%, transparent 55%), radial-gradient(ellipse 30% 20% at 95% 92%, #30a0a8 0%, transparent 45%), radial-gradient(ellipse 25% 30% at 42% 72%, #c8b8c0 0%, transparent 45%);
}
 

/* ============================================================
 * RL UI FRAMEWORK — Bell ring animation
 * Moved from rubylane.css (rl-bootstrap less/custom/common/core.less).
 * themed icon ... -class rl-spin; rltop.tcl adds it to the alerts bell.
 * ============================================================ */
.rl-spin {
	animation: ringbell 2s ease both;
	transform: rotate(0deg);
	transform-origin: 50% 50%;
}
@keyframes ringbell {
	20% { transform: rotate(30deg); }
	40% { transform: rotate(-30deg); }
	50% { transform: rotate(25deg); }
	60% { transform: rotate(-25deg); }
	70% { transform: rotate(15deg); }
	80% { transform: rotate(-15deg); }
	85% { transform: rotate(10deg); }
	90% { transform: rotate(-10deg); }
	95% { transform: rotate(5deg); }
}

/* ============================================================
 * RL UI FRAMEWORK — Flyout notifications
 * Moved from rubylane.css (rl-bootstrap less/custom/common/flyout_notifications.less).
 * Markup: flyout_notifications.tcl
 * ============================================================ */
#rl-notifications-flyout {
	position: fixed;
	width: .7em;
	padding-top: 1.5em;
	padding-left: 1.5em;
	padding-bottom: 1.5em;
	right: 0;
	bottom: 1em;
	overflow-x: hidden;
	transition: width 0.5s;
}
.rl-notifications-contents {
	margin-left: -15px;	/* Counter the bootstrap row margin hack */
	margin-right: -15px;
	background: rgba(240, 240, 240, 0.9);
	border: 2px solid rgba(220, 220, 220, 0.95);
	width: 16em;
	border-radius: 0.4em;
	padding: 0.5em 0.7em;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.rl-notifications-flyout-shown {
	width: 18em !important;
}
.rl-notification:first-child .rl-notification-splitter {
	display: none;
}
.rl-notification .rl-notification-splitter hr {
	width: 90%;
	opacity: 0.7;
	margin-top: 0.8em;
	margin-bottom: 0.8em;
}
.rl-notifications-contents .rl-notification .rl-notification-icon-container {
	display: inline-block;
	float: left;
	margin-right: 1em;
}
.rl-notification-icon {
	display: inline-block;
	margin: 0;
	border: 0;
	max-width: 3em;
	max-height: 3em;
}


/* ============================================================
 * RL UI FRAMEWORK — Countdown timer
 * Markup: themed countdowntimer (rl_promotion.tcl), ticked by js/countdown.mjs
 * (which adds .hidden to the days, hours and minutes as they reach 0).
 * Moved from a <style> the proc wrote out each time it was used.
 * ============================================================ */
.clockdiv {
	font-family: var(--rl-font-sans-serif);
	color: #f4a8ab;
	display: flex;
	justify-content: center;
	gap: 2px;
	text-align: center;
	font-size: 30px;
}
.clockdiv-sm {
	font-size: 20px;
}
.clockdiv-lg {
	font-size: 40px;
}
.clockdiv-left {
	text-align: left;
}
.clockdiv-right {
	text-align: right;
}
.clockdiv > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #1a2535;
	border-radius: 4px;
	gap: 0;
	padding-block: 5px;
}
.clockdiv.clockdiv-dark > div {
	background: #333333;
}
.clockdiv .cnum {
	color: #f4a8ab;
	will-change: contents;
	text-align: center;
	min-width: 2.6em;
	font-weight: 700;
}
.clockdiv .smalltext {
	color: #7b9ab6;
	padding-top: 0;
	font-weight: normal;
	font-size: 0.8rem;
	line-height: 1.5;
	text-transform: uppercase;
}
/* -inline: a line of text in the surrounding font and colour, "04h 28m 10s" */
.clockdiv--inline {
	display: inline-flex;
	gap: 0.3em;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	font-variant-numeric: tabular-nums;
}
.clockdiv--inline > div {
	flex-direction: row;
	align-items: baseline;
	background: none;
	border-radius: 0;
	padding: 0;
}
.clockdiv--inline .cnum {
	color: inherit;
	min-width: 0;
	font-weight: inherit;
}
.clockdiv--inline .smalltext {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-transform: none;
}

/* ============================================================
 * RL UI FRAMEWORK — Red Tag sale banner
 * Markup: theme::common::redtag_alert (rl_promotion.tcl), at the top of every
 * page from the sale's preview until it ends.  One row on wider screens, two
 * short lines on phones.  The sale name's link covers the whole banner.
 * Parts with data-show are for the data-states they list (preview, on,
 * ended); a countdown reaching 0 moves data-state on to data-next.
 * ============================================================ */
.rl-redtag-banner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: var(--rl-spacing-lg);
	row-gap: var(--rl-spacing-xs);
	padding: 10px var(--rl-spacing-md);
	background: var(--rl-primary);
	color: #fff;
	/* For the links (the a:not(.rl-btn) rule above) */
	--ada-link: #fff;
	--ada-link-hover: #fff;
	font-family: var(--rl-font-sans-serif);
	line-height: 1.3;
}
.rl-redtag-banner[data-state="preview"] [data-show]:not([data-show~="preview"]),
.rl-redtag-banner[data-state="on"] [data-show]:not([data-show~="on"]),
.rl-redtag-banner[data-state="ended"] [data-show]:not([data-show~="ended"]) {
	display: none;
}
.rl-redtag-banner__name {
	display: flex;
	align-items: center;
	gap: var(--rl-spacing-sm);
}
.rl-redtag-banner__icon {
	flex: none;
	width: 1.6em;
	height: 1.6em;
}
/* The Red Tag sale's tag (themed rl_redtag_tag), in white, in place of the
   icon and the sale's name */
.rl-redtag-banner__tag {
	display: inline-block;
	width: clamp(100px, 11vw, 140px);
	vertical-align: middle;
}
.rl-redtag-banner__link::after {
	content: "";
	position: absolute;
	inset: 0;
}
.rl-redtag-banner__link:focus-visible {
	outline: none;
}
.rl-redtag-banner__link:focus-visible::after {
	outline: 3px solid #fff;
	outline-offset: -5px;
}
.rl-redtag-banner__name strong {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.rl-redtag-banner__off {
	margin-left: 0.35em;
	font-size: 1.75em;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	vertical-align: -0.1em;
}
.rl-redtag-banner__details {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.rl-redtag-banner__when {
	font-weight: 600;
}
.rl-redtag-banner__note {
	font-size: 0.9em;
}
/* "Starts in" and its countdown on one line */
.rl-redtag-banner__when > div {
	display: inline;
}
/* Above the banner's link */
.rl-redtag-banner__note a,
.rl-redtag-banner__buttons {
	position: relative;
	z-index: 1;
}
.rl-redtag-banner__note a {
	text-decoration-line: underline;
}
.rl-redtag-banner__buttons {
	display: flex;
	gap: var(--rl-spacing-sm);
}
.rl-redtag-banner__btn {
	padding: 6px 18px;
	background: #fff;
	border-color: #fff;
	color: var(--rl-primary-dark);
	font-weight: 700;
}
.rl-redtag-banner .rl-btn.rl-redtag-banner__btn--outline {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.8);
	color: #fff;
}
.rl-redtag-banner .rl-btn.rl-redtag-banner__btn--outline:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.15);
	border-color: #fff;
	color: #fff;
}
/* Phones: the name on one line, when and the note on the next, and a ›
   for the banner's link in place of the buttons */
@media (max-width: 767px) {
	.rl-redtag-banner {
		justify-content: flex-start;
		column-gap: 0;
		row-gap: 2px;
		padding: 8px 36px 8px var(--rl-spacing-md);
		font-size: 14px;
	}
	.rl-redtag-banner:has(.rl-redtag-banner__link)::after {
		content: "\203A";
		position: absolute;
		right: var(--rl-spacing-md);
		top: 50%;
		transform: translateY(-50%);
		font-size: 2em;
		line-height: 1;
	}
	.rl-redtag-banner__name {
		flex-basis: 100%;
		gap: 6px;
	}
	.rl-redtag-banner__icon {
		width: 1.3em;
		height: 1.3em;
	}
	.rl-redtag-banner__name strong {
		letter-spacing: 0.02em;
	}
	.rl-redtag-banner__off {
		font-size: 1.35em;
	}
	.rl-redtag-banner__details {
		display: block;
		text-align: left;
	}
	.rl-redtag-banner__when,
	.rl-redtag-banner__note {
		display: inline;
	}
	.rl-redtag-banner__when + .rl-redtag-banner__note::before {
		content: "\00B7";
		margin: 0 0.4em;
	}
	.rl-redtag-banner__buttons {
		display: none;
	}
}

/* On the pages of a shop that isn't in the Red Tag sale, in place of the
 * banner: its owner's prompt to join (themed redtag_owner_alert), or a
 * buyer's saved items in it (themed redtag_saved_alert) */
.rl-redtag-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--rl-spacing-xs) var(--rl-spacing-md);
	padding: var(--rl-spacing-sm) var(--rl-spacing-md);
	background: var(--rl-bg-light);
	border-bottom: 1px solid var(--rl-border);
	font-family: var(--rl-font-sans-serif);
	line-height: 1.3;
}
.rl-redtag-note__icon {
	flex: none;
	color: var(--rl-primary);
}
.rl-redtag-note--owner .rl-redtag-note__text {
	flex: 1 1 20em;
	max-width: 48em;
}
.rl-redtag-note__aside {
	color: var(--rl-text-medium);
	font-size: .9em;
}
.rl-redtag-note__btn {
	flex: none;
}
.rl-redtag-note__link {
	font-weight: 600;
	text-decoration: underline;
}
@media (max-width: 767px) {
	.rl-redtag-note {
		justify-content: flex-start;
		font-size: 14px;
	}
}

/* Wishlists: what saving an item emails, in the Add to Wish List form until
 * the member agrees (themed wl_alerts_notice) */
.rl-wl-alerts-notice {
	margin-block: var(--rl-spacing-md);
}

/* Wishlists: the owner's saved items on sale, from all their lists
 * (themed wl_sale_filter) */
.rl-wl-sale-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rl-spacing-sm);
	margin-bottom: var(--rl-spacing-md);
}
.rl-wl-sale-filter__label {
	font-weight: 600;
}
.rl-wl-sale-filter__count {
	display: inline-block;
	min-width: 1.6em;
	padding: 0 .4em;
	border-radius: 999px;
	background: var(--rl-primary);
	color: #fff;
	font-size: .85em;
	text-align: center;
}
.rl-wl-sale-filter .rl-btn--primary .rl-wl-sale-filter__count {
	background: #fff;
	color: var(--rl-primary);
}

/* Wishlists page (info/wishlists.tcl, wishlist_ui.tcl) */
.rl-wl-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--rl-spacing-sm);
}
.rl-wl-tabs a.rl-tab {
	font-weight: 600;
	text-decoration: none;
}
.rl-wl-tabs a.rl-tab:not(.active) {
	color: var(--rl-text-medium);
}
.rl-wl-tabs a.rl-tab.active {
	color: var(--rl-primary);
}
.rl-wl-layout {
	display: grid;
	grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
	gap: var(--rl-spacing-lg);
	align-items: start;
}
.rl-wl-lists {
	position: sticky;
	top: var(--rl-spacing-md);
	max-height: calc(100dvh - 2 * var(--rl-spacing-md));
	overflow-y: auto;
	padding: 2px;
}
.rl-wl-lists__level {
	margin: 0 0 var(--rl-spacing-sm);
	padding: 0;
	list-style: none;
}
.rl-wl-lists__level .rl-wl-lists__level {
	margin: 0 0 0 var(--rl-spacing-md);
}
a.rl-wl-lists__link {
	display: flex;
	align-items: center;
	gap: var(--rl-spacing-xs);
	min-height: 2rem;
	padding: .25rem .5rem;
	border-radius: 4px;
	color: var(--ada-link, var(--rl-text-dark));
	font-weight: 400;
	text-decoration: none;
	overflow-wrap: anywhere;
}
a.rl-wl-lists__link:hover {
	background: var(--rl-bg-hover);
	color: var(--ada-link-hover, var(--rl-primary-dark));
}
a.rl-wl-lists__link:focus-visible {
	outline: 2px solid var(--rl-border-focus);
	outline-offset: 1px;
}
a.rl-wl-lists__link[aria-current] {
	background: var(--rl-bg-disabled);
	font-weight: 700;
}
.rl-wl-lists__name {
	flex: 1 1 auto;
	min-width: 0;
}
.rl-wl-lists__count {
	font-size: var(--rl-text-sm);
	color: var(--rl-text-medium);
}
.rl-wl-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--rl-spacing-sm);
	margin-bottom: var(--rl-spacing-md);
}
.rl-wl-toolbar .rl-wl-sale-filter {
	margin-bottom: 0;
}
.rl-wl-sort {
	margin-left: auto;
}
.rl-wl-list-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--rl-spacing-sm);
	margin-bottom: var(--rl-spacing-md);
}
.rl-wl-list-header .rl-heading {
	margin: 0;
	overflow-wrap: anywhere;
}
.rl-wl-list-header__meta,
.rl-wl-list-header__path {
	color: var(--rl-text-medium);
}
.rl-wl-list-header__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-spacing-xs);
}
.rl-wl-item {
	display: flex;
	flex-direction: column;
}
.rl-wl-item .gallery-img .img-responsive {
	margin: 0 auto;
}
.rl-wl-item__drop {
	color: var(--rl-success-text, var(--rl-success-dark));
	font-weight: 600;
	font-size: var(--rl-text-sm);
}
.rl-wl-item__shop {
	font-size: var(--rl-text-sm);
	margin-bottom: var(--rl-spacing-sm);
	overflow-wrap: anywhere;
}
.rl-wl-item__actions {
	display: flex;
	flex-direction: column;
	gap: var(--rl-spacing-xs);
	margin-top: auto;
}
.rl-wl-item__manage {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-spacing-xs);
}
.rl-wl-item__manage > * {
	flex: 1 1 0;
}
.rl-wl-item__manage > a.rl-btn,
.rl-wl-item__manage .rl-dropdown-toggle {
	width: 100%;
	justify-content: center;
	padding-inline: .5rem;
}
.rl-wl-item .rl-dropdown-toggle,
.rl-wl-list-header .rl-dropdown-toggle {
	gap: 4px;
	border-radius: 999px;
	font-size: var(--rl-text-sm);
}
.rl-wl-list-header .rl-dropdown-toggle {
	padding: .25rem .75rem;
	height: 100%;
}
.rl-wl-unavailable {
	margin: var(--rl-spacing-lg) 0;
}
.rl-wl-unavailable summary {
	cursor: pointer;
	font-weight: 600;
	min-height: 24px;
}
.rl-wl-unavailable__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rl-spacing-md);
	margin-top: var(--rl-spacing-sm);
}
.rl-wl-unavailable__body .rl-wl-items {
	width: 100%;
}
.rl-wl-clearall {
	margin: var(--rl-spacing-md) 0;
	text-align: right;
	font-size: var(--rl-text-sm);
}
.rl-wl-row__main {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--rl-spacing-md);
}
.rl-wl-row__name {
	flex: 1 1 14em;
	min-width: 0;
	overflow-wrap: anywhere;
}
.rl-wl-row__alerts {
	flex: 0 1 15em;
}
.rl-wl-row__actions {
	flex: 0 0 16rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--rl-spacing-xs);
}
.rl-wl-row__alerts .rl-toggle-wrapper {
	margin: 0;
}
.rl-wl-row__alerts .rl-state {
	font-size: var(--rl-text-sm);
}
.rl-wl-row__alerts .rl-state:empty {
	display: none;
}
.rl-wl-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(0, 6rem));
	gap: var(--rl-spacing-xs);
	margin-top: var(--rl-spacing-sm);
}
.rl-wl-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}
@media (max-width: 767px) {
	.rl-wl-sale-filter__label {
		flex-basis: 100%;
	}
	.rl-wl-tabs {
		margin-inline: 0;
	}
	.rl-wl-tabs .rl-tab-list {
		flex-direction: row;
		flex-wrap: nowrap;
	}
	.rl-wl-tabs a.rl-tab {
		flex: 1 1 auto;
		padding: 10px 12px;
		text-align: center;
		white-space: nowrap;
	}
	.rl-wl-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--rl-spacing-sm);
	}
	.rl-wl-lists {
		position: static;
		display: flex;
		align-items: center;
		gap: var(--rl-spacing-xs);
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: thin;
	}
	.rl-wl-lists > .rl-btn {
		flex: none;
	}
	.rl-wl-lists__level,
	.rl-wl-lists__level .rl-wl-lists__level,
	.rl-wl-lists__level li {
		display: contents;
	}
	a.rl-wl-lists__link {
		flex: none;
		max-width: 70vw;
		border: 1px solid var(--rl-border);
		border-radius: 999px;
		padding: .25rem .75rem;
	}
	.rl-wl-lists__name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* A row reads the same each time: what it is, its pictures, the way to it,
	 * then its settings on a line of their own */
	.rl-wl-row {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: var(--rl-spacing-sm);
	}
	.rl-wl-row__main,
	.rl-wl-row__actions {
		display: contents;
	}
	.rl-wl-row__name,
	.rl-wl-thumbs,
	.rl-wl-row__expires,
	.rl-wl-row__actions > a.rl-btn--primary {
		grid-column: 1 / -1;
	}
	.rl-wl-row__main > a:first-child + .rl-wl-row__name {
		grid-column: 2 / -1;
	}
	.rl-wl-thumbs {
		order: 1;
		margin-top: 0;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.rl-wl-row__expires {
		order: 2;
	}
	.rl-wl-row__actions > a.rl-btn--primary {
		order: 3;
		justify-content: center;
		text-align: center;
	}
	.rl-wl-row__alerts {
		order: 4;
		grid-column: 1 / 3;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px var(--rl-spacing-sm);
	}
	.rl-wl-row__alerts .rl-state {
		flex-basis: 100%;
		order: 1;
	}
	.rl-wl-row__actions > .dialog-href {
		order: 5;
		grid-column: 3;
		align-self: center;
	}
	.rl-wl-thumbs > :nth-child(n+5) {
		display: none;
	}
}


/* ==== Search results: heading, filter bar, applied filters ====
 * Drawn by search_filters.tcl; search_filters.mjs loads the facets' values,
 * and below 768px moves .rl-search-filters__list into the drawer, adding
 * .rl-search-filters--js to the nav.  Without js the list stays inline. */
.rl-search-heading {
	margin: var(--rl-spacing-md) 0 var(--rl-spacing-sm);
}
.rl-search-heading .rl-breadcrumb {
	margin-bottom: var(--rl-spacing-xs);
}
.rl-search-heading__title {
	margin: 0;
	font-size: var(--rl-text-2xl);
}
/* Focused by script after a filter loads the page, not by the visitor */
.rl-search-heading__title:focus {
	outline: none;
}
.rl-search-heading__count {
	margin: var(--rl-spacing-xs) 0 0;
	color: var(--rl-text-medium);
	font-size: var(--rl-text-sm);
}
/* A shop's search has no heading above the bar to space it from the
 * shop's header */
.rl-search-filters--top {
	margin-top: var(--rl-spacing-md);
}

/* Above the results: the count (unless the heading has it), Save Search,
 * and the view and sort */
.rl-search-results-bar__count + .rl-search-results-bar__wish {
	text-align: center;
}

/* The bar; the panels open below it, across its width */
.rl-search-filters {
	position: relative;
	margin-bottom: var(--rl-spacing-sm);
	padding-bottom: var(--rl-spacing-sm);
	border-bottom: 1px solid var(--rl-border);
}
.rl-search-filters__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rl-spacing-sm);
}
.rl-search-filters__phonebar {
	display: none;
}

.rl-filter__summary {
	display: inline-flex;
	align-items: center;
	gap: var(--rl-spacing-xs);
	padding: 6px 12px;
	border: 1px solid var(--rl-border);
	border-radius: 999px;
	background: var(--rl-bg-white);
	color: var(--rl-text-dark);
	font-family: var(--rl-font-sans-serif);
	font-size: var(--rl-text-sm);
	list-style: none;
	cursor: pointer;
	user-select: none;
}
.rl-filter__summary::-webkit-details-marker {
	display: none;
}
.rl-filter__summary:hover {
	border-color: var(--rl-border-hover);
	background: var(--rl-bg-hover);
}
.rl-filter__summary:focus-visible {
	outline: none;
	box-shadow: var(--rl-focus-shadow);
}
.rl-filter[open] > .rl-filter__summary,
.rl-filter.is-active > .rl-filter__summary {
	border-color: var(--rl-text-dark);
}
.rl-filter__chevron {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 5px 0;
	border-color: currentColor transparent;
	transition: transform 0.2s;
}
.rl-filter[open] > .rl-filter__summary .rl-filter__chevron {
	transform: rotate(180deg);
}
.rl-filter__badge {
	display: inline-block;
	min-width: 1.5em;
	padding: 0 0.4em;
	border-radius: 999px;
	background: var(--rl-primary);
	color: #fff;
	font-size: var(--rl-text-xs);
	line-height: 1.5em;
	text-align: center;
}

.rl-filter__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 110;	/* over the result cards' badges and hearts (99), under the site menus (1000) */
	max-height: min(60vh, 34rem);
	overflow-y: auto;
	padding: var(--rl-spacing-sm) var(--rl-spacing-md) var(--rl-spacing-md);
	border: 1px solid var(--rl-border);
	border-radius: 0 0 8px 8px;
	background: var(--rl-bg-white);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}
/* A short panel (price, More filters) opens under its button; a wide one
 * (categories, a facet's values) across the bar */
.rl-filter:not(.rl-filter--wide) {
	position: relative;
}
.rl-filter:not(.rl-filter--wide) > .rl-filter__panel {
	right: auto;
	width: min(20rem, calc(100vw - 2 * var(--rl-spacing-md)));
	margin-top: 4px;
	border-radius: 8px;
}
/* More filters is near the bar's end: its panel lines up with the button's
 * right edge, and is a little wider for the facets' names and counts */
.rl-filter.rl-filter--more:not(.rl-filter--wide) > .rl-filter__panel {
	left: auto;
	right: 0;
	width: min(27rem, calc(100vw - 2 * var(--rl-spacing-md)));
}
/* More filters' facets open in place, inside its panel */
.rl-filter--nested > .rl-filter__summary {
	display: flex;
	justify-content: space-between;
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--rl-border);
	border-radius: 0;
	padding: 7px 0;
	background: none;
}
.rl-filter.rl-filter--nested > .rl-filter__panel {
	position: static;
	width: auto;
	margin: 0;
	max-height: none;
	padding: var(--rl-spacing-xs) 0 var(--rl-spacing-sm);
	border: none;
	box-shadow: none;
}

.rl-filter__options {
	display: flex;
	flex-direction: column;
}
/* Many choices flow down columns, each about as wide as a name and its
 * count, so a count sits by its name */
.rl-filter__options--cols {
	display: block;
	columns: 11rem;
	column-gap: var(--rl-spacing-lg);
}
.rl-filter__options--cols > * {
	break-inside: avoid;
}
/* A value with values under it (Material's Metal: Brass, Copper...): at the
 * top, a block with its name over its values' columns; further down, its
 * values indented under it in one column.  The values line up under its
 * name, past its box */
.rl-filter__tree {
	margin-top: var(--rl-spacing-sm);
	padding-top: var(--rl-spacing-xs);
	border-top: 1px solid var(--rl-border);
}
.rl-filter__tree > .rl-filter-option {
	width: fit-content;
}
/* The values after a block, back at the top level */
.rl-filter__tree + .rl-filter__options--cols:has(> :not([hidden])) {
	margin-top: var(--rl-spacing-sm);
	padding-top: var(--rl-spacing-xs);
	border-top: 1px solid var(--rl-border);
}
.rl-filter__tree > .rl-filter__options--cols,
.rl-filter__suboptions {
	margin-left: 22px;
}
.rl-filter-option--parent .rl-filter-option__label {
	font-weight: 700;
}
/* Find hid all of a block's values */
.rl-filter__tree:not(:has(.rl-filter-option:not([hidden]))) {
	display: none;
}
/* A heading over a group of values: a search across categories has the
 * values each category gives (Type: Jewelry, Glass...) */
.rl-filter__group {
	margin: var(--rl-spacing-md) 0 var(--rl-spacing-xs);
	padding-bottom: 2px;
	border-bottom: 1px solid var(--rl-border);
	color: var(--rl-text-medium);
	font-size: var(--rl-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.rl-filter__values > .rl-filter__group:first-child,
.rl-filter__panel > .rl-filter__group:first-child {
	margin-top: var(--rl-spacing-xs);
}
.rl-filter__current {
	margin: 0 0 var(--rl-spacing-sm);
	font-size: var(--rl-text-lg);
	font-weight: 700;
}
.rl-filter__up {
	margin: 0 0 var(--rl-spacing-xs);
	font-size: var(--rl-text-sm);
}
.rl-filter__loading {
	margin: 0;
	color: var(--rl-text-muted);
}
.rl-filter__showall,
.rl-filter__all > summary {
	margin-top: var(--rl-spacing-sm);
}
.rl-filter__showall + .rl-filter__group {
	margin-top: var(--rl-spacing-lg);
}
.rl-filter__all > summary {
	display: inline-flex;
	list-style: none;
}
.rl-filter__all > summary::-webkit-details-marker {
	display: none;
}
/* Show all replaces the most popular */
.rl-filter__all[open] > summary,
.rl-filter__panel:has(> .rl-filter__all[open]) > .rl-filter__group,
.rl-filter__panel:has(> .rl-filter__all[open]) > .rl-filter__options {
	display: none;
}
.rl-filter__search input {
	box-sizing: border-box;
	width: 100%;
	margin-bottom: var(--rl-spacing-sm);
	padding: 6px 10px;
	border: 1px solid var(--rl-border);
	border-radius: 6px;
	font-size: var(--rl-text-base);
}

/* A choice: a link drawn as a checkbox (a facet's values) or a radio (a price range) */
a.rl-filter-option {
	color: var(--rl-text-dark);
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 26px;
	padding: 2px 4px;
	border-radius: 4px;
	font-size: var(--rl-text-sm);
	font-weight: 400;
	text-decoration: none;
}
.rl-filter-option:hover {
	background: var(--rl-bg-hover);
	text-decoration: none;
}
.rl-filter-option__box {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
	border: 2px solid var(--rl-border-dark);
	border-radius: 3px;
	background: var(--rl-bg-white);
}
.rl-filter-option--set .rl-filter-option__box {
	border-radius: 50%;
}
.rl-filter-option.is-selected .rl-filter-option__box {
	border-color: var(--rl-primary);
	background: var(--rl-primary);
}
.rl-filter-option--set.is-selected .rl-filter-option__box {
	box-shadow: inset 0 0 0 3px var(--rl-bg-white);
}
.rl-filter-option--toggle.is-selected .rl-filter-option__box::after {
	content: '';
	position: absolute;
	left: 3px;
	top: 0;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.rl-filter-option.is-selected .rl-filter-option__label {
	font-weight: 700;
}
/* A long name wraps rather than pushing its count out of the panel */
.rl-filter-option__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}
.rl-filter-option__count {
	flex: none;
	margin-left: auto;
	padding-left: var(--rl-spacing-xs);
	color: var(--rl-text-muted);
	font-size: var(--rl-text-xs);
}

.rl-filter__price fieldset {
	margin: var(--rl-spacing-sm) 0 0;
	padding: 0;
	border: none;
}
.rl-filter__price legend {
	width: 100%;
}
.rl-filter__pricefield {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	font-size: var(--rl-text-sm);
	font-weight: 400;
}
.rl-filter__pricefield input {
	width: 6rem;
	padding: 5px 8px;
	border: 1px solid var(--rl-border);
	border-radius: 6px;
	font-size: var(--rl-text-base);
}

/* An on/off filter: a link with a switch drawn beside its name */
a.rl-filter-toggle {
	color: var(--rl-text-dark);
	display: inline-flex;
	align-items: center;
	gap: var(--rl-spacing-xs);
	padding: 6px 10px;
	border-radius: 999px;
	font-size: var(--rl-text-sm);
	font-weight: 400;
	text-decoration: none;
}
.rl-filter-toggle:hover {
	background: var(--rl-bg-hover);
	text-decoration: none;
}
.rl-filter-toggle__switch {
	position: relative;
	flex: none;
	width: 28px;
	height: 16px;
	border-radius: 999px;
	background: var(--rl-border-dark);
	transition: background 0.2s;
}
.rl-filter-toggle__switch::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.2s;
}
.rl-filter-toggle.is-active .rl-filter-toggle__switch {
	background: var(--rl-primary);
}
.rl-filter-toggle.is-active .rl-filter-toggle__switch::after {
	transform: translateX(12px);
}

/* The filters applied */
.rl-filter-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rl-spacing-sm);
	margin: var(--rl-spacing-sm) 0 var(--rl-spacing-md);
}
.rl-filter-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-spacing-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}
a.rl-filter-chip {
	color: var(--rl-text-dark);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid var(--rl-border);
	border-radius: 999px;
	background: var(--rl-bg-light);
	font-size: var(--rl-text-sm);
	font-weight: 400;
	text-decoration: none;
}
.rl-filter-chip:hover {
	border-color: var(--rl-border-hover);
	background: var(--rl-bg-hover);
	text-decoration: none;
}
.rl-filter-chip__x {
	width: 0.75em;
	height: 0.75em;
	opacity: 0.7;
}
.rl-filter-chips__clear {
	font-size: var(--rl-text-sm);
	text-decoration: underline;
}

/* The results' view and sort buttons */
.rl-btn--search {
	padding: 8px 16px;
	border: 1px solid var(--rl-border);
	border-radius: 6px;
	font-family: var(--rl-font-sans-serif);
	font-size: 14px;
	cursor: pointer;
}

/* The phone drawer */
.rl-search-filters__drawerbody .rl-search-filters__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.rl-search-filters__drawerbody .rl-filter__summary {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 14px 0;
	border: none;
	border-bottom: 1px solid var(--rl-border);
	border-radius: 0;
	background: none;
	font-size: var(--rl-text-base);
}
.rl-search-filters__drawerbody .rl-filter__panel,
.rl-search-filters__drawerbody .rl-filter:not(.rl-filter--wide) > .rl-filter__panel {
	position: static;
	width: auto;
	margin: 0;
	max-height: none;
	padding: var(--rl-spacing-sm) 0 var(--rl-spacing-md);
	border: none;
	box-shadow: none;
}
.rl-search-filters__drawerbody .rl-filter-toggle {
	padding: 14px 0;
	border-bottom: 1px solid var(--rl-border);
	border-radius: 0;
	font-size: var(--rl-text-base);
}
.rl-search-filters__drawerbody .rl-filter__options--cols {
	columns: 1;
}
.rl-search-filters__drawerbody .rl-filter-option {
	min-height: 40px;
}
.rl-search-filters__drawerfooter {
	position: sticky;
	bottom: 0;
	display: flex;
	gap: var(--rl-spacing-sm);
	padding: var(--rl-spacing-sm) var(--rl-spacing-md) calc(var(--rl-spacing-sm) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--rl-border);
	background: var(--rl-bg-white);
}
.rl-search-filters__apply {
	flex: 1;
}

@media (max-width: 767px) {
	/* The phone bar stays at the top of the screen over the results */
	.rl-search-filters--js {
		position: sticky;
		top: 0;
		z-index: 10;
		margin-inline: calc(-1 * var(--rl-spacing-md));
		padding: var(--rl-spacing-sm) var(--rl-spacing-md);
		background: var(--rl-bg-white);
	}
	.rl-search-filters--js .rl-search-filters__phonebar:not([hidden]) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--rl-spacing-sm);
	}
	.rl-search-filters--js > .rl-search-filters__list {
		display: none;
	}
	/* The phone bar has the sort */
	body:has(.rl-search-filters--js) .search-filter-results-header .rl-search-sort {
		display: none;
	}
	.rl-search-filters__phonebar .rl-input-compact {
		margin: 0;
	}
	/* The count on the left and Save Search on the right; the sort, alone
	 * in its column on a phone, is in the filter bar */
	.rl-search-results-bar > .rl-search-results-bar__count {
		flex: 1 1 auto;
	}
	.rl-search-results-bar > .rl-search-results-bar__wish {
		flex: 0 0 auto;
	}
	.rl-search-results-bar__count + .rl-search-results-bar__wish {
		text-align: end;
	}
	body:has(.rl-search-filters--js) .rl-search-results-bar__sortonly {
		display: none;
	}
	.rl-search-heading__title {
		font-size: var(--rl-text-xl);
	}
}

/* A long form in sections (themed sectioned_form, form_section, savebar):
 * the sections' nav beside the form on a desktop, a row of links that
 * scrolls sideways on a phone */
.rl-sectioned { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rl-spacing-lg); }
.rl-sectioned__nav ul { display: flex; gap: var(--rl-spacing-xs); margin: 0; padding: 0; list-style: none; }
.rl-sectioned__nav a { display: flex; justify-content: space-between; align-items: center; gap: var(--rl-spacing-xs); min-height: 44px; padding: 6px 10px; border-left: 3px solid transparent; border-radius: 4px; color: inherit; text-decoration: none; }
.rl-sectioned__nav a:hover { background: var(--rl-bg-light); }
.rl-sectioned__nav a[aria-current="true"] { border-left-color: var(--rl-primary); background: var(--rl-bg-light); font-weight: bold; }
.rl-sectioned__error { display: none; color: var(--rl-danger); }
.rl-sectioned__label { flex: 1; }
.rl-sectioned__nav a { position: relative; }	/* keeps the sr-only state inside the strip that scrolls on a phone */
.rl-sectioned__errors { border: 2px solid var(--rl-danger); background: var(--rl-bg-white); border-radius: 6px; padding: var(--rl-spacing-md); }
.rl-sectioned__errors h2 { margin: 0; font-size: var(--rl-text-lg); color: var(--rl-danger); }
.rl-sectioned__errors ul:not(:empty) { margin: var(--rl-spacing-sm) 0 0; padding-left: 1.25em; }
.rl-sectioned__errors:focus { outline: none; }
.rl-sectioned__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--rl-border-hover); }
.rl-sectioned__nav a.is-complete .rl-sectioned__dot { background: currentColor; border-color: currentColor; }
.rl-sectioned__nav a.has-error .rl-sectioned__dot { background: var(--rl-danger); border-color: var(--rl-danger); }
.rl-sectioned__nav a.has-error .rl-sectioned__error { display: inline-flex; }
@media (min-width: 992px) {
	.rl-sectioned { grid-template-columns: 210px minmax(0, 1fr); align-items: start; }
	.rl-sectioned__nav { position: sticky; top: var(--rl-spacing-md); }
	.rl-sectioned__nav ul { flex-direction: column; flex-wrap: nowrap; gap: 0; }
}
@media (max-width: 991px) {
	.rl-sectioned__nav { position: sticky; top: 0; z-index: 4; background: var(--rl-bg-white); }
	.rl-sectioned__nav ul { overflow-x: auto; white-space: nowrap; scrollbar-width: none; mask-image: linear-gradient(to right, #000 85%, transparent); }
	.rl-sectioned__nav a { border-left: 0; border-bottom: 3px solid transparent; border-radius: 0; }
	.rl-sectioned__nav a[aria-current="true"] { border-bottom-color: var(--rl-primary); }
}
/* Fields' labels sit on their top border, and fieldsets pull up 10px for
 * their legend: the space under a heading allows for that */
.rl-sectioned { --rl-sectioned-gap: calc(var(--rl-spacing-md) + 10px); --rl-sectioned-gap-lg: calc(var(--rl-spacing-lg) + 10px); }
.rl-sectioned__body { display: grid; gap: var(--rl-spacing-md); min-width: 0; }
.rl-sectioned__section { scroll-margin-top: calc(var(--rl-spacing-md) + 52px); min-width: 0; }
.rl-sectioned__section > .rl-box { margin: 0; }
/* A plain themed box inside a section is a callout: flat, on the page's colour */
.rl-sectioned__section > .rl-box .rl-box:not([class*="rl-box--"]) { box-shadow: none; border: 1px solid var(--rl-border); background: var(--rl-bg-light); }
.rl-sectioned__section > .rl-box .rl-box:not([class*="rl-box--"]) > .rl-box-title { font-size: var(--rl-text-base); }
.rl-sectioned__section [id] { scroll-margin-top: calc(var(--rl-spacing-md) + 52px); }
.rl-sectioned__title { margin: 0 0 var(--rl-sectioned-gap-lg); font-size: var(--rl-text-xl); }
.rl-sectioned__title:has(+ .rl-sectioned__intro) { margin-bottom: var(--rl-spacing-xs); }
.rl-sectioned__intro { margin: 0 0 var(--rl-sectioned-gap-lg); color: var(--ada-text-muted, var(--rl-text-muted)); }
.rl-sectioned__subtitle { margin: var(--rl-spacing-lg) 0 var(--rl-sectioned-gap); padding-top: var(--rl-spacing-md); border-top: 1px solid var(--rl-border); font-size: var(--rl-text-lg); }
.rl-sectioned__title + .rl-sectioned__subtitle, .rl-sectioned__intro + .rl-sectioned__subtitle { margin-top: 0; padding-top: 0; border-top: 0; }
.rl-sectioned__group { min-width: 0; }
.rl-sectioned__title + .rl-sectioned__group > .rl-sectioned__subtitle:first-child, .rl-sectioned__intro + .rl-sectioned__group > .rl-sectioned__subtitle:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* A form's buttons, always in reach, saying when there's something to save */
.rl-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--rl-spacing-sm) var(--rl-spacing-md); margin-top: var(--rl-spacing-lg); padding: var(--rl-spacing-sm) var(--rl-spacing-md); padding-bottom: max(var(--rl-spacing-sm), env(safe-area-inset-bottom, 0px)); border-top: 3px solid transparent; background: var(--rl-bg-white); box-shadow: 0 -4px 16px rgba(0, 0, 0, .12); }
.rl-savebar__buttons { display: flex; flex-wrap: wrap; gap: var(--rl-spacing-sm); }
.rl-savebar--dirty { border-top-color: var(--rl-warning); }
.rl-savebar__status { color: var(--ada-text-muted, var(--rl-text-muted)); }
.rl-savebar--dirty .rl-savebar__status { color: inherit; font-weight: bold; }
@media (max-width: 600px) {
	.rl-savebar:not(.rl-savebar--dirty) .rl-savebar__status { display: none; }
}


/* Radio choices as a row of chips: the same inputs, each label a rounded
 * button, the chosen one filled.  rl_form_input -type radiogroup -groupclass
 * rl-radio-group--chips, or every radio group in a themed sectioned_form
 * -class rl-sectioned--chips (the item form).  Checkbox groups there lose
 * their box too, their legend a label above */
:is(fieldset.rl-radio-group--chips, .rl-sectioned--chips fieldset.rl-radio-group:not(.rl-radio-pill-group)) { border: 0; padding: 0; margin: 0 0 var(--rl-spacing-lg); min-width: 0; }
:is(fieldset.rl-radio-group--chips, .rl-sectioned--chips fieldset.rl-radio-group:not(.rl-radio-pill-group)) > .rl-radio-group-label { position: static; display: block; float: none; width: auto; margin: 0 0 var(--rl-spacing-sm); padding: 0; background: none; font-weight: bold; }
:is(fieldset.rl-radio-group--chips, .rl-sectioned--chips fieldset.rl-radio-group:not(.rl-radio-pill-group)) .rl-radio-wrapper { display: inline-flex; margin: 0 var(--rl-spacing-sm) var(--rl-spacing-sm) 0; vertical-align: top; }
:is(fieldset.rl-radio-group--chips, .rl-sectioned--chips fieldset.rl-radio-group:not(.rl-radio-pill-group)) .rl-radio { position: relative; display: inline-flex; align-items: center; gap: 0; min-height: 44px; margin: 0; padding: 8px 16px; border: 1px solid var(--rl-border); border-radius: 999px; background: var(--rl-bg-white); cursor: pointer; }
:is(fieldset.rl-radio-group--chips, .rl-sectioned--chips fieldset.rl-radio-group:not(.rl-radio-pill-group)) .rl-radio:hover { border-color: var(--rl-border-hover); }
:is(fieldset.rl-radio-group--chips, .rl-sectioned--chips fieldset.rl-radio-group:not(.rl-radio-pill-group)) .rl-radio input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
:is(fieldset.rl-radio-group--chips, .rl-sectioned--chips fieldset.rl-radio-group:not(.rl-radio-pill-group)) .rl-radio-circle { display: none; }
:is(fieldset.rl-radio-group--chips, .rl-sectioned--chips fieldset.rl-radio-group:not(.rl-radio-pill-group)) .rl-radio-label { margin: 0; padding: 0; }
:is(fieldset.rl-radio-group--chips, .rl-sectioned--chips fieldset.rl-radio-group:not(.rl-radio-pill-group)) .rl-radio:has(input:checked) { border-color: var(--rl-text-dark); background: var(--rl-text-dark); color: var(--rl-dark-text); }
:is(fieldset.rl-radio-group--chips, .rl-sectioned--chips fieldset.rl-radio-group:not(.rl-radio-pill-group)) .rl-radio:has(input:checked) .rl-radio-label { color: inherit; }
:is(fieldset.rl-radio-group--chips, .rl-sectioned--chips fieldset.rl-radio-group:not(.rl-radio-pill-group)) .rl-radio:has(input:focus-visible) { box-shadow: var(--rl-focus-shadow-primary); }
:is(fieldset.rl-radio-group--chips, .rl-sectioned--chips fieldset.rl-radio-group:not(.rl-radio-pill-group)) .rl-radio:has(input:disabled) { opacity: .55; cursor: not-allowed; }
:is(fieldset.rl-radio-group--chips, .rl-sectioned--chips fieldset.rl-radio-group:not(.rl-radio-pill-group)) > .rl-helper-text { margin-top: 0; }
:is(fieldset.rl-checkbox-group--plain, .rl-sectioned--chips fieldset.rl-checkbox-group-inline) { border: 0; padding: 0; margin: 0 0 var(--rl-spacing-md); min-width: 0; }
:is(fieldset.rl-checkbox-group--plain, .rl-sectioned--chips fieldset.rl-checkbox-group-inline) > .rl-radio-group-label { position: static; display: block; float: none; width: auto; margin: 0 0 var(--rl-spacing-xs); padding: 0; background: none; font-weight: bold; }


/* The sign up forms' "What do you collect?" (themed maillist_subscription -lanes), once the
   newsletter box is ticked.  A browser without :has() shows it all the time, which does no harm */
.rl-nl-lanes {
	border: 0;
	padding: 0;
	margin: 0 0 var(--rl-spacing-md);
}
.rl-nl-lanes legend {
	padding: 0;
	margin-bottom: var(--rl-spacing-xs);
	font-weight: bold;
}
form:has(input[name="add_to_maillists"]:not(:checked)) .rl-nl-lanes {
	display: none;
}

/* A card that flips over to show its back (.is-flipped), with a shadow while it turns
   (.is-flipping) to lift it off the page.  Both faces share one grid cell, so the card is as tall as
   the taller.  The sign in pages' "Continue with Google" (sso.tcl's themed sso_button) */
.rl-flip-card {
	perspective: 800px;
	max-width: 400px;
	margin-inline: auto;
}

.rl-flip-card__inner {
	display: grid;
	border-radius: 22px;
	transform-style: preserve-3d;
	transition: transform 0.6s ease, box-shadow 0.3s ease;
}

.rl-flip-card__face {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border-radius: 22px;
	background: var(--rl-bg-white, #fff);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.rl-flip-card__back {
	transform: rotateY(180deg);
}

/* Focus moves to the back as it turns, for screen readers: the control on it shows its own */
.rl-flip-card__back:focus {
	outline: none;
}

.rl-flip-card.is-flipped .rl-flip-card__inner {
	transform: rotateY(180deg);
}

.rl-flip-card.is-flipping .rl-flip-card__inner {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.rl-flip-card__spinner {
	width: 1.2em;
	height: 1.2em;
	border: 2px solid var(--rl-busy-spinner, rgba(0, 0, 0, 0.4));
	border-right-color: transparent;
	border-radius: 50%;
	animation: rl-spin 0.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.rl-flip-card__inner {
		transition: none;
	}
}

/* Our "Continue with Google" button, as Google's branding rules have its light one: white, a grey
   outline, the four colour G, Roboto Medium 14px */
.rl-google-btn {
	width: 100%;
	gap: 10px;
	padding: 0 12px;
	border: 1px solid #747775;
	color: #1f1f1f;
	font: 500 14px/20px Roboto, var(--rl-font-sans-serif), arial, sans-serif;
	letter-spacing: 0.25px;
	cursor: pointer;
}

.rl-google-btn:hover {
	background: #f7f8f8;
}

.rl-google-btn:focus-visible {
	outline: none;
	box-shadow: var(--rl-focus-shadow);
}

.rl-google-btn svg {
	flex: none;
	width: 18px;
	height: 18px;
}
}