/*
 * Retail Sales Agency landing pages — shared stylesheet.
 * Scoped under .fr-retail-page to avoid colliding with Elementor / theme styles.
 */

/* Hide the legacy "Single Service" Theme Builder hero (Template #182, section 964ae25).
   It renders an ACF-bound duplicate H1 above our shortcode hero. The template is
   still used by digital marketing service posts, so we scope the hide to .fr-retail-page
   via the body class filter instead of editing the template directly. */
.fr-retail-page .elementor-element-964ae25 {
	display: none !important;
}

/* Keep the site-wide cream textured body background (inherited from Elementor
   kit). Light sections below the hero expect it. The hero and dark-callout
   sections cover it with their own opaque backgrounds. */

.fr-retail-page {
	/* Header clearance — site header is absolute-positioned (~174px tall) and would
	   otherwise overlap the hero when logged out (no admin bar). Mirrors the pattern
	   used on the Shopify service landing page. */
	--fr-header-clearance: 174px;
	--fr-header-gap: 40px;

	/* Type */
	--fr-retail-font-body: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--fr-retail-font-heading: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Color */
	--fr-retail-color-bg: #ffffff;
	--fr-retail-color-bg-dark: #0b0b0b;
	--fr-retail-color-bg-alt: #f6f6f6;
	--fr-retail-color-text: #111111;
	--fr-retail-color-text-muted: #555555;
	--fr-retail-color-text-inverse: #ffffff;
	/* TODO: confirm exact accent hex from Front Row brand guide */
	--fr-retail-color-accent: #1FB5E5;
	--fr-retail-color-accent-hover: #178fb8;
	--fr-retail-color-rule: #e5e5e5;

	/* Layout */
	--fr-retail-container-max: 1200px;
	--fr-retail-gutter: clamp(1.25rem, 3vw, 2.5rem);

	/* Scale */
	--fr-retail-h1-size: clamp(2.5rem, 5.5vw, 4rem);
	--fr-retail-h2-size: clamp(1.75rem, 3.5vw, 2.5rem);
	--fr-retail-h3-size: clamp(1.25rem, 2.25vw, 1.5rem);
	--fr-retail-body-size: 1.0625rem;
	--fr-retail-body-lh: 1.65;
}

/* -------------------------------------------------------------
 * Reset / base typography (scoped)
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-page-body,
.fr-retail-page .fr-retail-hero,
.fr-retail-page .fr-retail-intro,
.fr-retail-page .fr-retail-who-for,
.fr-retail-page .fr-retail-stats,
.fr-retail-page .fr-retail-numbered-cards,
.fr-retail-page .fr-retail-feature-blocks,
.fr-retail-page .fr-retail-logo-grid,
.fr-retail-page .fr-retail-dark-callout,
.fr-retail-page .fr-retail-faq,
.fr-retail-page .fr-retail-internal-links,
.fr-retail-page .fr-retail-closing-cta {
	font-family: var(--fr-retail-font-body);
	font-size: var(--fr-retail-body-size);
	line-height: var(--fr-retail-body-lh);
	color: var(--fr-retail-color-text);
	box-sizing: border-box;
}

.fr-retail-page .fr-retail-hero *,
.fr-retail-page .fr-retail-intro *,
.fr-retail-page .fr-retail-who-for *,
.fr-retail-page .fr-retail-stats *,
.fr-retail-page .fr-retail-numbered-cards *,
.fr-retail-page .fr-retail-feature-blocks *,
.fr-retail-page .fr-retail-logo-grid *,
.fr-retail-page .fr-retail-dark-callout *,
.fr-retail-page .fr-retail-faq *,
.fr-retail-page .fr-retail-internal-links *,
.fr-retail-page .fr-retail-closing-cta * {
	box-sizing: border-box;
}

.fr-retail-page h1,
.fr-retail-page h2,
.fr-retail-page h3,
.fr-retail-page h4,
.fr-retail-page h5,
.fr-retail-page h6 {
	font-family: var(--fr-retail-font-heading);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: inherit;
}

.fr-retail-page p {
	margin: 0 0 1em;
}

.fr-retail-page ul,
.fr-retail-page ol {
	margin: 0 0 1em;
	padding: 0 0 0 1.25em;
}

.fr-retail-page a {
	color: var(--fr-retail-color-accent);
	text-decoration: none;
}

.fr-retail-page a:hover,
.fr-retail-page a:focus {
	color: var(--fr-retail-color-accent-hover);
}

.fr-retail-page img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* -------------------------------------------------------------
 * Hide injected schema wrapper
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-schema {
	display: none;
}

/* -------------------------------------------------------------
 * Container helper
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-container {
	width: 100%;
	max-width: var(--fr-retail-container-max);
	margin: 0 auto;
	padding-left: var(--fr-retail-gutter);
	padding-right: var(--fr-retail-gutter);
}

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

.fr-retail-page .fr-retail-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 1.05rem 2rem;
	font-family: var(--fr-retail-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 2px;
	border: 2px solid transparent;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
	cursor: pointer;
	min-height: 50px;
}

.fr-retail-page .fr-retail-btn--primary {
	background-color: var(--fr-retail-color-accent);
	border-color: var(--fr-retail-color-accent);
	color: var(--fr-retail-color-text-inverse);
	box-shadow: 0 4px 18px rgba(31, 181, 229, 0.25);
}

.fr-retail-page .fr-retail-btn--primary:hover,
.fr-retail-page .fr-retail-btn--primary:focus {
	background-color: var(--fr-retail-color-accent-hover);
	border-color: var(--fr-retail-color-accent-hover);
	color: var(--fr-retail-color-text-inverse);
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(31, 181, 229, 0.32);
}

.fr-retail-page .fr-retail-btn--secondary {
	background-color: transparent;
	border-color: currentColor;
	color: var(--fr-retail-color-text-inverse);
}

.fr-retail-page .fr-retail-btn--secondary:hover,
.fr-retail-page .fr-retail-btn--secondary:focus {
	background-color: var(--fr-retail-color-text-inverse);
	color: var(--fr-retail-color-text);
}

/* On light backgrounds, secondary button adopts dark text by default */
.fr-retail-page .fr-retail-closing-cta .fr-retail-btn--secondary,
.fr-retail-page .fr-retail-intro .fr-retail-btn--secondary {
	color: var(--fr-retail-color-text);
}

