/*
 * Autotehnika — slider sniženih proizvoda (kontinuirano/glatko klizanje).
 * Kartice: slika 1:1 (contain, bijela podloga), centriran naslov/cijena, AKCIJA badge.
 * 5 po redu (desktop) / 3 (tablet) / 2 (mobitel). Strelice + auto-klizanje (JS marquee).
 */

.ath-slider {
	--per: 5;
	--gap: 20px;
	position: relative;
}

@media (max-width: 1024px) { .ath-slider { --per: 3; } }
@media (max-width: 600px)  { .ath-slider { --per: 2; --gap: 14px; } }

.ath-slider__viewport {
	overflow: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	touch-action: pan-y;
	cursor: grab;
}
.ath-slider__viewport::-webkit-scrollbar { display: none; }

/* Prevlacenje prstom/misem: sprijeci odabir teksta i pokazi 'grabbing' kursor. */
.ath-slider.is-dragging {
	user-select: none;
	-webkit-user-select: none;
}
.ath-slider.is-dragging .ath-slider__viewport {
	cursor: grabbing;
}

.ath-slider__track {
	display: flex;
	gap: var(--gap);
	padding: 4px 0 10px;
}

.ath-slide {
	flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
}

/* Malo proizvoda i bez klizanja (reduced-motion) — centriraj */
.ath-slider--static .ath-slider__track { justify-content: center; }

/* --- Slika 1:1 --- */
.ath-slide__imglink { display: block; text-decoration: none; }
.ath-slide__imgbox {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background-color: #FFFFFF;
	border: 1px solid #ECE8E4;
	border-radius: 12px;
	overflow: hidden;
}
.ath-slide__imgbox img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 14px;
}
.ath-slide__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #C6291F;
	color: #fff;
	font: 700 11px/1 "Inter", system-ui, sans-serif;
	letter-spacing: 0.04em;
	padding: 5px 8px;
	border-radius: 6px;
}

/* --- Tekst ispod slike (centrirano, puna širina) --- */
.ath-slide__body { text-align: center; padding-top: 12px; }
.ath-slide__cat {
	font: 700 11px/1.3 "Inter", system-ui, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8A8580;
	margin-bottom: 4px;
}
.ath-slide__titlelink { text-decoration: none; }
.ath-slide__title {
	font: 600 15px/1.3 "Inter", system-ui, sans-serif;
	color: #1A1A1A;
	margin: 0 0 6px;
	min-height: 2.6em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ath-slide__price {
	font: 700 15px/1.2 "Inter", system-ui, sans-serif;
	color: #1A1A1A;
	margin-bottom: 10px;
}
.ath-slide__price del { color: #8A8580; font-weight: 400; margin-right: 6px; }
.ath-slide__price ins { text-decoration: none; color: #C6291F; }
.ath-slide__cart { text-align: center; }

/* --- "Dodaj u Moju košaricu" gumb: animacija + "Dodano" --- */
.ath-slide__cart .ath-add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: background-color .25s ease, border-color .25s ease;
}
.ath-slide__cart .ath-add-btn.is-added {
	background: #1A1A1A;
	border-color: #1A1A1A;
	color: #fff;
	animation: ath-pop .38s ease;
}
@keyframes ath-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.07); }
	100% { transform: scale(1); }
}
.ath-slide__check { width: 16px; height: 16px; flex: 0 0 auto; }

/* Poruka o dodavanju — sada je feedback na gumbu, ovo držimo samo za čitace ekrana */
.ath-slider .ath-added {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Strelice (uvijek vidljive) --- */
.ath-slider__nav {
	position: absolute;
	top: 36%;
	transform: translateY(-50%);
	z-index: 6;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 1.5px solid #E4DFDA;
	color: #1A1A1A;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(26,26,26,0.10);
	transition: background-color .2s, border-color .2s, color .2s, transform .12s;
}
.ath-slider__nav svg { width: 22px; height: 22px; }
.ath-slider__nav:hover { background: #C6291F; border-color: #C6291F; color: #fff; }
.ath-slider__nav:active { transform: translateY(-50%) scale(0.94); }
.ath-slider__nav--prev { left: -20px; }
.ath-slider__nav--next { right: -20px; }
.ath-slider__nav[hidden] { display: none; }

@media (max-width: 600px) {
	.ath-slider__nav { width: 38px; height: 38px; }
	.ath-slider__nav svg { width: 18px; height: 18px; }
	.ath-slider__nav--prev { left: -6px; }
	.ath-slider__nav--next { right: -6px; }
}

.ath-slider--empty p {
	color: #5C5652;
	font: 400 16px/1.6 "Inter", system-ui, sans-serif;
}

/* Osiguranje: bijela pozadina + tamna ikona uvijek pobjeđuju naslijeđenu/generičku boju gumba */
.ath-slider .ath-slider__nav { background: #FFFFFF; color: #1A1A1A; border: 1.5px solid #E4DFDA; }
.ath-slider .ath-slider__nav:hover { background: #C6291F; color: #FFFFFF; border-color: #C6291F; }
.ath-slider .ath-slider__nav svg { width: 22px; height: 22px; display: block; }
.ath-slider .ath-slider__nav svg path { fill: none; }
.ath-slider .ath-slider__nav:hover svg path { stroke: #FFFFFF; }

/* Pouzdan puni trokut (strelica) nacrtan CSS-om */
.ath-slider .ath-slider__nav svg { display: none; }
.ath-slider .ath-slider__nav::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}
.ath-slider .ath-slider__nav--prev::before { border-right: 9px solid #1A1A1A; margin-right: 3px; }
.ath-slider .ath-slider__nav--next::before { border-left: 9px solid #1A1A1A; margin-left: 3px; }
.ath-slider .ath-slider__nav--prev:hover::before { border-right-color: #FFFFFF; }
.ath-slider .ath-slider__nav--next:hover::before { border-left-color: #FFFFFF; }

/* Eksplicitna tamnocrvena hover boja na gumbu (bez ovisnosti o CSS varijabli) */
.ath-slide__cart .ath-add-btn:hover { background: #A32218; border-color: #A32218; color: #FFFFFF; }


/* Bez prijelaza boje na gumbu slidera (izbjegava 'flash'/roskasti artefakt pri povratku iz 'Dodano' dok se slider giba). 'Dodano' ostaje tamno i na hover. */
.ath-slider .ath-add-btn { transition: none; }
.ath-slider .ath-add-btn.is-added,
.ath-slider .ath-add-btn.is-added:hover { background: #1A1A1A; border-color: #1A1A1A; color: #FFFFFF; }