/*
Theme Name: UnfoldCRO Child
Theme URI: https://unfoldcro.com
Template: unfoldcro
Author: UnfoldCRO
Author URI: https://unfoldcro.com
Description: Child theme for UnfoldCRO. Put all site-specific customisations (Regenlabs) here so the parent theme stays upgrade-safe.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: unfoldcro-child
*/

/* Add Regenlabs-specific styles below. */

/* About — optional feature image (rendered only when the field is set). */
.rl-about-figure { padding-top: 0; }
.rl-about-figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid rgba(34, 39, 14, .14);
}

/* FAQ — section grouping (Product & quality assurance, Storage & handling, …). */
.rgl-faq-group {
	margin: 38px 0 14px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #8C9560;
	font-weight: 500;
}
.rgl-faq-group:first-of-type { margin-top: 22px; }

/* ---------------------------------------------------------------------------
 * Legal / policy pages (Terms, Privacy, Refund).
 * Long documents: a sticky contents rail beside the prose, serif headings to
 * match the rest of the site, and numbered sections so a clause can be cited.
 * ------------------------------------------------------------------------- */

.rl-legal { padding-top: 56px; }

.rl-legal-grid {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.rl-legal-grid-solo { grid-template-columns: minmax(0, 1fr); }

/* Contents rail ---------------------------------------------------------- */

.rl-legal-toc-in {
	position: sticky;
	top: 90px;                 /* clears the sticky header */
	max-height: calc(100vh - 130px);
	overflow-y: auto;
	padding-right: 8px;
}

.rl-legal-toc .rl-eyebrow { margin-bottom: 14px; }

.rl-legal-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 1px solid rgba(34, 39, 14, .14);
}

.rl-legal-toc li { margin: 0; }

.rl-legal-toc a {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 8px;
	padding: 7px 0 7px 14px;
	margin-left: -1px;
	border-left: 1px solid transparent;
	font: 400 12.5px/1.45 var(--sans);
	color: #6E7845;
	text-decoration: none;
	transition: color .15s, border-color .15s;
}

.rl-legal-toc a:hover,
.rl-legal-toc a:focus-visible {
	color: #22270E;
	border-left-color: #49531E;
}

.rl-legal-toc-n {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: .08em;
	color: #A8B075;
	padding-top: 2px;
}

/* Prose ------------------------------------------------------------------ */

.rl-prose-legal { max-width: 74ch; }

.rl-prose-legal h2 {
	font-family: 'Times New Roman', Times, serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.16;
	letter-spacing: -.015em;
	color: #22270E;
	margin: 52px 0 14px;
	padding-top: 26px;
	border-top: 1px solid rgba(34, 39, 14, .12);
	scroll-margin-top: 92px;   /* anchor lands below the sticky header */
}

.rl-prose-legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.rl-prose-legal h3 {
	font-family: 'Times New Roman', Times, serif;
	font-weight: 400;
	font-size: 21px;
	line-height: 1.25;
	margin: 30px 0 8px;
	scroll-margin-top: 92px;
}

.rl-prose-legal p,
.rl-prose-legal li { font-size: 15px; line-height: 1.8; color: #3C4423; }
.rl-prose-legal p { margin: 0 0 18px; }

.rl-prose-legal ul { list-style: none; margin: 0 0 20px; padding: 0; }
.rl-prose-legal ul li { position: relative; padding-left: 20px; margin-bottom: 12px; }
.rl-prose-legal ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .72em;
	width: 5px;
	height: 5px;
	background: #A8B075;
	border-radius: 50%;
}

.rl-prose-legal ol { margin: 0 0 20px; padding-left: 22px; }
.rl-prose-legal ol li { margin-bottom: 12px; }

