/**
 * Portal portal.
 *
 * Everything is scoped to .crs-portal and driven by custom properties so
 * Elementor controls can retheme it without touching this file.
 */

.crs-portal {
	--crs-ink: #1b2a4a;
	--crs-forest: #1e3a8a;
	--crs-forest-light: #2f55b5;
	--crs-accent: #c8102e;
	--crs-cream: #f3f5fb;
	--crs-paper: #fff;
	--crs-line: #d9deec;
	--crs-muted: #5b6478;
	--crs-danger: #9c3b2e;
	--crs-radius: 3px;
	--crs-portal-height: 780px;
	--crs-list-width: 380px;
	--crs-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--crs-display: "Fraunces", Georgia, serif;
	--crs-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	box-sizing: border-box;
	color: var(--crs-ink);
	font-family: var(--crs-sans);
	font-size: 14px;
	line-height: 1.5;
}

.crs-portal *,
.crs-portal *::before,
.crs-portal *::after {
	box-sizing: border-box;
}

.crs-portal button {
	font-family: inherit;
}

.crs-portal :focus-visible {
	outline: 2px solid var(--crs-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- Buttons */

.crs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: var(--crs-radius);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	text-decoration: none;
}

.crs-btn-primary {
	background: var(--crs-forest);
	color: #fff;
}

.crs-btn-primary:hover {
	background: var(--crs-forest-light);
}

.crs-btn-ghost {
	background: transparent;
	color: var(--crs-forest);
	border-color: var(--crs-line);
}

.crs-btn-ghost:hover {
	background: #f0f3fb;
	border-color: var(--crs-forest-light);
}

.crs-btn-gold {
	background: var(--crs-accent);
	color: #fff;
}

.crs-btn-gold:hover {
	filter: brightness(0.9);
}

.crs-btn[disabled] {
	opacity: 0.55;
	cursor: default;
}

.crs-textlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--crs-forest-light);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.crs-textlink:hover {
	text-decoration: underline;
}

.crs-textlink svg {
	width: 13px;
	height: 13px;
}

.crs-link {
	padding: 0;
	border: 0;
	border-bottom: 1px solid rgba(239, 234, 217, 0.4);
	background: none;
	color: #efead9;
	font-size: 13px;
	cursor: pointer;
	text-decoration: none;
}

.crs-link:hover {
	border-bottom-color: #efead9;
}

/* ------------------------------------------------------------------- Gate */

.crs-gate {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 20px;
	background:
		radial-gradient(circle at 18% 20%, rgba(30, 58, 138, 0.14), transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(200, 16, 46, 0.1), transparent 50%),
		var(--crs-cream);
}

.crs-login-card {
	width: 100%;
	max-width: 380px;
	padding: 40px 36px 32px;
	background: var(--crs-paper);
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	box-shadow: 0 24px 60px -20px rgba(27, 42, 74, 0.25);
}

.crs-login-card h2 {
	margin: 0 0 6px;
	font-family: var(--crs-display);
	font-size: 22px;
	font-weight: 600;
}

.crs-login-card .crs-sub {
	margin: 0 0 22px;
	color: var(--crs-muted);
	font-size: 13px;
}

.crs-login-mark {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
}

.crs-login-mark .crs-name {
	color: var(--crs-forest);
}

.crs-login-card label {
	display: block;
	margin-bottom: 6px;
	color: var(--crs-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.crs-login-card input[type="text"],
.crs-login-card input[type="password"] {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	background: #fcfbf8;
	font-family: inherit;
	font-size: 14px;
}

.crs-login-card .login-submit input,
.crs-login-card #wp-submit {
	width: 100%;
	margin-top: 8px;
	padding: 11px 16px;
	border: 0;
	border-radius: var(--crs-radius);
	background: var(--crs-forest);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.crs-login-foot {
	margin-top: 20px;
	color: var(--crs-muted);
	font-size: 12px;
	text-align: center;
}

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

.crs-logo {
	display: block;
	flex-shrink: 0;
	width: auto;
	height: 34px;
	max-width: none;
}


.crs-login-mark .crs-logo {
	height: 40px;
}

.crs-seal {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--crs-forest);
	color: #fff;
}

.crs-seal svg {
	width: 18px;
	height: 18px;
}

.crs-name {
	display: block;
	font-family: var(--crs-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.crs-tag {
	display: block;
	margin-top: 1px;
	color: var(--crs-muted);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.crs-topbar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 24px 14px 20px;
	overflow: hidden;
	background: linear-gradient(115deg, #0e1e42 0%, var(--crs-forest) 45%, var(--crs-forest-light) 100%);
	border-bottom: 1px solid rgba(200, 16, 46, 0.55);
	box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.35);
}

.crs-topbar::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--crs-accent) 18%, var(--crs-accent) 82%, transparent);
}

.crs-brand {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
}

.crs-brand .crs-seal {
	background: linear-gradient(150deg, #e84857, var(--crs-accent));
	box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.crs-brand .crs-name {
	color: #fff;
}

.crs-brand .crs-tag {
	color: #bfd0f5;
}

/* Full lockup: the wordmark carries the name, so it stacks over the
   tagline and both align hard left with the panel below. */
.crs-brand.crs-brand-lockup {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.crs-brand-lockup .crs-logo {
	height: 46px;
	margin-left: -2px;
}

.crs-brand-lockup .crs-tag {
	margin: 0;
	font-size: 10.5px;
	letter-spacing: 0.14em;
}

.crs-topbar-right {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.crs-org {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border: 1px solid rgba(239, 234, 217, 0.18);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.08);
	color: #efead9;
	font-size: 12.5px;
}

.crs-org::before {
	content: "";
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--crs-accent);
	box-shadow: 0 0 0 3px rgba(47, 85, 181, 0.3);
}

/* ------------------------------------------------------------------- Main */

.crs-main {
	display: flex;
	min-height: 0;
	height: var(--crs-portal-height);
	background: var(--crs-cream);
	border: 1px solid var(--crs-line);
	border-top: 0;
}

.crs-panel-list {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: var(--crs-list-width);
	min-width: 0;
	overflow: hidden;
	background: var(--crs-paper);
	border-right: 1px solid var(--crs-line);
}

.crs-list-head {
	padding: 20px 20px 14px;
	border-bottom: 1px solid var(--crs-line);
}

.crs-list-head h2 {
	margin: 0 0 4px;
	font-family: var(--crs-display);
	font-size: 17px;
	font-weight: 600;
}

.crs-list-head p {
	margin: 0 0 14px;
	color: var(--crs-muted);
	font-size: 12.5px;
}

.crs-search {
	position: relative;
}

.crs-search svg {
	position: absolute;
	top: 50%;
	left: 10px;
	width: 14px;
	height: 14px;
	color: var(--crs-muted);
	transform: translateY(-50%);
}

.crs-search input {
	width: 100%;
	padding: 9px 12px 9px 32px;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	background: #fcfbf8;
	font-family: inherit;
	font-size: 13.5px;
}

.crs-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.crs-filter {
	padding: 5px 11px;
	border: 1px solid var(--crs-line);
	border-radius: 20px;
	background: transparent;
	color: var(--crs-muted);
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
}

.crs-filter:hover {
	border-color: var(--crs-forest-light);
	color: var(--crs-forest-light);
}

.crs-filter.is-active {
	border-color: var(--crs-forest);
	background: #eef1fa;
	color: var(--crs-forest);
}

.crs-export-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 20px;
	background: #f1f7f3;
	border-bottom: 1px solid var(--crs-line);
	font-size: 12.5px;
}

.crs-export-bar[hidden] {
	display: none;
}

.crs-export-bar > span {
	color: var(--crs-forest);
	font-weight: 600;
}

.crs-product-list {
	flex: 1;
	overflow-y: auto;
}

.crs-row {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	width: 100%;
	padding: 13px 20px;
	border: 0;
	border-bottom: 1px solid #f0ece2;
	border-left: 3px solid transparent;
	background: none;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.crs-row:hover {
	background: #f7f9fd;
}

.crs-row.is-active {
	background: #eef1fa;
	border-left-color: var(--crs-forest);
}

.crs-row input[type="checkbox"] {
	width: 14px;
	height: 14px;
	margin-top: 3px;
	accent-color: var(--crs-forest);
	cursor: pointer;
}

.crs-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	/* A default size, so a thumb that somehow arrives without a size class
	   can never stretch the row it sits in. */
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
}

.crs-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 3px;
}

.crs-thumb-row {
	width: 46px;
	height: 46px;
}