.fr-retail-page .fr-retail-closing-cta .fr-retail-btn--secondary:hover,
.fr-retail-page .fr-retail-closing-cta .fr-retail-btn--secondary:focus {
	background-color: var(--fr-retail-color-text);
	color: var(--fr-retail-color-text-inverse);
}

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

.fr-retail-page .fr-retail-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 72vh;
	padding: calc(var(--fr-header-clearance) + var(--fr-header-gap)) 0 clamp(5rem, 12vw, 9rem);
	background-color: transparent;
	color: var(--fr-retail-color-text-inverse);
	overflow: hidden;
}

.fr-retail-page .fr-retail-hero__overlay {
	position: absolute;
	inset: 0;
	background: transparent;
	pointer-events: none;
	z-index: 1;
}

/* Only darken when a custom hero image is supplied — the default CSS bg
   (service-single-background.png) already provides its own dark field. */
.fr-retail-page .fr-retail-hero--has-bg .fr-retail-hero__overlay {
	background: linear-gradient(180deg, rgba(11, 11, 11, 0.45) 0%, rgba(11, 11, 11, 0.78) 100%);
}

.fr-retail-page .fr-retail-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 900px;
}

.fr-retail-page .fr-retail-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	margin: 0 0 1.25rem;
	color: var(--fr-retail-color-accent);
}

.fr-retail-page .fr-retail-hero__eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background-color: var(--fr-retail-color-accent);
}

.fr-retail-page .fr-retail-hero__title {
	font-size: var(--fr-retail-h1-size);
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin: 0 0 1.5rem;
	color: var(--fr-retail-color-text-inverse);
	text-wrap: balance;
}

.fr-retail-page .fr-retail-hero__subhead {
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
	line-height: 1.5;
	margin: 0 0 2rem;
	color: rgba(255, 255, 255, 0.88);
	max-width: 52ch;
}

.fr-retail-page .fr-retail-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* -------------------------------------------------------------
 * Intro
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-intro {
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.75rem, 5.5vw, 4.5rem);
	background-color: transparent;
}

.fr-retail-page .fr-retail-intro__inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 3vw, 2.5rem);
	position: relative;
}

.fr-retail-page .fr-retail-intro__inner::before {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	background-color: var(--fr-retail-color-accent);
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.fr-retail-page .fr-retail-intro__paragraph {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--fr-retail-color-text);
	margin: 0 0 1.15em;
	max-width: 66ch;
}

.fr-retail-page .fr-retail-intro__paragraph:first-child {
	font-size: clamp(1.1875rem, 1.55vw, 1.375rem);
	line-height: 1.5;
	color: var(--fr-retail-color-heading, #0f0f10);
	font-weight: 500;
	letter-spacing: -0.005em;
	margin-bottom: 1.35em;
}

.fr-retail-page .fr-retail-intro__paragraph:first-child::first-letter {
	color: inherit;
	font-weight: inherit;
}

.fr-retail-page .fr-retail-intro__paragraph:last-child {
	margin-bottom: 0;
}

.fr-retail-page .fr-retail-intro__paragraph--emphasis {
	font-size: clamp(1.375rem, 2.1vw, 1.75rem);
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--fr-retail-color-accent);
	margin: 1.25em 0;
	max-width: 32ch;
}

.fr-retail-page .fr-retail-intro__paragraph--emphasis::first-letter {
	color: inherit;
	font-weight: inherit;
}

