/*!
 * WooKit — Product Grid.
 * Responsive product grid with AJAX infinite scroll. Uses --wookit-* design
 * tokens so it adopts the theme's accent/surface/radius automatically.
 */

.wookit-product-grid {
	/* Admin cap at 4 (enforced in PHP) — never more, regardless of theme width. */
	--cols: var( --wookit-grid-cols, 4 );
	font-family: var( --wookit-font, inherit ) !important;
	color: var( --wookit-body, inherit ) !important;
	/* CONTAINER-based responsive (not viewport). Layout reacts to the
	   width of the grid's parent column, so the grid stays clean whether
	   it's full-bleed on shop or tucked into a sidebar/split layout. */
	container-type: inline-size;
	container-name: wookit-grid;
}

/* Fix: an Elementor flex container with flex-wrap:wrap (Elementor's default
   "Wrap" on some breakpoints, esp. mobile) wraps the tall grid into a NEW
   column — the container then keeps its short "wrapped" height and the grid
   spills out under the next section. Forcing nowrap on the container(s) hosting
   the grid makes them grow to the grid's full height. Verified on real layouts;
   scoped via :has() so only grid hosts are affected, and nowrap is the safe
   default for a single-column stack anyway. */
.e-con:has( .wookit-product-grid ),
.e-con:has( .wookit-product-grid ) > .e-con-inner {
	flex-wrap: nowrap !important;
}

.wookit-product-grid__list {
	display: grid;
	grid-template-columns: repeat( var( --cols ), minmax( 0, 1fr ) );
	gap: clamp( 1.75rem, 3cqi, 3rem ) clamp( 1.5rem, 2.4cqi, 2.5rem );
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ── Container breakpoints (cqi units = % of grid container, not viewport) */
@container wookit-grid ( max-width: 960px ) {
	.wookit-product-grid__list {
		grid-template-columns: repeat( min( var( --cols ), 3 ), minmax( 0, 1fr ) );
	}
}

@container wookit-grid ( max-width: 640px ) {
	.wookit-product-grid__list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.wookit-product-grid__item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex;
	flex-direction: column;
	gap: clamp( 0.875rem, 1.4cqi, 1.125rem );
}

.wookit-product-grid__item::before { content: none !important; }

/* ── Card ──────────────────────────────────────────────────────────── */
.wookit-product-grid-card {
	display: flex;
	flex-direction: column;
	/* Fill the available slide/item height so cards in the same row stay
	   uniform regardless of body content (variation pills, stock badge, etc.). */
	height: 100%;
	text-decoration: none !important;
	color: inherit !important;
	background: var( --wookit-surface, #fff ) !important;
	border-radius: var( --wookit-radius-md, 8px ) !important;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.07 ), 0 0 0 1px rgba( 0, 0, 0, 0.06 ) !important;
	transition: transform 220ms ease, box-shadow 220ms ease;
	/* -webkit-tap-highlight: remove the blue flash on iOS tap */
	-webkit-tap-highlight-color: transparent;
}

/* Hover effects only on devices with a real pointer (mouse). On touch,
   :hover sticks after tap and looks broken. */
@media ( hover: hover ) and ( pointer: fine ) {
	.wookit-product-grid-card:hover {
		transform: translateY( -3px );
		box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.08 ) !important;
	}
	.wookit-product-grid-card:hover .wookit-product-grid-card__image {
		transform: scale( 1.04 );
	}
}

.wookit-product-grid-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var( --wookit-surface-alt, #f5f5f5 ) !important;
	border-radius: var( --wookit-radius-md, 8px ) !important;
}

.wookit-product-grid-card__image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform 500ms ease;
}

/* ── Badge (sale / out of stock) ───────────────────────────────────── */
.wookit-product-grid-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	padding: 6px 13px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	border-radius: 999px !important;
	line-height: 1.4 !important;
}