.crs-thumb-small {
	width: 34px;
	height: 34px;
}

.crs-thumb-fill {
	width: 100%;
	height: 100%;
}

.crs-thumb-empty {
	color: var(--crs-muted);
	background: #f7f9fd;
	opacity: 0.7;
}

.crs-thumb-empty svg {
	width: 55%;
	height: 55%;
	max-width: 46px;
	max-height: 46px;
}

.crs-detail-thumb.crs-thumb-empty {
	border: 1px dashed var(--crs-line);
	background: #f7f9fd;
}

.crs-detail-thumb .crs-thumb {
	width: 100%;
	height: 100%;
	border: 0;
	background: none;
}

.crs-detail-thumb .crs-thumb-empty svg {
	max-width: 40px;
	max-height: 40px;
}

.crs-row .crs-meta {
	display: block;
	flex: 1;
	min-width: 0;
}

.crs-row .crs-pname,
.crs-row .crs-pcode,
.crs-doc .crs-dmeta,
.crs-doc .crs-dname,
.crs-doc .crs-dsub,
.crs-saved-row .crs-sname,
.crs-saved-row .crs-scode {
	display: block;
}

.crs-row .crs-pname {
	overflow-wrap: anywhere;
	margin-bottom: 2px;
	color: var(--crs-ink);
	font-size: 13.5px;
	font-weight: 600;
}

.crs-row .crs-pcode {
	color: var(--crs-muted);
	font-family: var(--crs-mono);
	font-size: 11px;
}

.crs-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 5px;
}

.crs-badge {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 600;
}

.crs-badge-verified {
	background: #e5ebfa;
	color: var(--crs-forest-light);
}

.crs-badge-pending {
	background: #fbe2e2;
	color: var(--crs-danger);
}

.crs-badge-featured {
	background: #fdf1d8;
	color: #8a6100;
}

.crs-badge-repeat {
	background: #e6f2ea;
	color: #1f6b41;
}

/* ----------------------------------------------------------------- Detail */

.crs-panel-detail {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
	padding: 32px 40px;
}

.crs-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 100%;
	color: var(--crs-muted);
	text-align: center;
}

.crs-empty svg {
	width: 46px;
	height: 46px;
	margin-bottom: 6px;
	opacity: 0.35;
}

.crs-empty h3 {
	margin: 0;
	color: var(--crs-ink);
	font-family: var(--crs-display);
	font-size: 17px;
	font-weight: 600;
}

.crs-empty p {
	max-width: 320px;
	margin: 0;
	font-size: 13px;
}

.crs-detail-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 24px;
}

.crs-detail-id {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

.crs-detail-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 84px;
	height: 84px;
	padding: 6px;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	background: #fff;
}

.crs-detail-thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.crs-detail-head h2 {
	margin: 0 0 6px;
	font-family: var(--crs-display);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
}

.crs-detail-sub {
	color: var(--crs-muted);
	font-size: 13px;
}

.crs-detail-sub .crs-mono {
	color: var(--crs-forest-light);
	font-family: var(--crs-mono);
}

.crs-flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 4px 11px;
	border: 1px solid var(--crs-line);
	border-radius: 20px;
	background: #eef1fa;
	color: var(--crs-forest-light);
	font-size: 11px;
	font-weight: 600;
}

.crs-detail-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	flex-shrink: 0;
}

.crs-detail-actions .crs-row-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

.crs-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 28px;
	align-items: start;
}

.crs-card {
	margin-bottom: 20px;
	padding: 22px 24px;
	background: var(--crs-paper);
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
}

.crs-card h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-family: var(--crs-display);
	font-size: 15px;
	font-weight: 600;
}

.crs-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--crs-accent);
}

.crs-dot-blue {
	background: var(--crs-forest-light);
}

.crs-dot-red {
	background: var(--crs-accent);
}

.crs-kv {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid #f0ece2;
	font-size: 13.5px;
}

.crs-kv:last-child {
	border-bottom: 0;
}

.crs-kv .crs-k {
	flex-shrink: 0;
	color: var(--crs-muted);
}

.crs-kv .crs-v {
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	text-align: right;
	overflow-wrap: anywhere;
}

.crs-highlight {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	padding: 12px 14px;
	border: 1px solid var(--crs-forest-light);
	border-radius: var(--crs-radius);
	background: linear-gradient(135deg, #eef1fa, #f7f9fd);
}

.crs-highlight .crs-k {
	color: var(--crs-forest-light);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.crs-highlight .crs-v {
	color: var(--crs-forest);
	font-family: var(--crs-mono);
	font-size: 16px;
	font-weight: 700;
}

.crs-prose {
	color: var(--crs-ink);
	font-size: 13.5px;
	line-height: 1.6;
}

.crs-warning {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
	padding: 12px 14px;
	border: 1px solid var(--crs-accent);
	border-radius: var(--crs-radius);
	background: #fbe9eb;
	color: #9c1b2e;
	font-size: 12.5px;
	line-height: 1.5;
}

.crs-doc {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	padding: 13px 14px;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	background: #fcfbf8;
}

.crs-doc svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--crs-forest-light);
}

.crs-doc .crs-dmeta {
	flex: 1;
	min-width: 0;
}

.crs-doc .crs-dname {
	font-size: 13px;
	font-weight: 600;
	word-break: break-word;
}

.crs-doc .crs-dsub {
	color: var(--crs-muted);
	font-size: 11px;
}

.crs-allergens {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.crs-allergen {
	padding: 5px 12px;
	border-radius: 20px;
	background: #fbe2e2;
	color: #9c1b2e;
	font-size: 12px;
	font-weight: 600;
}

.crs-allergen-none {
	background: #e5ebfa;
	color: var(--crs-forest-light);
}

.crs-ingredients {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #f0ece2;
	color: var(--crs-muted);
	font-size: 12px;
	line-height: 1.6;
}

.crs-ingredients strong {
	color: var(--crs-ink);
}

/* -------------------------------------------------- Nutrition facts panel */

.crs-nfl {
	border: 2px solid var(--crs-ink);
	background: #fff;
	font-family: var(--crs-sans);
}

.crs-nfl-title {
	padding: 8px 12px 4px;
	border-bottom: 7px solid var(--crs-ink);
	font-family: var(--crs-display);
	font-size: 19px;
	font-weight: 700;
}

.crs-nfl-servings {
	padding: 6px 12px;
	border-bottom: 5px solid var(--crs-ink);
	font-size: 12px;
}

.crs-nfl-servings strong {
	display: block;
	font-size: 14px;
}

.crs-nfl-cal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 6px 12px;
	border-bottom: 9px solid var(--crs-ink);
}

.crs-nfl-cal .crs-lbl {
	font-size: 13px;
	font-weight: 700;
}

.crs-nfl-cal .crs-num {
	font-family: var(--crs-display);
	font-size: 30px;
	font-weight: 700;
}

.crs-nfl-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 12px;
	border-bottom: 1px solid var(--crs-ink);
	font-size: 12.5px;
}

.crs-nfl-row.is-indent {
	padding-left: 24px;
}

.crs-nfl-dv {
	justify-content: flex-end;
	color: #666;
	font-size: 10px;
}

.crs-nfl-foot {
	padding: 8px 12px;
	color: var(--crs-muted);
	font-size: 10px;
	line-height: 1.4;
}

/* ---------------------------------------------------------------- Profile */

.crs-profile {
	padding: 36px 40px;
	background: var(--crs-cream);
	border: 1px solid var(--crs-line);
	border-top: 0;
}

.crs-profile[hidden] {
	display: none;
}

.crs-profile-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
}

.crs-profile-head h2 {
	margin: 0 0 4px;
	font-family: var(--crs-display);
	font-size: 24px;
	font-weight: 600;
}

.crs-profile-head p {
	margin: 0;
	color: var(--crs-muted);
	font-size: 13px;
}

.crs-profile-head .crs-btn {
	margin-left: auto;
}

.crs-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--crs-forest-light), var(--crs-forest));
	box-shadow: 0 6px 16px -4px rgba(30, 58, 138, 0.4);
	color: #fff;
	font-family: var(--crs-display);
	font-size: 22px;
	font-weight: 700;
}

.crs-profile-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.crs-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 16px;
}

.crs-stat {
	padding: 16px;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	background: #f7f9fd;
	text-align: center;
}

.crs-stat .crs-num {
	display: block;
	color: var(--crs-forest-light);
	font-family: var(--crs-display);
	font-size: 26px;
	font-weight: 700;
}