/* -------------------------------------------------------------
 * Who This Page Is For
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-who-for {
	padding: clamp(4rem, 7vw, 5.5rem) 0;
	background-color: var(--fr-retail-color-bg-alt);
}

.fr-retail-page .fr-retail-who-for__heading {
	font-size: var(--fr-retail-h2-size);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 2.5rem;
	max-width: 28ch;
}

.fr-retail-page .fr-retail-who-for__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem 2rem;
}

.fr-retail-page .fr-retail-who-for__item {
	position: relative;
	padding: 1rem 0 1rem 2.25rem;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--fr-retail-color-text);
	border-top: 1px solid var(--fr-retail-color-rule);
}

.fr-retail-page .fr-retail-who-for__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 1.25rem;
	height: 2px;
	background-color: var(--fr-retail-color-accent);
}

/* -------------------------------------------------------------
 * Stats strip
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-stats {
	padding: clamp(3.5rem, 6vw, 5.5rem) 0;
	background-color: transparent;
	border-top: 1px solid var(--fr-retail-color-rule);
	border-bottom: 1px solid var(--fr-retail-color-rule);
}

.fr-retail-page .fr-retail-stats__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem 2rem;
	text-align: left;
}

.fr-retail-page .fr-retail-stats__item {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--fr-retail-color-rule);
	position: relative;
}

.fr-retail-page .fr-retail-stats__item::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 40px;
	height: 2px;
	background-color: var(--fr-retail-color-accent);
}

.fr-retail-page .fr-retail-stats__number {
	font-size: clamp(1.875rem, 2.75vw, 2.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--fr-retail-color-text);
	letter-spacing: -0.025em;
	overflow-wrap: break-word;
}

.fr-retail-page .fr-retail-stats__label {
	font-size: 0.8125rem;
	color: var(--fr-retail-color-text-muted);
	line-height: 1.45;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 500;
}

/* -------------------------------------------------------------
 * Numbered cards
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-numbered-cards {
	padding: clamp(4rem, 8vw, 6rem) 0;
	background-color: transparent;
}

.fr-retail-page .fr-retail-numbered-cards__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

.fr-retail-page .fr-retail-numbered-cards__item {
	position: relative;
	padding: 2rem 0 0;
	border-top: 1px solid var(--fr-retail-color-rule);
}

.fr-retail-page .fr-retail-numbered-cards__item::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 48px;
	height: 2px;
	background-color: var(--fr-retail-color-accent);
}

.fr-retail-page .fr-retail-numbered-cards__number {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--fr-retail-color-accent);
	line-height: 1;
	margin-bottom: 1.25rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.fr-retail-page .fr-retail-numbered-cards__title {
	font-size: var(--fr-retail-h3-size);
	margin: 0 0 0.875rem;
	color: var(--fr-retail-color-text);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.fr-retail-page .fr-retail-numbered-cards__body {
	margin: 0;
	color: var(--fr-retail-color-text-muted);
	line-height: 1.65;
}

/* -------------------------------------------------------------
 * Feature blocks
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-feature-blocks {
	padding: clamp(4rem, 8vw, 6rem) 0;
	background-color: transparent;
}

.fr-retail-page .fr-retail-feature-block {
	padding: 3rem 0;
	border-bottom: 1px solid var(--fr-retail-color-rule);
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.fr-retail-page .fr-retail-feature-block:first-child {
	padding-top: 0;
}

.fr-retail-page .fr-retail-feature-block:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.fr-retail-page .fr-retail-feature-block__head {
	min-width: 0;
}

.fr-retail-page .fr-retail-feature-block__content {
	min-width: 0;
}

.fr-retail-page .fr-retail-feature-block__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--fr-retail-color-accent);
	margin: 0 0 1rem;
}

.fr-retail-page .fr-retail-feature-block__eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background-color: var(--fr-retail-color-accent);
}

.fr-retail-page .fr-retail-feature-block__title {
	font-size: var(--fr-retail-h2-size);
	margin: 0;
	color: var(--fr-retail-color-text);
	max-width: 18ch;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.fr-retail-page .fr-retail-feature-block__body {
	color: var(--fr-retail-color-text);
	line-height: 1.65;
}

.fr-retail-page .fr-retail-feature-block__body p {
	margin: 0 0 1em;
}

.fr-retail-page .fr-retail-feature-block__body p:last-child {
	margin-bottom: 0;
}

.fr-retail-page .fr-retail-feature-block__bullets {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

@media (min-width: 900px) {
	.fr-retail-page .fr-retail-feature-block {
		grid-template-columns: minmax(220px, 1fr) minmax(0, 1.85fr);
		column-gap: clamp(2.5rem, 5vw, 5rem);
		row-gap: 0;
		align-items: start;
	}

	.fr-retail-page .fr-retail-feature-block__head {
		position: sticky;
		top: 6rem;
	}

	.fr-retail-page .fr-retail-feature-block__title {
		max-width: none;
	}
}

@media (min-width: 1200px) {
	.fr-retail-page .fr-retail-feature-block__bullets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.875rem 2rem;
	}
}

.fr-retail-page .fr-retail-feature-block__bullets li {
	position: relative;
	padding-left: 1.75rem;
	line-height: 1.5;
	color: var(--fr-retail-color-text);
}

.fr-retail-page .fr-retail-feature-block__bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 1rem;
	height: 2px;
	background-color: var(--fr-retail-color-accent);
}

/* -------------------------------------------------------------
 * Logo grid
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-logo-grid {
	padding: clamp(3rem, 6vw, 5rem) 0;
	background-color: transparent;
}

.fr-retail-page .fr-retail-logo-grid__heading {
	font-size: var(--fr-retail-h2-size);
	margin: 0 0 2rem;
	text-align: center;
}

.fr-retail-page .fr-retail-logo-grid__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 1.5rem 2rem;
	align-items: center;
	justify-items: center;
}

.fr-retail-page .fr-retail-logo-grid__item {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.fr-retail-page .fr-retail-logo-grid__item img {
	max-height: 56px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.7;
	transition: filter 200ms ease, opacity 200ms ease;
}

.fr-retail-page .fr-retail-logo-grid__item a:hover img,
.fr-retail-page .fr-retail-logo-grid__item a:focus img,
.fr-retail-page .fr-retail-logo-grid__item:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

/* -------------------------------------------------------------
 * Brand wall (composite showcase image)
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-brand-wall {
	padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.fr-retail-page .fr-retail-brand-wall--dark {
	background-color: #0b0b0c;
	color: #f5f5f6;
}

.fr-retail-page .fr-retail-brand-wall--light {
	background-color: transparent;
}

.fr-retail-page .fr-retail-brand-wall__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--fr-retail-color-accent);
	margin: 0 0 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.fr-retail-page .fr-retail-brand-wall__eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background-color: var(--fr-retail-color-accent);
}

.fr-retail-page .fr-retail-brand-wall__heading {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 2rem;
	max-width: 32ch;
	color: inherit;
}

.fr-retail-page .fr-retail-brand-wall--light .fr-retail-brand-wall__heading {
	color: var(--fr-retail-color-heading, #0f0f10);
}

.fr-retail-page .fr-retail-brand-wall__frame {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	background-color: #000;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 24px 60px rgba(0, 0, 0, 0.35);
}

.fr-retail-page .fr-retail-brand-wall--light .fr-retail-brand-wall__frame {
	background-color: #0b0b0c;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.fr-retail-page .fr-retail-brand-wall__image {
	display: block;
	width: 100%;
	height: auto;
}

.fr-retail-page .fr-retail-brand-wall__caption {
	margin: 1.5rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: inherit;
	opacity: 0.75;
	max-width: 62ch;
}

/* -------------------------------------------------------------
 * Hardware retailers list (text coverage beneath brand wall)
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-hardware-retailers-list {
	padding: clamp(2.75rem, 5vw, 4.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
	background-color: #0b0b0c;
	color: #f5f5f6;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fr-retail-page .fr-retail-hardware-retailers-list__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	counter-reset: retailer-group;
}

@media (min-width: 720px) {
	.fr-retail-page .fr-retail-hardware-retailers-list__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem 2.5rem;
	}
}

@media (min-width: 1100px) {
	.fr-retail-page .fr-retail-hardware-retailers-list__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 2.25rem 3rem;
	}
}

.fr-retail-page .fr-retail-hardware-retailers-list__group {
	position: relative;
	padding: 1.5rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	counter-increment: retailer-group;
}

.fr-retail-page .fr-retail-hardware-retailers-list__group::before {
	content: counter(retailer-group, decimal-leading-zero);
	position: absolute;
	top: -0.65rem;
	left: 0;
	padding: 0 0.5rem 0 0;
	background-color: #0b0b0c;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	color: var(--fr-retail-color-accent);
	text-transform: uppercase;
}

.fr-retail-page .fr-retail-hardware-retailers-list__title {
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0 0 0.75rem;
	color: #f5f5f6;
}

.fr-retail-page .fr-retail-hardware-retailers-list__items {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(245, 245, 246, 0.78);
	font-family: var(--fr-retail-font-body, inherit);
}

/* -------------------------------------------------------------
 * Dark callout
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-dark-callout {
	padding: clamp(4rem, 8vw, 6rem) 0;
	background-color: var(--fr-retail-color-bg-dark);
	color: var(--fr-retail-color-text-inverse);
}

.fr-retail-page .fr-retail-dark-callout__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--fr-retail-color-accent);
	margin: 0 0 1.25rem;
	font-weight: 600;
}

.fr-retail-page .fr-retail-dark-callout__eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background-color: var(--fr-retail-color-accent);
}

.fr-retail-page .fr-retail-dark-callout__title {
	font-size: var(--fr-retail-h2-size);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 1.5rem;
	color: var(--fr-retail-color-text-inverse);
	max-width: 28ch;
	text-wrap: balance;
}

.fr-retail-page .fr-retail-dark-callout__body {
	max-width: 62ch;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.65;
}

.fr-retail-page .fr-retail-dark-callout__body p {
	margin: 0 0 1em;
}

.fr-retail-page .fr-retail-dark-callout__logos {
	list-style: none;
	padding: 0;
	margin: 2.5rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 2rem;
	align-items: center;
	justify-items: center;
}

.fr-retail-page .fr-retail-dark-callout__logos img {
	max-height: 48px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%) brightness(1.6);
	opacity: 0.85;
	transition: opacity 200ms ease, filter 200ms ease;
}

.fr-retail-page .fr-retail-dark-callout__logos img:hover {
	opacity: 1;
	filter: grayscale(0%) brightness(1);
}

.fr-retail-page .fr-retail-dark-callout__logo-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 0.9rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 2px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
	transition: border-color 200ms ease, background 200ms ease;
}

.fr-retail-page .fr-retail-dark-callout__logo-chip:hover {
	border-color: var(--fr-retail-color-accent);
	background: rgba(255, 255, 255, 0.06);
}

.fr-retail-page .fr-retail-dark-callout__logo-chip span {
	font-family: var(--fr-retail-font-display, inherit);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #f5f5f6;
	white-space: nowrap;
}

/* -------------------------------------------------------------
 * FAQ accordion
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-faq {
	padding: clamp(4rem, 8vw, 6rem) 0;
	background-color: transparent;
}

.fr-retail-page .fr-retail-faq__heading {
	font-size: var(--fr-retail-h2-size);
	margin: 0 0 2rem;
}

.fr-retail-page .fr-retail-faq__list {
	border-top: 1px solid var(--fr-retail-color-rule);
}

.fr-retail-page .fr-retail-faq-item {
	border-bottom: 1px solid var(--fr-retail-color-rule);
}

.fr-retail-page .fr-retail-faq-item__summary {
	list-style: none;
	cursor: pointer;
	padding: 1.5rem 2.5rem 1.5rem 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--fr-retail-font-heading);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--fr-retail-color-text);
	transition: color 180ms ease;
}

.fr-retail-page .fr-retail-faq-item__summary::-webkit-details-marker {
	display: none;
}

.fr-retail-page .fr-retail-faq-item__summary:hover {
	color: var(--fr-retail-color-accent);
}

.fr-retail-page .fr-retail-faq-item__indicator {
	position: absolute;
	right: 0;
	top: 50%;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transform: translateY(-50%);
}

.fr-retail-page .fr-retail-faq-item__indicator::before,
.fr-retail-page .fr-retail-faq-item__indicator::after {
	content: "";
	position: absolute;
	background-color: currentColor;
	transition: transform 250ms ease, opacity 250ms ease;
}

.fr-retail-page .fr-retail-faq-item__indicator::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	transform: translateY(-50%);
}

.fr-retail-page .fr-retail-faq-item__indicator::after {
	left: 50%;
	top: 0;
	width: 2px;
	height: 100%;
	transform: translateX(-50%);
}

.fr-retail-page .fr-retail-faq-item[open] .fr-retail-faq-item__indicator::after {
	transform: translateX(-50%) scaleY(0);
	opacity: 0;
}

.fr-retail-page .fr-retail-faq-item__answer {
	padding: 0 0 1.75rem;
	max-width: 72ch;
	color: var(--fr-retail-color-text-muted);
	line-height: 1.65;
}

.fr-retail-page .fr-retail-faq-item__answer p {
	margin: 0 0 1em;
}

.fr-retail-page .fr-retail-faq-item__answer p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------
 * Internal links
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-internal-links {
	padding: clamp(4rem, 8vw, 6rem) 0;
	background-color: var(--fr-retail-color-bg-alt);
}

.fr-retail-page .fr-retail-internal-links__heading {
	font-size: var(--fr-retail-h2-size);
	margin: 0 0 2rem;
}

.fr-retail-page .fr-retail-internal-links__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.fr-retail-page .fr-retail-internal-links__item {
	display: flex;
}

.fr-retail-page .fr-retail-internal-links__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 1.5rem 1.75rem;
	background-color: var(--fr-retail-color-bg);
	border: 1px solid var(--fr-retail-color-rule);
	border-radius: 4px;
	color: var(--fr-retail-color-text);
	transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.fr-retail-page .fr-retail-internal-links__link:hover,
.fr-retail-page .fr-retail-internal-links__link:focus-visible {
	border-color: var(--fr-retail-color-accent);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
	color: var(--fr-retail-color-text);
}

.fr-retail-page .fr-retail-internal-links__label {
	display: block;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--fr-retail-color-text);
	margin-bottom: 0.25rem;
}

.fr-retail-page .fr-retail-internal-links__description {
	display: block;
	font-size: 0.9375rem;
	color: var(--fr-retail-color-text-muted);
	line-height: 1.5;
}

/* -------------------------------------------------------------
 * Closing CTA
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-closing-cta {
	padding: clamp(5rem, 9vw, 7rem) 0;
	background-color: var(--fr-retail-color-bg-alt);
	border-top: 1px solid var(--fr-retail-color-rule);
}

.fr-retail-page .fr-retail-closing-cta__inner {
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
}

.fr-retail-page .fr-retail-closing-cta__title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin: 0 0 1.25rem;
	color: var(--fr-retail-color-text);
	text-wrap: balance;
}

.fr-retail-page .fr-retail-closing-cta__body {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--fr-retail-color-text-muted);
	margin: 0 0 2.5rem;
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
}

.fr-retail-page .fr-retail-closing-cta__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

/* -------------------------------------------------------------
 * Raw-HTML sections — shared container + padding so custom
 * blocks (failures, owned brands, coverage map, etc.) match
 * the rhythm of the shared components.
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-go-to-market-failures,
.fr-retail-page .fr-retail-mass-failures,
.fr-retail-page .fr-retail-hardware-owned-brands,
.fr-retail-page .fr-retail-hardware-midstates,
.fr-retail-page .fr-retail-hardware-retailers,
.fr-retail-page .fr-retail-field-philosophy,
.fr-retail-page .fr-retail-field-coverage-map,
.fr-retail-page .fr-retail-inside-sales-why,
.fr-retail-page .fr-retail-channels-narrative,
.fr-retail-page .fr-retail-mass-combined-advantage {
	padding: clamp(3.5rem, 7vw, 6rem) 0;
	background-color: transparent;
	font-family: var(--fr-retail-font-body);
	font-size: var(--fr-retail-body-size);
	line-height: var(--fr-retail-body-lh);
	color: var(--fr-retail-color-text);
	box-sizing: border-box;
}

.fr-retail-page .fr-retail-go-to-market-failures *,
.fr-retail-page .fr-retail-mass-failures *,
.fr-retail-page .fr-retail-hardware-owned-brands *,
.fr-retail-page .fr-retail-hardware-midstates *,
.fr-retail-page .fr-retail-hardware-retailers *,
.fr-retail-page .fr-retail-field-philosophy *,
.fr-retail-page .fr-retail-field-coverage-map *,
.fr-retail-page .fr-retail-inside-sales-why *,
.fr-retail-page .fr-retail-channels-narrative *,
.fr-retail-page .fr-retail-mass-combined-advantage * {
	box-sizing: border-box;
}

/* Alternate background for the second custom block on hardware & mass pages
   so they stripe with the surrounding sections. */
