/**
 * Celsyn 360 Liquid — shop archive.
 * Restyles Blocksy's own native WooCommerce loop markup (ul.products /
 * li.product / .ct-media-container / .ct-woo-card-actions) to the Liquid
 * Glass card language — no template override, core/Blocksy/WooCommerce
 * updates to that markup keep working.
 */

.products { list-style: none; }

/* Skincare System currently has exactly 2 products (both Coming Soon) —
   Blocksy's own grid still reserves a 4-wide track, leaving both cards
   pinned left with a large empty gutter. Constrain + center the grid
   container only on this one archive; the grid mechanics themselves
   (column count, card markup) are untouched, still Blocksy's. */
body.term-skincare-system ul.products {
	max-width: var( --container-md );
	margin-inline: auto;
}

ul.products li.product {
	position: relative;
	background: var( --env-surface );
	border: 1px solid var( --env-line );
	border-radius: var( --radius-lg );
	overflow: hidden;
	padding: 0 !important;
	margin: 0;
	transition: transform var( --dur-mid ) var( --ease-glass ), box-shadow var( --dur-mid ) var( --ease-glass );
}
ul.products li.product:hover {
	transform: translateY( -4px );
	box-shadow: var( --glass-shadow-sm );
	z-index: var( --z-card-hover );
}
ul.products li.product figure {
	margin: 0;
	aspect-ratio: 4 / 5;
	background: var( --env-surface-2 );
	overflow: hidden;
}
ul.products li.product figure img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	aspect-ratio: auto !important;
	transition: transform var( --dur-slow ) var( --ease-glass );
}
ul.products li.product:hover figure img { transform: scale( 1.045 ); }

ul.products li.product .woocommerce-loop-product__title {
	font-family: var( --font-display );
	font-size: var( --text-lg );
	font-weight: 600;
	margin: var( --space-5 ) var( --space-5 ) 0;
}
ul.products li.product .woocommerce-loop-product__title a { text-decoration: none; color: var( --env-text ); }

ul.products li.product .entry-meta {
	margin: var( --space-2 ) var( --space-5 ) 0;
	padding: 0;
	list-style: none;
	font-size: var( --text-xs );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --env-text-muted );
}
ul.products li.product .entry-meta a { color: inherit; text-decoration: none; }

ul.products li.product .price {
	display: block;
	margin: var( --space-3 ) var( --space-5 ) 0;
	font-family: var( --font-body );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

ul.products li.product .ct-woo-card-actions {
	margin: var( --space-4 ) var( --space-5 ) var( --space-5 );
}
ul.products li.product .ct-woo-card-actions .button,
ul.products li.product .ct-woo-card-actions a.button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var( --control-h-sm );
	width: 100%;
	border-radius: var( --radius-pill );
	background: var( --celsyn-blue );
	color: #fff;
	font-size: var( --text-xs );
	font-weight: 600;
	text-decoration: none;
	border: none;
	transition: transform var( --dur-fast ) var( --ease-glass );
}
ul.products li.product .ct-woo-card-actions .button:hover { transform: translateY( -1px ); }
ul.products li.product.onbackorder .ct-woo-card-actions .button {
	background: transparent;
	border: 1px solid var( --env-line-strong );
	color: var( --env-text );
}

/* Badge (Coming Soon / Research Use) — injected via woocommerce_before_
   shop_loop_item_title, see inc/shop-archive.php. Blocksy renders its own
   native "SOLD OUT" badge (.out-of-stock-badge) in this same corner for
   out-of-stock products — on li.product.outofstock, push this one down
   below it instead of fighting over the same spot. */
.celsyn-card-badges {
	position: absolute;
	top: var( --space-4 );
	left: var( --space-4 );
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-2 );
}
ul.products li.product.outofstock .celsyn-card-badges { top: calc( var( --space-4 ) + 34px ); }

/* Quick View trigger — appears on hover (desktop) / always visible (touch) */
.celsyn-quickview-trigger {
	position: absolute;
	top: var( --space-4 );
	right: var( --space-4 );
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	/* 2026-10-06: opacity:0 alone leaves this real, correctly-sized, non-
	   decorative <button> fully clickable while invisible — pointer-events
	   was never toggled alongside it, found while investigating a reported
	   card hitbox issue. Doesn't overlap the title/CTA below it (own
	   corner, flow siblings), so it wasn't the cause of that report, but
	   it's a real invisible-hitbox bug in its own right and the same class
	   of fix already applied to .celsyn-glass-modal (glass.css). */
	pointer-events: none;
	transition: opacity var( --dur-fast ) var( --ease-standard );
}
ul.products li.product:hover .celsyn-quickview-trigger,
ul.products li.product:focus-within .celsyn-quickview-trigger {
	opacity: 1;
	pointer-events: auto;
}
@media ( hover: none ) {
	.celsyn-quickview-trigger { opacity: 1; pointer-events: auto; }
}
.celsyn-quickview-trigger svg { width: 18px; height: 18px; }

/* ---------- Filter pills bar ------------------------------------------- */
.celsyn-shop-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-2 );
	margin-bottom: var( --space-7 );
}

/* Empty-result state (e.g. a filter pill with nothing published in it yet)
   — still Native WooCommerce's own notice markup, just not left looking
   like an unstyled placeholder. */
.woocommerce-info {
	list-style: none;
	margin: 0;
	padding: var( --space-6 ) var( --space-5 );
	text-align: center;
	background: var( --env-surface );
	border: 1px solid var( --env-line );
	border-radius: var( --radius-lg );
	color: var( --env-text-muted );
}

/* ---------- Archive header ---------------------------------------------- */
.celsyn-archive-header { margin-bottom: var( --space-6 ); }
.celsyn-archive-header h1 {
	font-size: var( --text-2xl );
	margin: var( --space-2 ) 0 0;
}

@media ( prefers-reduced-motion: reduce ) {
	ul.products li.product:hover,
	ul.products li.product:hover figure img { transform: none; }
}