/**
 * `noah-shop-builder-common`: styles shared by several blocks.
 * Blocks list the handle in block.json `style`, so it loads only with them.
 */
@use "../scss/mixins" as *;

.noah-visually-hidden {

	@include noah-visually-hidden;
}

.noah-grid {

	@include noah-grid;
}

// Product cards (Blocks\ProductCard): standard, then list.
.noah-cards {
	margin: 0;
	padding: 0;
	list-style: none;
}

.noah-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
	margin: 0;

	.noah-card__image {
		position: relative;
		display: block;

		img {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 1;
			object-fit: cover;
		}
	}

	// Image with module buttons (Blocks\CardActions) in its top corner.
	.noah-card__media {
		position: relative;
	}

	.noah-card__image-actions {
		position: absolute;
		z-index: 1;
		inset-block-start: 0.5rem;
		inset-inline-end: 0.5rem;
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	// Sale and out of stock badges: over the image corner, or above the title
	// without an image. The sale badge keeps the theme's `.onsale` look.
	.noah-card__media > .noah-card__badges {
		position: absolute;
		z-index: 1;
		inset-block-start: 0.5rem;
		inset-inline-start: 0.5rem;
		flex-direction: column;
	}

	.noah-card__badges {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem;
		align-items: flex-start;
		pointer-events: none;

		// Outranks WooCommerce's absolute `.woocommerce span.onsale`.
		.onsale,
		.noah-card__badge {
			position: static;
			inset: auto;
			margin: 0;
		}
	}

	.noah-card__badge--out-of-stock {
		padding: 0.25em 0.5em;
		background: var(--wp--preset--color--contrast, #1e1e1e);
		color: var(--wp--preset--color--base, #fff);
		font-size: var(--wp--preset--font-size--small, 0.875rem);
		line-height: 1.2;
	}

	.noah-card__content {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 0.5rem;
		min-width: 0;
	}

	.noah-card__title {
		margin: 0;
		font-size: var(--wp--preset--font-size--medium, 1rem);

		a {
			color: inherit;
			text-decoration: none;
		}
	}

	.star-rating {
		float: none;
	}

	.noah-card__actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		align-items: center;
		margin-block-start: auto;

		// Some themes make `a.button` inline, which splits it in two when it wraps.
		.button {
			display: inline-block;
			max-width: 100%;
		}
	}
}

// List: one card per row, image beside the content; stacked on mobile.
.noah-cards--list {
	--noah-cols: 1;
}

.noah-card--list {
	flex-direction: row;
	align-items: flex-start;
	gap: 1.5rem;

	// The media wrapper, when there is one, is the flex item.
	> :is(.noah-card__image, .noah-card__media) {
		flex: 0 0 min(35%, 16rem);
	}

	@include noah-mobile {
		flex-direction: column;

		> :is(.noah-card__image, .noah-card__media) {
			flex-basis: auto;
			width: 100%;
		}
	}
}

// Archive Products designed mode: below WooCommerce's floated result count and
// sorting form, as `ul.products` is.
.noah-archive-products__grid {
	clear: both;
	margin-block-end: var(--wp--style--block-gap, 1.5rem);
}

// Archive Result Count / Order By / Pagination: the block wrapper places
// them, so drop WooCommerce's float and centering (two classes to outrank
// `.woocommerce …`).
.woocommerce.noah-archive-result-count .woocommerce-result-count,
.woocommerce.noah-order-by .woocommerce-ordering {
	float: none;
	margin: 0;
}

.woocommerce.noah-order-by .woocommerce-ordering label {
	margin-inline-end: 0.5em;
}

.woocommerce.noah-archive-pagination nav.woocommerce-pagination {
	text-align: inherit;
}

.noah-product-list__heading {
	margin-block: 0 1rem;
}

// Category links of the "Shop with Categories" starter (core Terms List) as a
// centered row of pills.
.wp-block-categories.noah-shop-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	padding-inline-start: 0;
	list-style: none;

	a {
		display: inline-block;
		padding: 0.35em 0.9em;
		border: 1px solid currentcolor;
		border-radius: 999px;
		text-decoration: none;
	}
}

// Server placeholder (Blocks\Render::placeholder). The editor swaps it for
// its own component; this covers other preview screens.
.noah-placeholder {
	padding: 1rem;
	border: 1px dashed currentcolor;
	border-radius: 2px;
	opacity: 0.7;
	text-align: center;

	.noah-placeholder__message {
		margin: 0;
	}
}

// Cart Total block: the heading is hidden, not removed, so the markup
// stays as wc-cart.js expects when it swaps in new totals.
.noah-cart-totals--hide-heading .cart_totals > h2 {
	display: none;
}

// Checkout Form – Billing block: "Billing details" heading turned off.
.noah-checkout-billing--hide-heading .woocommerce-billing-fields > h3 {
	display: none;
}

// Order Review block: WooCommerce's block-theme CSS sizes `.shop_table` to 70%
// of its one-column checkout; the review fills the block instead.
.woocommerce.noah-checkout-order-review table.shop_table,
.woocommerce.noah-checkout-shipping-methods table.shop_table {
	width: 100%;
}

// Checkout Shipping Methods block: nothing to show until the cart has shipping.
.noah-checkout-shipping-methods:has(> .noah-checkout-shipping-methods__methods:empty) {
	display: none;
}

// Checkout Coupon / Login blocks: as wide as the block, like the Checkout Form,
// not the 1000px WooCommerce's block-theme CSS gives `main .woocommerce` there.
.woocommerce-checkout :is(.noah-checkout-coupon, .noah-checkout-login) > .woocommerce {
	max-width: none;
}

// Store Notices block (a `.woocommerce` wrapper itself): wide and full
// alignment win over that 1000px cap on the cart, checkout and account
// pages.
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main
.wp-block-noah-shop-builder-store-notices.woocommerce {

	&.alignwide {
		max-width: var(--wp--style--global--wide-size);
	}

	&.alignfull {
		max-width: none;
	}
}