.wookit-product-grid-card__badge--sale {
	background: var( --wookit-accent, #1f2937 ) !important;
	color: var( --wookit-accent-fg, #fff ) !important;
}

.wookit-product-grid-card__badge--oos {
	background: var( --wookit-muted, #6b7280 ) !important;
	color: #fff !important;
	left: auto;
	right: 12px;
}

@container wookit-grid ( max-width: 640px ) {
	.wookit-product-grid-card__badge {
		top: 8px;
		left: 8px;
		padding: 4px 10px !important;
		font-size: 11px !important;
	}
	.wookit-product-grid-card__badge--oos {
		right: 8px;
		left: auto;
	}
}

/* ── Body ──────────────────────────────────────────────────────────── */
.wookit-product-grid-card__body {
	padding: clamp( 0.625rem, 1.2cqi, 0.875rem ) clamp( 0.75rem, 1.4cqi, 1rem ) clamp( 0.375rem, 0.6cqi, 0.5rem ) !important;
	display: flex;
	flex-direction: column;
	gap: clamp( 0.125rem, 0.4cqi, 0.25rem );
	/* Grow so the price-row sticks to the bottom of equal-height cards. */
	flex: 1 1 auto;
}

.wookit-product-grid-card__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: clamp( 0.8125rem, 0.7rem + 0.4cqi, 0.9375rem ) !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var( --wookit-text, inherit ) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word !important;
}

/* Short description — replaces the variation attribute pills on the card. */
.wookit-product-grid-card__desc {
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: clamp( 0.75rem, 0.7rem + 0.25cqi, 0.8125rem ) !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	color: var( --wookit-body, #475569 ) !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word !important;
}

.wookit-product-grid-card__price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	/* Push to the bottom of the (flex:1) body so price aligns across cards. */
	margin-top: auto !important;
	padding-top: 0.5rem !important;
	flex-wrap: wrap;
}

.wookit-product-grid-card__price {
	font-size: clamp( 0.9375rem, 0.85rem + 0.45cqi, 1.0625rem ) !important;
	font-weight: 700 !important;
	color: var( --wookit-text, inherit ) !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em !important;
}

/* "De la" prefix before the minimum price on variable products. */
.wookit-product-grid-card__price .wookit-price-from {
	font-size: 0.78em !important;
	font-weight: 500 !important;
	color: var( --wookit-muted, #6b7280 ) !important;
	margin-right: 0.15em !important;
}

/* ── Stock indicator (low stock / backorder, inline next to price) ──── */
.wookit-product-grid-card__stock {
	font-size: clamp( 0.6875rem, 0.65rem + 0.15cqi, 0.75rem ) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	font-variant-numeric: tabular-nums;
	white-space: nowrap !important;
}

.wookit-product-grid-card__stock--low {
	color: var( --wookit-warning, #b45309 ) !important;
}

.wookit-product-grid-card__stock--backorder {
	color: var( --wookit-muted, #6b7280 ) !important;
}

/* ── Variation attribute pills (color/size etc. for variable products) */
.wookit-product-grid-card__attrs {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 0.25rem !important;
}

.wookit-product-grid-card__attr-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.wookit-product-grid-card__attr-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px !important;
	font-size: clamp( 0.625rem, 0.6rem + 0.1cqi, 0.6875rem ) !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	color: var( --wookit-body, inherit ) !important;
	background: var( --wookit-surface-alt, #f3f4f6 ) !important;
	border: 1px solid rgba( 0, 0, 0, 0.06 ) !important;
	border-radius: var( --wookit-radius-pill, 999px ) !important;
	white-space: nowrap !important;
	max-width: 12ch;
	overflow: hidden;
	text-overflow: ellipsis !important;
}

.wookit-product-grid-card__attr-pill--more {
	background: transparent !important;
	border-color: transparent !important;
	color: var( --wookit-muted, #6b7280 ) !important;
	font-weight: 600 !important;
	padding-inline: 2px !important;
}

.wookit-product-grid-card__price del {
	color: var( --wookit-muted, #9ca3af ) !important;
	font-weight: 400 !important;
	font-size: 0.85em !important;
	margin-right: 0.375rem !important;
	text-decoration: line-through !important;
}

.wookit-product-grid-card__price ins {
	text-decoration: none !important;
	color: var( --wookit-accent, currentColor ) !important;
	font-weight: 700 !important;
}

.wookit-product-grid-card__price .woocommerce-Price-amount {
	white-space: nowrap !important;
}

/* ── Actions / add-to-cart (WC outputs <a> or <button>) ────────────── */
.wookit-product-grid-card__actions {
	padding: 0 clamp( 0.75rem, 1.4cqi, 1rem ) clamp( 0.625rem, 1cqi, 0.875rem ) !important;
}

.wookit-product-grid-card__atc,
.wookit-product-grid-card__atc:hover,
.wookit-product-grid-card__atc:focus,
.wookit-product-grid-card__atc:active,
.wookit-product-grid-card__actions .button,
.wookit-product-grid-card__actions .button:hover,
.wookit-product-grid-card__actions .button:focus {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0.375rem 0.75rem !important;
	min-height: 36px !important;
	font-family: inherit !important;
	font-size: clamp( 0.75rem, 0.7rem + 0.15vw, 0.8125rem ) !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	color: var( --wookit-accent-fg, #fff ) !important;
	background: var( --wookit-accent, #1f2937 ) !important;
	border: 0 !important;
	border-radius: var( --wookit-radius-md, 8px ) !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer !important;
	transition: background-color 150ms ease, transform 150ms ease !important;
	-webkit-tap-highlight-color: transparent !important;
}

.wookit-product-grid-card__atc:hover {
	background: var( --wookit-accent-hover, var( --wookit-accent, #1f2937 ) ) !important;
}

.wookit-product-grid-card__atc.added::after,
.wookit-product-grid-card__atc.loading::after {
	margin-left: 0.5rem !important;
}

/* Hide the "View cart" link WC injects after AJAX add-to-cart success.
   The mini-cart popup already reflects the new state — a second CTA is noise. */
.wookit-product-grid-card__actions .added_to_cart,
.wookit-product-grid-card__actions a.added_to_cart {
	display: none !important;
}

/* ── Sentinel + spinner ────────────────────────────────────────────── */
.wookit-product-grid__sentinel {
	height: 1px;
	width: 100%;
	margin: 0.5rem 0 !important;
}

.wookit-product-grid__spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.5rem 0 !important;
}

.wookit-product-grid__spinner-dot {
	width: 28px;
	height: 28px;
	border: 3px solid var( --wookit-border, #e5e7eb ) !important;
	border-top-color: var( --wookit-accent, #1f2937 ) !important;
	border-radius: 50% !important;
	animation: wookit-grid-spin 700ms linear infinite;
}

@keyframes wookit-grid-spin {
	to { transform: rotate( 360deg ); }
}

/* ── Empty state ───────────────────────────────────────────────────── */
.wookit-product-grid__empty {
	text-align: center !important;
	padding: 3rem 1rem !important;
	color: var( --wookit-muted, #6b7280 ) !important;
	font-size: 0.9375rem !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.wookit-product-grid-card,
	.wookit-product-grid-card__image,
	.wookit-product-grid-card__atc {
		transition: none !important;
	}
	.wookit-product-grid__spinner-dot {
		animation: none;
	}
}