.section-enterwapp[data-node].ralco-products {
	--ralco-red: rgb(185, 27, 33);
	--ralco-red-2: rgb(221, 51, 51);
	--ralco-muted: rgb(68, 68, 68);
	--ralco-offwhite: rgb(242, 242, 242);
	--ralco-grey: rgb(237, 237, 237);
	--ralco-dark: rgb(26, 26, 26);
	font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 23px;
}

.section-enterwapp[data-node].ralco-products *,
.section-enterwapp[data-node].ralco-products *::before,
.section-enterwapp[data-node].ralco-products *::after {
	box-sizing: border-box;
	font-family: inherit;
}

.section-enterwapp[data-node].ralco-products .ralco-wrap {
	width: 100%;
	max-width: 1245px;
	margin: 0 auto;
	padding: 0;
}

@media (max-width: 1425px) {
	.section-enterwapp[data-node].ralco-products .ralco-wrap {
		max-width: calc(100vw - 180px);
	}
}

@media (max-width: 999px) {
	.section-enterwapp[data-node].ralco-products .ralco-wrap {
		max-width: 600px;
	}
}

@media (max-width: 767px) {
	.section-enterwapp[data-node].ralco-products .ralco-wrap {
		max-width: 320px;
	}
}

.fl-module-ralco-products > .fl-module-content {
	margin: 0;
}

.fl-row:has(.fl-module-ralco-products) > .fl-row-content-wrap {
	padding: 0;
}

.fl-col:has(> .fl-col-content > .fl-module-ralco-products) > .fl-col-content {
	padding-left: 0;
	padding-right: 0;
}

.fl-col-group > .fl-col:only-child:has(> .fl-col-content > .fl-module-ralco-products) {
	width: 100%;
	max-width: 100%;
}

.fl-col-group:has(> .fl-col > .fl-col-content > .fl-module-ralco-products) {
	display: flex;
	flex-wrap: wrap;
}

.fl-col-group:has(> .fl-col > .fl-col-content > .fl-module-ralco-products) > .fl-col {
	flex: 1 1 0;
	width: auto;
	max-width: none;
}

@media (max-width: 999px) {
	.fl-col-group:has(> .fl-col > .fl-col-content > .fl-module-ralco-products) > .fl-col {
		flex: 0 0 100%;
	}
}

.fl-content:has(.fl-module-ralco-products) {
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
}

.fl-page-content:has(.fl-module-ralco-products) .container,
.fl-page-content:has(.fl-module-ralco-products) .fl-content,
.fl-page-content:has(.fl-module-ralco-products) .fl-row-fixed-width,
.fl-page-content:has(.fl-module-ralco-products) .fl-row-content.fl-row-fixed-width {
	width: 100%;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.fl-page-content:has(.fl-module-ralco-products) .container > .row {
	margin-left: 0;
	margin-right: 0;
}

.section-enterwapp[data-node].ralco-products h1,
.section-enterwapp[data-node].ralco-products h2,
.section-enterwapp[data-node].ralco-products h3,
.section-enterwapp[data-node].ralco-products h4,
.section-enterwapp[data-node].ralco-products p,
.section-enterwapp[data-node].ralco-products a,
.section-enterwapp[data-node].ralco-products li,
.section-enterwapp[data-node].ralco-products span,
.section-enterwapp[data-node].ralco-products address,
.section-enterwapp[data-node].ralco-products strong,
.section-enterwapp[data-node].ralco-products figure {
	font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.section-enterwapp[data-node].ralco-products .ralco-prd-bg {
	background-color: rgb(237, 237, 237);
	background-size: cover;
	background-position: 0% 0%;
	background-repeat: no-repeat;
}

.section-enterwapp[data-node].ralco-products .ralco-prd-wrap {
	padding-top: 50px;
	padding-bottom: 50px;
}

.section-enterwapp[data-node].ralco-products .ralco-prd-head {
	text-align: center;
	margin-bottom: 15px;
}

.section-enterwapp[data-node].ralco-products .ralco-prd-title {
	font-size: 48px;
	line-height: 62px;
	font-weight: 700;
	color: rgb(0, 0, 0);
	text-transform: capitalize;
	margin: 0 0 7px;
}

/* The reference styles this one differently from the About "Read more": black,
   letter-spaced and underlined with a 2px rule, with no leading dash. It has to
   override the shared .ralco-link rules below, so it is scoped to the header. */
.section-enterwapp[data-node].ralco-products .ralco-prd-head .ralco-link {
	position: relative;
	padding-left: 0;
	margin-top: 3px;
	font-size: 18px;
	line-height: 26px;
	font-weight: 400;
	letter-spacing: 2px;
	color: rgb(0, 0, 0);
	border: 0 none;
}

.section-enterwapp[data-node].ralco-products .ralco-prd-head .ralco-link::before {
	display: none;
}

/* an ::after rather than a border: the reference's rule sits under the text
   without adding 2px to the anchor's height */
.section-enterwapp[data-node].ralco-products .ralco-prd-head .ralco-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 2px solid rgb(0, 0, 0);
	transition: border-color 0.2s ease;
}

.section-enterwapp[data-node].ralco-products .ralco-prd-head .ralco-link:hover,
.section-enterwapp[data-node].ralco-products .ralco-prd-head .ralco-link:focus {
	color: var(--ralco-red);
}

.section-enterwapp[data-node].ralco-products .ralco-prd-head .ralco-link:hover::after,
.section-enterwapp[data-node].ralco-products .ralco-prd-head .ralco-link:focus::after {
	border-bottom-color: var(--ralco-red);
}

/* Same treatment as the About module's link - .ralco-link is shared, so both
   modules must style it identically or whichever loads last wins. */
.section-enterwapp[data-node].ralco-products .ralco-link {
	position: relative;
	display: inline-block;
	padding-left: 40px;
	font-size: 18px;
	line-height: 26px;
	font-weight: 400;
	letter-spacing: 2px;
	color: var(--ralco-red);
	text-decoration: none;
	/* Explicit: the unversioned cached copy of this stylesheet still carries an
	   underline, and a property we simply omit would inherit from it. */
	border: 0 none;
	transition: color 0.2s ease;
}

.section-enterwapp[data-node].ralco-products .ralco-link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 28px;
	height: 1px;
	background: currentColor;
	transition: width 0.28s cubic-bezier(0.25, 1, 0.2, 1);
}

