.eblp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.eblp-card {
	position: relative;
}

/* Overrides whatever Elementor hover-animation preset or theme hover effect is adding a shadow +
   lift movement to the card or its contents — confirmed via DevTools to live on a ::before
   pseudo-element, which the universal selector (*) never reaches on its own, hence targeting it
   explicitly below. The class is repeated to push specificity above a typical two-class
   Elementor-generated selector (e.g. .elementor-element.elementor-element-{id}:hover::before)
   without needing to know its exact selector or load order. */
.eblp-card.eblp-card.eblp-card.eblp-card,
.eblp-card.eblp-card.eblp-card.eblp-card *,
.eblp-card.eblp-card.eblp-card.eblp-card::before,
.eblp-card.eblp-card.eblp-card.eblp-card::after,
.eblp-card.eblp-card.eblp-card.eblp-card *::before,
.eblp-card.eblp-card.eblp-card.eblp-card *::after {
	box-shadow: none !important;
	filter: none !important;
	transform: none !important;
	translate: none !important;
}

.eblp-link-disabled {
	cursor: not-allowed;
	pointer-events: none;
}

.eblp-lock-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.55);
}

.eblp-lock-overlay__icon {
	display: block;
	width: 32px;
	height: 32px;
	background-color: #FFFFFF;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1a5 5 0 00-5 5v3H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2v-9a2 2 0 00-2-2h-2V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9zm3 4a2 2 0 012 2c0 .74-.4 1.39-1 1.73V19a1 1 0 11-2 0v-1.27c-.6-.34-1-.99-1-1.73a2 2 0 012-2z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1a5 5 0 00-5 5v3H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2v-9a2 2 0 00-2-2h-2V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9zm3 4a2 2 0 012 2c0 .74-.4 1.39-1 1.73V19a1 1 0 11-2 0v-1.27c-.6-.34-1-.99-1-1.73a2 2 0 012-2z'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Covers the whole card (unlike .eblp-lock-overlay, which only covers the featured image), split
   into a separate background layer (__bg, gets color + opacity from the Style tab) and a content
   layer (__content, icon + wording) so the opacity only ever affects the background, never making
   the icon/text themselves translucent. */
.eblp-unlisted-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.eblp-unlisted-overlay__bg {
	position: absolute;
	inset: 0;
}

.eblp-unlisted-overlay__content {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	padding: 16px;
}

.eblp-unlisted-overlay__icon svg,
.eblp-unlisted-overlay__icon i {
	display: block;
}

.eblp-carousel {
	display: flex;
	flex-direction: column;
}

.eblp-carousel__arrows {
	display: flex;
}

.eblp-carousel__arrows--left {
	justify-content: flex-start;
}

.eblp-carousel__arrows--right {
	justify-content: flex-end;
}

.eblp-carousel__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	padding: 0;
	cursor: pointer;
}

.eblp-carousel__arrow svg {
	display: block;
}

/* --eblp-slides / --eblp-gap are set by the Slides Per View / Gap Style controls; each card's
   width is derived from them so N cards (plus the gaps between them) exactly fill one "page". */
.eblp-carousel__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.eblp-carousel__track::-webkit-scrollbar {
	display: none;
}

.eblp-carousel__track > .eblp-card {
	flex: 0 0 calc((100% - (var(--eblp-slides, 3) - 1) * var(--eblp-gap, 24px)) / var(--eblp-slides, 3));
	scroll-snap-align: start;
}