.krafty-slider-wrapper {
	position: relative;
	width: 100%;
}

/* ============ ΒΑΣΗ (mobile-first) ============
   Στο mobile το banner γεμίζει 100% το κουτί (σαν τα category tiles),
   χωρίς ξεχωριστό background — δεν χρειάζεται αφού καλύπτει τα πάντα. */

.krafty-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: var(--krafty-bg, #111111);
	aspect-ratio: var(--krafty-ratio-mobile, 1);
	height: var(--krafty-manual-height-mobile, auto);
	box-sizing: border-box;
	padding: var(--krafty-padding-mobile, 0);
	margin: var(--krafty-margin-mobile, 0);
}

.krafty-slider-track {
	position: relative;
	width: 100%;
	height: 100%;
}

.krafty-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease;
	z-index: 1;
	display: block;
}

.krafty-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.krafty-slide-link,
.krafty-slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

.krafty-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Τελίτσες: στο mobile ΚΑΝΟΝΙΚΗ ροή, ακριβώς κάτω από την εικόνα. */
.krafty-slider-dots {
	position: static;
	margin-top: 14px;
	display: flex;
	justify-content: center;
	gap: 10px;
}

/* Βελάκια: πάντα πάνω στην εικόνα (και στα δύο breakpoints), τώρα σχετικά
   με το wrapper αφού βγήκαν εκτός .krafty-slider. */
.krafty-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(205, 168, 85, 0.6);
	background: rgba(17, 17, 17, 0.55);
	color: #cda855;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
	padding: 0;
}

.krafty-slider-arrow:hover {
	background: rgba(205, 168, 85, 0.9);
	color: #111111;
}

.krafty-slider-prev { left: 16px; }
.krafty-slider-next { right: 16px; }

.krafty-slider-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid #cda855;
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.krafty-slider-dot.is-active,
.krafty-slider-dot:hover {
	background: #cda855;
	transform: scale(1.15);
}

/* ============ DESKTOP / TABLET (≥768px) ============
   Banner στο δικό του μέγεθος, κεντραρισμένο, ΠΟΤΕ cropped, πάνω σε
   σταθερό background. Τελίτσες επιστρέφουν να επικαλύπτουν την εικόνα. */

@media (min-width: 768px) {
	.krafty-slider {
		aspect-ratio: var(--krafty-ratio-desktop, 1.78);
		height: var(--krafty-manual-height-desktop, auto);
		padding: var(--krafty-padding-desktop, 0);
		margin: var(--krafty-margin-desktop, 0);
	}

	.krafty-slide,
	.krafty-slide-link {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.krafty-slide picture {
		display: block;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}

	.krafty-slide img {
		width: auto;
		height: auto;
		max-width: min(var(--krafty-img-max-w, 1200px), 100%);
		max-height: var(--krafty-img-max-h, 100%);
		object-fit: contain;
	}

	.krafty-slider-dots {
		position: absolute;
		bottom: 18px;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 0;
		z-index: 5;
	}

	.krafty-slider-arrow {
		width: 44px;
		height: 44px;
		font-size: 24px;
	}
}

/* Στο mobile ΠΟΤΕ δεν δείχνουμε το σταθερό background — το banner καλύπτει
   ήδη τα πάντα μόνο του. */
@media (max-width: 767px) {
	.krafty-slider {
		background-image: none !important;
	}

	.krafty-slider-arrow {
		width: 36px;
		height: 36px;
		font-size: 20px;
	}

	/* Το Kraft theme προσθέτει padding-left/right:20px !important στο
	   .vc_column-inner κάτω από 480px. Το ακυρώνουμε ΜΟΝΟ όταν αυτό το
	   column-inner περιέχει το δικό μας slider — πουθενά αλλού στο site.
	   Έτσι το slider εφάπτεται στις άκρες, χωρίς να πειράξουμε τίποτα άλλο. */
	.vc_column-inner:has(.krafty-slider-wrapper) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ================================================================
 * LCP-safe autoplay
 * Το 1ο slide παραμένει το μεγαλύτερο LCP candidate. Τα επόμενα
 * χρησιμοποιούν ένα ελάχιστα μικρότερο, κεντραρισμένο image box.
 * Η διαφορά είναι πρακτικά αόρατη, αλλά σταματά το 2ο/3ο banner από
 * το να ξαναγράφει το LCP μόνο επειδή έχει διαφορετικές διαστάσεις.
 * ================================================================ */
.krafty-slide.is-lcp-secondary,
.krafty-slide.is-lcp-secondary .krafty-slide-link {
	align-items: center;
	justify-content: center;
}

.krafty-slide.is-lcp-secondary {
	display: flex;
}

.krafty-slide.is-lcp-secondary .krafty-slide-link {
	display: flex;
	width: 100%;
	height: 100%;
}

.krafty-slide.is-lcp-secondary picture {
	width: min(var(--krafty-lcp-secondary-width, calc(100% - 2px)), calc(100% - 2px));
	height: min(var(--krafty-lcp-secondary-height, calc(100% - 2px)), calc(100% - 2px));
	max-width: calc(100% - 2px);
	max-height: calc(100% - 2px);
	margin: auto;
}

.krafty-slide.is-lcp-secondary img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
}

@media (min-width: 768px) {
	.krafty-slide.is-lcp-secondary img {
		object-fit: contain;
	}
}

@media (max-width: 767px) {
	.krafty-slide.is-lcp-secondary img {
		object-fit: cover;
	}
}

/* ================================================================
 * Mobile LCP-safe renderer (v1.3.0)
 * Το πρώτο banner παραμένει κανονικό <img>. Από το 2ο και μετά, στο
 * mobile η εικόνα ζωγραφίζεται σε canvas, ώστε το autoplay να ξεκινά
 * αμέσως χωρίς κάθε νέο slide να δημιουργεί μεταγενέστερο LCP entry.
 * Στο desktop συνεχίζει να χρησιμοποιείται το κανονικό <picture>/<img>.
 * ================================================================ */
.krafty-mobile-canvas {
	display: none;
	width: 100%;
	height: 100%;
}

@media (max-width: 767px) {
	.krafty-slide.is-lcp-secondary picture.krafty-desktop-picture {
		display: none !important;
	}

	.krafty-slide.is-lcp-secondary .krafty-mobile-canvas {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		margin: 0;
	}
}