.crs-stat .crs-lbl {
	display: block;
	margin-top: 2px;
	color: var(--crs-muted);
	font-size: 11px;
}

.crs-saved-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #f0ece2;
}

.crs-saved-row:last-child {
	border-bottom: 0;
}

.crs-saved-row .crs-sname {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 600;
}

.crs-saved-row .crs-scode {
	color: var(--crs-muted);
	font-family: var(--crs-mono);
	font-size: 11px;
}

.crs-saved-row .crs-btn {
	padding: 6px 11px;
	font-size: 11.5px;
}

.crs-empty-line {
	padding: 22px 0;
	color: var(--crs-muted);
	font-size: 13px;
	text-align: center;
}

/* ----------------------------------------------------------------- Fields */

.crs-field {
	margin-bottom: 16px;
}

.crs-field label {
	display: block;
	margin-bottom: 6px;
	color: var(--crs-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.07em;
}

.crs-field input[type="text"],
.crs-field input[type="email"],
.crs-field input[type="tel"],
.crs-field input[type="search"],
.crs-field select,
.crs-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	background: #fcfbf8;
	color: var(--crs-ink);
	font-family: inherit;
	font-size: 13.5px;
}

.crs-field textarea {
	min-height: 88px;
	resize: vertical;
}

.crs-field input:disabled {
	opacity: 0.65;
}

.crs-field-check label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--crs-ink);
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
}

.crs-note {
	margin: 8px 0 0;
	color: var(--crs-muted);
	font-size: 12px;
}

/* ----------------------------------------------------------------- Modals */

.crs-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(27, 42, 74, 0.55);
}

.crs-modal-overlay[hidden] {
	display: none;
}

.crs-modal {
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--crs-paper);
	border-radius: var(--crs-radius);
	box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.4);
}

.crs-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--crs-line);
}

.crs-modal-head h3 {
	margin: 0 0 4px;
	font-family: var(--crs-display);
	font-size: 17px;
	font-weight: 600;
}

.crs-modal-head p {
	margin: 0;
	color: var(--crs-muted);
	font-size: 12.5px;
}