.fr-retail-page .fr-retail-mass-failures,
.fr-retail-page .fr-retail-hardware-midstates,
.fr-retail-page .fr-retail-go-to-market-failures {
	background-color: var(--fr-retail-color-bg-alt);
}

/* -------------------------------------------------------------
 * Failure card grid — shared between go-to-market & mass-national
 * "What Happens When…" sections.
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-go-to-market-failures__heading,
.fr-retail-page .fr-retail-mass-failures__heading {
	font-size: var(--fr-retail-h2-size);
	margin: 0 0 1rem;
	max-width: 32ch;
	text-wrap: balance;
}

.fr-retail-page .fr-retail-go-to-market-failures__intro,
.fr-retail-page .fr-retail-mass-failures__intro {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--fr-retail-color-text-muted);
	margin: 0 0 2.5rem;
	max-width: 62ch;
}

.fr-retail-page .fr-retail-go-to-market-failures__grid,
.fr-retail-page .fr-retail-mass-failures__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

.fr-retail-page .fr-retail-failure-card {
	position: relative;
	background-color: var(--fr-retail-color-bg);
	border: 1px solid var(--fr-retail-color-rule);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
	transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
	overflow: hidden;
}

.fr-retail-page .fr-retail-failure-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 40px;
	background-color: var(--fr-retail-color-accent);
	transition: height 320ms ease;
}

.fr-retail-page .fr-retail-failure-card:hover {
	border-color: #d0d0d0;
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}

.fr-retail-page .fr-retail-failure-card:hover::before {
	height: 100%;
}

.fr-retail-page .fr-retail-failure-card__label {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--fr-retail-color-accent);
	margin: 0 0 1rem;
}

.fr-retail-page .fr-retail-failure-card__title {
	font-size: clamp(1.1875rem, 2vw, 1.4375rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 0.875rem;
	color: var(--fr-retail-color-text);
}

.fr-retail-page .fr-retail-failure-card__body {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--fr-retail-color-text-muted);
	margin: 0;
}

.fr-retail-page .fr-retail-go-to-market-failures__outro,
.fr-retail-page .fr-retail-mass-failures__outro {
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--fr-retail-color-text);
	font-weight: 600;
	margin: 0;
	max-width: 62ch;
}

/* -------------------------------------------------------------
 * Other raw-HTML section headings — shared typographic rhythm.
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-hardware-owned-brands__eyebrow,
.fr-retail-page .fr-retail-hardware-midstates__eyebrow,
.fr-retail-page .fr-retail-field-philosophy__eyebrow,
.fr-retail-page .fr-retail-mass-combined-advantage__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--fr-retail-color-accent);
	margin: 0 0 0.75rem;
}

.fr-retail-page .fr-retail-hardware-owned-brands__title,
.fr-retail-page .fr-retail-hardware-midstates__title,
.fr-retail-page .fr-retail-hardware-retailers__heading,
.fr-retail-page .fr-retail-field-philosophy__title,
.fr-retail-page .fr-retail-field-coverage-map__heading,
.fr-retail-page .fr-retail-inside-sales-why__heading,
.fr-retail-page .fr-retail-channels-narrative__heading,
.fr-retail-page .fr-retail-mass-combined-advantage__title {
	font-size: var(--fr-retail-h2-size);
	margin: 0 0 1.25rem;
	max-width: 32ch;
	text-wrap: balance;
}

.fr-retail-page .fr-retail-hardware-owned-brands__inner,
.fr-retail-page .fr-retail-hardware-midstates__inner,
.fr-retail-page .fr-retail-field-philosophy__inner,
.fr-retail-page .fr-retail-hardware-retailers__intro {
	max-width: 820px;
}

.fr-retail-page .fr-retail-hardware-owned-brands__body,
.fr-retail-page .fr-retail-hardware-midstates__body,
.fr-retail-page .fr-retail-field-philosophy__body,
.fr-retail-page .fr-retail-hardware-retailers__lede,
.fr-retail-page .fr-retail-field-coverage-map__body,
.fr-retail-page .fr-retail-inside-sales-why__lede,
.fr-retail-page .fr-retail-channels-narrative__body,
.fr-retail-page .fr-retail-mass-combined-advantage__body {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--fr-retail-color-text);
}

.fr-retail-page .fr-retail-hardware-owned-brands__list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
}

.fr-retail-page .fr-retail-hardware-owned-brands__brand {
	background-color: var(--fr-retail-color-bg);
	border: 1px solid var(--fr-retail-color-rule);
	padding: 0.5rem 1rem;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
}

.fr-retail-page .fr-retail-hardware-midstates__layers,
.fr-retail-page .fr-retail-inside-sales-why__list,
.fr-retail-page .fr-retail-field-philosophy__list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.fr-retail-page .fr-retail-hardware-midstates__layer,
.fr-retail-page .fr-retail-field-philosophy__list li {
	padding: 1rem 1.25rem;
	background-color: var(--fr-retail-color-bg);
	border-left: 3px solid var(--fr-retail-color-accent);
	font-size: 1rem;
	line-height: 1.6;
}

.fr-retail-page .fr-retail-inside-sales-why__item {
	padding: 1.25rem 1.5rem;
	background-color: var(--fr-retail-color-bg);
	border: 1px solid var(--fr-retail-color-rule);
	border-radius: 4px;
}

.fr-retail-page .fr-retail-inside-sales-why__item-title {
	font-size: 1.125rem;
	margin: 0 0 0.4rem;
}

.fr-retail-page .fr-retail-inside-sales-why__item-body {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--fr-retail-color-text-muted);
}

.fr-retail-page .fr-retail-hardware-midstates__closer,
.fr-retail-page .fr-retail-field-philosophy__kicker,
.fr-retail-page .fr-retail-hardware-owned-brands__body:last-child {
	font-size: 1.0625rem;
	font-weight: 600;
	margin-top: 1.5rem;
}

.fr-retail-page .fr-retail-field-coverage-map__figure {
	margin: 2rem 0;
	text-align: center;
}

.fr-retail-page .fr-retail-field-coverage-map__image {
	max-width: 100%;
	height: auto;
}

.fr-retail-page .fr-retail-field-coverage-map__supports-heading {
	font-size: 1.125rem;
	margin: 1.5rem 0 0.75rem;
}

.fr-retail-page .fr-retail-field-coverage-map__supports-list {
	padding-left: 1.25rem;
}

/* -------------------------------------------------------------
 * Atmospheric backgrounds — CSS-only layered gradients create
 * depth on dark sections without the tile-seam artifacts that
 * the legacy blob PNGs produced on wide viewports.
 * ------------------------------------------------------------- */

