/*
 * "Menu Page" block style — applied to a `workbench/shop-collection`
 * block via `is-style-menu-page`. Drops the card grid and renders
 * each product as a single menu-line: title on the left, price on
 * the right, description italicised below. Image, button, badge
 * are hidden — this is a typography-first treatment.
 *
 * Targets `.wb-product-card` only (categories don't have a price
 * field). Authors using categories mode get the regular grid back.
 */

/* Force a single-column list so each card stretches across the row. */
.wp-block-workbench-shop-collection.is-style-menu-page
	.wb-shop-collection__grid {
	grid-template-columns: 1fr !important;
	gap: 0 !important;
}

/* Each card becomes a row: optional thumbnail | title | price on the
 * top line; description spans the right two columns below.
 * grid-template-areas keeps the layout readable when image-wrap is
 * absent (showImage = off) — the `:has()` rule below collapses the
 * image column entirely so there's no phantom gutter. */
.wp-block-workbench-shop-collection.is-style-menu-page .wb-product-card {
	display: grid !important;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto;
	grid-template-areas:
		"image title price"
		"image desc desc";
	gap: 0 1rem;
	align-items: center;
	padding: 0.85rem 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	border-top: 2px dotted currentColor;
	border-bottom: none;
}

/* No image rendered → drop the image column so title sits flush left. */
.wp-block-workbench-shop-collection.is-style-menu-page
	.wb-product-card:not(:has(.wb-product-card__image-wrap)) {
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"title price"
		"desc desc";
}

.wp-block-workbench-shop-collection.is-style-menu-page
	.wb-product-card:last-child {
	border-bottom: 2px dotted currentColor;
}

.wp-block-workbench-shop-collection.is-style-menu-page
	.wb-product-card
	+ .wb-product-card {
	border-top: 2px dotted currentColor;
}

/* Hide the elements that don't belong in a printed-menu treatment.
 * Image is *not* hidden — it's rendered as a 64px thumbnail in the
 * left column when the inner Product Card has `showImage` on. The
 * existing toggle gives authors the choice between image-on (café /
 * bistro look) and image-off (pure typography) without forking the
 * style. */
.wp-block-workbench-shop-collection.is-style-menu-page .wb-product-card__button,
.wp-block-workbench-shop-collection.is-style-menu-page
	.wb-product-card__cart-btn,
.wp-block-workbench-shop-collection.is-style-menu-page
	.wb-product-card__stepper,
.wp-block-workbench-shop-collection.is-style-menu-page .wb-product-card__footer,
.wp-block-workbench-shop-collection.is-style-menu-page .wb-product-card__badge,
.wp-block-workbench-shop-collection.is-style-menu-page
	.wb-product-card__quick-view-btn {
	display: none !important;
}

/* 64×64 thumbnail on the left, vertically centred across both rows. */
.wp-block-workbench-shop-collection.is-style-menu-page
	.wb-product-card__image-wrap {
	grid-area: image;
	width: 64px;
	height: 64px;
	margin: 0;
	border-radius: 4px;
	overflow: hidden;
	align-self: center;
	flex: 0 0 auto;
}

.wp-block-workbench-shop-collection.is-style-menu-page
	.wb-product-card__image-wrap
	img,
.wp-block-workbench-shop-collection.is-style-menu-page
	.wb-product-card__placeholder {
	width: 64px;
	height: 64px;
	max-width: 64px;
	max-height: 64px;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Title / price / description placed via grid-area names so the
 * layout stays correct in both the 3-col (with image) and 2-col
 * (without image) variants. No font hardcoding — typography flows
 * from the wrapper supports + Title / Description Typography panels. */
.wp-block-workbench-shop-collection.is-style-menu-page .wb-product-card__title {
	grid-area: title;
	font-weight: 500;
	align-self: end;
}

.wp-block-workbench-shop-collection.is-style-menu-page .wb-product-card__price {
	grid-area: price;
	font-weight: 600;
	opacity: 1;
	white-space: nowrap;
	align-self: end;
}

.wp-block-workbench-shop-collection.is-style-menu-page
	.wb-product-card__description {
	grid-area: desc;
	opacity: 0.7;
	margin-top: 0.25rem;
	-webkit-line-clamp: unset;
	display: block;
	align-self: start;
}

/* Hover hint — subtle background tint for affordance, since we lost
 * the image cue. Doesn't affect readability. */
.wp-block-workbench-shop-collection.is-style-menu-page .wb-product-card:hover {
	background: rgba(0, 0, 0, 0.02);
}