.crs-modal-close {
	padding: 0 0 0 12px;
	border: 0;
	background: none;
	color: var(--crs-muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.crs-modal-close:hover {
	color: var(--crs-ink);
}

.crs-modal-body {
	padding: 22px 24px;
}

.crs-modal-foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 24px 22px;
}

/* ------------------------------------------------------------------ Toast */

.crs-toast {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 18px;
	border-radius: var(--crs-radius);
	background: var(--crs-ink);
	color: #fff;
	font-size: 13px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

.crs-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ------------------------------------------------------------ Standalone */

.crs-portal-standalone {
	max-width: 560px;
}

.crs-portal-standalone .crs-profile {
	padding: 0;
	background: none;
	border: 0;
}

/* ------------------------------------------------------------ Responsive */

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

@media (max-width: 860px) {
	.crs-main {
		flex-direction: column;
		height: auto;
	}

	.crs-panel-list {
		width: 100%;
		border-right: 0;
		border-bottom: 1px solid var(--crs-line);
	}

	.crs-product-list {
		max-height: 340px;
	}

	.crs-panel-detail,
	.crs-profile {
		padding: 24px 20px;
	}

	.crs-detail-head {
		flex-direction: column;
	}

	.crs-detail-actions {
		align-items: flex-start;
		width: 100%;
	}

	.crs-detail-actions .crs-row-btns {
		justify-content: flex-start;
	}

	.crs-profile-grid {
		grid-template-columns: 1fr;
	}

	.crs-toast {
		right: 16px;
		left: 16px;
		bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.crs-portal *,
	.crs-toast {
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Detail panel, second pass.
   The crediting figures lead; everything else is set quietly beneath them.
   Rules below deliberately follow the originals so they win on order.
   ========================================================================== */

.crs-panel-detail {
	padding: 0 36px 56px;
}

.crs-detail-inner {
	max-width: 1100px;
	margin: 0 auto;
}

/* ------------------------------------------------------- Product identity */

.crs-product-head {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 28px;
	padding: 26px 0 20px;
	background: var(--crs-cream);
	border-bottom: 1px solid var(--crs-line);
}

.crs-product-id {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	min-width: 0;
}

.crs-thumb-product {
	width: 76px;
	height: 76px;
}

.crs-product-titles {
	min-width: 0;
}

.crs-status-line {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 9px;
}

.crs-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.crs-status::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

.crs-status-verified {
	background: #e7ecfa;
	color: var(--crs-forest);
}

.crs-status-pending {
	background: #fbe6e6;
	color: var(--crs-danger);
}

.crs-status-featured {
	background: #fbf0d9;
	color: #8a6100;
}

.crs-status-flag {
	background: #e8f0ea;
	color: #1f6b41;
}

.crs-product-head h2 {
	margin: 0 0 12px;
	font-family: var(--crs-display);
	font-size: 25px;
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.012em;
	overflow-wrap: anywhere;
}

.crs-idents {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 30px;
	margin: 0;
}

.crs-idents div {
	min-width: 0;
}

.crs-idents dt {
	margin-bottom: 1px;
	color: var(--crs-muted);
	font-size: 10.5px;
	font-weight: 500;
}

.crs-idents dd {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.crs-idents dd.crs-mono {
	color: var(--crs-forest-light);
	font-family: var(--crs-mono);
	font-size: 12.5px;
}

.crs-product-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	flex-shrink: 0;
}

.crs-btn.is-on {
	border-color: var(--crs-forest);
	background: #eef1fa;
	color: var(--crs-forest);
}

/* ------------------------------------------------- Crediting: the headline */

.crs-credit-band {
	margin: 26px 0 8px;
}

.crs-credit-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	overflow: hidden;
	background: var(--crs-line);
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
}

.crs-credit {
	flex: 1 1 170px;
	min-width: 0;
	padding: 18px 20px 16px;
	background: var(--crs-paper);
}

.crs-credit-figure {
	display: flex;
	align-items: baseline;
	gap: 5px;
}

.crs-credit-value {
	color: var(--crs-forest);
	font-family: var(--crs-display);
	font-size: 34px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
}

.crs-credit-unit {
	color: var(--crs-forest-light);
	font-size: 13px;
	font-weight: 600;
}

.crs-credit-name {
	display: block;
	margin-top: 7px;
	font-size: 13px;
	font-weight: 600;
}

.crs-credit-note {
	display: block;
	margin-top: 2px;
	color: var(--crs-muted);
	font-size: 11.5px;
}

.crs-credit-basis {
	margin: 9px 0 0;
	color: var(--crs-muted);
	font-size: 12px;
}

/* ------------------------------------------------------------- Body layout */

.crs-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 44px;
	align-items: start;
	margin-top: 10px;
}

.crs-col-main {
	min-width: 0;
}

.crs-col-side {
	min-width: 0;
	padding-top: 26px;
}

.crs-section {
	padding: 24px 0;
	border-top: 1px solid var(--crs-line);
}

.crs-section h3 {
	margin: 0 0 14px;
	font-family: var(--crs-display);
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.crs-dl {
	margin: 0;
}

.crs-dl-row {
	display: grid;
	grid-template-columns: minmax(140px, 230px) minmax(0, 1fr);
	gap: 8px 24px;
	padding: 9px 0;
	border-bottom: 1px solid #ecefF7;
}

.crs-dl-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.crs-dl-row dt {
	color: var(--crs-muted);
	font-size: 13px;
}

.crs-dl-row dd {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.crs-prose,
.crs-ingredients {
	max-width: 66ch;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.65;
}

.crs-ingredients {
	margin-top: 14px;
	padding-top: 0;
	border-top: 0;
	color: var(--crs-muted);
	font-size: 12.5px;
}

.crs-blank {
	margin: 0;
	padding: 14px 16px;
	border: 1px dashed var(--crs-line);
	border-radius: var(--crs-radius);
	color: var(--crs-muted);
	font-size: 12.5px;
}

.crs-warning {
	margin: 0 0 14px;
}

/* Documents */

.crs-docs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.crs-doc {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 8px;
	padding: 12px 14px;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	background: var(--crs-paper);
}

.crs-upload {
	display: block;
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px dashed var(--crs-line);
	border-radius: var(--crs-radius);
	background: var(--crs-paper);
}

.crs-upload span {
	display: block;
	margin-bottom: 7px;
	color: var(--crs-muted);
	font-size: 12px;
}

/* Nutrition panel keeps its border: the FDA panel is a real printed artifact,
   so the box carries meaning here rather than decorating. */

.crs-col-side .crs-nfl {
	border: 2px solid var(--crs-ink);
	background: var(--crs-paper);
}

/* ------------------------------------------------------------ Product list */

.crs-list-head {
	padding: 22px 20px 16px;
}

.crs-list-head h2 {
	font-size: 16px;
	letter-spacing: -0.01em;
}

.crs-filters {
	gap: 0;
	margin-top: 14px;
	padding: 2px;
	border: 1px solid var(--crs-line);
	border-radius: 3px;
	background: #f7f9fd;
}

.crs-filter {
	flex: 1 1 auto;
	padding: 6px 8px;
	border: 0;
	border-radius: 2px;
	background: transparent;
	font-size: 11.5px;
	white-space: nowrap;
}

.crs-filter.is-active {
	background: var(--crs-paper);
	box-shadow: 0 1px 2px rgba(27, 42, 74, 0.14);
}

.crs-row {
	gap: 12px;
	padding: 12px 20px;
	border-bottom: 1px solid #f1f3f9;
}

.crs-thumb-row {
	width: 42px;
	height: 42px;
}

.crs-row .crs-pname {
	margin-bottom: 3px;
	font-size: 13.5px;
	line-height: 1.35;
}

.crs-row .crs-pcode {
	color: var(--crs-forest-light);
	font-family: var(--crs-mono);
	font-size: 11.5px;
}

.crs-row .crs-pvendor {
	display: block;
	margin-top: 1px;
	color: var(--crs-muted);
	font-size: 11.5px;
}

.crs-marks {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 6px;
}

.crs-mark {
	padding: 2px 7px;
	border-radius: 2px;
	font-size: 10px;
	font-weight: 600;
}

.crs-mark-featured {
	background: #fbf0d9;
	color: #8a6100;
}

.crs-mark-repeat {
	background: #e8f0ea;
	color: #1f6b41;
}

.crs-mark-pending {
	background: #fbe6e6;
	color: var(--crs-danger);
}

/* ---------------------------------------------------------- Empty and misc */

.crs-empty p {
	max-width: 34ch;
}

.crs-product-list::-webkit-scrollbar,
.crs-panel-detail::-webkit-scrollbar {
	width: 10px;
}

.crs-product-list::-webkit-scrollbar-thumb,
.crs-panel-detail::-webkit-scrollbar-thumb {
	border: 3px solid transparent;
	border-radius: 6px;
	background: #c9d0e4;
	background-clip: content-box;
}

/* ------------------------------------------------------------- Narrow view */

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

	.crs-col-side {
		max-width: 340px;
		padding-top: 24px;
		border-top: 1px solid var(--crs-line);
	}
}

@media (max-width: 860px) {
	.crs-panel-detail {
		padding: 0 20px 40px;
	}

	.crs-product-head {
		position: static;
		flex-direction: column;
		gap: 16px;
	}

	.crs-product-actions {
		justify-content: flex-start;
	}

	.crs-dl-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}

.crs-empty {
	gap: 12px;
	padding: 40px 20px;
}

.crs-empty svg {
	width: 40px;
	height: 40px;
	opacity: 0.28;
}

.crs-empty h3 {
	font-size: 18px;
	letter-spacing: -0.01em;
}

.crs-empty p {
	max-width: 42ch;
	line-height: 1.6;
}

.crs-empty .crs-btn {
	margin-top: 6px;
}

/* ==========================================================================
   Inner spacing pass.
   The detail content anchors to the left edge of its panel rather than
   floating centred, and every block shares one measure so the left rag
   is continuous from the product name down to the upload box.
   ========================================================================== */

.crs-panel-detail {
	padding: 0 40px 64px;
}

/* Left-aligned, not centred: a centred column leaves a dead gutter against
   the product list and drifts the nutrition panel off to the far right. */
.crs-detail-inner {
	max-width: 1240px;
	margin: 0;
}

.crs-product-head {
	gap: 24px;
	padding: 24px 0 18px;
}

/* One measure for everything in the main column, so values sit near their
   labels instead of stranding across the full panel width. */
.crs-dl,
.crs-prose,
.crs-ingredients,
.crs-docs,
.crs-upload,
.crs-blank,
.crs-warning,
.crs-allergens {
	max-width: 720px;
}

.crs-dl-row {
	grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
	gap: 6px 20px;
	padding: 8px 0;
}

/* Tiles size to their content and carry their own border. A single credit
   inside one full-width box read as a mostly empty container. */
.crs-credit-band {
	margin: 22px 0 0;
}

.crs-credit-tiles {
	gap: 10px;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: none;
}

.crs-credit {
	flex: 0 1 auto;
	min-width: 176px;
	padding: 16px 20px 15px;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
}

.crs-credit-basis {
	margin-top: 10px;
}

.crs-columns {
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 56px;
	margin-top: 4px;
}

.crs-col-side {
	padding-top: 22px;
}

.crs-section {
	padding: 22px 0 24px;
}

.crs-section h3 {
	margin-bottom: 10px;
}

.crs-upload {
	padding: 13px 15px;
}

.crs-upload input[type="file"] {
	max-width: 100%;
	font-size: 12.5px;
}

.crs-doc {
	padding: 11px 14px;
}

@media (max-width: 1440px) {
	.crs-columns {
		gap: 40px;
	}
}

@media (max-width: 860px) {
	.crs-panel-detail {
		padding: 0 20px 40px;
	}
}

/* ==========================================================================
   Product photo and the sticky header's full-bleed backing.
   ========================================================================== */

/* The sticky bar used to paint only as wide as the content column, leaving a
   hard edge where the panel carried on. A pseudo-element runs its background
   and rule out past the right of the panel instead. */
.crs-panel-detail {
	overflow-x: hidden;
}

.crs-product-head {
	border-bottom: 0;
}

.crs-product-head::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -40px;
	right: -100%;
	z-index: -1;
	background: var(--crs-cream);
	border-bottom: 1px solid var(--crs-line);
}

/* ---------------------------------------------------------- Product photo */

.crs-photo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 108px;
	height: 108px;
	background: var(--crs-paper);
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	cursor: zoom-in;
}

.crs-photo-img {
	width: 100%;
	height: 100%;
	padding: 6px;
	object-fit: contain;
}

.crs-photo-hint {
	position: absolute;
	right: 4px;
	bottom: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 2px;
	background: rgba(27, 42, 74, 0.72);
	color: #fff;
	opacity: 0;
	transition: opacity 0.14s ease;
}

.crs-photo-hint svg {
	width: 11px;
	height: 11px;
}

.crs-photo:hover .crs-photo-hint,
.crs-photo:focus-visible .crs-photo-hint {
	opacity: 1;
}

.crs-photo-zoom {
	position: absolute;
	top: -10px;
	left: -10px;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 360px;
	height: 360px;
	padding: 16px;
	background: var(--crs-paper);
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	box-shadow: 0 26px 64px -20px rgba(27, 42, 74, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: scale(0.94);
	transform-origin: top left;
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
	pointer-events: none;
}

.crs-photo-zoom img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.crs-photo:hover .crs-photo-zoom,
.crs-photo:focus-visible .crs-photo-zoom {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

.crs-thumb-product {
	width: 108px;
	height: 108px;
}

@media (max-width: 860px) {
	.crs-photo,
	.crs-thumb-product {
		width: 84px;
		height: 84px;
	}

	.crs-photo-zoom {
		width: 260px;
		height: 260px;
	}

	.crs-product-head::after {
		left: -20px;
	}
}

/* ==========================================================================
   File management: remove controls, wider uploads, photo swap.
   ========================================================================== */

.crs-doc {
	position: relative;
}

.crs-doc-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	margin-left: 2px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 2px;
	background: none;
	color: var(--crs-muted);
	cursor: pointer;
	transition: color 0.13s ease, background-color 0.13s ease, border-color 0.13s ease;
}

.crs-doc-remove svg {
	width: 13px;
	height: 13px;
}

.crs-doc-remove:hover,
.crs-doc-remove:focus-visible {
	border-color: var(--crs-accent);
	background: #fbe9eb;
	color: var(--crs-accent);
}

.crs-upload {
	cursor: pointer;
}

.crs-upload span {
	margin-bottom: 8px;
	color: var(--crs-ink);
	font-size: 12.5px;
	font-weight: 600;
}

.crs-upload em {
	display: block;
	margin-top: 8px;
	color: var(--crs-muted);
	font-size: 11.5px;
	font-style: normal;
}

/* Photo and its swap control share a column under the product header. */

.crs-photo-wrap {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex-shrink: 0;
	gap: 6px;
}

.crs-photo-swap {
	position: relative;
	overflow: hidden;
	display: block;
	text-align: center;
	cursor: pointer;
}

.crs-photo-swap span {
	display: block;
	padding: 5px 6px;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	background: var(--crs-paper);
	color: var(--crs-forest-light);
	font-size: 11px;
	font-weight: 600;
	transition: background-color 0.13s ease, border-color 0.13s ease, box-shadow 0.13s ease, transform 0.08s ease;
}

.crs-photo-swap:hover span {
	border-color: var(--crs-forest-light);
	background: #eef1fa;
}

/* Pressed state: a small push, released as soon as the picker opens. */
.crs-photo-swap:active span {
	background: #e4eaf8;
	transform: translateY(1px);
}

.crs-photo-swap input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* The hidden input takes focus on a mouse click too, so :focus-within left a
   ring sitting there after the picker closed. Only keyboard focus rings. */
.crs-photo-swap input[type="file"]:focus,
.crs-photo-swap input[type="file"]:focus-visible {
	outline: none;
}

.crs-photo-swap:has( input:focus-visible ) span {
	border-color: var(--crs-forest-light);
	box-shadow: 0 0 0 2px rgba(47, 85, 181, 0.32);
}

/* While the file is on its way up. */
.crs-photo-swap.is-busy {
	pointer-events: none;
}

.crs-photo-swap.is-busy span {
	color: var(--crs-muted);
	background: #f2f4fa;
}

.crs-upload input[type="file"]:focus,
.crs-upload input[type="file"]:focus-visible {
	outline: none;
}

/* ==========================================================================
   Empty-state tidy-up.
   Sections with nothing in them are not rendered at all; these rules stop
   the ones that remain from doubling up rules or leaving empty columns.
   ========================================================================== */

/* The product header already draws a rule. Without a credit band beneath it,
   the first section's own top rule landed directly under it as a double line. */
.crs-col-main > .crs-section:first-child {
	border-top: 0;
	padding-top: 26px;
}

/* A credit band restores the separation, so the rule comes back. */
.crs-credit-band + .crs-columns .crs-col-main > .crs-section:first-child {
	border-top: 1px solid var(--crs-line);
	padding-top: 24px;
}

/* No nutrition panel: give the whole width back to the content. */
.crs-columns.is-single {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.crs-columns.is-single .crs-col-side {
	display: none;
}

/* A product with no sections at all should not leave a bare gap. */
.crs-col-main:empty {
	display: none;
}

/* ==========================================================================
   Spacing pass. Long records are read a section at a time, so the gaps
   between sections are wider than the gaps within them.
   ========================================================================== */

.crs-section {
	padding: 32px 0 34px;
}

.crs-col-main > .crs-section:first-child {
	padding-top: 30px;
}

.crs-credit-band + .crs-columns .crs-col-main > .crs-section:first-child {
	padding-top: 32px;
}

.crs-section h3 {
	margin-bottom: 18px;
}

.crs-product-head {
	padding-bottom: 22px;
}

.crs-credit-band {
	margin-top: 28px;
}

.crs-credit-basis {
	margin-top: 13px;
}

/* Label and value rows: more room to breathe between lines. */
.crs-dl-row {
	gap: 8px 24px;
	padding: 12px 0;
}

.crs-dl-row:last-child {
	padding-bottom: 2px;
}

/* Running text gets a taller measure than interface text. */
.crs-prose,
.crs-ingredients {
	line-height: 1.75;
}

.crs-ingredients {
	margin-top: 22px;
}

.crs-allergens {
	gap: 9px;
}

.crs-warning {
	margin-bottom: 18px;
	padding: 14px 16px;
	line-height: 1.6;
}

.crs-blank {
	padding: 17px 18px;
	line-height: 1.6;
}

.crs-docs .crs-doc {
	margin-bottom: 10px;
	padding: 13px 15px;
}

.crs-docs .crs-doc:last-child {
	margin-bottom: 0;
}

.crs-upload {
	margin-top: 18px;
	padding: 16px 18px;
}

.crs-upload span {
	margin-bottom: 10px;
}

.crs-upload em {
	margin-top: 10px;
}

@media (max-width: 860px) {
	.crs-section {
		padding: 26px 0 28px;
	}
}

/* A little more air around the chip rows and between a section's heading
   and the first thing under it. */
.crs-allergens {
	margin-bottom: 4px;
}

.crs-status-line {
	margin-bottom: 11px;
}

.crs-idents {
	gap: 12px 32px;
}

.crs-credit {
	padding: 18px 22px 17px;
}

.crs-credit-name {
	margin-top: 9px;
}

/* ------------------------------------------------------- Brand / type selects */

.crs-selects {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 10px;
}

.crs-select {
	position: relative;
	display: block;
	min-width: 0;
}

.crs-select[hidden] {
	display: none;
}

/* One select left on its own should take the full width. */
.crs-selects:has( .crs-select[hidden] ) {
	grid-template-columns: 1fr;
}

.crs-select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 11px;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 1.5px solid var(--crs-muted);
	border-bottom: 1.5px solid var(--crs-muted);
	transform: rotate(45deg);
	pointer-events: none;
}

.crs-select select {
	width: 100%;
	padding: 8px 28px 8px 11px;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	background: var(--crs-paper);
	color: var(--crs-ink);
	font-family: inherit;
	font-size: 12.5px;
	line-height: 1.3;
	appearance: none;
	cursor: pointer;
	text-overflow: ellipsis;
}

.crs-select select:hover {
	border-color: var(--crs-forest-light);
}

.crs-select select:focus-visible {
	border-color: var(--crs-forest-light);
	outline: 2px solid var(--crs-accent);
	outline-offset: 1px;
}

@media (max-width: 860px) {
	.crs-selects {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Demo mode on the front end.
   ========================================================================== */

.crs-demo-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	padding: 11px 28px;
	background: #8A6100;
	color: #FFF8E8;
	font-size: 13px;
	line-height: 1.5;
}

.crs-demo-bar strong {
	font-weight: 600;
	letter-spacing: 0.02em;
}

.crs-demo-note {
	margin: 0 0 14px;
	padding: 13px 16px;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	background: #FBF0D9;
	color: #6B4B00;
	font-size: 13px;
	line-height: 1.6;
}

/* The gate card's mark sits on white, so it needs no inversion. */
.crs-gate .crs-login-mark {
	justify-content: flex-start;
}

@media (max-width: 860px) {
	.crs-demo-bar {
		padding: 10px 20px;
	}
}

/* ==========================================================================
   height="full" — the portal fills the window instead of sitting in a box.
   ========================================================================== */

.crs-portal-fill {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;   /* tracks the mobile address bar */
}

.crs-portal-fill .crs-main {
	flex: 1;
	min-height: 0;
	height: auto;
}

/* No white strip under the portal when it is the only thing on the page. */
.crs-portal-fill .crs-panel-list,
.crs-portal-fill .crs-panel-detail {
	min-height: 0;
}

@media (max-width: 860px) {
	.crs-portal-fill {
		min-height: 0;
	}

	.crs-portal-fill .crs-main {
		height: auto;
	}
}

/* ==========================================================================
   SPEC SHEET PASS
   The record is set like a printed product spec rather than a stack of
   widgets: one sans face with tabular figures, rules instead of boxes, and
   the product number promoted to the thing you scan by. The Nutrition Facts
   panel keeps its border, because it is a real printed artifact.
   Everything below deliberately follows the earlier rules so it wins on order.
   ========================================================================== */

.crs-portal {
	--crs-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--crs-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--crs-rule: #E4E8F3;
}

/* Figures line up in a column without a monospace face and its dotted zero. */
.crs-portal .crs-num,
.crs-portal .crs-pcode,
.crs-portal .crs-idcode,
.crs-portal .crs-credit-value,
.crs-portal .crs-dl-row dd,
.crs-portal .crs-nfl-row,
.crs-portal .crs-nfl-cal .crs-num,
.crs-portal .crs-mono {
	font-family: var(--crs-sans);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------ Product list */

.crs-portal .crs-row {
	gap: 11px;
	padding: 11px 20px;
	align-items: flex-start;
}

.crs-portal .crs-thumb-row {
	width: 38px;
	height: 38px;
}

.crs-portal .crs-pcode {
	display: block;
	margin-bottom: 2px;
	color: #2F55B5;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.crs-portal .crs-pcode.is-pending {
	color: var(--crs-accent);
}

.crs-portal .crs-row .crs-pname {
	margin-bottom: 1px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.crs-portal .crs-row .crs-pvendor {
	color: var(--crs-muted);
	font-size: 11.5px;
}

.crs-pflag {
	color: var(--crs-accent);
	font-weight: 600;
}

.crs-portal .crs-marks {
	margin-top: 5px;
}

/* ---------------------------------------------------------- Record header */

.crs-portal .crs-product-head {
	padding: 22px 0 14px;
	border-bottom: 3px solid var(--crs-ink);
}

.crs-portal .crs-product-head::after {
	border-bottom: 3px solid var(--crs-ink);
}

.crs-idline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 9px;
}

.crs-idcode {
	color: var(--crs-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.005em;
}

.crs-tagsolid,
.crs-tagline,
.crs-tagalert {
	padding: 2px 8px;
	border-radius: 2px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.crs-tagsolid {
	background: var(--crs-forest);
	color: #fff;
}

.crs-tagline {
	border: 1px solid var(--crs-ink);
	color: var(--crs-ink);
}

.crs-tagalert {
	background: #fbe6e6;
	color: var(--crs-danger);
}

.crs-portal .crs-product-head h2 {
	margin: 0 0 5px;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.crs-subline {
	color: var(--crs-muted);
	font-size: 13px;
}

/* ------------------------------------------------------------ Credit band */

.crs-portal .crs-credit-band {
	margin: 0;
}

.crs-portal .crs-credit-tiles {
	display: grid;
	grid-template-columns: repeat(var(--crs-credit-cols, 3), minmax(0, 1fr));
	gap: 0;
	border: 0;
	border-bottom: 1px solid var(--crs-line);
	border-radius: 0;
	background: var(--crs-paper);
	overflow: visible;
}

/* Every cell built the same way, so labels and baselines line up across. */
.crs-portal .crs-credit {
	flex: none;
	min-width: 0;
	padding: 15px 24px;
	border: 0;
	border-right: 1px solid var(--crs-rule);
	border-radius: 0;
	background: var(--crs-paper);
}

.crs-portal .crs-credit:last-child {
	border-right: 0;
}

.crs-portal .crs-credit-name {
	display: block;
	order: -1;
	margin: 0 0 9px;
	color: var(--crs-muted);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.crs-portal .crs-credit-value {
	font-size: 34px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--crs-forest);
}

.crs-portal .crs-credit-unit {
	color: var(--crs-muted);
	font-size: 12px;
	font-weight: 500;
}

.crs-portal .crs-credit-note {
	margin-top: 4px;
	font-size: 11.5px;
}

.crs-portal .crs-credit-basis {
	margin: 0;
	padding: 9px 24px;
	background: var(--crs-paper);
	border-bottom: 1px solid var(--crs-line);
	color: var(--crs-muted);
	font-size: 12px;
}

.crs-portal .crs-credit-basis b {
	color: var(--crs-ink);
	font-weight: 600;
}

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

.crs-portal .crs-columns {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 250px;
	gap: 28px;
	margin-top: 18px;
}

.crs-portal .crs-col-side {
	padding-top: 0;
}

.crs-portal .crs-section,
.crs-portal .crs-col-main > .crs-section:first-child,
.crs-portal .crs-credit-band + .crs-columns .crs-col-main > .crs-section:first-child {
	padding: 0 0 20px;
	border-top: 0;
}

.crs-portal .crs-section + .crs-section {
	padding-top: 20px;
}

.crs-portal .crs-section h3 {
	margin: 0 0 2px;
	padding-bottom: 7px;
	border-bottom: 2px solid var(--crs-ink);
	color: var(--crs-muted);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.crs-portal .crs-dl,
.crs-portal .crs-prose,
.crs-portal .crs-ingredients,
.crs-portal .crs-docs,
.crs-portal .crs-upload,
.crs-portal .crs-blank,
.crs-portal .crs-warning,
.crs-portal .crs-allergens {
	max-width: none;
}

.crs-portal .crs-dl-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px solid var(--crs-rule);
}

.crs-portal .crs-dl-row dt {
	font-size: 12.5px;
}

.crs-portal .crs-dl-row dd {
	font-size: 13px;
	text-align: right;
}

.crs-portal .crs-prose,
.crs-portal .crs-ingredients {
	font-size: 12.5px;
	line-height: 1.6;
}

/* Documents as rows on the rule, not bordered cards. */
.crs-portal .crs-docs .crs-doc {
	margin: 0;
	padding: 9px 0;
	border: 0;
	border-bottom: 1px solid var(--crs-rule);
	border-radius: 0;
	background: none;
}

.crs-portal .crs-doc svg {
	width: 17px;
	height: 17px;
}

.crs-portal .crs-doc .crs-dsub {
	font-size: 10.5px;
}

.crs-portal .crs-upload {
	margin-top: 14px;
	padding: 12px 14px;
}

/* The one box that earns its border. */
.crs-portal .crs-col-side .crs-nfl {
	border: 2px solid var(--crs-ink);
}

.crs-portal .crs-nfl-title {
	font-family: var(--crs-sans);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.crs-portal .crs-nfl-cal .crs-num {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* ------------------------------------------------------------- Other type */

.crs-portal .crs-list-head h2,
.crs-portal .crs-profile-head h2,
.crs-portal .crs-empty h3,
.crs-portal .crs-modal-head h3,
.crs-portal .crs-card h3,
.crs-portal .crs-login-card h2 {
	font-family: var(--crs-sans);
	letter-spacing: -0.02em;
}

.crs-portal .crs-list-head h2 {
	font-size: 16px;
	font-weight: 700;
}

.crs-portal .crs-empty h3 {
	font-size: 18px;
	font-weight: 700;
}

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

	.crs-portal .crs-col-side {
		max-width: 320px;
		padding-top: 20px;
	}
}

@media (max-width: 760px) {
	.crs-portal .crs-credit-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.crs-portal .crs-credit {
		border-bottom: 1px solid var(--crs-rule);
	}
}

/* ==========================================================================
   Spec sheet pass — corrections.
   ========================================================================== */

/* The header's rule is drawn by its full-bleed ::after. Setting it on the
   element as well produced two rules a few pixels apart. */
.crs-portal .crs-product-head {
	border-bottom: 0;
}

/* .crs-columns has exactly two children — the main column and the nutrition
   aside — so three tracks left the panel sitting in the middle with an empty
   column beside it. Two tracks, and the sections split inside the main one. */
.crs-portal .crs-columns {
	grid-template-columns: minmax(0, 1fr) 258px;
	gap: 32px;
}

.crs-portal .crs-col-main {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 30px;
	align-content: start;
}

/* Running text and file lists read badly in a half-width column. */
.crs-portal .crs-col-main > .crs-section:nth-child(n + 3) {
	grid-column: 1 / -1;
}

.crs-portal .crs-col-main > .crs-section {
	padding-top: 0;
	padding-bottom: 22px;
}

.crs-portal .crs-col-main > .crs-section + .crs-section {
	padding-top: 0;
}

/* Keep the figures together rather than stretched across a wide panel. */
.crs-portal .crs-credit-tiles,
.crs-portal .crs-credit-basis {
	max-width: 880px;
}

.crs-portal .crs-credit-tiles {
	border-left: 1px solid var(--crs-rule);
	border-right: 1px solid var(--crs-rule);
}

.crs-portal .crs-detail-inner {
	max-width: 1180px;
}

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

	.crs-portal .crs-col-main {
		grid-template-columns: minmax(0, 1fr);
	}

	.crs-portal .crs-col-main > .crs-section:nth-child(n + 3) {
		grid-column: auto;
	}
}

/* The sticky header's full-bleed backing carries the heavy rule now that the
   element's own border is gone, so it reads as one line across the panel. */
.crs-portal .crs-product-head::after {
	border-bottom: 3px solid var(--crs-ink);
}

/* ==========================================================================
   Rule cleanup.
   One rule per boundary, and none of them run the full width of the panel.
   ========================================================================== */

/* The heavy rule belongs to the record, so it stops where the record stops.
   The pseudo-element keeps painting the sticky backing behind it, but draws
   no border of its own — two borders was what doubled the line. */
.crs-portal .crs-product-head {
	border-bottom: 3px solid var(--crs-ink);
}

.crs-portal .crs-product-head::after {
	border-bottom: 0;
}

/* The credit band is one bordered block: figures, then the serving basis
   inside the same box, rather than each drawing its own edge. */
.crs-portal .crs-credit-band {
	max-width: 880px;
	margin: 18px 0 0;
	border: 1px solid var(--crs-line);
	background: var(--crs-paper);
}

.crs-portal .crs-credit-tiles {
	max-width: none;
	border: 0;
	border-radius: 0;
}

.crs-portal .crs-credit-basis {
	max-width: none;
	border-top: 1px solid var(--crs-rule);
	border-bottom: 0;
}

/* A list's last row sits directly above the next section's heading rule, so
   its own border made two lines a few pixels apart. */
.crs-portal .crs-dl-row:last-child {
	border-bottom: 0;
}

.crs-portal .crs-docs .crs-doc:last-child {
	border-bottom: 0;
}

/* Even spacing between sections whether or not the one above ended on a rule. */
.crs-portal .crs-col-main > .crs-section {
	padding-bottom: 26px;
}

.crs-portal .crs-section h3 {
	margin-bottom: 4px;
}

/* ==========================================================================
   Nutrition panel — self-contained.
   The panel sits inside whatever theme the site runs, and a theme that styles
   generic divs can add borders or margins of its own, which is what turns a
   single separator into two. Everything is stated explicitly here so nothing
   outside can add an edge the design did not ask for.
   ========================================================================== */

.crs-portal .crs-nfl {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 2px solid var(--crs-ink);
	border-radius: 0;
	background: var(--crs-paper);
	font-family: var(--crs-sans);
	overflow: hidden;
}

/* One rule per boundary: bottom edges only, never a top or side edge. */
.crs-portal .crs-nfl > * {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.crs-portal .crs-nfl-title {
	padding: 7px 11px 4px;
	border-bottom: 7px solid var(--crs-ink);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.crs-portal .crs-nfl-servings {
	padding: 6px 11px;
	border-bottom: 5px solid var(--crs-ink);
	font-size: 12px;
	line-height: 1.45;
}

.crs-portal .crs-nfl-servings strong {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
}

.crs-portal .crs-nfl-cal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 11px;
	border-bottom: 9px solid var(--crs-ink);
}

.crs-portal .crs-nfl-cal .crs-lbl {
	font-size: 13px;
	font-weight: 700;
}

.crs-portal .crs-nfl-cal .crs-num {
	font-size: 29px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1;
}

.crs-portal .crs-nfl-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 11px;
	border-bottom: 1px solid var(--crs-ink);
	font-size: 12.5px;
	line-height: 1.4;
}

.crs-portal .crs-nfl-row.is-indent {
	padding-left: 23px;
}

.crs-portal .crs-nfl-dv {
	justify-content: flex-end;
	padding-top: 3px;
	padding-bottom: 3px;
	color: var(--crs-muted);
	font-size: 10px;
}

/* The footnote closes the panel; the outer border is the only edge below it. */
.crs-portal .crs-nfl-foot {
	padding: 7px 11px;
	border-bottom: 0;
	color: var(--crs-muted);
	font-size: 9.5px;
	line-height: 1.45;
}

.crs-portal .crs-nfl > *:last-child {
	border-bottom: 0;
}

/* Two heavy separators landing together — which happens when a band between
   them has little or no content — collapse to the heavier of the two. */
.crs-portal .crs-nfl-title + .crs-nfl-cal,
.crs-portal .crs-nfl-title + .crs-nfl-row {
	border-top: 0;
}

.crs-portal .crs-nfl-servings:empty,
.crs-portal .crs-nfl-cal:empty {
	display: none;
}

/* A band with no separator beneath it should not leave a half-height gap. */
.crs-portal .crs-nfl-servings {
	min-height: 0;
}

/* ==========================================================================
   Button insulation.
   On the front end these sit inside the site's theme, which styles every
   <button> it finds — hence a filter tab picking up the theme's fill. Reset
   first, then restate the portal's own buttons so nothing outside can paint
   them.
   ========================================================================== */

.crs-portal button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-image: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	line-height: 1.2;
}

.crs-portal button:hover,
.crs-portal button:focus,
.crs-portal button:active {
	background-image: none;
	box-shadow: none;
	text-decoration: none;
}

/* A mouse click should leave no ring behind; keyboard focus still shows one. */
.crs-portal :focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.crs-portal :focus-visible {
	outline: 2px solid var(--crs-forest-light);
	outline-offset: 2px;
}

/* ---- filter tabs ---- */

.crs-portal .crs-filter {
	flex: 1 1 auto;
	padding: 6px 8px;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: var(--crs-muted);
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}

.crs-portal .crs-filter:hover {
	background: rgba(30, 58, 138, 0.07);
	color: var(--crs-forest);
}

.crs-portal .crs-filter.is-active,
.crs-portal .crs-filter.is-active:hover {
	background: var(--crs-paper);
	color: var(--crs-forest);
	box-shadow: 0 1px 2px rgba(27, 42, 74, 0.14);
}

/* ---- the main buttons ---- */

.crs-portal .crs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: var(--crs-radius);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.crs-portal .crs-btn-primary,
.crs-portal .crs-btn-primary:hover {
	background: var(--crs-forest);
	color: #fff;
}

.crs-portal .crs-btn-primary:hover {
	background: var(--crs-forest-light);
}

.crs-portal .crs-btn-ghost {
	border-color: var(--crs-line);
	background: var(--crs-paper);
	color: var(--crs-forest);
}

.crs-portal .crs-btn-ghost:hover {
	border-color: var(--crs-forest-light);
	background: #eef1fa;
	color: var(--crs-forest);
}

.crs-portal .crs-btn-gold,
.crs-portal .crs-btn-gold:hover {
	background: var(--crs-accent);
	color: #fff;
}

.crs-portal .crs-btn-gold:hover {
	filter: brightness(0.92);
}

.crs-portal .crs-btn.is-on {
	border-color: var(--crs-forest);
	background: #eef1fa;
	color: var(--crs-forest);
}

/* ---- text buttons ---- */

.crs-portal .crs-textlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	background: none;
	color: var(--crs-forest-light);
	font-size: 12.5px;
	font-weight: 600;
}

.crs-portal .crs-textlink:hover {
	background: none;
	color: var(--crs-forest);
	text-decoration: underline;
}

.crs-portal .crs-link {
	padding: 0;
	border: 0;
	border-bottom: 1px solid rgba(239, 234, 217, 0.4);
	background: none;
	color: #efead9;
	font-size: 13px;
}

.crs-portal .crs-link:hover {
	background: none;
	border-bottom-color: #efead9;
	color: #fff;
}

.crs-portal .crs-doc-remove:hover,
.crs-portal .crs-doc-remove:focus-visible {
	border-color: var(--crs-accent);
	background: #fbe9eb;
	color: var(--crs-accent);
}

.crs-portal .crs-modal-close:hover {
	background: none;
	color: var(--crs-ink);
}

/* ---------------------------------------------- Selection and export bar */

.crs-portal .crs-selectbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 20px;
	border-bottom: 1px solid var(--crs-line);
	background: #f7f9fd;
}

.crs-portal .crs-selectall {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--crs-ink);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.crs-portal .crs-selectall input[type="checkbox"] {
	width: 15px;
	height: 15px;
	min-width: 15px;
	margin: 0;
	accent-color: var(--crs-forest);
	cursor: pointer;
}

.crs-portal .crs-selectbar .crs-btn {
	flex-shrink: 0;
	padding: 8px 14px;
	font-size: 12.5px;
}

.crs-portal .crs-selectbar .crs-btn[disabled] {
	opacity: 0.5;
	cursor: default;
}

.crs-portal .crs-selectbar .crs-btn[disabled]:hover {
	filter: none;
}

/* ==========================================================================
   Sign-up form and the documentation request.
   ========================================================================== */

.crs-signup-wrap {
	max-width: 560px;
	margin: 0 auto;
}

.crs-portal .crs-signup {
	padding: 30px 28px 26px;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	background: var(--crs-paper);
}

.crs-portal .crs-signup .crs-field {
	margin-bottom: 16px;
}

.crs-portal .crs-signup label {
	display: block;
	margin-bottom: 7px;
	color: var(--crs-muted);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.crs-optional {
	color: var(--crs-muted);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.crs-portal .crs-signup input[type="text"],
.crs-portal .crs-signup input[type="email"],
.crs-portal .crs-signup input[type="tel"],
.crs-portal .crs-signup select,
.crs-portal .crs-signup textarea {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	background: #fcfbf8;
	color: var(--crs-ink);
	font-family: inherit;
	font-size: 14.5px;
}

.crs-portal .crs-signup textarea {
	min-height: 0;
	resize: vertical;
}

.crs-portal .crs-signup input:focus,
.crs-portal .crs-signup select:focus,
.crs-portal .crs-signup textarea:focus {
	outline: none;
	border-color: var(--crs-forest-light);
	box-shadow: 0 0 0 3px rgba(47, 85, 181, 0.16);
}

.crs-portal .crs-signup .crs-btn {
	width: 100%;
	min-height: 48px;
	margin-top: 6px;
	font-size: 15px;
}

.crs-signup-note {
	margin: 16px 0 0;
	color: var(--crs-muted);
	font-size: 12.5px;
	line-height: 1.6;
}

/* Off-screen rather than display:none — a bot reading the markup still finds
   it, but it is out of the tab order and invisible to anyone using the form. */
.crs-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.crs-signup-done {
	padding: 30px 28px;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	background: var(--crs-paper);
}

.crs-signup-done h2 {
	margin: 0 0 8px;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.crs-signup-done p {
	margin: 0;
	color: var(--crs-muted);
	font-size: 14.5px;
	line-height: 1.6;
}

/* the request-documentation button sits under the file list */
.crs-portal .crs-doc-request {
	margin-top: 14px;
}

/* The load-more control at the foot of the product list. */
.crs-portal .crs-more {
	padding: 14px 20px 18px;
	text-align: center;
}

.crs-portal .crs-more .crs-btn {
	width: 100%;
	justify-content: center;
}

/* ---------------------------------------------- Not applicable, stated */

/* Grey, not red. The status means the answer is settled, so it must not
   look like the warning used for a record that is genuinely incomplete. */
.crs-tagmuted {
	padding: 2px 8px;
	border-radius: 2px;
	background: #eceff6;
	color: var(--crs-muted);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.crs-portal .crs-credit-none {
	margin: 18px 0 0;
	padding: 14px 18px;
	max-width: 880px;
	border: 1px solid var(--crs-line);
	border-left: 3px solid var(--crs-muted);
	background: var(--crs-paper);
	color: var(--crs-muted);
	font-size: 13.5px;
	line-height: 1.6;
}

.crs-portal .crs-credit-none strong {
	color: var(--crs-ink);
	font-weight: 600;
}

/* the list flag for a settled record, if one is ever shown */
.crs-portal .crs-pcode.is-settled {
	color: var(--crs-muted);
}

/* ------------------------------------------------ Sign in / set password */

.crs-portal .crs-check {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 4px 0 18px;
	color: var(--crs-ink);
	font-size: 14px;
	cursor: pointer;
}

.crs-portal .crs-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	min-width: 16px;
	margin: 0;
	accent-color: var(--crs-forest);
	cursor: pointer;
}

.crs-portal .crs-signup input[type="password"] {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	border: 1px solid var(--crs-line);
	border-radius: var(--crs-radius);
	background: #fcfbf8;
	color: var(--crs-ink);
	font-family: inherit;
	font-size: 14.5px;
}

.crs-portal .crs-signup .crs-warning,
.crs-portal .crs-signup .crs-blank {
	margin-bottom: 18px;
}

.crs-portal .crs-signup-note a {
	color: var(--crs-forest-light);
	font-weight: 600;
	text-decoration: none;
}

.crs-portal .crs-signup-note a:hover {
	color: var(--crs-forest);
	text-decoration: underline;
}

/* ==========================================================================
   AUTH PAGES
   Sign in, set password and reset, in the same dress as the public login:
   navy gradient, the mark held faint behind, a white card on top.
   Deliberately outside .crs-portal — these pages are not the dashboard.
   ========================================================================== */

.crs-auth {
	--crs-auth-logo: 48px;

	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 32px 24px;
	overflow: hidden;
	background: linear-gradient(135deg, #0e1e42 0%, #1e3a8a 52%, #2f55b5 100%);

	/* Outfit, matching the public site rather than the dashboard's Inter —
	   these pages belong to the website, not to the app behind it. */
	font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.5;
	color: #1b2a4a;
}

.crs-auth *,
.crs-auth *::before,
.crs-auth *::after { box-sizing: border-box; }

.crs-auth img.crs-auth__watermark {
	position: absolute;
	left: -80px;
	bottom: -120px;
	width: auto !important;
	height: 520px !important;
	max-width: none;
	max-height: none;
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
}

.crs-auth__card {
	position: relative;
	width: 100%;
	max-width: 440px;
	padding: 38px 40px 30px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 34px 80px -34px rgba(2, 8, 24, 0.65);
}

.crs-auth__brand {
	display: inline-block;
	margin-bottom: 26px;
	text-decoration: none;
}

.crs-auth img.crs-auth__logo {
	display: block;
	height: var(--crs-auth-logo) !important;
	width: auto !important;
	max-width: 100%;
	max-height: none;
	object-fit: contain;
}

.crs-auth .crs-auth__title {
	margin: 0 0 10px;
	padding: 0;
	color: #1b2a4a;
	font-family: inherit;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.crs-auth .crs-auth__sub {
	margin: 0 0 24px;
	color: #5b6478;
	font-size: 15px;
	line-height: 1.6;
}

.crs-auth__field { margin-bottom: 16px; }

.crs-auth__label {
	display: block;
	margin-bottom: 9px;
	color: #5b6478;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.crs-auth input[type="text"],
.crs-auth input[type="password"] {
	width: 100%;
	min-height: 50px;
	padding: 13px 15px;
	border: 1px solid #d9deec;
	border-radius: 3px;
	background: #fcfbf8;
	color: #1b2a4a;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.crs-auth input::placeholder { color: #9aa2b4; }

.crs-auth input:focus {
	outline: none;
	border-color: #2f55b5;
	box-shadow: 0 0 0 3px rgba(47, 85, 181, 0.18);
}

/* password + reveal share one box */
.crs-auth__pw { position: relative; }
.crs-auth__pw input { padding-right: 50px; }

.crs-auth__reveal {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: none;
	color: #8b93a6;
	cursor: pointer;
}

.crs-auth__reveal:hover { color: #1e3a8a; }
.crs-auth__reveal svg { width: 18px; height: 18px; }
.crs-auth__reveal .crs-eye-off { display: none; }
.crs-auth__reveal[aria-pressed="true"] .crs-eye { display: none; }
.crs-auth__reveal[aria-pressed="true"] .crs-eye-off { display: block; }

.crs-auth__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 16px 0 22px;
}

.crs-auth__remember {
	display: flex;
	align-items: center;
	gap: 9px;
	color: #1b2a4a;
	font-size: 14px;
	cursor: pointer;
}

.crs-auth__remember input {
	width: 16px;
	height: 16px;
	min-width: 16px;
	margin: 0;
	accent-color: #1e3a8a;
	cursor: pointer;
}

.crs-auth__link {
	color: #2f55b5;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.crs-auth__link:hover { color: #1e3a8a; text-decoration: underline; }

.crs-auth__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 0 24px;
	border: 0;
	border-radius: 3px;
	background: #1e3a8a;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.08s ease;
}

.crs-auth__submit:hover { background: #2f55b5; color: #fff; }
.crs-auth__submit:active { transform: translateY(1px); }

.crs-auth__note {
	margin: 16px 0 0;
	color: #5b6478;
	font-size: 13.5px;
	line-height: 1.6;
}

.crs-auth__foot {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid #eceff7;
	color: #5b6478;
	font-size: 13px;
	line-height: 1.7;
	text-align: center;
}

.crs-auth__foot a {
	color: #2f55b5;
	font-weight: 600;
	text-decoration: none;
}

.crs-auth__foot a:hover { text-decoration: underline; }

/* the shared notice styles, inside the card */
.crs-auth .crs-warning,
.crs-auth .crs-blank {
	margin: 0 0 18px;
	padding: 13px 15px;
	border-radius: 3px;
	font-size: 13.5px;
	line-height: 1.6;
}

.crs-auth .crs-warning {
	border: 1px solid #f0c3cb;
	background: #fbe6e9;
	color: #8c0d24;
}

.crs-auth .crs-blank {
	border: 1px solid #c3cfee;
	background: #e7ecfa;
	color: #16296b;
}

.crs-auth :focus-visible { outline: 2px solid #2f55b5; outline-offset: 2px; }

@media (max-width: 520px) {
	.crs-auth { --crs-auth-logo: 42px; padding: 24px 16px; }
	.crs-auth__card { padding: 34px 26px 28px; }
	.crs-auth .crs-auth__title { font-size: 24px; }

	.crs-auth img.crs-auth__watermark {
		height: 340px !important;
		left: -60px;
		bottom: -90px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.crs-auth__submit,
	.crs-auth input { transition: none; }
}