/* Scoped to the shortcode; the theme/builder owns sidebar placement. */
.mge-product-widget {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	padding: 15px;
	border-radius: 10px;
	background: var(--dina-box-bg-color, #fff);
	color: var(--dina-main-text-color, #212529);
	box-shadow: var(--dina-main-box-shadow, 0 0 10px rgba(0, 0, 0, .1));
	font-family: var(--dina-main-font, Tahoma, Arial, sans-serif);
	font-size: 15px;
	line-height: 1.5;
	text-align: start;
	overflow-wrap: anywhere;
}

/* Desktop sidebar: pin the Elementor widget wrapper (the child of the tall
   column) like the TOC. :has() also outranks .elementor-widget's
   position: relative.
   ponytail: --mge-header-offset is set by table-of-contents.js; on a page
   without a TOC this pins 20px from the top. Move the measuring into a shared
   script if the widget ever ships on TOC-less pages with a sticky header. */
@media (min-width: 1025px) {
	.elementor-widget:has(.mge-product-widget) {
		position: sticky;
		z-index: 10;
		inset-block-start: calc(var(--mge-header-offset, 0px) + 20px);
		transition: inset-block-start 0.2s ease;
	}

	.mge-product-widget {
		max-block-size: calc(100vh - var(--mge-header-offset, 0px) - 40px);
		overflow-y: auto;
	}
}

.mge-product-widget-heading {
	margin-block-end: 10px;
	text-align: center;
}

.mge-product-widget .mge-product-widget-title {
	display: inline-block;
	margin: 0 0 7.5px;
	padding: 0 10px 5px;
	border-block-end: 2px solid var(--dina-custom-color, #248c6d);
	color: inherit;
	font: inherit;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
}

.mge-product-widget .mge-product-widget-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mge-product-widget .mge-product-widget-item {
	margin: 0;
	padding: 0;
}

.mge-product-widget .mge-product-widget-link {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
}

.mge-product-widget-link:focus-visible {
	outline: 3px solid var(--dina-custom-color, #248c6d);
	outline-offset: 4px;
}

.mge-product-widget .mge-product-widget-link img {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 64px;
	height: 64px;
	max-width: 100%;
	margin: 0;
	border: 1px solid var(--dina-main-border-color, #e9ecef);
	border-radius: 10px;
	object-fit: contain;
}

.mge-product-widget-details {
	display: grid;
	flex: 1;
	min-width: 0;
	gap: 0;
}

.mge-product-widget-name {
	font-size: 14px;
	font-weight: 400;
}

.mge-product-widget-price {
	color: var(--dina-custom-color, #248c6d);
	font-size: 15px;
}

/* The gold-price plugin centers its card markup; keep it on the image side. */
.mge-product-widget .mge-product-widget-price .gp-price {
	text-align: start;
}

.mge-product-widget .mge-product-widget-price .gp-price__row {
	justify-content: flex-start;
}

.mge-product-widget-price ins {
	background: transparent;
	color: inherit;
	text-decoration: none;
}

.mge-product-widget-price del {
	margin-inline-end: .4em;
}

.mge-product-widget-price .woocommerce-Price-currencySymbol,
.mge-product-widget-price .gp-price__currency {
	color: var(--dina-main-text-color, #212529);
}

.mge-product-widget-link:hover .mge-product-widget-name {
	color: var(--dina-custom-color, #248c6d);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget:has(.mge-product-widget) {
		transition: none;
	}
}