/* ---------------------------------------------------------------------------
   Product card + grid.
   Grid gaps measured from post-10.css: 20px column, 20-40px row.
   --------------------------------------------------------------------------- */

.nx-products {
	display: grid;
	grid-template-columns: repeat(var(--nx-cols, 4), minmax(0, 1fr));
	gap: 40px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nx-products--cols-1 { --nx-cols: 1; }
.nx-products--cols-2 { --nx-cols: 2; }
.nx-products--cols-3 { --nx-cols: 3; }
.nx-products--cols-4 { --nx-cols: 4; }
.nx-products--cols-5 { --nx-cols: 5; }
.nx-products--cols-6 { --nx-cols: 6; }
.nx-products--cols-8 { --nx-cols: 8; }

/* The 8-up homepage rail needs tighter type to stay readable at ~120px wide. */
.nx-products--dense { gap: 26px 14px; }
.nx-products--dense .nx-card__title { font-size: 13px; line-height: 1.35; }
.nx-products--dense .nx-card__price { font-size: 13px; }
.nx-products--dense .nx-card__action { width: 34px; height: 34px; }

/* WooCommerce's own loop wrapper carries `ul.products`, and woocommerce.css
   gives it a `::before`/`::after` clearfix plus float+percentage widths on
   `li.product`. Inside a grid those two pseudo-elements become real grid ITEMS —
   they eat the first cells and push every card out of alignment — and the
   percentage widths shrink the cards inside their tracks. Neither is needed
   here; the grid does the layout. */
.nx-products::before,
.nx-products::after { content: none; display: none; }

/* Specificity matters here. Woo's rule is
     `.woocommerce ul.products li.product`  -> (0,3,2)
   so an override written as `.woocommerce .nx-products li.product` is (0,3,1)
   and LOSES — the cards keep Woo's 22.05% width and sit at a quarter size
   inside their grid tracks. Matching `ul.products.nx-products` gives (0,4,2). */
.woocommerce ul.products.nx-products li.product,
.woocommerce-page ul.products.nx-products li.product,
.nx-products li.product {
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}

/* --- Card ---------------------------------------------------------------- */

.nx-card {
	display: flex;
	flex-direction: column;
	text-align: center;
}

/* Measured against the source render: the thumbnail wrap has NO border, NO
   radius and a transparent background. The bordered rounded tile was mine. */
.nx-card__media {
	position: relative;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.nx-card__imglink { display: block; position: relative; }

.nx-card__img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: opacity var(--nx-transition), transform 0.35s ease;
}

.nx-card__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.nx-card__media:hover .nx-card__img--hover { opacity: 1; }
.nx-card__media:hover .nx-card__img:not(.nx-card__img--hover) { opacity: 0; }

/* No hover image? Give the single image a gentle scale instead of a flat state. */
.nx-card__media:not(:has(.nx-card__img--hover)):hover .nx-card__img { transform: scale(1.04); }

/* Measured from the source's `.ast-onsale-card` rule, not designed:
     top/left 1.5em · colour --ast-global-color-3 (#111) on
     --ast-global-color-primary (#fff) · radius 20px · padding .4em .8em
     · font-size .87em / weight 500 · shadow 0 4px 4px rgba(0,0,0,.15)
   It is a small WHITE PILL, not a filled purple circle. */
.nx-card__badge {
	position: absolute;
	top: 1.5em;
	left: 1.5em;
	z-index: 4;
	display: inline-block;
	width: fit-content;
	padding: 0.4em 0.8em;
	border-radius: 20px;
	background: var(--nx-white);
	color: var(--nx-ink);
	font-size: 0.87em;
	font-weight: 500;
	line-height: normal;
	letter-spacing: normal;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
}

.nx-card__action {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--nx-purple);
	color: var(--nx-white);
	box-shadow: var(--nx-shadow-card);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--nx-transition), transform var(--nx-transition), background var(--nx-transition);
}
.nx-card__action svg { fill: currentColor; }
.nx-card__action:hover { background: var(--nx-purple-deep); color: var(--nx-white); }

.nx-card:hover .nx-card__action,
.nx-card__action:focus-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Touch devices never fire hover, so the bubble must simply be visible. */
@media (hover: none) {
	.nx-card__action { opacity: 1; transform: none; }
}

