.el-circle-3d-gallery__wrapper{
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	touch-action: pan-y;
}
/* The overflow-hidden/perspective 3D viewport. Kept separate from the wrapper
   so an "Outside" arrows position can push the buttons past its edges without
   getting clipped — the wrapper itself never clips. */
.el-circle-3d-gallery__scene{
	position: relative;
	width: 100%;
	min-height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	perspective: 2000px;
	order: 0;
}
.el-circle-3d-gallery__ring{
	position: relative;
	width: 1px;
	height: 1px;
	transform-style: preserve-3d;
	will-change: transform;
}
/* Only applied for the duration of a prev/next arrow click — drag, scroll,
   and autoplay all update every frame and must stay untransitioned so they
   track 1:1 instead of lagging behind the input. */
.el-circle-3d-gallery__ring.el_circle_3d_gallery_ring_animated{
	transition: transform .5s cubic-bezier(.23, 1, .32, 1);
}
/* Item. */
.el-circle-3d-gallery-item{
	position: absolute;
	top: 50%;
	left: 50%;
	transform-style: preserve-3d;
	cursor: grab;
	/* Only the card currently facing the camera (".__item_active", toggled
	   in script.min.js as the ring rotates) responds to hover/clicks.
	   Neighbouring cards project close enough on screen for the browser's
	   3D hit-testing to occasionally land on one of them instead of the
	   card actually under the cursor, which made hover — and therefore the
	   flip — flicker between cards. Restricting interaction to one
	   unambiguous card removes the overlap entirely. */
	pointer-events: none;
}
.el-circle-3d-gallery-item.el_circle_3d_gallery_item_active{
	pointer-events: auto;
}
.el-circle-3d-gallery-item:active{
	cursor: grabbing;
}
/* Sizing-only clip box — no border/radius here. The Card Border design
   setting is applied to ".__face" instead (see below), so the visible
   border rotates with the flip along with everything else on the card. */
.el-circle-3d-gallery-item__inner{
	width: 300px;
	aspect-ratio: 3 / 4;
	position: relative;
	overflow: hidden;
}
.el-circle-3d-gallery-item__flip{
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 1.5s cubic-bezier(.23, 1, .32, 1);
}
.el-circle-3d-gallery__wrapper[data-flip-enabled="on"] .el-circle-3d-gallery-item:hover .el-circle-3d-gallery-item__flip{
	transform: rotateY(180deg);
}
/* Card Border (color/width/radius) is applied here dynamically. Chromium
   fails to clip border-radius + overflow:hidden on an element that also
   carries transform-style:preserve-3d, so this stays on the face — a plain
   2D box (only its ".__flip" parent has preserve-3d) — rather than on
   ".__inner" or ".__flip" themselves. */
.el-circle-3d-gallery-item__face{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	overflow: hidden;
}
.el-circle-3d-gallery-item__face--back{
	transform: rotateY(180deg);
}
.el-circle-3d-gallery-item__image{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.el-circle-3d-gallery-item__link{
	display: block;
	width: 100%;
	height: 100%;
}

/* Title, caption & overlay icon, shown on every card's front face.
   Content position (justify-content) and background color are set dynamically
   from the module's Content/Design settings — see overlay_position_declaration()
   and the overlay backgroundColor style rule. */
.el-circle-3d-gallery-item__caption_wrap{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 16px;
	opacity: 1;
	transition: opacity .3s ease;
	pointer-events: none;
}
/* The caption belongs to the front face only — force it out as soon as the card starts flipping, so it never shows on the back. */
.el-circle-3d-gallery__wrapper[data-flip-enabled="on"] .el-circle-3d-gallery-item:hover .el-circle-3d-gallery-item__caption_wrap{
	opacity: 0 !important;
}
.el-circle-3d-gallery-item__overlay-icon{
	display: block;
	font-size: 32px;
	line-height: 1;
	margin-bottom: 8px;
	align-self: center;
}
.el-circle-3d-gallery-item__title{
	margin: 0;
}
.el-circle-3d-gallery-item__caption{
	margin: 4px 0 0;
}

/* Navigation arrows.
   Default ("inside"): the nav-group overlays the scene, pinned edge-to-edge,
   with the two buttons pushed apart via space-between — this is what used to
   be hardcoded as left:20px/right:20px on each button individually. */
.el-circle-3d-gallery__nav-group{
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	pointer-events: none;
}
.el-circle-3d-gallery__nav{
	cursor: pointer;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.4);
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	transition: transform .3s ease;
}
.el-circle-3d-gallery__nav .et-pb-icon{
	line-height: 0;
}
.el-circle-3d-gallery__nav .et-pb-icon::after{
	line-height: 1;
	vertical-align: middle;
}

/* Arrows Position: "Outside" — same overlay, buttons pushed past their own
   edge by their own width (translateX(±100%) is relative to the element's
   own box, so this clears any button size/padding) plus a fixed gap. */