/* Hero uses the legacy service-single-background.png to get its signature
   dark field + curved alpha-masked bottom edge (matches marketing-packages).
   Layered over it: subtle accent glow gradients for depth. Body cream bg
   shows through the PNG's transparent bottom curve. */
.fr-retail-page .fr-retail-hero {
	background-image:
		radial-gradient(ellipse 60% 50% at 85% 20%, rgba(31, 181, 229, 0.14), transparent 70%),
		radial-gradient(ellipse 40% 60% at 15% 90%, rgba(31, 181, 229, 0.06), transparent 65%),
		url("/wp-content/uploads/2024/01/service-single-background.png");
	background-size: cover, cover, cover;
	background-position: center, center, center bottom;
	background-repeat: no-repeat, no-repeat, no-repeat;
}

.fr-retail-page .fr-retail-hero__inner {
	z-index: 2;
}

/* Light sections inherit the cream textured body background — no override. */
.fr-retail-page .fr-retail-intro {
	position: relative;
}

/* Dark callout: matches hero atmosphere */
.fr-retail-page .fr-retail-dark-callout {
	background-image:
		radial-gradient(ellipse 55% 70% at 90% 50%, rgba(31, 181, 229, 0.10), transparent 70%),
		linear-gradient(180deg, #0b0b0b 0%, #080808 100%);
}

/* Closing CTA — transparent background, inherits cream texture */
.fr-retail-page .fr-retail-closing-cta {
	position: relative;
	border-top: none;
}

.fr-retail-page .fr-retail-closing-cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 3px;
	background-color: var(--fr-retail-color-accent);
}

