/* ============================================================
 * Farnsworth Clopay Connector — frontend styles
 * Matches farnsworthgarage.com brand style guide:
 *   • Red #ed1c23 + Black + White, light gray (#f8f8f8) accents
 *   • System font stack, body 1rem / line-height 1.7
 *   • H2 black 700 with red 3px underline; H3 red 700
 *   • Cards white bg + #dedede border, 8px radius
 *   • CTA banner red bg, black primary button, outline white button
 * ============================================================ */

/* ---- Brand tokens (CSS custom props for easy override) ---- */
 .fcc-section, .fcc-single-door, .fcc-archive {
	--fcc-red:        #ed1c23;
	--fcc-red-dark:   #c0392b;
	--fcc-red-darker: #a93226;
	--fcc-black:      #000000;
	--fcc-text:       #1a1a1a;
	--fcc-text-soft:  #444;
	--fcc-meta:       #666;
	--fcc-bg-soft:    #f8f8f8;
	--fcc-border:     #dedede;
	--fcc-border-soft:#e8e8e8;
	--fcc-white:      #ffffff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--fcc-text);
	line-height: 1.7;
	box-sizing: border-box;
}
 .fcc-section *, .fcc-single-door *, .fcc-archive * { box-sizing: border-box; }

/* ---- Sections & headings ---- */
.fcc-section {
	margin-top: 48px;
	margin-bottom: 48px;
}
.fcc-section__title {
	font-size: 1.65rem;
	font-weight: 700;
	color: var(--fcc-black);
	border-bottom: 3px solid var(--fcc-red);
	padding-bottom: 10px;
	margin: 0 0 24px;
	line-height: 1.25;
}
/* H3 sub-group headings inside grids (Colors → "Standard Colors"/"Premium Colors",
   TopSections → "Single Top Sections"/"Double Top Sections", Hardware → "Plates"/
   "Handles"/"Hinges", Designs → "Series 1"/"Series 2", etc.) */
.fcc-group-title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--fcc-red);
	margin: 28px 0 14px;
	padding: 0;
	border: 0;
	line-height: 1.25;
}
.fcc-section-inner > .fcc-group-title:first-child { margin-top: 0; }

/* ---- Custom intro / description / overview / etc. ----
   No max-width — text blocks fill the full .fcc-contained width
   (1100px) so they align with section titles and visual grids. */

.fcc-description,
.fcc-overview {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--fcc-text);
	margin: 0 0 24px;
}

.fcc-description p,
.fcc-overview p,
.fcc-construction p { margin: 0 0 1em; }

.fcc-construction {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--fcc-text);
	margin: 0 0 24px;
	/* No max-width — fills the full .fcc-contained width. */
}

/* Defensive resets — Clopay's Overview HTML occasionally arrives
   with inline widths, alignment overrides, or table layouts that
   make the block look off-center. Neutralize those. */
.fcc-overview > *,
.fcc-construction > * {
	max-width: 100%;
	box-sizing: border-box;
}
.fcc-overview img,
.fcc-construction img {
	max-width: 100%;
	height: auto;
}
.fcc-overview table,
.fcc-construction table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1em;
}
.fcc-overview *[style*="float"],
.fcc-construction *[style*="float"] {
	float: none !important;
}
.fcc-overview *[align],
.fcc-construction *[align] {
	text-align: inherit !important;
}
.fcc-construction ul, .fcc-construction ol { padding-left: 1.4em; }
.fcc-construction li { margin-bottom: 0.35em; }

/* ---- Answer capsule (used by single template) ---- */

/* ---- Grid layouts ---- */
.fcc-grid {
	display: grid;
	gap: 16px;
}
.fcc-grid--swatch  { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.fcc-grid--card    { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }

/* ---- Cards ---- */
.fcc-card {
	background: var(--fcc-white);
	border: 1px solid var(--fcc-border);
	border-radius: 8px;
	overflow: hidden;
	margin: 0;
	display: flex;
	flex-direction: column;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.fcc-card:hover {
	border-color: var(--fcc-red);
	box-shadow: 0 4px 14px rgba(237,28,35,0.08);
	transform: translateY(-2px);
}
.fcc-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.fcc-card__caption {
	padding: 12px 16px 16px;
	font-size: 0.95rem;
	line-height: 1.4;
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--fcc-text);
}
.fcc-card__desc {
	color: var(--fcc-text-soft);
	font-size: 0.85rem;
	font-weight: 400;
}
.fcc-card--swatch .fcc-card__img { aspect-ratio: 1 / 1; }
.fcc-card--swatch .fcc-card__caption { padding: 8px 12px 12px; font-size: 0.85rem; }

/* Top-section / window-option cards — wide horizontal images.
   Don't crop them; show the whole window strip with light gray padding
   filling any empty space. */
.fcc-top-sections .fcc-grid--card {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.fcc-top-sections .fcc-card__img {
	aspect-ratio: auto;
	height: auto;
	min-height: 90px;
	max-height: 200px;
	width: 100%;
	object-fit: contain;
	background: var(--fcc-bg-soft);
	padding: 10px;
}
@media (max-width: 600px) {
	.fcc-top-sections .fcc-card__img { max-height: 160px; padding: 8px; }
}

/* Decorative Hardware cards — items vary widely in shape (plates are
   rectangular, handles are long-narrow, hinges and lift bars are different).
   Use contain + light gray bg so each piece is fully visible regardless of
   its native aspect ratio. */
.fcc-hardware .fcc-card__img {
	aspect-ratio: auto;
	height: 180px;
	width: 100%;
	object-fit: contain;
	background: var(--fcc-bg-soft);
	padding: 14px;
}
@media (max-width: 600px) {
	.fcc-hardware .fcc-card__img { height: 150px; padding: 12px; }
}

/* Material Options — samples that vary in shape; treat like hardware. */
.fcc-materials .fcc-card__img {
	aspect-ratio: auto;
	height: 160px;
	width: 100%;
	object-fit: contain;
	background: var(--fcc-bg-soft);
	padding: 10px;
}

/* Specialty Glass — pattern samples; contain looks better than crop. */
.fcc-glass .fcc-card__img {
	aspect-ratio: auto;
	height: 160px;
	width: 100%;
	object-fit: contain;
	background: var(--fcc-bg-soft);
	padding: 10px;
}

/* ---- Native gallery (preferred) ---- */
.fcc-gallery { margin: 0 0 16px; }
.fcc-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}
/* Aggressive override: defeats Hello Elementor / WP default button styles
   that bleed pink/magenta link-colors into the gallery thumbnails. */
.fcc-gallery .fcc-gallery__item,
.fcc-gallery .fcc-gallery__item:link,
.fcc-gallery .fcc-gallery__item:visited,
.fcc-gallery .fcc-gallery__item:active {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: #ffffff !important;
	color: #1a1a1a !important;
	border: 1px solid #dedede !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-decoration: none !important;
	outline: none !important;
	overflow: hidden;
	cursor: zoom-in;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font: inherit;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.fcc-gallery .fcc-gallery__item:hover {
	border-color: #ed1c23 !important;
	box-shadow: 0 4px 14px rgba(0,0,0,0.10) !important;
	transform: translateY(-2px);
}
.fcc-gallery .fcc-gallery__item:focus-visible {
	outline: 3px solid #ed1c23 !important;
	outline-offset: 2px !important;
	border-color: #ed1c23 !important;
}
.fcc-gallery .fcc-gallery__item img {
	pointer-events: none; /* clicks always go to the button */
}
.fcc-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4/3;
	object-fit: cover;
}

/* ---- Lightbox ---- */
.fcc-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.92);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 56px;
	opacity: 0;
	transition: opacity .2s ease;
}
.fcc-lightbox.is-open { opacity: 1; }
.fcc-lightbox[hidden] { display: none; }
.fcc-lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
}
.fcc-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 120px);
	object-fit: contain;
	background: #fff;
	border-radius: 6px;
}
.fcc-lightbox__caption {
	color: rgba(255,255,255,0.95);
	font-size: 0.95rem;
	padding-top: 14px;
	text-align: center;
	max-width: 80ch;
}
/* Lightbox controls — white solid buttons with strong contrast.
   Aggressive overrides defeat Hello Elementor's button focus/visited
   color bleed (which was producing the pink boxes). */
.fcc-lightbox__close,
.fcc-lightbox__close:link,
.fcc-lightbox__close:visited,
.fcc-lightbox__close:active,
.fcc-lightbox__nav,
.fcc-lightbox__nav:link,
.fcc-lightbox__nav:visited,
.fcc-lightbox__nav:active {
	position: absolute !important;
	background: #ffffff !important;
	color: #1a1a1a !important;
	border: 2px solid #ffffff !important;
	border-radius: 50% !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important;
	outline: none !important;
	text-decoration: none !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	cursor: pointer;
	line-height: 1;
	padding: 0 !important;
	margin: 0 !important;
	-webkit-appearance: none;
	appearance: none;
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
	z-index: 10;
}
.fcc-lightbox__close:hover,
.fcc-lightbox__nav:hover {
	background: var(--fcc-red) !important;
	color: #ffffff !important;
	border-color: var(--fcc-red) !important;
	box-shadow: 0 6px 22px rgba(237,28,35,0.45) !important;
}
.fcc-lightbox__close:focus-visible,
.fcc-lightbox__nav:focus-visible {
	outline: 3px solid var(--fcc-red) !important;
	outline-offset: 3px !important;
}
.fcc-lightbox__close {
	top: 24px !important;
	right: 28px !important;
	width: 56px !important;
	height: 56px !important;
	font-size: 30px !important;
}
.fcc-lightbox__close:hover { transform: scale(1.08); }
.fcc-lightbox__nav {
	top: 50% !important;
	transform: translateY(-50%);
	width: 64px !important;
	height: 64px !important;
	font-size: 38px !important;
}
.fcc-lightbox__nav--prev { left: 24px !important; }
.fcc-lightbox__nav--next { right: 24px !important; }
.fcc-lightbox__nav:hover { transform: translateY(-50%) scale(1.08); }
.fcc-lightbox__counter {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255,255,255,0.85);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	background: rgba(255,255,255,0.1);
	padding: 4px 12px;
	border-radius: 999px;
}

/* ---- Iframe gallery (fallback only) ---- */
.fcc-gallery__frame-wrap {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--fcc-border);
}
.fcc-gallery__iframe {
	display: block;
	width: 100%;
	height: 620px;
	border: 0;
}
.fcc-gallery__actions {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}

@media (max-width: 768px) {
	.fcc-gallery__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
	.fcc-lightbox { padding: 16px 8px; }
	.fcc-lightbox__nav--prev { left: 6px; }
	.fcc-lightbox__nav--next { right: 6px; }
	.fcc-lightbox__nav { width: 40px; height: 40px; font-size: 24px; }
	.fcc-gallery__iframe { height: 460px; }
}

/* ---- Document list (brochures, install docs) — uniform card sizing ---- */
.fcc-doc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	grid-auto-rows: 1fr;          /* equal-height rows */
	gap: 12px;
}
.fcc-doc { margin: 0; height: 100%; }
.fcc-doc__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	min-height: 80px;             /* uniform minimum height */
	height: 100%;                 /* fill the cell */
	background: var(--fcc-bg-soft);
	border: 1px solid var(--fcc-border);
	border-left: 4px solid var(--fcc-red);
	border-radius: 0 8px 8px 0;
	text-decoration: none;
	color: var(--fcc-text);
	font-size: 0.95rem;
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.fcc-doc__link:hover {
	background: var(--fcc-white);
	border-color: var(--fcc-red);
	transform: translateX(2px);
}
.fcc-doc__thumb {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}
.fcc-doc__title {
	font-weight: 600;
	line-height: 1.35;
	flex: 1;
	min-width: 0;
	/* No line-clamp: full title shown. Cards in the same row stretch
	   to match the tallest title via grid-auto-rows: 1fr. */
}
.fcc-doc__ext {
	font-size: 0.7rem;
	color: var(--fcc-white);
	background: var(--fcc-red);
	margin-left: auto;
	padding: 3px 7px;
	border-radius: 3px;
	font-weight: 800;
	letter-spacing: 0.05em;
	flex-shrink: 0;
}

/* ---- Related products ---- */
.fcc-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
}
.fcc-related-card {
	display: block;
	background: var(--fcc-white);
	border: 1px solid var(--fcc-border);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: var(--fcc-text);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fcc-related-card:hover {
	border-color: var(--fcc-red);
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	transform: translateY(-3px);
}
.fcc-related-card__img {
	background: var(--fcc-bg-soft);
}
.fcc-related-card__img img {
	display: block;
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
}
.fcc-related-card__body { padding: 14px 16px 18px; }
.fcc-related-card__title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--fcc-red);
	margin: 0 0 6px;
	border-bottom: 0;
	padding: 0;
	line-height: 1.25;
}
.fcc-related-card__desc {
	color: var(--fcc-text-soft);
	font-size: 0.88rem;
	margin: 0 0 10px;
	line-height: 1.5;
}
.fcc-related-card__cta {
	color: var(--fcc-red);
	font-weight: 700;
	font-size: 0.85rem;
}
.fcc-related-card__cta::after { content: " →"; }

/* ---- Track & jamb drawings ---- */

/* ---- Spec models ---- */

/* ============================================================
 * Single-Door template (Service-page Template A pattern)
 * ============================================================ */
.fcc-single-door {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--fcc-text);
	line-height: 1.7;
	margin: 0 auto;
	padding: 0;
	overflow-x: hidden;
}

/* Inner content constraint */
.fcc-contained {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* Full-bleed sections */
.fcc-full-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}

/* Split hero: text-left + image-right */
.fcc-hero-split {
	background: var(--fcc-bg-soft);
	border-bottom: 1px solid var(--fcc-border);
	padding: 56px 0 48px;
	margin-top: 100px;            /* desktop top spacing */
}
@media (max-width: 768px) {
	.fcc-hero-split { margin-top: 120px; }   /* mobile top spacing */
}

/* Auto-appended sections (when theme's single.php renders the door) */

/* And the first section inside the plugin's own single template, in
   case the user is rendering with no hero. */
.fcc-single-door > article > section:first-of-type:not(.fcc-hero-split),
.fcc-single-door > article > .fcc-contained:first-of-type {
	margin-top: 100px;
}
@media (max-width: 768px) {
	.fcc-single-door > article > section:first-of-type:not(.fcc-hero-split),
	.fcc-single-door > article > .fcc-contained:first-of-type {
		margin-top: 120px;
	}
}
.fcc-hero-split__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.fcc-hero-split__text { min-width: 0; }
.fcc-eyebrow {
	color: var(--fcc-red);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	margin: 0 0 10px;
}
.fcc-hero-split__title {
	color: var(--fcc-black);
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 14px;
	letter-spacing: -0.01em;
}
.fcc-hero-split__sub {
	color: var(--fcc-text-soft);
	font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: 1.55;
	max-width: 56ch;
	margin: 0 0 24px;
}
.fcc-hero-split__cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.fcc-hero-split__media {
	margin: 0;
	background: var(--fcc-white);
	border: 1px solid var(--fcc-border);
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fcc-hero-split__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: contain;
	background: var(--fcc-white);
}
@media (max-width: 900px) {
	.fcc-hero-split__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.fcc-hero-split__media { order: -1; }
}

/* Buttons */
.fcc-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--fcc-black);
	color: var(--fcc-white);
	padding: 14px 28px;
	border-radius: 4px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	border: 2px solid var(--fcc-black);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.fcc-btn:hover { background: #222; border-color: #222; color: var(--fcc-white); }
.fcc-btn--outline {
	background: transparent;
	color: var(--fcc-white);
	border: 2px solid rgba(255,255,255,0.6);
}
.fcc-btn--outline:hover {
	background: rgba(255,255,255,0.1);
	border-color: var(--fcc-white);
	color: var(--fcc-white);
}
.fcc-btn--outline-dark {
	background: transparent;
	color: var(--fcc-text);
	border: 2px solid var(--fcc-text);
}
.fcc-btn--outline-dark:hover {
	background: var(--fcc-text);
	color: var(--fcc-white);
	border-color: var(--fcc-text);
}
.fcc-btn--ghost {
	background: var(--fcc-white);
	color: var(--fcc-text);
	border: 1px solid var(--fcc-border);
	padding: 10px 18px;
	font-size: 0.92rem;
	font-weight: 600;
}
.fcc-btn--ghost:hover {
	border-color: var(--fcc-red);
	color: var(--fcc-red);
	background: var(--fcc-white);
}
.fcc-btn--red {
	background: var(--fcc-red);
	border-color: var(--fcc-red);
	color: var(--fcc-white);
}
.fcc-btn--red:hover { background: var(--fcc-red-dark); border-color: var(--fcc-red-dark); color: var(--fcc-white); }

/* CTA banner (red full-bleed at the bottom of every door) */
.fcc-cta {
	background: var(--fcc-red);
	color: var(--fcc-white);
	padding: 56px 32px;
	text-align: center;
	margin: 56px 0 0;
}
.fcc-cta h2 {
	color: var(--fcc-white);
	border-bottom: none;
	padding: 0;
	margin: 0 0 12px;
	font-size: clamp(1.4rem, 3vw, 1.85rem);
	font-weight: 800;
}
.fcc-cta p {
	margin: 0 0 24px;
	font-size: 1.05rem;
	opacity: 0.95;
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
}
.fcc-cta__buttons {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

/* ============================================================
 * Doors Overview / Landing Page
 * Used by /clopay-garage-door-options/ archive AND [clopay_doors_overview].
 *
 * The overview escapes its parent container (Elementor column,
 * theme content-area, etc.) via the 100vw + negative-margin trick
 * so the hero, filter bar, and grid run edge-to-edge regardless of
 * where the shortcode is dropped.
 * ============================================================ */
.fcc-doors-overview {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--fcc-text);
	line-height: 1.7;
	/* Full-bleed escape — break out of any narrow parent container. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	margin-top: 100px;             /* Desktop top spacing — clears your fixed header */
	overflow-x: hidden;
}
@media (max-width: 768px) {
	.fcc-doors-overview { margin-top: 120px; }   /* Mobile top spacing */
}
.fcc-doors-overview *, .fcc-doors-overview *::before, .fcc-doors-overview *::after { box-sizing: border-box; }

/* Elementor / theme wrapper override — strip horizontal padding and
   max-width constraints from any ancestor that wraps the doors-overview, so
   the 100vw escape can actually reach the viewport edge. Mirrors the
   same pattern used on your service pages. */

/* Cinematic black hero with red accent + authority badge + stats row */
.fcc-doors-overview__hero {
	position: relative;
	background: #0d0d0d;
	color: #fff;
	padding: 80px 0 72px;
	text-align: center;
	overflow: hidden;
	border-bottom: 4px solid var(--fcc-red);
}
/* Red diagonal accent — subtle geometric flourish */
.fcc-hero-accent {
	position: absolute;
	top: -60%;
	right: -20%;
	width: 70%;
	height: 220%;
	background: linear-gradient(135deg, transparent 0%, transparent 45%, rgba(237,28,35,0.25) 45%, rgba(237,28,35,0.15) 55%, transparent 55%, transparent 100%);
	transform: rotate(-12deg);
	pointer-events: none;
}
/* Authorized Dealer badge — floating top-right on desktop.
   Right offset uses max() so it never clips off-screen on wider viewports. */

.fcc-hero-content { position: relative; z-index: 2; }

.fcc-doors-overview__hero .fcc-eyebrow {
	color: var(--fcc-red);
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	font-weight: 800;
	margin: 0 0 18px;
}
.fcc-doors-overview__title {
	color: #fff;
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
	text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.fcc-doors-overview__subtitle {
	color: rgba(255,255,255,0.82);
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	margin: 0 auto 38px;
	line-height: 1.55;
	max-width: 70ch;
}

/* 4-stat trust row */
.fcc-hero-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	max-width: 920px;
	margin: 0 auto 36px;
	padding: 24px 0;
	border-top: 1px solid rgba(255,255,255,0.15);
	border-bottom: 1px solid rgba(255,255,255,0.15);
}
.fcc-hero-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0 12px;
	border-right: 1px solid rgba(255,255,255,0.12);
}
.fcc-hero-stat:last-child { border-right: 0; }
.fcc-hero-stat__num {
	color: var(--fcc-red);
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
}
.fcc-hero-stat__label {
	color: rgba(255,255,255,0.78);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-align: center;
}

.fcc-hero-cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 4px;
}

@media (max-width: 760px) {
	.fcc-doors-overview__hero { padding: 32px 0 48px; }

	/* Badge becomes inline at the top of the hero, centered above the eyebrow.
	   No more absolute positioning — eliminates the overlap risk on small screens. */
	/* Make the section a column flex so the static badge sits cleanly above content. */
	.fcc-doors-overview__hero {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.fcc-hero-content { width: 100%; }

	/* Diagonal red stripe — make it big enough to span any mobile hero height
	   even when the 2x2 stats grid makes the hero tall. */
	.fcc-hero-accent {
		top: -200%;
		right: -50%;
		width: 200%;
		height: 600%;
	}

	.fcc-hero-stats { grid-template-columns: 1fr 1fr; gap: 18px 0; padding: 20px 0; }
	.fcc-hero-stat { border-right: 0; }
	.fcc-hero-stat:nth-child(1), .fcc-hero-stat:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.12); }
}

/* Filter chips */
/* v1.9.9: Filter chip container — used by BOTH Clopay hub
   (.fcc-doors-overview__filters) AND Invicta hub (.fcc-overview__filters)
   so both chip layouts look identical to the Clopay screenshot. */
.fcc-doors-overview__filters,
.fcc-overview__filters {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 36px 0 28px;
	padding: 20px 22px;
	background: var(--fcc-bg-soft, #f7f7f7);
	border: 1px solid var(--fcc-border, #e6e6e6);
	border-radius: 8px;
}

/* v1.9.9: Force chip styling INSIDE the Invicta hub scope so Elementor's
   default button styles + the theme's aggressive button resets can't win.
   ID-scoped for high specificity, !important where needed. */
#fcc-invicta-hub .fcc-overview__filters {
	background: #f7f7f7 !important;
	border: 1px solid #e6e6e6 !important;
	border-radius: 8px !important;
	padding: 20px 22px !important;
}
#fcc-invicta-hub .fcc-overview__filters .fcc-filter-group {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	align-items: center !important;
}
#fcc-invicta-hub .fcc-overview__filters .fcc-filter-label {
	font-weight: 700 !important;
	color: #1a1a1a !important;
	font-size: 0.85rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	margin-right: 6px !important;
}
#fcc-invicta-hub .fcc-overview__filters .fcc-filter-btn,
#fcc-invicta-hub .fcc-overview__filters .fcc-filter-btn:link,
#fcc-invicta-hub .fcc-overview__filters .fcc-filter-btn:visited {
	display: inline-block !important;
	background: #fff !important;
	color: #1a1a1a !important;
	border: 1px solid #e6e6e6 !important;
	border-radius: 999px !important;
	padding: 6px 16px !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	font-family: inherit !important;
	text-decoration: none !important;
	transition: border-color .15s ease, background .15s ease, color .15s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
}
#fcc-invicta-hub .fcc-overview__filters .fcc-filter-btn:hover {
	border-color: #ed1c23 !important;
	color: #ed1c23 !important;
	background: #fff !important;
}
#fcc-invicta-hub .fcc-overview__filters .fcc-filter-btn.is-active,
#fcc-invicta-hub .fcc-overview__filters .fcc-filter-btn.is-active:hover {
	background: #ed1c23 !important;
	border-color: #ed1c23 !important;
	color: #fff !important;
}
/* v1.11.18: Same ID-scoped chip styling for the Amarr hub. The base
   .fcc-filter-btn rules below use CSS variables without fallbacks
   (var(--fcc-white), var(--fcc-border), var(--fcc-red), var(--fcc-text)) —
   those custom properties are not resolved at the Amarr hub scope, so those
   declarations become invalid values and the theme's default button styles
   (transparent bg, no border, display:block) win. Hard-coded colors here
   guarantee the pill styling. */
#fcc-amarr-hub .fcc-overview__filters {
	background: #f7f7f7 !important;
	border: 1px solid #e6e6e6 !important;
	border-radius: 8px !important;
	padding: 20px 22px !important;
}
#fcc-amarr-hub .fcc-overview__filters .fcc-filter-group {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	align-items: center !important;
}
#fcc-amarr-hub .fcc-overview__filters .fcc-filter-label {
	font-weight: 700 !important;
	color: #1a1a1a !important;
	font-size: 0.85rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	margin-right: 6px !important;
}
#fcc-amarr-hub .fcc-overview__filters .fcc-filter-btn,
#fcc-amarr-hub .fcc-overview__filters .fcc-filter-btn:link,
#fcc-amarr-hub .fcc-overview__filters .fcc-filter-btn:visited {
	display: inline-block !important;
	background: #fff !important;
	color: #1a1a1a !important;
	border: 1px solid #e6e6e6 !important;
	border-radius: 999px !important;
	padding: 6px 16px !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	font-family: inherit !important;
	text-decoration: none !important;
	transition: border-color .15s ease, background .15s ease, color .15s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
}
#fcc-amarr-hub .fcc-overview__filters .fcc-filter-btn:hover {
	border-color: #ed1c23 !important;
	color: #ed1c23 !important;
	background: #fff !important;
}
#fcc-amarr-hub .fcc-overview__filters .fcc-filter-btn.is-active,
#fcc-amarr-hub .fcc-overview__filters .fcc-filter-btn.is-active:hover {
	background: #ed1c23 !important;
	border-color: #ed1c23 !important;
	color: #fff !important;
}
.fcc-filter-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.fcc-filter-label {
	font-weight: 700;
	color: var(--fcc-text);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-right: 6px;
}
.fcc-filter-btn,
.fcc-filter-btn:link,
.fcc-filter-btn:visited {
	display: inline-block !important;
	background: var(--fcc-white) !important;
	color: var(--fcc-text) !important;
	border: 1px solid var(--fcc-border) !important;
	border-radius: 999px !important;
	padding: 6px 16px !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none !important;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.fcc-filter-btn:hover {
	border-color: var(--fcc-red) !important;
	color: var(--fcc-red) !important;
}
.fcc-filter-btn.is-active,
.fcc-filter-btn.is-active:hover {
	background: var(--fcc-red) !important;
	border-color: var(--fcc-red) !important;
	color: var(--fcc-white) !important;
}
.fcc-filter-empty {
	color: var(--fcc-meta);
	font-size: 0.92rem;
	padding-top: 4px;
}
.fcc-filter-reset {
	background: none;
	border: 0;
	color: var(--fcc-red);
	cursor: pointer;
	text-decoration: underline;
	font: inherit;
}

/* Door cards grid */
.fcc-doors-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin: 28px 0 56px;
}
.fcc-door-card,
.fcc-door-card:link,
.fcc-door-card:visited {
	display: block;
	background: var(--fcc-white);
	border: 1px solid var(--fcc-border);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none !important;
	color: var(--fcc-text) !important;
	/* v1.6.60: proper resting card look — soft layered shadow so it reads
	   as a card at rest, not just a bordered box. Hover amplifies the same
	   shadow + lifts the card + hints a red border. */
	box-shadow:
		0 1px 2px rgba(0,0,0,0.04),
		0 4px 14px rgba(0,0,0,0.06);
	transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
	position: relative;
	will-change: transform;
}
.fcc-door-card:hover,
.fcc-door-card:focus-visible {
	border-color: var(--fcc-red) !important;
	box-shadow:
		0 4px 8px rgba(0,0,0,0.06),
		0 18px 40px rgba(0,0,0,0.14);
	transform: translateY(-4px);
}
.fcc-door-card__img {
	background: var(--fcc-bg-soft);
	overflow: hidden; /* clip the img's hover-scale inside the rounded top corners */
}
.fcc-door-card__img img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
	transition: transform .35s ease;
}
.fcc-door-card:hover .fcc-door-card__img img,
.fcc-door-card:focus-visible .fcc-door-card__img img {
	transform: scale(1.04); /* subtle zoom-in on the image on hover */
}
.fcc-door-card__body {
	padding: 18px 22px 22px;
	background: var(--fcc-white);
	position: relative;
}
.fcc-door-card__eyebrow {
	color: var(--fcc-red);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	margin: 0 0 6px;
}
.fcc-door-card__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--fcc-red);
	margin: 0 0 8px;
	border-bottom: 0;
	padding: 0;
	line-height: 1.2;
}
.fcc-door-card__desc {
	color: var(--fcc-text-soft);
	font-size: 0.95rem;
	margin: 0 0 12px;
	line-height: 1.55;
}
.fcc-door-card__cta {
	color: var(--fcc-red);
	font-weight: 700;
	font-size: 0.88rem;
	letter-spacing: 0.02em;
}
.fcc-door-card__cta::after { content: " →"; }

/* ---- Landing-page section common ---- */
.fcc-section__title--landing {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 14px;
}
.fcc-section__lead {
	color: var(--fcc-text-soft);
	font-size: 1.05rem;
	margin: 0 auto 32px;
	text-align: center;
	line-height: 1.6;
	/* No max-width — leads use the full .fcc-contained width. */
}
.fcc-doors-overview .fcc-section { margin: 56px 0; }
.fcc-doors-overview .fcc-section.fcc-full-bleed-bg {
	background: var(--fcc-bg-soft);
	margin: 56px 0;
	padding: 56px 0;
	border-top: 1px solid var(--fcc-border);
	border-bottom: 1px solid var(--fcc-border);
}

