/* ==================================================================
   Falcon Threads & Data — front-end styles
   Colours and type come from Avada CSS variables so everything follows
   the rebrand. Only loaded on single product and account pages.
   ================================================================== */

/* ---------- theme tokens ----------
   Typography 4 is Avada's body text. Every block below inherits from these
   two rules rather than hardcoding sizes and colours, so changing the theme
   changes the plugin with it. Fallbacks only apply if Avada is absent. */
.falcon-color-chart,
.falcon-size-table,
.falcon-unique-colors,
.falcon-stats,
.falcon-faq,
.falcon-wtu,
.falcon-formats,
.falcon-reviews {
	--falcon-text: var(--awb-color7, #04142B);
	--falcon-muted: var(--awb-color6, #7a808c);
	/* Deliberately NOT a theme colour: Avada's color3 is a light background tone in
	   most palettes, so mapping the hairline to it made every divider invisible. */
	--falcon-line: var(--falcon-hairline, #E4E0D8);
	--falcon-accent: var(--awb-color4, #04142B);

	font-family: var(--awb-typography4-font-family, inherit);
	font-size: var(--awb-typography4-font-size, 15px);
	font-weight: var(--awb-typography4-font-weight, 400);
	line-height: var(--awb-typography4-line-height, 1.7);
	letter-spacing: var(--awb-typography4-letter-spacing, normal);
	color: var(--falcon-text, #04142B);
}

/* ---------- shared tables ---------- */
.falcon-color-chart table,
.falcon-size-table table {
	width: 100%;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
	font-size: var(--awb-typography4-font-size, 15px);
}

.falcon-color-chart th,
.falcon-size-table th {
	background: var(--falcon-text, #04142B);
	color: #fff;
	font-family: var(--awb-typography4-font-family, inherit);
	font-size: var(--awb-typography4-font-size, 15px);
	padding: 10px;
	text-align: center;
	vertical-align: middle;
}

.falcon-color-chart td,
.falcon-size-table td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--falcon-line, #E4E0D8);
	color: var(--falcon-text, #04142B);
	line-height: var(--awb-typography4-line-height, 1.7);
	text-align: center;
	vertical-align: middle;
}

/* ---------- colour chart ---------- */
.fcc-cc,
.fcc-code {
	font-family: monospace;
	white-space: nowrap;
}

.fcc-sw {
	display: inline-block;
	width: 26px;
	height: 26px;
	border: 1px solid var(--falcon-line, #E4E0D8);
	margin: 0 auto;
	vertical-align: middle;
}

.fcc-name {
	/* keep long thread names to two lines instead of stacking word-per-line */
	min-width: 8em;
}

/* ---------- size table ---------- */
.fst-n {
	font-family: monospace;
	color: var(--falcon-muted, #7a808c);
}

.fst-dim,
.fst-num {
	/* stops "4.6 × 4.8" breaking across three lines on narrow screens */
	white-space: nowrap;
}

.fst-num {
	font-family: monospace;
}

/* ---------- stats grid (2 x 3) ---------- */
.falcon-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 32px;
}

.fstat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid var(--falcon-line, #E4E0D8);
}

.falcon-stats .fstat-i {
	flex: 0 0 auto;
	line-height: 1;
	/* size and colour are injected inline from the Stat Icons tab */
}

.fstat-label {
	flex: 1 1 auto;
	color: var(--falcon-muted, #7a808c);
	font-family: var(--awb-typography4-font-family, inherit);
	font-size: var(--awb-typography4-font-size, 15px);
}

.fstat-num {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 18px;
	color: var(--falcon-accent, #003984);
}

/* ---------- FAQ ---------- */
.faq-item {
	padding: 18px 0;
	border-bottom: 1px solid var(--falcon-line, #E4E0D8);
}

.faq-q {
	margin: 0 0 6px;
	font-weight: 700;
	color: var(--falcon-text, #04142B);
	font-family: var(--awb-typography4-font-family, inherit);
	font-size: var(--awb-typography4-font-size, 15px);
	line-height: var(--awb-typography4-line-height, 1.7);
}

.faq-a {
	margin: 0;
	color: var(--falcon-text, #04142B);
	font-family: var(--awb-typography4-font-family, inherit);
	font-size: var(--awb-typography4-font-size, 15px);
	line-height: var(--awb-typography4-line-height, 1.7);
}

/* ---------- where to use ---------- */
.falcon-wtu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.falcon-wtu li {
	padding: 10px 0;
	border-bottom: 1px solid var(--falcon-line, #E4E0D8);
	color: var(--falcon-text, #04142B);
	font-family: var(--awb-typography4-font-family, inherit);
	font-size: var(--awb-typography4-font-size, 15px);
	line-height: var(--awb-typography4-line-height, 1.7);
	line-height: var(--awb-typography4-line-height, 1.7);
}

/* ---------- format chips ---------- */
.falcon-formats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ffmt {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid #D6E0EE;
	background: #F5F9FF;
	border-radius: 3px;
	font-family: monospace;
	font-size: 13px;
	color: var(--falcon-accent, #003984);
	white-space: nowrap;
}

/* ---------- reviews ---------- */
.falcon-rev-summary {
	display: flex;
	gap: 32px;
	align-items: center;
	background: var(--falcon-text, #04142B);
	color: #fff;
	padding: 26px 30px;
}

.frv-avg {
	flex: 0 0 auto;
	width: 150px;
	text-align: center;
	color: #fff;
	padding-right: 26px;
	border-right: 1px solid rgba(255, 255, 255, .12);
	margin-right: 30px;
}

.frv-num {
	display: block;
	font-size: 52px;
	font-weight: 800;
	line-height: 1;
}

.frv-avg .fstars {
	color: #F5A623;
	/* must stay a flex ROW — `display:block` here beat the base .fstars rule and
	   made every .fstar (a block-level svg) stack vertically. */
	display: inline-flex;
	justify-content: center;
	gap: 3px;
	margin: 10px 0 6px;
}

.frv-count {
	display: block;
	font-size: 13px;
	color: #9AA7BD;
	white-space: nowrap;
}

.frv-bars {
	flex: 1 1 auto;
	min-width: 0;
}

.frv-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 7px 0;
	font-size: 12px;
}

.frv-s {
	flex: 0 0 12px;
	color: #9AA7BD;
	text-align: right;
}

.frv-track {
	flex: 1 1 auto;
	height: 9px;
	background: #26364F;
	border-radius: 2px;
	overflow: hidden;
}

.frv-fill {
	display: block;
	height: 100%;
	background: #F5A623;
}

.frv-pct {
	flex: 0 0 34px;
	color: #9AA7BD;
	text-align: right;
}

.frv-cards {
	display: flex;
	gap: 22px;
	margin-top: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;              /* arrows and swipe do the job */
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	padding-bottom: 2px;                /* room for the focus ring */
}

.frv-cards::-webkit-scrollbar {
	display: none;
}

.frv-cards:focus-visible {
	outline: 2px solid var(--awb-color4, #003984);
	outline-offset: 3px;
}

.frv-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--falcon-line, #E4E0D8);
	padding: 0;                               /* the photo goes edge to edge */
	overflow: hidden;
	background: #fff;
	flex: 0 0 calc((100% - 44px) / 3);
	scroll-snap-align: start;
	cursor: pointer;
}

/* --- photo --- */

.frv-media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--falcon-panel, #FBFAF7);
}

.frv-media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Older browsers without aspect-ratio would let the image set its own height
   and the row would go ragged; pin it so every card still lines up. */
@supports not (aspect-ratio: 1 / 1) {
	.frv-media {
		height: 0;
		padding-bottom: 100%;
	}

	.frv-media-img {
		position: absolute;
		inset: 0;
	}
}

/* --- everything under the photo --- */

.frv-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;                           /* fills the card, so the link sits at the foot */
	padding: 16px 18px 18px;
	min-height: 0;
}

.frv-meta {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 10px;
}

.frv-av {
	flex: none;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: var(--falcon-accent, var(--awb-color4, #003984));
	border-radius: 50%;
}

.frv-id {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.frv-who {
	margin: 0;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	color: var(--falcon-text, #04142B);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.frv-date {
	margin: 0;
	font-size: 12px;
	line-height: 1.3;
	color: var(--falcon-muted, #6b7280);
}

/* Rating sits at the right of the same row, so every card's text starts level. */
.frv-meta .fstars {
	flex: none;
	color: #F5A623;
}

.frv-card:focus-visible {
	outline: 2px solid var(--falcon-accent, var(--awb-color4, #003984));
	outline-offset: 2px;
}

.frv-text {
	margin: 0 0 14px;
	color: var(--falcon-text, #04142B);
	font-family: var(--awb-typography4-font-family, inherit);
	font-size: 14.5px;
	line-height: 1.6;

	/* PHP already trims to ~28 words; this clamps what survives to a fixed
	   number of LINES, which is what actually keeps the row even — word count
	   alone still varies in height once the words differ in length. */
	display: -webkit-box;
	-webkit-line-clamp: var(--falcon-rev-lines, 4);
	line-clamp: var(--falcon-rev-lines, 4);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.frv-who {
	margin: 0;
	font-weight: 700;
	color: var(--falcon-text, #04142B);
}

.frv-date {
	margin: 4px 0 0;
	font-family: monospace;
	font-size: 12px;
	color: var(--falcon-muted, #7a808c);
}

.fstars {
	display: inline-flex;
	gap: 2px;
	line-height: 1;
}

.fstar {
	display: block;
}

/* ---------- PDF button ---------- */
/* Legacy wrapper, kept so any old markup still lays out correctly. */
.falcon-pdf-form {
	margin: 0;
}

/* The chart's head bar: caption on the left, print button on the right, sitting
   directly above the table and sharing its width. */
.fcc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 0 0 14px;
}

.fcc-meta {
	margin: 0;
	flex: 1 1 auto;
	text-align: left;
	font-family: var(--awb-typography4-font-family, inherit);
	font-size: var(--awb-typography4-font-size, 15px);
	line-height: var(--awb-typography4-line-height, 1.7);
	color: var(--falcon-text, #04142B);
	opacity: .85;
}

.fcc-actions {
	flex: 0 0 auto;
	margin-left: auto;
}

.falcon-pdf-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: var(--falcon-btn-pad, 12px 22px);
	background: var(--falcon-btn-bg, var(--awb-color4, #003984));
	color: var(--falcon-btn-text, #fff);
	border: 0;
	border-radius: var(--falcon-btn-radius, 3px);
	font-family: var(--awb-typography4-font-family, inherit);
	font-weight: var(--falcon-btn-weight, 600);
	font-size: var(--falcon-btn-size, 15px);
	line-height: 1.2;
	cursor: pointer;
	transition: background .2s ease;
}

.falcon-pdf-btn.falcon-pdf-btn:hover,
.falcon-pdf-btn.falcon-pdf-btn:focus {
	background: var(--falcon-btn-bg-h, var(--awb-color5, #04142b)) !important;
	color: var(--falcon-btn-text, #fff) !important;
	border: 0;
}

.falcon-pdf-i {
	font-size: 18px;
	line-height: 1;
}

.falcon-pdf-btn.is-loading {
	opacity: .6;
	pointer-events: none;
}

/* Compact variant used in the My Account -> Downloads column. */
/* ==================================================================
   Mobile
   ================================================================== */

@media (max-width: 900px) {
	.frv-cards {
		gap: 14px;
	}

	.frv-card {
		flex-basis: calc(100% - 36px);   /* peek the next card, so it reads as swipeable */
	}

	.falcon-rev-summary {
		flex-direction: column;
		gap: 20px;
		align-items: stretch;
	}
}

@media (max-width: 768px) {
	/* stats collapse to one column — this also removes the overlap the
	   three-across flex layout caused against the size table header */
	.falcon-stats {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

@media (max-width: 600px) {
	.falcon-color-chart table,
	.falcon-size-table table {
		font-size: 13px;
	}

	.falcon-color-chart th,
	.falcon-size-table th {
		font-size: 12px;
		padding: 8px 4px;
	}

	.falcon-color-chart td,
	.falcon-size-table td {
		padding: 8px 4px;
	}

	.fcc-sw {
		width: 20px;
		height: 20px;
	}

	.fcc-name {
		min-width: 0;
	}

	.fst-dim,
	.fst-num {
		font-size: 12px;
	}
}

/* ---------- store-wide reviews ---------- */
.frv-for {
	display: block;
	margin: auto 0 0;                         /* pushed to the foot of the body */
	padding-top: 12px;
	border-top: 1px solid var(--awb-color13, #e2e2e2);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	color: var(--falcon-link, var(--awb-color4, #003984));
	transition: color .15s ease;
	position: relative;
	z-index: 1;                               /* a real link, not the card's click */
}

.frv-for:hover,
.frv-for:focus-visible {
	color: var(--falcon-link-h, var(--awb-color5, #ffa42d));
	text-decoration: underline;
}

.falcon-reviews-empty {
	margin: 0;
	opacity: .7;
}

@media (max-width: 782px) {
	.fcc-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

/* ==================================================================
   Unique colours — swatch card grid (mirrors the PDF block)
   ================================================================== */
.falcon-unique-colors .fuc-grid {
	display: grid;
	grid-template-columns: repeat(var(--fuc-cols, 4), minmax(0, 1fr));
	gap: 12px;
}

.fuc-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--falcon-line, #E4E0D8);
	border-radius: 2px;
	background: #fff;
}

.fuc-sw {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border: 1px solid var(--falcon-line, #E4E0D8);
	border-radius: 2px;
}

.fuc-t {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.35;
}

.fuc-code {
	font-family: monospace;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--falcon-accent, #003984);
}

.fuc-name {
	font-family: var(--awb-typography4-font-family, inherit);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--falcon-text, #04142B);
	overflow-wrap: anywhere;
}

@media (max-width: 1000px) {
	.falcon-unique-colors .fuc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.falcon-unique-colors .fuc-grid {
		grid-template-columns: 1fr;
	}
}

/* ==================================================================
   Write a review
   ================================================================== */
.frv-form-wrap {
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var(--falcon-line, #E4E0D8);
}

.frv-form-h {
	margin: 0 0 18px;
	font-family: var(--awb-typography4-font-family, inherit);
	font-size: 18px;
	font-weight: 700;
	color: var(--falcon-text, #04142B);
}

.frv-f {
	margin-bottom: 18px;
}

.frv-lab {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--falcon-text, #04142B);
}

.frv-lab em {
	font-style: normal;
	color: #C0392B;
}

.frv-form textarea,
.frv-form input[type="text"],
.frv-form input[type="email"] {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--falcon-line, #E4E0D8);
	border-radius: 3px;
	background: #fff;
	font-family: var(--awb-typography4-font-family, inherit);
	font-size: var(--awb-typography4-font-size, 15px);
	line-height: var(--awb-typography4-line-height, 1.7);
	color: var(--falcon-text, #04142B);
}

.frv-form textarea:focus,
.frv-form input:focus {
	outline: none;
	border-color: var(--awb-color4, #003984);
}

.frv-row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

/* Star input. The radios are printed 5→1 so a plain sibling selector can light up
   every star to the LEFT of the hovered one, with no JavaScript involved. */
.frv-rate {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
}

.frv-rate input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.frv-rate label {
	font-size: 30px;
	line-height: 1;
	color: #D9D5CC;
	cursor: pointer;
	transition: color .15s ease;
}

.frv-rate label:hover,
.frv-rate label:hover ~ label,
.frv-rate input:checked ~ label {
	color: #F5A623;
}

.frv-rate input:focus-visible + label {
	outline: 2px solid var(--awb-color4, #003984);
	outline-offset: 2px;
}

.frv-priv {
	margin: 0 0 18px;
	font-size: 13px;
	color: var(--falcon-muted, #7a808c);
}

.frv-submit {
	display: inline-flex;
	align-items: center;
	padding: 12px 26px;
	background: var(--awb-color4, #003984);
	color: #fff;
	border: 0;
	border-radius: 3px;
	font-family: var(--awb-typography4-font-family, inherit);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background .2s ease;
}

.frv-submit.frv-submit:hover,
.frv-submit.frv-submit:focus {
	background: var(--awb-color7, #04142b) !important;
	color: #fff !important;
}

.frv-note {
	margin: 0 0 8px;
	padding: 12px 15px;
	border-left: 3px solid var(--falcon-line, #E4E0D8);
	background: #FBFAF7;
	color: var(--falcon-text, #04142B);
}

.frv-note--ok {
	border-left-color: #4A9D5F;
}

@media (max-width: 600px) {
	.frv-row2 {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ==================================================================
   Thread conversion
   ================================================================== */
.falcon-thread-conversion,
.falcon-print-options {
	margin: 0;
}

.falcon-ctl-standalone {
	margin: 0 0 22px;
}

.fcc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.ftc-toggle::after,
.fpo-toggle::after {
	content: "▾";
	font-size: 11px;
	margin-left: 2px;
}

.ftc-toggle[aria-expanded="true"]::after,
.fpo-toggle[aria-expanded="true"]::after {
	content: "▴";
}

.ftc-panel {
	margin: 14px 0 20px;
	padding: 20px;
	border: 1px solid var(--falcon-line, #E4E0D8);
	border-radius: 3px;
	background: var(--falcon-panel, #FBFAF7);
}

.ftc-intro {
	margin: 0 0 14px;
	font-size: 14.5px;
	color: var(--falcon-text, #04142B);
}

.ftc-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.ftc-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 13px;
	border: 1px solid var(--falcon-line, #E4E0D8);
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
}

.ftc-opt:has(input:checked) {
	border-color: var(--awb-color4, #003984);
	box-shadow: inset 0 0 0 1px var(--awb-color4, #003984);
}

.ftc-opt:has(input:disabled) {
	opacity: .45;
	cursor: not-allowed;
}

.ftc-nm {
	font-weight: 600;
	font-size: 13.5px;
}

.ftc-cov {
	font-size: 12px;
	color: var(--falcon-muted, #7a808c);
}

.ftc-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.ftc-apply {
	padding: 10px 20px;
	background: var(--awb-color4, #003984);
	color: #fff;
	border: 0;
	border-radius: 3px;
	font-family: var(--awb-typography4-font-family, inherit);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

.ftc-apply:hover {
	background: var(--awb-color7, #04142b);
}

.ftc-clear {
	padding: 10px 16px;
	background: none;
	border: 0;
	color: var(--falcon-muted, #7a808c);
	font-family: var(--awb-typography4-font-family, inherit);
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

.ftc-msg {
	font-size: 13px;
	color: var(--falcon-muted, #7a808c);
}

.ftc-foot,
.ftc-note,
.ftc-saved {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--falcon-muted, #7a808c);
}

.ftc-saved {
	color: #2E7D46;
	font-weight: 600;
}

.ftc-approx {
	color: var(--awb-color4, #003984);
	font-weight: 700;
	cursor: help;
}

/* converted columns */
.falcon-color-chart th.fcc-conv,
.falcon-color-chart td.fcc-conv {
	white-space: nowrap;
}

.fcc-blank {
	background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0, 0, 0, .04) 4px, rgba(0, 0, 0, .04) 8px);
}

/* per-brand swatch blocks */
.fuc-conv {
	margin-top: 26px;
}

.fuc-brandhead {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--falcon-text, #04142B);
}

.fuc-uses {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--falcon-muted, #7a808c);
}

/* Seven columns will not fit a phone. Scroll the table rather than crushing it. */
@media (max-width: 900px) {
	/* Three buttons will not sit on one line on a phone. Stack them full width,
	   in the order they appear, rather than letting them wrap raggedly. */
	.fcc-head {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.fcc-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		margin-left: 0;
	}

	.fcc-actions .falcon-pdf-btn {
		width: 100%;
		justify-content: center;
	}

	/* Scroll the table, not the block. The caption and footnote sit outside
	   .falcon-tscroll, so they stay put while the table moves under them. */
	.falcon-tscroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	.falcon-color-chart .falcon-tscroll table {
		min-width: 560px;
	}

	.ftc-opt {
		flex: 1 1 100%;
	}
}

/* my charts list */
.falcon-my-charts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fmc-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--falcon-line, #E4E0D8);
}

.fmc-t {
	font-weight: 600;
	color: var(--falcon-text, #04142B);
}

/* ==================================================================
   Print & display options
   ================================================================== */
.falcon-print-options {
	margin: 0 0 22px;
}

.fpo-panel[hidden],
.ftc-panel[hidden] {
	display: none !important;
}

.fpo-panel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 14px 0 20px;
	padding: 16px;
	border: 1px solid var(--falcon-line, #E4E0D8);
	border-radius: 3px;
	background: var(--falcon-panel, #FBFAF7);
}

/* Group labels span the full width so the pairs below them read as a set. */
.fpo-group {
	grid-column: 1 / -1;
}

.fpo-paper {
	grid-column: 1 / -1;
}

.fpo-opt {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 9px 11px;
	border: 1px solid var(--falcon-line, #E4E0D8);
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
}

.fpo-opt:has(input:checked) {
	border-color: var(--awb-color4, #003984);
	box-shadow: inset 0 0 0 1px var(--awb-color4, #003984);
}

.fpo-opt input {
	margin-top: 2px;
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.fpo-t {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fpo-nm {
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.3;
	color: var(--falcon-text, #04142B);
}

.fpo-d {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--falcon-muted, #7a808c);
}

/* ==================================================================
   Converted card state
   ================================================================== */
.fuc-brandbadge {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--falcon-accent, #003984);
}

.fuc-card.fuc-converted {
	border-color: var(--falcon-accent, #003984);
}

.fpo-panel--pref {
	padding: 0;
	border: 0;
	background: none;
	margin-bottom: 18px;
}


/* ---------- print options: groups, sections, paper ---------- */
.fpo-group {
	margin: 6px 0 2px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--falcon-muted, #7a808c);
}

.fpo-opt--sec .fpo-nm {
	font-weight: 600;
}

.fpo-paper {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fpo-radio {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border: 1px solid var(--falcon-line, #E4E0D8);
	border-radius: 3px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: var(--falcon-text, #04142B);
	cursor: pointer;
}

.fpo-radio:has(input:checked) {
	border-color: var(--falcon-accent, #003984);
	box-shadow: inset 0 0 0 1px var(--falcon-accent, #003984);
}

.fpo-radio input {
	width: 15px;
	height: 15px;
	margin: 0;
}

.fpo-paper--pref {
	margin-bottom: 18px;
}

@media (max-width: 700px) {
	.fpo-panel {
		grid-template-columns: 1fr;
	}

	.fpo-radio {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------------------------------
   Thread conversion — compact brand picker (v3.16.1)

   Fourteen brands, so every pixel of chip counts. One line each: checkbox,
   name, coverage, and a badge ONLY on the two brands whose numbers come from a
   manufacturer's chart. Badging the other twelve would be noise — the tilde on
   each converted code and the footnote already say they are colour matches.

   No max-height and no overflow here on purpose. An earlier build capped the
   panel and let it scroll; that hid the Convert button behind a scrollbar and,
   because setting overflow on one axis forces the other to auto, produced a
   stray horizontal scrollbar too. Chips wrap instead.
   --------------------------------------------------------------------------- */

.ftc-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
	max-height: none;
	overflow: visible;
}

.ftc-opt {
	flex: 0 1 auto;              /* shrink to the label, do not stretch */
	flex-wrap: nowrap;
	align-items: center;
	gap: 7px;
	padding: 5px 10px 5px 8px;
	line-height: 1.25;
	white-space: nowrap;
}

.ftc-opt > input {
	flex: none;
	margin: 0;
}

.ftc-nm {
	font-size: 12.5px;
	font-weight: 600;
}

.ftc-cov {
	font-size: 11px;
	font-variant-numeric: tabular-nums;   /* 7/7 and 11/12 stay the same width */
	color: var(--falcon-muted, #7a808c);
}

/* Only on Isacord and Sulky. Full wording is in the chip's title attribute. */
.ftc-basis {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 2px 5px;
	border-radius: 2px;
	color: var(--awb-color4, #003984);
	background: #EDF2FA;                  /* not the panel token — panel is white */
	border: 1px solid #C7D8EE;
}

/* Overrides the .ftc-opt { flex: 1 1 100% } rule further up. Full-width chips
   were readable at three brands; at fourteen they are a phone-length list. */
@media (max-width: 900px) {
	.ftc-opt {
		flex: 0 1 auto;
		padding: 5px 8px;
	}

	.ftc-nm {
		font-size: 12px;
	}
}

/* ---------------------------------------------------------------------------
   Thread conversion — panel surface and action spacing (v3.16.2)
   --------------------------------------------------------------------------- */

/* The page behind these panels is warm cream, and --falcon-panel is a second,
   near-identical cream, so the box read as a smudge rather than a surface.
   Plain white separates it cleanly. Print options gets the same treatment so
   the two panels behind the same button row stay consistent. */
.ftc-panel,
.fpo-panel {
	background: #fff;
}

/* Convert / Reset had the footnote crowding it from below. */
.ftc-actions {
	margin-bottom: 8px;
}

.ftc-foot {
	margin-top: 16px;
}

/* ---------------------------------------------------------------------------
   Review photos (v3.17)

   Thumbnails sit top-right of a card, level with the stars. A review with no
   photos renders no strip at all — not an empty one — so text-only cards look
   exactly as they did before and nothing reserves space for an image that
   isn't coming.
   --------------------------------------------------------------------------- */

/* --- review modal ---------------------------------------------------------

   Opened by the photo OR the card, because a card shows a trimmed preview and
   the thing a reader wants next is the rest of the review, not just a bigger
   photo. Text left, photo right; a review with no photo gets a single pane.
   -------------------------------------------------------------------------- */

.frv-card {
	cursor: pointer;
}

.frv-card:focus-visible {
	outline: 2px solid var(--falcon-accent, var(--awb-color4, #003984));
	outline-offset: 2px;
}

/* The product link stays a link — clicking it goes to the product, not the modal. */
.frv-card .frv-for {
	position: relative;
	z-index: 1;
}

/* The script moves this to <body> on load so it sits in the ROOT stacking
   context. Left inside the reviews block, any Avada ancestor with a transform
   traps it and the footer paints straight over the top. The z-index below only
   works because of that move. */
.frv-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(9, 18, 35, .82);
}

/* display:flex beats the plain hidden attribute, so state it explicitly. */
.frv-modal[hidden] {
	display: none;
}

.frv-modal__box {
	position: relative;
	display: flex;
	align-items: stretch;
	width: min(980px, 100%);
	max-height: min(760px, 90vh);
	overflow: hidden;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}

.frv-modal__side {
	flex: 0 0 320px;
	display: flex;
	flex-direction: column;
	padding: 24px;
	overflow-y: auto;
}

.frv-modal__img {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--falcon-panel, #FBFAF7);
}

.frv-modal__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Single pane when the review has no photo. */
.frv-modal__img[hidden] + .frv-modal__side,
.frv-modal__box:has(.frv-modal__img[hidden]) .frv-modal__side {
	flex: 1 1 auto;
}

.frv-modal__x {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 2;
	width: 36px;
	height: 36px;
	font-size: 26px;
	line-height: 1;
	color: var(--falcon-text, #04142B);
	background: rgba(255, 255, 255, .9);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.frv-modal__x:focus-visible {
	outline: 2px solid var(--falcon-accent, var(--awb-color4, #003984));
	outline-offset: 2px;
}

/* --- the review itself --- */

.frv-m-who {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.frv-m-av {
	flex: none;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	background: var(--falcon-accent, var(--awb-color4, #003984));
	border-radius: 50%;
}

.frv-m-id {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.frv-m-name {
	font-weight: 700;
	line-height: 1.3;
	color: var(--falcon-text, #04142B);
}

.frv-m-date {
	font-size: 12.5px;
	color: var(--falcon-muted, #6b7280);
}

.frv-m-stars {
	margin-bottom: 10px;
	color: #F5A623;
	line-height: 1;
}

/* The stars are cloned from the card, so they arrive with .fstars and its
   inline-flex intact. This is belt and braces in case a theme resets it. */
.frv-m-stars .fstars {
	display: inline-flex;
	gap: 2px;
}

.frv-m-text {
	margin: 0 0 auto;
	line-height: var(--awb-typography4-line-height, 1.7);
	color: var(--falcon-text, #04142B);
	white-space: pre-line;
}

/* The product line begins where the review ends, separated by colour 13. */
.frv-m-for {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--awb-color13, #e2e2e2);
	font-size: 13.5px;
	color: var(--falcon-muted, #6b7280);
}

.frv-m-for[hidden] {
	display: none;
}

.frv-m-link {
	color: var(--falcon-link, var(--awb-color4, #003984));
	font-weight: 600;
	text-decoration: none;
	transition: color .15s ease;
}

.frv-m-link:hover,
.frv-m-link:focus-visible {
	color: var(--falcon-link-h, var(--awb-color5, #ffa42d));
	text-decoration: underline;
}

body.frv-lb-on {
	overflow: hidden;
}

@media (max-width: 782px) {
	.frv-modal {
		padding: 12px;
	}

	.frv-modal__box {
		flex-direction: column-reverse;   /* photo first, then the words */
		max-height: 92vh;
	}

	.frv-modal__side {
		flex: 0 1 auto;
	}

	.frv-modal__img {
		flex: 0 0 auto;
		max-height: 45vh;
	}
}

/* --- upload field injected into the review form --- */

.frv-f--extra {
	margin-bottom: 14px;
}

.frv-f--extra label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
}

.frv-f--extra input[type="file"] {
	max-width: 100%;
	font-size: 13px;
}

.wcpr-selected-image-container {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.wcpr-selected-image-preview {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 3px;
	border: 1px solid var(--falcon-line, #E4E0D8);
}

.wcpr-comment-form-error {
	color: #b32d2e;
	font-size: 12px;
}

/* ---------------------------------------------------------------------------
   Review slider (v3.17.1)

   The track is a native scroll-snap container: a phone swipes it with no
   JavaScript, and the arrows are an addition rather than the mechanism. They
   stay hidden until the script confirms the content actually overflows, so a
   design with two reviews shows no dead controls.
   --------------------------------------------------------------------------- */

.frv-slider {
	position: relative;
}

.frv-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	padding: 0 0 3px;                   /* optically centres the chevron */
	color: var(--awb-color4, #003984);
	background: #fff;
	border: 1px solid var(--falcon-line, #E4E0D8);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(4, 20, 43, .14);
	cursor: pointer;
	transition: opacity .15s ease, box-shadow .15s ease;
}

.frv-nav--prev { left: -14px; }
.frv-nav--next { right: -14px; }

.frv-nav:hover {
	box-shadow: 0 4px 16px rgba(4, 20, 43, .22);
}

.frv-nav:focus-visible {
	outline: 2px solid var(--awb-color4, #003984);
	outline-offset: 2px;
}

.frv-nav:disabled {
	opacity: .3;
	cursor: default;
	box-shadow: none;
}

/* Kept as a safety net: display:flex beats the plain hidden attribute, so any
   future code that hides an arrow needs this to actually hide it. Nothing sets
   the attribute today — visibility is decided in PHP by the card count. */
.frv-nav[hidden] {
	display: none;
}

@media (max-width: 900px) {
	.frv-nav--prev { left: -6px; }
	.frv-nav--next { right: -6px; }
}

/* Arrows on touch too.

   They were hidden here on the theory that a coarse pointer swipes and the
   controls are clutter. That assumes people know the row is swipeable, and
   nothing on screen says so — a visible control is the only thing that does.
   Sized up for a fingertip rather than a cursor. */
@media (hover: none) and (pointer: coarse) {
	.frv-nav {
		width: 42px;
		height: 42px;
		font-size: 26px;
	}

	/* No hover state to reveal them, so they must read as buttons at rest. */
	.frv-nav {
		background: #fff;
		box-shadow: 0 2px 12px rgba(4, 20, 43, .22);
	}
}

@media (prefers-reduced-motion: reduce) {
	.frv-cards {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------------------------------------------
   Account page — thread preference (v3.19)

   Every size here reads a variable first, so the whole block is tunable from
   Styling & Text -> Account page without touching this file. The literals are
   the fallbacks, and they are a step up from the product-page sizes: the same
   controls are read at a desk here rather than glanced at beside a machine.
   --------------------------------------------------------------------------- */

.falcon-thread-pref {
	font-size: var(--falcon-pref-nm, 15px);
}

/* Scoped under the wrapper on purpose. Avada styles headings with a compound
   selector, so a lone .fpref-h class loses on specificity and the size and
   colour controls silently do nothing. Two classes beats it, and unlike
   !important it still lets the Extra CSS box override in turn. */
.falcon-thread-pref .fpref-h {
	margin: 26px 0 4px;
	font-size: var(--falcon-pref-h, 17px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--falcon-pref-h-col, var(--falcon-text, #04142B));
}

/* The first heading sits directly under the theme's own title. */
.falcon-thread-pref .fpref-h:first-of-type {
	margin-top: 0;
}

.falcon-thread-pref .fpref-note {
	margin: 0 0 14px;
	font-size: var(--falcon-pref-note, 13.5px);
	line-height: 1.5;
	color: var(--falcon-muted, #6b7280);
}

.falcon-thread-pref .ftc-intro {
	margin: 0 0 14px;
	font-size: var(--falcon-pref-note, 13.5px);
	color: var(--falcon-muted, #6b7280);
}

.falcon-thread-pref .fpo-nm {
	font-size: var(--falcon-pref-nm, 15px);
}

.falcon-thread-pref .fpo-d {
	font-size: var(--falcon-pref-desc, 13px);
}

.falcon-thread-pref .ftc-nm {
	font-size: var(--falcon-pref-nm, 15px);
}

.falcon-thread-pref .fpo-radio span {
	font-size: var(--falcon-pref-nm, 15px);
}

.falcon-pref-save {
	margin-top: 22px;
}

/* --- chart button in the account area (Downloads, My Charts) --- */

.falcon-pdf-btn--sm {
	padding: var(--falcon-btn-sm-pad, 6px 12px);
	font-size: var(--falcon-btn-sm-size, 13px);
}

/* ---------------------------------------------------------------------------
   Product bundles

   Only the notice bar remains. The summary strip, the per-design size and
   colour tables and the combined swatch grid were removed in 3.38 — they were
   not being used, and the per-design rows behind them were the one place this
   plugin did a query per child.
   --------------------------------------------------------------------------- */

/* --- bundle notice bar ------------------------------------------------------

   The bar itself is the offers plugin's .fo-deal, styled entirely over there.
   Only the anchor variant needs anything from us: an <a> carrying those classes
   still picks up the theme's link underline and colour, which the <div> version
   never has to deal with.
   ---------------------------------------------------------------------------- */

/* Only the bundle's name is the link, not the sentence around it.

   Two classes deep on purpose: Avada styles links through --awb-link_decoration_*
   on a compound selector, and a single class would lose to it and take the
   theme's decoration instead of this one. */
.fo-deal__text .falcon-deal__link {
	color: var(--falcon-link, var(--awb-color4, #003984));
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color .15s ease, text-decoration-color .15s ease;
}

.fo-deal__text .falcon-deal__link:hover,
.fo-deal__text .falcon-deal__link:focus-visible {
	color: var(--falcon-link-h, var(--awb-color5, #ffa42d));
	text-decoration-thickness: 2px;
}

.fo-deal__text .falcon-deal__link:focus-visible {
	outline: 2px solid var(--falcon-link-h, var(--awb-color5, #ffa42d));
	outline-offset: 2px;
}

/* --- review cards on small screens ---------------------------------------- */

@media (max-width: 900px) {
	.frv-card {
		flex-basis: calc(100% - 36px);   /* one card, next one peeking */
	}
}

@media (max-width: 600px) {
	.frv-body {
		padding: 14px 15px 16px;
	}

	.frv-card {
		--falcon-rev-lines: 5;
	}
}

/* --- review grid + pager (v3.34) --------------------------------------------

   The grid is the same card, laid out rather than tracked. No scroll snap, no
   arrows, no fixed flex-basis — CSS Grid gives equal columns AND equal row
   heights for free, which is exactly what the slider had to fake.
   ---------------------------------------------------------------------------- */

.frv-cards--grid {
	display: grid;
	grid-template-columns: repeat(var(--frv-cols, 3), minmax(0, 1fr));
	gap: 22px;
	overflow: visible;
	scroll-snap-type: none;
}

/* The slider pins a width on each card; in a grid the track does that. */
.frv-cards--grid .frv-card {
	flex: none;
	width: auto;
	scroll-snap-align: none;
}

@media (max-width: 900px) {
	.frv-cards--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (max-width: 600px) {
	.frv-cards--grid {
		grid-template-columns: 1fr;
	}
}

/* --- pager ---

   Our own classes on purpose. Borrowing .page-numbers pulled in Avada's
   WooCommerce pagination, which floats each item and scopes the containing rule
   to its archive markup — off-archive that arrives as a float with nothing to
   contain it, and the numbers stack down the side of the page.

   Colours come from the same variables as everything else here, so it still
   belongs to the theme without depending on the theme's layout.
   -------------------------------------------------------------------------- */

.falcon-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	clear: both;
	margin-top: 26px;
}

.frv-pg {
	min-width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	color: var(--falcon-link, var(--awb-color4, #003984));
	background: #fff;
	border: 1px solid var(--falcon-line, #E4E0D8);
	border-radius: 3px;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

a.frv-pg:hover,
a.frv-pg:focus-visible {
	color: var(--falcon-link-h, var(--awb-color5, #ffa42d));
	border-color: var(--falcon-link-h, var(--awb-color5, #ffa42d));
	text-decoration: none;
}

.frv-pg--on {
	color: #fff;
	background: var(--falcon-accent, var(--awb-color4, #003984));
	border-color: var(--falcon-accent, var(--awb-color4, #003984));
	cursor: default;
}

.frv-pg--arrow {
	font-size: 20px;
	padding: 0 10px;
}

.frv-pg--off {
	opacity: .35;
	cursor: default;
}

.frv-pg--gap {
	min-width: 22px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--falcon-muted, #6b7280);
}