/**
 * Storefront Steps — "How it works" process section. Boudoir spec hex.
 * Two layouts: .sfs--split (feature image + vertical numbered list) and
 * .sfs--row (original horizontal grid). Element-level colours beat the kit's
 * body-inherited text colour; the feature <img> is scoped at (0,2,1) to beat
 * the kit's `.elementor img { height:auto }` bleed.
 */

/* ---------------------------------------------------------------- shared head */
.sfs__eyebrow { margin: 0 0 14px; font-family: 'Manrope', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #E0102F; }
.sfs__title { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(30px, 4vw, 46px); font-weight: 600; line-height: 1.1; color: #F5EDE7; }
.sfs__desc { margin: 18px 0 0; max-width: 540px; font-family: 'Manrope', system-ui, sans-serif; font-size: 16px; line-height: 1.65; color: #A98D96; }

/* ============================================================ SPLIT layout */
.sfs--split {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 84px);
	align-items: stretch;
}
.sfs--split.sfs--no-img { grid-template-columns: 1fr; }
.sfs--split.sfs--no-img .sfs__body { max-width: 760px; }

/* Image on the right instead of the left. */
.sfs--split.sfs--img-right .sfs__media { order: 2; }

.sfs__media { position: relative; min-height: 100%; }
.sfs--split .sfs__media img,
.sfs--split .sfs__media-img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 440px;
	max-height: 760px;
	object-fit: cover;
	border-radius: 8px;
}

.sfs--split .sfs__head { max-width: 560px; margin: 0 0 clamp(20px, 3vw, 34px); }

.sfs--split .sfs__steps { display: block; }
.sfs--split .sfs-step {
	display: grid;
	grid-template-columns: 46px 1fr;
	column-gap: 20px;
	align-items: baseline;
	padding: 26px 0;
	border-bottom: 1px solid rgba(245, 237, 231, .14);
}
.sfs--split .sfs-step:first-child { padding-top: 8px; }
.sfs--split .sfs-step:last-child { border-bottom: 0; }
.sfs--split .sfs-step__num { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; color: #E0102F; }
.sfs--split .sfs-step__title { margin: 0; font-family: 'Manrope', system-ui, sans-serif; font-size: 17px; font-weight: 600; line-height: 1.3; color: #F5EDE7; }
.sfs--split .sfs-step__desc { margin: 8px 0 0; max-width: 54ch; font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: #A98D96; }

@media (max-width: 900px) {
	.sfs--split { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 40px); }
	.sfs--split .sfs__media img,
	.sfs--split .sfs__media-img { min-height: 300px; max-height: 460px; }
	.sfs--split.sfs--img-right .sfs__media { order: 0; } /* image on top when stacked */
}
@media (max-width: 480px) {
	.sfs--split .sfs-step { grid-template-columns: 40px 1fr; column-gap: 14px; }
	.sfs--split .sfs-step__num { font-size: 20px; }
}

/* ============================================================== ROW layout */
.sfs--row .sfs__head { max-width: 620px; margin: 0 0 clamp(40px, 5vw, 64px); }
.sfs--row.sfs--center .sfs__head { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }
.sfs--row.sfs--center .sfs__desc { margin-left: auto; margin-right: auto; }

.sfs--row .sfs__grid { display: grid; gap: 32px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sfs--row .sfs-step { border-top: 1px solid rgba(245, 237, 231, .14); padding-top: 30px; }
.sfs--row .sfs-step__num { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: .01em; color: #E0102F; }
.sfs--row .sfs-step__title { margin: 22px 0 0; font-family: 'Manrope', system-ui, sans-serif; font-size: 17px; font-weight: 600; line-height: 1.3; color: #F5EDE7; }
.sfs--row .sfs-step__desc { margin: 10px 0 0; max-width: 30ch; font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: #A98D96; }

@media (max-width: 1024px) { .sfs--row .sfs__grid:not([style*="grid-template-columns"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 560px) {
	.sfs--row .sfs__grid:not([style*="grid-template-columns"]) { grid-template-columns: 1fr; row-gap: 34px; }
	.sfs--row .sfs-step__num { font-size: 34px; }
}