/* -------------------------------------------------------------
 * Reveal animation utility
 * ------------------------------------------------------------- */

.fr-retail-page .fr-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 650ms ease, transform 650ms ease;
	will-change: opacity, transform;
}

.fr-retail-page .fr-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.fr-retail-page .fr-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

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

@media (min-width: 768px) {
	.fr-retail-page .fr-retail-stats__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 2.5rem;
	}

	.fr-retail-page .fr-retail-numbered-cards__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem;
	}

	.fr-retail-page .fr-retail-who-for__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.fr-retail-page .fr-retail-internal-links__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.fr-retail-page .fr-retail-go-to-market-failures__grid,
	.fr-retail-page .fr-retail-mass-failures__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.75rem;
	}

	.fr-retail-page .fr-retail-hardware-midstates__layers,
	.fr-retail-page .fr-retail-inside-sales-why__list,
	.fr-retail-page .fr-retail-field-philosophy__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.fr-retail-page .fr-retail-numbered-cards__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 3.5rem;
	}

	.fr-retail-page .fr-retail-stats__grid {
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	}

	.fr-retail-page .fr-retail-internal-links__list {
		grid-template-columns: repeat(3, 1fr);
	}

	.fr-retail-page .fr-retail-logo-grid__list {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

/* -------------------------------------------------------------
 * Testimonial swiper prev-button fix.
 *
 * post-336.css tries `.dp-testimonial .elementor-swiper-button-prev
 * { left: auto; right: 110px }`, but e-swiper.min.css has an
 * equal-specificity rule `.elementor-element .swiper
 * .elementor-swiper-button-prev { left: 10px }` that loads later
 * and wins the cascade. The result: the prev button ends up with
 * both `left: 10px` AND `right: 110px`, stretching it to ~1400px
 * wide — an invisible click-trap covering the whole testimonial
 * carousel that hijacks any click inside the row.
 *
 * Fix with a higher-specificity selector so we beat both rules
 * regardless of load order. The `.elementor-arrows-yes` class is
 * always on the testimonial element when arrows are enabled.
 * ------------------------------------------------------------- */
.fr-retail-page .dp-testimonial.elementor-element.elementor-arrows-yes .elementor-swiper-button-prev {
	left: 10px;
	right: auto;
}
.fr-retail-page .dp-testimonial.elementor-element.elementor-arrows-yes .elementor-swiper-button-next {
	left: auto;
	right: 10px;
}

/* -------------------------------------------------------------
 * Testimonial swiper: keep a 1ms transition under reduced-motion.
 *
 * uploads/elementor/css/custom-frontend.min.css contains
 * `@media (prefers-reduced-motion: reduce) { html * {
 * transition-duration: 0s !important } }`. At 0s the browser
 * never fires `transitionend`, so Swiper's `animating` flag
 * never clears after its first slide. Every subsequent
 * slideNext() hits `animating && params.loopPreventsSlide` and
 * bails — the prev/next arrow buttons become no-ops.
 *
 * 1ms is imperceptible (honors the spirit of reduced motion)
 * but still fires transitionend so Swiper unlocks itself.
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.fr-retail-page .dp-testimonial .swiper-wrapper {
		transition-duration: 1ms !important;
	}
}

/* -------------------------------------------------------------
 * Intro: rich entries (lead-in, bullet list, inline stat cards,
 * long-form callout). Mirrors the existing emphasis treatment.
 * ------------------------------------------------------------- */

.fr-retail-page .fr-retail-intro__paragraph--lead-in {
	margin-bottom: 0.6em;
}

.fr-retail-page .fr-retail-intro__bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 1.75em;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.55rem 1.5rem;
	max-width: 66ch;
}

