.hnb {
	--hnb-accent: #c27559;
	--hnb-dot: #e3b0a3;
	--hnb-green: #01372f;
	--hnb-bg: #ffe9e1;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto 2.5rem;
}

/* V hlavičke obchodu: medzi nadpisom a čiarou nad produktmi. */
.woocommerce-products-header .hnb {
	margin: 1.75rem auto 0.5rem;
}

.hnb__track {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-radius: 0.75rem;
	background: var(--hnb-bg);
}

.hnb__track::-webkit-scrollbar {
	display: none;
}

.hnb__track:focus-visible {
	outline: 2px solid var(--hnb-green);
	outline-offset: 3px;
}

.hnb__slide {
	flex: 0 0 100%;
	min-width: 0;
	display: block;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	aspect-ratio: 1140 / 350;
	overflow: hidden;
}

.hnb__slide picture,
.hnb__slide img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Väčší alebo inak tvarovaný obrázok sa prispôsobí a oreže na stred. */
.hnb__slide img {
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: 0;
}

.hnb__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.9rem;
}

.hnb__dots {
	display: flex;
	align-items: center;
	gap: 0.15rem;
}

/* Bodka je malá, ale klikacia plocha má 24 × 24 px. */
.hnb .hnb__dot {
	position: relative;
	width: 24px;
	height: 24px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

.hnb .hnb__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	margin: -4.5px 0 0 -4.5px;
	border-radius: 50%;
	background: var(--hnb-dot);
	transition: background-color 0.25s, transform 0.25s;
}

.hnb .hnb__dot:hover::before {
	background: var(--hnb-accent);
}

.hnb .hnb__dot.is-active::before {
	background: var(--hnb-accent);
	transform: scale(1.3);
}

.hnb .hnb__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-width: 0;
	padding: 0;
	border: 1.5px solid var(--hnb-green);
	border-radius: 50%;
	background: transparent;
	color: var(--hnb-green);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.25s, color 0.25s;
}

.hnb .hnb__pause:hover {
	background: var(--hnb-green);
	color: #fff;
}

.hnb .hnb__pause svg {
	fill: currentColor;
}

.hnb .hnb__dot:focus-visible,
.hnb .hnb__pause:focus-visible {
	outline: 2px solid var(--hnb-green);
	outline-offset: 2px;
}

.hnb .hnb__icon-play,
.hnb.is-paused .hnb__icon-pause {
	display: none;
}

.hnb.is-paused .hnb__icon-play {
	display: block;
}

@media (max-width: 767px) {
	.hnb {
		margin-bottom: 1.75rem;
	}

	/* Na mobile má každý banner rovnaký rozmer 800 × 600 (4:3) na celú šírku.
	   Obrázok iného tvaru sa prispôsobí a oreže na stred. */
	.hnb__slide {
		aspect-ratio: 800 / 600;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hnb__track {
		scroll-behavior: auto;
	}

	.hnb .hnb__dot::before {
		transition: none;
	}
}


/* -------------------------------------------------------------------------
 * Safari / iPhone (2026-10-17): pomer strán drží celá dráha, nie flex položka.
 * Safari pri flex položke s aspect-ratio rátal výšku z obrázka – banner bol na
 * mobile extrémne vysoký. Obrázok teraz vypĺňa slide absolútne (neovplyvní výšku).
 * ---------------------------------------------------------------------- */
.hnb__track {
	aspect-ratio: 1140 / 350;
	align-items: stretch;
}

.hnb__slide {
	position: relative;
	aspect-ratio: auto;
	height: auto;
	min-height: 0;
}

.hnb__slide picture,
.hnb__slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 767px) {
	.hnb__track {
		aspect-ratio: 800 / 600;
	}

	.hnb__slide {
		aspect-ratio: auto;
	}
}