/* ---- Intro authority block ---- */
.fcc-intro-block__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px;
	align-items: center;
}
.fcc-intro-block__text .fcc-section__title { text-align: left; border-bottom: none; padding-bottom: 0; max-width: none; margin: 0 0 16px; }
.fcc-intro-block__text p { font-size: 1.02rem; line-height: 1.7; margin: 0 0 14px; color: var(--fcc-text); }
.fcc-intro-block__badge-card {
	background: var(--fcc-black);
	color: var(--fcc-white);
	padding: 24px 28px;
	border-radius: 10px;
	border-top: 4px solid var(--fcc-red);
}
.fcc-intro-block__badge-eyebrow { color: var(--fcc-red); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; margin: 0 0 8px; }
.fcc-intro-block__badge-title { color: var(--fcc-white); font-size: 1.2rem; font-weight: 800; margin: 0 0 4px; }
.fcc-intro-block__badge-meta { color: rgba(255,255,255,0.7); font-size: 0.88rem; margin: 0 0 14px; }
.fcc-intro-block__badge-list { list-style: none; padding: 0; margin: 0; }
.fcc-intro-block__badge-list li { color: rgba(255,255,255,0.92); font-size: 0.92rem; padding: 6px 0 6px 22px; position: relative; line-height: 1.4; }
.fcc-intro-block__badge-list li::before { content: "✓"; position: absolute; left: 0; color: var(--fcc-red); font-weight: 800; }
@media (max-width: 760px) { .fcc-intro-block__grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Understanding Each Collection (explainer cards) ---- */
.fcc-explainer-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 1000px;
	margin: 0 auto;
}
.fcc-explainer-card {
	background: var(--fcc-white);
	border: 1px solid var(--fcc-border);
	border-left: 4px solid var(--fcc-red);
	border-radius: 0 10px 10px 0;
	padding: 22px 28px;
	transition: box-shadow .15s ease;
}
.fcc-explainer-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.05); }
.fcc-explainer-card__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 10px;
}
.fcc-explainer-card__title {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--fcc-red);
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 1.15;
}
.fcc-explainer-card__tag {
	color: var(--fcc-text-soft);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.fcc-explainer-card__desc {
	color: var(--fcc-text);
	font-size: 1rem;
	line-height: 1.65;
	margin: 0 0 10px;
}
.fcc-explainer-card__best {
	color: var(--fcc-text-soft);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var(--fcc-border-soft);
}
.fcc-explainer-card__best strong {
	color: var(--fcc-text);
}
@media (max-width: 600px) {
	.fcc-explainer-card { padding: 18px 20px; }
	.fcc-explainer-card__title { font-size: 1.2rem; }
}

/* ---- Browse by Collection ---- */

/* ---- Why Clopay ---- */
.fcc-why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
}
.fcc-why-card {
	background: var(--fcc-white);
	border: 1px solid var(--fcc-border);
	border-radius: 10px;
	padding: 24px 22px;
	transition: border-color .15s, box-shadow .15s;
}
.fcc-why-card:hover { border-color: var(--fcc-red); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.fcc-why-card__icon {
	width: 56px;
	height: 56px;
	background: rgba(237,28,35,0.08);
	color: var(--fcc-red);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.fcc-why-card__title { font-size: 1.1rem; font-weight: 700; color: var(--fcc-black); margin: 0 0 8px; padding: 0; border: 0; }
.fcc-why-card__desc { color: var(--fcc-text-soft); font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* ---- Carriage House Tier comparison ---- */
.fcc-tiers-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.fcc-tier-card {
	position: relative;
	background: var(--fcc-white);
	border: 1px solid var(--fcc-border);
	border-radius: 12px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
}
.fcc-tier-card.is-recommended {
	border: 2px solid var(--fcc-red);
	box-shadow: 0 8px 28px rgba(237,28,35,0.10);
	transform: translateY(-4px);
}
.fcc-tier-card__ribbon {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--fcc-red);
	color: var(--fcc-white);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 999px;
	white-space: nowrap;
}
.fcc-tier-card__price { color: var(--fcc-red); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; margin: 0 0 6px; }
.fcc-tier-card__title { font-size: 1.5rem; font-weight: 800; color: var(--fcc-black); margin: 0 0 4px; padding: 0; border: 0; line-height: 1.1; }
.fcc-tier-card__sub { color: var(--fcc-text-soft); font-size: 0.95rem; margin: 0 0 18px; }
.fcc-tier-card__list { list-style: none; padding: 0; margin: 0 0 18px; flex: 1; }
.fcc-tier-card__list li { padding: 8px 0 8px 26px; border-bottom: 1px solid var(--fcc-border-soft); position: relative; font-size: 0.92rem; line-height: 1.45; color: var(--fcc-text); }
.fcc-tier-card__list li:last-child { border-bottom: 0; }
.fcc-tier-card__list li::before { content: "✓"; position: absolute; left: 0; color: var(--fcc-red); font-weight: 800; }
.fcc-tier-card__best { font-size: 0.9rem; color: var(--fcc-text-soft); margin: 0; line-height: 1.5; }
@media (max-width: 900px) { .fcc-tiers-grid { grid-template-columns: 1fr; } .fcc-tier-card.is-recommended { transform: none; } }

/* ============================================================
 * Section 1: Material Matters
 * ============================================================ */
.fcc-mat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fcc-mat-card {
	background: var(--fcc-white);
	border: 1px solid var(--fcc-border);
	border-top: 4px solid var(--fcc-red);
	border-radius: 0 0 10px 10px;
	padding: 22px 22px 20px;
	display: flex;
	flex-direction: column;
}
.fcc-mat-card__head { margin-bottom: 14px; }
.fcc-mat-card__title { font-size: 1.4rem; font-weight: 800; color: var(--fcc-black); margin: 0 0 4px; padding: 0; border: 0; line-height: 1.1; }
.fcc-mat-card__tag { color: var(--fcc-red); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.fcc-mat-card__pros { list-style: none; padding: 0; margin: 0 0 16px; }
.fcc-mat-card__pros li { padding: 6px 0 6px 22px; position: relative; font-size: 0.92rem; line-height: 1.45; border-bottom: 1px solid var(--fcc-border-soft); }
.fcc-mat-card__pros li:last-child { border-bottom: 0; }
.fcc-mat-card__pros li::before { content: "✓"; position: absolute; left: 0; color: var(--fcc-red); font-weight: 800; }
.fcc-mat-card__specs { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0 0 14px; padding: 12px 14px; background: var(--fcc-bg-soft); border-radius: 6px; font-size: 0.85rem; }
.fcc-mat-card__specs dt { color: var(--fcc-text-soft); font-weight: 600; margin: 0; }
.fcc-mat-card__specs dd { color: var(--fcc-text); font-weight: 700; margin: 0; text-align: right; }
.fcc-mat-card__cons { font-size: 0.86rem; color: var(--fcc-text-soft); line-height: 1.55; margin: 0; padding-top: 12px; border-top: 1px solid var(--fcc-border-soft); }
.fcc-mat-card__cons strong { color: var(--fcc-text); }
@media (max-width: 1000px) { .fcc-mat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fcc-mat-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * Section 2: Find the Right Door for Your Home (matcher)
 * ============================================================ */
.fcc-home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fcc-home-card {
	background: var(--fcc-white);
	border: 1px solid var(--fcc-border);
	border-radius: 10px;
	padding: 24px 22px 22px;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.fcc-home-card:hover { border-color: var(--fcc-red); box-shadow: 0 6px 18px rgba(0,0,0,0.06); transform: translateY(-2px); }
.fcc-home-card__illus { width: 100%; height: 90px; position: relative; margin: 0 0 16px; }
.fcc-home-card__roof, .fcc-home-card__body, .fcc-home-card__door { position: absolute; }
/* Stucco & Tile — tan walls with red tile roof */
.fcc-home--stucco .fcc-home-card__roof { left: 0; right: 0; top: 0; height: 38px; background: linear-gradient(135deg, #b53a2a 0%, #8b2818 100%); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.fcc-home--stucco .fcc-home-card__body { left: 8%; right: 8%; bottom: 0; height: 56px; background: #d4b896; border: 1px solid #b59874; }
.fcc-home--stucco .fcc-home-card__door { left: 36%; bottom: 0; width: 28%; height: 38px; background: #6b4a2a; border: 2px solid #4a3018; border-bottom: 0; }
/* Modern Desert — dark flat-roof angular */
.fcc-home--modern .fcc-home-card__roof { left: 0; right: 0; top: 18px; height: 6px; background: #1a1a1a; }
.fcc-home--modern .fcc-home-card__body { left: 6%; right: 6%; top: 24px; bottom: 0; background: #d8d4cd; border: 1px solid #aaa6a0; }
.fcc-home--modern .fcc-home-card__door { left: 40%; bottom: 0; width: 28%; height: 50px; background: rgba(40,40,40,0.85); border: 2px solid #1a1a1a; border-bottom: 0; }
/* Traditional Ranch — wide horizontal */
.fcc-home--ranch .fcc-home-card__roof { left: 0; right: 0; top: 0; height: 28px; background: linear-gradient(135deg, #6b5a4a 0%, #4a3d33 100%); clip-path: polygon(8% 100%, 50% 0, 92% 100%); }
.fcc-home--ranch .fcc-home-card__body { left: 4%; right: 4%; bottom: 0; height: 60px; background: #e8dac4; border: 1px solid #c4b59a; }
.fcc-home--ranch .fcc-home-card__door { left: 38%; bottom: 0; width: 30%; height: 42px; background: #5a4030; border: 2px solid #3a2818; border-bottom: 0; }
/* Modern Farmhouse — board & batten with gabled */
.fcc-home--farmhouse .fcc-home-card__roof { left: 0; right: 0; top: 0; height: 36px; background: #1a1a1a; clip-path: polygon(8% 100%, 50% 0, 92% 100%); }
.fcc-home--farmhouse .fcc-home-card__body { left: 8%; right: 8%; bottom: 0; height: 58px; background: #f5f1ea; border: 1px solid #c4b59a; background-image: repeating-linear-gradient(90deg, transparent 0, transparent 8px, rgba(180,160,130,0.4) 8px, rgba(180,160,130,0.4) 9px); }
.fcc-home--farmhouse .fcc-home-card__door { left: 36%; bottom: 0; width: 28%; height: 42px; background: #1a1a1a; border: 2px solid #1a1a1a; border-bottom: 0; }

.fcc-home-card__title { font-size: 1.2rem; font-weight: 700; color: var(--fcc-red); margin: 0 0 6px; padding: 0; border: 0; line-height: 1.2; }
.fcc-home-card__desc { color: var(--fcc-text-soft); font-size: 0.88rem; line-height: 1.55; margin: 0 0 14px; }
.fcc-home-card__rec-label { color: var(--fcc-text); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 8px; padding-top: 12px; border-top: 1px solid var(--fcc-border-soft); }
.fcc-home-card__doors { list-style: none; padding: 0; margin: 0; }
.fcc-home-card__doors li { padding: 6px 0 6px 22px; position: relative; font-size: 0.88rem; line-height: 1.4; color: var(--fcc-text); }
.fcc-home-card__doors li::before { content: "→"; position: absolute; left: 0; color: var(--fcc-red); font-weight: 800; }
@media (max-width: 1000px) { .fcc-home-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fcc-home-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * Section 3: Innovation That Sets Clopay Apart
 * ============================================================ */
.fcc-innov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fcc-innov-card {
	background: var(--fcc-white);
	border: 1px solid var(--fcc-border);
	border-radius: 10px;
	padding: 24px 22px;
	transition: border-color .15s, box-shadow .15s;
}
.fcc-innov-card:hover { border-color: var(--fcc-red); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.fcc-innov-card__badge {
	display: inline-block;
	background: var(--fcc-red);
	color: var(--fcc-white);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 4px;
	margin-bottom: 14px;
}
.fcc-innov-card__title { font-size: 1.15rem; font-weight: 700; color: var(--fcc-black); margin: 0 0 10px; padding: 0; border: 0; line-height: 1.25; }
.fcc-innov-card__desc { color: var(--fcc-text-soft); font-size: 0.92rem; line-height: 1.6; margin: 0; }
@media (max-width: 1000px) { .fcc-innov-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fcc-innov-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * Section 4: Anatomy of a Clopay Door
 * ============================================================ */

/* ============================================================
 * Section 5: Most Popular in Your City
 * ============================================================ */
.fcc-city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fcc-city-card {
	background: var(--fcc-white);
	border: 1px solid var(--fcc-border);
	border-left: 4px solid var(--fcc-red);
	border-radius: 0 8px 8px 0;
	padding: 18px 20px;
	transition: box-shadow .15s;
}
.fcc-city-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.fcc-city-card__name { font-size: 1.1rem; font-weight: 800; color: var(--fcc-black); margin: 0 0 4px; padding: 0; border: 0; line-height: 1.2; }
.fcc-city-card__arch { color: var(--fcc-text-soft); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin: 0 0 10px; }
.fcc-city-card__door { font-size: 0.95rem; font-weight: 700; color: var(--fcc-red); margin: 0 0 8px; line-height: 1.3; }
.fcc-city-card__why { color: var(--fcc-text-soft); font-size: 0.86rem; line-height: 1.55; margin: 0; }
@media (max-width: 1000px) { .fcc-city-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fcc-city-grid { grid-template-columns: 1fr; } }

/* ---- AZ Climate ---- */
.fcc-climate-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}
.fcc-climate-card {
	background: var(--fcc-white);
	border: 1px solid var(--fcc-border);
	border-left: 4px solid var(--fcc-red);
	border-radius: 0 10px 10px 0;
	padding: 22px 26px;
}
.fcc-climate-card__title { font-size: 1.2rem; font-weight: 700; color: var(--fcc-red); margin: 0 0 10px; padding: 0; border: 0; line-height: 1.25; }
.fcc-climate-card__body { color: var(--fcc-text); font-size: 0.95rem; line-height: 1.65; margin: 0; }
@media (max-width: 760px) { .fcc-climate-grid { grid-template-columns: 1fr; } }

/* ---- FAQ ---- */
.fcc-faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 900px; margin: 0 auto; }
.fcc-faq-item {
	border: 1px solid var(--fcc-border);
	border-radius: 8px;
	overflow: hidden;
	background: var(--fcc-white);
}
.fcc-faq-item__q {
	background: var(--fcc-black);
	color: var(--fcc-white);
	padding: 16px 22px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 50px;
	line-height: 1.4;
}
.fcc-faq-item__q::-webkit-details-marker { display: none; }
.fcc-faq-item__q::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--fcc-red); font-size: 1.4rem; font-weight: 700; transition: transform .2s; }
.fcc-faq-item[open] .fcc-faq-item__q::after { content: "−"; }
.fcc-faq-item__a { padding: 18px 22px; background: var(--fcc-white); color: var(--fcc-text); font-size: 0.96rem; line-height: 1.65; }
.fcc-faq-item__a p { margin: 0; }

@media (max-width: 600px) {
	.fcc-doors-overview__hero { padding: 48px 20px 36px; }
	.fcc-doors-overview__filters { padding: 16px 14px; }
	.fcc-doors-grid { grid-template-columns: 1fr; gap: 18px; }
	.fcc-door-card__img img { height: 200px; }
}

/* ============================================================
 * Archive (/doors/) — service-style listing
 * ============================================================ */
.fcc-archive {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--fcc-text);
	line-height: 1.7;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

/* ============================================================
 * Auto-appended sections (when content is rendered through
 * the_content filter on the theme's default single template)
 * ============================================================ */

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 768px) {
	.fcc-cta { padding: 40px 20px; }
	.fcc-section { margin: 36px 0; }
	.fcc-section__title { font-size: 1.4rem; }
	.fcc-grid--swatch  { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
	.fcc-grid--card    { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
}
@media (max-width: 600px) {
	.fcc-cta h2 { font-size: 1.35rem; }
}

/* ============================================================
 * INVICTA NAMESPACE — .fcc-i-*
 * Fully isolated from Clopay .fcc-* styles. Mirrors the Clopay
 * visual system but uses its own selectors so the two brands
 * can evolve independently.
 * ============================================================ */

.fcc-i-section { margin: 56px 0; }

/* ---- Overview / landing page ---- */

/* ---- Intro block (under hero) ---- */

/* ---- Filter chips ---- */

/* ---- Door grid ---- */

/* ---- Why Invicta ---- */

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

/* ---- Single door page sections (appended via the_content) ---- */

/* Features list (red checkmarks) */

/* Gallery */

/* Lightbox */
.fcc-i-lightbox {
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.92);
	display: flex; align-items: center; justify-content: center;
	z-index: 99999;
	opacity: 0;
	transition: opacity .2s ease;
}
.fcc-i-lightbox.is-open { opacity: 1; }
.fcc-i-lightbox__figure { margin: 0; max-width: 92vw; max-height: 88vh; }
.fcc-i-lightbox__img    { max-width: 92vw; max-height: 88vh; display: block; box-shadow: 0 14px 60px rgba(0,0,0,0.5); }
.fcc-i-lightbox__close, .fcc-i-lightbox__nav {
	position: absolute;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.2);
	color: #fff;
	width: 48px; height: 48px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.6rem;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s ease;
}
.fcc-i-lightbox__close:hover, .fcc-i-lightbox__nav:hover { background: rgba(255,255,255,0.18); }
.fcc-i-lightbox__close { top: 20px; right: 20px; }
.fcc-i-lightbox__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.fcc-i-lightbox__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }
.fcc-i-lightbox__counter   { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.9rem; letter-spacing: 0.06em; }

/* PDF download cards */

/* Fallback single template chrome */

/* Responsive */
@media (max-width: 640px) {
	.fcc-i-section { margin: 40px 0; }
}

/* ============================================================
 * SCOPED BUTTON OVERRIDES — v1.6.10, hardened in v1.6.11
 *
 * Uses !important on the critical properties because Elementor's
 * Kit CSS and Site Settings > Theme Style link colors were
 * beating even .fcc-doors-overview .fcc-btn (0,2,0 specificity)
 * — likely due to Elementor selectors like `body .elementor-widget-container a`
 * being 0,2,1 and using their own !important flags.
 *
 * Also introduces .fcc-btn--white, a white / red-text variant
 * used on the red bottom CTA banner where black-.fcc-btn read
 * as black-on-red.
 * ============================================================ */

/* CTA banner — force red background and white text so Elementor Kit CSS can't paint the section white. */
.fcc-doors-overview .fcc-cta,
.fcc-doors-overview section.fcc-cta {
	background: var(--fcc-red) !important;
	color: var(--fcc-white) !important;
	padding: 56px 32px !important;
	text-align: center !important;
	margin-top: 56px !important;
}
.fcc-doors-overview .fcc-cta h2,
.fcc-doors-overview .fcc-cta h3 {
	color: var(--fcc-white) !important;
	border-bottom: none !important;
	padding: 0 !important;
}
.fcc-doors-overview .fcc-cta p {
	color: var(--fcc-white) !important;
	opacity: 0.95 !important;
}

/* Base button — !important so Elementor's link-color rules can't override. */
.fcc-doors-overview .fcc-btn,
.fcc-doors-overview a.fcc-btn,
.fcc-doors-overview .fcc-cta a.fcc-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: var(--fcc-black) !important;
	color: var(--fcc-white) !important;
	padding: 14px 28px !important;
	border-radius: 4px !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	text-decoration: none !important;
	border: 2px solid var(--fcc-black) !important;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.fcc-doors-overview .fcc-btn:hover,
.fcc-doors-overview a.fcc-btn:hover {
	background: #222 !important;
	border-color: #222 !important;
	color: var(--fcc-white) !important;
	text-decoration: none !important;
}

/* Red variant — used in the hero. */
.fcc-doors-overview .fcc-btn--red,
.fcc-doors-overview a.fcc-btn--red {
	background: var(--fcc-red) !important;
	border-color: var(--fcc-red) !important;
	color: var(--fcc-white) !important;
}
.fcc-doors-overview .fcc-btn--red:hover,
.fcc-doors-overview a.fcc-btn--red:hover {
	background: var(--fcc-red-dark) !important;
	border-color: var(--fcc-red-dark) !important;
	color: var(--fcc-white) !important;
}

/* Outline variant — used for the Call button in hero and CTA. */
.fcc-doors-overview .fcc-btn--outline,
.fcc-doors-overview a.fcc-btn--outline,
.fcc-doors-overview .fcc-cta a.fcc-btn--outline {
	background: transparent !important;
	color: var(--fcc-white) !important;
	border: 2px solid rgba(255,255,255,0.6) !important;
}
.fcc-doors-overview .fcc-btn--outline:hover,
.fcc-doors-overview a.fcc-btn--outline:hover {
	background: rgba(255,255,255,0.12) !important;
	border-color: var(--fcc-white) !important;
	color: var(--fcc-white) !important;
}

/* White variant — primary CTA button on the red banner. */
.fcc-doors-overview .fcc-btn--white,
.fcc-doors-overview a.fcc-btn--white,
.fcc-doors-overview .fcc-cta a.fcc-btn--white {
	background: var(--fcc-white) !important;
	color: var(--fcc-red) !important;
	border: 2px solid var(--fcc-white) !important;
	font-weight: 800 !important;
}
.fcc-doors-overview .fcc-btn--white:hover,
.fcc-doors-overview a.fcc-btn--white:hover {
	background: var(--fcc-black) !important;
	color: var(--fcc-white) !important;
	border-color: var(--fcc-black) !important;
}

/* ==========================================================================
   v1.6.63 — HUB PAGE: LOCAL DEALER EDITORIAL + CITIES-WE-INSTALL-IN GRID
   Substantial SEO content sections between the doors grid and Why Invicta.
   ========================================================================== */

/* Local dealer editorial section
   ------------------------------------------------------------------------ */
.fcc-doors-overview .fcc-hub-dealer {
	padding: 64px 0 !important;
	background: #f5f5f5 !important; /* light cream — no black backgrounds */
	border-top: 1px solid rgba(0,0,0,0.06) !important;
	border-bottom: 1px solid rgba(0,0,0,0.06) !important;
	text-align: center !important; /* v1.6.65: center the whole dealer editorial */
}
.fcc-doors-overview .fcc-hub-dealer__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--fcc-red);
	margin-bottom: 14px;
}
.fcc-doors-overview .fcc-hub-dealer .fcc-section__title {
	margin: 0 auto 24px !important;
	max-width: 900px;
	text-align: center !important;
}
/* v1.6.65: keep the red accent underline on section titles centered too. */
.fcc-doors-overview .fcc-hub-dealer .fcc-section__title--landing::after {
	margin-left: auto !important;
	margin-right: auto !important;
}
.fcc-doors-overview .fcc-hub-dealer__body {
	max-width: 820px;
	margin: 0 auto; /* v1.6.65: center the body block itself */
	text-align: center !important;
}
.fcc-doors-overview .fcc-hub-dealer__body p {
	font-size: 17px !important;
	line-height: 1.75 !important;
	color: #333 !important;
	margin: 0 0 18px !important;
	text-align: center !important;
}
.fcc-doors-overview .fcc-hub-dealer__body p strong {
	color: #111;
	font-weight: 700;
}
.fcc-doors-overview .fcc-hub-dealer__cta {
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center; /* v1.6.65: center the button row */
}

/* v1.6.65: dark outline button variant — used for the Call/Text button
   inside the cream dealer section where the white-on-transparent outline
   button is invisible. Scoped inside .fcc-doors-overview to beat the
   generic .fcc-btn--outline overrides that force white text. */
.fcc-doors-overview .fcc-hub-dealer .fcc-btn--outline-dark,
.fcc-doors-overview .fcc-hub-dealer a.fcc-btn--outline-dark {
	background: transparent !important;
	color: #111 !important;
	border: 2px solid #111 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-weight: 700 !important;
}
.fcc-doors-overview .fcc-hub-dealer .fcc-btn--outline-dark:hover,
.fcc-doors-overview .fcc-hub-dealer a.fcc-btn--outline-dark:hover {
	background: #111 !important;
	color: var(--fcc-white) !important;
	border-color: #111 !important;
}

/* Cities we install Invicta doors in — linked card grid
   ------------------------------------------------------------------------ */
.fcc-doors-overview .fcc-hub-cities {
	padding: 64px 0 !important;
	background: #ffffff !important;
}
.fcc-doors-overview .fcc-hub-cities .fcc-section__title {
	margin: 0 0 12px !important;
}
.fcc-doors-overview .fcc-hub-cities__intro {
	font-size: 17px !important;
	line-height: 1.65 !important;
	color: #444 !important;
	max-width: 780px;
	margin: 0 0 32px !important;
}
.fcc-doors-overview .fcc-hub-cities__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}
.fcc-doors-overview .fcc-hub-cities__card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px;
	background: #f5f5f5;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 10px;
	color: #111;
	text-decoration: none !important;
	font-weight: 600;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.fcc-doors-overview .fcc-hub-cities__card:hover {
	transform: translateY(-2px);
	background: #fff;
	border-color: var(--fcc-red);
	box-shadow: 0 8px 22px rgba(0,0,0,0.08);
	color: var(--fcc-red);
}
.fcc-doors-overview .fcc-hub-cities__card.is-home {
	background: #fff;
	border-color: var(--fcc-red);
}
.fcc-doors-overview .fcc-hub-cities__pin {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(198,40,40,0.1);
	color: var(--fcc-red);
	border-radius: 50%;
}
.fcc-doors-overview .fcc-hub-cities__name {
	flex: 1 1 auto;
	font-size: 15px;
	line-height: 1.3;
}
.fcc-doors-overview .fcc-hub-cities__badge {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.75px;
	text-transform: uppercase;
	color: var(--fcc-red);
	background: rgba(198,40,40,0.1);
	padding: 4px 8px;
	border-radius: 999px;
}

@media (max-width: 640px) {
	.fcc-doors-overview .fcc-hub-dealer,
	.fcc-doors-overview .fcc-hub-cities {
		padding: 44px 0 !important;
	}
	.fcc-doors-overview .fcc-hub-dealer__body p {
		font-size: 16px !important;
	}
	.fcc-doors-overview .fcc-hub-cities__grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.fcc-doors-overview .fcc-hub-cities__card {
		padding: 12px 14px;
	}
	.fcc-doors-overview .fcc-hub-cities__badge {
		display: none;
	}
}

/* =========================================================================
   v1.7.0 — Clopay single door page: Warranty + Reviews section styling.
   ========================================================================= */
.fcc-warranty {
	background: #f5f5f5;
	border-radius: 10px;
	padding: 32px 36px;
	border: 1px solid rgba(0,0,0,0.06);
}
.fcc-warranty__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--fcc-red, #ed1c23);
	margin-bottom: 8px;
}
.fcc-warranty__title {
	font-size: 1.35rem;
	font-weight: 800;
	margin: 0 0 12px;
	color: #1a1a1a;
}
.fcc-warranty__intro {
	margin: 0 0 22px;
	color: #444;
	line-height: 1.6;
	max-width: 780px;
}
.fcc-warranty__table-wrap {
	overflow-x: auto;
	margin: 0 0 18px;
}
.fcc-warranty__table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
}
.fcc-warranty__table th,
.fcc-warranty__table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid rgba(0,0,0,0.08);
	vertical-align: top;
}
.fcc-warranty__table thead th {
	background: #1a1a1a;
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.fcc-warranty__table tbody tr:last-child td {
	border-bottom: 0;
}
.fcc-warranty__table td:first-child {
	font-weight: 700;
	color: #1a1a1a;
	width: 34%;
}
.fcc-warranty__note {
	margin: 0 0 22px;
	padding: 12px 16px;
	background: #fff;
	border-left: 3px solid var(--fcc-red, #ed1c23);
	border-radius: 4px;
	color: #444;
	font-size: 0.92rem;
	line-height: 1.55;
}
.fcc-warranty__universal {
	margin: 22px 0 0;
	padding: 18px 20px;
	background: #fff;
	border-radius: 6px;
	border: 1px solid rgba(0,0,0,0.06);
}
.fcc-warranty__universal h4 {
	margin: 0 0 12px;
	font-size: 1rem;
	font-weight: 800;
	color: #1a1a1a;
}
.fcc-warranty__universal ul {
	margin: 0;
	padding-left: 20px;
	color: #444;
}
.fcc-warranty__universal li {
	margin-bottom: 8px;
	line-height: 1.55;
	font-size: 0.95rem;
}
.fcc-warranty__universal a {
	color: var(--fcc-red, #ed1c23);
	text-decoration: underline;
}
.fcc-warranty__pdf {
	margin: 22px 0 0;
	font-size: 0.95rem;
	font-weight: 700;
}
.fcc-warranty__pdf a {
	color: var(--fcc-red, #ed1c23);
	text-decoration: underline;
}
@media (max-width: 640px) {
	.fcc-warranty { padding: 22px 20px; }
	.fcc-warranty__table td,
	.fcc-warranty__table th { padding: 10px 12px; font-size: 0.9rem; }
	/* Card-stack pattern for the warranty table on narrow screens. */
	.fcc-warranty__table,
	.fcc-warranty__table tbody,
	.fcc-warranty__table tr,
	.fcc-warranty__table td { display: block; width: 100%; }
	.fcc-warranty__table thead { display: none; }
	.fcc-warranty__table tr {
		background: #fff;
		border-radius: 6px;
		margin-bottom: 10px;
		border: 1px solid rgba(0,0,0,0.08);
		padding: 4px 0;
	}
	.fcc-warranty__table td { border-bottom: 1px solid rgba(0,0,0,0.06); }
	.fcc-warranty__table td:last-child { border-bottom: 0; }
	.fcc-warranty__table td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.72rem;
		font-weight: 800;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		color: #888;
		margin-bottom: 4px;
	}
	.fcc-warranty__table td:first-child { width: auto; background: transparent; }
}

/* Reviews section (Clopay single door pages) */
.fcc-reviews {
	background: #fff;
	border-radius: 10px;
	padding: 32px 36px;
	border: 1px solid rgba(0,0,0,0.06);
}
.fcc-reviews__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--fcc-red, #ed1c23);
	margin-bottom: 8px;
}
.fcc-reviews__intro {
	margin: 0 0 20px;
	color: #444;
	line-height: 1.6;
	max-width: 780px;
}
.fcc-reviews__widget { margin: 0; }
@media (max-width: 640px) {
	.fcc-reviews { padding: 22px 20px; }
}

/* =========================================================================
   v1.8.0 — Clopay single door page: SEO section stack styling
   (installer tagline, pitch, money-keyword FAQs, cities grid)
   ========================================================================= */

/* =========================================================================
   v1.9.2 — Surgical centering. Previous versions used a blanket rule that
   forced everything inside .fcc-section to center-align, which broke the
   pre-built multi-column sections (Why Clopay, Materials Compare, Innovation,
   Popular by City, Home Style Match, etc.) and made tables + grids look
   funny. Now we ONLY center specific known elements: outer containers,
   section H2 titles, hero content, CTA button rows, and known callout
   blocks. Everything else renders in its natural layout.
   ========================================================================= */

/* Center the outer container on the viewport. */
.fcc-single-door .fcc-contained {
	max-width: 1180px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	box-sizing: border-box !important;
}

/* --- HERO on single door pages: center the split-hero text column --- */
.fcc-single-door .fcc-hero-split__inner {
	text-align: center !important;
}
.fcc-single-door .fcc-hero-split__text {
	text-align: center !important;
	align-items: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.fcc-single-door .fcc-hero-split__cta {
	justify-content: center !important;
}

/* --- HERO on Collection archive: center everything in the hero --- */

/* --- Section H2 titles centered everywhere --- */
.fcc-single-door .fcc-section__title {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --- Known intro/lead paragraphs centered under H2s --- */
.fcc-single-door .fcc-pitch__eyebrow,
.fcc-single-door .fcc-hub-cities__intro,
.fcc-single-door .fcc-reviews__eyebrow,
.fcc-single-door .fcc-reviews__intro,
.fcc-single-door .fcc-warranty__eyebrow,
.fcc-single-door .fcc-warranty__intro {
	text-align: center !important;
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --- Long-form editorial (pitch body) stays left-aligned inside a
       centered max-width column so it reads naturally. --- */
.fcc-single-door .fcc-pitch,
.fcc-single-door .fcc-pitch__body {
	max-width: 820px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: left !important;
}
.fcc-single-door .fcc-pitch__body p {
	text-align: left !important;
}

/* --- Installer tagline and answer capsule centered on the page. --- */
.fcc-single-door .fcc-installer-tagline {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 900px !important;
}

/* --- The known card / grid / accordion blocks stay centered on the
       viewport but their internal cells align naturally. --- */
.fcc-single-door .fcc-related-grid,
.fcc-single-door .fcc-money-faqs,
.fcc-single-door .fcc-warranty,
.fcc-single-door .fcc-reviews,
.fcc-single-door .fcc-mid-cta {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --- Bottom red CTA banner + button rows centered. --- */
.fcc-single-door .fcc-cta {
	text-align: center !important;
}
.fcc-single-door .fcc-cta__buttons {
	justify-content: center !important;
}

/* --- Hub-page dealer editorial (v1.9.0): eyebrow + H2 centered,
       long-form body prose LEFT inside centered column, CTA row centered. --- */
.fcc-doors-overview .fcc-hub-dealer__eyebrow {
	text-align: center !important;
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.fcc-doors-overview .fcc-hub-dealer__body {
	text-align: left !important;
}
.fcc-doors-overview .fcc-hub-dealer__body p {
	text-align: left !important;
}
.fcc-doors-overview .fcc-hub-dealer__cta {
	justify-content: center !important;
}
/* Cities-grid intro centered on the hub. */
.fcc-doors-overview .fcc-hub-cities__intro {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* =========================================================================
   v1.8.7 — Top margin on Collection archive pages so the hero clears the
   sticky site header. 100px on desktop, 120px on mobile — matches the
   treatment single door pages get. Scoped to the archive template only.
   ========================================================================= */

/* =========================================================================
   v1.8.8 — Upgraded Collection hero CTA buttons. Bigger, better hover
   animation, phone icon on the call button, arrow icon on the primary
   button that slides right on hover. Reassurance strip below the buttons
   ("Free consultation · Written quote · Same-day scheduling") lowers the
   click-anxiety and reinforces conversion intent.
   ========================================================================= */
/* Primary red button — with subtle lift, deeper shadow, and arrow slide on hover. */
/* Secondary outline-dark button — with subtle fill + lift on hover. */
/* Small reassurance strip below the buttons. */

/* =========================================================================
   v1.8.5 — Mid-page CTA (light cream card with red accent). Visually
   distinct from the bottom red banner so the two don't feel duplicative.
   ========================================================================= */
.fcc-mid-cta {
	background: linear-gradient(135deg, #f5f5f5 0%, #fff 100%);
	border: 1px solid rgba(0,0,0,0.08);
	border-left: 4px solid var(--fcc-red, #ed1c23);
	border-radius: 10px;
	padding: 36px 40px;
	margin: 40px auto;
	box-shadow: 0 4px 14px rgba(0,0,0,0.04);
	text-align: center;
	max-width: 900px;
}
.fcc-mid-cta__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--fcc-red, #ed1c23);
	margin-bottom: 12px;
}
.fcc-mid-cta__title {
	font-size: 1.6rem !important;
	font-weight: 800 !important;
	color: #1a1a1a !important;
	margin: 0 0 12px !important;
	line-height: 1.25 !important;
	padding: 0 !important;
	border: 0 !important;
}
.fcc-mid-cta__title::after { content: none !important; }
.fcc-mid-cta__sub {
	color: #444;
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 24px;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.fcc-mid-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.fcc-mid-cta__buttons .fcc-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
@media (max-width: 640px) {
	.fcc-mid-cta { padding: 24px 20px; margin: 28px auto; }
	.fcc-mid-cta__title { font-size: 1.3rem !important; }
	.fcc-mid-cta__sub { font-size: 15px; margin-bottom: 20px; }
}

/* Installer trust tagline — thin red-accented line just below the hero.
   v1.8.4: Tightened AGAIN + normalized rhythm through the top of the page.
   The hero, tagline, and answer capsule now flow with consistent 16-20px
   gaps between them, then a 32px gap before the first section. */
.fcc-installer-tagline {
	margin: 16px auto 16px !important;
	max-width: 900px;
	font-size: 0.95rem;
	line-height: 1.55;
	color: #444;
	background: #f5f5f5;
	border-left: 3px solid var(--fcc-red, #ed1c23);
	padding: 10px 18px;
	border-radius: 4px;
}
.fcc-installer-tagline strong { color: #1a1a1a; }

/* v1.8.4: Normalize the top-of-page vertical rhythm on single door pages.
   Kill the giant gaps between hero → tagline → answer-capsule → first section
   that came from a stack of default margins on .fcc-contained + .fcc-section
   + .fcc-answer-capsule + .fcc-hero-split. */
.fcc-single-door .fcc-hero-split { margin-bottom: 0 !important; padding-bottom: 24px !important; }
/* The .fcc-contained wrapping the answer capsule was adding a big top margin;
   force it to sit close to the tagline. */
.fcc-single-door .fcc-hero-split + .fcc-contained,
.fcc-single-door .fcc-installer-tagline + .fcc-contained {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
/* Then give the FIRST body .fcc-section (which starts with "Why Arizona
   Homeowners Choose the...") a proper 32px top gap. */

.fcc-single-door .fcc-contained .fcc-section {
	margin-top: 24px !important;
}

/* Editorial pitch — "Why Arizona homeowners choose this Clopay door" */
.fcc-pitch { max-width: 820px; }
.fcc-pitch__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--fcc-red, #ed1c23);
	margin-bottom: 12px;
}
.fcc-pitch__body p {
	font-size: 17px;
	line-height: 1.7;
	color: #333;
	margin: 0 0 16px;
}
.fcc-pitch__body p strong { color: #1a1a1a; font-weight: 700; }

/* Money-keyword FAQs — accordion style, first item open by default */
.fcc-money-faqs { max-width: 820px; }
.fcc-money-faqs__item {
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 6px;
	margin-bottom: 10px;
	background: #fff;
	overflow: hidden;
	transition: box-shadow 0.15s ease;
}
.fcc-money-faqs__item[open] { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.fcc-money-faqs__q {
	padding: 16px 20px;
	font-weight: 700;
	font-size: 1rem;
	color: #1a1a1a;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 44px;
}
.fcc-money-faqs__q::-webkit-details-marker { display: none; }
.fcc-money-faqs__q::after {
	content: '+';
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--fcc-red, #ed1c23);
	line-height: 1;
	transition: transform 0.15s ease;
}
.fcc-money-faqs__item[open] .fcc-money-faqs__q::after {
	content: '−';
}
.fcc-money-faqs__a {
	padding: 0 20px 18px;
	font-size: 0.96rem;
	line-height: 1.65;
	color: #444;
}

/* Cities we install Clopay doors in — linked card grid */
@media (max-width: 640px) {
	.fcc-installer-tagline { margin: 14px auto 22px; font-size: 0.9rem; }
	.fcc-pitch__body p { font-size: 16px; }
	.fcc-money-faqs__q { font-size: 0.95rem; padding: 14px 16px 14px; padding-right: 40px; }
	.fcc-money-faqs__q::after { right: 16px; font-size: 1.3rem; }
	.fcc-money-faqs__a { padding: 0 16px 16px; font-size: 0.92rem; }
}

/* ================= Amarr (v1.10.1+) =================
 * Amarr-scoped styles — prefixed .fcc-a-* so they never collide with Clopay
 * or Invicta. Reuses shared classes (.fcc-btn, .fcc-eyebrow, .fcc-contained,
 * .fcc-section, .fcc-doors-grid, .fcc-door-card, .fcc-hub-cities*) where they
 * exist. No black backgrounds — sections use cream #f5f5f5 and warm neutrals.
 */

/* --- Breadcrumbs (mirrors Clopay/Invicta pattern) --- */
.fcc-a-breadcrumbs {
	margin: 24px 0 20px;
	font-size: 0.9rem;
	color: #6b6b6b;
	line-height: 1.6;
}
.fcc-a-breadcrumbs a {
	color: #ed1c23;
	text-decoration: none;
	font-weight: 600;
}
.fcc-a-breadcrumbs a:hover { text-decoration: underline; }
.fcc-a-breadcrumbs .fcc-crumb-sep {
	color: #cccccc;
	margin: 0 8px;
}
.fcc-a-breadcrumbs .fcc-crumb-current {
	color: #444;
	font-weight: 500;
}

/* --- Hero: extra bits --- */
.fcc-a-single-top { padding-top: 20px; }
/* v1.11.6: Clopay singles reuse the above-hero breadcrumb strip pattern from
   Amarr so the two brands sit visually identical. See templates/single-
   farnsworth_door.php for the emission point (breadcrumbs used to render
   inside the .fcc-hero-split__text column). */
/* v1.11.8: The strip's outer .fcc-c-crumbs-strip wrapper now owns vertical
   padding (see the v1.11.8 block near the end of this file). This inner
   .fcc-contained just handles horizontal centering + max-width, so no
   vertical padding here. */
.fcc-c-single-top { padding-top: 0; }
.fcc-c-single-top .fcc-clopay-breadcrumbs { margin: 0 !important; }
.fcc-a-hero__panel {
	display: inline-block;
	background: #f5f5f5;
	color: #333;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	margin: 4px 0 12px;
}

/* --- Hero: Best-for eyebrow line (v1.10.28 Phase 1 SEO) --- */
.fcc-a-hero__best-for {
	margin: 6px 0 12px;
	padding: 10px 14px;
	background: #f5f5f5;
	border-left: 3px solid #ed1c23;
	border-radius: 4px;
	color: #333;
	font-size: 0.95rem;
	line-height: 1.45;
}
.fcc-a-hero__best-for-label {
	display: inline-block;
	margin-right: 4px;
	color: #b31217;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* --- Recently Installed strip (v1.10.28 Phase 1 SEO) --- */

/* --- Generic Amarr section --- */
.fcc-a-section { margin: 56px 0; }
.fcc-a-section .fcc-section__title {
	margin-bottom: 12px;
}

/* --- Features grid --- */
.fcc-a-features__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 24px;
}
.fcc-a-features__card {
	background: #f5f5f5;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	padding: 22px 22px 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.fcc-a-features__title {
	font-size: 1.05rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 8px;
}
.fcc-a-features__desc {
	color: #444;
	font-size: 0.98rem;
	line-height: 1.55;
	margin: 0;
}

/* --- Construction --- */
.fcc-a-construction__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 32px;
	margin-top: 20px;
}
@media (max-width: 900px) {
	.fcc-a-construction__grid { grid-template-columns: 1fr; }
}
.fcc-a-construction__list {
	margin: 0 0 20px;
	padding-left: 20px;
	line-height: 1.65;
	color: #333;
}
.fcc-a-construction__list li { margin: 0 0 10px; }
.fcc-a-construction__meta {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
	padding: 16px 20px;
}
.fcc-a-construction__meta-row {
	display: flex;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 0.95rem;
}
.fcc-a-construction__meta-row:last-child { border-bottom: 0; }
.fcc-a-construction__meta-label {
	font-weight: 700;
	color: #1a1a1a;
	min-width: 170px;
}
.fcc-a-construction__meta-value { color: #444; }
.fcc-a-construction__callout {
	background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
	border: 1px solid #ed1c23;
	border-radius: 12px;
	padding: 26px 24px;
	box-shadow: 0 6px 20px rgba(237,28,35,0.08);
}
.fcc-a-construction__callout-eyebrow {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ed1c23;
	margin: 0 0 6px;
}
.fcc-a-construction__callout-value {
	font-size: 2.4rem;
	font-weight: 900;
	color: #1a1a1a;
	line-height: 1.1;
	margin: 0 0 4px;
}
.fcc-a-construction__callout-to {
	font-size: 1rem;
	font-weight: 500;
	color: #888;
	margin: 0 4px;
}
.fcc-a-construction__callout-note {
	color: #555;
	font-size: 0.92rem;
	margin: 6px 0 12px;
}
.fcc-a-construction__callout-context {
	color: #444;
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 0;
}

/* --- Design grid + Single/Double toggle ---
   v1.10.16: rebuilt as a clean brand-red pill toggle. Previous rules
   rendered the active button as a black pill (unreadable dark-on-dark
   text) and the inactive button picked up a pink browser focus outline.
   Every selector is scoped under .fcc-a-designs__toggle so Clopay and
   Invicta toggles are untouched. !important is used because Elementor +
   theme button rules were bleeding into the buttons on the live page. */
.fcc-a-designs__toggle {
	display: inline-flex !important;
	gap: 0 !important;
	background: #eeeeee !important;
	border-radius: 999px !important;
	padding: 4px !important;
	margin: 16px 0 24px !important;
	border: 1px solid #dcdcdc;
}
.fcc-a-designs__toggle-btn {
	background: transparent !important;
	color: #1a1a1a !important;
	border: none !important;
	outline: none !important;
	padding: 10px 22px !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	transition: background-color .18s ease, color .18s ease !important;
	box-shadow: none !important;
}
.fcc-a-designs__toggle-btn:hover:not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]) {
	background: rgba(0, 0, 0, 0.04) !important;
	color: #1a1a1a !important;
}
.fcc-a-designs__toggle-btn.is-active,
.fcc-a-designs__toggle-btn[aria-pressed="true"] {
	background: #ed1c23 !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(237, 28, 35, 0.25) !important;
}
.fcc-a-designs__toggle-btn:focus-visible {
	outline: 3px solid rgba(237, 28, 35, 0.35) !important;
	outline-offset: 2px !important;
}
.fcc-a-designs__toggle-btn:focus:not(:focus-visible) {
	outline: none !important;
}
.fcc-a-designs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}
.fcc-a-designs__card {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0,0,0,0.03);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fcc-a-designs__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.fcc-a-designs__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #ffffff;
}
.fcc-a-designs__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12px;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.fcc-a-designs__img.is-active { opacity: 1; }
.fcc-a-designs__meta {
	padding: 14px 16px 16px;
	text-align: center;
}
.fcc-a-designs__code {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #ed1c23;
	margin: 0 0 4px;
}
.fcc-a-designs__name {
	font-size: 1rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
	line-height: 1.3;
}

/* --- Textured (Foundry Reserve) + Panel style + Plank grids reuse this --- */
.fcc-a-textured__subhead {
	font-size: 1.15rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 32px 0 16px;
}
.fcc-a-textured__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 8px;
}
.fcc-a-textured__card {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 10px;
	overflow: hidden;
	margin: 0;
	box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.fcc-a-textured__card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.fcc-a-textured__caption {
	font-size: 0.92rem;
	font-weight: 600;
	color: #333;
	padding: 10px 14px 14px;
	text-align: center;
}

/* --- Swatches grid (colors, windows, glass, decraglass, hardware, tops) --- */
.fcc-a-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 16px;
	margin-top: 8px;
}
.fcc-a-swatch {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	padding: 10px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.fcc-a-swatch__chip {
	/* v1.10.13: aspect ratio is now set per grid type via
	   `.fcc-a-swatches--<type>` modifier classes so hardware (square),
	   glass (portrait), colors (square), tops (2:1), and windows (4:3)
	   each fill their chip without wasted cream padding. The default
	   4/3 handles any un-typed callers safely. See the modifier block
	   below this rule. */
	/* v1.10.25: chip background swapped from cream (#f5f5f5) to white so
	   Amarr's white-background product renders blend into the chip cleanly
	   instead of the cream tone framing them awkwardly. Outer .fcc-a-swatch
	   card wrapper still uses cream for visual definition. */
	background: #ffffff;
	border-radius: 6px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	min-height: 100px;
	margin-bottom: 8px;
	padding: 8px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* --- Per-swatch-grid aspect ratios (v1.10.13; retuned v1.10.21) ---
   Each grid modifier overrides the default 4:3 with a ratio that
   matches the underlying Amarr source imagery so nothing gets stretched
   or letterboxed in a bad way.

   v1.10.21: Top Sections, Window Inserts, DecraGlass, and Glass Colors
   all ship as landscape ~3.5:1 crops from Amarr (measured live: 699x200
   window/top-section PNGs; 3915x1016 DecraGlass JPGs). The prior 2:1,
   4:3, and 3:4 chip ratios were stuffing wide images into square-ish or
   portrait chips, leaving heavy cream letterboxing and making the actual
   swatches feel tiny. Match aspect (7/2) + widen the grid so fewer, bigger
   cards fit per row and the customer can actually see the option. */
.fcc-a-swatches--tops {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.fcc-a-swatches--tops .fcc-a-swatch__chip     { aspect-ratio: 7 / 2;  min-height: 80px;  }
.fcc-a-swatches--hardware .fcc-a-swatch__chip { aspect-ratio: 1 / 1;  min-height: 130px; }
.fcc-a-swatches--glass {
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.fcc-a-swatches--glass .fcc-a-swatch__chip    { aspect-ratio: 7 / 2;  min-height: 70px;  }
.fcc-a-swatches--colors .fcc-a-swatch__chip   { aspect-ratio: 1 / 1;  min-height: 130px; }
.fcc-a-swatches--windows {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.fcc-a-swatches--windows .fcc-a-swatch__chip  { aspect-ratio: 7 / 2;  min-height: 75px;  }
/* v1.10.15: compact upper "Door Design" grid — same source images as the
   lower Door Designs gallery, but denser (6-per-row at desktop widths) so
   it reads as a quick preview, not a duplicate gallery. Smaller card
   padding, smaller label, tighter gutter, no 8px inner cream padding on
   the chip (the single-car renders already have their own margin baked
   in and Amarr designs are wider than they are tall — 2:1). */
.fcc-a-swatch__chip img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
/* v1.10.23: Amarr swatch overflow containment.
   Diagnosed live via Chrome MCP on staging: on Top Sections / Window Inserts /
   DecraGlass / Glass Colors, the chip's aspect-ratio (7/2) combined with its
   min-height (80/70/75px) computed a chip width from height (e.g., 80 × 3.5 =
   280px), which exceeded the parent swatch's inner content width (~253px on
   the 220px minmax grid). The chip's cream background AND the contained image
   bled 10-18px past the outer white card border, making the images visually
   appear larger than the cards. Clamp everything inside the card border here
   so the aspect-ratio math can never blow past the container. Scoped to the
   .fcc-a-* Amarr namespace — Clopay/Invicta use different prefixes. */
.fcc-a-swatch {
	overflow: hidden !important;
	box-sizing: border-box !important;
}
.fcc-a-swatch__chip {
	overflow: hidden !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
}
.fcc-a-swatch__chip img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
	box-shadow: none !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}
/* v1.10.19: hex-fill chips for solid Amarr paint colors. Same footprint as
 * the image chip variants — the parent .fcc-a-swatches--colors rule already
 * sets aspect-ratio + min-height, so this only needs the color fill and a
 * subtle inner ring so pale swatches (True White, Almond) still read as
 * chips against the cream page background. */
.fcc-a-swatch__chip--hex {
	background-color: #eee;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.fcc-a-swatch__label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #333;
	display: block;
	line-height: 1.3;
}

/* --- Text pill (used when a swatch entry has no image) --- */
.fcc-a-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f5;
	color: #1a1a1a;
	border: 1px solid #ed1c23;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	min-height: 40px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

/* --- Pill-only swatch grid — override grid to flex-wrap so pills sit at
       their natural width and read as intentional design chips. --- */
.fcc-a-swatches.fcc-a-swatches--pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	grid-template-columns: none;
	margin-top: 8px;
}

/* --- Color notes (fallback text-only list) --- */

/* --- Amarr Color Zone callout --- */
.fcc-a-color-zone {
	margin-top: 28px;
	background: linear-gradient(135deg, #f5f5f5 0%, #fff 100%);
	border: 1px solid #ed1c23;
	border-radius: 12px;
	padding: 24px 26px;
	display: flex;
	align-items: center;
	gap: 28px;
}
.fcc-a-color-zone__img {
	flex: 0 0 auto;
	width: 100%;
	max-width: 320px;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	display: block;
}
.fcc-a-color-zone__body {
	flex: 1 1 auto;
	min-width: 0;
}
.fcc-a-color-zone__eyebrow {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ed1c23;
	margin: 0 0 6px;
}
.fcc-a-color-zone__title {
	font-size: 1.35rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 10px;
}
.fcc-a-color-zone p {
	color: #444;
	line-height: 1.6;
	margin: 0;
}
@media (max-width: 720px) {
	.fcc-a-color-zone {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		gap: 18px;
		padding: 20px 20px;
	}
	.fcc-a-color-zone__img {
		max-width: 260px;
		margin: 0 auto;
	}
}

/* --- Warranty (v1.14.1 — tier-grouped duration cards) ---
   Replaces the v1.14.0 paragraph card. Each collection now renders as a
   card grid where every card = one warranty DURATION, listing only the
   components covered at that tier. Much easier to scan than the old
   warranty_class prose blob. Facts source: Amarr Consolidated Residential
   Warranty PDF (Form 842). */

/* Transferable flag — kept from v1.14.0, promoted to a top-level pill
   between the section lead and the card grid. */
.fcc-a-warranty__flag {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 6px 0 22px;
}
.fcc-a-warranty__flag.is-transfer {
	background: #e6f5e6;
	color: #1d6b1d;
}
.fcc-a-warranty__flag.is-nontransfer {
	background: #fff0f0;
	color: #b3242b;
}

/* Duration-tier card grid — 3 cols desktop, 2 cols tablet, 1 col mobile. */
.fcc-a-warranty__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0 0 24px;
}
.fcc-a-warranty__tier {
	background: #f5f5f5;
	border: 1px solid #dcdcdc;
	border-radius: 12px;
	padding: 26px 24px 24px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.04);
	display: flex;
	flex-direction: column;
}
.fcc-a-warranty__duration {
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ed1c23;
	line-height: 1.1;
	margin: 0;
}
.fcc-a-warranty__sub {
	font-size: 0.78rem;
	color: #6b6b6b;
	font-style: italic;
	margin-top: 6px;
	letter-spacing: 0.02em;
}
.fcc-a-warranty__divider {
	height: 3px;
	width: 44px;
	background: #ed1c23;
	border-radius: 3px;
	margin: 14px 0 16px;
}
.fcc-a-warranty__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.fcc-a-warranty__list li {
	color: #333;
	font-size: 0.98rem;
	line-height: 1.45;
	padding-left: 18px;
	position: relative;
}
.fcc-a-warranty__list li::before {
	content: '';
	width: 6px;
	height: 6px;
	background: #ed1c23;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 8px;
}

/* Builds note — the "coverage shown is for X build; lower builds Y" line. */
.fcc-a-warranty__builds-note {
	color: #444;
	background: #fff;
	border: 1px solid #eaeaea;
	border-left: 3px solid #ed1c23;
	padding: 14px 18px;
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 18px;
	border-radius: 0 6px 6px 0;
}

/* Field-of-use notes (voids, exclusions) inherited from the JSON. */
.fcc-a-warranty__notes {
	color: #555;
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 18px;
}
.fcc-a-warranty__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}
.fcc-a-warranty__foot {
	color: #777;
	font-size: 0.88rem;
	line-height: 1.55;
	margin: 0;
}

@media (max-width: 900px) {
	.fcc-a-warranty__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.fcc-a-warranty__grid { grid-template-columns: 1fr; }
	.fcc-a-warranty__tier { padding: 22px 20px 20px; }
	.fcc-a-warranty__duration { font-size: 1.35rem; }
}

/* Legacy card class from v1.14.0 kept as a no-op safety net — not
   emitted by the v1.14.1 renderer but harmless if any cached HTML still
   contains it. */

/* --- Series callout grid (Classica) --- */

/* --- Windows/glass carousel --- */
.fcc-a-windows__subhead { font-size: 1.15rem; font-weight: 800; color: #1a1a1a; margin: 28px 0 14px; }
.fcc-a-windows__carousel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
	margin-top: 8px;
}
.fcc-a-windows__cshot { margin: 0; }
.fcc-a-windows__cshot img {
	display: block; width: 100%; height: auto;
	border-radius: 8px;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

/* --- Custom wood callout ---
   v1.10.11: centered layout so the two CTA buttons sit balanced under the
   copy instead of pushing to the left edge of the callout. */
.fcc-a-custom__cta {
	margin-top: 28px;
	background: #f5f5f5;
	border: 1px solid #dcdcdc;
	border-radius: 12px;
	padding: 24px 26px;
	text-align: center;
}
.fcc-a-custom__cta p {
	color: #333;
	line-height: 1.6;
	margin: 0 auto 20px;
	max-width: 720px;
	text-align: center;
}
.fcc-a-custom__cta-buttons {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 20px;
}

/* --- Downloads --- */
.fcc-a-downloads__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
	margin-top: 20px;
}
.fcc-a-downloads__card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 10px;
	padding: 16px 18px;
	text-decoration: none;
	color: #1a1a1a;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fcc-a-downloads__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	color: #ed1c23;
}
.fcc-a-downloads__icon {
	background: #f5f5f5;
	color: #ed1c23;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
}
.fcc-a-downloads__meta {
	display: flex;
	flex-direction: column;
}
.fcc-a-downloads__label {
	font-weight: 700;
	color: inherit;
	line-height: 1.3;
}
.fcc-a-downloads__ext {
	color: #999;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: 2px;
}

/* --- Mid CTA (uses shared .fcc-mid-cta base) --- */
.fcc-a-mid-cta { border-color: #ed1c23; }

/* --- Hub warranty grid --- */
.fcc-a-hub-warranty__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 20px;
}
.fcc-a-hub-warranty__card {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 10px;
	padding: 20px 22px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.fcc-a-hub-warranty__card h3 {
	font-size: 1.1rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 8px;
}
.fcc-a-hub-warranty__card p {
	color: #444;
	line-height: 1.55;
	margin: 0;
	font-size: 0.95rem;
}
.fcc-a-hub-warranty__note {
	background: #f5f5f5;
	border-left: 4px solid #ed1c23;
	padding: 16px 20px;
	margin-top: 22px;
	color: #333;
	line-height: 1.55;
}

/* --- Reviews widget --- */
.fcc-a-reviews__widget { margin-top: 20px; }

/* --- Mobile polish --- */
@media (max-width: 767px) {
	.fcc-a-section { margin: 36px 0; }
	.fcc-a-designs__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
	.fcc-a-textured__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
	.fcc-a-swatches { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
	/* v1.10.15: series preview stays denser than the main Door Designs
	   gallery even on phones — 2 cards per row at typical phone widths. */
	/* v1.10.21: keep the bigger landscape-swatch sections at 2 cards per row
	   on phones (~320-414px viewports) instead of collapsing to the shared
	   110px minmax. Also drop the desktop chip min-height on mobile so a
	   150px-wide chip at 7:2 (natural h ~43px) doesn't get force-padded to
	   80px with cream letterboxing. */
	.fcc-a-swatches--tops    { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.fcc-a-swatches--windows { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.fcc-a-swatches--glass   { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.fcc-a-swatches--tops .fcc-a-swatch__chip,
	.fcc-a-swatches--windows .fcc-a-swatch__chip,
	.fcc-a-swatches--glass .fcc-a-swatch__chip { min-height: 45px; }
	.fcc-a-features__grid { grid-template-columns: 1fr; gap: 14px; }
	.fcc-a-downloads__grid { grid-template-columns: 1fr; }
	.fcc-a-construction__callout-value { font-size: 1.9rem; }
	.fcc-a-construction__meta-label { min-width: 130px; }
	.fcc-a-designs__toggle-btn { padding: 8px 14px; font-size: 0.85rem; }
}

/* =========================================================================
   v1.10.6 — Amarr single-door page cleanup
   -------------------------------------------------------------------------
   The staging build (v1.10.5) had ~367px of empty space between the WP
   header and the hero (100px inline body-main margin + 100px on the first
   .fcc-contained + 100px on .fcc-hero-split all stacked). It also inherited
   the Clopay/Invicta text-align:center hero rule (via the shared
   .fcc-single-door class) — Amarr's hero is a wide split layout that needs
   to stay left-aligned. And the answer-capsule was clamped to zero margin
   by an old Clopay override.

   This block fixes all of it in one place, scoped strictly to
   .fcc-single-amarr so nothing leaks into the other brands.
   ========================================================================= */

/* Kill the legacy 100px margin the shared .fcc-contained:first-of-type rule
   was applying to Amarr's breadcrumbs container. The inline critical CSS
   (in class-fcc-amarr-frontend.php) already gives us 20px of clearance from
   the site header — anything more is redundant. */
.fcc-single-amarr.fcc-single-door > article > .fcc-contained.fcc-a-single-top {
	margin-top: 0 !important;
}
@media (max-width: 767px) {
	.fcc-single-amarr.fcc-single-door > article > .fcc-contained.fcc-a-single-top {
		margin-top: 0 !important;
	}
}

/* Zero out the .fcc-hero-split { margin-top: 100px } that ships as the
   default for Clopay/Invicta split heroes. Amarr's breadcrumbs already
   provide the visual gap; the hero should sit right underneath. */
.fcc-single-amarr .fcc-hero-split.fcc-a-hero {
	margin-top: 0 !important;
	/* Warm cream (matches .fcc-mid-cta and the rest of the plugin's cream
	   surfaces). Overrides the plugin default's cool #f8f8f8 gray. */
	background: #f5f5f5 !important;
	border-bottom: 1px solid #dcdcdc !important;
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}
@media (max-width: 767px) {
	.fcc-single-amarr .fcc-hero-split.fcc-a-hero {
		padding-top: 28px !important;
		padding-bottom: 28px !important;
	}
}

/* Hero inner is now nested inside .fcc-contained (v1.10.6 template change),
   so the two-column split aligns horizontally with every section title
   below. Kill the shared __inner max-width/padding — .fcc-contained is now
   the constraint, and __inner just needs to be the grid container. */
.fcc-single-amarr .fcc-hero-split.fcc-a-hero .fcc-hero-split__inner {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Amarr hero content stays LEFT-aligned. Overrides the Clopay text-align
   center rules that would otherwise inherit through .fcc-single-door. */
.fcc-single-amarr .fcc-hero-split__inner,
.fcc-single-amarr .fcc-hero-split__text {
	text-align: left !important;
	align-items: start !important;
}
.fcc-single-amarr .fcc-hero-split__cta {
	justify-content: flex-start !important;
}

/* v1.10.27 — Kill the white frame around the Amarr hero image.
   The plugin default .fcc-hero-split__media renders a white rounded card
   with a border and centers the image inside it (object-fit: contain).
   When the door image doesn't perfectly fill that container, the white
   card shows through as an ugly frame on top of the cream hero background.
   v1.10.38 — Widened the selector to catch every possible Amarr hero markup
   variant. Uses body-class (`.single-amarr_door`), post-type body class,
   and attribute-selector fallbacks so ANY Amarr page reliably hits the rule
   regardless of what theme/plugin wrapper the article gets. Clopay + Invicta
   hero framing stays intact — those pages don't get `.fcc-a-hero` nor the
   `amarr_door` post type / body class. */
[class*="fcc-a-hero"] .fcc-hero-split__media,
.fcc-hero-split.fcc-a-hero .fcc-hero-split__media,
.fcc-a-hero .fcc-hero-split__media,
.fcc-single-amarr .fcc-hero-split__media {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}

/* v1.11.15 — Kill the frame around the img entirely.
   Prior rule (v1.10.27/38) added `border-radius: 12px` + a soft `box-shadow`
   directly to the <img>. On dark doors (Classica Flush matte-black etc.)
   sitting on the cream hero background, that shadow renders as a visible
   rounded-rectangle frame around the image — the "weird box" Riley kept
   flagging. Setting radius/shadow to none lets the image sit clean on the
   cream background with no visible border, exactly what Riley wants. */
[class*="fcc-a-hero"] .fcc-hero-split__media img,
.fcc-hero-split.fcc-a-hero .fcc-hero-split__media img,
.fcc-a-hero .fcc-hero-split__media img,
.fcc-single-amarr .fcc-hero-split__media img {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	display: block !important;
	max-width: 100% !important;
	height: auto !important;
}

/* Defensive: strip framing from any WordPress-generated figure/wp-block-image
   wrapper the theme might insert around the hero img. */
.fcc-a-hero figure {
	background: transparent !important;
	background-color: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* --- Fix #3: Answer capsule breathing room + interior padding. --- */
/* Roomier margins above/below and larger interior padding so the "ABOUT THIS
   AMARR DOOR" label + short-desc text isn't cramped against the red border. */
.fcc-single-amarr .fcc-hero-split + .fcc-contained {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* --- Fix #5: Tighten the Custom Wood section. ---
   The "Custom Wood — Amarr By Design" section on the By Design page renders
   ~961px tall — visually dominant. Trim the subheading margins, the swatch
   grid gaps, and the space before the closing custom-order aside. */
.fcc-single-amarr .fcc-a-custom .fcc-a-textured__subhead {
	margin: 20px 0 10px;
}
.fcc-single-amarr .fcc-a-custom .fcc-a-textured__subhead:first-of-type {
	margin-top: 4px;
}
.fcc-single-amarr .fcc-a-custom .fcc-a-swatches {
	gap: 12px;
	margin-top: 6px;
}
.fcc-single-amarr .fcc-a-custom .fcc-a-swatch { padding: 8px; }
.fcc-single-amarr .fcc-a-custom .fcc-a-swatch__label { font-size: 0.82rem; }
.fcc-single-amarr .fcc-a-custom__cta {
	margin-top: 20px;
	padding: 20px 22px;
}

/* --- Fix #6: Standardize .fcc-a-section vertical rhythm. ---
   Bring Amarr's per-section margin (was 56px) in line with the .fcc-section
   default (48px) so the page has a single, consistent rhythm through the
   Overview → Features → Construction → … → Cities stack. */
.fcc-a-section { margin: 48px 0; }

/* ================= Amarr CTA buttons (v1.10.11 → v1.10.30) =================
   v1.10.11 originally scoped strong button styling to only .fcc-a-custom__cta
   and .fcc-a-mid-cta. Every new Amarr section shipped afterward (Cost Factors
   in v1.10.29, Recently Installed / Best For hero / WindPro / HOA callout in
   v1.10.28–29) got skipped because its container isn't one of those two —
   CTAs rendered as plain red text instead of proper buttons.

   v1.10.30 widens the scope: ANY .fcc-btn--red or .fcc-btn--outline-dark
   inside ANY .fcc-a-* Amarr container gets the strong treatment. The
   [class*="fcc-a-"] attribute selector is safe — Clopay uses .fcc-c-* and
   Invicta uses .fcc-i-*, neither of which contains the "fcc-a-" substring,
   so nothing leaks. The bottom-CTA banner (.fcc-a-bottom-cta) uses
   .fcc-btn--white on a red background — the --white variant is a separate
   modifier and is intentionally NOT targeted here. */

/* Primary — red fill, white text, subtle red-tinted shadow */
/* v1.10.30 — universalized: any Amarr section's primary red CTA */
.fcc-a-section .fcc-btn--red,
.fcc-a-hero .fcc-btn--red,
.fcc-a-single .fcc-btn--red,
[class*="fcc-a-"] .fcc-btn--red {
	background-color: #ed1c23 !important;
	color: #ffffff !important;
	border: 2px solid #ed1c23 !important;
	box-shadow: 0 2px 6px rgba(237, 28, 35, 0.25) !important;
	font-weight: 700 !important;
	padding: 14px 28px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.fcc-a-section .fcc-btn--red:hover,
.fcc-a-hero .fcc-btn--red:hover,
.fcc-a-single .fcc-btn--red:hover,
[class*="fcc-a-"] .fcc-btn--red:hover {
	background-color: #c81a20 !important;
	border-color: #c81a20 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(237, 28, 35, 0.35) !important;
}

/* Secondary — SOLID DARK (v1.10.35). Was outline-on-white through v1.10.34,
   but on cream Mid-CTA / Cost Factors panels the outline treatment read as
   weak text with a hairline border. Both buttons on every Amarr section now
   render as SOLID high-contrast colors: primary solid red + secondary solid
   dark. Class name kept as --outline-dark so existing renderer emissions get
   the new solid-dark treatment without touching PHP. The phone SVG inherits
   `currentColor`, so it auto-flips to white with the text. */
.fcc-a-section .fcc-btn--outline-dark,
.fcc-a-hero .fcc-btn--outline-dark,
.fcc-a-single .fcc-btn--outline-dark,
[class*="fcc-a-"] .fcc-btn--outline-dark {
	background-color: #1a1a1a !important;
	color: #ffffff !important;
	border: 2px solid #1a1a1a !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20) !important;
	font-weight: 700 !important;
	padding: 14px 26px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.fcc-a-section .fcc-btn--outline-dark:hover,
.fcc-a-hero .fcc-btn--outline-dark:hover,
.fcc-a-single .fcc-btn--outline-dark:hover,
[class*="fcc-a-"] .fcc-btn--outline-dark:hover {
	background-color: #000000 !important;
	color: #ffffff !important;
	border-color: #000000 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30) !important;
}
/* Belt-and-suspenders: force the phone SVG stroke to white in case a
   downstream sheet overrides `color` and breaks `currentColor` inheritance. */
.fcc-a-section .fcc-btn--outline-dark svg,
.fcc-a-hero .fcc-btn--outline-dark svg,
.fcc-a-single .fcc-btn--outline-dark svg,
[class*="fcc-a-"] .fcc-btn--outline-dark svg {
	stroke: #ffffff !important;
	color: #ffffff !important;
}

/* Mobile — stack CTA buttons full-width for easier thumb targets */
@media (max-width: 640px) {
	.fcc-a-custom__cta-buttons .fcc-btn,
	.fcc-a-mid-cta .fcc-mid-cta__buttons .fcc-btn,
	[class*="fcc-a-"] .fcc-btn {
		width: 100% !important;
		padding: 14px 20px !important;
		justify-content: center !important;
	}
}

/* =========================================================================
   v1.10.13 — Amarr cities section (single-door + hub)
   -------------------------------------------------------------------------
   Replaces the inline "wall of pins" render from prior versions. Each city
   is now a proper card: pin badge on top, bold black name below, small
   "Arizona" caption, and an absolutely-positioned red "Home base" pill on
   the Mesa card. Works both on the Amarr hub page (inside
   .fcc-doors-overview) and on single door pages (no wrapper) because the
   selectors are un-scoped and use their own class family.
   ========================================================================= */
.fcc-a-cities {
	background: #ffffff;
}
.fcc-a-cities .fcc-section__title {
	margin: 0 0 12px;
}
.fcc-a-cities__intro {
	font-size: 17px;
	line-height: 1.65;
	color: #444;
	max-width: 780px;
	margin: 0 0 32px;
}
/* v1.11.3 — Unified Cities card design.
   The three brand renderers (Amarr, Clopay, Invicta) now emit the SAME
   markup for each city card: a big city name as the visual hero, a small
   "[Brand] Garage Door Installer/Dealer" subtitle, optional neighborhood
   chips, and a short hook paragraph. Card layout lives on .fcc-city-card
   (shared); .fcc-a-cities / .fcc-c-cities / .fcc-i-cities still exist as
   section wrappers for per-brand backgrounds and grid tweaks.

   Amarr + Clopay pages load this CSS via frontend.css. Invicta pages
   duplicate this block inline (scoped under #fcc-invicta-single with
   !important) in class-fcc-invicta-frontend.php so they win over any
   theme/Elementor default styles. */
.fcc-a-cities__grid,
.fcc-c-cities__grid,
.fcc-i-cities__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.fcc-city-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 20px 20px;
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.08);
	border-top: 3px solid #ed1c23;
	border-radius: 10px;
	color: #111;
	text-decoration: none !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.fcc-city-card.is-accent-red { border-top-color: #ed1c23; }
.fcc-city-card.is-accent-dark { border-top-color: #1a1a1a; }
.fcc-city-card:hover,
.fcc-city-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0,0,0,0.10);
	background: #ffffff;
	color: #111;
	outline: none;
}
.fcc-city-card.is-home {
	background: #fff8f8;
	border-color: rgba(237,28,35,0.35);
	border-top-color: #ed1c23 !important;
	box-shadow: 0 2px 10px rgba(237,28,35,0.10);
}
.fcc-city-card__header {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.fcc-city-card__pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(237,28,35,0.12);
	color: #ed1c23;
	flex: 0 0 auto;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.fcc-city-card:hover .fcc-city-card__pin,
.fcc-city-card:focus-visible .fcc-city-card__pin {
	background: #ed1c23;
	color: #ffffff;
	transform: scale(1.05);
}
.fcc-city-card__name {
	font-size: 1.75rem;
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #1a1a1a;
	flex: 1 1 auto;
	min-width: 0;
	word-break: break-word;
}
.fcc-city-card__badge {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.75px;
	text-transform: uppercase;
	color: #ffffff;
	background: #ed1c23;
	padding: 4px 9px;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(237,28,35,0.25);
	flex: 0 0 auto;
}
.fcc-city-card__subtitle {
	font-size: 0.88rem;
	font-weight: 600;
	color: #6a6a6a;
	line-height: 1.35;
	margin: -4px 0 0 36px;
	letter-spacing: 0.1px;
}
.fcc-city-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 0 0;
}
.fcc-city-card__chip {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	color: #333;
	background: #f5f5f5;
	border: 1px solid rgba(0,0,0,0.10);
	padding: 3px 9px;
	border-radius: 999px;
	line-height: 1.4;
	white-space: nowrap;
}
.fcc-city-card__hook {
	margin: 4px 0 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: #444;
}
/* Legacy inner-class fallback — older v1.11.2 markup shouldn't ship,
   but if a cached page renders it, keep basic readability. */
@media (max-width: 640px) {
	.fcc-a-cities__grid,
	.fcc-c-cities__grid,
	.fcc-i-cities__grid { grid-template-columns: 1fr; }
	.fcc-city-card { padding: 18px 16px 16px; }
	.fcc-city-card__name { font-size: 1.55rem; }
	.fcc-city-card__subtitle { font-size: 0.85rem; margin-left: 34px; }
	.fcc-city-card__hook { font-size: 0.9rem; }
}

/* =================================================================
 * Amarr — Install Section (v1.10.36)
 * -----------------------------------------------------------------
 * Sits between Warranty and Cost Factors. Cream section background,
 * red accent, numbered step circles, and a comma-list coverage line
 * linking every service-area city.
 * ================================================================= */
.fcc-a-install-section {
	background: transparent;
}
.fcc-a-install-section .fcc-section__title {
	text-align: center;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 28px;
}
.fcc-a-install-section__block {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 24px 26px;
	margin: 0 0 22px;
}
.fcc-a-install-section__block:last-of-type { margin-bottom: 22px; }
.fcc-a-install-section__h3 {
	font-size: 1.18rem;
	font-weight: 800;
	color: #111;
	margin: 0 0 12px;
	padding: 0 0 10px;
	border-bottom: 2px solid #ed1c23;
	display: inline-block;
	line-height: 1.3;
}
.fcc-a-install-section__block p {
	margin: 0 0 12px;
	color: #333;
	font-size: 1rem;
	line-height: 1.7;
}
.fcc-a-install-section__block p:last-of-type { margin-bottom: 0; }
.fcc-a-install-section__steps {
	list-style: none;
	counter-reset: fcc-a-install-step;
	padding: 0;
	margin: 8px 0 0;
}
.fcc-a-install-section__step {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 14px 0;
	border-top: 1px solid #e0e0e0;
}
.fcc-a-install-section__step:first-of-type { border-top: none; padding-top: 4px; }
.fcc-a-install-section__num {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #ed1c23;
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1;
}
.fcc-a-install-section__step-body { flex: 1 1 auto; }
.fcc-a-install-section__step-title {
	font-size: 1.04rem;
	font-weight: 800;
	color: #111;
	margin: 4px 0 6px;
	line-height: 1.3;
}
.fcc-a-install-section__step-body p {
	margin: 0;
	color: #444;
	font-size: .97rem;
	line-height: 1.6;
}
.fcc-a-install-section__coverage {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 18px 22px;
	margin: 0 0 24px;
	font-size: .98rem;
	line-height: 1.75;
	color: #333;
}
.fcc-a-install-section__coverage a {
	color: #ed1c23;
	text-decoration: none;
	font-weight: 700;
}
.fcc-a-install-section__coverage a:hover { text-decoration: underline; }
.fcc-a-install-section__cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 4px;
}
@media (max-width: 640px) {
	.fcc-a-install-section__block { padding: 20px 20px; }
	.fcc-a-install-section__step { gap: 14px; padding: 12px 0; }
	.fcc-a-install-section__num { width: 34px; height: 34px; font-size: .98rem; }
	.fcc-a-install-section__coverage { padding: 16px 18px; font-size: .96rem; }
}

/* =================================================================
 * Amarr — Cost Factors section (v1.10.29 — Phase 2 SEO)
 * ================================================================= */
/* v1.10.30 — center the Cost Factors intro paragraph (was left-aligned) */
.fcc-a-cost-factors > p,
.fcc-a-cost-factors__lead,
.fcc-a-cost-factors .fcc-section__lead {
	text-align: center !important;
	max-width: 720px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 32px !important;
}
.fcc-a-cost-factors__lead {
	color: #333;
	font-size: 1.02rem;
	line-height: 1.7;
}
.fcc-a-cost-factors__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 32px;
}
.fcc-a-cost-factors__card {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 22px 22px 20px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.fcc-a-cost-factors__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.fcc-a-cost-factors__eyebrow {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #ed1c23;
	margin: 0 0 8px;
}
.fcc-a-cost-factors__title {
	font-size: 1.08rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 8px;
	line-height: 1.3;
}
.fcc-a-cost-factors__body {
	margin: 0;
	font-size: .96rem;
	line-height: 1.6;
	color: #444;
}
.fcc-a-cost-factors__cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 4px;
}
@media (max-width: 900px) {
	.fcc-a-cost-factors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.fcc-a-cost-factors__grid { grid-template-columns: 1fr; }
}

/* =================================================================
 * Amarr — Storm / WindPro section (v1.10.29 — Phase 2 SEO)
 * ================================================================= */
.fcc-a-windpro__card {
	background: #f5f5f5;
	border-left: 4px solid #ed1c23;
	border-radius: 8px;
	padding: 24px 28px;
}
.fcc-a-windpro__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.fcc-a-windpro__icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	color: #ed1c23;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.fcc-a-windpro__card p {
	margin: 0 0 14px;
	color: #333;
	font-size: 1rem;
	line-height: 1.65;
}
.fcc-a-windpro__card p:last-of-type { margin-bottom: 0; }
.fcc-a-windpro__callout {
	margin-top: 16px;
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 16px 18px;
	font-size: .96rem;
	line-height: 1.6;
	color: #333;
}
@media (max-width: 560px) {
	.fcc-a-windpro__card { padding: 20px 20px; }
	.fcc-a-windpro__callout { padding: 14px 16px; }
}

/* =================================================================
 * Amarr — HOA callout (v1.10.29 — Phase 2 SEO)
 * ================================================================= */
.fcc-a-hoa-callout__box {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 18px 22px;
}
.fcc-a-hoa-callout__icon {
	flex: 0 0 auto;
	color: #ed1c23;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.fcc-a-hoa-callout__body {
	margin: 0;
	color: #333;
	line-height: 1.65;
	font-size: 1rem;
}
@media (max-width: 560px) {
	.fcc-a-hoa-callout__box { padding: 16px 18px; gap: 12px; }
}

/* ================= Amarr feature icons (v1.10.33) ================= */
.fcc-a-features .fcc-a-features__card {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 4px !important;
}
.fcc-a-features__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 999px !important;
	background: #f5f5f5 !important; /* cream circle background */
	box-shadow: inset 0 0 0 2px rgba(237, 28, 35, 0.15) !important; /* subtle red ring */
	margin: 0 0 10px !important;
}
.fcc-a-features__icon svg {
	width: 30px !important;
	height: 30px !important;
	stroke: #ed1c23 !important;
	fill: none !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	display: block !important;
}
/* Filled icons (leaf, shield, etc.) can opt into red fill via .is-filled */
.fcc-a-features__icon svg.is-filled {
	fill: #ed1c23 !important;
	stroke: none !important;
}
@media (max-width: 640px) {
	.fcc-a-features__icon {
		width: 48px !important;
		height: 48px !important;
	}
	.fcc-a-features__icon svg {
		width: 24px !important;
		height: 24px !important;
	}
}

/* =========================================================================
   v1.11.0 Phase A — Clopay Best For, Cost Factors, HOA, Install, Cities.
   Uses the .fcc-c-* class namespace so nothing collides with Amarr (.fcc-a-*)
   or Invicta (.fcc-i-*). Style parity with the Amarr Phase 2 sections so
   Riley's site reads as one design system across all three brands.
   ========================================================================= */

/* Universal Clopay CTA button styling — matches the Amarr v1.10.35 pattern.
   Any .fcc-btn--red or .fcc-btn--outline-dark inside any .fcc-c-* Clopay
   container gets the solid high-contrast treatment (primary solid red +
   secondary solid dark). The attribute selector is safe: Amarr uses .fcc-a-*
   and Invicta uses .fcc-i-*, neither of which contains "fcc-c-". */
.fcc-c-section .fcc-btn--red,
[class*="fcc-c-"] .fcc-btn--red {
	background-color: #ed1c23 !important;
	color: #ffffff !important;
	border: 2px solid #ed1c23 !important;
	box-shadow: 0 2px 6px rgba(237, 28, 35, 0.25) !important;
	font-weight: 700 !important;
	padding: 14px 28px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.fcc-c-section .fcc-btn--red:hover,
[class*="fcc-c-"] .fcc-btn--red:hover {
	background-color: #c81a20 !important;
	border-color: #c81a20 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(237, 28, 35, 0.35) !important;
}
.fcc-c-section .fcc-btn--outline-dark,
[class*="fcc-c-"] .fcc-btn--outline-dark {
	background-color: #1a1a1a !important;
	color: #ffffff !important;
	border: 2px solid #1a1a1a !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20) !important;
	font-weight: 700 !important;
	padding: 14px 26px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.fcc-c-section .fcc-btn--outline-dark:hover,
[class*="fcc-c-"] .fcc-btn--outline-dark:hover {
	background-color: #000000 !important;
	color: #ffffff !important;
	border-color: #000000 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30) !important;
}
.fcc-c-section .fcc-btn--outline-dark svg,
[class*="fcc-c-"] .fcc-btn--outline-dark svg {
	stroke: #ffffff !important;
	color: #ffffff !important;
}
@media (max-width: 640px) {
	[class*="fcc-c-"] .fcc-btn {
		width: 100% !important;
		padding: 14px 20px !important;
		justify-content: center !important;
	}
}
.fcc-c-section { margin: 48px 0; }

/* =========================================================================
   v1.11.2 Phase C — Universal Invicta CTA button styling
   -------------------------------------------------------------------------
   Mirrors the Amarr [class*="fcc-a-"] and Clopay [class*="fcc-c-"] universal
   rules so any .fcc-btn--red or .fcc-btn--outline-dark inside any .fcc-i-*
   Invicta container renders as solid red primary + solid dark secondary,
   regardless of which section it lives in. Previously the Invicta solid
   rule (in class-fcc-invicta-frontend.php inline CSS) was scoped to only
   .fcc-i-cost-factors and .fcc-i-install-section — any new Invicta section
   would render buttons with the up-page white-on-transparent .fcc-btn rule.
   [class*="fcc-i-"] is safe: Amarr (.fcc-a-*) and Clopay (.fcc-c-*) don't
   contain the "fcc-i-" substring. The --white variant on the closing red
   CTA banner uses .fcc-btn--white which is intentionally NOT targeted here.
   ========================================================================= */
[class*="fcc-i-"] .fcc-btn--red {
	background-color: #ed1c23 !important;
	color: #ffffff !important;
	border: 2px solid #ed1c23 !important;
	box-shadow: 0 2px 6px rgba(237, 28, 35, 0.25) !important;
	font-weight: 700 !important;
	padding: 14px 28px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
[class*="fcc-i-"] .fcc-btn--red:hover {
	background-color: #c81a20 !important;
	border-color: #c81a20 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(237, 28, 35, 0.35) !important;
}
[class*="fcc-i-"] .fcc-btn--outline-dark {
	background-color: #1a1a1a !important;
	color: #ffffff !important;
	border: 2px solid #1a1a1a !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20) !important;
	font-weight: 700 !important;
	padding: 14px 26px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
[class*="fcc-i-"] .fcc-btn--outline-dark:hover {
	background-color: #000000 !important;
	color: #ffffff !important;
	border-color: #000000 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30) !important;
}
[class*="fcc-i-"] .fcc-btn--outline-dark svg {
	stroke: #ffffff !important;
	color: #ffffff !important;
}
@media (max-width: 640px) {
	[class*="fcc-i-"] .fcc-btn {
		width: 100% !important;
		padding: 14px 20px !important;
		justify-content: center !important;
	}
}

/* ---------- Best For hero callout ---------- */
.fcc-c-best-for-wrap {
	margin: 8px auto 24px;
}
.fcc-c-best-for {
	background: #f5f5f5;
	border-left: 4px solid #ed1c23;
	border-radius: 8px;
	padding: 14px 18px;
	font-size: 1rem;
	line-height: 1.55;
	color: #222;
}
.fcc-c-best-for__label {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .78rem;
	color: #ed1c23;
	margin-right: 8px;
	display: inline-block;
}
.fcc-c-best-for__body { color: #222; }

/* ---------- Cost Factors ---------- */
.fcc-c-cost-factors > p,
.fcc-c-cost-factors__lead,
.fcc-c-cost-factors .fcc-section__lead {
	text-align: center !important;
	max-width: 720px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 32px !important;
}
.fcc-c-cost-factors__lead {
	color: #333;
	font-size: 1.02rem;
	line-height: 1.7;
}
.fcc-c-cost-factors__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 32px;
}
.fcc-c-cost-factors__card {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 22px 22px 20px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.fcc-c-cost-factors__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.fcc-c-cost-factors__eyebrow {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #ed1c23;
	margin: 0 0 8px;
}
.fcc-c-cost-factors__title {
	font-size: 1.08rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 8px;
	line-height: 1.3;
}
.fcc-c-cost-factors__body {
	margin: 0;
	font-size: .96rem;
	line-height: 1.6;
	color: #444;
}
.fcc-c-cost-factors__cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 4px;
}
@media (max-width: 900px) {
	.fcc-c-cost-factors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.fcc-c-cost-factors__grid { grid-template-columns: 1fr; }
}

/* ---------- HOA callout ---------- */
.fcc-c-hoa-callout__box {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 18px 22px;
}
.fcc-c-hoa-callout__icon {
	flex: 0 0 auto;
	color: #ed1c23;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.fcc-c-hoa-callout__body {
	flex: 1 1 auto;
	color: #333;
	line-height: 1.65;
	font-size: 1rem;
}
.fcc-c-hoa-callout__body p { margin: 0 0 10px; }
.fcc-c-hoa-callout__body p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
	.fcc-c-hoa-callout__box { padding: 16px 18px; gap: 12px; }
}

/* ---------- Install Section ---------- */
.fcc-c-install-section .fcc-section__title {
	text-align: center;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 28px;
}
.fcc-c-install-section__block {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 24px 26px;
	margin: 0 0 22px;
}
.fcc-c-install-section__block:last-of-type { margin-bottom: 22px; }
.fcc-c-install-section__h3 {
	font-size: 1.18rem;
	font-weight: 800;
	color: #111;
	margin: 0 0 12px;
	padding: 0 0 10px;
	border-bottom: 2px solid #ed1c23;
	display: inline-block;
	line-height: 1.3;
}
.fcc-c-install-section__block p {
	margin: 0 0 12px;
	color: #333;
	font-size: 1rem;
	line-height: 1.7;
}
.fcc-c-install-section__block p:last-of-type { margin-bottom: 0; }
.fcc-c-install-section__steps {
	list-style: none;
	padding: 0;
	margin: 8px 0 0;
}
.fcc-c-install-section__step {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 14px 0;
	border-top: 1px solid #e0e0e0;
}
.fcc-c-install-section__step:first-of-type { border-top: none; padding-top: 4px; }
.fcc-c-install-section__num {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #ed1c23;
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1;
}
.fcc-c-install-section__step-body { flex: 1 1 auto; }
.fcc-c-install-section__step-title {
	font-size: 1.04rem;
	font-weight: 800;
	color: #111;
	margin: 4px 0 6px;
	line-height: 1.3;
}
.fcc-c-install-section__step-body p {
	margin: 0;
	color: #444;
	font-size: .97rem;
	line-height: 1.6;
}
.fcc-c-install-section__coverage {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 18px 22px;
	margin: 0 0 24px;
	font-size: .98rem;
	line-height: 1.75;
	color: #333;
}
.fcc-c-install-section__coverage a {
	color: #ed1c23;
	text-decoration: none;
	font-weight: 700;
}
.fcc-c-install-section__coverage a:hover { text-decoration: underline; }
.fcc-c-install-section__cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 4px;
}
@media (max-width: 640px) {
	.fcc-c-install-section__block { padding: 20px 20px; }
	.fcc-c-install-section__step { gap: 14px; padding: 12px 0; }
	.fcc-c-install-section__num { width: 34px; height: 34px; font-size: .98rem; }
	.fcc-c-install-section__coverage { padding: 16px 18px; font-size: .96rem; }
}

/* ---------- Clopay Cities Section wrapper (card CSS is shared — see
   .fcc-city-card block above, v1.11.3). This block just controls the
   section background and intro paragraph — card layout is unified. ---- */
.fcc-c-cities { background: #ffffff; }
.fcc-c-cities .fcc-section__title { margin: 0 0 12px; }
.fcc-c-cities__intro {
	font-size: 1rem;
	line-height: 1.65;
	color: #444;
	max-width: 820px;
	margin: 0 0 24px;
}

/* =========================================================================
   v1.11.8 / v1.11.9 — Clopay single-door breadcrumb spacing fix
   -------------------------------------------------------------------------
   v1.11.6 moved Clopay breadcrumbs out of the hero text column into a
   .fcc-c-single-top strip above the hero — but the shared spacing rules
   stacked ~200px of empty page-bg around it:
     • .fcc-single-door > article > .fcc-contained:first-of-type
       adds margin-top: 100px ABOVE the strip
     • .fcc-hero-split adds another margin-top: 100px BELOW the strip
       (before the hero starts)
   The strip then floated in a visible gap with the page background
   showing through above AND below it, breaking the visual flow into
   the hero. Amarr solved this same problem in v1.10.6 with scoped
   .fcc-single-amarr overrides (see lines ~4009-4038). Mirror that
   approach here, scoped strictly to body.single-farnsworth_door so
   nothing leaks into Amarr or Invicta pages.

   Structure change in templates/single-farnsworth_door.php (v1.11.8):
   the breadcrumb strip is now wrapped in <section class="fcc-c-crumbs-strip
   fcc-full-bleed"> so the cream background can span the entire viewport
   width, not just the .fcc-contained max-width. That wrapper section is
   what carries the visible cream color; the inner .fcc-contained still
   handles horizontal centering.

   v1.11.9 fix: v1.11.8 dropped the strip's top padding to 20px, which
   pushed the crumb text underneath the sticky site header (~80px tall)
   and hid it. Restore proper header clearance using the CLAUDE.md
   standard: padding-top: 100px desktop / 120px mobile — same values the
   blog posts use on .fgd-page to clear the header. Bottom padding stays
   tight (10px) so the strip and hero still butt flush on the shared
   cream background (v1.11.8's key win — no visual gap between them).

   Result: breadcrumb strip is visible below the sticky header AND
   remains visually flush with the hero on a continuous cream surface.
   ========================================================================= */

/* Full-bleed cream strip that carries the breadcrumbs. Matches the
   hero's --fcc-bg-soft (#f8f8f8) so the strip + hero visually blend
   into one continuous cream surface. Big top padding clears the sticky
   site header (v1.11.9 fix — CLAUDE.md standard 100px desktop / 120px
   mobile). Small bottom padding so it butts flush against the hero. */

/* Kill the shared .fcc-single-door > article > section:first-of-type
   { margin-top: 100px } that would otherwise stack 100px of empty
   page-bg ABOVE the new full-bleed strip. */

/* Kill the .fcc-hero-split { margin-top: 100px } that stacked a
   second empty gap between the crumbs strip and the hero. Together
   with the strip's own zeroed margin-top, the strip and hero now
   touch — no visible page-bg break. */

/* Trim the hero's own top padding a little now that the crumbs strip
   is sitting directly above it providing top visual space. Preserves
   the hero's bottom padding (48px) so the hero still breathes into
   the installer tagline below. */

/* ================================================================
   v1.11.11 — Aluminum full-view (Vista + Horizon) styling
   ---------------------------------------------------------------- */

/* Explanatory notes tucked between finish sub-groups inside the
   Panel Styles & Finish Options section. `--note` is the descriptive
   paragraph under the Anodize / Powder Coat subheads; `--subnote` is
   the smaller in-stock / special-order divider line. Reuses cream +
   red palette from the rest of the Amarr renderer. */
.fcc-a-panels__note {
	max-width: 780px;
	margin: 0 auto 20px;
	color: #4b4a48;
	font-size: 0.98rem;
	line-height: 1.55;
	text-align: center;
}
.fcc-a-panels__subnote {
	margin: 22px 0 12px;
	color: #1a1a1a;
	font-size: 0.98rem;
	text-align: center;
}
.fcc-a-panels__subnote strong {
	color: #ed1c23;
}

/* Full Specifications section (from the aluminum spec-sheet PDFs).
   Card grid up top for individual key facts, then the panel-configurations
   list and the warranty summary. Cream background matches the rest of
   the Amarr palette; no black backgrounds anywhere. */
.fcc-a-spec {
	background: #f5f5f5;
}
.fcc-a-spec__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
	margin: 24px auto 32px;
	max-width: 1080px;
}
.fcc-a-spec__card {
	background: #ffffff;
	border: 1px solid #dcdcdc;
	border-left: 4px solid #ed1c23;
	border-radius: 6px;
	padding: 16px 18px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.fcc-a-spec__label {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #ed1c23;
	font-weight: 700;
	margin-bottom: 6px;
}
.fcc-a-spec__value {
	font-size: 0.96rem;
	line-height: 1.45;
	color: #1a1a1a;
}

.fcc-a-spec__panels {
	max-width: 720px;
	margin: 0 auto 32px;
	background: #ffffff;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	overflow: hidden;
}
.fcc-a-spec__panel-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 18px;
	border-bottom: 1px solid #e8e8e8;
	font-size: 0.98rem;
}
.fcc-a-spec__panel-row:last-child { border-bottom: 0; }
.fcc-a-spec__panel-width { color: #1a1a1a; }
.fcc-a-spec__panel-count {
	color: #ed1c23;
	font-weight: 700;
}

.fcc-a-spec__warranty {
	max-width: 720px;
	margin: 0 auto 24px;
	background: #ffffff;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	padding: 18px 22px;
}
.fcc-a-spec__warranty-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid #e8e8e8;
	font-size: 0.98rem;
}
.fcc-a-spec__warranty-row:last-of-type { border-bottom: 0; }
.fcc-a-spec__warranty-label { color: #1a1a1a; font-weight: 600; }
.fcc-a-spec__warranty-value { color: #ed1c23; font-weight: 700; }
.fcc-a-spec__warranty-notes {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid #e8e8e8;
	color: #6b6864;
	font-size: 0.9rem;
	font-style: italic;
	text-align: center;
}
.fcc-a-spec__glass-notes {
	max-width: 780px;
	margin: 24px auto 0;
	padding: 14px 18px;
	background: #ffffff;
	border-left: 4px solid #ed1c23;
	border-radius: 4px;
	color: #1a1a1a;
	font-size: 0.95rem;
	line-height: 1.55;
	text-align: left;
}

@media (max-width: 640px) {
	.fcc-a-spec__grid { grid-template-columns: 1fr; }
	.fcc-a-spec__panel-row {
		flex-direction: column;
		gap: 4px;
		align-items: flex-start;
	}
}

/* ================================================================
   v1.11.12 — Lazy-load placeholder frame fix (Amarr hero)
   ----------------------------------------------------------------
   LiteSpeed Cache (and A3 Lazy Load / WP Rocket) intercepts the
   hero <img>, swaps src with a data:image/svg+xml placeholder that
   contains a rect filled #cfd4db at 10% opacity. Because the img
   still has our v1.10.27 border-radius:12px + box-shadow, that
   grey wash renders as a visible rounded rectangle frame that
   reads exactly like the OLD container we killed.

   Primary fix: render-time attributes on the img in
   FCC_Amarr_Renderer::hero() (loading=eager, fetchpriority=high,
   class=no-lazy, data-no-lazy=1) opt the hero out of every
   common lazy loader. This CSS is a defensive fallback in case
   the plugin's HTML is rewritten server-side by an ESI/optimizer
   pipeline before our attributes take effect.

   While the img still holds a data:image/svg placeholder src, we
   drop its box-shadow + border-radius + visibility so no framing
   is visible. The moment the lazy loader swaps src to the real
   URL, the [src^="data:"] selector stops matching and the img
   re-inherits v1.10.27's rounded corners + soft shadow. */

/* =========================================================================
   v1.12.0 CLOPAY CONTENT REVAMP — 7 new Farnsworth-voice sections
   Class prefix .fcc-c-* keeps the styles scoped so they can't collide with
   the Amarr (.fcc-a-*) or Invicta (.fcc-i-*) rules elsewhere in this file.
   Design notes:
     • Light backgrounds only (cream, off-white, white) — no black backgrounds
       per Riley's memory rule.
     • Red (#ed1c23) as accent for eyebrows, borders, buttons — never full bg.
     • Mobile-first: single column at small widths, grid layouts at ≥720px.
     • Consistent card treatment across About / Features / Common Configs /
       Replace-Upgrade / Cost / Why-Farnsworth so the page reads unified.
   ========================================================================= */

.fcc-c-section {
	background: #ffffff;
	border-radius: 10px;
	padding: 32px 28px;
	margin: 22px 0;
	box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
@media (max-width: 640px) {
	.fcc-c-section { padding: 24px 20px; }
}

/* ---------- About the [Model] (fcc-c-about-custom) ---------- */
.fcc-c-about-custom__body p {
	font-size: 1.02rem;
	line-height: 1.75;
	color: #2a2a2a;
	margin: 0 0 14px;
}
.fcc-c-about-custom__body p:last-child { margin-bottom: 0; }

/* ---------- Features Rewritten (fcc-c-features-rewritten) ---------- */
.fcc-c-features-rewritten__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 4px;
}
@media (min-width: 720px) {
	.fcc-c-features-rewritten__grid { grid-template-columns: 1fr 1fr; }
}
.fcc-c-features-rewritten__card {
	background: #f5f5f5;
	border: 1px solid #ececec;
	border-left: 3px solid #ed1c23;
	border-radius: 8px;
	padding: 20px 22px;
}
.fcc-c-features-rewritten__card-title {
	font-size: 1.08rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 8px;
	line-height: 1.35;
}
.fcc-c-features-rewritten__card-body {
	font-size: .95rem;
	line-height: 1.6;
	color: #444;
	margin: 0;
}

/* ---------- Common Configurations (fcc-c-common-configs) ---------- */
.fcc-c-common-configs__lead {
	font-size: 1rem;
	line-height: 1.6;
	color: #444;
	margin: 4px 0 20px;
}
.fcc-c-common-configs__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 720px) {
	.fcc-c-common-configs__grid { grid-template-columns: 1fr 1fr; }
}
.fcc-c-common-configs__card {
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 10px;
	padding: 24px 22px;
	position: relative;
}
.fcc-c-common-configs__card--feature {
	background: #f5f5f5;
	border-color: #ed1c23;
	border-width: 2px;
}
.fcc-c-common-configs__eyebrow {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #ed1c23;
	margin-bottom: 8px;
}
.fcc-c-common-configs__card-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 4px;
	line-height: 1.35;
}
.fcc-c-common-configs__card-sub {
	font-size: .9rem;
	font-weight: 600;
	color: #666;
	margin: 0 0 12px;
}
.fcc-c-common-configs__card-body {
	font-size: .96rem;
	line-height: 1.6;
	color: #444;
	margin: 0;
}

/* ---------- Replace, Upgrade, or New Construction (fcc-c-replace-upgrade) ---------- */
.fcc-c-replace-upgrade__lead {
	font-size: 1rem;
	line-height: 1.6;
	color: #444;
	margin: 4px 0 20px;
}
.fcc-c-replace-upgrade__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
@media (min-width: 900px) {
	.fcc-c-replace-upgrade__grid { grid-template-columns: repeat(3, 1fr); }
}
.fcc-c-replace-upgrade__card {
	background: #f5f5f5;
	border: 1px solid #ececec;
	border-top: 3px solid #ed1c23;
	border-radius: 8px;
	padding: 22px 20px;
}
.fcc-c-replace-upgrade__card-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 10px;
	line-height: 1.35;
}
.fcc-c-replace-upgrade__card p {
	font-size: .95rem;
	line-height: 1.6;
	color: #444;
	margin: 0;
}

/* ---------- How Much Does It Cost (fcc-c-how-much-cost) ---------- */

/* ---------- Get Quote CTA block (fcc-c-get-quote-cta) ---------- */
.fcc-c-get-quote-cta {
	background: #f5f5f5;
	border: 2px solid #ed1c23;
	border-radius: 12px;
	padding: 30px 28px;
	margin: 22px 0;
	text-align: center;
}
.fcc-c-get-quote-cta__eyebrow {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #ed1c23;
	margin-bottom: 8px;
}
.fcc-c-get-quote-cta__title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 10px;
	line-height: 1.3;
}
.fcc-c-get-quote-cta__sub {
	font-size: 1rem;
	line-height: 1.6;
	color: #444;
	margin: 0 auto 18px;
	max-width: 680px;
}
.fcc-c-get-quote-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
@media (max-width: 640px) {
	.fcc-c-get-quote-cta { padding: 24px 18px; }
	.fcc-c-get-quote-cta__title { font-size: 1.28rem; }
}

/* ---------- Why Choose Farnsworth (fcc-c-why-farnsworth) ---------- */
.fcc-c-why-farnsworth__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 720px) {
	.fcc-c-why-farnsworth__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
	.fcc-c-why-farnsworth__grid { grid-template-columns: repeat(3, 1fr); }
}
.fcc-c-why-farnsworth__card {
	background: #f5f5f5;
	border: 1px solid #ececec;
	border-left: 3px solid #ed1c23;
	border-radius: 8px;
	padding: 18px 20px;
}
.fcc-c-why-farnsworth__card-title {
	font-size: 1.02rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 8px;
	line-height: 1.35;
}
.fcc-c-why-farnsworth__card p {
	font-size: .93rem;
	line-height: 1.55;
	color: #444;
	margin: 0;
}


/* ============================================================================
   v1.15.0 — WAYNE DALTON SCOPED CSS
   Mirror of the Amarr (fcc-a-*, fcc-amarr-*) rules above but re-prefixed for
   the Wayne Dalton renderer's fcc-wd-* / fcc-wayne-dalton-* class output.
   Kept as an appended block instead of comma-joined selectors so each brand
   can diverge cleanly in later releases without editing a shared rule.
   ============================================================================ */
.fcc-wd-single-top { padding-top: 20px; }
/* v1.11.6: Clopay singles reuse the above-hero breadcrumb strip pattern from
   Wayne Dalton so the two brands sit visually identical. See templates/single-
   farnsworth_door.php for the emission point (breadcrumbs used to render
   inside the .fcc-hero-split__text column). */
/* v1.11.8: The strip's outer .fcc-c-crumbs-strip wrapper now owns vertical
   padding (see the v1.11.8 block near the end of this file). This inner
   .fcc-contained just handles horizontal centering + max-width, so no
   vertical padding here. */
.fcc-c-single-top { padding-top: 0; }
.fcc-c-single-top .fcc-clopay-breadcrumbs { margin: 0 !important; }

/* --- Hero: Best-for eyebrow line (v1.10.28 Phase 1 SEO) --- */
.fcc-wd-hero__best-for {
	margin: 6px 0 12px;
	padding: 10px 14px;
	background: #f5f5f5;
	border-left: 3px solid #ed1c23;
	border-radius: 4px;
	color: #333;
	font-size: 0.95rem;
	line-height: 1.45;
}
.fcc-wd-hero__best-for-label {
	display: inline-block;
	margin-right: 4px;
	color: #b31217;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* --- Recently Installed strip (v1.10.28 Phase 1 SEO) --- */

/* --- Generic Wayne Dalton section --- */
.fcc-wd-section { margin: 56px 0; }
.fcc-wd-section .fcc-section__title {
	margin-bottom: 12px;
}

/* --- Features grid --- */
.fcc-wd-features__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 24px;
}
.fcc-wd-features__card {
	background: #f5f5f5;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	padding: 22px 22px 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.fcc-wd-features__title {
	font-size: 1.05rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 8px;
}
.fcc-wd-features__desc {
	color: #444;
	font-size: 0.98rem;
	line-height: 1.55;
	margin: 0;
}

/* --- Construction --- */
.fcc-wd-construction__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 32px;
	margin-top: 20px;
}
@media (max-width: 900px) {
	.fcc-wd-construction__grid { grid-template-columns: 1fr; }
}
.fcc-wd-construction__list {
	margin: 0 0 20px;
	padding-left: 20px;
	line-height: 1.65;
	color: #333;
}
.fcc-wd-construction__list li { margin: 0 0 10px; }

/* --- Design grid + Single/Double toggle ---
   v1.10.16: rebuilt as a clean brand-red pill toggle. Previous rules
   rendered the active button as a black pill (unreadable dark-on-dark
   text) and the inactive button picked up a pink browser focus outline.
   Every selector is scoped under .fcc-wd-designs__toggle so Clopay and
   Invicta toggles are untouched. !important is used because Elementor +
   theme button rules were bleeding into the buttons on the live page. */

/* --- Textured (Foundry Reserve) + Panel style + Plank grids reuse this --- */

/* --- Swatches grid (colors, windows, glass, decraglass, hardware, tops) --- */
.fcc-wd-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 16px;
	margin-top: 8px;
}
.fcc-wd-swatch {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	padding: 10px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.fcc-wd-swatch__chip {
	/* v1.10.13: aspect ratio is now set per grid type via
	   `.fcc-wd-swatches--<type>` modifier classes so hardware (square),
	   glass (portrait), colors (square), tops (2:1), and windows (4:3)
	   each fill their chip without wasted cream padding. The default
	   4/3 handles any un-typed callers safely. See the modifier block
	   below this rule. */
	/* v1.10.25: chip background swapped from cream (#f5f5f5) to white so
	   Wayne Dalton's white-background product renders blend into the chip cleanly
	   instead of the cream tone framing them awkwardly. Outer .fcc-wd-swatch
	   card wrapper still uses cream for visual definition. */
	background: #ffffff;
	border-radius: 6px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	min-height: 100px;
	margin-bottom: 8px;
	padding: 8px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* --- Per-swatch-grid aspect ratios (v1.10.13; retuned v1.10.21) ---
   Each grid modifier overrides the default 4:3 with a ratio that
   matches the underlying Wayne Dalton source imagery so nothing gets stretched
   or letterboxed in a bad way.

   v1.10.21: Top Sections, Window Inserts, DecraGlass, and Glass Colors
   all ship as landscape ~3.5:1 crops from Wayne Dalton (measured live: 699x200
   window/top-section PNGs; 3915x1016 DecraGlass JPGs). The prior 2:1,
   4:3, and 3:4 chip ratios were stuffing wide images into square-ish or
   portrait chips, leaving heavy cream letterboxing and making the actual
   swatches feel tiny. Match aspect (7/2) + widen the grid so fewer, bigger
   cards fit per row and the customer can actually see the option. */
.fcc-wd-swatches--tops {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.fcc-wd-swatches--tops .fcc-wd-swatch__chip     { aspect-ratio: 7 / 2;  min-height: 80px;  }
.fcc-wd-swatches--hardware .fcc-wd-swatch__chip { aspect-ratio: 1 / 1;  min-height: 130px; }
/* v1.15.9: Enlarged the glass swatch grid so customers can actually SEE
   the tint gradient and obscure-glass texture on Wayne Dalton single-door
   pages. Previous 180px column / 70px chip min-height rendered the tint
   images at ~150w × ~43h — too small to read the color/texture detail.
   Bumped to 260px columns + 110px min-height (aspect kept at 7/2 to match
   Wayne Dalton's landscape tint crops), which lands the images around
   ~245w × ~70h at desktop widths — ~65% larger without stretching. Mobile
   sizes bumped in tandem in the ≤767px breakpoint below. Scope is limited
   to .fcc-wd-swatches--glass so Window Inserts, Hardware, and Colors are
   unaffected. */
.fcc-wd-swatches--glass {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.fcc-wd-swatches--glass .fcc-wd-swatch__chip    { aspect-ratio: 7 / 2;  min-height: 110px; }
.fcc-wd-swatches--colors .fcc-wd-swatch__chip   { aspect-ratio: 1 / 1;  min-height: 130px; }
.fcc-wd-swatches--windows {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.fcc-wd-swatches--windows .fcc-wd-swatch__chip  { aspect-ratio: 7 / 2;  min-height: 75px;  }
/* v1.10.15: compact upper "Door Design" grid — same source images as the
   lower Door Designs gallery, but denser (6-per-row at desktop widths) so
   it reads as a quick preview, not a duplicate gallery. Smaller card
   padding, smaller label, tighter gutter, no 8px inner cream padding on
   the chip (the single-car renders already have their own margin baked
   in and Wayne Dalton designs are wider than they are tall — 2:1). */
.fcc-wd-swatch__chip img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
/* v1.10.23: Wayne Dalton swatch overflow containment.
   Diagnosed live via Chrome MCP on staging: on Top Sections / Window Inserts /
   DecraGlass / Glass Colors, the chip's aspect-ratio (7/2) combined with its
   min-height (80/70/75px) computed a chip width from height (e.g., 80 × 3.5 =
   280px), which exceeded the parent swatch's inner content width (~253px on
   the 220px minmax grid). The chip's cream background AND the contained image
   bled 10-18px past the outer white card border, making the images visually
   appear larger than the cards. Clamp everything inside the card border here
   so the aspect-ratio math can never blow past the container. Scoped to the
   .fcc-wd-* Wayne Dalton namespace — Clopay/Invicta use different prefixes. */
.fcc-wd-swatch {
	overflow: hidden !important;
	box-sizing: border-box !important;
}
.fcc-wd-swatch__chip {
	overflow: hidden !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
}
.fcc-wd-swatch__chip img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
	box-shadow: none !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}
/* v1.10.19: hex-fill chips for solid Wayne Dalton paint colors. Same footprint as
 * the image chip variants — the parent .fcc-wd-swatches--colors rule already
 * sets aspect-ratio + min-height, so this only needs the color fill and a
 * subtle inner ring so pale swatches (True White, Almond) still read as
 * chips against the cream page background. */
.fcc-wd-swatch__label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #333;
	display: block;
	line-height: 1.3;
}

/* --- Text pill (used when a swatch entry has no image) --- */

/* --- Pill-only swatch grid — override grid to flex-wrap so pills sit at
       their natural width and read as intentional design chips. --- */

/* --- Color notes (fallback text-only list) --- */

/* --- Wayne Dalton Color Zone callout --- */

/* --- Warranty (v1.14.1 — tier-grouped duration cards) ---
   Replaces the v1.14.0 paragraph card. Each collection now renders as a
   card grid where every card = one warranty DURATION, listing only the
   components covered at that tier. Much easier to scan than the old
   warranty_class prose blob. Facts source: Wayne Dalton Consolidated Residential
   Warranty PDF (Form 842). */

/* Transferable flag — kept from v1.14.0, promoted to a top-level pill
   between the section lead and the card grid. */
.fcc-wd-warranty__flag {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 6px 0 22px;
}
.fcc-wd-warranty__flag.is-transfer {
	background: #e6f5e6;
	color: #1d6b1d;
}
.fcc-wd-warranty__flag.is-nontransfer {
	background: #fff0f0;
	color: #b3242b;
}

/* Duration-tier card grid — 3 cols desktop, 2 cols tablet, 1 col mobile. */
.fcc-wd-warranty__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0 0 24px;
}
.fcc-wd-warranty__tier {
	background: #f5f5f5;
	border: 1px solid #dcdcdc;
	border-radius: 12px;
	padding: 26px 24px 24px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.04);
	display: flex;
	flex-direction: column;
}
.fcc-wd-warranty__duration {
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ed1c23;
	line-height: 1.1;
	margin: 0;
}
.fcc-wd-warranty__sub {
	font-size: 0.78rem;
	color: #6b6b6b;
	font-style: italic;
	margin-top: 6px;
	letter-spacing: 0.02em;
}
.fcc-wd-warranty__divider {
	height: 3px;
	width: 44px;
	background: #ed1c23;
	border-radius: 3px;
	margin: 14px 0 16px;
}
.fcc-wd-warranty__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.fcc-wd-warranty__list li {
	color: #333;
	font-size: 0.98rem;
	line-height: 1.45;
	padding-left: 18px;
	position: relative;
}
.fcc-wd-warranty__list li::before {
	content: '';
	width: 6px;
	height: 6px;
	background: #ed1c23;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 8px;
}

/* Builds note — the "coverage shown is for X build; lower builds Y" line. */
.fcc-wd-warranty__builds-note {
	color: #444;
	background: #fff;
	border: 1px solid #eaeaea;
	border-left: 3px solid #ed1c23;
	padding: 14px 18px;
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 18px;
	border-radius: 0 6px 6px 0;
}

/* Field-of-use notes (voids, exclusions) inherited from the JSON. */
.fcc-wd-warranty__notes {
	color: #555;
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 18px;
}
.fcc-wd-warranty__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}
.fcc-wd-warranty__foot {
	color: #777;
	font-size: 0.88rem;
	line-height: 1.55;
	margin: 0;
}

@media (max-width: 900px) {
	.fcc-wd-warranty__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.fcc-wd-warranty__grid { grid-template-columns: 1fr; }
	.fcc-wd-warranty__tier { padding: 22px 20px 20px; }
	.fcc-wd-warranty__duration { font-size: 1.35rem; }
}

/* Legacy card class from v1.14.0 kept as a no-op safety net — not
   emitted by the v1.14.1 renderer but harmless if any cached HTML still
   contains it. */

/* --- Series callout grid (Classica) --- */

/* --- Aluminum/glass color categories (v1.15.26) ---
   Only aluminum/glass collections use these subheadings; steel/wood/vinyl/
   fiberglass stay as a single flat swatch grid with no subheads. Reuses the
   same visual weight as the windows/textured subheads for consistency. */
.fcc-wd-colors__subhead { font-size: 1.15rem; font-weight: 800; color: #1a1a1a; margin: 28px 0 14px; }
.fcc-wd-colors__subhead:first-of-type { margin-top: 8px; }

/* --- Windows/glass carousel --- */
.fcc-wd-windows__subhead { font-size: 1.15rem; font-weight: 800; color: #1a1a1a; margin: 28px 0 14px; }

/* --- Custom wood callout ---
   v1.10.11: centered layout so the two CTA buttons sit balanced under the
   copy instead of pushing to the left edge of the callout. */

/* --- Downloads --- */
.fcc-wd-downloads__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
	margin-top: 20px;
}
.fcc-wd-downloads__card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 10px;
	padding: 16px 18px;
	text-decoration: none;
	color: #1a1a1a;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fcc-wd-downloads__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	color: #ed1c23;
}
.fcc-wd-downloads__icon {
	background: #f5f5f5;
	color: #ed1c23;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
}
.fcc-wd-downloads__meta {
	display: flex;
	flex-direction: column;
}
.fcc-wd-downloads__label {
	font-weight: 700;
	color: inherit;
	line-height: 1.3;
}
.fcc-wd-downloads__ext {
	color: #999;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: 2px;
}

/* --- Mid CTA (uses shared .fcc-mid-cta base) --- */
.fcc-wd-mid-cta { border-color: #ed1c23; }

/* --- Hub warranty grid --- */
.fcc-wd-hub-warranty__note {
	background: #f5f5f5;
	border-left: 4px solid #ed1c23;
	padding: 16px 20px;
	margin-top: 22px;
	color: #333;
	line-height: 1.55;
}

/* --- Reviews widget --- */
.fcc-wd-reviews__widget { margin-top: 20px; }

/* --- Mobile polish --- */
@media (max-width: 767px) {
	.fcc-wd-section { margin: 36px 0; }
	.fcc-wd-swatches { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
	/* v1.10.15: series preview stays denser than the main Door Designs
	   gallery even on phones — 2 cards per row at typical phone widths. */
	/* v1.10.21: keep the bigger landscape-swatch sections at 2 cards per row
	   on phones (~320-414px viewports) instead of collapsing to the shared
	   110px minmax. Also drop the desktop chip min-height on mobile so a
	   150px-wide chip at 7:2 (natural h ~43px) doesn't get force-padded to
	   80px with cream letterboxing. */
	.fcc-wd-swatches--tops    { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.fcc-wd-swatches--windows { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	/* v1.15.9: mobile glass swatches sized up alongside the desktop bump so
	   the tint/texture detail stays readable on phones — was 150px column /
	   45px chip min-height, now 220px / 85px (≈90% larger). */
	.fcc-wd-swatches--glass   { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
	.fcc-wd-swatches--tops .fcc-wd-swatch__chip,
	.fcc-wd-swatches--windows .fcc-wd-swatch__chip { min-height: 45px; }
	.fcc-wd-swatches--glass .fcc-wd-swatch__chip  { min-height: 85px; }
	.fcc-wd-features__grid { grid-template-columns: 1fr; gap: 14px; }
	.fcc-wd-downloads__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   v1.10.6 — Wayne Dalton single-door page cleanup
   -------------------------------------------------------------------------
   The staging build (v1.10.5) had ~367px of empty space between the WP
   header and the hero (100px inline body-main margin + 100px on the first
   .fcc-contained + 100px on .fcc-hero-split all stacked). It also inherited
   the Clopay/Invicta text-align:center hero rule (via the shared
   .fcc-single-door class) — Wayne Dalton's hero is a wide split layout that needs
   to stay left-aligned. And the answer-capsule was clamped to zero margin
   by an old Clopay override.

   This block fixes all of it in one place, scoped strictly to
   .fcc-single-wayne-dalton so nothing leaks into the other brands.
   ========================================================================= */

/* Kill the legacy 100px margin the shared .fcc-contained:first-of-type rule
   was applying to Wayne Dalton's breadcrumbs container. The inline critical CSS
   (in class-fcc-wayne-dalton-frontend.php) already gives us 20px of clearance from
   the site header — anything more is redundant. */
.fcc-single-wayne-dalton.fcc-single-door > article > .fcc-contained.fcc-wd-single-top {
	margin-top: 0 !important;
}
@media (max-width: 767px) {
	.fcc-single-wayne-dalton.fcc-single-door > article > .fcc-contained.fcc-wd-single-top {
		margin-top: 0 !important;
	}
}

/* Zero out the .fcc-hero-split { margin-top: 100px } that ships as the
   default for Clopay/Invicta split heroes. Wayne Dalton's breadcrumbs already
   provide the visual gap; the hero should sit right underneath. */
.fcc-single-wayne-dalton .fcc-hero-split.fcc-wd-hero {
	margin-top: 0 !important;
	/* Warm cream (matches .fcc-mid-cta and the rest of the plugin's cream
	   surfaces). Overrides the plugin default's cool #f8f8f8 gray. */
	background: #f5f5f5 !important;
	border-bottom: 1px solid #dcdcdc !important;
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}
@media (max-width: 767px) {
	.fcc-single-wayne-dalton .fcc-hero-split.fcc-wd-hero {
		padding-top: 28px !important;
		padding-bottom: 28px !important;
	}
}

/* Hero inner is now nested inside .fcc-contained (v1.10.6 template change),
   so the two-column split aligns horizontally with every section title
   below. Kill the shared __inner max-width/padding — .fcc-contained is now
   the constraint, and __inner just needs to be the grid container. */
.fcc-single-wayne-dalton .fcc-hero-split.fcc-wd-hero .fcc-hero-split__inner {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Wayne Dalton hero content stays LEFT-aligned. Overrides the Clopay text-align
   center rules that would otherwise inherit through .fcc-single-door. */
.fcc-single-wayne-dalton .fcc-hero-split__inner,
.fcc-single-wayne-dalton .fcc-hero-split__text {
	text-align: left !important;
	align-items: start !important;
}
.fcc-single-wayne-dalton .fcc-hero-split__cta {
	justify-content: flex-start !important;
}

/* v1.10.27 — Kill the white frame around the Wayne Dalton hero image.
   The plugin default .fcc-hero-split__media renders a white rounded card
   with a border and centers the image inside it (object-fit: contain).
   When the door image doesn't perfectly fill that container, the white
   card shows through as an ugly frame on top of the cream hero background.
   v1.10.38 — Widened the selector to catch every possible Wayne Dalton hero markup
   variant. Uses body-class (`.single-wayne_dalton_door`), post-type body class,
   and attribute-selector fallbacks so ANY Wayne Dalton page reliably hits the rule
   regardless of what theme/plugin wrapper the article gets. Clopay + Invicta
   hero framing stays intact — those pages don't get `.fcc-wd-hero` nor the
   `wayne_dalton_door` post type / body class. */
[class*="fcc-wd-hero"] .fcc-hero-split__media,
.fcc-hero-split.fcc-wd-hero .fcc-hero-split__media,
.fcc-wd-hero .fcc-hero-split__media,
.fcc-single-wayne-dalton .fcc-hero-split__media {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}

/* v1.11.15 — Kill the frame around the img entirely.
   Prior rule (v1.10.27/38) added `border-radius: 12px` + a soft `box-shadow`
   directly to the <img>. On dark doors (Classica Flush matte-black etc.)
   sitting on the cream hero background, that shadow renders as a visible
   rounded-rectangle frame around the image — the "weird box" Riley kept
   flagging. Setting radius/shadow to none lets the image sit clean on the
   cream background with no visible border, exactly what Riley wants. */
[class*="fcc-wd-hero"] .fcc-hero-split__media img,
.fcc-hero-split.fcc-wd-hero .fcc-hero-split__media img,
.fcc-wd-hero .fcc-hero-split__media img,
.fcc-single-wayne-dalton .fcc-hero-split__media img {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	display: block !important;
	max-width: 100% !important;
	height: auto !important;
}

/* Defensive: strip framing from any WordPress-generated figure/wp-block-image
   wrapper the theme might insert around the hero img. */
.fcc-wd-hero figure {
	background: transparent !important;
	background-color: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* --- Fix #3: Answer capsule breathing room + interior padding. --- */
/* Roomier margins above/below and larger interior padding so the "ABOUT THIS
   AMARR DOOR" label + short-desc text isn't cramped against the red border. */
.fcc-single-wayne-dalton .fcc-hero-split + .fcc-contained {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* --- Fix #5: Tighten the Custom Wood section. ---
   The "Custom Wood — Wayne Dalton By Design" section on the By Design page renders
   ~961px tall — visually dominant. Trim the subheading margins, the swatch
   grid gaps, and the space before the closing custom-order aside. */

/* --- Fix #6: Standardize .fcc-wd-section vertical rhythm. ---
   Bring Wayne Dalton's per-section margin (was 56px) in line with the .fcc-section
   default (48px) so the page has a single, consistent rhythm through the
   Overview → Features → Construction → … → Cities stack. */
.fcc-wd-section { margin: 48px 0; }

/* ================= Wayne Dalton CTA buttons (v1.10.11 → v1.10.30) =================
   v1.10.11 originally scoped strong button styling to only .fcc-wd-custom__cta
   and .fcc-wd-mid-cta. Every new Wayne Dalton section shipped afterward (Cost Factors
   in v1.10.29, Recently Installed / Best For hero / WindPro / HOA callout in
   v1.10.28–29) got skipped because its container isn't one of those two —
   CTAs rendered as plain red text instead of proper buttons.

   v1.10.30 widens the scope: ANY .fcc-btn--red or .fcc-btn--outline-dark
   inside ANY .fcc-wd-* Wayne Dalton container gets the strong treatment. The
   [class*="fcc-wd-"] attribute selector is safe — Clopay uses .fcc-c-* and
   Invicta uses .fcc-i-*, neither of which contains the "fcc-wd-" substring,
   so nothing leaks. The bottom-CTA banner (.fcc-wd-bottom-cta) uses
   .fcc-btn--white on a red background — the --white variant is a separate
   modifier and is intentionally NOT targeted here. */

/* Primary — red fill, white text, subtle red-tinted shadow */
/* v1.10.30 — universalized: any Wayne Dalton section's primary red CTA */
.fcc-wd-section .fcc-btn--red,
.fcc-wd-hero .fcc-btn--red,
.fcc-wd-single .fcc-btn--red,
[class*="fcc-wd-"] .fcc-btn--red {
	background-color: #ed1c23 !important;
	color: #ffffff !important;
	border: 2px solid #ed1c23 !important;
	box-shadow: 0 2px 6px rgba(237, 28, 35, 0.25) !important;
	font-weight: 700 !important;
	padding: 14px 28px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.fcc-wd-section .fcc-btn--red:hover,
.fcc-wd-hero .fcc-btn--red:hover,
.fcc-wd-single .fcc-btn--red:hover,
[class*="fcc-wd-"] .fcc-btn--red:hover {
	background-color: #c81a20 !important;
	border-color: #c81a20 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(237, 28, 35, 0.35) !important;
}

/* Secondary — SOLID DARK (v1.10.35). Was outline-on-white through v1.10.34,
   but on cream Mid-CTA / Cost Factors panels the outline treatment read as
   weak text with a hairline border. Both buttons on every Wayne Dalton section now
   render as SOLID high-contrast colors: primary solid red + secondary solid
   dark. Class name kept as --outline-dark so existing renderer emissions get
   the new solid-dark treatment without touching PHP. The phone SVG inherits
   `currentColor`, so it auto-flips to white with the text. */
.fcc-wd-section .fcc-btn--outline-dark,
.fcc-wd-hero .fcc-btn--outline-dark,
.fcc-wd-single .fcc-btn--outline-dark,
[class*="fcc-wd-"] .fcc-btn--outline-dark {
	background-color: #1a1a1a !important;
	color: #ffffff !important;
	border: 2px solid #1a1a1a !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20) !important;
	font-weight: 700 !important;
	padding: 14px 26px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.fcc-wd-section .fcc-btn--outline-dark:hover,
.fcc-wd-hero .fcc-btn--outline-dark:hover,
.fcc-wd-single .fcc-btn--outline-dark:hover,
[class*="fcc-wd-"] .fcc-btn--outline-dark:hover {
	background-color: #000000 !important;
	color: #ffffff !important;
	border-color: #000000 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30) !important;
}
/* Belt-and-suspenders: force the phone SVG stroke to white in case a
   downstream sheet overrides `color` and breaks `currentColor` inheritance. */
.fcc-wd-section .fcc-btn--outline-dark svg,
.fcc-wd-hero .fcc-btn--outline-dark svg,
.fcc-wd-single .fcc-btn--outline-dark svg,
[class*="fcc-wd-"] .fcc-btn--outline-dark svg {
	stroke: #ffffff !important;
	color: #ffffff !important;
}

/* Mobile — stack CTA buttons full-width for easier thumb targets */
@media (max-width: 640px) {
	
	.fcc-wd-mid-cta .fcc-mid-cta__buttons .fcc-btn,
	[class*="fcc-wd-"] .fcc-btn {
		width: 100% !important;
		padding: 14px 20px !important;
		justify-content: center !important;
	}
}

/* =========================================================================
   v1.10.13 — Wayne Dalton cities section (single-door + hub)
   -------------------------------------------------------------------------
   Replaces the inline "wall of pins" render from prior versions. Each city
   is now a proper card: pin badge on top, bold black name below, small
   "Arizona" caption, and an absolutely-positioned red "Home base" pill on
   the Mesa card. Works both on the Wayne Dalton hub page (inside
   .fcc-doors-overview) and on single door pages (no wrapper) because the
   selectors are un-scoped and use their own class family.
   ========================================================================= */
.fcc-wd-cities {
	background: #ffffff;
}
.fcc-wd-cities .fcc-section__title {
	margin: 0 0 12px;
}
.fcc-wd-cities__intro {
	font-size: 17px;
	line-height: 1.65;
	color: #444;
	max-width: 780px;
	margin: 0 0 32px;
}
/* v1.11.3 — Unified Cities card design.
   The three brand renderers (Wayne Dalton, Clopay, Invicta) now emit the SAME
   markup for each city card: a big city name as the visual hero, a small
   "[Brand] Garage Door Installer/Dealer" subtitle, optional neighborhood
   chips, and a short hook paragraph. Card layout lives on .fcc-city-card
   (shared); .fcc-wd-cities / .fcc-c-cities / .fcc-i-cities still exist as
   section wrappers for per-brand backgrounds and grid tweaks.

   Wayne Dalton + Clopay pages load this CSS via frontend.css. Invicta pages
   duplicate this block inline (scoped under #fcc-invicta-single with
   !important) in class-fcc-invicta-frontend.php so they win over any
   theme/Elementor default styles. */
.fcc-wd-cities__grid,
.fcc-c-cities__grid,
.fcc-i-cities__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.fcc-city-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 20px 20px;
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.08);
	border-top: 3px solid #ed1c23;
	border-radius: 10px;
	color: #111;
	text-decoration: none !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.fcc-city-card.is-accent-red { border-top-color: #ed1c23; }
.fcc-city-card.is-accent-dark { border-top-color: #1a1a1a; }
.fcc-city-card:hover,
.fcc-city-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0,0,0,0.10);
	background: #ffffff;
	color: #111;
	outline: none;
}
.fcc-city-card.is-home {
	background: #fff8f8;
	border-color: rgba(237,28,35,0.35);
	border-top-color: #ed1c23 !important;
	box-shadow: 0 2px 10px rgba(237,28,35,0.10);
}
.fcc-city-card__header {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.fcc-city-card__pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(237,28,35,0.12);
	color: #ed1c23;
	flex: 0 0 auto;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.fcc-city-card:hover .fcc-city-card__pin,
.fcc-city-card:focus-visible .fcc-city-card__pin {
	background: #ed1c23;
	color: #ffffff;
	transform: scale(1.05);
}
.fcc-city-card__name {
	font-size: 1.75rem;
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #1a1a1a;
	flex: 1 1 auto;
	min-width: 0;
	word-break: break-word;
}
.fcc-city-card__badge {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.75px;
	text-transform: uppercase;
	color: #ffffff;
	background: #ed1c23;
	padding: 4px 9px;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(237,28,35,0.25);
	flex: 0 0 auto;
}
.fcc-city-card__subtitle {
	font-size: 0.88rem;
	font-weight: 600;
	color: #6a6a6a;
	line-height: 1.35;
	margin: -4px 0 0 36px;
	letter-spacing: 0.1px;
}
.fcc-city-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 0 0;
}
.fcc-city-card__chip {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	color: #333;
	background: #f5f5f5;
	border: 1px solid rgba(0,0,0,0.10);
	padding: 3px 9px;
	border-radius: 999px;
	line-height: 1.4;
	white-space: nowrap;
}
.fcc-city-card__hook {
	margin: 4px 0 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: #444;
}
/* Legacy inner-class fallback — older v1.11.2 markup shouldn't ship,
   but if a cached page renders it, keep basic readability. */
@media (max-width: 640px) {
	.fcc-wd-cities__grid,
	.fcc-c-cities__grid,
	.fcc-i-cities__grid { grid-template-columns: 1fr; }
	.fcc-city-card { padding: 18px 16px 16px; }
	.fcc-city-card__name { font-size: 1.55rem; }
	.fcc-city-card__subtitle { font-size: 0.85rem; margin-left: 34px; }
	.fcc-city-card__hook { font-size: 0.9rem; }
}

/* =================================================================
 * Wayne Dalton — Install Section (v1.10.36)
 * -----------------------------------------------------------------
 * Sits between Warranty and Cost Factors. Cream section background,
 * red accent, numbered step circles, and a comma-list coverage line
 * linking every service-area city.
 * ================================================================= */
.fcc-wd-install-section {
	background: transparent;
}
.fcc-wd-install-section .fcc-section__title {
	text-align: center;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 28px;
}
.fcc-wd-install-section__block {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 24px 26px;
	margin: 0 0 22px;
}
.fcc-wd-install-section__block:last-of-type { margin-bottom: 22px; }
.fcc-wd-install-section__h3 {
	font-size: 1.18rem;
	font-weight: 800;
	color: #111;
	margin: 0 0 12px;
	padding: 0 0 10px;
	border-bottom: 2px solid #ed1c23;
	display: inline-block;
	line-height: 1.3;
}
.fcc-wd-install-section__block p {
	margin: 0 0 12px;
	color: #333;
	font-size: 1rem;
	line-height: 1.7;
}
.fcc-wd-install-section__block p:last-of-type { margin-bottom: 0; }
.fcc-wd-install-section__steps {
	list-style: none;
	counter-reset: fcc-wd-install-step;
	padding: 0;
	margin: 8px 0 0;
}
.fcc-wd-install-section__step {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 14px 0;
	border-top: 1px solid #e0e0e0;
}
.fcc-wd-install-section__step:first-of-type { border-top: none; padding-top: 4px; }
.fcc-wd-install-section__num {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #ed1c23;
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1;
}
.fcc-wd-install-section__step-body { flex: 1 1 auto; }
.fcc-wd-install-section__step-title {
	font-size: 1.04rem;
	font-weight: 800;
	color: #111;
	margin: 4px 0 6px;
	line-height: 1.3;
}
.fcc-wd-install-section__step-body p {
	margin: 0;
	color: #444;
	font-size: .97rem;
	line-height: 1.6;
}
.fcc-wd-install-section__coverage {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 18px 22px;
	margin: 0 0 24px;
	font-size: .98rem;
	line-height: 1.75;
	color: #333;
}
.fcc-wd-install-section__coverage a {
	color: #ed1c23;
	text-decoration: none;
	font-weight: 700;
}
.fcc-wd-install-section__coverage a:hover { text-decoration: underline; }
.fcc-wd-install-section__cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 4px;
}
@media (max-width: 640px) {
	.fcc-wd-install-section__block { padding: 20px 20px; }
	.fcc-wd-install-section__step { gap: 14px; padding: 12px 0; }
	.fcc-wd-install-section__num { width: 34px; height: 34px; font-size: .98rem; }
	.fcc-wd-install-section__coverage { padding: 16px 18px; font-size: .96rem; }
}

/* =================================================================
 * Wayne Dalton — Cost Factors section (v1.10.29 — Phase 2 SEO)
 * ================================================================= */
/* v1.10.30 — center the Cost Factors intro paragraph (was left-aligned) */
.fcc-wd-cost-factors > p,
.fcc-wd-cost-factors__lead,
.fcc-wd-cost-factors .fcc-section__lead {
	text-align: center !important;
	max-width: 720px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 32px !important;
}
.fcc-wd-cost-factors__lead {
	color: #333;
	font-size: 1.02rem;
	line-height: 1.7;
}
.fcc-wd-cost-factors__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 32px;
}
.fcc-wd-cost-factors__card {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 22px 22px 20px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.fcc-wd-cost-factors__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.fcc-wd-cost-factors__eyebrow {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #ed1c23;
	margin: 0 0 8px;
}
.fcc-wd-cost-factors__title {
	font-size: 1.08rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 8px;
	line-height: 1.3;
}
.fcc-wd-cost-factors__body {
	margin: 0;
	font-size: .96rem;
	line-height: 1.6;
	color: #444;
}
.fcc-wd-cost-factors__cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 4px;
}
@media (max-width: 900px) {
	.fcc-wd-cost-factors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.fcc-wd-cost-factors__grid { grid-template-columns: 1fr; }
}

/* =================================================================
 * Wayne Dalton — Storm / WindPro section (v1.10.29 — Phase 2 SEO)
 * ================================================================= */
.fcc-wd-windpro__card {
	background: #f5f5f5;
	border-left: 4px solid #ed1c23;
	border-radius: 8px;
	padding: 24px 28px;
}
.fcc-wd-windpro__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.fcc-wd-windpro__icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	color: #ed1c23;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.fcc-wd-windpro__card p {
	margin: 0 0 14px;
	color: #333;
	font-size: 1rem;
	line-height: 1.65;
}
.fcc-wd-windpro__card p:last-of-type { margin-bottom: 0; }
.fcc-wd-windpro__callout {
	margin-top: 16px;
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 16px 18px;
	font-size: .96rem;
	line-height: 1.6;
	color: #333;
}
@media (max-width: 560px) {
	.fcc-wd-windpro__card { padding: 20px 20px; }
	.fcc-wd-windpro__callout { padding: 14px 16px; }
}

/* =================================================================
 * Wayne Dalton — TruChoice Color System callout (v1.15.25)
 * Renders inside .fcc-wd-colors ONLY on TruChoice-eligible collections:
 *   Classic Steel 8300/8500, Classic Steel 9100/9605, Carriage House 9405
 * Positioned BELOW the swatch grid as a "if none of these match, custom-match"
 * lead-in to TruChoice. Light grey card, red left accent bar, hotlinked logo.
 * ================================================================= */
.fcc-wd-truchoice {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 28px;
	align-items: center;
	margin-top: 32px;
	padding: 24px 28px;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-left: 4px solid #ed1c23;
	border-radius: 8px;
}
.fcc-wd-truchoice__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 14px 16px;
	min-height: 100px;
}
.fcc-wd-truchoice__logo img {
	display: block;
	width: 100%;
	max-width: 150px;
	height: auto;
}
.fcc-wd-truchoice__body {
	color: #333;
}
.fcc-wd-truchoice__title {
	margin: 0 0 10px;
	font-size: 1.15rem;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.35;
}
.fcc-wd-truchoice__body p {
	margin: 0 0 10px;
	line-height: 1.65;
	font-size: 1rem;
	color: #333;
}
.fcc-wd-truchoice__body p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
	.fcc-wd-truchoice {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 20px 20px;
	}
	.fcc-wd-truchoice__logo {
		max-width: 220px;
		margin: 0 auto;
	}
	.fcc-wd-truchoice__title { font-size: 1.05rem; }
}

/* =================================================================
 * Wayne Dalton — HOA callout (v1.10.29 — Phase 2 SEO)
 * ================================================================= */
.fcc-wd-hoa-callout__box {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 18px 22px;
}
.fcc-wd-hoa-callout__icon {
	flex: 0 0 auto;
	color: #ed1c23;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.fcc-wd-hoa-callout__body {
	margin: 0;
	color: #333;
	line-height: 1.65;
	font-size: 1rem;
}
@media (max-width: 560px) {
	.fcc-wd-hoa-callout__box { padding: 16px 18px; gap: 12px; }
}

/* ================= Wayne Dalton feature icons (v1.10.33) ================= */
.fcc-wd-features .fcc-wd-features__card {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 4px !important;
}
.fcc-wd-features__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 999px !important;
	background: #f5f5f5 !important; /* cream circle background */
	box-shadow: inset 0 0 0 2px rgba(237, 28, 35, 0.15) !important; /* subtle red ring */
	margin: 0 0 10px !important;
}
.fcc-wd-features__icon svg {
	width: 30px !important;
	height: 30px !important;
	stroke: #ed1c23 !important;
	fill: none !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	display: block !important;
}
/* Filled icons (leaf, shield, etc.) can opt into red fill via .is-filled */
.fcc-wd-features__icon svg.is-filled {
	fill: #ed1c23 !important;
	stroke: none !important;
}
@media (max-width: 640px) {
	.fcc-wd-features__icon {
		width: 48px !important;
		height: 48px !important;
	}
	.fcc-wd-features__icon svg {
		width: 24px !important;
		height: 24px !important;
	}
}

/* =========================================================================
   v1.11.0 Phase A — Clopay Best For, Cost Factors, HOA, Install, Cities.
   Uses the .fcc-c-* class namespace so nothing collides with Wayne Dalton (.fcc-wd-*)
   or Invicta (.fcc-i-*). Style parity with the Wayne Dalton Phase 2 sections so
   Riley's site reads as one design system across all three brands.
   ========================================================================= */

/* Universal Clopay CTA button styling — matches the Wayne Dalton v1.10.35 pattern.
   Any .fcc-btn--red or .fcc-btn--outline-dark inside any .fcc-c-* Clopay
   container gets the solid high-contrast treatment (primary solid red +
   secondary solid dark). The attribute selector is safe: Wayne Dalton uses .fcc-wd-*
   and Invicta uses .fcc-i-*, neither of which contains "fcc-c-". */
.fcc-c-section .fcc-btn--red,
[class*="fcc-c-"] .fcc-btn--red {
	background-color: #ed1c23 !important;
	color: #ffffff !important;
	border: 2px solid #ed1c23 !important;
	box-shadow: 0 2px 6px rgba(237, 28, 35, 0.25) !important;
	font-weight: 700 !important;
	padding: 14px 28px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.fcc-c-section .fcc-btn--red:hover,
[class*="fcc-c-"] .fcc-btn--red:hover {
	background-color: #c81a20 !important;
	border-color: #c81a20 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(237, 28, 35, 0.35) !important;
}
.fcc-c-section .fcc-btn--outline-dark,
[class*="fcc-c-"] .fcc-btn--outline-dark {
	background-color: #1a1a1a !important;
	color: #ffffff !important;
	border: 2px solid #1a1a1a !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20) !important;
	font-weight: 700 !important;
	padding: 14px 26px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.fcc-c-section .fcc-btn--outline-dark:hover,
[class*="fcc-c-"] .fcc-btn--outline-dark:hover {
	background-color: #000000 !important;
	color: #ffffff !important;
	border-color: #000000 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30) !important;
}
.fcc-c-section .fcc-btn--outline-dark svg,
[class*="fcc-c-"] .fcc-btn--outline-dark svg {
	stroke: #ffffff !important;
	color: #ffffff !important;
}
@media (max-width: 640px) {
	[class*="fcc-c-"] .fcc-btn {
		width: 100% !important;
		padding: 14px 20px !important;
		justify-content: center !important;
	}
}
.fcc-c-section { margin: 48px 0; }

/* =========================================================================
   v1.11.2 Phase C — Universal Invicta CTA button styling
   -------------------------------------------------------------------------
   Mirrors the Wayne Dalton [class*="fcc-wd-"] and Clopay [class*="fcc-c-"] universal
   rules so any .fcc-btn--red or .fcc-btn--outline-dark inside any .fcc-i-*
   Invicta container renders as solid red primary + solid dark secondary,
   regardless of which section it lives in. Previously the Invicta solid
   rule (in class-fcc-invicta-frontend.php inline CSS) was scoped to only
   .fcc-i-cost-factors and .fcc-i-install-section — any new Invicta section
   would render buttons with the up-page white-on-transparent .fcc-btn rule.
   [class*="fcc-i-"] is safe: Wayne Dalton (.fcc-wd-*) and Clopay (.fcc-c-*) don't
   contain the "fcc-i-" substring. The --white variant on the closing red
   CTA banner uses .fcc-btn--white which is intentionally NOT targeted here.
   ========================================================================= */
[class*="fcc-i-"] .fcc-btn--red {
	background-color: #ed1c23 !important;
	color: #ffffff !important;
	border: 2px solid #ed1c23 !important;
	box-shadow: 0 2px 6px rgba(237, 28, 35, 0.25) !important;
	font-weight: 700 !important;
	padding: 14px 28px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
[class*="fcc-i-"] .fcc-btn--red:hover {
	background-color: #c81a20 !important;
	border-color: #c81a20 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(237, 28, 35, 0.35) !important;
}
[class*="fcc-i-"] .fcc-btn--outline-dark {
	background-color: #1a1a1a !important;
	color: #ffffff !important;
	border: 2px solid #1a1a1a !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20) !important;
	font-weight: 700 !important;
	padding: 14px 26px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
[class*="fcc-i-"] .fcc-btn--outline-dark:hover {
	background-color: #000000 !important;
	color: #ffffff !important;
	border-color: #000000 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30) !important;
}
[class*="fcc-i-"] .fcc-btn--outline-dark svg {
	stroke: #ffffff !important;
	color: #ffffff !important;
}
@media (max-width: 640px) {
	[class*="fcc-i-"] .fcc-btn {
		width: 100% !important;
		padding: 14px 20px !important;
		justify-content: center !important;
	}
}

/* ---------- Best For hero callout ---------- */
.fcc-c-best-for-wrap {
	margin: 8px auto 24px;
}
.fcc-c-best-for {
	background: #f5f5f5;
	border-left: 4px solid #ed1c23;
	border-radius: 8px;
	padding: 14px 18px;
	font-size: 1rem;
	line-height: 1.55;
	color: #222;
}
.fcc-c-best-for__label {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .78rem;
	color: #ed1c23;
	margin-right: 8px;
	display: inline-block;
}
.fcc-c-best-for__body { color: #222; }

/* ---------- Cost Factors ---------- */
.fcc-c-cost-factors > p,
.fcc-c-cost-factors__lead,
.fcc-c-cost-factors .fcc-section__lead {
	text-align: center !important;
	max-width: 720px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 32px !important;
}
.fcc-c-cost-factors__lead {
	color: #333;
	font-size: 1.02rem;
	line-height: 1.7;
}
.fcc-c-cost-factors__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 32px;
}
.fcc-c-cost-factors__card {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 22px 22px 20px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.fcc-c-cost-factors__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.fcc-c-cost-factors__eyebrow {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #ed1c23;
	margin: 0 0 8px;
}
.fcc-c-cost-factors__title {
	font-size: 1.08rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 8px;
	line-height: 1.3;
}
.fcc-c-cost-factors__body {
	margin: 0;
	font-size: .96rem;
	line-height: 1.6;
	color: #444;
}
.fcc-c-cost-factors__cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 4px;
}
@media (max-width: 900px) {
	.fcc-c-cost-factors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.fcc-c-cost-factors__grid { grid-template-columns: 1fr; }
}

/* ---------- HOA callout ---------- */
.fcc-c-hoa-callout__box {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 18px 22px;
}
.fcc-c-hoa-callout__icon {
	flex: 0 0 auto;
	color: #ed1c23;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.fcc-c-hoa-callout__body {
	flex: 1 1 auto;
	color: #333;
	line-height: 1.65;
	font-size: 1rem;
}
.fcc-c-hoa-callout__body p { margin: 0 0 10px; }
.fcc-c-hoa-callout__body p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
	.fcc-c-hoa-callout__box { padding: 16px 18px; gap: 12px; }
}

/* ---------- Install Section ---------- */
.fcc-c-install-section .fcc-section__title {
	text-align: center;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 28px;
}
.fcc-c-install-section__block {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 24px 26px;
	margin: 0 0 22px;
}
.fcc-c-install-section__block:last-of-type { margin-bottom: 22px; }
.fcc-c-install-section__h3 {
	font-size: 1.18rem;
	font-weight: 800;
	color: #111;
	margin: 0 0 12px;
	padding: 0 0 10px;
	border-bottom: 2px solid #ed1c23;
	display: inline-block;
	line-height: 1.3;
}
.fcc-c-install-section__block p {
	margin: 0 0 12px;
	color: #333;
	font-size: 1rem;
	line-height: 1.7;
}
.fcc-c-install-section__block p:last-of-type { margin-bottom: 0; }
.fcc-c-install-section__steps {
	list-style: none;
	padding: 0;
	margin: 8px 0 0;
}
.fcc-c-install-section__step {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 14px 0;
	border-top: 1px solid #e0e0e0;
}
.fcc-c-install-section__step:first-of-type { border-top: none; padding-top: 4px; }
.fcc-c-install-section__num {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #ed1c23;
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1;
}
.fcc-c-install-section__step-body { flex: 1 1 auto; }
.fcc-c-install-section__step-title {
	font-size: 1.04rem;
	font-weight: 800;
	color: #111;
	margin: 4px 0 6px;
	line-height: 1.3;
}
.fcc-c-install-section__step-body p {
	margin: 0;
	color: #444;
	font-size: .97rem;
	line-height: 1.6;
}
.fcc-c-install-section__coverage {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 18px 22px;
	margin: 0 0 24px;
	font-size: .98rem;
	line-height: 1.75;
	color: #333;
}
.fcc-c-install-section__coverage a {
	color: #ed1c23;
	text-decoration: none;
	font-weight: 700;
}
.fcc-c-install-section__coverage a:hover { text-decoration: underline; }
.fcc-c-install-section__cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 4px;
}
@media (max-width: 640px) {
	.fcc-c-install-section__block { padding: 20px 20px; }
	.fcc-c-install-section__step { gap: 14px; padding: 12px 0; }
	.fcc-c-install-section__num { width: 34px; height: 34px; font-size: .98rem; }
	.fcc-c-install-section__coverage { padding: 16px 18px; font-size: .96rem; }
}

/* ---------- Clopay Cities Section wrapper (card CSS is shared — see
   .fcc-city-card block above, v1.11.3). This block just controls the
   section background and intro paragraph — card layout is unified. ---- */
.fcc-c-cities { background: #ffffff; }
.fcc-c-cities .fcc-section__title { margin: 0 0 12px; }
.fcc-c-cities__intro {
	font-size: 1rem;
	line-height: 1.65;
	color: #444;
	max-width: 820px;
	margin: 0 0 24px;
}

/* =========================================================================
   v1.11.8 / v1.11.9 — Clopay single-door breadcrumb spacing fix
   -------------------------------------------------------------------------
   v1.11.6 moved Clopay breadcrumbs out of the hero text column into a
   .fcc-c-single-top strip above the hero — but the shared spacing rules
   stacked ~200px of empty page-bg around it:
     • .fcc-single-door > article > .fcc-contained:first-of-type
       adds margin-top: 100px ABOVE the strip
     • .fcc-hero-split adds another margin-top: 100px BELOW the strip
       (before the hero starts)
   The strip then floated in a visible gap with the page background
   showing through above AND below it, breaking the visual flow into
   the hero. Wayne Dalton solved this same problem in v1.10.6 with scoped
   .fcc-single-wayne-dalton overrides (see lines ~4009-4038). Mirror that
   approach here, scoped strictly to body.single-farnsworth_door so
   nothing leaks into Wayne Dalton or Invicta pages.

   Structure change in templates/single-farnsworth_door.php (v1.11.8):
   the breadcrumb strip is now wrapped in <section class="fcc-c-crumbs-strip
   fcc-full-bleed"> so the cream background can span the entire viewport
   width, not just the .fcc-contained max-width. That wrapper section is
   what carries the visible cream color; the inner .fcc-contained still
   handles horizontal centering.

   v1.11.9 fix: v1.11.8 dropped the strip's top padding to 20px, which
   pushed the crumb text underneath the sticky site header (~80px tall)
   and hid it. Restore proper header clearance using the CLAUDE.md
   standard: padding-top: 100px desktop / 120px mobile — same values the
   blog posts use on .fgd-page to clear the header. Bottom padding stays
   tight (10px) so the strip and hero still butt flush on the shared
   cream background (v1.11.8's key win — no visual gap between them).

   Result: breadcrumb strip is visible below the sticky header AND
   remains visually flush with the hero on a continuous cream surface.
   ========================================================================= */

/* Full-bleed cream strip that carries the breadcrumbs. Matches the
   hero's --fcc-bg-soft (#f8f8f8) so the strip + hero visually blend
   into one continuous cream surface. Big top padding clears the sticky
   site header (v1.11.9 fix — CLAUDE.md standard 100px desktop / 120px
   mobile). Small bottom padding so it butts flush against the hero. */

/* Kill the shared .fcc-single-door > article > section:first-of-type
   { margin-top: 100px } that would otherwise stack 100px of empty
   page-bg ABOVE the new full-bleed strip. */

/* Kill the .fcc-hero-split { margin-top: 100px } that stacked a
   second empty gap between the crumbs strip and the hero. Together
   with the strip's own zeroed margin-top, the strip and hero now
   touch — no visible page-bg break. */

/* Trim the hero's own top padding a little now that the crumbs strip
   is sitting directly above it providing top visual space. Preserves
   the hero's bottom padding (48px) so the hero still breathes into
   the installer tagline below. */

/* ================================================================
   v1.11.11 — Aluminum full-view (Vista + Horizon) styling
   ---------------------------------------------------------------- */

/* Explanatory notes tucked between finish sub-groups inside the
   Panel Styles & Finish Options section. `--note` is the descriptive
   paragraph under the Anodize / Powder Coat subheads; `--subnote` is
   the smaller in-stock / special-order divider line. Reuses cream +
   red palette from the rest of the Wayne Dalton renderer. */

/* Full Specifications section (from the aluminum spec-sheet PDFs).
   Card grid up top for individual key facts, then the panel-configurations
   list and the warranty summary. Cream background matches the rest of
   the Wayne Dalton palette; no black backgrounds anywhere. */

/* ================================================================
   v1.11.12 — Lazy-load placeholder frame fix (Wayne Dalton hero)
   ----------------------------------------------------------------
   LiteSpeed Cache (and A3 Lazy Load / WP Rocket) intercepts the
   hero <img>, swaps src with a data:image/svg+xml placeholder that
   contains a rect filled #cfd4db at 10% opacity. Because the img
   still has our v1.10.27 border-radius:12px + box-shadow, that
   grey wash renders as a visible rounded rectangle frame that
   reads exactly like the OLD container we killed.

   Primary fix: render-time attributes on the img in
   FCC_Wayne Dalton_Renderer::hero() (loading=eager, fetchpriority=high,
   class=no-lazy, data-no-lazy=1) opt the hero out of every
   common lazy loader. This CSS is a defensive fallback in case
   the plugin's HTML is rewritten server-side by an ESI/optimizer
   pipeline before our attributes take effect.

   While the img still holds a data:image/svg placeholder src, we
   drop its box-shadow + border-radius + visibility so no framing
   is visible. The moment the lazy loader swaps src to the real
   URL, the [src^="data:"] selector stops matching and the img
   re-inherits v1.10.27's rounded corners + soft shadow. */

/* =========================================================================
   v1.12.0 CLOPAY CONTENT REVAMP — 7 new Farnsworth-voice sections
   Class prefix .fcc-c-* keeps the styles scoped so they can't collide with
   the Wayne Dalton (.fcc-wd-*) or Invicta (.fcc-i-*) rules elsewhere in this file.
   Design notes:


/* v1.15.0: Wayne Dalton hub filter pills — same design as Amarr hub. */
#fcc-wayne-dalton-hub .fcc-overview__filters {
	background: #f7f7f7 !important;
	border: 1px solid #e6e6e6 !important;
	border-radius: 8px !important;
	padding: 20px 22px !important;
}
#fcc-wayne-dalton-hub .fcc-overview__filters .fcc-filter-group {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	align-items: center !important;
}
#fcc-wayne-dalton-hub .fcc-overview__filters .fcc-filter-label {
	font-weight: 700 !important;
	color: #1a1a1a !important;
	font-size: 0.85rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	margin-right: 6px !important;
}
#fcc-wayne-dalton-hub .fcc-overview__filters .fcc-filter-btn,
#fcc-wayne-dalton-hub .fcc-overview__filters .fcc-filter-btn:link,
#fcc-wayne-dalton-hub .fcc-overview__filters .fcc-filter-btn:visited {
	display: inline-block !important;
	background: #fff !important;
	color: #1a1a1a !important;
	border: 1px solid #e6e6e6 !important;
	border-radius: 999px !important;
	padding: 6px 16px !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	font-family: inherit !important;
	text-decoration: none !important;
	transition: border-color .15s ease, background .15s ease, color .15s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
}
#fcc-wayne-dalton-hub .fcc-overview__filters .fcc-filter-btn:hover {
	border-color: #ed1c23 !important;
	color: #ed1c23 !important;
	background: #fff !important;
}
#fcc-wayne-dalton-hub .fcc-overview__filters .fcc-filter-btn.is-active,
#fcc-wayne-dalton-hub .fcc-overview__filters .fcc-filter-btn.is-active:hover {
	background: #ed1c23 !important;
	border-color: #ed1c23 !important;
	color: #fff !important;
}


/* ============================================================================
   v1.16.0 — SAFE-WAY SCOPED CSS
   Cloned from the Wayne Dalton block above and re-prefixed for the Safe-Way
   renderer's fcc-sw-* / fcc-safeway-* class output. Appended as its own block
   so Safe-Way can diverge cleanly without touching any other brand's rules.
   ============================================================================ */
/* ============================================================================
   v1.15.0 — SAFE-WAY SCOPED CSS
   Mirror of the Amarr (fcc-a-*, fcc-amarr-*) rules above but re-prefixed for
   the Safe-Way renderer's fcc-sw-* / fcc-safeway-* class output.
   Kept as an appended block instead of comma-joined selectors so each brand
   can diverge cleanly in later releases without editing a shared rule.
   ============================================================================ */
.fcc-sw-single-top { padding-top: 20px; }
/* v1.11.6: Clopay singles reuse the above-hero breadcrumb strip pattern from
   Safe-Way so the two brands sit visually identical. See templates/single-
   farnsworth_door.php for the emission point (breadcrumbs used to render
   inside the .fcc-hero-split__text column). */
/* v1.11.8: The strip's outer .fcc-c-crumbs-strip wrapper now owns vertical
   padding (see the v1.11.8 block near the end of this file). This inner
   .fcc-contained just handles horizontal centering + max-width, so no
   vertical padding here. */
.fcc-c-single-top { padding-top: 0; }
.fcc-c-single-top .fcc-clopay-breadcrumbs { margin: 0 !important; }
.fcc-sw-hero__panel {
	display: inline-block;
	background: #f5f5f5;
	color: #333;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	margin: 4px 0 12px;
}

/* --- Hero: Best-for eyebrow line (v1.10.28 Phase 1 SEO) --- */
.fcc-sw-hero__best-for {
	margin: 6px 0 12px;
	padding: 10px 14px;
	background: #f5f5f5;
	border-left: 3px solid #ed1c23;
	border-radius: 4px;
	color: #333;
	font-size: 0.95rem;
	line-height: 1.45;
}
.fcc-sw-hero__best-for-label {
	display: inline-block;
	margin-right: 4px;
	color: #b31217;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* --- Recently Installed strip (v1.10.28 Phase 1 SEO) --- */
.fcc-sw-recent-installs { margin: 40px 0; }
.fcc-sw-recent-installs__box {
	background: #f5f5f5;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	padding: 16px 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 14px;
}
.fcc-sw-recent-installs__label {
	font-weight: 800;
	color: #222;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}
.fcc-sw-recent-installs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
}
.fcc-sw-recent-installs__item {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: 0.95rem;
	color: #333;
	line-height: 1.4;
}
.fcc-sw-recent-installs__pin {
	display: inline-flex;
	align-items: center;
	color: #ed1c23;
	line-height: 0;
	position: relative;
	top: 2px;
}
.fcc-sw-recent-installs__city {
	font-weight: 700;
	color: #222;
}
.fcc-sw-recent-installs__when {
	color: #666;
	font-size: 0.9rem;
}
.fcc-sw-recent-installs__sep {
	color: #b31217;
	font-weight: 700;
	margin-left: 4px;
}
@media (max-width: 640px) {
	.fcc-sw-recent-installs__box {
		flex-direction: column;
		align-items: stretch;
	}
	.fcc-sw-recent-installs__list {
		flex-direction: column;
		gap: 6px;
	}
	.fcc-sw-recent-installs__sep { display: none; }
}

/* --- Generic Safe-Way section --- */
.fcc-sw-section { margin: 56px 0; }
.fcc-sw-section .fcc-section__title {
	margin-bottom: 12px;
}

/* --- Features grid --- */
.fcc-sw-features__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 24px;
}
.fcc-sw-features__card {
	background: #f5f5f5;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	padding: 22px 22px 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.fcc-sw-features__title {
	font-size: 1.05rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 8px;
}
.fcc-sw-features__desc {
	color: #444;
	font-size: 0.98rem;
	line-height: 1.55;
	margin: 0;
}

/* --- Construction --- */
.fcc-sw-construction__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 32px;
	margin-top: 20px;
}
@media (max-width: 900px) {
	.fcc-sw-construction__grid { grid-template-columns: 1fr; }
}
.fcc-sw-construction__list {
	margin: 0 0 20px;
	padding-left: 20px;
	line-height: 1.65;
	color: #333;
}
.fcc-sw-construction__list li { margin: 0 0 10px; }
.fcc-sw-construction__meta {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
	padding: 16px 20px;
}
.fcc-sw-construction__meta-row {
	display: flex;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 0.95rem;
}
.fcc-sw-construction__meta-row:last-child { border-bottom: 0; }
.fcc-sw-construction__meta-label {
	font-weight: 700;
	color: #1a1a1a;
	min-width: 170px;
}
.fcc-sw-construction__meta-value { color: #444; }
.fcc-sw-construction__callout {
	background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
	border: 1px solid #ed1c23;
	border-radius: 12px;
	padding: 26px 24px;
	box-shadow: 0 6px 20px rgba(237,28,35,0.08);
}
.fcc-sw-construction__callout-eyebrow {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ed1c23;
	margin: 0 0 6px;
}
.fcc-sw-construction__callout-value {
	font-size: 2.4rem;
	font-weight: 900;
	color: #1a1a1a;
	line-height: 1.1;
	margin: 0 0 4px;
}
.fcc-sw-construction__callout-to {
	font-size: 1rem;
	font-weight: 500;
	color: #888;
	margin: 0 4px;
}
.fcc-sw-construction__callout-note {
	color: #555;
	font-size: 0.92rem;
	margin: 6px 0 12px;
}
.fcc-sw-construction__callout-context {
	color: #444;
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 0;
}
/* v1.16.4: brochure-extracted construction diagrams (cutaways, paint-layer
   stacks, RITS/I-beam details). Captioned figure cards on the light grey
   palette, click-to-zoom via the shared fcc-lightbox. */
.fcc-sw-construction__figures {
	display: grid;
	/* v1.24.0: explicit column count (set inline by the renderer as the number
	   of UNKEYED figures, capped at 3). It used to be
	   `repeat(auto-fit, minmax(280px, 1fr))`, but auto-fit only collapses
	   EMPTY tracks — and a keyed figure spanning `1 / -1` fills every track,
	   so nothing collapsed and two figures ended up squeezed into the first
	   two of four tracks. */
	grid-template-columns: repeat(var(--fcc-sw-figcols, 2), minmax(0, 1fr));
	gap: 24px;
	margin-top: 34px;
}
/* Step down explicitly rather than falling back to auto-fit, which carries the
   same collapse bug at narrower widths. */
@media (max-width: 1000px) {
	.fcc-sw-construction__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fcc-sw-construction__figures--single {
	grid-template-columns: minmax(280px, 640px);
	justify-content: center;
}
.fcc-sw-construction__figure {
	margin: 0;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.fcc-sw-construction__figure-zoom {
	display: block;
	width: 100%;
	/* v1.24.0: tighter padding — these are white-background line drawings, so
	   the frame was just eating width the diagram could be using. */
	padding: 10px;
	margin: 0;
	background: #ffffff;
	border: 0;
	cursor: zoom-in;
	line-height: 0;
}
.fcc-sw-construction__figure-zoom img {
	width: 100%;
	height: auto;
	/* v1.24.0 (Riley): was 340px, which shrank the cutaways well below the
	   width their card had available. The diagrams are now re-extracted from
	   the brochure at 1600px wide, so they stay sharp at this size. */
	max-height: 520px;
	object-fit: contain;
	display: block;
}
.fcc-sw-construction__figure-caption {
	padding: 12px 16px 14px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: #555;
	border-top: 3px solid #ed1c23;
	background: #fff;
}
@media (max-width: 640px) {
	.fcc-sw-construction__figures { grid-template-columns: 1fr; }
}

/* --- Design grid + Single/Double toggle ---
   v1.10.16: rebuilt as a clean brand-red pill toggle. Previous rules
   rendered the active button as a black pill (unreadable dark-on-dark
   text) and the inactive button picked up a pink browser focus outline.
   Every selector is scoped under .fcc-sw-designs__toggle so Clopay and
   Invicta toggles are untouched. !important is used because Elementor +
   theme button rules were bleeding into the buttons on the live page. */
.fcc-sw-designs__toggle {
	display: inline-flex !important;
	gap: 0 !important;
	background: #eeeeee !important;
	border-radius: 999px !important;
	padding: 4px !important;
	margin: 16px 0 24px !important;
	border: 1px solid #dcdcdc;
}
.fcc-sw-designs__toggle-btn {
	background: transparent !important;
	color: #1a1a1a !important;
	border: none !important;
	outline: none !important;
	padding: 10px 22px !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	transition: background-color .18s ease, color .18s ease !important;
	box-shadow: none !important;
}
.fcc-sw-designs__toggle-btn:hover:not(.is-active):not([aria-selected="true"]):not([aria-pressed="true"]) {
	background: rgba(0, 0, 0, 0.04) !important;
	color: #1a1a1a !important;
}
.fcc-sw-designs__toggle-btn.is-active,
.fcc-sw-designs__toggle-btn[aria-selected="true"],
.fcc-sw-designs__toggle-btn[aria-pressed="true"] {
	background: #ed1c23 !important;
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(237, 28, 35, 0.25) !important;
}
.fcc-sw-designs__toggle-btn:focus-visible {
	outline: 3px solid rgba(237, 28, 35, 0.35) !important;
	outline-offset: 2px !important;
}
.fcc-sw-designs__toggle-btn:focus:not(:focus-visible) {
	outline: none !important;
}
.fcc-sw-designs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}
.fcc-sw-designs__card {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0,0,0,0.03);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fcc-sw-designs__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.fcc-sw-designs__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #ffffff;
}
.fcc-sw-designs__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12px;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.fcc-sw-designs__img.is-active { opacity: 1; }
.fcc-sw-designs__meta {
	padding: 14px 16px 16px;
	text-align: center;
}
.fcc-sw-designs__code {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #ed1c23;
	margin: 0 0 4px;
}
.fcc-sw-designs__name {
	font-size: 1rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
	line-height: 1.3;
}

/* --- Textured (Foundry Reserve) + Panel style + Plank grids reuse this --- */
.fcc-sw-textured__subhead {
	font-size: 1.15rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 32px 0 16px;
}

/* --- v1.16.6: category-grouped option grids (render_categorized_swatch_grid)
   Used first by the Wood Looks Panel Styles section, where the six panel
   designs split into a "Bi-Directional" group and a "Plank" group. Each group
   gets a subheading, an optional small muted tagline pulled from Safe-Way's
   own brochure section labels, and an optional italic footnote under the grid.
   Light grey palette + red accent rule per the site standard. */
.fcc-sw-optcat__head {
	margin: 34px 0 6px;
	padding-left: 12px;
	border-left: 4px solid #ed1c23;
	line-height: 1.25;
}
.fcc-sw-optcat__head:first-child { margin-top: 4px; }
.fcc-sw-optcat__tagline {
	margin: 0 0 16px;
	padding-left: 16px;
	font-size: 0.92rem;
	line-height: 1.5;
	color: #666;
}
.fcc-sw-optcat__footnote {
	margin: 12px 0 0;
	font-size: 0.88rem;
	font-style: italic;
	line-height: 1.5;
	color: #666;
}
@media (max-width: 640px) {
	.fcc-sw-optcat__head    { margin-top: 28px; padding-left: 10px; }
	.fcc-sw-optcat__tagline { padding-left: 14px; font-size: 0.88rem; }
}
.fcc-sw-textured__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 8px;
}
.fcc-sw-textured__card {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 10px;
	overflow: hidden;
	margin: 0;
	box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.fcc-sw-textured__card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.fcc-sw-textured__caption {
	font-size: 0.92rem;
	font-weight: 600;
	color: #333;
	padding: 10px 14px 14px;
	text-align: center;
}

/* --- Swatches grid (colors, windows, glass, decraglass, hardware, tops) --- */
.fcc-sw-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 16px;
	margin-top: 8px;
}
.fcc-sw-swatch {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	padding: 10px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.fcc-sw-swatch__chip {
	/* v1.10.13: aspect ratio is now set per grid type via
	   `.fcc-sw-swatches--<type>` modifier classes so hardware (square),
	   glass (portrait), colors (square), tops (2:1), and windows (4:3)
	   each fill their chip without wasted cream padding. The default
	   4/3 handles any un-typed callers safely. See the modifier block
	   below this rule. */
	/* v1.10.25: chip background swapped from cream (#f5f5f5) to white so
	   Safe-Way's white-background product renders blend into the chip cleanly
	   instead of the cream tone framing them awkwardly. Outer .fcc-sw-swatch
	   card wrapper still uses cream for visual definition. */
	background: #ffffff;
	border-radius: 6px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	min-height: 100px;
	margin-bottom: 8px;
	padding: 8px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* --- Per-swatch-grid aspect ratios (v1.10.13; retuned v1.10.21) ---
   Each grid modifier overrides the default 4:3 with a ratio that
   matches the underlying Safe-Way source imagery so nothing gets stretched
   or letterboxed in a bad way.

   v1.10.21: Top Sections, Window Inserts, DecraGlass, and Glass Colors
   all ship as landscape ~3.5:1 crops from Safe-Way (measured live: 699x200
   window/top-section PNGs; 3915x1016 DecraGlass JPGs). The prior 2:1,
   4:3, and 3:4 chip ratios were stuffing wide images into square-ish or
   portrait chips, leaving heavy cream letterboxing and making the actual
   swatches feel tiny. Match aspect (7/2) + widen the grid so fewer, bigger
   cards fit per row and the customer can actually see the option. */
/* v1.16.1: Safe-Way Panel Styles / Top Section grids promoted from letterbox
   chips to full-bleed photo cards. Root cause of Riley's tiny-image report:
   the old 7/2 chip (min-height 80px) + object-fit:contain letterboxed the
   3:2 / 4:3 door photos (1024×683, 1024×768) down to ~107px wide inside a
   ~270px card. New treatment: 300px minmax columns, edge-to-edge image at
   3/2 with object-fit:cover, label below — image now fills the whole card
   width (~340-380px at desktop, roughly 3.5x wider / 10x the area). Scoped
   to .fcc-sw-swatches--tops so Hardware / Colors / Glass / Windows keep
   their existing proportions. */
/* v1.16.8 FIX: v1.16.1's fixed 3/2 chip + object-fit:cover CROPPED the panel
   art. Safe-Way panel-design source imagery is wildly mixed in shape — the
   brochure-extracted section strips are ~3.2:1 (e.g. 558×160 wood-grain panel
   designs) while the scraped door renders are ~3:2 and ~1:1 (452×397 SteeLite
   panels). Forcing them all into a 3/2 box with `cover` chopped roughly half
   the width off the wide strips, which is what Riley reported ("optimize the
   sizing so we can see the whole image, especially Panel Styles").
   New treatment: the chip has NO fixed aspect ratio — the image sets its own
   height (width:100%, height:auto) with a max-height guard, and `contain` as
   a belt-and-braces guard so nothing is ever cropped. Cards sit top-aligned
   in the grid so short strips don't get stretched. Chip background is #fff,
   identical to the card, so any residual letterboxing reads as padding. */
.fcc-sw-swatches--tops {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	align-items: start;
}
.fcc-sw-swatches--tops .fcc-sw-swatch { padding: 0 0 14px; }
.fcc-sw-swatches--tops .fcc-sw-swatch__chip {
	aspect-ratio: auto;
	height: auto;
	/* Small floor so LiteSpeed's 1x1 lazy-load placeholder still reserves
	   space and the card doesn't collapse before the real image arrives. */
	min-height: 90px;
	/* v1.34.0 (Riley): breathing room around the panel image instead of running
	   it edge-to-edge. 14px matches the label's own side padding below, so the
	   image and its caption line up on the same left edge. */
	padding: 14px 14px 0;
	margin-bottom: 12px;
	border-radius: 8px 8px 0 0;
	background: #ffffff;
	display: block;
}
.fcc-sw-swatches--tops .fcc-sw-swatch__chip img {
	width: 100% !important;
	height: auto !important;
	max-height: 460px !important;
	object-fit: contain !important;
	object-position: center !important;
	/* These are white doors on a white card — without a hairline the inset
	   image has no edge at all and the padding just reads as a gap. */
	border-radius: 4px;
	border: 1px solid #ececec;
	box-sizing: border-box;
}
.fcc-sw-swatches--tops .fcc-sw-swatch__label { padding: 0 14px; }
.fcc-sw-swatches--hardware .fcc-sw-swatch__chip { aspect-ratio: 1 / 1;  min-height: 130px; }
/* v1.15.9: Enlarged the glass swatch grid so customers can actually SEE
   the tint gradient and obscure-glass texture on Safe-Way single-door
   pages. Previous 180px column / 70px chip min-height rendered the tint
   images at ~150w × ~43h — too small to read the color/texture detail.
   Bumped to 260px columns + 110px min-height (aspect kept at 7/2 to match
   Safe-Way's landscape tint crops), which lands the images around
   ~245w × ~70h at desktop widths — ~65% larger without stretching. Mobile
   sizes bumped in tandem in the ≤767px breakpoint below. Scope is limited
   to .fcc-sw-swatches--glass so Window Inserts, Hardware, and Colors are
   unaffected. */
.fcc-sw-swatches--glass {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.fcc-sw-swatches--glass .fcc-sw-swatch__chip    { aspect-ratio: 7 / 2;  min-height: 110px; }
/* v1.18.2 (Riley): color swatches were too small to read. The chips are now
   real PDF-cropped swatches showing the factory paint texture, so they earn
   more room. 140px columns / 130px chip → 210px columns / 200px chip lands
   the swatch around ~190×190 at desktop instead of ~120×120 (~2.5× the
   visible area). `object-fit: cover` on colors only — a paint swatch is a
   flat texture with no framing to preserve, so filling the chip edge-to-edge
   reads better than `contain`'s letterboxing. Scoped to --colors so Windows,
   Glass, Hardware, and Top Sections are untouched. Mobile bumped in tandem
   in the ≤767px breakpoint below. */
.fcc-sw-swatches--colors {
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.fcc-sw-swatches--colors .fcc-sw-swatch__chip   { aspect-ratio: 1 / 1;  min-height: 200px; padding: 0; }
/* v1.25.0 (Riley) — this `cover` needs !important. It was added in v1.18.2 as a
   plain declaration, but the v1.10.23 overflow-containment block further down
   sets `object-fit: contain !important` on every .fcc-sw-swatch__chip img, so
   the colors rule silently lost and every swatch has been rendering `contain`
   ever since. With `contain`, each chip letterboxes to its own source ratio, so
   collections whose PDF crops came out at mixed heights showed mixed-size
   swatches — Choice's Almond/Bronze/Brown are 357x224 against the other six at
   ~357x331, which is exactly the "first 3 are small" Riley reported. Deluxe and
   SteeLite have the same split. `cover` is safe here: every Safe-Way color
   entry is a flat paint/woodgrain texture chip with no framing to preserve. */
.fcc-sw-swatches--colors .fcc-sw-swatch__chip img {
	object-fit: cover !important;
	object-position: center !important;
	width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
}
.fcc-sw-swatches--colors .fcc-sw-swatch__label  { font-size: 1rem; }
.fcc-sw-swatches--windows {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.fcc-sw-swatches--windows .fcc-sw-swatch__chip  { aspect-ratio: 7 / 2;  min-height: 75px;  }
/* v1.10.15: compact upper "Door Design" grid — same source images as the
   lower Door Designs gallery, but denser (6-per-row at desktop widths) so
   it reads as a quick preview, not a duplicate gallery. Smaller card
   padding, smaller label, tighter gutter, no 8px inner cream padding on
   the chip (the single-car renders already have their own margin baked
   in and Safe-Way designs are wider than they are tall — 2:1). */
.fcc-sw-swatches--series {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}
.fcc-sw-swatches--series .fcc-sw-swatch          { padding: 6px 6px 8px; }
.fcc-sw-swatches--series .fcc-sw-swatch__chip    { aspect-ratio: 1 / 1;  min-height: 60px; padding: 4px; margin-bottom: 6px; }
.fcc-sw-swatches--series .fcc-sw-swatch__label   { font-size: 0.82rem; padding: 0 2px; }
.fcc-sw-swatches--series .fcc-sw-pill            { padding: 6px 12px; font-size: 0.82rem; min-height: 32px; }
.fcc-sw-swatch__chip img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
/* v1.10.23: Safe-Way swatch overflow containment.
   Diagnosed live via Chrome MCP on staging: on Top Sections / Window Inserts /
   DecraGlass / Glass Colors, the chip's aspect-ratio (7/2) combined with its
   min-height (80/70/75px) computed a chip width from height (e.g., 80 × 3.5 =
   280px), which exceeded the parent swatch's inner content width (~253px on
   the 220px minmax grid). The chip's cream background AND the contained image
   bled 10-18px past the outer white card border, making the images visually
   appear larger than the cards. Clamp everything inside the card border here
   so the aspect-ratio math can never blow past the container. Scoped to the
   .fcc-sw-* Safe-Way namespace — Clopay/Invicta use different prefixes. */
.fcc-sw-swatch {
	overflow: hidden !important;
	box-sizing: border-box !important;
}
.fcc-sw-swatch__chip {
	overflow: hidden !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
}
.fcc-sw-swatch__chip img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
	box-shadow: none !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}
.fcc-sw-swatch__chip--empty {
	background: linear-gradient(135deg, #dcdcdc 25%, transparent 25%) -8px 0/16px 16px,
	            linear-gradient(-135deg, #dcdcdc 25%, transparent 25%) -8px 0/16px 16px,
	            #f5f5f5;
}
/* v1.10.19: hex-fill chips for solid Safe-Way paint colors. Same footprint as
 * the image chip variants — the parent .fcc-sw-swatches--colors rule already
 * sets aspect-ratio + min-height, so this only needs the color fill and a
 * subtle inner ring so pale swatches (True White, Almond) still read as
 * chips against the cream page background. */
.fcc-sw-swatch__chip--hex {
	background-color: #eee;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
/* v1.16.1: image chips are now <button>s that open the shared fcc-lightbox.
   Reset UA button chrome, keep the chip look, and add a gentle zoom-hint
   hover so customers know the photo is clickable. */
button.fcc-sw-swatch__zoom {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	font: inherit;
	cursor: zoom-in;
}
.fcc-sw-swatch__zoom img { transition: transform 0.25s ease; }
.fcc-sw-swatch__zoom:hover img,
.fcc-sw-swatch__zoom:focus-visible img { transform: scale(1.04); }
.fcc-sw-swatch__zoom:focus-visible { outline: 3px solid var(--fcc-red); outline-offset: 2px; }
.fcc-sw-swatch__label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #333;
	display: block;
	line-height: 1.3;
}

/* --- Text pill (used when a swatch entry has no image) --- */
.fcc-sw-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f5;
	color: #1a1a1a;
	border: 1px solid #ed1c23;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	min-height: 40px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

/* --- Pill-only swatch grid — override grid to flex-wrap so pills sit at
       their natural width and read as intentional design chips. --- */
.fcc-sw-swatches.fcc-sw-swatches--pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	grid-template-columns: none;
	margin-top: 8px;
}

/* --- Color notes (fallback text-only list) --- */
.fcc-sw-color-notes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: 10px;
}
.fcc-sw-color-notes p {
	background: #f5f5f5;
	color: #333;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 0.9rem;
	margin: 0;
	font-weight: 500;
}

/* --- Safe-Way Color Zone callout --- */
.fcc-sw-color-zone {
	margin-top: 28px;
	background: linear-gradient(135deg, #f5f5f5 0%, #fff 100%);
	border: 1px solid #ed1c23;
	border-radius: 12px;
	padding: 24px 26px;
	display: flex;
	align-items: center;
	gap: 28px;
}
.fcc-sw-color-zone__img {
	flex: 0 0 auto;
	width: 100%;
	max-width: 320px;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	display: block;
}
.fcc-sw-color-zone__body {
	flex: 1 1 auto;
	min-width: 0;
}
.fcc-sw-color-zone__eyebrow {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ed1c23;
	margin: 0 0 6px;
}
.fcc-sw-color-zone__title {
	font-size: 1.35rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 10px;
}
.fcc-sw-color-zone p {
	color: #444;
	line-height: 1.6;
	margin: 0;
}
@media (max-width: 720px) {
	.fcc-sw-color-zone {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		gap: 18px;
		padding: 20px 20px;
	}
	.fcc-sw-color-zone__img {
		max-width: 260px;
		margin: 0 auto;
	}
}

/* --- Warranty (v1.14.1 — tier-grouped duration cards) ---
   Replaces the v1.14.0 paragraph card. Each collection now renders as a
   card grid where every card = one warranty DURATION, listing only the
   components covered at that tier. Much easier to scan than the old
   warranty_class prose blob. Facts source: Safe-Way Consolidated Residential
   Warranty PDF (Form 842). */

/* Transferable flag — kept from v1.14.0, promoted to a top-level pill
   between the section lead and the card grid. */
.fcc-sw-warranty__flag {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 6px 0 22px;
}
.fcc-sw-warranty__flag.is-transfer {
	background: #e6f5e6;
	color: #1d6b1d;
}
.fcc-sw-warranty__flag.is-nontransfer {
	background: #fff0f0;
	color: #b3242b;
}

/* Duration-tier card grid — 3 cols desktop, 2 cols tablet, 1 col mobile. */
.fcc-sw-warranty__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0 0 24px;
}
.fcc-sw-warranty__tier {
	background: #f5f5f5;
	border: 1px solid #dcdcdc;
	border-radius: 12px;
	padding: 26px 24px 24px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.04);
	display: flex;
	flex-direction: column;
}
.fcc-sw-warranty__duration {
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ed1c23;
	line-height: 1.1;
	margin: 0;
}
.fcc-sw-warranty__sub {
	font-size: 0.78rem;
	color: #6b6b6b;
	font-style: italic;
	margin-top: 6px;
	letter-spacing: 0.02em;
}
.fcc-sw-warranty__divider {
	height: 3px;
	width: 44px;
	background: #ed1c23;
	border-radius: 3px;
	margin: 14px 0 16px;
}
.fcc-sw-warranty__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.fcc-sw-warranty__list li {
	color: #333;
	font-size: 0.98rem;
	line-height: 1.45;
	padding-left: 18px;
	position: relative;
}
.fcc-sw-warranty__list li::before {
	content: '';
	width: 6px;
	height: 6px;
	background: #ed1c23;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 8px;
}

/* Builds note — the "coverage shown is for X build; lower builds Y" line. */
.fcc-sw-warranty__builds-note {
	color: #444;
	background: #fff;
	border: 1px solid #eaeaea;
	border-left: 3px solid #ed1c23;
	padding: 14px 18px;
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 18px;
	border-radius: 0 6px 6px 0;
}

/* Field-of-use notes (voids, exclusions) inherited from the JSON. */
.fcc-sw-warranty__notes {
	color: #555;
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 18px;
}
.fcc-sw-warranty__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}
.fcc-sw-warranty__foot {
	color: #777;
	font-size: 0.88rem;
	line-height: 1.55;
	margin: 0;
}

@media (max-width: 900px) {
	.fcc-sw-warranty__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.fcc-sw-warranty__grid { grid-template-columns: 1fr; }
	.fcc-sw-warranty__tier { padding: 22px 20px 20px; }
	.fcc-sw-warranty__duration { font-size: 1.35rem; }
}

/* Legacy card class from v1.14.0 kept as a no-op safety net — not
   emitted by the v1.14.1 renderer but harmless if any cached HTML still
   contains it. */
.fcc-sw-warranty__card { background: transparent; border: 0; padding: 0; box-shadow: none; }
.fcc-sw-warranty__body { color: #333; line-height: 1.65; margin: 0 0 14px; }

/* --- Series callout grid (Classica) --- */
.fcc-sw-series__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
	margin-top: 20px;
}
.fcc-sw-series__card {
	background: #f5f5f5;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	padding: 18px 20px;
}
.fcc-sw-series__name {
	font-size: 1.05rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 6px;
}
.fcc-sw-series__note {
	color: #555;
	font-size: 0.92rem;
	line-height: 1.5;
	margin: 0;
}

/* --- Aluminum/glass color categories (v1.15.26) ---
   Only aluminum/glass collections use these subheadings; steel/wood/vinyl/
   fiberglass stay as a single flat swatch grid with no subheads. Reuses the
   same visual weight as the windows/textured subheads for consistency. */
.fcc-sw-colors__subhead { font-size: 1.15rem; font-weight: 800; color: #1a1a1a; margin: 28px 0 14px; }
.fcc-sw-colors__subhead:first-of-type { margin-top: 8px; }
/* v1.23.0: the house-photo cards are much taller than a chip grid, so a
   subhead following one needs real separation or the two grainings read as a
   single run of colors. */
.fcc-sw-colorcards + .fcc-sw-colors__subhead { margin-top: 46px; }

/* --- v1.16.5: Swatch + house-example color cards (Safe-Way Wood Look) ---
   Matches the Wood Looks brochure treatment: each color renders as a larger
   card with the real-house photo on top and the flat swatch chip + color
   name in a meta row below. Only collections whose color entries carry a
   `house_example` image get this layout; everything else keeps the plain
   chip grid. Light grey palette, red accent on hover per site standards. */
.fcc-sw-colorcards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px;
	margin-top: 12px;
}
.fcc-sw-colorcard {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,0.05);
	transition: box-shadow .18s ease, transform .18s ease;
}
.fcc-sw-colorcard:hover {
	box-shadow: 0 6px 18px rgba(0,0,0,0.10);
	transform: translateY(-2px);
}
.fcc-sw-colorcard__house {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: #f7f7f7;
	cursor: zoom-in;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.fcc-sw-colorcard__house img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.fcc-sw-colorcard__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px 14px;
	background: #fafafa;
	border-top: 1px solid #eee;
}
.fcc-sw-colorcard__chip {
	flex: 0 0 auto;
	width: 72px;
	height: 52px;
	padding: 0;
	margin: 0;
	border: 2px solid #fff;
	border-radius: 6px;
	overflow: hidden;
	background: #f7f7f7;
	cursor: zoom-in;
	box-shadow: 0 0 0 1px #ddd;
	transition: box-shadow .15s ease;
}
.fcc-sw-colorcard__chip:hover { box-shadow: 0 0 0 2px #ed1c23; }
/* v1.16.8: `contain` instead of `cover` — the wood-grain colour swatches are
   ~1.45:1 and the chip is ~1.38:1, so `cover` was shaving the edges off. */
.fcc-sw-colorcard__chip img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.fcc-sw-colorcard__name {
	font-weight: 800;
	font-size: 1.05rem;
	color: #1a1a1a;
}
@media (max-width: 640px) {
	.fcc-sw-colorcards { grid-template-columns: 1fr; gap: 18px; }
}

/* --- Windows/glass carousel --- */
.fcc-sw-windows__subhead { font-size: 1.15rem; font-weight: 800; color: #1a1a1a; margin: 28px 0 14px; }
.fcc-sw-windows__carousel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
	margin-top: 8px;
}
.fcc-sw-windows__cshot { margin: 0; }
.fcc-sw-windows__cshot img {
	display: block; width: 100%; height: auto;
	border-radius: 8px;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

/* --- Custom wood callout ---
   v1.10.11: centered layout so the two CTA buttons sit balanced under the
   copy instead of pushing to the left edge of the callout. */
.fcc-sw-custom__cta {
	margin-top: 28px;
	background: #f5f5f5;
	border: 1px solid #dcdcdc;
	border-radius: 12px;
	padding: 24px 26px;
	text-align: center;
}
.fcc-sw-custom__cta p {
	color: #333;
	line-height: 1.6;
	margin: 0 auto 20px;
	max-width: 720px;
	text-align: center;
}
.fcc-sw-custom__cta-buttons {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 20px;
}

/* --- Downloads --- */
.fcc-sw-downloads__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
	margin-top: 20px;
}
.fcc-sw-downloads__card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 10px;
	padding: 16px 18px;
	text-decoration: none;
	color: #1a1a1a;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fcc-sw-downloads__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	color: #ed1c23;
}
.fcc-sw-downloads__icon {
	background: #f5f5f5;
	color: #ed1c23;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
}
.fcc-sw-downloads__meta {
	display: flex;
	flex-direction: column;
}
.fcc-sw-downloads__label {
	font-weight: 700;
	color: inherit;
	line-height: 1.3;
}
.fcc-sw-downloads__ext {
	color: #999;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: 2px;
}

/* --- Mid CTA (uses shared .fcc-mid-cta base) --- */
.fcc-sw-mid-cta { border-color: #ed1c23; }

/* --- Hub warranty grid --- */
.fcc-sw-hub-warranty__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 20px;
}
.fcc-sw-hub-warranty__card {
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 10px;
	padding: 20px 22px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.fcc-sw-hub-warranty__card h3 {
	font-size: 1.1rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 8px;
}
.fcc-sw-hub-warranty__card p {
	color: #444;
	line-height: 1.55;
	margin: 0;
	font-size: 0.95rem;
}
.fcc-sw-hub-warranty__note {
	background: #f5f5f5;
	border-left: 4px solid #ed1c23;
	padding: 16px 20px;
	margin-top: 22px;
	color: #333;
	line-height: 1.55;
}

/* --- Reviews widget --- */
.fcc-sw-reviews__widget { margin-top: 20px; }

/* --- Mobile polish --- */
@media (max-width: 767px) {
	.fcc-sw-section { margin: 36px 0; }
	.fcc-sw-designs__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
	.fcc-sw-textured__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
	.fcc-sw-swatches { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
	/* v1.10.15: series preview stays denser than the main Door Designs
	   gallery even on phones — 2 cards per row at typical phone widths. */
	.fcc-sw-swatches--series { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
	/* v1.10.21: keep the bigger landscape-swatch sections at 2 cards per row
	   on phones (~320-414px viewports) instead of collapsing to the shared
	   110px minmax. Also drop the desktop chip min-height on mobile so a
	   150px-wide chip at 7:2 (natural h ~43px) doesn't get force-padded to
	   80px with cream letterboxing. */
	/* v1.16.1: Panel Styles stack one full-width photo card per row on
	   phones — the 3/2 cover image spans the whole viewport-width card. */
	.fcc-sw-swatches--tops    { grid-template-columns: 1fr; gap: 16px; }
	.fcc-sw-swatches--windows { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	/* v1.15.9: mobile glass swatches sized up alongside the desktop bump so
	   the tint/texture detail stays readable on phones — was 150px column /
	   45px chip min-height, now 220px / 85px (≈90% larger). */
	.fcc-sw-swatches--glass   { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
	/* v1.18.2: colors get 2-up on phones instead of inheriting the 110px
	   base grid (which squeezed them to ~4 tiny chips per row). */
	.fcc-sw-swatches--colors  { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.fcc-sw-swatches--colors .fcc-sw-swatch__chip { min-height: 150px; }
	.fcc-sw-swatches--tops .fcc-sw-swatch__chip,
	.fcc-sw-swatches--windows .fcc-sw-swatch__chip { min-height: 45px; }
	.fcc-sw-swatches--glass .fcc-sw-swatch__chip  { min-height: 85px; }
	.fcc-sw-features__grid { grid-template-columns: 1fr; gap: 14px; }
	.fcc-sw-downloads__grid { grid-template-columns: 1fr; }
	.fcc-sw-construction__callout-value { font-size: 1.9rem; }
	.fcc-sw-construction__meta-label { min-width: 130px; }
	.fcc-sw-designs__toggle-btn { padding: 8px 14px; font-size: 0.85rem; }
}

/* =========================================================================
   v1.10.6 — Safe-Way single-door page cleanup
   -------------------------------------------------------------------------
   The staging build (v1.10.5) had ~367px of empty space between the WP
   header and the hero (100px inline body-main margin + 100px on the first
   .fcc-contained + 100px on .fcc-hero-split all stacked). It also inherited
   the Clopay/Invicta text-align:center hero rule (via the shared
   .fcc-single-door class) — Safe-Way's hero is a wide split layout that needs
   to stay left-aligned. And the answer-capsule was clamped to zero margin
   by an old Clopay override.

   This block fixes all of it in one place, scoped strictly to
   .fcc-single-safeway so nothing leaks into the other brands.
   ========================================================================= */

/* Kill the legacy 100px margin the shared .fcc-contained:first-of-type rule
   was applying to Safe-Way's breadcrumbs container. The inline critical CSS
   (in class-fcc-safeway-frontend.php) already gives us 20px of clearance from
   the site header — anything more is redundant. */
.fcc-single-safeway.fcc-single-door > article > .fcc-contained.fcc-sw-single-top {
	margin-top: 0 !important;
}
@media (max-width: 767px) {
	.fcc-single-safeway.fcc-single-door > article > .fcc-contained.fcc-sw-single-top {
		margin-top: 0 !important;
	}
}

/* Zero out the .fcc-hero-split { margin-top: 100px } that ships as the
   default for Clopay/Invicta split heroes. Safe-Way's breadcrumbs already
   provide the visual gap; the hero should sit right underneath. */
.fcc-single-safeway .fcc-hero-split.fcc-sw-hero {
	margin-top: 0 !important;
	/* Warm cream (matches .fcc-mid-cta and the rest of the plugin's cream
	   surfaces). Overrides the plugin default's cool #f8f8f8 gray. */
	background: #f5f5f5 !important;
	border-bottom: 1px solid #dcdcdc !important;
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}
@media (max-width: 767px) {
	.fcc-single-safeway .fcc-hero-split.fcc-sw-hero {
		padding-top: 28px !important;
		padding-bottom: 28px !important;
	}
}

/* Hero inner is now nested inside .fcc-contained (v1.10.6 template change),
   so the two-column split aligns horizontally with every section title
   below. Kill the shared __inner max-width/padding — .fcc-contained is now
   the constraint, and __inner just needs to be the grid container. */
.fcc-single-safeway .fcc-hero-split.fcc-sw-hero .fcc-hero-split__inner {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Safe-Way hero content stays LEFT-aligned. Overrides the Clopay text-align
   center rules that would otherwise inherit through .fcc-single-door. */
.fcc-single-safeway .fcc-hero-split__inner,
.fcc-single-safeway .fcc-hero-split__text {
	text-align: left !important;
	align-items: start !important;
}
.fcc-single-safeway .fcc-hero-split__cta {
	justify-content: flex-start !important;
}

/* v1.10.27 — Kill the white frame around the Safe-Way hero image.
   The plugin default .fcc-hero-split__media renders a white rounded card
   with a border and centers the image inside it (object-fit: contain).
   When the door image doesn't perfectly fill that container, the white
   card shows through as an ugly frame on top of the cream hero background.
   v1.10.38 — Widened the selector to catch every possible Safe-Way hero markup
   variant. Uses body-class (`.single-safeway_door`), post-type body class,
   and attribute-selector fallbacks so ANY Safe-Way page reliably hits the rule
   regardless of what theme/plugin wrapper the article gets. Clopay + Invicta
   hero framing stays intact — those pages don't get `.fcc-sw-hero` nor the
   `safeway_door` post type / body class. */
[class*="fcc-sw-hero"] .fcc-hero-split__media,
.fcc-hero-split.fcc-sw-hero .fcc-hero-split__media,
.fcc-sw-hero .fcc-hero-split__media,
.fcc-single-safeway .fcc-hero-split__media {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}

/* v1.11.15 — Kill the frame around the img entirely.
   Prior rule (v1.10.27/38) added `border-radius: 12px` + a soft `box-shadow`
   directly to the <img>. On dark doors (Classica Flush matte-black etc.)
   sitting on the cream hero background, that shadow renders as a visible
   rounded-rectangle frame around the image — the "weird box" Riley kept
   flagging. Setting radius/shadow to none lets the image sit clean on the
   cream background with no visible border, exactly what Riley wants. */
[class*="fcc-sw-hero"] .fcc-hero-split__media img,
.fcc-hero-split.fcc-sw-hero .fcc-hero-split__media img,
.fcc-sw-hero .fcc-hero-split__media img,
.fcc-single-safeway .fcc-hero-split__media img {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	display: block !important;
	max-width: 100% !important;
	height: auto !important;
}

/* Defensive: strip framing from any WordPress-generated figure/wp-block-image
   wrapper the theme might insert around the hero img. */
.fcc-sw-hero figure,
.fcc-sw-hero .wp-block-image,
.single-safeway_door .fcc-sw-hero figure,
.single-safeway_door .fcc-sw-hero .wp-block-image {
	background: transparent !important;
	background-color: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* --- Fix #3: Answer capsule breathing room + interior padding. --- */
/* Roomier margins above/below and larger interior padding so the "ABOUT THIS
   AMARR DOOR" label + short-desc text isn't cramped against the red border. */
.fcc-single-safeway .fcc-hero-split + .fcc-contained {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* --- Fix #5: Tighten the Custom Wood section. ---
   The "Custom Wood — Safe-Way By Design" section on the By Design page renders
   ~961px tall — visually dominant. Trim the subheading margins, the swatch
   grid gaps, and the space before the closing custom-order aside. */
.fcc-single-safeway .fcc-sw-custom .fcc-sw-textured__subhead {
	margin: 20px 0 10px;
}
.fcc-single-safeway .fcc-sw-custom .fcc-sw-textured__subhead:first-of-type {
	margin-top: 4px;
}
.fcc-single-safeway .fcc-sw-custom .fcc-sw-swatches {
	gap: 12px;
	margin-top: 6px;
}
.fcc-single-safeway .fcc-sw-custom .fcc-sw-swatch { padding: 8px; }
.fcc-single-safeway .fcc-sw-custom .fcc-sw-swatch__label { font-size: 0.82rem; }
.fcc-single-safeway .fcc-sw-custom__cta {
	margin-top: 20px;
	padding: 20px 22px;
}

/* --- Fix #6: Standardize .fcc-sw-section vertical rhythm. ---
   Bring Safe-Way's per-section margin (was 56px) in line with the .fcc-section
   default (48px) so the page has a single, consistent rhythm through the
   Overview → Features → Construction → … → Cities stack. */
.fcc-sw-section { margin: 48px 0; }

/* ================= Safe-Way CTA buttons (v1.10.11 → v1.10.30) =================
   v1.10.11 originally scoped strong button styling to only .fcc-sw-custom__cta
   and .fcc-sw-mid-cta. Every new Safe-Way section shipped afterward (Cost Factors
   in v1.10.29, Recently Installed / Best For hero / WindPro / HOA callout in
   v1.10.28–29) got skipped because its container isn't one of those two —
   CTAs rendered as plain red text instead of proper buttons.

   v1.10.30 widens the scope: ANY .fcc-btn--red or .fcc-btn--outline-dark
   inside ANY .fcc-sw-* Safe-Way container gets the strong treatment. The
   [class*="fcc-sw-"] attribute selector is safe — Clopay uses .fcc-c-* and
   Invicta uses .fcc-i-*, neither of which contains the "fcc-sw-" substring,
   so nothing leaks. The bottom-CTA banner (.fcc-sw-bottom-cta) uses
   .fcc-btn--white on a red background — the --white variant is a separate
   modifier and is intentionally NOT targeted here. */

/* Primary — red fill, white text, subtle red-tinted shadow */
/* v1.10.30 — universalized: any Safe-Way section's primary red CTA */
.fcc-sw-section .fcc-btn--red,
.fcc-sw-hero .fcc-btn--red,
.fcc-sw-single .fcc-btn--red,
[class*="fcc-sw-"] .fcc-btn--red {
	background-color: #ed1c23 !important;
	color: #ffffff !important;
	border: 2px solid #ed1c23 !important;
	box-shadow: 0 2px 6px rgba(237, 28, 35, 0.25) !important;
	font-weight: 700 !important;
	padding: 14px 28px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.fcc-sw-section .fcc-btn--red:hover,
.fcc-sw-hero .fcc-btn--red:hover,
.fcc-sw-single .fcc-btn--red:hover,
[class*="fcc-sw-"] .fcc-btn--red:hover {
	background-color: #c81a20 !important;
	border-color: #c81a20 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(237, 28, 35, 0.35) !important;
}

/* Secondary — SOLID DARK (v1.10.35). Was outline-on-white through v1.10.34,
   but on cream Mid-CTA / Cost Factors panels the outline treatment read as
   weak text with a hairline border. Both buttons on every Safe-Way section now
   render as SOLID high-contrast colors: primary solid red + secondary solid
   dark. Class name kept as --outline-dark so existing renderer emissions get
   the new solid-dark treatment without touching PHP. The phone SVG inherits
   `currentColor`, so it auto-flips to white with the text. */
.fcc-sw-section .fcc-btn--outline-dark,
.fcc-sw-hero .fcc-btn--outline-dark,
.fcc-sw-single .fcc-btn--outline-dark,
[class*="fcc-sw-"] .fcc-btn--outline-dark {
	background-color: #1a1a1a !important;
	color: #ffffff !important;
	border: 2px solid #1a1a1a !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20) !important;
	font-weight: 700 !important;
	padding: 14px 26px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.fcc-sw-section .fcc-btn--outline-dark:hover,
.fcc-sw-hero .fcc-btn--outline-dark:hover,
.fcc-sw-single .fcc-btn--outline-dark:hover,
[class*="fcc-sw-"] .fcc-btn--outline-dark:hover {
	background-color: #000000 !important;
	color: #ffffff !important;
	border-color: #000000 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30) !important;
}
/* Belt-and-suspenders: force the phone SVG stroke to white in case a
   downstream sheet overrides `color` and breaks `currentColor` inheritance. */
.fcc-sw-section .fcc-btn--outline-dark svg,
.fcc-sw-hero .fcc-btn--outline-dark svg,
.fcc-sw-single .fcc-btn--outline-dark svg,
[class*="fcc-sw-"] .fcc-btn--outline-dark svg {
	stroke: #ffffff !important;
	color: #ffffff !important;
}

/* Mobile — stack CTA buttons full-width for easier thumb targets */
@media (max-width: 640px) {
	.fcc-sw-custom__cta-buttons .fcc-btn,
	.fcc-sw-mid-cta .fcc-mid-cta__buttons .fcc-btn,
	[class*="fcc-sw-"] .fcc-btn {
		width: 100% !important;
		padding: 14px 20px !important;
		justify-content: center !important;
	}
}

/* =========================================================================
   v1.10.13 — Safe-Way cities section (single-door + hub)
   -------------------------------------------------------------------------
   Replaces the inline "wall of pins" render from prior versions. Each city
   is now a proper card: pin badge on top, bold black name below, small
   "Arizona" caption, and an absolutely-positioned red "Home base" pill on
   the Mesa card. Works both on the Safe-Way hub page (inside
   .fcc-doors-overview) and on single door pages (no wrapper) because the
   selectors are un-scoped and use their own class family.
   ========================================================================= */
.fcc-sw-cities {
	background: #ffffff;
}
.fcc-sw-cities .fcc-section__title {
	margin: 0 0 12px;
}
.fcc-sw-cities__intro {
	font-size: 17px;
	line-height: 1.65;
	color: #444;
	max-width: 780px;
	margin: 0 0 32px;
}
/* v1.11.3 — Unified Cities card design.
   The three brand renderers (Safe-Way, Clopay, Invicta) now emit the SAME
   markup for each city card: a big city name as the visual hero, a small
   "[Brand] Garage Door Installer/Dealer" subtitle, optional neighborhood
   chips, and a short hook paragraph. Card layout lives on .fcc-city-card
   (shared); .fcc-sw-cities / .fcc-c-cities / .fcc-i-cities still exist as
   section wrappers for per-brand backgrounds and grid tweaks.

   Safe-Way + Clopay pages load this CSS via frontend.css. Invicta pages
   duplicate this block inline (scoped under #fcc-invicta-single with
   !important) in class-fcc-invicta-frontend.php so they win over any
   theme/Elementor default styles. */
.fcc-sw-cities__grid,
.fcc-c-cities__grid,
.fcc-i-cities__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.fcc-city-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 20px 20px;
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.08);
	border-top: 3px solid #ed1c23;
	border-radius: 10px;
	color: #111;
	text-decoration: none !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.fcc-city-card.is-accent-red { border-top-color: #ed1c23; }
.fcc-city-card.is-accent-dark { border-top-color: #1a1a1a; }
.fcc-city-card:hover,
.fcc-city-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0,0,0,0.10);
	background: #ffffff;
	color: #111;
	outline: none;
}
.fcc-city-card.is-home {
	background: #fff8f8;
	border-color: rgba(237,28,35,0.35);
	border-top-color: #ed1c23 !important;
	box-shadow: 0 2px 10px rgba(237,28,35,0.10);
}
.fcc-city-card__header {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.fcc-city-card__pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(237,28,35,0.12);
	color: #ed1c23;
	flex: 0 0 auto;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.fcc-city-card:hover .fcc-city-card__pin,
.fcc-city-card:focus-visible .fcc-city-card__pin {
	background: #ed1c23;
	color: #ffffff;
	transform: scale(1.05);
}
.fcc-city-card__name {
	font-size: 1.75rem;
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #1a1a1a;
	flex: 1 1 auto;
	min-width: 0;
	word-break: break-word;
}
.fcc-city-card__badge {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.75px;
	text-transform: uppercase;
	color: #ffffff;
	background: #ed1c23;
	padding: 4px 9px;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(237,28,35,0.25);
	flex: 0 0 auto;
}
.fcc-city-card__subtitle {
	font-size: 0.88rem;
	font-weight: 600;
	color: #6a6a6a;
	line-height: 1.35;
	margin: -4px 0 0 36px;
	letter-spacing: 0.1px;
}
.fcc-city-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 0 0;
}
.fcc-city-card__chip {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	color: #333;
	background: #f5f5f5;
	border: 1px solid rgba(0,0,0,0.10);
	padding: 3px 9px;
	border-radius: 999px;
	line-height: 1.4;
	white-space: nowrap;
}
.fcc-city-card__hook {
	margin: 4px 0 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: #444;
}
/* Legacy inner-class fallback — older v1.11.2 markup shouldn't ship,
   but if a cached page renders it, keep basic readability. */
.fcc-sw-city-card__title,
.fcc-sw-city-card__hook,
.fcc-sw-city-card__head,
.fcc-sw-city-card__pin,
.fcc-sw-city-card__badge { }
@media (max-width: 640px) {
	.fcc-sw-cities__grid,
	.fcc-c-cities__grid,
	.fcc-i-cities__grid { grid-template-columns: 1fr; }
	.fcc-city-card { padding: 18px 16px 16px; }
	.fcc-city-card__name { font-size: 1.55rem; }
	.fcc-city-card__subtitle { font-size: 0.85rem; margin-left: 34px; }
	.fcc-city-card__hook { font-size: 0.9rem; }
}

/* =================================================================
 * Safe-Way — Install Section (v1.10.36)
 * -----------------------------------------------------------------
 * Sits between Warranty and Cost Factors. Cream section background,
 * red accent, numbered step circles, and a comma-list coverage line
 * linking every service-area city.
 * ================================================================= */
.fcc-sw-install-section {
	background: transparent;
}
.fcc-sw-install-section .fcc-section__title {
	text-align: center;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 28px;
}
.fcc-sw-install-section__block {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 24px 26px;
	margin: 0 0 22px;
}
.fcc-sw-install-section__block:last-of-type { margin-bottom: 22px; }
.fcc-sw-install-section__h3 {
	font-size: 1.18rem;
	font-weight: 800;
	color: #111;
	margin: 0 0 12px;
	padding: 0 0 10px;
	border-bottom: 2px solid #ed1c23;
	display: inline-block;
	line-height: 1.3;
}
.fcc-sw-install-section__block p {
	margin: 0 0 12px;
	color: #333;
	font-size: 1rem;
	line-height: 1.7;
}
.fcc-sw-install-section__block p:last-of-type { margin-bottom: 0; }
.fcc-sw-install-section__steps {
	list-style: none;
	counter-reset: fcc-sw-install-step;
	padding: 0;
	margin: 8px 0 0;
}
.fcc-sw-install-section__step {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 14px 0;
	border-top: 1px solid #e0e0e0;
}
.fcc-sw-install-section__step:first-of-type { border-top: none; padding-top: 4px; }
.fcc-sw-install-section__num {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #ed1c23;
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1;
}
.fcc-sw-install-section__step-body { flex: 1 1 auto; }
.fcc-sw-install-section__step-title {
	font-size: 1.04rem;
	font-weight: 800;
	color: #111;
	margin: 4px 0 6px;
	line-height: 1.3;
}
.fcc-sw-install-section__step-body p {
	margin: 0;
	color: #444;
	font-size: .97rem;
	line-height: 1.6;
}
.fcc-sw-install-section__coverage {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 18px 22px;
	margin: 0 0 24px;
	font-size: .98rem;
	line-height: 1.75;
	color: #333;
}
.fcc-sw-install-section__coverage a {
	color: #ed1c23;
	text-decoration: none;
	font-weight: 700;
}
.fcc-sw-install-section__coverage a:hover { text-decoration: underline; }
.fcc-sw-install-section__cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 4px;
}
@media (max-width: 640px) {
	.fcc-sw-install-section__block { padding: 20px 20px; }
	.fcc-sw-install-section__step { gap: 14px; padding: 12px 0; }
	.fcc-sw-install-section__num { width: 34px; height: 34px; font-size: .98rem; }
	.fcc-sw-install-section__coverage { padding: 16px 18px; font-size: .96rem; }
}

/* =================================================================
 * Safe-Way — Cost Factors section (v1.10.29 — Phase 2 SEO)
 * ================================================================= */
/* v1.10.30 — center the Cost Factors intro paragraph (was left-aligned) */
.fcc-sw-cost-factors > p,
.fcc-sw-cost-factors__lead,
.fcc-sw-cost-factors .fcc-section__lead {
	text-align: center !important;
	max-width: 720px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 32px !important;
}
.fcc-sw-cost-factors__lead {
	color: #333;
	font-size: 1.02rem;
	line-height: 1.7;
}
.fcc-sw-cost-factors__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 32px;
}
.fcc-sw-cost-factors__card {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 22px 22px 20px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.fcc-sw-cost-factors__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.fcc-sw-cost-factors__eyebrow {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #ed1c23;
	margin: 0 0 8px;
}
.fcc-sw-cost-factors__title {
	font-size: 1.08rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 8px;
	line-height: 1.3;
}
.fcc-sw-cost-factors__body {
	margin: 0;
	font-size: .96rem;
	line-height: 1.6;
	color: #444;
}
.fcc-sw-cost-factors__cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 4px;
}
@media (max-width: 900px) {
	.fcc-sw-cost-factors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.fcc-sw-cost-factors__grid { grid-template-columns: 1fr; }
}

/* =================================================================
 * Safe-Way — Wind Load Options section (v1.17.0)
 * -----------------------------------------------------------------
 * Replaces the v1.10.29 .fcc-sw-windpro callout. Wind load is now a
 * full section on the six collections that genuinely offer it, so it
 * needs real structure: rating cards, a reinforcement diagram, a model
 * list, and a warranty callout. Light grey palette + red accents to
 * match every other Safe-Way section — no black backgrounds.
 * ================================================================= */
.fcc-sw-wl__lead { text-align: center; max-width: 860px; margin: 0 auto 26px; }
.fcc-sw-wl__intro { max-width: 900px; margin: 0 auto 32px; }
.fcc-sw-wl__intro p {
	margin: 0 0 14px;
	color: #333;
	font-size: 1.02rem;
	line-height: 1.7;
}
.fcc-sw-wl__intro p:last-child { margin-bottom: 0; }

/* ---- Rating cards (120 / 130 / 140 mph) ---- */
.fcc-sw-wl__ratings {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 0 0 18px;
}
.fcc-sw-wl__rate {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-top: 4px solid #ed1c23;
	border-radius: 10px;
	padding: 22px 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.fcc-sw-wl__rate-ico { color: #ed1c23; display: inline-flex; margin-bottom: 8px; }
.fcc-sw-wl__rate-num {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	color: #1a1a1a;
	letter-spacing: -0.02em;
}
.fcc-sw-wl__rate-unit {
	font-size: 0.95rem;
	font-weight: 800;
	color: #ed1c23;
	margin-left: 6px;
	letter-spacing: 0.04em;
}
.fcc-sw-wl__rate-label {
	display: block;
	margin-top: 6px;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #777;
	font-weight: 700;
}
.fcc-sw-wl__rate-psf {
	display: block;
	margin-top: 12px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #444;
}
.fcc-sw-wl__rate-sfx {
	display: inline-block;
	margin-top: 10px;
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 0.85rem;
	color: #333;
}
.fcc-sw-wl__suffix-note {
	max-width: 900px;
	margin: 0 auto 34px;
	text-align: center;
	font-size: 0.94rem;
	line-height: 1.6;
	color: #555;
}

/* ---- Build: diagram + reinforcement list ---- */
.fcc-sw-wl__build {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: center;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 28px;
	margin: 0 0 34px;
}
.fcc-sw-wl__figure { margin: 0; }
.fcc-sw-wl__figure img {
	display: block;
	width: 100%;
	height: auto;
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	padding: 10px;
}
.fcc-sw-wl__figure figcaption {
	margin-top: 10px;
	font-size: 0.86rem;
	line-height: 1.55;
	color: #666;
}
.fcc-sw-wl__h3 {
	font-size: 1.28rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 14px;
}
.fcc-sw-wl__list { margin: 0; padding: 0; list-style: none; }
.fcc-sw-wl__list li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 12px;
	color: #333;
	font-size: 0.99rem;
	line-height: 1.62;
}
.fcc-sw-wl__list li:last-child { margin-bottom: 0; }
.fcc-sw-wl__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: #ed1c23;
}
.fcc-sw-wl__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}
.fcc-sw-wl__spec {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 0.88rem;
	line-height: 1.3;
}
.fcc-sw-wl__spec-k {
	display: block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #888;
	font-weight: 700;
}
.fcc-sw-wl__spec-v { display: block; color: #1a1a1a; font-weight: 700; }

/* ---- Model list ---- */
.fcc-sw-wl__models { margin: 0 0 34px; }
.fcc-sw-wl__group {
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #ed1c23;
	font-weight: 800;
	margin: 20px 0 12px;
}
.fcc-sw-wl__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}
.fcc-sw-wl__chip {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-left: 3px solid #ed1c23;
	border-radius: 8px;
	padding: 12px 16px;
}
.fcc-sw-wl__chip-model {
	display: block;
	font-weight: 800;
	color: #1a1a1a;
	font-size: 0.98rem;
}
.fcc-sw-wl__chip-panel {
	display: block;
	margin-top: 3px;
	font-size: 0.87rem;
	color: #666;
	line-height: 1.45;
}
.fcc-sw-wl__models-note {
	margin: 18px 0 0;
	font-size: 0.96rem;
	line-height: 1.65;
	color: #444;
}

/* ---- Warranty callout ---- */
.fcc-sw-wl__warranty {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-left: 5px solid #ed1c23;
	border-radius: 10px;
	padding: 24px 26px;
	margin: 0 0 22px;
}
.fcc-sw-wl__warranty-ico { flex: 0 0 auto; color: #ed1c23; display: inline-flex; }
.fcc-sw-wl__warranty-title {
	font-size: 1.16rem;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 8px;
}
.fcc-sw-wl__warranty-body p {
	margin: 0 0 10px;
	color: #333;
	font-size: 0.99rem;
	line-height: 1.65;
}
.fcc-sw-wl__warranty-body p:last-child { margin-bottom: 0; }
.fcc-sw-wl__warranty-flag { color: #555 !important; font-size: 0.93rem !important; }

.fcc-sw-wl__fineprint {
	font-size: 0.85rem;
	line-height: 1.6;
	color: #777;
	margin: 0 0 30px;
}

/* ---- CTA ---- */
.fcc-sw-wl__cta {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 26px 28px;
	text-align: center;
}
.fcc-sw-wl__cta-copy {
	max-width: 840px;
	margin: 0 auto 20px;
	color: #333;
	font-size: 1rem;
	line-height: 1.68;
}
.fcc-sw-wl__cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}
.fcc-sw-wl__brochures { margin: 18px 0 0; font-size: 0.9rem; }
.fcc-sw-wl__brochures a {
	color: #ed1c23;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.fcc-sw-wl__brochures a:hover { text-decoration: underline; }

@media (max-width: 900px) {
	.fcc-sw-wl__ratings { grid-template-columns: 1fr; }
	.fcc-sw-wl__build { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
}
@media (max-width: 560px) {
	.fcc-sw-wl__rate { padding: 18px 16px; }
	.fcc-sw-wl__rate-num { font-size: 2.1rem; }
	.fcc-sw-wl__warranty { flex-direction: column; gap: 12px; padding: 20px; }
	.fcc-sw-wl__cta { padding: 22px 18px; }
	.fcc-sw-wl__chips { grid-template-columns: 1fr; }
}


/* =================================================================
 * Safe-Way — HOA callout (v1.10.29 — Phase 2 SEO)
 * ================================================================= */
.fcc-sw-hoa-callout__box {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 18px 22px;
}
.fcc-sw-hoa-callout__icon {
	flex: 0 0 auto;
	color: #ed1c23;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.fcc-sw-hoa-callout__body {
	margin: 0;
	color: #333;
	line-height: 1.65;
	font-size: 1rem;
}
@media (max-width: 560px) {
	.fcc-sw-hoa-callout__box { padding: 16px 18px; gap: 12px; }
}

/* ================= Safe-Way feature icons (v1.10.33) ================= */
.fcc-sw-features .fcc-sw-features__card {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 4px !important;
}
.fcc-sw-features__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 999px !important;
	background: #f5f5f5 !important; /* cream circle background */
	box-shadow: inset 0 0 0 2px rgba(237, 28, 35, 0.15) !important; /* subtle red ring */
	margin: 0 0 10px !important;
}
.fcc-sw-features__icon svg {
	width: 30px !important;
	height: 30px !important;
	stroke: #ed1c23 !important;
	fill: none !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	display: block !important;
}
/* Filled icons (leaf, shield, etc.) can opt into red fill via .is-filled */
.fcc-sw-features__icon svg.is-filled {
	fill: #ed1c23 !important;
	stroke: none !important;
}
@media (max-width: 640px) {
	.fcc-sw-features__icon {
		width: 48px !important;
		height: 48px !important;
	}
	.fcc-sw-features__icon svg {
		width: 24px !important;
		height: 24px !important;
	}
}

/* =========================================================================
   v1.11.0 Phase A — Clopay Best For, Cost Factors, HOA, Install, Cities.
   Uses the .fcc-c-* class namespace so nothing collides with Safe-Way (.fcc-sw-*)
   or Invicta (.fcc-i-*). Style parity with the Safe-Way Phase 2 sections so
   Riley's site reads as one design system across all three brands.
   ========================================================================= */

/* Universal Clopay CTA button styling — matches the Safe-Way v1.10.35 pattern.
   Any .fcc-btn--red or .fcc-btn--outline-dark inside any .fcc-c-* Clopay
   container gets the solid high-contrast treatment (primary solid red +
   secondary solid dark). The attribute selector is safe: Safe-Way uses .fcc-sw-*
   and Invicta uses .fcc-i-*, neither of which contains "fcc-c-". */
.fcc-c-section .fcc-btn--red,
[class*="fcc-c-"] .fcc-btn--red {
	background-color: #ed1c23 !important;
	color: #ffffff !important;
	border: 2px solid #ed1c23 !important;
	box-shadow: 0 2px 6px rgba(237, 28, 35, 0.25) !important;
	font-weight: 700 !important;
	padding: 14px 28px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.fcc-c-section .fcc-btn--red:hover,
[class*="fcc-c-"] .fcc-btn--red:hover {
	background-color: #c81a20 !important;
	border-color: #c81a20 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(237, 28, 35, 0.35) !important;
}
.fcc-c-section .fcc-btn--outline-dark,
[class*="fcc-c-"] .fcc-btn--outline-dark {
	background-color: #1a1a1a !important;
	color: #ffffff !important;
	border: 2px solid #1a1a1a !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20) !important;
	font-weight: 700 !important;
	padding: 14px 26px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.fcc-c-section .fcc-btn--outline-dark:hover,
[class*="fcc-c-"] .fcc-btn--outline-dark:hover {
	background-color: #000000 !important;
	color: #ffffff !important;
	border-color: #000000 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30) !important;
}
.fcc-c-section .fcc-btn--outline-dark svg,
[class*="fcc-c-"] .fcc-btn--outline-dark svg {
	stroke: #ffffff !important;
	color: #ffffff !important;
}
@media (max-width: 640px) {
	[class*="fcc-c-"] .fcc-btn {
		width: 100% !important;
		padding: 14px 20px !important;
		justify-content: center !important;
	}
}
.fcc-c-section { margin: 48px 0; }

/* =========================================================================
   v1.11.2 Phase C — Universal Invicta CTA button styling
   -------------------------------------------------------------------------
   Mirrors the Safe-Way [class*="fcc-sw-"] and Clopay [class*="fcc-c-"] universal
   rules so any .fcc-btn--red or .fcc-btn--outline-dark inside any .fcc-i-*
   Invicta container renders as solid red primary + solid dark secondary,
   regardless of which section it lives in. Previously the Invicta solid
   rule (in class-fcc-invicta-frontend.php inline CSS) was scoped to only
   .fcc-i-cost-factors and .fcc-i-install-section — any new Invicta section
   would render buttons with the up-page white-on-transparent .fcc-btn rule.
   [class*="fcc-i-"] is safe: Safe-Way (.fcc-sw-*) and Clopay (.fcc-c-*) don't
   contain the "fcc-i-" substring. The --white variant on the closing red
   CTA banner uses .fcc-btn--white which is intentionally NOT targeted here.
   ========================================================================= */
[class*="fcc-i-"] .fcc-btn--red {
	background-color: #ed1c23 !important;
	color: #ffffff !important;
	border: 2px solid #ed1c23 !important;
	box-shadow: 0 2px 6px rgba(237, 28, 35, 0.25) !important;
	font-weight: 700 !important;
	padding: 14px 28px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
[class*="fcc-i-"] .fcc-btn--red:hover {
	background-color: #c81a20 !important;
	border-color: #c81a20 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(237, 28, 35, 0.35) !important;
}
[class*="fcc-i-"] .fcc-btn--outline-dark {
	background-color: #1a1a1a !important;
	color: #ffffff !important;
	border: 2px solid #1a1a1a !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20) !important;
	font-weight: 700 !important;
	padding: 14px 26px !important;
	text-decoration: none !important;
	letter-spacing: 0.02em !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
[class*="fcc-i-"] .fcc-btn--outline-dark:hover {
	background-color: #000000 !important;
	color: #ffffff !important;
	border-color: #000000 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30) !important;
}
[class*="fcc-i-"] .fcc-btn--outline-dark svg {
	stroke: #ffffff !important;
	color: #ffffff !important;
}
@media (max-width: 640px) {
	[class*="fcc-i-"] .fcc-btn {
		width: 100% !important;
		padding: 14px 20px !important;
		justify-content: center !important;
	}
}

/* ---------- Best For hero callout ---------- */
.fcc-c-best-for-wrap {
	margin: 8px auto 24px;
}
.fcc-c-best-for {
	background: #f5f5f5;
	border-left: 4px solid #ed1c23;
	border-radius: 8px;
	padding: 14px 18px;
	font-size: 1rem;
	line-height: 1.55;
	color: #222;
}
.fcc-c-best-for__label {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .78rem;
	color: #ed1c23;
	margin-right: 8px;
	display: inline-block;
}
.fcc-c-best-for__body { color: #222; }

/* ---------- Cost Factors ---------- */
.fcc-c-cost-factors > p,
.fcc-c-cost-factors__lead,
.fcc-c-cost-factors .fcc-section__lead {
	text-align: center !important;
	max-width: 720px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 32px !important;
}
.fcc-c-cost-factors__lead {
	color: #333;
	font-size: 1.02rem;
	line-height: 1.7;
}
.fcc-c-cost-factors__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 32px;
}
.fcc-c-cost-factors__card {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 22px 22px 20px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.fcc-c-cost-factors__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.fcc-c-cost-factors__eyebrow {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #ed1c23;
	margin: 0 0 8px;
}
.fcc-c-cost-factors__title {
	font-size: 1.08rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 8px;
	line-height: 1.3;
}
.fcc-c-cost-factors__body {
	margin: 0;
	font-size: .96rem;
	line-height: 1.6;
	color: #444;
}
.fcc-c-cost-factors__cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 4px;
}
@media (max-width: 900px) {
	.fcc-c-cost-factors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.fcc-c-cost-factors__grid { grid-template-columns: 1fr; }
}

/* ---------- HOA callout ---------- */
.fcc-c-hoa-callout__box {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 18px 22px;
}
.fcc-c-hoa-callout__icon {
	flex: 0 0 auto;
	color: #ed1c23;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.fcc-c-hoa-callout__body {
	flex: 1 1 auto;
	color: #333;
	line-height: 1.65;
	font-size: 1rem;
}
.fcc-c-hoa-callout__body p { margin: 0 0 10px; }
.fcc-c-hoa-callout__body p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
	.fcc-c-hoa-callout__box { padding: 16px 18px; gap: 12px; }
}

/* ---------- Install Section ---------- */
.fcc-c-install-section .fcc-section__title {
	text-align: center;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 28px;
}
.fcc-c-install-section__block {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 24px 26px;
	margin: 0 0 22px;
}
.fcc-c-install-section__block:last-of-type { margin-bottom: 22px; }
.fcc-c-install-section__h3 {
	font-size: 1.18rem;
	font-weight: 800;
	color: #111;
	margin: 0 0 12px;
	padding: 0 0 10px;
	border-bottom: 2px solid #ed1c23;
	display: inline-block;
	line-height: 1.3;
}
.fcc-c-install-section__block p {
	margin: 0 0 12px;
	color: #333;
	font-size: 1rem;
	line-height: 1.7;
}
.fcc-c-install-section__block p:last-of-type { margin-bottom: 0; }
.fcc-c-install-section__steps {
	list-style: none;
	padding: 0;
	margin: 8px 0 0;
}
.fcc-c-install-section__step {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 14px 0;
	border-top: 1px solid #e0e0e0;
}
.fcc-c-install-section__step:first-of-type { border-top: none; padding-top: 4px; }
.fcc-c-install-section__num {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #ed1c23;
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1;
}
.fcc-c-install-section__step-body { flex: 1 1 auto; }
.fcc-c-install-section__step-title {
	font-size: 1.04rem;
	font-weight: 800;
	color: #111;
	margin: 4px 0 6px;
	line-height: 1.3;
}
.fcc-c-install-section__step-body p {
	margin: 0;
	color: #444;
	font-size: .97rem;
	line-height: 1.6;
}
.fcc-c-install-section__coverage {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 18px 22px;
	margin: 0 0 24px;
	font-size: .98rem;
	line-height: 1.75;
	color: #333;
}
.fcc-c-install-section__coverage a {
	color: #ed1c23;
	text-decoration: none;
	font-weight: 700;
}
.fcc-c-install-section__coverage a:hover { text-decoration: underline; }
.fcc-c-install-section__cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 4px;
}
@media (max-width: 640px) {
	.fcc-c-install-section__block { padding: 20px 20px; }
	.fcc-c-install-section__step { gap: 14px; padding: 12px 0; }
	.fcc-c-install-section__num { width: 34px; height: 34px; font-size: .98rem; }
	.fcc-c-install-section__coverage { padding: 16px 18px; font-size: .96rem; }
}

/* ---------- Clopay Cities Section wrapper (card CSS is shared — see
   .fcc-city-card block above, v1.11.3). This block just controls the
   section background and intro paragraph — card layout is unified. ---- */
.fcc-c-cities { background: #ffffff; }
.fcc-c-cities .fcc-section__title { margin: 0 0 12px; }
.fcc-c-cities__intro {
	font-size: 1rem;
	line-height: 1.65;
	color: #444;
	max-width: 820px;
	margin: 0 0 24px;
}

/* =========================================================================
   v1.11.8 / v1.11.9 — Clopay single-door breadcrumb spacing fix
   -------------------------------------------------------------------------
   v1.11.6 moved Clopay breadcrumbs out of the hero text column into a
   .fcc-c-single-top strip above the hero — but the shared spacing rules
   stacked ~200px of empty page-bg around it:
     • .fcc-single-door > article > .fcc-contained:first-of-type
       adds margin-top: 100px ABOVE the strip
     • .fcc-hero-split adds another margin-top: 100px BELOW the strip
       (before the hero starts)
   The strip then floated in a visible gap with the page background
   showing through above AND below it, breaking the visual flow into
   the hero. Safe-Way solved this same problem in v1.10.6 with scoped
   .fcc-single-safeway overrides (see lines ~4009-4038). Mirror that
   approach here, scoped strictly to body.single-farnsworth_door so
   nothing leaks into Safe-Way or Invicta pages.

   Structure change in templates/single-farnsworth_door.php (v1.11.8):
   the breadcrumb strip is now wrapped in <section class="fcc-c-crumbs-strip
   fcc-full-bleed"> so the cream background can span the entire viewport
   width, not just the .fcc-contained max-width. That wrapper section is
   what carries the visible cream color; the inner .fcc-contained still
   handles horizontal centering.

   v1.11.9 fix: v1.11.8 dropped the strip's top padding to 20px, which
   pushed the crumb text underneath the sticky site header (~80px tall)
   and hid it. Restore proper header clearance using the CLAUDE.md
   standard: padding-top: 100px desktop / 120px mobile — same values the
   blog posts use on .fgd-page to clear the header. Bottom padding stays
   tight (10px) so the strip and hero still butt flush on the shared
   cream background (v1.11.8's key win — no visual gap between them).

   Result: breadcrumb strip is visible below the sticky header AND
   remains visually flush with the hero on a continuous cream surface.
   ========================================================================= */

/* Full-bleed cream strip that carries the breadcrumbs. Matches the
   hero's --fcc-bg-soft (#f8f8f8) so the strip + hero visually blend
   into one continuous cream surface. Big top padding clears the sticky
   site header (v1.11.9 fix — CLAUDE.md standard 100px desktop / 120px
   mobile). Small bottom padding so it butts flush against the hero. */

/* Kill the shared .fcc-single-door > article > section:first-of-type
   { margin-top: 100px } that would otherwise stack 100px of empty
   page-bg ABOVE the new full-bleed strip. */

/* Kill the .fcc-hero-split { margin-top: 100px } that stacked a
   second empty gap between the crumbs strip and the hero. Together
   with the strip's own zeroed margin-top, the strip and hero now
   touch — no visible page-bg break. */

/* Trim the hero's own top padding a little now that the crumbs strip
   is sitting directly above it providing top visual space. Preserves
   the hero's bottom padding (48px) so the hero still breathes into
   the installer tagline below. */

/* ================================================================
   v1.11.11 — Aluminum full-view (Vista + Horizon) styling
   ---------------------------------------------------------------- */

/* Explanatory notes tucked between finish sub-groups inside the
   Panel Styles & Finish Options section. `--note` is the descriptive
   paragraph under the Anodize / Powder Coat subheads; `--subnote` is
   the smaller in-stock / special-order divider line. Reuses cream +
   red palette from the rest of the Safe-Way renderer. */
.fcc-sw-panels__note {
	max-width: 780px;
	margin: 0 auto 20px;
	color: #4b4a48;
	font-size: 0.98rem;
	line-height: 1.55;
	text-align: center;
}
.fcc-sw-panels__subnote {
	margin: 22px 0 12px;
	color: #1a1a1a;
	font-size: 0.98rem;
	text-align: center;
}
.fcc-sw-panels__subnote strong {
	color: #ed1c23;
}

/* Full Specifications section (from the aluminum spec-sheet PDFs).
   Card grid up top for individual key facts, then the panel-configurations
   list and the warranty summary. Cream background matches the rest of
   the Safe-Way palette; no black backgrounds anywhere. */
.fcc-sw-spec {
	background: #f5f5f5;
}
.fcc-sw-spec__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
	margin: 24px auto 32px;
	max-width: 1080px;
}
.fcc-sw-spec__card {
	background: #ffffff;
	border: 1px solid #dcdcdc;
	border-left: 4px solid #ed1c23;
	border-radius: 6px;
	padding: 16px 18px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.fcc-sw-spec__label {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #ed1c23;
	font-weight: 700;
	margin-bottom: 6px;
}
.fcc-sw-spec__value {
	font-size: 0.96rem;
	line-height: 1.45;
	color: #1a1a1a;
}

.fcc-sw-spec__panels {
	max-width: 720px;
	margin: 0 auto 32px;
	background: #ffffff;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	overflow: hidden;
}
.fcc-sw-spec__panel-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 18px;
	border-bottom: 1px solid #e8e8e8;
	font-size: 0.98rem;
}
.fcc-sw-spec__panel-row:last-child { border-bottom: 0; }
.fcc-sw-spec__panel-width { color: #1a1a1a; }
.fcc-sw-spec__panel-count {
	color: #ed1c23;
	font-weight: 700;
}

.fcc-sw-spec__warranty {
	max-width: 720px;
	margin: 0 auto 24px;
	background: #ffffff;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	padding: 18px 22px;
}
.fcc-sw-spec__warranty-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid #e8e8e8;
	font-size: 0.98rem;
}
.fcc-sw-spec__warranty-row:last-of-type { border-bottom: 0; }
.fcc-sw-spec__warranty-label { color: #1a1a1a; font-weight: 600; }
.fcc-sw-spec__warranty-value { color: #ed1c23; font-weight: 700; }
.fcc-sw-spec__warranty-notes {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid #e8e8e8;
	color: #6b6864;
	font-size: 0.9rem;
	font-style: italic;
	text-align: center;
}
.fcc-sw-spec__glass-notes {
	max-width: 780px;
	margin: 24px auto 0;
	padding: 14px 18px;
	background: #ffffff;
	border-left: 4px solid #ed1c23;
	border-radius: 4px;
	color: #1a1a1a;
	font-size: 0.95rem;
	line-height: 1.55;
	text-align: left;
}

@media (max-width: 640px) {
	.fcc-sw-spec__grid { grid-template-columns: 1fr; }
	.fcc-sw-spec__panel-row {
		flex-direction: column;
		gap: 4px;
		align-items: flex-start;
	}
}

/* ================================================================
   v1.11.12 — Lazy-load placeholder frame fix (Safe-Way hero)
   ----------------------------------------------------------------
   LiteSpeed Cache (and A3 Lazy Load / WP Rocket) intercepts the
   hero <img>, swaps src with a data:image/svg+xml placeholder that
   contains a rect filled #cfd4db at 10% opacity. Because the img
   still has our v1.10.27 border-radius:12px + box-shadow, that
   grey wash renders as a visible rounded rectangle frame that
   reads exactly like the OLD container we killed.

   Primary fix: render-time attributes on the img in
   FCC_Safeway_Renderer::hero() (loading=eager, fetchpriority=high,
   class=no-lazy, data-no-lazy=1) opt the hero out of every
   common lazy loader. This CSS is a defensive fallback in case
   the plugin's HTML is rewritten server-side by an ESI/optimizer
   pipeline before our attributes take effect.

   While the img still holds a data:image/svg placeholder src, we
   drop its box-shadow + border-radius + visibility so no framing
   is visible. The moment the lazy loader swaps src to the real
   URL, the [src^="data:"] selector stops matching and the img
   re-inherits v1.10.27's rounded corners + soft shadow. */

.fcc-hero-split.fcc-sw-hero .fcc-hero-split__media img[src^="data:image/svg"],
.fcc-sw-hero .fcc-hero-split__media img[src^="data:image/svg"] {
	box-shadow: none !important;
	border-radius: 0 !important;
	visibility: hidden !important;
}


/* v1.15.0: Safe-Way hub filter pills — same design as Amarr hub. */
#fcc-safeway-hub .fcc-overview__filters {
	background: #f7f7f7 !important;
	border: 1px solid #e6e6e6 !important;
	border-radius: 8px !important;
	padding: 20px 22px !important;
}
#fcc-safeway-hub .fcc-overview__filters .fcc-filter-group {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	align-items: center !important;
}
#fcc-safeway-hub .fcc-overview__filters .fcc-filter-label {
	font-weight: 700 !important;
	color: #1a1a1a !important;
	font-size: 0.85rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	margin-right: 6px !important;
}
#fcc-safeway-hub .fcc-overview__filters .fcc-filter-btn,
#fcc-safeway-hub .fcc-overview__filters .fcc-filter-btn:link,
#fcc-safeway-hub .fcc-overview__filters .fcc-filter-btn:visited {
	display: inline-block !important;
	background: #fff !important;
	color: #1a1a1a !important;
	border: 1px solid #e6e6e6 !important;
	border-radius: 999px !important;
	padding: 6px 16px !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	font-family: inherit !important;
	text-decoration: none !important;
	transition: border-color .15s ease, background .15s ease, color .15s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
}
#fcc-safeway-hub .fcc-overview__filters .fcc-filter-btn:hover {
	border-color: #ed1c23 !important;
	color: #ed1c23 !important;
	background: #fff !important;
}
#fcc-safeway-hub .fcc-overview__filters .fcc-filter-btn.is-active,
#fcc-safeway-hub .fcc-overview__filters .fcc-filter-btn.is-active:hover {
	background: #ed1c23 !important;
	border-color: #ed1c23 !important;
	color: #fff !important;
}


/* =========================================================================
   v1.16.8 — Kill the theme's pink image-hover highlight (Safe-Way scope)
   -------------------------------------------------------------------------
   Diagnosed live on staging (Chrome DevTools, hovering a Panel Styles chip).
   Culprit is the Hello Elementor theme's global button reset:

       [type="button"]:focus, [type="button"]:hover,
       [type="submit"]:focus, [type="submit"]:hover,
       button:focus, button:hover { background-color: #cc3366; color: #fff; }

   #cc3366 is the pink Riley reported. It never appeared before v1.16.1
   because the Safe-Way image chips were plain <div>s; v1.16.1 turned them
   into <button>s so they could open the click-to-zoom lightbox, which pulled
   the theme's button hover styling along with them. Our chip background
   (.fcc-sw-swatch__chip { background:#fff }) was not !important, so the
   theme's later rule won on hover/focus.

   Fix: re-assert the chip chrome with !important in every state. Everything
   below is namespaced to .fcc-sw-swatch__zoom (the class the Safe-Way
   renderer puts on EVERY clickable image chip: panel/window/hardware/colour
   swatches, construction figures, and the colour-card house + swatch) plus
   the Safe-Way page wrappers — no other brand, no Elementor widget, and no
   theme control is affected. The Real Installs gallery buttons, the lightbox
   close/nav buttons and the Single/Double toggle already carry !important
   backgrounds of their own, so they were never affected and are left alone. */
button.fcc-sw-swatch__zoom,
button.fcc-sw-swatch__zoom:link,
button.fcc-sw-swatch__zoom:visited,
button.fcc-sw-swatch__zoom:hover,
button.fcc-sw-swatch__zoom:focus,
button.fcc-sw-swatch__zoom:focus-visible,
button.fcc-sw-swatch__zoom:active,
#fcc-safeway-single button.fcc-sw-swatch__zoom:hover,
#fcc-safeway-single button.fcc-sw-swatch__zoom:focus,
#fcc-safeway-single button.fcc-sw-swatch__zoom:active,
#fcc-safeway-hub button.fcc-sw-swatch__zoom:hover,
#fcc-safeway-hub button.fcc-sw-swatch__zoom:focus,
#fcc-safeway-hub button.fcc-sw-swatch__zoom:active {
	background-color: #ffffff !important;
	background-image: none !important;
	color: inherit !important;
	border-color: transparent !important;
	filter: none !important;
	-webkit-filter: none !important;
	mix-blend-mode: normal !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
	text-decoration: none !important;
}
/* v1.22.0 (Riley): construction figures sit on WHITE, not the light-grey plate.
   Every Safe-Way construction diagram is white-background line art, so a grey
   chip behind it always read as a rendering bug. Needs !important + every state
   because Hello Elementor's base `button { background-color }` otherwise wins —
   the same specificity trap behind the v1.16.8 pink image hover. */
button.fcc-sw-construction__figure-zoom,
button.fcc-sw-construction__figure-zoom:hover,
button.fcc-sw-construction__figure-zoom:focus,
button.fcc-sw-construction__figure-zoom:focus-visible,
button.fcc-sw-construction__figure-zoom:active {
	background-color: #ffffff !important;
	background-image: none !important;
}
/* Colour-card house + chip keep their own light plate. */
button.fcc-sw-colorcard__house,
button.fcc-sw-colorcard__house:hover,
button.fcc-sw-colorcard__house:focus,
button.fcc-sw-colorcard__house:active,
button.fcc-sw-colorcard__chip,
button.fcc-sw-colorcard__chip:hover,
button.fcc-sw-colorcard__chip:focus,
button.fcc-sw-colorcard__chip:active {
	background-color: #f7f7f7 !important;
	background-image: none !important;
}
/* Never tint the photo itself, in any state. */
button.fcc-sw-swatch__zoom img,
button.fcc-sw-swatch__zoom:hover img,
button.fcc-sw-swatch__zoom:focus img,
button.fcc-sw-swatch__zoom:active img,
#fcc-safeway-single a:hover img,
#fcc-safeway-hub a:hover img {
	background-color: transparent !important;
	filter: none !important;
	-webkit-filter: none !important;
	mix-blend-mode: normal !important;
	opacity: 1 !important;
}
/* Neutralise any ::before/::after tint overlay a theme or plugin might paint. */
button.fcc-sw-swatch__zoom::before,
button.fcc-sw-swatch__zoom::after,
button.fcc-sw-swatch__zoom:hover::before,
button.fcc-sw-swatch__zoom:hover::after {
	background: none !important;
	background-color: transparent !important;
	content: none !important;
}
/* On-brand replacement hover: gentle lift + deeper shadow + thin red ring,
   matching the existing .fcc-sw-colorcard / .fcc-gallery__item card language. */
.fcc-sw-swatch {
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.fcc-sw-swatch:has(button.fcc-sw-swatch__zoom:hover),
.fcc-sw-swatch:has(button.fcc-sw-swatch__zoom:focus-visible) {
	border-color: #ed1c23;
	box-shadow: 0 6px 18px rgba(0,0,0,0.10);
	transform: translateY(-2px);
}
button.fcc-sw-swatch__zoom {
	transition: box-shadow .18s ease, transform .18s ease;
	outline-color: #ed1c23;
}
button.fcc-sw-swatch__zoom:focus-visible {
	outline: 2px solid #ed1c23 !important;
	outline-offset: 2px;
}

/* ===================================================================
 * v1.19.0 — Aristocrat "Door & Window Selections" matrix
 * Mirrors Safe-Way's printed selection grid: one block per design
 * series, one row per design, window treatments across. Only the
 * Aristocrat collections carry the data, so these rules are inert
 * everywhere else.
 * =================================================================== */
.fcc-sw-dwmatrix__size {
	max-width: 900px;
	margin: 0 auto 26px;
	text-align: center;
	font-size: 0.95rem;
	color: #555;
}
.fcc-sw-dwseries { margin: 0 0 34px; }
.fcc-sw-dwseries__head {
	font-size: 1.15rem;
	margin: 0 0 14px;
	padding: 9px 16px;
	background: #2f2f2f;
	color: #fff;
	border-radius: 6px;
	border-left: 5px solid #ed1c23;
}
.fcc-sw-dwrow {
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 14px 16px 6px;
	margin: 0 0 14px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.fcc-sw-dwrow__label {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 12px;
}
.fcc-sw-dwrow__code {
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.02em;
	color: #1a1a1a;
}
.fcc-sw-dwrow__nowin {
	font-size: 0.83rem;
	color: #8a5a00;
	background: #fff6e5;
	border: 1px solid #f0dcb4;
	border-radius: 999px;
	padding: 2px 10px;
}
.fcc-sw-dwrow__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}
.fcc-sw-dwcell { margin: 0 0 12px; text-align: center; }
.fcc-sw-dwcell__btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid #e8e8e8;
	border-radius: 6px;
	background: #fff !important;
	cursor: zoom-in;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fcc-sw-dwcell__btn:hover,
.fcc-sw-dwcell__btn:focus-visible {
	border-color: #ed1c23;
	box-shadow: 0 2px 8px rgba(0,0,0,0.10);
	background: #fff !important;
}
.fcc-sw-dwcell__btn img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
.fcc-sw-dwcell__cap { display: block; margin-top: 6px; line-height: 1.3; }
.fcc-sw-dwcell__code {
	display: block;
	font-weight: 600;
	font-size: 0.87rem;
	color: #1a1a1a;
}
.fcc-sw-dwcell__win {
	display: block;
	font-size: 0.79rem;
	color: #666;
}
.fcc-sw-dwnotes {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 18px 22px;
	margin-top: 6px;
}
.fcc-sw-dwnotes__list { margin: 0; padding-left: 20px; }
.fcc-sw-dwnotes__list li { margin: 0 0 6px; font-size: 0.92rem; color: #444; }

/* --- Presidential Premium (Presidential only) --- */
.fcc-sw-prespremium__grid {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.1fr);
	gap: 28px;
	align-items: center;
}
.fcc-sw-prespremium__fig { margin: 0; }
.fcc-sw-prespremium__fig img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	background: #fff;
}
.fcc-sw-prespremium__fig figcaption {
	font-size: 0.82rem;
	color: #666;
	margin-top: 8px;
	text-align: center;
}
.fcc-sw-prespremium__list { margin: 0; padding-left: 20px; }
.fcc-sw-prespremium__list li { margin: 0 0 10px; font-size: 1rem; color: #333; }
.fcc-sw-prespremium__paint {
	margin: 22px auto 0;
	max-width: 900px;
	background: #fff6e5;
	border: 1px solid #f0dcb4;
	border-left: 4px solid #d99a00;
	border-radius: 6px;
	padding: 14px 18px;
	font-size: 0.92rem;
	color: #5a4300;
}

@media (max-width: 767px) {
	.fcc-sw-dwseries__head { font-size: 1.02rem; padding: 8px 12px; }
	.fcc-sw-dwrow { padding: 12px 12px 4px; }
	.fcc-sw-dwrow__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.fcc-sw-dwnotes { padding: 14px 16px; }
	.fcc-sw-prespremium__grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ===================================================================
 * v1.19.2 — Overlay Color, its own section (Aristocrat only)
 * The base door comes in eleven finishes; the applied overlay boards
 * are always white. Separate decision, separate section — it used to
 * sit as a twelfth chip inside Color Options and read as a door color.
 * =================================================================== */
.fcc-sw-overlay__card {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	max-width: 780px;
	margin: 6px auto 0;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-left: 4px solid #ed1c23;
	border-radius: 8px;
	padding: 22px 26px;
}
.fcc-sw-overlay__chip { flex: 0 0 auto; text-align: center; }
.fcc-sw-overlay__chip img {
	display: block;
	width: 120px;
	height: 120px;
	object-fit: cover;
	border: 1px solid #cfcfcf;
	border-radius: 6px;
	background: #fff;
}
.fcc-sw-overlay__name {
	display: block;
	margin-top: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	color: #1a1a1a;
}
.fcc-sw-overlay__note {
	flex: 1 1 300px;
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.55;
	color: #444;
}

@media (max-width: 767px) {
	.fcc-sw-overlay__card { gap: 16px; padding: 18px; justify-content: center; text-align: center; }
	.fcc-sw-overlay__note { flex-basis: 100%; text-align: left; }
}

/* ===================================================================
 * v1.20.0 — Construction diagram callout key
 * The brochure diagrams print numbered/lettered markers ON the artwork
 * with a matching explanation beside them. We ship both now, so the
 * marker badge in the list visually matches the marker in the picture.
 * Figures WITHOUT a legend keep the old stacked layout untouched.
 * =================================================================== */
.fcc-sw-construction__figures { grid-auto-flow: dense; }
.fcc-sw-construction__figure--keyed {
	/* v1.20.1: full content width. The diagram gets the larger share (it's the
	   thing being explained) and the key sits beside it with room to read. */
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(300px, 1.35fr) minmax(300px, 1fr);
	gap: 34px;
	align-items: center;
	background: #fff;
	border: 1px solid #e4e4e4;
	border-radius: 10px;
	padding: 30px 34px;
}
/* v1.21.2 (Riley): white behind the keyed diagram. As of v1.22.0 the white is
   the plugin-wide default for construction figures (see the button override
   above), so all this rule still owns is the padding reset. */
.fcc-sw-construction__figure--keyed .fcc-sw-construction__figure-zoom {
	padding: 0;
}
.fcc-sw-construction__figure--keyed img {
	width: 100%;
	height: auto;
}
.fcc-sw-construction__figure--keyed .fcc-sw-construction__figure-caption {
	grid-column: 1 / -1;
	margin-top: 4px;
}
.fcc-sw-constrkey {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}
.fcc-sw-constrkey__item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0 0 12px;
	line-height: 1.45;
}
.fcc-sw-constrkey__item:last-child { margin-bottom: 0; }
.fcc-sw-constrkey__marker {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 25px;
	height: 25px;
	padding: 0 5px;
	background: #fff;
	color: #1a1a1a;
	border: 2px solid #1a1a1a;
	border-radius: 3px;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
}
.fcc-sw-constrkey__text {
	font-size: 1rem;
	color: #333;
}

@media (max-width: 767px) {
	.fcc-sw-construction__figure--keyed {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 18px;
	}
	.fcc-sw-constrkey__text { font-size: 0.92rem; }
}