/* Sale-state UI ------------------------------------------------------------ */

.hod-badge {
	display: inline-block;
	padding: 0.35em 0.8em;
	border: 1px solid currentColor;
	border-radius: 2px;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}
.hod-badge--sold { color: #8a1f1f; }
.hod-badge--collection { color: #555; }

.button.hod-inquire { display: inline-block; }

.hod-price-request { color: #555; font-style: italic; }
.hod-price-sold {
	color: #8a1f1f;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.9em;
}

/* Sale-state ribbon on catalog thumbnails ---------------------------------- */
/* Positioning context: classic loop items + the block-grid media wrapper. */
.woocommerce ul.products li.product,
.hod-grid-media { position: relative; }
.hod-grid-media { display: block; }

.hod-ribbon {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 2;
	padding: 0.15em 0.6em;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}
.hod-ribbon--sold { background: #8a1f1f; }
.hod-ribbon--inquiry { background: var(--wp--preset--color--accent, #35566b); }
.hod-ribbon--collection { background: #6f6b66; }

/* Opt-in masonry for the Product Collection archive ------------------------
   Add the class "hod-masonry" to the Product Collection block (Advanced →
   Additional CSS class). CSS columns keep each scan's natural aspect ratio
   (no cropping); leave the Product Image block's aspect ratio unset for this.
   Verify the product-list selector against the block markup on staging. */
.hod-masonry .wc-block-product-template {
	display: block;
	column-count: 3;
	column-gap: 1.5rem;
}
.hod-masonry .wc-block-product-template > li {
	break-inside: avoid;
	width: 100%;
	margin: 0 0 1.5rem;
}
@media (max-width: 900px) { .hod-masonry .wc-block-product-template { column-count: 2; } }
@media (max-width: 560px) { .hod-masonry .wc-block-product-template { column-count: 1; } }

/* Artwork metadata (single product) ---------------------------------------- */
.hod-artwork-meta {
	margin: 1.25rem 0;
	border-top: 1px solid var(--wp--preset--color--line, #e6e2dc);
}
.hod-artwork-meta__row {
	display: flex;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line, #e6e2dc);
}
.hod-artwork-meta dt {
	flex: 0 0 8rem;
	color: var(--wp--preset--color--muted, #6f6b66);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.8rem;
}
.hod-artwork-meta dd { margin: 0; }

/* Inquiry context box (/inquire/ page) ------------------------------------- */
.hod-inquiry-context {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line, #e6e2dc);
	border-radius: 2px;
}
.hod-inquiry-context__label {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--muted, #6f6b66);
	font-size: 0.85rem;
}
.hod-inquiry-context__title { margin: 0; font-weight: 600; }
.hod-inquiry-context__sku {
	margin-left: 0.5rem;
	color: var(--wp--preset--color--muted, #6f6b66);
	font-weight: 400;
	font-size: 0.85rem;
}
.hod-inquiry-context__meta {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--muted, #6f6b66);
	font-size: 0.9rem;
}