/* Clause lead-ins ("Age Requirements:") carry the emphasis. */
.rl-prose-legal li > strong:first-child,
.rl-prose-legal p > strong:first-child { color: #22270E; font-weight: 600; }

.rl-prose-legal a { color: #49531E; text-decoration: underline; text-underline-offset: 2px; }
.rl-prose-legal a:hover { color: #333A14; }

@media (max-width: 1000px) {
	.rl-legal { padding-top: 36px; }
	.rl-legal-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.rl-legal-toc-in {
		position: static;
		max-height: none;
		overflow: visible;
		border: 1px solid rgba(34, 39, 14, .14);
		padding: 18px 20px;
		background: #fff;
	}
	.rl-prose-legal h2 { font-size: 25px; margin-top: 40px; }
}

@media (max-width: 560px) {
	.rl-prose-legal h2 { font-size: 22px; }
	.rl-prose-legal p, .rl-prose-legal li { font-size: 14.5px; }
}

/* ---------------------------------------------------------------------------
 * Reviews page — every published review, with score, distribution and filter.
 * ------------------------------------------------------------------------- */

.rl-rev-top {
	display: grid;
	/* The score column sizes to its own content (the 4.6 sits beside the stars),
	   the distribution takes the rest, the CTA stays intrinsic. */
	grid-template-columns: auto minmax(320px, 1fr) auto;
	gap: 56px;
	align-items: center;
	padding: 0 0 34px;
	border-bottom: 1px solid rgba(34, 39, 14, .14);
	margin-bottom: 34px;
}

.rl-rev-score { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rl-rev-score-v {
	font-family: 'Times New Roman', Times, serif;
	font-size: 60px;
	line-height: 1;
	color: #22270E;
	letter-spacing: -.02em;
}
.rl-rev-stars { display: inline-flex; gap: 2px; color: #49531E; margin: 10px 0 6px; }
.rl-rev-score-l { font-size: 12.5px; color: #6E7845; }

.rl-rev-dist {
	display: grid;
	gap: 5px;
	justify-self: stretch;   /* was shrinking to content, leaving 6px-wide bars */
	width: 100%;
	max-width: 560px;
}
.rl-rev-dist .rl-eyebrow { margin-bottom: 8px; }

.rl-rev-bar {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr) 34px;
	gap: 12px;
	align-items: center;
	text-decoration: none;
	padding: 3px 6px;
	border-radius:0;
	transition: background .15s;
}
.rl-rev-bar:hover { background: #FAFAF4; }
.rl-rev-bar.is-on { background: #EFF1E4; }

.rl-rev-bar-n { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: #6E7845; }
.rl-rev-bar-track { height: 8px; min-width: 160px; background: rgba(34, 39, 14, .1); border-radius:0; overflow: hidden; }
.rl-rev-bar-fill { display: block; height: 100%; background: #49531E; }
.rl-rev-bar-c { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: #8C9560; text-align: right; }

.rl-rev-filtered { font-size: 13px; color: #6E7845; margin: 0 0 22px; }
.rl-rev-filtered a { color: #49531E; text-decoration: underline; margin-left: 8px; }

.rl-rev-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.rl-rev-card {
	background: #fff;
	border: 1px solid rgba(34, 39, 14, .12);
	padding: 26px 28px 24px;
	display: flex;
	flex-direction: column;
}

.rl-rev-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.rl-rev-date { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; color: #A8B075; }

.rl-rev-quote {
	font-family: 'Times New Roman', Times, serif;
	font-size: 19px;
	line-height: 1.45;
	margin: 0 0 20px;
	color: #22270E;
	text-wrap: pretty;
}

.rl-rev-foot {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid rgba(34, 39, 14, .1);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}
.rl-rev-name { font-size: 12.5px; color: #4A5227; }
.rl-rev-loc {
	display: block;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #A8B075;
	margin-top: 3px;
}
.rl-rev-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 10.5px;
	letter-spacing: .04em;
	color: #49531E;
	white-space: nowrap;
}
.rl-rev-product {
	margin-top: 14px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6E7845;
	text-decoration: none;
	border-bottom: 1px solid rgba(110, 120, 69, .3);
	align-self: flex-start;
}
.rl-rev-product:hover { color: #22270E; border-bottom-color: #22270E; }

@media (max-width: 1000px) {
	.rl-rev-top { grid-template-columns: 1fr; gap: 26px; text-align: left; }
	.rl-rev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.rl-rev-grid { grid-template-columns: 1fr; }
	.rl-rev-score-v { font-size: 46px; }
}

/* Reviews — headline, role and the lot the review is tied to. */
.rl-rev-title {
	font-family: 'Times New Roman', Times, serif;
	font-weight: 400;
	font-size: 19px;
	line-height: 1.3;
	color: #22270E;
	margin: 0 0 10px;
}
.rl-rev-title + .rl-rev-quote { font-size: 14px; line-height: 1.7; color: #4A5227; font-family: inherit; }
.rl-rev-role { display: block; font-size: 11.5px; color: #7A8352; margin-top: 2px; }
.rl-rev-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.rl-rev-lot {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: .08em;
	color: #49531E;
	text-decoration: none;
}
a.rl-rev-lot { border-bottom: 1px solid rgba(73, 83, 30, .3); }
a.rl-rev-lot:hover { color: #22270E; border-bottom-color: #22270E; }
/*
 * Every note card reads the same regardless of whether the review carries a
 * title. The title used to be the serif headline and demote the quote to body
 * copy, so cards with a title and cards without were two different layouts
 * side by side in the carousel. The quote is always the serif lead now, and a
 * title, when there is one, sits above it as a mono label.
 */
.rlh-note-title {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 9.5px;
	line-height: 1.4;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin: 0 0 10px;
	color: #8C9560;
}

/* About — the mission statement sits under its own heading, per the document. */
.rl-about-missionwrap { text-align: center; margin-bottom: 4px; }
.rl-about-missionwrap .rl-eyebrow { margin-bottom: 14px; }
.rl-about-mission {
	font-family: 'Times New Roman', Times, serif;
	font-size: 30px;
	line-height: 1.32;
	letter-spacing: -.015em;
	color: #22270E;
	max-width: 62ch;
	margin: 0 auto 48px;
	text-wrap: pretty;
}
@media (max-width: 1000px) { .rl-about-mission { font-size: 25px; max-width: 46ch; } }
@media (max-width: 560px)  { .rl-about-mission { font-size: 21px; } }

/* Product — sold out: sizes stay visible so the range is still legible, but
   nothing is purchasable. */
.rl-btn-soldout {
	background: #EFEFE7;
	color: #7A8352;
	border: 1px solid rgba(34, 39, 14, .14);
	cursor: not-allowed;
	flex: 1;
	padding: 15px 26px;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
}
.rl-buy.is-soldout .rl-size { opacity: .55; }
.rl-buy.is-soldout .rl-pdp-addon { opacity: .55; pointer-events: none; }

/* FAQ / Contact now open with the same hero band as every other page, so the
   inner container drops the H1 it used to carry and takes the site measure
   (.rgl-page is a 820px centred column, which left the body floating in the
   middle while the hero above it started at the header's edge). */
.rgl-page.rgl-page-hasHero {
	max-width: var(--wrap, clamp(1280px, calc(100% - 56px), 1720px));
	margin: 0 auto;
	padding: 56px 28px 8px;
}
.rgl-page.rgl-page-hasHero > h1:first-child { display: none; }

@media (max-width: 560px) {
	.rgl-page.rgl-page-hasHero { padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------------------------
 * About — quality index card (the visual the About document asks for).
 * ------------------------------------------------------------------------- */

.rl-qi {
	border: 1px solid rgba(34, 39, 14, .14);
	background: #fff;
	border-radius:0;
	padding: 26px 30px 6px;
	margin: 40px 0 0;
}

.rl-qi-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

.rl-qi-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #6E7845;
}
.rl-qi-rule { width: 26px; height: 1px; background: #49531E; display: inline-block; }

.rl-qi-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #EFF3E2;
	color: #49531E;
	border-radius:0;
	padding: 5px 12px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: .14em;
}

.rl-qi-body {
	display: grid;
	grid-template-columns: 148px minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	padding: 26px 0 30px;
}

.rl-qi-dial { position: relative; width: 148px; height: 148px; }
.rl-qi-dial svg { width: 100%; height: 100%; display: block; }
.rl-qi-dial-t {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
}
/* The ring's inner hole is ~84px, so both lines have to sit inside that. */
.rl-qi-dial-v { font-family: 'Times New Roman', Times, serif; font-size: 29px; line-height: 1; color: #22270E; }
.rl-qi-dial-c {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 7.5px;
	letter-spacing: .10em;
	line-height: 1.35;
	color: #8C9560;
	max-width: 82px;
	text-align: center;
}

.rl-qi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rl-qi-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 15px;
	color: #22270E;
}
.rl-qi-ic {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius:0;
	background: #F4F3EC;
	color: #49531E;
	display: grid;
	place-items: center;
}

.rl-qi-stats {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	border-top: 1px solid rgba(34, 39, 14, .12);
	padding: 22px 0 24px;
}
.rl-qi-stat-v { font-family: 'Times New Roman', Times, serif; font-size: 27px; line-height: 1; color: #22270E; }
.rl-qi-stat-l {
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 9px;
	letter-spacing: .16em;
	color: #8C9560;
	margin-top: 8px;
}

@media (max-width: 680px) {
	.rl-qi { padding: 22px 20px 4px; }
	.rl-qi-body { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: left; }
	.rl-qi-list { width: 100%; }
	.rl-qi-stats { grid-auto-flow: row; gap: 18px; text-align: center; }
}

/* About — quality index paired with the lead feature, then a 2x2 grid. */
.rl-about-pair {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	margin-top: 8px;
}
.rl-about-pair .rl-qi { margin-top: 0; }

.rl-about-lead-feat h3 {
	font-family: 'Times New Roman', Times, serif;
	font-weight: 400;
	font-size: 34px;
	line-height: 1.14;
	letter-spacing: -.015em;
	color: #22270E;
	margin: 0 0 16px;
}
.rl-about-lead-feat p {
	font-size: 15.5px;
	line-height: 1.75;
	color: #4A5227;
	margin: 0;
	text-wrap: pretty;
}

.rl-feat-grid-2x2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 44px;
}

/* The research-only notice is styled as a plain fourth card. */

@media (max-width: 1000px) {
	.rl-about-pair { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.rl-about-lead-feat h3 { font-size: 27px; }
	.rl-feat-grid-2x2 { margin-top: 30px; }
}
@media (max-width: 680px) {
	.rl-feat-grid-2x2 { grid-template-columns: minmax(0, 1fr); }
}