/**
 * Home store-benefits module.
 *
 * Visual variants are selected with the ln-features-style--* modifier.
 * Icon geometry is independent, so a new visual skin does not need duplicated
 * layout or responsive rules.
 */
.ln-features {
	--ln-feature-gap: 0px;
	--ln-feature-radius: 22px;
	--ln-feature-surface: #fff;
	--ln-feature-border: var(--ln-line);
	--ln-feature-title: var(--ln-ink);
	--ln-feature-text: var(--ln-muted);
	--ln-feature-icon-bg: #f4eedf;
	--ln-feature-icon-color: #9a7b3f;
	--ln-feature-icon-border: transparent;
	padding-top: clamp(14px, 2vw, 24px);
}

.ln-features__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ln-feature-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--ln-feature-border);
	border-radius: var(--ln-feature-radius);
	background: var(--ln-feature-surface);
	box-shadow: 0 12px 34px rgba(12, 59, 52, 0.07);
	overflow: hidden;
}

.ln-feature {
	position: relative;
	isolation: isolate;
	display: flex;
	min-width: 0;
	min-height: 88px;
	align-items: center;
	gap: 13px;
	padding: 18px 20px;
	border-inline-start: 1px solid var(--ln-feature-border);
	color: var(--ln-feature-title);
	transition: transform 280ms ease, background-color 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}

.ln-feature:first-child { border-inline-start: 0; }

.ln-feature__icon {
	position: relative;
	display: grid;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	place-items: center;
	border: 1px solid var(--ln-feature-icon-border);
	border-radius: 50%;
	background: var(--ln-feature-icon-bg);
	box-shadow: 0 7px 18px rgba(12, 59, 52, 0.07);
	color: var(--ln-feature-icon-color);
	font-size: 19px;
	line-height: 1;
	transition: transform 300ms ease, background-color 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}

.ln-feature__glyph {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	line-height: 1;
}

.ln-feature__copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 3px;
}

.ln-feature strong {
	color: var(--ln-feature-title);
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.7;
}

.ln-feature small {
	color: var(--ln-feature-text);
	font-size: 10.75px;
	font-weight: 450;
	line-height: 1.7;
}

/* Icon geometry is intentionally independent from the selected skin. */
.ln-features-icons--rounded .ln-feature__icon { border-radius: 13px; }

.ln-features-icons--diamond .ln-feature__icon {
	border-radius: 11px;
	transform: rotate(45deg) scale(0.88);
}
.ln-features-icons--diamond .ln-feature__glyph { transform: rotate(-45deg) scale(1.08); }
.ln-features-icons--diamond .ln-feature:hover .ln-feature__icon { transform: rotate(45deg) scale(0.94); }

.ln-features-icons--outline .ln-feature__icon {
	border-color: currentColor;
	background: transparent;
	box-shadow: none;
}

/* Signature: brand-led emerald panel with restrained gold detailing. */
.ln-features-style--signature {
	--ln-feature-border: rgba(221, 185, 107, 0.19);
	--ln-feature-title: #fffaf0;
	--ln-feature-text: #b8cbc5;
	--ln-feature-icon-bg: rgba(201, 163, 92, 0.13);
	--ln-feature-icon-color: var(--ln-gold-light);
	--ln-feature-icon-border: rgba(221, 185, 107, 0.3);
}

.ln-features-style--signature .ln-features__grid {
	position: relative;
	background:
		radial-gradient(circle at 10% 130%, rgba(221, 185, 107, 0.2), transparent 34%),
		radial-gradient(circle at 90% -35%, rgba(255, 255, 255, 0.08), transparent 30%),
		linear-gradient(122deg, var(--ln-primary-dark), var(--ln-primary));
	box-shadow: 0 18px 42px rgba(8, 42, 37, 0.2);
}

.ln-features-style--signature .ln-feature::after {
	position: absolute;
	top: 11px;
	inset-inline-end: 13px;
	z-index: -1;
	content: attr(data-feature);
	color: rgba(221, 185, 107, 0.08);
	font: 700 38px/1 var(--ln-font-display);
}

.ln-features-style--signature .ln-feature:hover { background: rgba(255, 255, 255, 0.045); }
.ln-features-style--signature .ln-feature:hover .ln-feature__icon { box-shadow: 0 8px 24px rgba(201, 163, 92, 0.18); }

/* Crystal: airy glass-like surface suited to bright product photography. */
.ln-features-style--crystal {
	--ln-feature-radius: 24px;
	--ln-feature-border: rgba(201, 163, 92, 0.24);
	--ln-feature-surface: rgba(255, 255, 255, 0.78);
	--ln-feature-icon-bg: rgba(255, 255, 255, 0.76);
	--ln-feature-icon-color: #9a7b3f;
	--ln-feature-icon-border: rgba(201, 163, 92, 0.32);
}