.nx-card__tooltip {
	position: absolute;
	right: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%);
	padding: 4px 9px;
	border-radius: 4px;
	background: var(--nx-ink);
	color: var(--nx-white);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--nx-transition);
}
.nx-card__action:hover .nx-card__tooltip { opacity: 1; }

.nx-card__action.loading { opacity: 1; transform: none; }
.nx-card__action.added::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--nx-success);
}

.nx-card__body { padding-top: 14px; }

.nx-card__link { display: block; color: inherit; }

/* Measured: DM Serif Display 16px/500 in the accent purple — not Roboto. */
.nx-card__title {
	margin: 0 0 6px;
	font-family: var(--nx-font-heading);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--nx-purple);
}
.nx-card__link:hover .nx-card__title { color: var(--nx-purple); }

/* Measured: 14px/700 in ink, not navy. */
.nx-card__price {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--nx-ink);
}
.nx-card__price del { font-weight: 400; opacity: 0.55; margin-right: 6px; }
.nx-card__price ins { text-decoration: none; }
.nx-card__price .woocommerce-Price-amount { white-space: nowrap; }

/* --- The persistent add-to-cart button ----------------------------------
   The source renders this under the price on every card, always visible, in
   addition to the hover bubble on the thumbnail. Astra's own values:
     background --ast-global-color-0 (#72069e) · white · uppercase
     15px / weight 400 · border-radius 0 · hover --ast-global-color-2 (#242a56)
   Padding is per-grid: 14px 25px on the archive, 12px in the homepage grids. */

/* MEASURED against the logged-in source render, which overturned the obvious
   assumption: the button is inline-block and sized to its own text (~101px), not
   a full-width bar. radius 3px · padding 12px · 15px/400 uppercase · 1px letter
   spacing · no margin above the box. */
.nx-card__buttons { margin-top: 0; }

.nx-card__buttons .button,
.nx-card__buttons a.button,
.woocommerce .nx-products li.product .nx-card__buttons a.button,
.woocommerce-page .nx-products li.product .nx-card__buttons a.button {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 12px;
	border: 0;
	border-radius: 3px;
	background: var(--nx-purple);
	color: var(--nx-white);
	font-family: var(--nx-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
	white-space: normal;
	transition: background var(--nx-transition), color var(--nx-transition);
}

.nx-card__buttons .button:hover,
.woocommerce .nx-products li.product .nx-card__buttons a.button:hover,
.woocommerce-page .nx-products li.product .nx-card__buttons a.button:hover {
	background: var(--nx-navy);
	color: var(--nx-white);
}

.nx-card__buttons .button.loading { opacity: 0.7; }
.nx-card__buttons .added_to_cart {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
}

/* The dense 8-up rail keeps the same padding but drops a size so the label
   still fits a ~120px track. */
.nx-products--dense .nx-card__buttons .button,
.nx-products--dense .nx-card__buttons a.button {
	padding: 10px;
	font-size: 12px;
	letter-spacing: 0.5px;
}

/* Woo's own "View cart" link after an AJAX add. */
.nx-card .added_to_cart {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
}

/* --- Grid breakpoints ---------------------------------------------------- */

@media (max-width: 1200px) {
	.nx-products--cols-8 { --nx-cols: 6; }
}

@media (max-width: 1024px) {
	.nx-products--cols-8 { --nx-cols: 4; }
	.nx-products--cols-6 { --nx-cols: 4; }
	.nx-products--cols-5 { --nx-cols: 3; }
	.nx-products--cols-4 { --nx-cols: 3; }
	.nx-products--cols-3 { --nx-cols: 2; }
	.nx-products { gap: 32px 20px; }
}

@media (max-width: 767px) {
	.nx-products--cols-8,
	.nx-products--cols-6,
	.nx-products--cols-5,
	.nx-products--cols-4,
	.nx-products--cols-3,
	.nx-products--cols-2 { --nx-cols: 2; }
	.nx-products { gap: 26px 14px; }
	.nx-card__title { font-size: 14px; }
	.nx-card__badge { width: 38px; height: 38px; font-size: 11px; }
}