/*
 * BE Studio Gallery — ported from reference site.css: base `.gal`, `.thumbs`, `.mainimg`,
 * `.badge`, `.heart` (+ the 900px block), v11 (thumb/main image fit), v28 (slides and the
 * studio / ember / arch backdrops). Style controls write the --be-sg-* properties.
 */

.elementor-widget-be-studio-gallery {
	--be-sg-thumb: 72px;
	--be-sg-gap: 16px;
	--be-sg-tgap: 10px;
	--be-sg-ratio: 1;
	--be-sg-fade: .9s;
	--be-sg-bottle-w: 56%;
	--be-sg-bottle-h: 68%;
	--be-sg-bg: #EDE4D8;
	--be-sg-plain: #1B1220;
	--be-sg-st-wall: #EDE4D8;
	--be-sg-st-wall2: #E4D8C8;
	--be-sg-st-edge: #D6C6B0;
	--be-sg-st-table: #E1D3C0;
	--be-sg-st-front: #CDBBA3;
	--be-sg-em-glow: rgba(222, 92, 48, .55);
	--be-sg-em-wall: #1E0705;
	--be-sg-em-wall2: #2C0A07;
	--be-sg-em-floor: #120403;
	--be-sg-em-floor2: #1A0605;
	--be-sg-heart-bg: rgba(244, 237, 226, .92);
	--be-sg-heart-on: #B97F35;
	--be-sg-sale-color: #fff;
	/* A definite width: in a flex column inside a grid, Chrome otherwise sizes the row from the
	   min-content width and the square image overflows onto the next row. */
	width: 100%;
	min-width: 0;
}

/* Sticky next to the info column (reference: .gal{position:sticky;top:calc(var(--hdr) + 20px)}). */
@media (min-width: 901px) {
	.elementor-widget-be-studio-gallery.be-sg-sticky-yes {
		position: sticky;
		top: calc(var(--hdr, 84px) + var(--be-sg-sticky-top, 20px));
		align-self: flex-start;
	}
}

.elementor-widget-be-studio-gallery .be-studio-gallery { min-width: 0; }

.elementor-widget-be-studio-gallery .gal {
	display: grid;
	grid-template-columns: var(--be-sg-thumb) minmax(0, 1fr);
	gap: var(--be-sg-gap);
	align-self: start;
}

.elementor-widget-be-studio-gallery .gal.be-sg-none { grid-template-columns: minmax(0, 1fr); }
.elementor-widget-be-studio-gallery .gal.be-sg-bottom { grid-template-columns: minmax(0, 1fr); }
.elementor-widget-be-studio-gallery .gal.be-sg-bottom .thumbs { flex-direction: row; flex-wrap: wrap; order: 2; }

.elementor-widget-be-studio-gallery .thumbs {
	display: flex;
	flex-direction: column;
	gap: var(--be-sg-tgap);
	min-width: 0;
}

.be-site.be-site .elementor-widget-be-studio-gallery .thumbs button {
	display: block;
	width: var(--be-sg-thumb);
	aspect-ratio: 1;
	min-height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 1px solid var(--be-sg-tline, var(--line));
	border-radius: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: border-color .2s;
}

.be-site.be-site .elementor-widget-be-studio-gallery .thumbs button[aria-pressed="true"] {
	border: 2px solid var(--be-sg-tactive, var(--text));
}

.elementor-widget-be-studio-gallery .thumbs .plain { display: block; width: 100%; height: 100%; background: var(--be-sg-plain); }

.elementor-widget-be-studio-gallery .thumbs img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.elementor-widget-be-studio-gallery .thumbs .plain img { object-fit: cover; }

.elementor-widget-be-studio-gallery .mainimg {
	position: relative;
	aspect-ratio: var(--be-sg-ratio);
	max-width: 100%;
	overflow: hidden;
	background: var(--be-sg-bg);
}

.elementor-widget-be-studio-gallery .mainimg .slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--be-sg-fade) ease;
}

.elementor-widget-be-studio-gallery .mainimg .slide.on { opacity: 1; }

.elementor-widget-be-studio-gallery .mainimg .slide.plain { background: var(--be-sg-plain); }

.elementor-widget-be-studio-gallery .mainimg .slide.plain img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	padding: 0;
}

/* Backdrops (v28). */
.elementor-widget-be-studio-gallery .bd {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 16%;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.elementor-widget-be-studio-gallery .mainimg .slide.bd { position: absolute; }

.elementor-widget-be-studio-gallery .bd img {
	position: relative;
	z-index: 1;
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: var(--be-sg-bottle-w);
	max-height: var(--be-sg-bottle-h);
	padding: 0 !important;
	object-fit: contain;
	transform-origin: 50% 100%;
}

.elementor-widget-be-studio-gallery .bd::before,
.elementor-widget-be-studio-gallery .bd::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.elementor-widget-be-studio-gallery .bd-studio {
	background:
		radial-gradient(70% 55% at 50% 36%, rgba(255, 250, 242, .95), rgba(255, 250, 242, 0) 70%),
		linear-gradient(180deg, var(--be-sg-st-wall) 0%, var(--be-sg-st-wall2) 70%, var(--be-sg-st-edge) 70.2%, var(--be-sg-st-table) 80%, var(--be-sg-st-front) 100%);
}

.elementor-widget-be-studio-gallery .bd-studio::before {
	inset: 0;
	background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(90, 60, 30, .16));
}

