/**
 * BE Trending Turntable (home §9). Ported from the reference site.css v33 (final effective rules
 * for .trx / .trx-*, including the late fixes: flat stage, per-item perspective, fixed z-order,
 * no filter transition on the items). Every hard value reads a custom property set by the
 * widget's Style controls; the fallback in each var() is the reference value. --c1 / --c2 are the
 * centre product's family tones, swapped by the script.
 */

@property --be-trxa {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes be-trxin {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

@keyframes be-trxfloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

@keyframes be-trxring {
	to { --be-trxa: 360deg; }
}

.e-con .elementor-widget-be-trending-turntable {
	width: 100%;
}

.elementor-widget-be-trending-turntable .trx {
	--c1: #F3D2A8;
	--c2: #C9783C;
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--trx-bg-1, #F3ECE2) 0%, var(--trx-bg-2, #EADFD0) 100%);
	transition: background .8s;
	line-height: 1.7;
	font-family: var(--f, Montserrat, sans-serif);
}

.elementor-widget-be-trending-turntable .trx-in {
	max-width: var(--trx-max, 1640px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: var(--trx-gap, clamp(24px, 4vw, 70px));
	align-items: center;
	padding-top: var(--trx-pad, clamp(70px, 8vw, 110px));
	padding-bottom: var(--trx-pad, clamp(70px, 8vw, 110px));
	padding-left: var(--gl, 32px);
	padding-right: var(--gr, 32px);
}

/* ---------- left column ---------- */
.elementor-widget-be-trending-turntable .trx-k {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font: 500 10.5px var(--f, Montserrat, sans-serif);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--trx-k, #8A6A4A);
}

.elementor-widget-be-trending-turntable .trx-k i {
	width: 30px;
	height: 1px;
	flex: none;
	background: var(--trx-k-line, #B9A58C);
}

.elementor-widget-be-trending-turntable .trx-title {
	margin: 16px 0 0;
	padding: 0;
	font-family: var(--f-serif, "Cormorant Garamond", Georgia, serif);
	font-weight: 500;
	font-size: clamp(44px, 5vw, 78px);
	line-height: 1;
	letter-spacing: -.01em;
	text-wrap: balance;
	color: var(--trx-title, #1D1714);
}

.elementor-widget-be-trending-turntable .trx-title em {
	font-style: italic;
	color: var(--trx-em, var(--c2));
	transition: color .8s;
}

.elementor-widget-be-trending-turntable .trx-count {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 26px;
	font-family: var(--f-serif, "Cormorant Garamond", Georgia, serif);
}

.elementor-widget-be-trending-turntable .trx-count b {
	font-size: 46px;
	font-weight: 600;
	line-height: 1;
	color: var(--trx-count, #1D1714);
}

.elementor-widget-be-trending-turntable .trx-count span {
	font-size: 18px;
	color: var(--trx-count-total, #9A8A7C);
}

.elementor-widget-be-trending-turntable .trx-detail {
	position: relative;
	min-height: 250px;
	margin-top: 10px;
}

.elementor-widget-be-trending-turntable .trx-d {
	animation: be-trxin .9s cubic-bezier(.2, .7, .2, 1);
}

.elementor-widget-be-trending-turntable .trx-d[hidden] {
	display: none;
}

.elementor-widget-be-trending-turntable .trx-brand {
	margin: 14px 0 0;
	font-size: 10.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--trx-brand, #8A7A6C);
}

.elementor-widget-be-trending-turntable .trx-name {
	margin: 6px 0 0;
	padding: 0;
	font-family: var(--f-serif, "Cormorant Garamond", Georgia, serif);
	font-weight: 600;
	font-size: clamp(30px, 2.8vw, 42px);
	line-height: 1.05;
	letter-spacing: -.01em;
	text-wrap: balance;
	color: var(--trx-name, #1D1714);
}

.elementor-widget-be-trending-turntable .trx-notes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 16px 0 0;
}

.elementor-widget-be-trending-turntable .trx-notes li {
	margin: 0;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 11.5px;
	color: var(--trx-chip, #4A3C33);
	background: var(--trx-chip-bg, rgba(255, 255, 255, .55));
	border: 1px solid var(--trx-chip-line, rgba(120, 90, 60, .16));
}

.elementor-widget-be-trending-turntable .trx-sizes {
	display: flex;
	gap: 8px;
	margin-top: 20px;
	flex-wrap: wrap;
}

/* Buttons: reset the kit's global button style (.elementor-kit-N button) first. */
.be-site .elementor-widget-be-trending-turntable .trx-sizes button,
.be-site .elementor-widget-be-trending-turntable .trx-add,
.be-site .elementor-widget-be-trending-turntable .trx-arrow {
	font-family: var(--f, Montserrat, sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.be-site .elementor-widget-be-trending-turntable .trx-sizes button {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 66px;
	padding: 9px 12px;
	border-radius: 14px;
	border: 1px solid var(--trx-size-line, rgba(120, 90, 60, .25));
	background: transparent;
	color: var(--trx-size, #1D1714);
	transition: all .25s;
}

.elementor-widget-be-trending-turntable .trx-sizes button b {
	font-size: 13px;
	font-weight: 600;
}

.elementor-widget-be-trending-turntable .trx-sizes button small {
	font-size: 10.5px;
	color: var(--trx-size-price, #8A7A6C);
}

.be-site .elementor-widget-be-trending-turntable .trx-sizes button[aria-pressed="true"] {
	background: var(--trx-size-on-bg, #1D1714);
	color: var(--trx-size-on, #F6ECE3);
	border-color: var(--trx-size-on-bg, #1D1714);
}

.elementor-widget-be-trending-turntable .trx-sizes button[aria-pressed="true"] small {
	color: var(--trx-size-on-price, #E9C987);
}

.be-site .elementor-widget-be-trending-turntable .trx-sizes button:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.elementor-widget-be-trending-turntable .trx-buy {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.be-site .elementor-widget-be-trending-turntable .trx-add {
	padding: 15px 26px;
	border-radius: 999px;
	border: 0;
	background: linear-gradient(135deg, var(--trx-add-1, #2A0D09), var(--trx-add-2, #4A1A10));
	color: var(--trx-add, #F6ECE3);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	box-shadow: 0 12px 26px var(--trx-add-shadow, rgba(60, 20, 10, .25));
	transition: transform .25s, opacity .25s;
}

.be-site .elementor-widget-be-trending-turntable .trx-add:hover {
	transform: translateY(-2px);
}

.be-site .elementor-widget-be-trending-turntable .trx-add[aria-busy="true"] {
	opacity: .6;
	pointer-events: none;
}

.be-site .elementor-widget-be-trending-turntable .trx-add:disabled {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
}

.be-site .elementor-widget-be-trending-turntable .trx-view {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--trx-view, #1D1714);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
}

.elementor-widget-be-trending-turntable .trx-nav {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 34px;
}

.be-site .elementor-widget-be-trending-turntable .trx-arrow {
	flex: none;
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--trx-arrow-line, rgba(60, 38, 20, .25));
	background: transparent;
	display: grid;
	place-items: center;
	color: var(--trx-arrow, #1D1714);
	transition: all .25s;
}

.be-site .elementor-widget-be-trending-turntable .trx-arrow:hover {
	background: var(--trx-arrow-hover-bg, #1D1714);
	color: var(--trx-arrow-hover, #F6ECE3);
}

.elementor-widget-be-trending-turntable .trx-arrow svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

.elementor-widget-be-trending-turntable .trx-bar {
	flex: 1;
	max-width: var(--trx-bar-w, 220px);
	height: 2px;
	background: var(--trx-bar-track, rgba(60, 38, 20, .15));
	overflow: hidden;
	border-radius: 2px;
}

.elementor-widget-be-trending-turntable .trx-bar i {
	display: block;
	height: 100%;
	background: var(--trx-bar, var(--c2));
	transform-origin: left;
	transform: scaleX(0);
	transition: background .8s;
}

.be-site .elementor-widget-be-trending-turntable .trx-all {
	margin-left: auto;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--trx-all, #6C5A4C);
	text-decoration: none;
}

.be-site .elementor-widget-be-trending-turntable .trx :focus-visible {
	outline: 2px solid var(--amber, #B97F35);
	outline-offset: 3px;
}

/* ---------- right column: flat stage, each item carries its own perspective ---------- */
.elementor-widget-be-trending-turntable .trx-stage {
	position: relative;
	height: var(--trx-stage-h, clamp(420px, 42vw, 600px));
	transform-style: flat;
	perspective: none;
}

.elementor-widget-be-trending-turntable .trx-glow {
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 44%;
	width: 78%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, var(--trx-glow, var(--c1)) 0%, color-mix(in srgb, var(--trx-glow, var(--c1)) 40%, transparent) 45%, transparent 70%);
	transition: background .8s;
	filter: blur(4px);
	pointer-events: none;
}

.elementor-widget-be-trending-turntable:not(.trx-glow-yes) .trx-glow {
	display: none;
}

.elementor-widget-be-trending-turntable .trx-disc {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 7%;
	width: min(62%, 430px);
	aspect-ratio: 3.2;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 40%, var(--trx-disc-1, #FFFDF9) 0%, var(--trx-disc-2, #EFE4D6) 60%, var(--trx-disc-3, #D9C8B2) 100%);
	box-shadow: 0 26px 40px var(--trx-disc-shadow, rgba(60, 38, 20, .22)), inset 0 -6px 14px rgba(120, 90, 60, .18);
}

.elementor-widget-be-trending-turntable .trx-disc i {
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: conic-gradient(from var(--be-trxa), transparent 0 62%, var(--trx-ring, var(--c2)) 80%, transparent 96%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
	opacity: .8;
}

.elementor-widget-be-trending-turntable.trx-ring-yes .trx-disc i {
	animation: be-trxring var(--trx-ring-speed, 6s) linear infinite;
}

.elementor-widget-be-trending-turntable .trx-item {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 13%;
	width: min(34%, 250px);
	height: 58%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	transform: translate(-50%, 0);
	transition: transform var(--trx-turn, 1.25s) cubic-bezier(.65, .05, .25, 1), opacity 1s ease;
	backface-visibility: hidden;
	will-change: transform;
}

/* Before the script places them, only the first bottle shows. */
.elementor-widget-be-trending-turntable .trx-stage:not(.trx-ready) .trx-item:not(.on) {
	opacity: 0;
}

.elementor-widget-be-trending-turntable .trx-item img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 26px 22px rgba(60, 38, 20, .30));
	transition: filter .9s ease;
}

.elementor-widget-be-trending-turntable .trx-item:not(.on) img {
	filter: drop-shadow(0 18px 16px rgba(60, 38, 20, .22)) saturate(.75) brightness(1.04);
}

.elementor-widget-be-trending-turntable.trx-float-yes .trx-item.on img {
	animation: be-trxfloat 4.5s ease-in-out infinite;
}

/* Animation off in the widget, or reduced motion: no loops, no entrance. */
.elementor-widget-be-trending-turntable [data-anim="0"] .trx-disc i,
.elementor-widget-be-trending-turntable [data-anim="0"] .trx-item.on img,
.elementor-widget-be-trending-turntable [data-anim="0"] .trx-d {
	animation: none;
}

.elementor-widget-be-trending-turntable .trx-empty {
	margin: 0;
	padding: 24px;
	border: 1px dashed var(--line, #D8CCBB);
	color: var(--muted, #5F5346);
	font-size: 13px;
}

@media (max-width: 1000px) {
	.elementor-widget-be-trending-turntable .trx-in {
		grid-template-columns: 1fr;
	}

	.elementor-widget-be-trending-turntable .trx-stage {
		order: -1;
		height: var(--trx-stage-h-md, 420px);
	}

	.elementor-widget-be-trending-turntable .trx-detail {
		min-height: 0;
	}
}

@media (max-width: 560px) {
	.elementor-widget-be-trending-turntable .trx-stage {
		height: var(--trx-stage-h-sm, 340px);
	}

	.elementor-widget-be-trending-turntable .trx-item {
		width: 52%;
		height: 60%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-be-trending-turntable .trx-disc i,
	.elementor-widget-be-trending-turntable .trx-item.on img,
	.elementor-widget-be-trending-turntable .trx-d {
		animation: none !important;
	}

	.elementor-widget-be-trending-turntable .trx-item,
	.elementor-widget-be-trending-turntable .trx-item img {
		transition: none;
	}
}