/**
 * Celsyn 360 Liquid — components: buttons, badges, product card, batch card.
 */

/* ---------- Buttons ------------------------------------------------------ */
.celsyn-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --space-2 );
	height: var( --control-h-md );
	padding-inline: var( --space-6 );
	border-radius: var( --radius-pill );
	font-family: var( --font-body );
	font-size: var( --text-sm );
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform var( --dur-fast ) var( --ease-glass ),
	            box-shadow var( --dur-fast ) var( --ease-glass ),
	            background-color var( --dur-fast ) var( --ease-standard );
}
.celsyn-button:active { transform: translateY( 1px ) scale( 0.99 ); }

.celsyn-button--primary {
	background: linear-gradient( 150deg, var( --celsyn-blue-bright ) 0%, var( --celsyn-blue ) 65% );
	color: #fff;
	box-shadow:
		0 1px 0 rgb( 255 255 255 / 0.22 ) inset,
		0 10px 24px rgb( var( --celsyn-blue-rgb ) / 0.32 ),
		0 2px 6px rgb( var( --celsyn-blue-rgb ) / 0.25 );
}
.celsyn-button--primary:hover {
	transform: translateY( -2px );
	box-shadow:
		0 1px 0 rgb( 255 255 255 / 0.28 ) inset,
		0 16px 32px rgb( var( --celsyn-blue-rgb ) / 0.4 ),
		0 4px 10px rgb( var( --celsyn-blue-rgb ) / 0.3 );
}

/* Strongest glass treatment is reserved for CTA controls like this one —
   the system's own rule (header/CTAs/search/filters/mobile nav/modals
   get the strongest glass; content sections stay opaque). */
.celsyn-button--glass {
	background: var( --glass-bg-strong );
	border-color: var( --glass-border );
	color: var( --glass-text );
	backdrop-filter: blur( var( --blur-lg ) ) saturate( 1.6 );
	-webkit-backdrop-filter: blur( var( --blur-lg ) ) saturate( 1.6 );
	box-shadow: var( --glass-shadow-sm ), var( --glass-highlight );
}
.celsyn-button--glass:hover {
	transform: translateY( -2px );
	background: var( --glass-bg-strong );
	box-shadow: var( --glass-shadow ), var( --glass-highlight );
}

.celsyn-button--ghost {
	background: transparent;
	border-color: var( --env-line-strong );
	color: var( --env-text );
}
.celsyn-button--ghost:hover { background: var( --env-surface-2 ); }

.celsyn-button--sm { height: var( --control-h-sm ); padding-inline: var( --space-4 ); font-size: var( --text-xs ); }
.celsyn-button--lg { height: var( --control-h-lg ); padding-inline: var( --space-7 ); font-size: var( --text-md ); }
.celsyn-button--block { width: 100%; }
.celsyn-button[disabled],
.celsyn-button--disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
	transform: none !important;
}

/* ---------- Badges -------------------------------------------------------- */
.celsyn-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	height: 1.9em;
	padding-inline: 0.85em;
	border-radius: var( --radius-pill );
	font-size: var( --text-xs );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var( --env-surface-2 );
	color: var( --env-text-muted );
	border: 1px solid var( --env-line );
}
.celsyn-badge--accent { background: rgb( var( --celsyn-blue-rgb ) / 0.1 ); color: var( --celsyn-blue ); border-color: rgb( var( --celsyn-blue-rgb ) / 0.22 ); }
.celsyn-badge--coming-soon { background: rgb( var( --celsyn-blue-rgb ) / 0.1 ); color: var( --celsyn-blue ); border-color: rgb( var( --celsyn-blue-rgb ) / 0.22 ); }
.celsyn-badge--success { background: rgb( 31 157 107 / 0.12 ); color: var( --celsyn-success ); border-color: rgb( 31 157 107 / 0.25 ); }
.celsyn-badge--on-dark { background: rgb( 255 255 255 / 0.12 ); color: var( --celsyn-paper ); border-color: rgb( 255 255 255 / 0.18 ); }

/* ---------- Product card --------------------------------------------------
   Opaque surface (readability), glass reserved for the badge + hover CTA
   only — per the brief's "glass should feel special" rule. */
.celsyn-product-card {
	display: flex;
	flex-direction: column;
	background: var( --env-surface );
	border: 1px solid var( --env-line );
	border-radius: var( --radius-lg );
	overflow: hidden;
	transition: transform var( --dur-mid ) var( --ease-glass ),
	            box-shadow var( --dur-mid ) var( --ease-glass );
}
.celsyn-product-card:hover {
	transform: translateY( -4px );
	box-shadow: var( --glass-shadow-sm );
	z-index: var( --z-card-hover );
}
.celsyn-product-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var( --env-surface-2 );
	overflow: hidden;
}
.celsyn-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var( --dur-slow ) var( --ease-glass );
}
.celsyn-product-card:hover .celsyn-product-card__media img { transform: scale( 1.045 ); }
.celsyn-product-card__badge {
	position: absolute;
	top: var( --space-4 );
	left: var( --space-4 );
}
.celsyn-product-card__body {
	padding: var( --space-5 );
	display: flex;
	flex-direction: column;
	gap: var( --space-2 );
	flex: 1;
}
.celsyn-product-card__eyebrow {
	font-size: var( --text-xs );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --env-text-muted );
}
.celsyn-product-card__name {
	font-family: var( --font-display );
	font-size: var( --text-lg );
	font-weight: 600;
	margin: 0;
}
.celsyn-product-card__price {
	font-family: var( --font-body );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	margin-top: auto;
	padding-top: var( --space-3 );
}
.celsyn-product-card__cta { margin-top: var( --space-3 ); }

/* ---------- Batch / Lab Results card -------------------------------------- */
.celsyn-batch-card {
	background: var( --env-surface );
	border: 1px solid var( --env-line );
	border-radius: var( --radius-md );
	padding: var( --space-5 );
	display: grid;
	gap: var( --space-3 );
}
.celsyn-batch-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-3 );
}
.celsyn-batch-card__id {
	font-family: var( --font-display );
	font-weight: 600;
	font-size: var( --text-lg );
	font-variant-numeric: tabular-nums;
}
.celsyn-batch-card__row {
	display: flex;
	justify-content: space-between;
	gap: var( --space-3 );
	font-size: var( --text-sm );
	padding-block: var( --space-2 );
	border-top: 1px solid var( --env-line );
}
.celsyn-batch-card__row-label { color: var( --env-text-muted ); }
.celsyn-batch-card__coa { margin-top: var( --space-2 ); }

@media ( prefers-reduced-motion: reduce ) {
	.celsyn-product-card:hover,
	.celsyn-product-card:hover .celsyn-product-card__media img,
	.celsyn-button:active,
	.celsyn-button:hover { transform: none; }
}