/* ============================================================
 * UGREEN — product compare (button, floating bar, table)
 * Palette mirrors the rest of the child theme.
 * ============================================================ */
.ugreen-cmp-wrap {
	--cmp-ink: #0a1a12;
	--cmp-muted: #67766e;
	--cmp-line: #e3e9e5;
	--cmp-green: #018454;
	--cmp-green-d: #016b44;
	--cmp-navy: #013d28;
	--cmp-tint: #effbf5;
}

/* ---------- Button on product cards + single product ---------- */
.ugreen-cmp {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: #67766e;
	cursor: pointer;
	line-height: 1;
}
.ugreen-cmp svg { width: 16px; height: 16px; flex: 0 0 auto; }
.ugreen-cmp:hover { color: #018454; }
.ugreen-cmp.is-active { color: #018454; font-weight: 700; }
.ugreen-cmp.is-active svg { stroke: #018454; }

/* Loop card variant: a quiet text button under the card body. */
.ugreen-loop-cmp {
	margin: 6px 0 0;
	font-size: 12.5px;
	font-weight: 600;
}

/* Single-product variant: fills the pill the action row already styles. */
.ugreen-sp-actions .ugreen-sp-compare .ugreen-cmp {
	width: 100%;
	box-sizing: border-box;
	height: 44px;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--sp-line, #e3e9e5);
	border-radius: 3px;
	background: #fff;
	color: #33453d;
	font-size: 13.5px;
	font-weight: 600;
	transition: border-color .15s ease, color .15s ease;
}
.ugreen-sp-actions .ugreen-sp-compare .ugreen-cmp:hover,
.ugreen-sp-actions .ugreen-sp-compare .ugreen-cmp.is-active {
	border-color: #018454;
	color: #018454;
}

/* "Max reached" hint */
.ugreen-cmp__tip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 30;
	white-space: nowrap;
	background: #0a1a12;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 3px;
	pointer-events: none;
}

/* ---------- Floating bar ---------- */
.ugreen-cmp-bar {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%) translateY(150%);
	z-index: 9998;
	display: flex;
	align-items: center;
	gap: 14px;
	background: #013d28;
	color: #fff;
	padding: 12px 16px;
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba(10, 26, 18, .28);
	transition: transform .25s ease;
	max-width: calc(100% - 24px);
}
.ugreen-cmp-bar.is-open { transform: translateX(-50%) translateY(0); }
.ugreen-cmp-bar__count { font-size: 14px; font-weight: 600; white-space: nowrap; }
.ugreen-cmp-bar__go {
	background: #03b178;
	color: #04231a !important;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	padding: 9px 18px;
	border-radius: 3px;
	white-space: nowrap;
}
.ugreen-cmp-bar__go:hover { background: #03fead; color: #04231a !important; }
.ugreen-cmp-bar__clear {
	background: none;
	border: 0;
	color: #b3e5cd;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
}
.ugreen-cmp-bar__clear:hover { color: #fff; }

@media (max-width: 600px) {
	.ugreen-cmp-bar { gap: 10px; padding: 10px 12px; bottom: 12px; }
	.ugreen-cmp-bar__count { font-size: 13px; }
	.ugreen-cmp-bar__go { padding: 8px 14px; font-size: 13px; }
}

/* ---------- Compare page ---------- */
.ugreen-cmp-page { padding: 32px 0 56px; }
.ugreen-cmp-page .ugreen-cmp-head { margin: 0 0 22px; }
.ugreen-cmp-page h1 {
	font-size: clamp(22px, 1.4rem + 1vw, 32px);
	font-weight: 800;
	color: #013d28;
	margin: 0 0 6px;
	letter-spacing: -.01em;
}
.ugreen-cmp-page .ugreen-cmp-sub { color: #67766e; margin: 0; font-size: 14.5px; }

.ugreen-cmp-empty { color: #67766e; font-size: 15px; margin: 0 0 16px; }
.ugreen-cmp-loading { color: #67766e; font-size: 15px; }

/* The table scrolls inside its own box so the page never scrolls sideways. */
.ugreen-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ugreen-cmp-tbl {
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
	background: #fff;
}
.ugreen-cmp-tbl th,
.ugreen-cmp-tbl td {
	border: 1px solid #e3e9e5;
	padding: 14px;
	vertical-align: middle;
	text-align: left;
	font-size: 14px;
	color: #33453d;
}
.ugreen-cmp-tbl th[scope="row"] {
	width: 140px;
	min-width: 120px;
	background: #f6f9f7;
	font-weight: 700;
	color: #013d28;
	white-space: nowrap;
}
.ugreen-cmp-tbl td { width: auto; }

.ugreen-cmp-row--head td { position: relative; text-align: center; padding-top: 34px; }
.ugreen-cmp-thumb { display: block; margin: 0 auto 10px; max-width: 150px; }
.ugreen-cmp-thumb img { display: block; width: 100%; height: auto; }
.ugreen-cmp-noimg {
	display: block;
	width: 150px;
	height: 150px;
	background: #f2f5f3;
	border: 1px solid #e3e9e5;
}
.ugreen-cmp-name {
	display: block;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.35;
	color: #0a1a12 !important;
	text-decoration: none;
}
.ugreen-cmp-name:hover { color: #018454 !important; }

.ugreen-cmp-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 26px;
	height: 26px;
	line-height: 1;
	border-radius: 50%;
	border: 1px solid #e3e9e5;
	background: #fff;
	color: #67766e;
	font-size: 17px;
	cursor: pointer;
	padding: 0;
}
.ugreen-cmp-remove:hover { border-color: #018454; color: #018454; }

.ugreen-cmp-price { font-weight: 800; color: #013d28; font-size: 16px; }
.ugreen-cmp-price del { font-weight: 500; color: #9aa8a1; margin-right: 6px; }
.ugreen-cmp-stock.is-instock { color: #018454; font-weight: 600; }
.ugreen-cmp-stock.is-outofstock { color: #dc2626; font-weight: 600; }

.ugreen-cmp-add {
	display: inline-block;
	background: #018454;
	color: #fff !important;
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none;
	padding: 11px 18px;
	border-radius: 3px;
}
.ugreen-cmp-add:hover { background: #016b44; color: #fff !important; }
.ugreen-cmp-add--alt {
	background: #fff;
	color: #018454 !important;
	border: 1px solid #018454;
}
.ugreen-cmp-add--alt:hover { background: #effbf5; color: #016b44 !important; }

@media (max-width: 600px) {
	.ugreen-cmp-tbl th[scope="row"] { width: 104px; min-width: 100px; font-size: 13px; padding: 10px; }
	.ugreen-cmp-tbl td { padding: 10px; }
	.ugreen-cmp-thumb, .ugreen-cmp-noimg { max-width: 110px; width: 110px; height: auto; }
}