.ffwf-zone {
	padding: clamp(2rem,5vw,4rem) 0;
	background: #fff;
}

.ffwf-reference {
	color: var(--ff-ink);
}

.ffwf-definition {
	display: grid;
	grid-template-columns: minmax(0,1.3fr) minmax(260px,.7fr);
	gap: clamp(1.25rem,3vw,2.5rem);
	align-items: center;
	padding: clamp(1.25rem,3vw,2rem);
	border: 1px solid var(--ff-border);
	border-radius: 18px;
	background: linear-gradient(135deg,#faf7f1 0%,#f3f6f3 100%);
}

.ffwf-kicker {
	display: block;
	margin-bottom: .35rem;
	color: var(--ff-accent);
	font-size: .69rem;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.ffwf-definition h2,
.ffwf-section-head h2,
.ffwf-compare h2 {
	margin: 0;
	font-family: var(--ff-serif);
	font-size: clamp(1.35rem,2.2vw,2rem);
	line-height: 1.16;
}

.ffwf-definition p,
.ffwf-section-head p {
	max-width: 780px;
	margin: .6rem 0 0;
	color: var(--ff-muted);
	font-size: .82rem;
	line-height: 1.65;
}

.ffwf-mini-weave {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 230px;
	padding: 1.8rem;
	border-radius: 16px;
	background: var(--ff-brand);
	overflow: hidden;
}

.ffwf-mini-weave__grid {
	display: grid;
	grid-template-columns: repeat(5,32px);
	grid-auto-rows: 32px;
	gap: 4px;
	transform: rotate(2deg);
}

.ffwf-mini-weave__grid i {
	position: relative;
	display: block;
	border-radius: 4px;
	background: rgba(255,255,255,.88);
	box-shadow: inset 0 0 0 3px rgba(185,79,50,.78);
}

.ffwf-mini-weave__grid i:nth-child(even) {
	background: rgba(250,247,241,.72);
	box-shadow: inset 0 0 0 3px rgba(108,141,123,.95);
}

.ffwf-mini-weave__label {
	position: absolute;
	color: #fff;
	font-size: .66rem;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ffwf-mini-weave__label--warp {
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
}

.ffwf-mini-weave__label--weft {
	left: 13px;
	top: 50%;
	transform: translateY(-50%) rotate(-90deg);
}

.ffwf-facts {
	display: grid;
	grid-template-columns: repeat(4,minmax(0,1fr));
	gap: .75rem;
	margin-top: 1rem;
}

.ffwf-facts > div {
	padding: 1rem;
	border: 1px solid var(--ff-border);
	border-radius: 13px;
	background: #fff;
	box-shadow: 0 8px 22px rgba(23,49,47,.035);
}

.ffwf-facts strong,
.ffwf-facts span {
	display: block;
}

.ffwf-facts strong {
	color: var(--ff-brand);
	font-family: var(--ff-serif);
	font-size: 1.05rem;
}

.ffwf-facts span {
	margin-top: .22rem;
	color: var(--ff-muted);
	font-size: .67rem;
	line-height: 1.4;
}

.ffwf-section-head {
	margin: clamp(2rem,5vw,3.5rem) 0 1rem;
}

.ffwf-weaves {
	display: grid;
	grid-template-columns: repeat(4,minmax(0,1fr));
	gap: .85rem;
}

.ffwf-weave-card {
	min-width: 0;
	padding: 1rem;
	border: 1px solid var(--ff-border);
	border-radius: 15px;
	background: #fff;
}

.ffwf-weave-card__visual {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 5px;
	height: 72px;
	margin-bottom: .8rem;
	padding: 9px;
	border-radius: 10px;
	background: #f4eee5;
}

.ffwf-weave-card__visual span {
	border-radius: 4px;
	background: var(--ff-brand);
}

.ffwf-weave-card__visual--2 span:nth-child(even),
.ffwf-weave-card__visual--3 span:nth-child(3n),
.ffwf-weave-card__visual--4 span:nth-child(-n+2) {
	transform: translateY(8px);
	background: var(--ff-accent);
}

.ffwf-weave-card__pattern {
	color: var(--ff-accent);
	font-size: .62rem;
	font-weight: 900;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ffwf-weave-card h3 {
	margin: .3rem 0 .4rem;
	font-family: var(--ff-serif);
	font-size: 1.05rem;
}

.ffwf-weave-card p {
	margin: 0;
	color: var(--ff-muted);
	font-size: .69rem;
	line-height: 1.55;
}

.ffwf-compare {
	margin-top: clamp(2rem,5vw,3.5rem);
	padding: clamp(1rem,2vw,1.4rem);
	border: 1px solid var(--ff-border);
	border-radius: 16px;
	background: #fcfbf8;
}

.ffwf-compare__head {
	margin-bottom: .9rem;
}

.ffwf-compare__grid {
	overflow: hidden;
	border: 1px solid var(--ff-border);
	border-radius: 12px;
	background: #fff;
}

.ffwf-compare__row {
	display: grid;
	grid-template-columns: minmax(130px,.65fr) repeat(2,minmax(0,1fr));
	border-top: 1px solid #e9e5de;
}

.ffwf-compare__row:first-child {
	border-top: 0;
}

.ffwf-compare__row > * {
	min-width: 0;
	padding: .8rem .9rem;
	border-left: 1px solid #ece8e1;
	font-size: .7rem;
	line-height: 1.45;
}

.ffwf-compare__row > *:first-child {
	border-left: 0;
}

.ffwf-compare__row--head {
	background: var(--ff-brand);
	color: #fff;
}

.ffwf-compare__row--head span {
	font-size: .64rem;
	font-weight: 900;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ffwf-compare__row strong {
	color: var(--ff-brand);
}

.ffwf-related {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem 1rem;
	align-items: center;
	margin-top: 1rem;
	padding: .9rem 1rem;
	border-left: 4px solid var(--ff-accent);
	border-radius: 0 11px 11px 0;
	background: #fff5ef;
}

.ffwf-related > strong {
	font-size: .72rem;
}

.ffwf-related > div {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .65rem;
	font-size: .69rem;
}

.ffwf-related a {
	font-weight: 800;
}

.ffwf-related span {
	color: var(--ff-muted);
}

@media (max-width: 900px) {
	.ffwf-weaves {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}

	.ffwf-facts {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}
}

@media (max-width: 760px) {
	.ffwf-definition {
		grid-template-columns: 1fr;
	}

	.ffwf-mini-weave {
		min-height: 190px;
	}

	.ffwf-compare__grid {
		display: grid;
		gap: .7rem;
		border: 0;
		background: transparent;
	}

	.ffwf-compare__row,
	.ffwf-compare__row--head {
		display: grid;
		grid-template-columns: 1fr;
		border: 1px solid var(--ff-border);
		border-radius: 10px;
		overflow: hidden;
		background: #fff;
	}

	.ffwf-compare__row--head {
		display: none;
	}

	.ffwf-compare__row > * {
		border-left: 0;
		border-top: 1px solid #ece8e1;
	}

	.ffwf-compare__row > *:first-child {
		border-top: 0;
		background: #f3f6f3;
	}

	.ffwf-compare__row span:nth-child(2)::before {
		content: 'Woven fabric';
		display: block;
		margin-bottom: .18rem;
		color: var(--ff-muted);
		font-size: .58rem;
		font-weight: 900;
		letter-spacing: .04em;
		text-transform: uppercase;
	}

	.ffwf-compare__row span:nth-child(3)::before {
		content: 'Knit fabric';
		display: block;
		margin-bottom: .18rem;
		color: var(--ff-muted);
		font-size: .58rem;
		font-weight: 900;
		letter-spacing: .04em;
		text-transform: uppercase;
	}
}

@media (max-width: 560px) {
	.ffwf-weaves,
	.ffwf-facts {
		grid-template-columns: 1fr;
	}

	.ffwf-related {
		display: block;
	}

	.ffwf-related > div {
		margin-top: .45rem;
	}
}