.section-enterwapp[data-node].ralco-products .ralco-link:hover::before,
.section-enterwapp[data-node].ralco-products .ralco-link:focus::before {
	width: 34px;
}

.section-enterwapp[data-node].ralco-products .ralco-link:hover,
.section-enterwapp[data-node].ralco-products .ralco-link:focus {
	color: var(--ralco-red-2);
	text-decoration: none;
}

.section-enterwapp[data-node].ralco-products .ralco-prd-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -12.5px;
}

.section-enterwapp[data-node].ralco-products .ralco-prd-tile {
	flex: 0 0 25%;
	max-width: 25%;
	padding: 0 12.5px;
	margin-bottom: 25px;
}

/* reference captions sit flush left under the shot, not centred */
.section-enterwapp[data-node].ralco-products .ralco-prd-card {
	display: block;
	text-align: left;
	text-decoration: none;
}

.section-enterwapp[data-node].ralco-products .ralco-prd-shot {
	overflow: hidden;
	background: #ffffff;
}

/* reference uses a plain 0.2s linear transition here and does not scale */
.section-enterwapp[data-node].ralco-products .ralco-prd-shot img {
	display: block;
	width: 100%;
	height: auto;
	transition: all 0.2s linear;
}

.section-enterwapp[data-node].ralco-products .ralco-prd-name {
	font-size: 18px;
	line-height: 23px;
	font-weight: 400;
	color: rgb(0, 0, 0);
	margin: 10px 0 0;
	padding: 9px 0;
	transition: color 0.25s ease;
}

/* the reference changes nothing on hover here: no scale, no fade, and the
   caption stays black - so neither does this. */

/* Typical laptop screen size*/
@media (max-width: 1300px) {
	.section-enterwapp[data-node].ralco-products .ralco-prd-title { font-size: 40.8px; line-height: 52.7px; }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 999px) {
}

/* Below the reference's 1000px container breakpoint */
@media (max-width: 999px) {
	.section-enterwapp[data-node].ralco-products .ralco-prd-wrap { padding-top: 35px; padding-bottom: 35px; }
	.section-enterwapp[data-node].ralco-products .ralco-prd-tile { flex: 0 0 50%; max-width: 50%; }
	.section-enterwapp[data-node].ralco-products .ralco-prd-name { font-size: 16px; }
}

/* Mobile screen size */
@media (max-width: 767px) {
	/* One tile per row on phones. This is a deliberate departure: the reference
	   keeps two columns down to 375, but the client asked for a single column
	   so the product photos read at full width. */
	.section-enterwapp[data-node].ralco-products .ralco-prd-tile { flex: 0 0 100%; max-width: 100%; }
	.section-enterwapp[data-node].ralco-products .ralco-prd-name { font-size: 18px; line-height: 23px; }
}