/**
 * Feltech widgets.
 *
 * Design tokens (--ft-*) come from the child theme; fallbacks keep the
 * widgets usable without it. Mobile breakpoint matches Elementor's tablet
 * breakpoint (1024px).
 */

/* Shared ---------------------------------------------------------------- */

.ft-icon {
	display: block;
	width: var(--ft-icon-size, 22px);
	height: var(--ft-icon-size, 22px);
}

.ft-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	margin: -6px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ft-text, #000);
	cursor: pointer;
	line-height: 1;
}

.ft-icon-btn:hover,
.ft-icon-btn:focus-visible,
.ft-icon-btn[aria-expanded="true"] {
	background: none;
	color: var(--ft-red, #d12e37);
}

.ft-icon-btn:focus-visible,
.ft-submenu-toggle:focus-visible {
	outline: 2px solid var(--ft-red, #d12e37);
	outline-offset: 2px;
}

.ft-popover {
	position: absolute;
	z-index: 100;
	top: calc(100% + 16px);
	right: 0;
	display: none;
	margin: 0;
	padding: 0;
	background: #fff;
	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.ft-popover.is-open {
	display: block;
}

.ft-editor-notice {
	padding: 8px 12px;
	border: 1px dashed currentColor;
	font-size: 13px;
	opacity: 0.7;
}

.ft-scroll-locked {
	overflow: hidden;
}

/* W1 Nav Menu ------------------------------------------------------------ */

.ft-nav__list {
	display: flex;
	align-items: center;
	gap: var(--ft-nav-gap, 36px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-nav__list>li {
	position: relative;
}

.ft-nav__list a {
	display: block;
	color: var(--ft-text, #000);
	font-size: var(--ft-nav-size, 24px);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.ft-nav__list a:hover,
.ft-nav__list a:focus-visible,
.ft-nav__list .current-menu-item>a,
.ft-nav__list .current-menu-ancestor>a {
	color: var(--ft-red, #d12e37);
}

/* Desktop dropdowns (only rendered when the widget's depth allows it). */
.ft-nav__list .sub-menu {
	position: absolute;
	z-index: 100;
	top: 100%;
	left: -20px;
	display: none;
	min-width: 240px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
	background: #fff;
	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.ft-nav__list li:hover>.sub-menu,
.ft-nav__list li:focus-within>.sub-menu {
	display: block;
}

.ft-nav__list .sub-menu a {
	padding: 8px 20px;
	font-size: 16px;
	font-weight: 500;
}

.ft-nav__toggle {
	display: none;
}

.ft-nav__panel {
	display: none;
}

@media (max-width: 1024px) {
	.ft-nav__list {
		display: none;
	}

	.ft-nav__toggle {
		display: inline-flex;
	}

	.ft-nav__panel {
		position: fixed;
		z-index: 9999;
		inset: 0;
		display: block;
		overflow-y: auto;
		padding: 72px var(--ft-gutter, 20px) 40px;
		background: #fff;
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.ft-nav__panel.is-open {
		visibility: visible;
		transform: none;
		transition: transform 0.25s ease;
	}

	.admin-bar .ft-nav__panel {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

@media (prefers-reduced-motion: reduce) {

	.ft-nav__panel,
	.ft-nav__panel.is-open {
		transition: none;
	}
}

/* JS moves the close button onto the menu button's spot and copies the
 * header's logo into the same place (placePanelChrome()). */
.ft-nav__close {
	position: absolute;
	top: 20px;
	right: var(--ft-gutter, 20px);
}

.ft-nav__logo {
	position: absolute;
	display: block;
}

.ft-nav__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.ft-nav__mobile-list,
.ft-nav__mobile-list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-nav__mobile-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ft-nav__mobile-list a {
	flex: 1;
	padding: 12px 0;
	color: var(--ft-text, #000);
	text-decoration: none;
}

.ft-nav__mobile-list>li {
	border-bottom: 1px solid var(--ft-grey-bar, #d9d9d9);
}

.ft-nav__mobile-list>li>a {
	font-size: 22px;
	font-weight: 700;
}

.ft-nav__mobile-list .sub-menu {
	flex-basis: 100%;
	padding: 0 0 12px 16px;
}

.ft-nav__mobile-list .sub-menu a {
	padding: 8px 0;
	font-size: 17px;
}

.ft-nav__mobile-list .sub-menu .menu-item-has-children>a {
	font-weight: 700;
}

.ft-js .ft-nav__mobile-list .sub-menu:not(.is-open) {
	display: none;
}

.ft-submenu-toggle {
	display: inline-flex;
	padding: 10px;
	border: 0;
	background: none;
	color: var(--ft-text, #000);
	cursor: pointer;
}

.ft-submenu-toggle:hover,
.ft-submenu-toggle:focus {
	background: none;
	color: var(--ft-red, #d12e37);
}

.ft-submenu-toggle .ft-icon {
	transition: transform 0.2s ease;
}

.ft-submenu-toggle[aria-expanded="true"] .ft-icon {
	transform: rotate(180deg);
}

/* W2 Search Toggle ------------------------------------------------------- */

.ft-search,
.ft-lang {
	position: relative;
	display: inline-flex;
}

.ft-search__panel {
	width: min(360px, calc(100vw - 2 * var(--ft-gutter, 20px)));
	padding: 12px;
}

.ft-search__form {
	display: flex;
	gap: 8px;
}

.ft-search__input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--ft-grey-bar, #d9d9d9);
	border-radius: 0;
	font: inherit;
	font-size: 16px;
}

.ft-search__input:focus {
	border-color: var(--ft-text, #000);
	outline: none;
}

.ft-search__submit {
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: var(--ft-text, #000);
	color: #fff;
	cursor: pointer;
	--ft-icon-size: 20px;
}

.ft-search__submit:hover,
.ft-search__submit:focus-visible {
	background: var(--ft-red, #d12e37);
	color: #fff;
}

/* W3 Language Switcher --------------------------------------------------- */

.ft-lang__list {
	min-width: 160px;
	padding: 8px 0;
	list-style: none;
}

.ft-lang__link {
	display: block;
	padding: 8px 20px;
	color: var(--ft-text, #000);
	font-size: 16px;
	text-decoration: none;
}

.ft-lang__link:hover,
.ft-lang__link:focus-visible {
	color: var(--ft-red, #d12e37);
}

.ft-lang__link[aria-current="true"] {
	font-weight: 700;
}

/* W4 Menu Links ---------------------------------------------------------- */

.ft-links__title {
	margin: 0;
	color: var(--ft-text, #000);
	font-size: var(--ft-footer-title-size, 28px);
	font-weight: 700;
	line-height: 1.25;
}

.ft-links__title a {
	color: inherit;
	text-decoration: none;
}

.ft-links__title a:hover,
.ft-links__title a:focus-visible {
	color: var(--ft-red, #d12e37);
}

.ft-links__head+.ft-links__nav {
	margin-top: 12px;
}

.ft-links__list,
.ft-links__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-links__list a {
	color: var(--ft-text, #000);
	font-size: var(--ft-footer-link-size, 18px);
	line-height: var(--ft-footer-link-line, 26px);
	text-decoration: none;
}

.ft-links__list a:hover,
.ft-links__list a:focus-visible {
	color: var(--ft-red, #d12e37);
}

.ft-links--bold-top .ft-links__list>li>a,
.ft-links__list>.menu-item-has-children>a {
	font-weight: 700;
}

.ft-links__list>.menu-item-has-children>a {
	font-size: var(--ft-footer-group-size, 20px);
}

/* Padding, not margin: margins are dropped at the top of each column. */
.ft-links__list>.menu-item-has-children {
	padding-top: 26px;
}

.ft-links__list>.menu-item-has-children:first-child {
	padding-top: 0;
}

.ft-links--cols-2 .ft-links__list {
	columns: 2;
	column-gap: var(--ft-footer-col-gap, 32px);
}

.ft-links--cols-2 .ft-links__list>li {
	break-inside: avoid;
}

.ft-links--cols-2 .ft-links__list>li:not(.menu-item-has-children) {
	column-span: all;
}

.ft-links__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ft-links__toggle {
	display: none;
	margin: -10px -10px -10px 0;
}

@media (max-width: 767px) {
	.ft-links--cols-2 .ft-links__list {
		columns: 1;
	}

	/* Phones: titled lists fold behind the chevron (open with JS only). */
	.ft-js .ft-links__toggle {
		display: inline-flex;
	}

	.ft-js .ft-links--collapsible .ft-links__nav:not(.is-open) {
		display: none;
	}

	/* A title without its own link opens the list too. */
	.ft-js .ft-links__head--plain .ft-links__toggle::after {
		content: "";
		position: absolute;
		inset: 0;
	}
}

/* Shared heading with the red underline (W5, W9, W10) -------------------- */

.ft-heading {
	margin: 0;
	color: var(--ft-text, #000);
	font-family: inherit;
	font-weight: 700;
	line-height: 1.2;
}

.ft-heading--display {
	font-size: clamp(32px, 4.23vw, 64px);
}

.ft-heading--large {
	font-size: clamp(30px, 3.17vw, 48px);
}

.ft-heading--section {
	font-size: clamp(28px, 2.65vw, 40px);
}

.ft-heading--small {
	font-size: var(--ft-footer-title-size, 28px);
}

.ft-heading__text {
	display: inline-block;
}

.ft-heading--underline .ft-heading__text {
	padding-bottom: 0.2em;
	border-bottom: 3px solid var(--ft-red, #d12e37);
}

/* Round arrow buttons (W8; reused by carousels). */
.ft-arrow {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 3px solid #d9d9d9;
	border-radius: 50%;
	background: #fff;
	color: var(--ft-text, #000);
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.ft-arrow .ft-icon {
	width: 26px;
	height: 26px;
	stroke-width: 3;
}

.ft-arrow--sm {
	width: 40px;
	height: 40px;
	border-width: 2px;
}

.ft-arrow--sm .ft-icon {
	width: 18px;
	height: 18px;
}

.ft-arrow:hover,
.ft-arrow:focus-visible {
	border-color: var(--ft-red, #d12e37);
	background: #fff;
	color: var(--ft-red, #d12e37);
}

.ft-arrow:focus-visible,
.ft-gallery__tab:focus-visible,
.ft-swatch:focus-visible,
.ft-gallery__panel:focus-visible {
	outline: 2px solid var(--ft-red, #d12e37);
	outline-offset: 3px;
}

/* W5 Section Title ------------------------------------------------------- */

.ft-section-title--center {
	text-align: center;
}

.ft-section-title__subtitle {
	margin: 15px 0 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
}

.ft-section-title__text {
	max-width: 640px;
	margin-top: 26px;
	font-size: 20px;
	line-height: 1.3;
}

.ft-section-title--center .ft-section-title__text {
	margin-right: auto;
	margin-left: auto;
}

.ft-section-title__text p {
	margin: 0 0 0.8em;
}

.ft-section-title__text p:last-child {
	margin-bottom: 0;
}

/* W6 Post Hero ----------------------------------------------------------- */

/* Image selectors are qualified to beat Elementor's `.elementor img { height: auto }`. */

.ft-hero {
	overflow: hidden;
	height: 50vw;
	background: #eee;
}

.ft-hero .ft-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ft-hero.ft-hero--natural {
	height: auto;
	background: none;
}

.ft-hero.ft-hero--natural .ft-hero__image {
	height: auto;
}

/* Default heights; a widget's own Height setting overrides them. */
@media (max-width: 1024px) {
	.ft-hero {
		height: 56vw;
	}
}

@media (max-width: 767px) {
	.ft-hero {
		height: 75vw;
	}
}

/* W8 Product Gallery ----------------------------------------------------- */

.ft-gallery [hidden] {
	display: none !important;
}

.ft-gallery__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 45px;
	margin: 0 0 44px;
}

.ft-gallery__tab {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 42px;
	margin: 0;
	padding: 0 0 6px;
	border: 0;
	border-bottom: 3px solid var(--ft-red, #d12e37);
	border-radius: 0;
	background: none;
	color: #777;
	font-family: inherit;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.ft-gallery__tab:hover,
.ft-gallery__tab:focus,
.ft-gallery__tab[aria-selected="true"],
.ft-gallery__tab.is-static {
	background: none;
	color: var(--ft-text, #000);
}

.ft-gallery__tab.is-static {
	cursor: default;
}

.ft-gallery__tab-value {
	font-size: clamp(34px, 2.91vw, 44px);
}

.ft-gallery__tab-unit {
	margin-top: 6px;
	font-size: 20px;
}

.ft-gallery__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 30px;
}

/* Few swatches: viewer centred, swatches beside it (Ecoface). */
.ft-gallery__panel--compact {
	grid-template-columns: minmax(0, 1fr) minmax(0, 48.9%) minmax(0, 1fr);
}

.ft-gallery__panel--compact .ft-gallery__viewer {
	grid-column: 2;
}

.ft-gallery__viewer {
	position: relative;
	aspect-ratio: 671 / 504;
	background: #f3f3f3;
}

.ft-gallery__slide {
	position: absolute;
	inset: 0;
	margin: 0;
}

.ft-gallery__slide .ft-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ft-gallery__arrows {
	position: absolute;
	right: 36px;
	bottom: 40px;
	display: flex;
	gap: 24px;
}

.ft-gallery__swatches {
	position: relative;
}

/* Sits above the grid, level with the thickness tabs. */
.ft-gallery__pager {
	position: absolute;
	right: 0;
	bottom: calc(100% + 29px);
	display: flex;
	gap: 8px;
}

.ft-gallery__swatch-page {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 30px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-gallery__panel--compact .ft-gallery__swatch-page {
	grid-template-columns: repeat(2, minmax(0, 115px));
}

.ft-swatch {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #f3f3f3;
	cursor: pointer;
}

.ft-swatch .ft-swatch__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 115 / 105;
	object-fit: cover;
	transition: opacity 0.15s;
}

.ft-swatch:hover .ft-swatch__image {
	opacity: 0.85;
}

/* Extra class: the theme's button:focus:not(:focus-visible) rule removes the
 * outline from the swatch that was just clicked. */
.ft-gallery .ft-swatch[aria-pressed="true"] {
	outline: 3px solid var(--ft-red, #d12e37);
	outline-offset: 3px;
}

@media (max-width: 1024px) {

	.ft-gallery__panel,
	.ft-gallery__panel--compact {
		grid-template-columns: minmax(0, 1fr);
	}

	.ft-gallery__panel--compact .ft-gallery__viewer {
		grid-column: auto;
	}

	.ft-gallery__pager {
		position: static;
		justify-content: flex-end;
		margin-bottom: 16px;
	}

	.ft-gallery__panel--compact .ft-gallery__swatch-page {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ft-gallery__tabs {
		gap: 12px 28px;
		margin-bottom: 28px;
	}

	.ft-gallery__arrows {
		right: 16px;
		bottom: 16px;
		gap: 12px;
	}

	.ft-gallery__arrows .ft-arrow {
		width: 44px;
		height: 44px;
	}

	.ft-gallery__swatch-page,
	.ft-gallery__panel--compact .ft-gallery__swatch-page {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
	}
}

/* W9 Details List: table style ---------------------------------------------------------- */

.ft-specs .ft-heading,
.ft-downloads .ft-heading {
	margin-bottom: 26px;
}

.ft-specs__list {
	display: grid;
	grid-template-columns: minmax(206px, max-content) minmax(0, 1fr);
	gap: 0 16px;
	margin: 0;
	font-size: 20px;
	line-height: 30px;
}

.ft-specs__row {
	display: contents;
}

.ft-specs__label {
	font-weight: 700;
}

/* The design sets "Label :" with a spaced colon. */
.ft-specs__label::after {
	content: " :";
}

.ft-specs__value {
	margin: 0;
}

@media (max-width: 767px) {
	.ft-specs__list {
		grid-template-columns: minmax(0, 1fr);
		font-size: 18px;
		line-height: 26px;
	}

	.ft-specs__value {
		margin-bottom: 10px;
	}
}

/* W10 Download List ------------------------------------------------------ */

.ft-downloads__list {
	display: grid;
	gap: 38px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 20px;
	line-height: 30px;
}

.ft-downloads__link {
	color: var(--ft-text, #000);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ft-downloads__link:hover,
.ft-downloads__link:focus-visible {
	color: var(--ft-red, #d12e37);
	text-decoration: underline;
}

.ft-downloads__meta {
	margin-left: 8px;
	color: #777;
	font-size: 16px;
}

@media (max-width: 767px) {
	.ft-downloads__list {
		gap: 16px;
		font-size: 18px;
	}
}

/* W7 Post Cards ---------------------------------------------------------- */

.ft-cards {
	--ft-cols: 3;
	--ft-gap: 30px;
	--ft-card-ratio: 437 / 301;
	position: relative;
}

.ft-cards--grid .ft-cards__track {
	display: grid;
	grid-template-columns: repeat(var(--ft-cols), minmax(0, 1fr));
	gap: 100px var(--ft-gap);
}

.ft-card {
	min-width: 0;
}

.ft-card__link {
	display: block;
	color: var(--ft-text, #000);
	text-decoration: none;
}

.ft-card__link:hover,
.ft-card__link:focus-visible {
	color: var(--ft-text, #000);
}

.ft-card__link:focus-visible {
	outline: 2px solid var(--ft-red, #d12e37);
	outline-offset: 4px;
}

.ft-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--ft-card-ratio);
	background: #eee;
}

.ft-card__media .ft-card__image,
.ft-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.ft-card__link:hover .ft-card__image {
	transform: scale(1.03);
}

.ft-card__body {
	padding-top: 24px;
}

.ft-card__title {
	margin: 0 0 4px;
	color: inherit;
	font-family: inherit;
	font-size: clamp(22px, 1.85vw, 28px);
	font-weight: 700;
	line-height: 1.2;
}

.ft-card__link:hover .ft-card__title {
	color: var(--ft-red, #d12e37);
}

.ft-card__text,
.ft-card__meta {
	margin: 0;
	font-size: 20px;
	line-height: 26px;
}

/* Highlight: a full-width card with a centred section title. */
.ft-card--highlight {
	grid-column: 1 / -1;
	margin-block: 0 20px;
}

.ft-card--highlight .ft-card__media {
	aspect-ratio: 1372 / 773;
}

.ft-card--highlight .ft-card__body {
	max-width: 760px;
	margin: 0 auto;
	padding-top: 44px;
	text-align: center;
}

.ft-card--highlight .ft-heading {
	margin-bottom: 18px;
}

.ft-card--highlight .ft-card__link:hover .ft-heading {
	color: var(--ft-red, #d12e37);
}

.ft-card--highlight .ft-card__text {
	font-weight: inherit;
}

/* Overlay: title and text centred near the bottom of the image. */
.ft-cards--overlay .ft-cards__track {
	display: grid;
	gap: 60px;
}

.ft-card--overlay {
	position: relative;
	height: 756px;
}

.ft-card--overlay .ft-card__link,
.ft-card--overlay .ft-card__media {
	height: 100%;
}

.ft-card--overlay .ft-card__media {
	aspect-ratio: auto;
}

.ft-card--overlay .ft-card__media::after {
	position: absolute;
	inset: 40% 0 0;
	background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 45%));
	content: "";
}

.ft-card--overlay .ft-card__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0 40px 64px;
	color: #fff;
	text-align: center;
	text-shadow: 0 2px 12px rgb(0 0 0 / 35%);
}

/* Narrow enough that long names wrap onto two lines, as in the design. */
.ft-card--overlay .ft-card__title {
	max-width: 800px;
	margin: 0 auto 14px;
	font-size: clamp(32px, 4.23vw, 64px);
}

.ft-card--overlay .ft-card__link:hover .ft-card__title {
	color: #fff;
}

.ft-card--overlay .ft-card__text,
.ft-card--overlay .ft-card__meta {
	font-weight: 700;
}

/* Carousel: native horizontal scrolling with snap points; arrows over the images. */
.ft-cards--carousel .ft-cards__track {
	display: grid;
	grid-auto-columns: calc((100% - (var(--ft-cols) - 1) * var(--ft-gap)) / var(--ft-cols));
	grid-auto-flow: column;
	gap: var(--ft-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ft-cards--carousel .ft-cards__track::-webkit-scrollbar {
	display: none;
}

.ft-cards--carousel .ft-card {
	scroll-snap-align: start;
}

.ft-cards--carousel .ft-cards__track:focus-visible {
	outline: 2px solid var(--ft-red, #d12e37);
	outline-offset: 4px;
}

/* Box as tall as one card image (padding % follows the width), arrows centred in it. */
.ft-cards__nav {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 0;
	padding-top: calc((100% - (var(--ft-cols) - 1) * var(--ft-gap)) / var(--ft-cols) / (var(--ft-card-ratio)));
	pointer-events: none;
}

.ft-cards__nav .ft-arrow {
	position: absolute;
	top: 50%;
	pointer-events: auto;
	transform: translateY(-50%);
}

.ft-cards__nav [data-ft-carousel="prev"] {
	left: 11px;
}

.ft-cards__nav [data-ft-carousel="next"] {
	right: 11px;
}

.ft-cards--static .ft-cards__nav {
	display: none;
}

/* Pagination ------------------------------------------------------------- */

.ft-pagination {
	margin-top: 100px;
}

.ft-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border: 3px solid #b3b3b3;
	border-radius: 50%;
	background: var(--ft-grey-bar, #d9d9d9);
	color: var(--ft-text, #000);
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
}

.ft-pagination a.page-numbers:hover,
.ft-pagination a.page-numbers:focus-visible {
	border-color: var(--ft-red, #d12e37);
	color: var(--ft-text, #000);
}

.ft-pagination .page-numbers.current {
	border-color: var(--ft-red, #d12e37);
	background: #fff;
}

.ft-pagination .page-numbers.dots {
	border: 0;
	background: none;
}

@media (max-width: 1024px) {
	.ft-cards--grid .ft-cards__track {
		row-gap: 64px;
	}

	.ft-pagination {
		margin-top: 64px;
	}
}

@media (max-width: 767px) {
	.ft-cards {
		--ft-gap: 16px;
	}

	.ft-cards--grid .ft-cards__track {
		row-gap: 40px;
	}

	.ft-card__body {
		padding-top: 16px;
	}

	.ft-card__text,
	.ft-card__meta {
		font-size: 18px;
		line-height: 24px;
	}

	.ft-card--highlight .ft-card__body {
		padding-top: 24px;
	}

	.ft-card--overlay .ft-card__body {
		padding: 0 20px 32px;
	}

	.ft-cards--carousel .ft-cards__track {
		grid-auto-columns: 85%;
	}

	.ft-cards--carousel .ft-cards__nav {
		padding-top: calc(85% / (var(--ft-card-ratio)));
	}

	.ft-cards__nav .ft-arrow {
		width: 44px;
		height: 44px;
	}

	.ft-pagination .page-numbers {
		width: 44px;
		height: 44px;
		border-width: 2px;
		font-size: 18px;
	}

	.ft-pagination__list {
		gap: 12px;
	}
}

/* W5 lead text (project stories) */
.ft-section-title__text--lead {
	max-width: 1080px;
	margin-top: 56px;
	font-size: clamp(20px, 1.98vw, 30px);
	font-weight: 700;
	line-height: 1.27;
}

.ft-section-title--lead .ft-section-title__subtitle {
	font-size: clamp(20px, 1.72vw, 26px);
}

/* The Thai designs set the lead as regular body text. */
:lang(th) .ft-section-title__text--lead {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.7;
}

/* W7 heading above the cards (e.g. "Related Products") */
.ft-heading+.ft-cards {
	margin-top: 60px;
}

/* W9 Details List: inline style (project facts) ------------------------- */

.ft-facts {
	margin: 0;
	columns: 2;
	column-gap: 72px;
	font-size: 20px;
	line-height: 30px;
}

.ft-facts__row {
	break-inside: avoid;
}

.ft-facts__label,
.ft-facts__value {
	display: inline;
	margin: 0;
}

.ft-facts__label {
	font-weight: 700;
}

.ft-facts__label::after {
	content: ": ";
}

@media (max-width: 767px) {
	.ft-section-title__text--lead {
		margin-top: 32px;
	}

	.ft-heading+.ft-cards {
		margin-top: 32px;
	}

	.ft-facts {
		columns: 1;
		font-size: 18px;
		line-height: 28px;
	}
}

/* W12 Contact Form ------------------------------------------------------- */

.ft-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 62px 24px;
}

.ft-form__field--message {
	grid-column: 1 / -1;
}

.ft-form__label {
	display: block;
	margin-bottom: 4px;
	font-size: 18px;
	font-weight: 700;
}

.ft-form__required {
	color: var(--ft-red, #d12e37);
}

.ft-form .ft-form__input {
	display: block;
	width: 100%;
	padding: 10px 0;
	border: 0;
	border-bottom: 2px solid #808080;
	border-radius: 0;
	background: transparent;
	color: var(--ft-text, #000);
	font-family: inherit;
	font-size: 18px;
	line-height: 1.4;
}

.ft-form .ft-form__input:focus {
	border-color: var(--ft-text, #000);
	outline: 2px solid var(--ft-red, #d12e37);
	outline-offset: 2px;
}

.ft-form textarea.ft-form__input {
	resize: vertical;
}

.ft-form .has-error .ft-form__input {
	border-color: var(--ft-red, #d12e37);
}

.ft-form__error {
	margin: 6px 0 0;
	color: var(--ft-red, #d12e37);
	font-size: 16px;
}

.ft-form__consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	align-items: start;
	margin: 28px 0;
	font-size: 16px;
	line-height: 1.5;
}

.ft-form__consent input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--ft-red, #d12e37);
}

.ft-form__consent .ft-form__error {
	grid-column: 2;
	margin: 0;
}

.ft-form__consent a {
	color: inherit;
	text-decoration: underline;
}

.ft-form .ft-form__submit {
	padding: 26px 34px;
	border: 0;
	border-radius: 0;
	background: var(--ft-grey-bar, #d9d9d9);
	color: var(--ft-text, #000);
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
}

.ft-form .ft-form__submit:hover,
.ft-form .ft-form__submit:focus-visible {
	border-color: var(--ft-red, #d12e37);
	background: var(--ft-red, #d12e37);
	color: #fff;
}

.ft-form__notice {
	margin-bottom: 28px;
	padding: 16px 20px;
	border-left: 4px solid;
	font-size: 18px;
}

.ft-form__notice--success {
	border-color: #2e7d32;
	background: #edf7ee;
}

.ft-form__notice--error {
	border-color: var(--ft-red, #d12e37);
	background: #fbeeee;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.ft-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 767px) {
	.ft-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}