/**
 * carousel.css
 * WHAT: Generic slider: scroll-snap track, arrows, dots, loop helper classes.
 * NOTE: Behaviour is in assets/js/carousel.js. Items must be direct children of .hn-track.
 * Loaded by inc/assets.php (order matters: later files may override earlier ones).
 */
.hn-arrow{
	position:absolute;
	top:50%;
	translate:0 -50%;
	width:42px;
	height:42px;
	border-radius:50%;
	border:0;
	background:var(--btn-light-bg);
	color:var(--btn-light-text);
	box-shadow:0 2px 8px #0002;
	cursor:pointer;
	display:grid;
	place-items:center;
}
.hn-arrow--prev{
	left:14px;
}
.hn-arrow--next{
	right:14px;
}
.hn-car{
	position:relative;
}
.hn-track{
	display:flex;
	gap:16px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scrollbar-width:none;
	-webkit-overflow-scrolling:touch;
	overscroll-behavior-x:contain;
}
.hn-track::-webkit-scrollbar{
	display:none;
}
.hn-track>*{
	scroll-snap-align:start;
}
.hn-car .hn-arrow{
	position:absolute;
	top:50%;
	translate:0 -50%;
	z-index:5;
	width:42px;
	height:42px;
	border-radius:50%;
	border:0;
	background:var(--btn-light-bg);
	color:var(--btn-light-text);
	box-shadow:0 2px 10px #0003;
	cursor:pointer;
	display:grid;
	place-items:center;
	transition:background .2s,color .2s;
}
.hn-car .hn-arrow:hover{
	background:var(--btn-light-hover-bg);
	color:var(--btn-light-text);
}
.hn-arrow--prev{
	left:10px;
}
.hn-arrow--next{
	right:10px;
}
.hn-car.is-static .hn-arrow{
	display:none;
}
.hn-car--products .hn-arrow--prev{
	left:-14px;
}
.hn-car--products .hn-arrow--next{
	right:-14px;
}
.hn-car--products,.hn-car--reviews{
	padding-bottom:4px;
}
.hn-dots{
	position:absolute;
	left:0;
	right:0;
	bottom:14px;
	display:flex;
	justify-content:center;
	gap:8px;
	z-index:5;
}
.hn-dots button{
	width:9px;
	height:9px;
	padding:0;
	border-radius:50%;
	border:0;
	background:#fff9;
	cursor:pointer;
	transition:width .25s,background .25s;
}
.hn-dots button.is-on{
	width:26px;
	border-radius:5px;
	background:var(--orange);
}
.hn-car--hero .hn-track,.hn-car--offer .hn-track{
	gap:0;
}
.hn-car--products .hn-card{
	flex:0 0 calc((100% - 64px)/5);
}
@media (max-width:1024px){
	.hn-car--products .hn-card{
		flex-basis:calc((100% - 32px)/3);
	}
}
@media (max-width:720px){
	.hn-car--products .hn-card{
		flex-basis:calc((100% - 12px)/2.15);
	}
	.hn-car--products .hn-track{
		gap:12px;
	}
	.hn-car--products .hn-arrow{
		display:none;
	}
}
.hn-car--reviews .hn-review{
	flex:0 0 calc((100% - 32px)/3);
	min-width:260px;
}
@media (max-width:720px){
	.hn-car--reviews .hn-review{
		flex-basis:88%;
	}
	.hn-car--reviews .hn-arrow{
		display:none;
	}
}
@media (max-width:1200px){
	.hn-car--products .hn-card{
		flex-basis:calc((100% - 48px)/4);
	}
}
@media (max-width:1024px){
	.hn-car--products .hn-card{
		flex-basis:calc((100% - 32px)/3);
	}
}
.hn-track{
	position:relative;
}
.hn-car--hero .hn-slide--only{
	aspect-ratio:auto;
}
.is-start .hn-arrow--prev,.is-end .hn-arrow--next{
	opacity:.35;
	pointer-events:none;
}
.is-static [data-clone]{
	display:none;
}
@media (max-width:720px){
	.hn-dots{
		bottom:8px;
	}
	.hn-dots button{
		background:#00000040;
	}
	.hn-dots button.is-on{
		background:var(--orange);
	}
	.hn-car .hn-arrow{
		width:34px;
		height:34px;
	}
}

@media (max-width:720px){
	.hn-car--mobile-grid .hn-track{display:grid;grid-template-columns:repeat(var(--hn-mobile-columns,2),minmax(0,1fr));gap:12px;overflow:visible;scroll-snap-type:none;}
	.hn-car--mobile-grid .hn-track>.hn-card{min-width:0;flex:none;scroll-snap-align:none;}
	.hn-car--mobile-grid .hn-arrow,.hn-car--mobile-grid .hn-dots{display:none;}
}