/* ForgeCommerce JF 0.16.1 — Guided selector + contextual product rails. */

.jf-guide-section{
	padding-block:clamp(4.8rem,8vw,8rem);
	background:#f1f4ec;
	color:var(--jf-c-ink,#0e1416);
}

.jf-guide-intro{
	max-width:860px;
	margin-bottom:clamp(2rem,4vw,3.5rem);
}

.jf-guide-intro h2,
.jf-product-rail-head h2,
.jf-pack-block-head h2{
	margin:.45rem 0 .8rem;
	font-size:clamp(2.35rem,5vw,4.8rem);
	line-height:.96;
	letter-spacing:-.055em;
}

.jf-guide-intro>p:last-child,
.jf-product-rail-head p,
.jf-pack-block-head p{
	max-width:66ch;
	color:var(--jf-c-muted,#5b6663);
	line-height:1.65;
}

.jf-guide{
	max-width:1180px;
	padding:clamp(1rem,2vw,1.5rem);
	border:1px solid rgba(14,20,22,.14);
	border-radius:32px;
	background:#fff;
	box-shadow:0 28px 90px rgba(14,20,22,.08);
}

.jf-guide-topbar{
	display:grid;
	grid-template-columns:auto minmax(120px,220px);
	gap:1.2rem;
	align-items:center;
	justify-content:space-between;
	padding:.45rem .35rem 1.15rem;
	border-bottom:1px solid rgba(14,20,22,.1);
}

.jf-guide-step-label{
	font-size:.72rem;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:.1em;
}

.jf-guide-progress{
	height:6px;
	overflow:hidden;
	border-radius:999px;
	background:#e4e8df;
}

.jf-guide-progress span{
	display:block;
	width:16.666%;
	height:100%;
	border-radius:inherit;
	background:var(--fc-accent,#b8ff24);
	transition:width .25s ease;
}

.jf-guide-step{
	margin:0;
	padding:clamp(2rem,4vw,3.5rem) .35rem 1.6rem;
	border:0;
}

.jf-guide-step legend{
	max-width:18ch;
	padding:0;
	font-size:clamp(2rem,4vw,3.45rem);
	font-weight:900;
	line-height:1;
	letter-spacing:-.045em;
}

.jf-guide-help{
	max-width:65ch;
	margin:.7rem 0 1.8rem;
	color:var(--jf-c-muted,#5b6663);
}

.jf-guide-options{
	display:grid;
	gap:.8rem;
}

.jf-guide-options.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.jf-guide-options.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.jf-guide-options.is-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.jf-guide-options.is-five{grid-template-columns:repeat(5,minmax(0,1fr))}

.jf-guide-option{
	position:relative;
	display:flex;
	min-height:168px;
	flex-direction:column;
	align-items:flex-start;
	justify-content:flex-end;
	gap:.35rem;
	padding:1.15rem;
	border:1px solid rgba(14,20,22,.14);
	border-radius:20px;
	background:#fbfcf8;
	cursor:pointer;
	transition:border-color .18s ease,transform .18s ease,background .18s ease,box-shadow .18s ease;
}

.jf-guide-option:hover{
	transform:translateY(-2px);
	border-color:rgba(14,20,22,.34);
	box-shadow:0 12px 30px rgba(14,20,22,.06);
}

.jf-guide-option:has(input:checked){
	border-color:#111817;
	background:var(--fc-accent,#b8ff24);
	box-shadow:0 0 0 2px #111817 inset;
}

.jf-guide-option input{
	position:absolute;
	inset:.9rem .9rem auto auto;
	width:20px;
	height:20px;
	accent-color:#111817;
}

.jf-guide-option-icon{
	display:grid;
	width:50px;
	height:50px;
	place-items:center;
	margin-bottom:auto;
	border:1px solid currentColor;
	border-radius:50%;
	font-size:.67rem;
	font-weight:900;
	letter-spacing:.04em;
}

.jf-guide-option strong{font-size:1.08rem;line-height:1.2}
.jf-guide-option small{max-width:28ch;color:#65706d;font-size:.78rem;line-height:1.45}
.jf-guide-option:has(input:checked) small{color:rgba(14,20,22,.72)}
.jf-guide-option.is-compact{min-height:125px;justify-content:center;align-items:center;text-align:center}
.jf-guide-option.is-compact strong{font-size:1.55rem}

.jf-guide-need-group[hidden]{display:none!important}

.jf-guide-navigation{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	padding:1rem .35rem .35rem;
	border-top:1px solid rgba(14,20,22,.1);
}

.jf-guide-back,
.jf-guide-reset{
	border:0;
	background:transparent;
	color:#27302e;
	font:inherit;
	font-size:.82rem;
	font-weight:900;
	text-decoration:underline;
	text-underline-offset:4px;
	cursor:pointer;
}

.jf-guide-back[hidden]{visibility:hidden;display:inline-block!important}

.jf-guide-navigation .fc-button[disabled]{opacity:.35;cursor:not-allowed;transform:none}

.jf-guide-result{
	display:grid;
	grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
	gap:clamp(2rem,5vw,5rem);
	padding:clamp(2.2rem,5vw,4.5rem) .35rem 1rem;
}

.jf-guide-result-copy h3{
	max-width:12ch;
	margin:.35rem 0 .8rem;
	font-size:clamp(2.4rem,5vw,4.4rem);
	line-height:.96;
	letter-spacing:-.055em;
}

.jf-guide-result-copy>p:last-child{max-width:58ch;color:var(--jf-c-muted,#5b6663);line-height:1.65}

.jf-guide-summary{
	margin:0;
	border-top:1px solid rgba(14,20,22,.14);
}

.jf-guide-summary>div{
	display:grid;
	grid-template-columns:minmax(100px,.7fr) minmax(0,1.3fr);
	gap:1rem;
	padding:.85rem 0;
	border-bottom:1px solid rgba(14,20,22,.14);
}

.jf-guide-summary dt{
	color:#6a7471;
	font-size:.68rem;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:.07em;
}

.jf-guide-summary dd{margin:0;font-weight:850;text-align:right}

.jf-guide-result-actions{
	grid-column:1/-1;
	display:flex;
	flex-wrap:wrap;
	gap:.75rem 1rem;
	align-items:center;
	padding-top:.5rem;
}

.jf-c-button-outline.is-dark{border-color:#111817!important;color:#111817!important}
.jf-c-button-outline.is-dark:hover{background:#111817!important;color:#fff!important}

.jf-guide-whatsapp{
	color:#111817;
	font-size:.82rem;
	font-weight:900;
	text-decoration:none;
}
.jf-guide-whatsapp:hover{text-decoration:underline;text-underline-offset:4px}
.jf-guide-reset{margin-left:auto}

.jf-guide-products-section{
	display:none;
	padding-block:clamp(4.5rem,7vw,7rem);
	background:#fff;
}
.jf-guide-products-section.is-active{display:block}

.jf-context-products{background:#fff}

.jf-product-rail{position:relative}
.jf-product-rail+.jf-pack-block{margin-top:clamp(4rem,7vw,7rem)}

.jf-product-rail-head{
	display:grid;
	grid-template-columns:minmax(0,1fr) auto;
	gap:2rem;
	align-items:end;
	margin-bottom:1.5rem;
}
.jf-product-rail-head h2{max-width:15ch;font-size:clamp(2.2rem,4.5vw,4.2rem)}
.jf-product-rail-head p{margin-bottom:0}

.jf-product-rail-tools{display:flex;gap:.5rem;padding-bottom:.3rem}
.jf-carousel-button{
	display:grid;
	width:46px;
	height:46px;
	place-items:center;
	border:1px solid rgba(14,20,22,.22);
	border-radius:50%;
	background:#fff;
	color:#111817;
	font:inherit;
	font-size:1.1rem;
	cursor:pointer;
	transition:background .18s ease,border-color .18s ease,opacity .18s ease;
}
.jf-carousel-button:hover:not(:disabled){background:var(--fc-accent,#b8ff24);border-color:#111817}
.jf-carousel-button:disabled{opacity:.28;cursor:default}

.jf-product-rail-track{
	display:flex;
	gap:1rem;
	overflow-x:auto;
	overflow-y:hidden;
	padding:.25rem .1rem 1.25rem;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	scrollbar-width:thin;
	scrollbar-color:#c2c9bf transparent;
}
.jf-product-rail-track:focus-visible{outline:3px solid var(--fc-accent,#b8ff24);outline-offset:5px;border-radius:18px}
.jf-product-rail-item{flex:0 0 clamp(220px,24vw,290px);scroll-snap-align:start}
.jf-product-rail-item .jf-product-card{height:100%}
.jf-product-rail-all{margin:1rem 0 0}
.jf-c-text-link.is-ink{color:#111817}

.jf-pack-block-head{max-width:820px;margin-bottom:1.5rem}
.jf-pack-block-head h2{max-width:14ch;font-size:clamp(2.2rem,4.5vw,4.2rem)}
.jf-pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.jf-pack-card{
	position:relative;
	min-height:260px;
	padding:1.35rem;
	border:1px solid rgba(14,20,22,.15);
	border-radius:22px;
	background:#f4f7ef;
}
.jf-pack-card>span{
	display:grid;
	width:42px;
	height:42px;
	place-items:center;
	border:1px solid #111817;
	border-radius:50%;
	font-size:.68rem;
	font-weight:900;
}
.jf-pack-card h3{max-width:13ch;margin:2.7rem 0 .65rem;font-size:1.45rem;line-height:1.05}
.jf-pack-card p{margin:0;color:#5f6966;font-size:.9rem;line-height:1.55}
.jf-pack-card small{position:absolute;inset:auto 1.35rem 1.25rem;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}

@media (max-width:1060px){
	.jf-guide-options.is-four{grid-template-columns:repeat(2,minmax(0,1fr))}
	.jf-guide-options.is-five{grid-template-columns:repeat(3,minmax(0,1fr))}
	.jf-guide-result{grid-template-columns:1fr}
	.jf-guide-result-actions{grid-column:auto}
}

@media (max-width:760px){
	.jf-guide-section{padding-block:4rem}
	.jf-guide{border-radius:22px;padding:.85rem}
	.jf-guide-topbar{grid-template-columns:1fr;gap:.65rem}
	.jf-guide-step{padding:2rem .1rem 1rem}
	.jf-guide-step legend{font-size:clamp(2rem,10vw,3rem)}
	.jf-guide-options.is-two,
	.jf-guide-options.is-three,
	.jf-guide-options.is-four,
	.jf-guide-options.is-five{grid-template-columns:1fr 1fr}
	.jf-guide-option{min-height:145px;border-radius:16px;padding:1rem}
	.jf-guide-option.is-wide{grid-column:1/-1;min-height:130px}
	.jf-guide-navigation{padding-inline:.1rem}
	.jf-guide-navigation .fc-button{min-width:0}
	.jf-guide-result{padding:2.3rem .1rem .5rem}
	.jf-guide-result-actions{display:grid;grid-template-columns:1fr}
	.jf-guide-result-actions .fc-button{width:100%;justify-content:center;text-align:center}
	.jf-guide-whatsapp{text-align:center;padding:.75rem}
	.jf-guide-reset{margin:0 auto}
	.jf-product-rail-head{grid-template-columns:1fr;gap:.7rem}
	.jf-product-rail-tools{justify-content:flex-end}
	.jf-product-rail-item{flex-basis:min(76vw,280px)}
	.jf-pack-grid{grid-template-columns:1fr}
	.jf-pack-card{min-height:220px}
}

@media (max-width:460px){
	.jf-guide-options.is-two,
	.jf-guide-options.is-three,
	.jf-guide-options.is-four,
	.jf-guide-options.is-five{grid-template-columns:1fr}
	.jf-guide-option.is-wide{grid-column:auto}
	.jf-guide-option{min-height:125px}
	.jf-guide-option-icon{width:42px;height:42px}
}

@media (prefers-reduced-motion:reduce){
	.jf-product-rail-track{scroll-behavior:auto}
	.jf-guide-progress span,
	.jf-guide-option,
	.jf-carousel-button{transition:none}
}