.el-circle-3d-gallery__wrapper[data-arrows-position="outside"] .el-circle-3d-gallery__nav-prev{
	transform: translateX(calc(-100% - 10px));
}
.el-circle-3d-gallery__wrapper[data-arrows-position="outside"] .el-circle-3d-gallery__nav-next{
	transform: translateX(calc(100% + 10px));
}

/* Arrows Position: top_ and bottom_ variants — the nav-group leaves the
   overlay and becomes an in-flow row above/below the scene, ordered via
   the wrapper's own column flex layout. */
.el-circle-3d-gallery__wrapper[data-arrows-position^="top_"] .el-circle-3d-gallery__nav-group,
.el-circle-3d-gallery__wrapper[data-arrows-position^="bottom_"] .el-circle-3d-gallery__nav-group{
	position: static;
	inset: auto;
	padding: 0;
	gap: 10px;
	pointer-events: auto;
}
.el-circle-3d-gallery__wrapper[data-arrows-position^="top_"] .el-circle-3d-gallery__nav-group{
	order: -1;
	margin-bottom: 15px;
}
.el-circle-3d-gallery__wrapper[data-arrows-position^="bottom_"] .el-circle-3d-gallery__nav-group{
	order: 1;
	margin-top: 15px;
}
.el-circle-3d-gallery__wrapper[data-arrows-position="top_left"] .el-circle-3d-gallery__nav-group,
.el-circle-3d-gallery__wrapper[data-arrows-position="bottom_left"] .el-circle-3d-gallery__nav-group{
	justify-content: flex-start;
}
.el-circle-3d-gallery__wrapper[data-arrows-position="top_center"] .el-circle-3d-gallery__nav-group,
.el-circle-3d-gallery__wrapper[data-arrows-position="bottom_center"] .el-circle-3d-gallery__nav-group{
	justify-content: center;
}
.el-circle-3d-gallery__wrapper[data-arrows-position="top_right"] .el-circle-3d-gallery__nav-group,
.el-circle-3d-gallery__wrapper[data-arrows-position="bottom_right"] .el-circle-3d-gallery__nav-group{
	justify-content: flex-end;
}

/* Show Arrows On Hover. Fades the whole group in/out; for the "inside" and
   "outside" overlay positions the buttons also slide, in opposite directions:
   "inside" arrows sit tucked toward the edge and slide IN toward the image on
   hover, "outside" arrows sit tucked in near the edge and slide further OUT,
   away from the image, on hover. */
.el-circle-3d-gallery__wrapper[data-arrows-hover="on"] .el-circle-3d-gallery__nav-group{
	opacity: 0;
	transition: opacity .3s ease;
}
.el-circle-3d-gallery__wrapper[data-arrows-hover="on"]:hover .el-circle-3d-gallery__nav-group{
	opacity: 1;
}
.el-circle-3d-gallery__wrapper[data-arrows-position="inside"][data-arrows-hover="on"] .el-circle-3d-gallery__nav-prev{
	transform: translateX(-12px);
}
.el-circle-3d-gallery__wrapper[data-arrows-position="inside"][data-arrows-hover="on"] .el-circle-3d-gallery__nav-next{
	transform: translateX(12px);
}
.el-circle-3d-gallery__wrapper[data-arrows-position="inside"][data-arrows-hover="on"]:hover .el-circle-3d-gallery__nav-prev,
.el-circle-3d-gallery__wrapper[data-arrows-position="inside"][data-arrows-hover="on"]:hover .el-circle-3d-gallery__nav-next{
	transform: translateX(0);
}
.el-circle-3d-gallery__wrapper[data-arrows-position="outside"][data-arrows-hover="on"] .el-circle-3d-gallery__nav-prev{
	transform: translateX(calc(-100% + 2px));
}
.el-circle-3d-gallery__wrapper[data-arrows-position="outside"][data-arrows-hover="on"] .el-circle-3d-gallery__nav-next{
	transform: translateX(calc(100% - 2px));
}
.el-circle-3d-gallery__wrapper[data-arrows-position="outside"][data-arrows-hover="on"]:hover .el-circle-3d-gallery__nav-prev{
	transform: translateX(calc(-100% - 10px));
}
.el-circle-3d-gallery__wrapper[data-arrows-position="outside"][data-arrows-hover="on"]:hover .el-circle-3d-gallery__nav-next{
	transform: translateX(calc(100% + 10px));
}

/* Responsive: shrink the box; card size can still be overridden per-breakpoint in
   Design settings. Perspective deliberately stays constant across breakpoints —
   the script computes each card's translateZ relative to it, so shrinking
   perspective without also shrinking that depth pushes cards toward/past the
   camera plane and the 3D transform breaks down. */
@media (max-width: 980px) {
	.el-circle-3d-gallery__scene{
		min-height: 380px;
	}
}
@media (max-width: 767px) {
	.el-circle-3d-gallery__scene{
		min-height: 320px;
	}
}