/* Caradon category modules: shared tokens and components (from Figma "Product Page New"). */
:root {
	--cs-dark: #2a2b2a;
	--cs-heading: #1e1e1e;
	--cs-light: #e9e8e0;
	--cs-white: #f7f6f0;
	--cs-mustard-dark: #4c4427;
	--cs-border-soft: #e6e6e6;
	--cs-font: Arial, Helvetica, Verdana, sans-serif;
	--cs-track: 0.714px;
}

/* Buttons use the theme's existing .button-black-border class (child theme style/custom.css). */

/* Section heading (H2, small caps style). !important beats the theme's global heading sizes. */
.cs-section-heading,
.fl-module .cs-section-heading {
	margin: 0;
	font-family: var(--cs-font) !important;
	font-size: 30px !important;
	font-weight: 400 !important;
	line-height: 33px !important;
	letter-spacing: 0.71px !important;
	text-transform: uppercase;
	color: var(--cs-heading);
}

.cs-builder-notice {
	padding: 20px;
	border: 1px dashed var(--cs-dark);
	font-family: var(--cs-font);
	font-size: 13px;
	color: var(--cs-dark);
	text-align: center;
}

@media (max-width: 768px) {
	.cs-section-heading,
	.fl-module .cs-section-heading {
		font-size: 24px !important;
		line-height: 28px !important;
	}
}

/* ------------------------------------------------------------------
 * Hero row of the category Themer layout (row class "cs-hero").
 * Figma: Header - Large. Text column 710px, image 590 x 440 flush right.
 * ------------------------------------------------------------------ */
.cs-hero .fl-col:first-child .fl-module,
.cs-hero .fl-col:first-child .fl-module-content {
	margin-top: 0;
	margin-bottom: 0;
}

.cs-hero .fl-col:first-child .fl-module + .fl-module {
	margin-top: 10px;
}

h1.cs-hero-title,
.cs-hero-title.fl-heading,
.cs-hero-title .fl-heading {
	margin: 0;
	font-family: var(--cs-font);
	font-size: 50px;
	font-weight: 400;
	line-height: 50px;
	letter-spacing: 1.702px;
	text-transform: uppercase;
	color: var(--cs-dark);
}

.cs-hero-breadcrumb,
.cs-hero-breadcrumb a,
.cs-hero-breadcrumb span {
	font-family: var(--cs-font);
	font-size: 12px;
	line-height: 17px;
	letter-spacing: var(--cs-track);
	color: #121213;
	text-decoration: none;
}

.cs-hero-breadcrumb a:hover {
	text-decoration: underline;
}

/* Hero text built from standard Text Editor modules (landing pages): small intro copy and the Explore Styles links. */
.cs-hero .fl-col:first-child .fl-rich-text,
.cs-hero .fl-col:first-child .fl-rich-text p {
	color: #000;
}

.cs-hero .fl-rich-text a,
.cs-hero .fl-rich-text a:visited {
	color: #000;
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
}

.cs-hero .fl-rich-text a:hover {
	text-decoration: none;
}

.cs-hero .cs-hero-links p {
	line-height: 27px;
}

/* Each link stays whole when the line wraps, spaced with a margin (no non-breaking spaces needed in the text). */
.cs-hero .cs-hero-links a {
	display: inline-block;
	margin-right: 14px;
}

.cs-hero .cs-hero-links a:first-of-type {
	margin-left: 6px;
}

.cs-hero .cs-hero-links a:last-of-type {
	margin-right: 0;
}

.cs-hero-image,
.cs-hero-image .fl-module-content,
.cs-hero-image .fl-photo,
.cs-hero-image .fl-photo-content {
	display: block;
	width: 100%;
	margin: 0;
}

.cs-hero-image img,
.cs-hero-image .fl-photo-content img,
.cs-hero .cs-hero-image .fl-photo-content img {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
}

@media (max-width: 992px) {
	h1.cs-hero-title,
	.cs-hero-title.fl-heading,
	.cs-hero-title .fl-heading {
		font-size: 36px;
		line-height: 38px;
		letter-spacing: 1.2px;
	}

	.cs-hero-image img,
	.cs-hero-image .fl-photo-content img,
	.cs-hero .cs-hero-image .fl-photo-content img {
		height: 256px;
	}
}

/* Desktop: the image fills the full height of the text column (e.g. when Read More expands), never shorter than 420px. Columns stack at 768px and below, where the fixed 256px height applies. */
@media (min-width: 769px) {
	.cs-hero-image {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
	}

	.cs-hero-image .fl-photo-content {
		position: relative;
		flex: 1 1 auto;
		min-height: 420px;
	}

	.cs-hero-image img,
	.cs-hero-image .fl-photo-content img,
	.cs-hero .cs-hero-image .fl-photo-content img {
		position: absolute;
		inset: 0;
		height: 100%;
	}
}

@media (min-width: 769px) and (max-width: 992px) {
	.cs-hero-image .fl-photo-content {
		min-height: 256px;
	}
}

/* Wide screens: 40% text, 60% image. */
/* Very wide screens: let the hero image run to the right edge of the window instead of stopping at the
   1800px content width. The left padding keeps the text lined up with the rows below. */
@media (min-width: 1841px) {
	/* Selector is deliberately specific: the child theme's custom.css caps full-width rows at 1800px with !important. */
	.fl-row.cs-hero > .fl-row-content-wrap > .fl-row-content.fl-row-full-width {
		max-width: none !important;
		padding-left: max(0px, calc((100vw - 1880px) / 2));
	}
}

@media (min-width: 1401px) {
	.cs-hero .fl-col-group > .fl-col:first-child {
		width: 40%;
	}

	.cs-hero .fl-col-group > .fl-col:last-child {
		width: 60%;
	}
}

/* Stacked layout: image above the text. */
@media (max-width: 768px) {
	.cs-hero .fl-col-group > .fl-col:last-child {
		order: -1;
	}
}

/* Caradon category modules sit flush in their rows; spacing comes from row padding. */
.fl-module[class*="fl-module-cs-"],
.fl-module[class*="fl-module-cs-"] > .fl-module-content {
	margin: 0;
}