.ln-features-style--crystal .ln-features__grid {
	background:
		radial-gradient(circle at 12% 0%, rgba(221, 185, 107, 0.16), transparent 27%),
		radial-gradient(circle at 88% 100%, rgba(12, 59, 52, 0.08), transparent 30%),
		rgba(255, 255, 255, 0.8);
	box-shadow: 0 16px 42px rgba(12, 59, 52, 0.09), inset 0 1px rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(12px);
}

.ln-features-style--crystal .ln-feature::before {
	position: absolute;
	top: 14px;
	bottom: 14px;
	inset-inline-start: -1px;
	width: 1px;
	content: "";
	background: linear-gradient(transparent, rgba(201, 163, 92, 0.42), transparent);
}
.ln-features-style--crystal .ln-feature:first-child::before { display: none; }
.ln-features-style--crystal .ln-feature:hover { background: rgba(255, 255, 255, 0.58); }
.ln-features-style--crystal .ln-feature:hover .ln-feature__icon { transform: translateY(-2px); }

/* Arch: four architectural niches inspired by classic Iranian interiors. */
.ln-features-style--arch {
	--ln-feature-gap: 12px;
	--ln-feature-border: rgba(201, 163, 92, 0.32);
	--ln-feature-surface: transparent;
	--ln-feature-icon-bg: #f2ead9;
	--ln-feature-icon-color: #8f7139;
}

