/* 420Express Catalog Metadata v0.2.4
 *
 * Native WoodMart layout integration.
 *
 * IMPORTANT:
 * - WoodMart owns product-card layout, title/category/price/button alignment,
 *   card width, grid columns, carousel sizing and responsive behavior.
 * - This stylesheet styles ONLY the elements injected by this plugin.
 * - Plugin rows mirror the native card text alignment via
 *   --exp420-card-align, populated by catalog-metadata.js.
 */

/* Every enrichment row owns a full line inside WoodMart's .wrap-price flex
 * container, but does not change .wrap-price itself. */
.exp420-catalog-meta,
.exp420-catalog-reviews,
.exp420-catalog-variants {
	box-sizing: border-box !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	text-align: var(--exp420-card-align, inherit) !important;
}

/* Metadata: inline chips inside a block row so native text alignment controls
 * whether the chips sit left, center or right. */
.exp420-catalog-meta {
	display: block !important;
	margin-top: 8px !important;
	margin-bottom: 9px !important;
	font-size: 12px !important;
	line-height: 1.25 !important;
}

.exp420-catalog-meta__item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 3px 3px !important;
	padding: 5px 8px !important;
	border: 1px solid rgba(36, 79, 66, .12) !important;
	border-radius: 999px !important;
	background: #f3f8f5 !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	vertical-align: middle !important;
}

.exp420-catalog-meta__label {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .02em !important;
	text-transform: uppercase !important;
}

.exp420-catalog-meta__value {
	font-weight: 700 !important;
	color: #244f42 !important;
}

.exp420-catalog-meta__item.is-thc {
	background: #f2f9e9 !important;
	border-color: rgba(118, 184, 42, .24) !important;
}

.exp420-catalog-meta__item.is-thc .exp420-catalog-meta__label {
	color: #69a925 !important;
}

.exp420-catalog-meta__item.is-cbd {
	background: #edf7f2 !important;
	border-color: rgba(63, 143, 105, .22) !important;
}

.exp420-catalog-meta__item.is-cbd .exp420-catalog-meta__label {
	color: #3f8f69 !important;
}

/* Reviews: block row + inline-flex link. No alignment is forced on WoodMart. */
.exp420-catalog-reviews {
	display: block !important;
	margin-top: 1px !important;
	margin-bottom: 8px !important;
}

.exp420-catalog-reviews__link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	text-decoration: none !important;
	vertical-align: middle !important;
}

.exp420-catalog-stars {
	position: relative !important;
	display: inline-block !important;
	font-size: 15px !important;
	line-height: 1 !important;
	letter-spacing: 1px !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	box-shadow: none !important;
}

.exp420-catalog-stars__empty {
	display: block !important;
	color: #c8c8c8 !important;
}

.exp420-catalog-stars__fill {
	position: absolute !important;
	inset: 0 auto auto 0 !important;
	display: block !important;
	overflow: hidden !important;
	color: #e9b500 !important;
	white-space: nowrap !important;
}

.exp420-catalog-reviews__count {
	color: #777 !important;
	font-size: 12px !important;
	line-height: 1 !important;
}

/* Variants: block row with inline buttons. This makes the native card's
 * alignment apply naturally instead of using justify-content overrides. */
.exp420-catalog-variants {
	display: block !important;
	margin-top: 0 !important;
	margin-bottom: 10px !important;
}

.exp420-catalog-variant {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	min-width: 34px !important;
	height: 34px !important;
	margin: 0 2px 4px !important;
	padding: 0 9px !important;
	border: 1px solid #b8b8b8 !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: #343434 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	cursor: pointer !important;
	vertical-align: middle !important;
}

.exp420-catalog-variant.is-selected {
	border-color: #111 !important;
	background: #111 !important;
	color: #fff !important;
}

.exp420-catalog-variant.is-unavailable {
	border-color: #dedede !important;
	background: #fafafa !important;
	color: #aaa !important;
	cursor: not-allowed !important;
}

.exp420-catalog-variant.is-unavailable::after {
	content: "";
	position: absolute;
	left: 5px;
	right: 5px;
	top: 50%;
	height: 1px;
	background: #e5a2a2;
	transform: rotate(-45deg);
	transform-origin: center;
}

.exp420-catalog-variant.requires-product-page {
	cursor: pointer !important;
}

/* Keep only state styling for the existing native WoodMart/WooCommerce loop
 * button. Width, alignment, color and layout remain theme-owned. */
.exp420-catalog-loop-button.exp420-catalog-ready {
	cursor: pointer !important;
}

.exp420-catalog-loop-button.loading {
	opacity: .72 !important;
	pointer-events: none !important;
}

@media (max-width: 575px) {
	.exp420-catalog-meta {
		margin-top: 7px !important;
		margin-bottom: 8px !important;
	}

	.exp420-catalog-meta__item {
		padding: 4px 7px !important;
	}
}


/* v0.2.2 — consistent plugin-owned information slots.
 *
 * Products do not all have THC/CBD or selectable variants. Keep those missing
 * rows as invisible placeholders so reviews, variants, price and native action
 * areas do not jump vertically from card to card. WoodMart still owns the card
 * itself; only plugin-rendered rows receive reserved space.
 */
.exp420-catalog-enrichment {
	box-sizing: border-box !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: var(--exp420-card-align, inherit) !important;
}

.exp420-catalog-enrichment .exp420-catalog-meta {
	min-height: 31px !important;
}

.exp420-catalog-enrichment .exp420-catalog-reviews {
	min-height: 24px !important;
}

.exp420-catalog-enrichment .exp420-catalog-variants {
	min-height: 38px !important;
}

.exp420-catalog-enrichment .is-placeholder {
	visibility: hidden !important;
	pointer-events: none !important;
	user-select: none !important;
}

@media (max-width: 575px) {
	/* Narrow cards may naturally wrap variant chips; minimums only reserve
	 * missing rows and never clip real content. */
	.exp420-catalog-enrichment .exp420-catalog-variants {
		min-height: 38px !important;
	}
}


/* v0.2.4 — compact preview for products with many catalog options.
 *
 * JS applies this only when a product has more than six chips. The preview is
 * constrained to a single visual row by choosing the shortest rendered chips
 * that fit alongside the "+N more" product-page link.
 */
.exp420-catalog-variant.exp420-catalog-variant--preview-hidden {
	display: none !important;
}

.exp420-catalog-variant-more {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	min-width: 34px !important;
	height: 34px !important;
	margin: 0 2px 4px !important;
	padding: 0 10px !important;
	border: 1px solid #b8b8b8 !important;
	border-radius: 999px !important;
	background: #f5f5f5 !important;
	color: #343434 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	vertical-align: middle !important;
}

.exp420-catalog-variant-more:hover,
.exp420-catalog-variant-more:focus-visible {
	border-color: #244236 !important;
	color: #244236 !important;
	text-decoration: none !important;
}


/* v0.2.6 — Catalog Metadata owns the review row in WoodMart product cards.
 *
 * WoodMart can inject its native WooCommerce .star-rating independently of the
 * default WooCommerce callback, so PHP remove_action() is not reliable here.
 * Hide only a direct native loop rating inside the WoodMart card wrapper.
 *
 * The plugin's .exp420-catalog-reviews is preserved, and single-product ratings
 * are outside this scoped selector.
 */
.wd-product
.wd-product-wrapper
> .star-rating {
	display: none !important;
}