/* =========================================================
   Lucas Products Per Row  |  frontend.css
   ========================================================= */

/* ── Grid wrapper ──────────────────────────────────────── */
.lppr-grid {
	display: grid;
	box-sizing: border-box;
	width: 100%;
}

/* ── Product card ──────────────────────────────────────── */
.lppr-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	box-sizing: border-box;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
}

.lppr-card:hover {
	transform: translateY(-4px);
}

/* ── Circular image container ──────────────────────────── */
.lppr-circle {
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	margin-bottom: 14px;
	flex-shrink: 0;
}

.lppr-circle img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ── Product title ─────────────────────────────────────── */
.lppr-title {
	margin: 0;
	padding: 0;
	line-height: 1.4;
	width: 100%;
	word-break: break-word;
}

/* ── Carousel wrapper ──────────────────────────────────── */
.lppr-carousel-wrap {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.lppr-carousel-wrap .swiper {
	width: 100%;
	padding-bottom: 4px;
}

.lppr-carousel-wrap .swiper-slide {
	height: auto;
	box-sizing: border-box;
	display: flex;
}

.lppr-carousel-wrap .swiper-slide .lppr-card {
	width: 100%;
}

/* ── Nav arrows sizing ─────────────────────────────────── */
.lppr-carousel-wrap .swiper-button-prev,
.lppr-carousel-wrap .swiper-button-next {
	width: 36px;
	height: 36px;
}

.lppr-carousel-wrap .swiper-button-prev::after,
.lppr-carousel-wrap .swiper-button-next::after {
	font-size: 18px;
	font-weight: 700;
}

/* ── Pagination dots ───────────────────────────────────── */
.lppr-carousel-wrap .swiper-pagination {
	position: relative;
	margin-top: 14px;
}