.fr-retail-page .fr-retail-intro__bullets li {
	position: relative;
	padding-left: 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--fr-retail-color-text);
}

.fr-retail-page .fr-retail-intro__bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 0.55rem;
	height: 2px;
	background-color: var(--fr-retail-color-accent);
}

@media (min-width: 560px) {
	.fr-retail-page .fr-retail-intro__bullets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.fr-retail-page .fr-retail-intro__bullets {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.fr-retail-page .fr-retail-intro__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 1.75rem;
	margin: 2rem 0 2.25rem;
	padding: 2rem 0;
	border-top: 1px solid var(--fr-retail-color-rule);
	border-bottom: 1px solid var(--fr-retail-color-rule);
}

.fr-retail-page .fr-retail-intro__stat {
	position: relative;
	padding-top: 1rem;
	border-top: 1px solid var(--fr-retail-color-rule);
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.fr-retail-page .fr-retail-intro__stat::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 32px;
	height: 2px;
	background-color: var(--fr-retail-color-accent);
}

.fr-retail-page .fr-retail-intro__stat-number {
	font-size: clamp(1.5rem, 1.4vw + 0.75rem, 1.875rem);
	font-weight: 700;
	line-height: 1;
	color: var(--fr-retail-color-text);
	letter-spacing: -0.035em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.fr-retail-page .fr-retail-intro__stat-label {
	font-size: 0.72rem;
	color: var(--fr-retail-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 500;
	line-height: 1.45;
}

@media (min-width: 860px) {
	.fr-retail-page .fr-retail-intro__stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem 2rem;
		margin-left: -3rem;
		margin-right: -3rem;
	}
}

.fr-retail-page .fr-retail-intro__paragraph--callout {
	font-size: clamp(1.25rem, 1.9vw, 1.625rem);
	line-height: 1.38;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--fr-retail-color-accent);
	margin: 1.25em 0 1.5em;
	max-width: 48ch;
}

.fr-retail-page .fr-retail-intro__paragraph--callout::first-letter {
	color: inherit;
	font-weight: inherit;
}

/* Keep the feature-block bullets readable when we embed <strong>
   retailer names (wp_kses_post is now in effect). */
.fr-retail-page .fr-retail-feature-block__bullets li strong {
	color: var(--fr-retail-color-text);
	font-weight: 700;
}