/* Caption, arrows and counter under the ingredient slider on the product page.
   Only loaded on products that actually have related ingredients. */

/* Bricks' own arrows/pagination are replaced by the caption controls below.
   Scoped to this slider so other nested sliders keep their own controls. */
#brxe-ingsle4dc .splide__arrows,
#brxe-ingsle4dc .splide__pagination{display:none !important;}

.ing-caption-wrap{
	max-width:820px;
	margin:25px auto 0;
	padding:0 16px;
	text-align:center;
}
.ing-name{font-size:24px;font-weight:700;margin-bottom:12px;}
.ing-row{display:flex;align-items:center;justify-content:center;gap:24px;}
.ing-desc{
	flex:0 0 480px;
	width:480px;
	max-width:100%;
	height:68px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:15px;
	line-height:1.5;
	color:#555;
	text-align:center;
	overflow:hidden;
}
.ing-arrow{
	flex:0 0 auto;
	padding:6px;
	border:none;
	background:none;
	line-height:0;
	cursor:pointer;
	transition:opacity .2s;
}
.ing-arrow:hover{opacity:.55;}
.ing-counts{margin-top:18px;font-size:16px;color:#aaa;letter-spacing:1px;}
.ing-counts .ing-current{color:#222;font-weight:700;}

@media(max-width:640px){
	.ing-row{gap:6px;}
	.ing-arrow svg{width:34px;height:34px;}
	.ing-name{font-size:19px;}
	.ing-desc{flex-basis:auto;width:auto;height:60px;}
}