/* Three product-button skins. Theme mode deliberately retains the existing CSS.
 * Transparent glass filters the real backdrop; there is no opaque glass fill.
 * Both renderers use the same validated setting and live --accent product color.
 */
.product-card.blog-card[data-asa-product-buttons] {
	--product-button-ink: color-mix(in srgb, var(--accent, var(--primary)) 30%, #14233e);
	--product-button-soft: color-mix(in srgb, var(--accent, var(--primary)) 10%, var(--surface, #fff));
	--product-button-line: color-mix(in srgb, var(--accent, var(--primary)) 44%, var(--surface, #fff));
	--product-button-gradient: linear-gradient(125deg, color-mix(in srgb, var(--accent, var(--primary)) 42%, var(--surface, #fff)), color-mix(in srgb, var(--accent, var(--primary)) 22%, var(--surface, #fff)) 58%, color-mix(in srgb, var(--accent, var(--primary)) 32%, var(--surface, #fff)));
	--product-button-shadow: color-mix(in srgb, var(--accent, var(--primary)) 25%, transparent);
}

/* Editable labels are not fixed-length. Keep the disclosure shrinkable so its
 * content wraps within the card rather than widening the mobile viewport.
 */
.product-card.blog-card[data-asa-product-buttons] .product-card-footer .asa-share--compact {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
}
.product-card.blog-card[data-asa-product-buttons] .product-card-footer .asa-share-summary {
	min-width: 0;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}
.product-card.blog-card[data-asa-product-buttons] .product-card-footer .asa-share-summary-symbol { display: inline-flex; flex: 0 0 18px; }
.product-card.blog-card[data-asa-product-buttons] .product-card-footer .asa-share-summary-text { min-width: 0; }

/* A complete, tactile capsule in both the wide story and compact tile layout. */
.product-card.blog-card:not(.asa-product-row):is([data-asa-product-buttons='product'], [data-asa-product-buttons='glass']) .product-card-footer .asa-share-summary {
	padding: 7px 11px;
	gap: 8px;
	font-size: .78rem;
	border-radius: 15px;
}
.product-card.blog-card:is([data-asa-product-buttons='product'], [data-asa-product-buttons='glass']) .product-link {
	position: relative;
	gap: 9px;
	min-height: 44px;
	padding: 7px 11px;
	border: 1px solid var(--product-button-line);
	border-radius: 15px;
	color: var(--product-button-ink);
	background: var(--product-button-gradient);
	box-shadow: 0 9px 20px -13px var(--product-button-shadow), inset 0 1px 0 rgb(255 255 255 / .6);
	transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.product-card.blog-card.asa-product-row:is([data-asa-product-buttons='product'], [data-asa-product-buttons='glass']) .product-link {
	min-height: 48px;
	padding: 8px 13px;
	gap: 11px;
}
.product-card.blog-card:is([data-asa-product-buttons='product'], [data-asa-product-buttons='glass']) .product-arrow,
.product-card.blog-card:is([data-asa-product-buttons='product'], [data-asa-product-buttons='glass']):is(:hover, :focus-within) .product-arrow {
	color: var(--product-button-ink);
	background: rgb(255 255 255 / .52);
	border: 1px solid rgb(255 255 255 / .65);
}
.product-card.blog-card[data-asa-product-buttons='product'] .product-card-footer .asa-share-summary {
	color: var(--product-button-ink);
	background: var(--product-button-soft);
	border-color: var(--product-button-line);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .7);
}
.product-card.blog-card[data-asa-product-buttons='product'] .product-card-footer .asa-share--compact[open] .asa-share-summary {
	color: var(--product-button-ink);
	background: var(--product-button-gradient);
	border-color: var(--accent, var(--primary));
}
.product-card.blog-card[data-asa-product-buttons='product']:is(:hover, :focus-within) .product-link,
.product-card.blog-card[data-asa-product-buttons='product'] .product-card-footer .asa-share-summary:hover {
	border-color: color-mix(in srgb, var(--accent, var(--primary)) 65%, var(--surface, #fff));
	box-shadow: 0 12px 24px -13px var(--product-button-shadow), inset 0 1px 0 rgb(255 255 255 / .8);
}

/* Crystal-clear liquid glass: real background, softened refraction and lens rim.
 * Background-only decoration lives behind the controls, never inside the glass.
 * It remains within the footer and cannot intercept the full-card navigation.
 */
.product-card.blog-card[data-asa-product-buttons='glass'] .product-card-footer { position: relative; }
.product-card.blog-card[data-asa-product-buttons='glass'] .product-card-footer::before {
	content: '';
	position: absolute;
	inset: 8px -5px -7px;
	z-index: 0;
	pointer-events: none;
	border-radius: 24px;
	background: radial-gradient(ellipse at 25% 72%, color-mix(in srgb, var(--accent, var(--primary)) 14%, transparent), transparent 65%), radial-gradient(ellipse at 78% 25%, color-mix(in srgb, var(--accent, var(--primary)) 9%, transparent), transparent 58%);
}
.product-card.blog-card[data-asa-product-buttons='glass'] .product-link,
.product-card.blog-card[data-asa-product-buttons='glass'] .product-card-footer .asa-share-summary,
.product-card.blog-card[data-asa-product-buttons='glass'] .product-card-footer .asa-share--compact[open] .asa-share-summary {
	position: relative;
	color: var(--product-button-ink);
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--accent, var(--primary)) 32%, transparent);
	border-radius: 18px;
	-webkit-backdrop-filter: blur(1.5px) saturate(145%) brightness(1.015);
	backdrop-filter: blur(1.5px) saturate(145%) brightness(1.015);
	box-shadow: inset 0 1px 1px rgb(255 255 255 / .95), inset 0 -1px 1px color-mix(in srgb, var(--accent, var(--primary)) 16%, transparent), inset 1px 0 0 rgb(255 255 255 / .8), inset -1px 0 0 rgb(255 255 255 / .8), 0 8px 18px -12px var(--product-button-shadow);
	transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.product-card.blog-card[data-asa-product-buttons='glass'] .product-link::before,
.product-card.blog-card[data-asa-product-buttons='glass'] .product-card-footer .asa-share-summary::before {
	content: '';
	position: absolute;
	inset: 2px;
	pointer-events: none;
	border: 1px solid rgb(255 255 255 / .45);
	border-radius: 15px;
	background: none;
}
.product-card.blog-card[data-asa-product-buttons='glass'] .product-link::after,
.product-card.blog-card[data-asa-product-buttons='glass'] .product-card-footer .asa-share-summary::after {
	content: '';
	display: block;
	position: absolute;
	inset-inline-start: 15%;
	top: 1px;
	width: 36%;
	height: 2px;
	border-radius: 99px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgb(255 255 255 / .95), transparent);
	transition: inset-inline-start .65s var(--ease), width .65s var(--ease);
}
.product-card.blog-card[data-asa-product-buttons='glass'] .product-arrow,
.product-card.blog-card[data-asa-product-buttons='glass']:is(:hover, :focus-within) .product-arrow {
	background: transparent;
	border-color: color-mix(in srgb, var(--accent, var(--primary)) 24%, transparent);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .8);
}
.product-card.blog-card[data-asa-product-buttons='glass']:is(:hover, :focus-within) .product-link,
.product-card.blog-card[data-asa-product-buttons='glass'] .product-card-footer .asa-share-summary:is(:hover, :focus-visible),
.product-card.blog-card[data-asa-product-buttons='glass'] .product-card-footer .asa-share--compact[open] .asa-share-summary {
	background: transparent;
	border-color: color-mix(in srgb, var(--accent, var(--primary)) 54%, transparent);
	box-shadow: inset 0 1px 2px #fff, inset 0 -1px 1px color-mix(in srgb, var(--accent, var(--primary)) 25%, transparent), inset 1px 0 0 rgb(255 255 255 / .9), inset -1px 0 0 rgb(255 255 255 / .9), 0 11px 22px -13px var(--product-button-shadow);
}
.product-card.blog-card[data-asa-product-buttons='glass']:is(:hover, :focus-within) .product-link::after,
.product-card.blog-card[data-asa-product-buttons='glass'] .product-card-footer .asa-share-summary:is(:hover, :focus-visible)::after {
	inset-inline-start: 49%;
	width: 29%;
}
.product-card.blog-card:is([data-asa-product-buttons='product'], [data-asa-product-buttons='glass']) .product-card-footer .asa-share-summary:focus-visible {
	outline: 3px solid var(--product-button-ink);
	outline-offset: 3px;
}

/* Older engines still get clear glass; no solid-color fill is substituted. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.product-card.blog-card[data-asa-product-buttons='glass'] .product-link,
	.product-card.blog-card[data-asa-product-buttons='glass'] .product-card-footer .asa-share-summary {
		border-color: var(--product-button-line);
	}
}
@media (prefers-reduced-motion: reduce) {
	.product-card.blog-card[data-asa-product-buttons] .product-link,
	.product-card.blog-card[data-asa-product-buttons] .product-link::after,
	.product-card.blog-card[data-asa-product-buttons] .asa-share-summary,
	.product-card.blog-card[data-asa-product-buttons] .asa-share-summary::after { transition: none !important; }
}
.asa-motion-disabled .product-card.blog-card[data-asa-product-buttons] .product-link,
.asa-motion-disabled .product-card.blog-card[data-asa-product-buttons] .product-link::after,
.asa-motion-disabled .product-card.blog-card[data-asa-product-buttons] .asa-share-summary,
.asa-motion-disabled .product-card.blog-card[data-asa-product-buttons] .asa-share-summary::after { transition: none !important; }
@media (prefers-reduced-transparency: reduce) {
	.product-card.blog-card[data-asa-product-buttons='glass'] .product-link,
	.product-card.blog-card[data-asa-product-buttons='glass'] .product-card-footer .asa-share-summary,
	.product-card.blog-card[data-asa-product-buttons='glass'] .product-card-footer .asa-share--compact[open] .asa-share-summary {
		background: var(--surface, #fff) !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		border-color: var(--product-button-line);
	}
	.product-card.blog-card[data-asa-product-buttons='glass'] .product-card-footer::before { display: none; }
}
@media (forced-colors: active), print {
	.product-card.blog-card[data-asa-product-buttons] .product-link,
	.product-card.blog-card[data-asa-product-buttons] .product-card-footer .asa-share-summary,
	.product-card.blog-card[data-asa-product-buttons] .product-card-footer .asa-share--compact[open] .asa-share-summary {
		color: ButtonText !important;
		background: ButtonFace !important;
		border: 1px solid ButtonText !important;
		box-shadow: none !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
	.product-card.blog-card[data-asa-product-buttons] .product-arrow { color: ButtonText !important; background: ButtonFace !important; border-color: ButtonText !important; box-shadow: none !important; }
	.product-card.blog-card[data-asa-product-buttons] .product-card-footer::before,
	.product-card.blog-card[data-asa-product-buttons] .product-link::before,
	.product-card.blog-card[data-asa-product-buttons] .product-link::after,
	.product-card.blog-card[data-asa-product-buttons] .asa-share-summary::before,
	.product-card.blog-card[data-asa-product-buttons] .asa-share-summary::after { display: none; }
	.product-card.blog-card[data-asa-product-buttons] .asa-share-summary:focus-visible { outline-color: Highlight; }
}