/*
 * BE Size Circles — ported from reference site.css: base `.eyebrow`, `.circles`, `.circle`,
 * `.buyrow`, `.qty`, `.btn`, `.btn.out`, `.btn.wide`, `.btn[disabled]`, `.wishlink`, v11 (plain
 * dark circles) and the `[data-wish][aria-pressed="true"]` heart. The rows sit in a column with
 * the 16px gap of the reference `.info` column. Style controls write the --be-sc-* properties.
 * Buttons carry `.be-site.be-site` so Elementor's kit button styles do not win.
 */

.elementor-widget-be-size-circles {
	--be-sc-gap: 16px;
	--be-sc-label-space: 12px;
	--be-sc-circle: 76px;
	--be-sc-cgap: 12px;
	--be-sc-circle-color: #fff;
	--be-sc-qty-bg: #fff;
	--be-sc-btn-h: 52px;
	--be-sc-add-hover-color: #fff;
	--be-sc-wish-on: #B97F35;
	min-width: 0;
}

.elementor-widget-be-size-circles .be-size-circles {
	display: flex;
	flex-direction: column;
	gap: var(--be-sc-gap);
	min-width: 0;
}

.elementor-widget-be-size-circles .be-sc-label {
	margin: 0 0 var(--be-sc-label-space);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--be-sc-label, var(--soft));
}

.elementor-widget-be-size-circles .circles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--be-sc-cgap);
}

.be-site.be-site .elementor-widget-be-size-circles .circle {
	position: relative;
	width: var(--be-sc-circle);
	height: var(--be-sc-circle);
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid transparent;
	outline: 1px solid var(--be-sc-circle-line, var(--line));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--be-sc-circle-bg, var(--ink2));
	color: var(--be-sc-circle-color);
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: border-color .2s;
}

.be-site.be-site .elementor-widget-be-size-circles .circle[aria-pressed="true"] {
	border-color: var(--be-sc-circle-ring, var(--paper));
	outline: 2px solid var(--be-sc-circle-active, var(--text));
}

.be-site.be-site .elementor-widget-be-size-circles .circle:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
}

.be-site.be-site .elementor-widget-be-size-circles .circle[disabled] {
	opacity: .4;
	cursor: not-allowed;
}

.elementor-widget-be-size-circles .circle img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	filter: brightness(.42);
}

.elementor-widget-be-size-circles .circle b,
.elementor-widget-be-size-circles .circle small { position: relative; }
.elementor-widget-be-size-circles .circle b { font-size: 15px; font-weight: 700; }
.elementor-widget-be-size-circles .circle small { font-size: 10px; opacity: .9; }

/* Quantity + add to cart. */
.elementor-widget-be-size-circles .buyrow {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
}

.elementor-widget-be-size-circles .buyrow.be-sc-noqty { grid-template-columns: minmax(0, 1fr); }

.elementor-widget-be-size-circles .qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--be-sc-qty-line, var(--line));
	background: var(--be-sc-qty-bg);
	color: var(--be-sc-qty-color, var(--text));
}

.be-site.be-site .elementor-widget-be-size-circles .qty button {
	width: 42px;
	height: calc(var(--be-sc-btn-h) - 2px);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.be-site.be-site .elementor-widget-be-size-circles .qty button[aria-disabled="true"] { cursor: default; }

.elementor-widget-be-size-circles .qty [data-qty] {
	min-width: 26px;
	text-align: center;
	font-size: 13.5px;
	font-weight: 600;
}

.be-site.be-site .elementor-widget-be-size-circles .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--be-sc-btn-h);
	margin: 0;
	padding: 0 34px;
	background: var(--be-sc-add-bg, var(--ink2));
	color: var(--be-sc-add-color, var(--bone));
	border: 1.5px solid var(--be-sc-add-bg, var(--ink2));
	border-radius: 0;
	font-family: var(--f);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}

.be-site.be-site .elementor-widget-be-size-circles .btn:hover {
	background: var(--be-sc-add-hover-bg, var(--amber));
	border-color: var(--be-sc-add-hover-bg, var(--amber));
	color: var(--be-sc-add-hover-color);
}

.be-site.be-site .elementor-widget-be-size-circles .btn.out {
	background: transparent;
	color: var(--be-sc-buy-color, var(--text));
	border-color: var(--be-sc-buy-line, var(--be-sc-buy-color, var(--ink2)));
}

.be-site.be-site .elementor-widget-be-size-circles .btn.out:hover {
	background: var(--be-sc-buy-hover-bg, var(--ink2));
	color: var(--be-sc-buy-hover-color, var(--bone));
	border-color: var(--be-sc-buy-hover-bg, var(--ink2));
}

.be-site.be-site .elementor-widget-be-size-circles .btn:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
}

.be-site.be-site .elementor-widget-be-size-circles .btn[disabled] { opacity: .4; cursor: not-allowed; }
.be-site.be-site .elementor-widget-be-size-circles .btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.elementor-widget-be-size-circles .btn.wide { width: 100%; }

/* Wishlist link. */
.be-site.be-site .elementor-widget-be-size-circles .wishlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	align-self: flex-start;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--be-sc-wish-color, var(--muted));
	font-family: var(--f);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
}

.be-site.be-site .elementor-widget-be-size-circles .wishlink:hover { color: var(--be-sc-wish-hover, var(--text)); }
.elementor-widget-be-size-circles .wishlink svg { display: block; flex: none; }
.elementor-widget-be-size-circles .wishlink[aria-pressed="true"] svg path { fill: var(--be-sc-wish-on); stroke: var(--be-sc-wish-on); }

.elementor-widget-be-size-circles .be-sc-empty {
	margin: 0;
	padding: 20px;
	background: var(--tile);
	color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
	.be-site.be-site .elementor-widget-be-size-circles .circle,
	.be-site.be-site .elementor-widget-be-size-circles .btn { transition: none; }
}