/**
 * Post Grid — default design tokens.
 *
 * These are the plugin-level defaults for --ftps-post-grid-* properties.
 * Override any of them in your theme's page-sections-tokens.css file.
 */

@layer ftps-defaults {

.page-section-post-grid {

	/* ── Grid layout ─────────────────────────────────────────────────── */
	--ftps-post-grid-row-gap: var(--space-xlarge, 2.5rem);
	--ftps-post-grid-col-gap: var(--space-large, 1.5rem);

	/* ── Card typography (all post types) ────────────────────────────── */
	--ftps-post-grid-title-font: var(--heading-medium);
	--ftps-post-grid-title-weight: var(--typeface-weight-body-bold);
	--ftps-post-grid-title-margin-top: var(--space-normal, 1rem);

	/* ── Product card — typography ─────────────────────────────────── */
	--ftps-post-grid-product-title-font: var(--label-large);
	--ftps-post-grid-product-title-weight: var(--typeface-weight-body-bold);
	--ftps-post-grid-product-title-margin-top: var(--ftps-post-grid-title-margin-top);
	--ftps-post-grid-after-title-margin: var(--space-xsmall, 0.5rem);
	--ftps-post-grid-sku-font: var(--body-small);
	--ftps-post-grid-sku-gap: 0.5em;
	--ftps-post-grid-badge-font: var(--label-small);

	/* ── Product card — colours ────────────────────────────────────── */
	--ftps-post-grid-badge-bg-color: var(--color-primary, #3a3a3a);
	--ftps-post-grid-badge-color: var(--color-text-inverse);
	--ftps-post-grid-badge-exclusive-bg-color: var(--color-secondary, #5a5a5a);
	--ftps-post-grid-details-color: var(--color-neutral-800, inherit);

	/* ── Product card — sale / exclusive badges ───────────────────────── */
	--ftps-radius-control: var(--border-radius, 3px);
	--ftps-post-grid-radius-badge: var(--ftps-radius-control);
	--ftps-post-grid-badge-border-radius: var(--ftps-post-grid-radius-badge);
	--ftps-post-grid-badge-inset: 7px;
	--ftps-post-grid-badge-padding: 5px;
	--ftps-post-grid-badge-icon-size: 0.875em;
	--ftps-post-grid-badge-icon-gap: 5px;
	--ftps-post-grid-badge-exclusive-offset: 60px;

	/* ── Product card — links & actions ─────────────────────────────── */
	--ftps-post-grid-details-padding-right: 20px;
	--ftps-post-grid-see-details-gap: var(--space-normal, 1rem);
	--ftps-post-grid-stock-notice-gap: var(--space-xxxsmall, 0.25rem);

	/* ── Product card — WooCommerce add-to-cart icons ─────────────────── */
	--ftps-post-grid-spinner-content: var(--icon-wc-spinner);
	--ftps-post-grid-spinner-font: var(--wc-icon-font);
	--ftps-post-grid-spinner-webkit-smoothing: var(--icon-webkit-font-smoothing, antialiased);
	--ftps-post-grid-spinner-moz-smoothing: var(--icon-moz-osx-font-smoothing, grayscale);
	--ftps-post-grid-spinner-gap: 1em;
	--ftps-post-grid-checkmark-content: var(--icon-wc-checkmark);
}

} /* end @layer ftps-defaults */

/* =============================================================================
   SECTION & GRID LAYOUT
   Applies to all post types (products, posts, custom post types).
   ============================================================================= */

.page-section-post-grid {
	padding: 0;
}

.page-section-post-grid .ftps-header,
.page-section-post-grid .ft-actions {
	padding: 0 var(--ftps-gutter-width);
}

/* Self-contained grid — does not depend on theme archives.css being loaded */
.page-section-post-grid .archive-posts {
	display: grid;
	row-gap: var(--ftps-post-grid-row-gap);
	column-gap: var(--ftps-post-grid-col-gap);
	grid-template-columns: 1fr;
}

.page-section-post-grid .wc-block-product-template {
	display: grid;
	row-gap: var(--ftps-post-grid-row-gap);
	column-gap: var(--ftps-post-grid-col-gap);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 37.5em) {

	.page-section-post-grid .archive-posts {
		grid-template-columns: repeat(2, 1fr);
	}

	.page-section-post-grid .wc-block-product-template {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (min-width: 64em) {

	.page-section-post-grid .archive-posts {
		grid-template-columns: repeat(4, 1fr);
	}

	.page-section-post-grid .wc-block-product-template {
		grid-template-columns: repeat(4, 1fr);
	}

}

/* Non-product post title (rendered via wp:post-title block — class "entry-title") */
.page-section-post-grid h2.entry-title {
	font: var(--ftps-post-grid-title-font);
	font-weight: var(--ftps-post-grid-title-weight);
	margin: var(--ftps-post-grid-title-margin-top) 0 0;
}

/* Featured image card layout in post-grid context:
 * WP block styles add 24px margin on the figure; remove top margin so the
 * image starts flush when it is ordered to the top of the card. */
.page-section-post-grid .archive-entry-header .wp-block-post-featured-image,
.page-section-post-grid .archive-entry-header .wp-block-template-part:has(> .wp-block-post-featured-image) {
	margin-top: 0;
}

.page-section-post-grid .archive-entry-header .wp-block-post-featured-image {
	margin-bottom: var(--space-small, 0.75rem);
}

/* Ensure the image fills its column width */
.page-section-post-grid .archive-entry-header .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* =============================================================================
   PRODUCT CARD STYLES
   Self-contained — does not depend on theme woocommerce-shop.css being loaded.
   All rules are scoped to .page-section-post-grid to avoid polluting the global namespace.
   ============================================================================= */

/* ── Image & link ───────────────────────────────────────────────────────────────── */

/* Wrapper needed for absolute-positioned sale badge */
.page-section-post-grid .ftm-parent-shop-loop-image-wrapper {
	position: relative;
}

.page-section-post-grid .product img {
	width: 100%;
	height: auto;
}

.page-section-post-grid .woocommerce-LoopProduct-link {
	color: inherit;
	text-decoration: none;
}

/* ── Title & meta ───────────────────────────────────────────────────────────────── */

.page-section-post-grid h2.woocommerce-loop-product__title {
	font: var(--ftps-post-grid-product-title-font);
	font-weight: var(--ftps-post-grid-product-title-weight);
	margin: var(--ftps-post-grid-product-title-margin-top) 0 0;
}

.page-section-post-grid h2.ftps-post-grid-product-title,
.page-section-post-grid h2.ftps-post-grid-product-title.wp-block-post-title {
	font: var(--ftps-post-grid-product-title-font);
	font-weight: var(--ftps-post-grid-product-title-weight);
	margin: var(--ftps-post-grid-product-title-margin-top) 0 0;
}

.page-section-post-grid .wp-block-woocommerce-product-price,
.page-section-post-grid .wc-block-components-product-price {
	font-size: 1rem;
	font-weight: 700;
}

/* Spacing below the rating / price block */
.page-section-post-grid .ftm-parent-shop-loop-after-title-wrapper {
	margin-bottom: var(--ftps-post-grid-after-title-margin);
}

.page-section-post-grid .product-sku {
	display: inline-block;
	font: var(--ftps-post-grid-sku-font);
	margin-right: var(--ftps-post-grid-sku-gap);
}

/* ── Sale & exclusive badges ──────────────────────────────────────────────────── */

.page-section-post-grid .product-inner .onsale {
	position: absolute;
	z-index: 9;
	top: 0;
	background-color: var(--ftps-post-grid-badge-bg-color);
	border-radius: var(--ftps-post-grid-badge-border-radius);
	color: var(--ftps-post-grid-badge-color);
	display: flex;
	font: var(--ftps-post-grid-badge-font);
	left: var(--ftps-post-grid-badge-inset);
	padding: var(--ftps-post-grid-badge-padding);
	transform: translateY(-50%);
}

.page-section-post-grid .product-inner .onsale.exclusive {
	background-color: var(--ftps-post-grid-badge-exclusive-bg-color);
}

.page-section-post-grid .onsale.exclusive .ftmicon-heart {
	font-size: var(--ftps-post-grid-badge-icon-size);
	margin-right: var(--ftps-post-grid-badge-icon-gap);
}

/* Offset exclusive badge when both sale + exclusive are present */
.page-section-post-grid .sale .product-inner .onsale.exclusive {
	left: var(--ftps-post-grid-badge-exclusive-offset);
}

/* ── Add to Cart button ─────────────────────────────────────────────────────────── */

.page-section-post-grid .add_to_cart_button {
	font: var(--label-medium);
	font-weight: var(--typeface-weight-body-medium-bold);
	padding: 0.375rem 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
	margin-top: var(--space-xsmall, 0.5rem);

}

.page-section-post-grid .archive-add-to-cart-button-text {
	white-space: nowrap;
	text-transform: capitalize;
}

@keyframes ftm-post-grid-spinning {

	from { transform: rotate(0deg); }

	to   { transform: rotate(360deg); }
}

/* Shrink label text to zero while icon state is shown */
.page-section-post-grid .ajax_add_to_cart.loading .archive-add-to-cart-button-text,
.page-section-post-grid .ajax_add_to_cart.added  .archive-add-to-cart-button-text {
	font-size: 0;
}

.page-section-post-grid .ajax_add_to_cart.loading::before {
	content: 'Adding';
}

.page-section-post-grid .ajax_add_to_cart.added::before {
	content: attr(data-already-in-cart-text);
	white-space: nowrap;
}

/* Icon slot — hidden by default, revealed in loading / added states */
.page-section-post-grid .ajax_add_to_cart::after {
	content: var(--ftps-post-grid-spinner-content);
	font: var(--ftps-post-grid-spinner-font);
	-webkit-font-smoothing: var(--ftps-post-grid-spinner-webkit-smoothing);
	-moz-osx-font-smoothing: var(--ftps-post-grid-spinner-moz-smoothing);
	position: absolute;
	opacity: 0;
	display: inline-block;
	margin-left: var(--ftps-post-grid-spinner-gap);
	transform: rotate(0);
}

.page-section-post-grid .ajax_add_to_cart.loading::after {
	position: static;
	opacity: 1;
	animation: ftm-post-grid-spinning 1s infinite;
}

.page-section-post-grid .ajax_add_to_cart.added::after {
	position: static;
	opacity: 1;
	content: var(--ftps-post-grid-checkmark-content);
}

/* WooCommerce injects a "View Cart" link after add-to-cart; hide it */
.page-section-post-grid .added_to_cart {
	display: none !important;
}

/* ── Post-cart actions & notices ────────────────────────────────────────────────── */

.page-section-post-grid .see-details {
	display: inline-block;
	margin-left: var(--ftps-post-grid-see-details-gap);
	text-decoration: underline;
}

.page-section-post-grid span.only-x-left-text {
	margin-left: var(--ftps-post-grid-stock-notice-gap);
}

/* Personalisation / details page link */
.page-section-post-grid a.product-details {
	color: var(--ftps-post-grid-details-color);
	padding-right: var(--ftps-post-grid-details-padding-right);
	text-decoration: underline;
}

.page-section-post-grid .actions button, 
.page-section-post-grid .actions .button, 
.page-section-post-grid .actions :where(.wp-element-button, .wp-block-button__link),
.page-section-post-grid .ftps-actions button,
.page-section-post-grid .ftps-actions .button,
.page-section-post-grid .ftps-actions :where(.wp-element-button, .wp-block-button__link) {
    color: var(--color-primary, #3a3a3a);
    background-color: transparent;
	display: inline-flex;
	align-items: center;

	&:hover,
	&:focus,
	&:focus-visible {
		color: var(--color-primary, #3a3a3a);
		background-color: transparent;
		text-decoration: underline;
	}

	&::after {
		--ftps-angle-right-icon-size: 1rem;
		background-color: currentcolor;
		content: '';
		display: inline-block;
		flex-shrink: 0;
		height: var(--ftps-angle-right-icon-size);
		mask-image: var(--ftps-angle-right-icon);
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: contain;
		width: var(--ftps-angle-right-icon-size);
		-webkit-mask-image: var(--ftps-angle-right-icon);
		-webkit-mask-position: center;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: contain;
	}
}

.page-section-post-grid .ftps-actions.post_grid,
.page-section-post-grid .ftps-actions.post_grid ul{
	margin: 0;
	padding: 0;
	text-align: center;
}

.entry-content .page-section.page-section-post-grid .ftps-actions .wp-block-button .wp-block-button__link.wp-element-button {
	background-color: transparent !important;
	color: var(--color-primary, #3a3a3a) !important;
}

.entry-content .page-section.page-section-post-grid .ftps-actions .wp-block-button .wp-block-button__link.wp-element-button:hover,
.entry-content .page-section.page-section-post-grid .ftps-actions .wp-block-button .wp-block-button__link.wp-element-button:focus,
.entry-content .page-section.page-section-post-grid .ftps-actions .wp-block-button .wp-block-button__link.wp-element-button:focus-visible {
	background-color: transparent !important;
	color: var(--color-primary, #3a3a3a) !important;
	text-decoration: underline;
}