/*
 * Opt-in reference catalog surface. Every selector is namespaced so the
 * planning pages do not change existing sellable WooCommerce cards.
 */
.higuppy-catalog-reference-media {
	margin: 1.5rem 0 1.75rem;
	border-radius: 1.25rem;
	overflow: hidden;
	background: #edf3ee;
}

.higuppy-catalog-reference-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.higuppy-catalog-reference-media figcaption {
	padding: .75rem 1rem;
	background: #f7faf7;
	color: #53625a;
	font-size: .875rem;
	line-height: 1.5;
}

.higuppy-catalog-reference-cta-panel {
	display: grid;
	gap: .75rem;
	margin: 1.25rem 0;
	padding: 1rem 1.125rem;
	border: 1px solid rgba(46, 82, 62, .18);
	border-radius: 1rem;
	background: linear-gradient(145deg, #f8fbf7, #edf5ee);
}

.higuppy-catalog-reference-cta-panel__label {
	margin: 0;
	color: #2f5b40;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.higuppy-catalog-reference-price,
.higuppy-catalog-reference-price-detail {
	display: block;
}

.higuppy-catalog-reference-price {
	color: #173d28;
	font-size: 1rem;
}

.higuppy-catalog-reference-price-detail {
	margin-top: .75rem;
	color: #59665d;
	font-size: .875rem;
	line-height: 1.55;
}

.higuppy-catalog-reference-price-detail__facts,
.higuppy-catalog-reference-price-detail__notice {
	display: block;
}

.higuppy-catalog-reference-price-detail__notice {
	margin-top: .25rem;
}

.higuppy-catalog-reference-cta {
	justify-self: start;
}

.higuppy-reference-availability {
	color: #6c5a2b;
	font-size: .875rem;
}

.higuppy-catalog-reference-context {
	margin: 0 0 1rem;
	padding: .875rem 1rem;
	border-left: 3px solid #78a67e;
	background: #f4f8f3;
	color: #385141;
}

.higuppy-catalog-reference-context p {
	margin: .25rem 0 0;
}

@media (max-width: 640px) {
	.higuppy-catalog-reference-media {
		margin-inline: -.75rem;
		border-radius: 0;
	}

	.higuppy-catalog-reference-cta-panel {
		padding: .875rem;
	}
}

/* Keep the reference-card amount readable within the storefront type layer. */
@layer hg-readable-type {
	@media (max-width: 600px) {
		body.higuppy-site-shell.hg-shop-page-active li.wc-block-product.product_cat-reference-guppy-catalog .higuppy-catalog-reference-price-block .higuppy-catalog-reference-price,
		body.higuppy-site-shell.hg-shop-page-active li.wc-block-product.product_cat-reference-guppy-catalog .higuppy-catalog-reference-price-block .higuppy-catalog-reference-price * {
			font-size: 14px !important;
			font-weight: 500 !important;
			line-height: 1.4 !important;
		}
	}
}

@layer hg-catalog {
	@media (max-width: 600px) {
		body.higuppy-site-shell.hg-shop-page-active li.wc-block-product.product_cat-reference-guppy-catalog {
			height: auto !important;
			min-height: 0 !important;
			padding-bottom: 12px !important;
		}

		body.higuppy-site-shell.hg-shop-page-active li.wc-block-product.product_cat-reference-guppy-catalog > .wp-block-post-title {
			height: auto !important;
			min-height: 0 !important;
			margin-bottom: 4px !important;
		}

		body.higuppy-site-shell.hg-shop-page-active li.wc-block-product.product_cat-reference-guppy-catalog .higuppy-catalog-reference-price-block {
			margin-top: 0 !important;
			margin-bottom: 6px !important;
			padding-top: 6px !important;
			line-height: 1.4 !important;
			overflow-wrap: anywhere !important;
		}

		body.higuppy-site-shell.hg-shop-page-active li.wc-block-product.product_cat-reference-guppy-catalog .higuppy-catalog-reference-button {
			flex: 0 0 auto !important;
			height: auto !important;
			min-height: 0 !important;
			margin: 8px 12px 0 !important;
		}

		body.higuppy-site-shell.hg-shop-page-active li.wc-block-product.product_cat-reference-guppy-catalog .higuppy-catalog-reference-button .higuppy-catalog-reference-cta {
			align-self: stretch !important;
			flex: 0 0 auto !important;
			height: auto !important;
			min-height: 44px !important;
		}
	}
}