.elementor-widget-be-studio-gallery .bd-studio::after {
	left: 50%;
	bottom: 13.5%;
	width: 54%;
	height: 7%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%, rgba(60, 38, 20, .38), rgba(60, 38, 20, 0) 72%);
}

.elementor-widget-be-studio-gallery .bd-studio img {
	-webkit-box-reflect: below 1px linear-gradient(transparent 82%, rgba(255, 255, 255, .2));
}

.elementor-widget-be-studio-gallery .bd-ember {
	background:
		radial-gradient(46% 40% at 50% 44%, var(--be-sg-em-glow), rgba(150, 30, 18, .25) 45%, rgba(20, 4, 3, 0) 75%),
		linear-gradient(180deg, var(--be-sg-em-wall) 0%, var(--be-sg-em-wall2) 64%, var(--be-sg-em-floor) 64.3%, var(--be-sg-em-floor2) 100%);
}

.elementor-widget-be-studio-gallery .bd-ember::before {
	left: 0;
	right: 0;
	top: 64%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 170, 120, .45), transparent);
}

.elementor-widget-be-studio-gallery .bd-ember::after {
	left: 50%;
	bottom: 12%;
	width: 64%;
	height: 10%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%, rgba(255, 120, 60, .35), rgba(255, 120, 60, 0) 70%);
}

.elementor-widget-be-studio-gallery .bd-ember img {
	filter: drop-shadow(0 0 22px rgba(255, 120, 60, .25));
	-webkit-box-reflect: below 1px linear-gradient(transparent 70%, rgba(255, 255, 255, .28));
}

.elementor-widget-be-studio-gallery .bd-arch {
	background:
		radial-gradient(90% 60% at 50% 18%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%),
		linear-gradient(170deg, var(--c1) 0%, var(--c1) 35%, var(--c2) 100%);
}

.elementor-widget-be-studio-gallery .bd-arch::before {
	left: 50%;
	bottom: 13%;
	width: 62%;
	height: 72%;
	transform: translateX(-50%);
	border-radius: 999px 999px 14px 14px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 70%, rgba(255, 255, 255, 0));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.elementor-widget-be-studio-gallery .bd-arch::after {
	left: 50%;
	bottom: 10%;
	width: 60%;
	height: 9%;
	transform: translateX(-50%);
	border-radius: 50%;
	background:
		radial-gradient(50% 50% at 50% 40%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .3) 60%, rgba(255, 255, 255, 0) 72%),
		radial-gradient(50% 50% at 50% 60%, rgba(40, 24, 12, .2), rgba(40, 24, 12, 0) 75%);
}

.elementor-widget-be-studio-gallery .bd-arch img { filter: drop-shadow(0 12px 12px rgba(40, 24, 12, .22)); }

.elementor-widget-be-studio-gallery .thumbs .bd img {
	-webkit-box-reflect: unset;
	filter: none;
}

/* Badge and heart on the image. */
.elementor-widget-be-studio-gallery .mainimg .badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	background: var(--be-sg-badge-bg, var(--ink2));
	color: var(--be-sg-badge-color, var(--bone));
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 0;
}

.elementor-widget-be-studio-gallery .mainimg .badge.sale {
	background: var(--be-sg-sale-bg, var(--sale, #9A2E1A));
	color: var(--be-sg-sale-color);
	letter-spacing: .06em;
}

.be-site.be-site .elementor-widget-be-studio-gallery .mainimg .heart {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 38px;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--be-sg-heart-bg);
	color: var(--be-sg-heart-color, var(--text));
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .2s;
}

.be-site.be-site .elementor-widget-be-studio-gallery .mainimg .heart:hover { background: #fff; }
.elementor-widget-be-studio-gallery .heart svg { display: block; }
.elementor-widget-be-studio-gallery .heart[aria-pressed="true"] svg path { fill: var(--be-sg-heart-on); stroke: var(--be-sg-heart-on); }

.elementor-widget-be-studio-gallery .be-sg-empty {
	margin: 0;
	padding: 40px 20px;
	text-align: center;
	background: var(--tile);
	color: var(--muted);
}

/* Tablet and phone: one column, thumbnails in a row below (reference 900px block). */
@media (max-width: 900px) {
	.elementor-widget-be-studio-gallery { --be-sg-thumb: 64px; }
	.elementor-widget-be-studio-gallery .gal { grid-template-columns: minmax(0, 1fr); }
	.elementor-widget-be-studio-gallery .thumbs { flex-direction: row; order: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-be-studio-gallery .mainimg .slide,
	.be-site.be-site .elementor-widget-be-studio-gallery .thumbs button,
	.be-site.be-site .elementor-widget-be-studio-gallery .mainimg .heart { transition: none; }
}