.ln-features-style--arch .ln-features__grid {
	padding: 7px;
	border: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.ln-features-style--arch .ln-feature {
	min-height: 112px;
	justify-content: center;
	padding: 22px 16px 17px;
	border: 1px solid var(--ln-feature-border);
	border-radius: 68px 68px 18px 18px;
	background: linear-gradient(180deg, #fff, #fbf7ee);
	box-shadow: 0 12px 26px rgba(12, 59, 52, 0.07);
}

.ln-features-style--arch .ln-feature::before {
	position: absolute;
	inset: 7px;
	z-index: -1;
	border: 1px solid rgba(201, 163, 92, 0.12);
	border-radius: 62px 62px 12px 12px;
	content: "";
}

.ln-features-style--arch .ln-feature:hover {
	border-color: rgba(201, 163, 92, 0.62);
	box-shadow: 0 18px 34px rgba(12, 59, 52, 0.11);
	transform: translateY(-3px);
}

/* Jewel: independent premium cards, useful on busy homepages. */
.ln-features-style--jewel {
	--ln-feature-gap: 12px;
	--ln-feature-border: rgba(12, 59, 52, 0.1);
	--ln-feature-surface: transparent;
	--ln-feature-icon-bg: var(--ln-primary);
	--ln-feature-icon-color: var(--ln-gold-light);
}

.ln-features-style--jewel .ln-features__grid {
	border: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.ln-features-style--jewel .ln-feature {
	min-height: 104px;
	border: 1px solid var(--ln-feature-border);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 26px rgba(12, 59, 52, 0.06);
	overflow: hidden;
}

.ln-features-style--jewel .ln-feature::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	content: "";
	background: linear-gradient(90deg, transparent, var(--ln-gold), transparent);
	transform: scaleX(0.5);
	transition: transform 280ms ease;
}

.ln-features-style--jewel .ln-feature:hover {
	border-color: rgba(201, 163, 92, 0.34);
	box-shadow: 0 17px 38px rgba(12, 59, 52, 0.11);
	transform: translateY(-3px);
}
.ln-features-style--jewel .ln-feature:hover::before { transform: scaleX(1); }

/* Noir: dramatic showroom look with stronger separation between promises. */
.ln-features-style--noir {
	--ln-feature-radius: 18px;
	--ln-feature-border: rgba(201, 163, 92, 0.21);
	--ln-feature-title: #f7f0df;
	--ln-feature-text: #9db2ac;
	--ln-feature-icon-bg: rgba(201, 163, 92, 0.1);
	--ln-feature-icon-color: var(--ln-gold-light);
	--ln-feature-icon-border: rgba(201, 163, 92, 0.38);
}

.ln-features-style--noir .ln-features__grid {
	border-color: rgba(201, 163, 92, 0.28);
	background: linear-gradient(105deg, #071f1c, #0b302b 58%, #071f1c);
	box-shadow: 0 20px 46px rgba(4, 24, 21, 0.24), inset 0 1px rgba(255, 255, 255, 0.03);
}

.ln-features-style--noir .ln-feature { min-height: 96px; }
.ln-features-style--noir .ln-feature::before {
	position: absolute;
	inset-inline-start: 17px;
	bottom: 0;
	width: 30px;
	height: 2px;
	content: "";
	background: var(--ln-gold);
	opacity: 0.48;
	transition: width 280ms ease, opacity 280ms ease;
}
.ln-features-style--noir .ln-feature:hover { background: rgba(201, 163, 92, 0.045); }
.ln-features-style--noir .ln-feature:hover::before { width: 56px; opacity: 0.9; }

/* Minimal: lowest visual weight while retaining strong typography. */
.ln-features-style--minimal {
	--ln-feature-radius: 0px;
	--ln-feature-border: rgba(12, 59, 52, 0.13);
	--ln-feature-surface: transparent;
	--ln-feature-icon-bg: transparent;
	--ln-feature-icon-color: var(--ln-primary);
}

.ln-features-style--minimal .ln-features__grid {
	border-width: 0 0 1px;
	box-shadow: none;
}

.ln-features-style--minimal .ln-feature {
	min-height: 82px;
	padding-inline: 18px;
}

.ln-features-style--minimal .ln-feature__icon {
	width: 40px;
	height: 40px;
	flex-basis: 40px;
	border: 1px solid rgba(12, 59, 52, 0.13);
	box-shadow: none;
}

.ln-features-style--minimal .ln-feature:hover { background: rgba(255, 255, 255, 0.45); }

@media (max-width: 980px) {
	.ln-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ln-feature:nth-child(odd) { border-inline-start: 0; }
	.ln-feature:nth-child(n + 3) { border-top: 1px solid var(--ln-feature-border); }

	.ln-features-style--crystal .ln-feature:nth-child(odd)::before { display: none; }
	.ln-features-style--crystal .ln-feature:nth-child(n + 3)::after {
		position: absolute;
		top: -1px;
		right: 16px;
		left: 16px;
		height: 1px;
		content: "";
		background: linear-gradient(90deg, transparent, rgba(201, 163, 92, 0.32), transparent);
	}

	.ln-features-style--arch .ln-feature:nth-child(n + 3),
	.ln-features-style--jewel .ln-feature:nth-child(n + 3) { border-top: 1px solid var(--ln-feature-border); }
}

@media (max-width: 680px) {
	.ln-features { padding-top: 12px; }
	.ln-feature {
		min-height: 80px;
		gap: 9px;
		padding: 13px 11px;
	}
	.ln-feature__icon {
		width: 38px;
		height: 38px;
		flex-basis: 38px;
		font-size: 15px;
	}
	.ln-feature strong { font-size: 10.75px; }
	.ln-feature small { font-size: 9.5px; }

	.ln-features-style--arch { --ln-feature-gap: 8px; }
	.ln-features-style--arch .ln-features__grid { padding: 4px; }
	.ln-features-style--arch .ln-feature {
		min-height: 96px;
		padding: 17px 10px 13px;
		border-radius: 52px 52px 14px 14px;
	}
	.ln-features-style--arch .ln-feature::before { border-radius: 46px 46px 9px 9px; }

	.ln-features-style--jewel { --ln-feature-gap: 8px; }
	.ln-features-style--jewel .ln-feature { min-height: 88px; border-radius: 14px; }
	.ln-features-style--signature .ln-feature::after { font-size: 30px; }
}

@media (max-width: 460px) {
	.ln-features__grid { grid-template-columns: 1fr; }
	.ln-feature,
	.ln-feature:nth-child(odd) {
		min-height: 72px;
		border-inline-start: 0;
		border-top: 1px solid var(--ln-feature-border);
	}
	.ln-feature:first-child { border-top: 0; }
	.ln-feature:nth-child(n + 3) { border-top: 1px solid var(--ln-feature-border); }
	.ln-feature small { font-size: 10px; }

	.ln-features-style--crystal .ln-feature::before,
	.ln-features-style--crystal .ln-feature:nth-child(n + 3)::after { display: none; }

	.ln-features-style--arch .ln-features__grid,
	.ln-features-style--jewel .ln-features__grid { gap: 7px; }
	.ln-features-style--arch .ln-feature,
	.ln-features-style--jewel .ln-feature,
	.ln-features-style--arch .ln-feature:nth-child(n + 3),
	.ln-features-style--jewel .ln-feature:nth-child(n + 3) { border-top: 1px solid var(--ln-feature-border); }
	.ln-features-style--arch .ln-feature {
		justify-content: flex-start;
		min-height: 76px;
		border-radius: 34px 34px 13px 13px;
	}
	.ln-features-style--arch .ln-feature::before { border-radius: 29px 29px 9px 9px; }
}

@media (hover: hover) {
	.ln-feature:hover .ln-feature__icon { transform: translateY(-2px); }
	.ln-features-icons--diamond .ln-feature:hover .ln-feature__icon { transform: rotate(45deg) scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
	.ln-feature,
	.ln-feature__icon,
	.ln-features-style--jewel .ln-feature::before,
	.ln-features-style--noir .ln-feature::before { transition: none; }
}