/*
 * FC-008 product-card compatibility layer.
 *
 * WooCommerce's classic stylesheet uses more specific selectors than the
 * component rules in app.css. Keep these resets scoped to the approved
 * classic product grid so archive, shortcode and third-party output remain
 * unaffected.
 */

.woocommerce ul.products.site-product-grid::before,
.woocommerce ul.products.site-product-grid::after,
.woocommerce-page ul.products.site-product-grid::before,
.woocommerce-page ul.products.site-product-grid::after {
	display: none;
	content: none;
}

.woocommerce ul.products.site-product-grid li.product:not(.product-category),
.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	justify-self: stretch;
}

.woocommerce ul.products.site-product-grid li.product:not(.product-category) a img,
.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) a img {
	aspect-ratio: 1 / 1;
	width: calc(100% - 1.5rem);
	height: auto;
	margin: 0.75rem 0.75rem 0.9rem;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--fc-border, #ded8ce);
	border-radius: 16px;
	background: var(--fc-background, #f7f2ea);
	box-shadow: none;
	object-fit: contain;
}

.woocommerce ul.products.site-product-grid li.product:not(.product-category) .onsale,
.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .onsale {
	position: absolute;
	z-index: 3;
	top: 1.1rem;
	inset-inline-start: 1.1rem;
	inset-inline-end: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.4rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: var(--fc-radius-pill, 999px);
	color: var(--fc-surface, #ffffff);
	background: var(--fc-brand-accent, #c17658);
	box-shadow: 0 2px 6px rgba(32, 35, 31, 0.16);
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.15;
	white-space: nowrap;
}

.woocommerce ul.products.site-product-grid li.product:not(.product-category) .site-product-card__stock-status,
.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .site-product-card__stock-status {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	max-width: calc(100% - 2rem);
	margin: 0 1rem 0.9rem;
	padding: 0.3rem 0.65rem;
	border: 1px solid var(--fc-border, #ded8ce);
	border-radius: var(--fc-radius-sm, 8px);
	color: var(--fc-text-muted, #686e68);
	background: var(--fc-background, #f7f2ea);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.woocommerce ul.products.site-product-grid li.product:not(.product-category).outofstock .button,
.woocommerce-page ul.products.site-product-grid li.product:not(.product-category).outofstock .button {
	border-color: var(--fc-border, #ded8ce);
	color: var(--fc-brand-secondary, #1c4948);
	background: var(--fc-background, #f7f2ea);
}

.woocommerce ul.products.site-product-grid li.product:not(.product-category).outofstock .button:hover,
.woocommerce-page ul.products.site-product-grid li.product:not(.product-category).outofstock .button:hover {
	border-color: var(--fc-brand-secondary, #1c4948);
	color: var(--fc-brand-secondary, #1c4948);
	background: var(--fc-border, #ded8ce);
}

/*
 * The two-line title box.
 *
 * WooCommerce's own `.woocommerce ul.products li.product
 * .woocommerce-loop-product__title` outweighs the component rule in app.css, so
 * it was re-adding `padding: .5em 0` and `font-size: 1em` on top of it. Both are
 * reset here, because the box below is measured in `em` of this element and
 * everything is `border-box`: a 2.7em box holding 2 lines *plus* 1em of
 * WooCommerce padding had 16px more content than height, and the second line of
 * a long name was clipped rather than shown.
 */
.woocommerce ul.products.site-product-grid li.product:not(.product-category) .woocommerce-loop-product__title,
.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .woocommerce-loop-product__title {
	/* One shared title area, so titles of different length stay on a grid line. */
	min-height: 2.7em;
	/* Two lines of `line-height`, plus rounding headroom; never a third. */
	max-height: 2.8em;
	margin: 0 1rem 0.65rem;
	padding: 0;
	font-size: 0.98rem;
	line-height: 1.35;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
	line-break: strict;
	text-wrap: pretty;
}

.woocommerce ul.products.site-product-grid li.product:not(.product-category) .price,
.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .price {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.5rem;
	align-items: center;
	min-height: 1.9rem;
	margin: 0 1rem 1rem;
	color: var(--fc-brand-primary, #0f6342);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.3;
}

.woocommerce ul.products.site-product-grid li.product:not(.product-category) .price > .woocommerce-Price-amount,
.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .price > .woocommerce-Price-amount,
.woocommerce ul.products.site-product-grid li.product:not(.product-category) .price ins,
.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .price ins {
	display: inline-flex;
	padding: 0.12rem 0.5rem;
	border-radius: var(--fc-radius-sm, 8px);
	color: var(--fc-brand-primary, #0f6342);
	background: rgba(15, 99, 66, 0.09);
	font-weight: 800;
	text-decoration: none;
}

.woocommerce ul.products.site-product-grid li.product:not(.product-category) .price del,
.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .price del {
	display: inline-flex;
	padding: 0.12rem 0.45rem;
	border-radius: var(--fc-radius-sm, 8px);
	color: var(--fc-text-muted, #686e68);
	background: rgba(104, 110, 104, 0.08);
	font-size: 0.86rem;
	font-weight: 500;
	text-decoration: line-through;
	opacity: 0.85;
}

@media (max-width: 767px) {
	.woocommerce ul.products.site-product-grid li.product:not(.product-category) .woocommerce-loop-product__title,
	.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .woocommerce-loop-product__title {
		display: block;
		min-height: 0;
		max-height: none;
		margin-top: auto;
		overflow: visible;
		font-size: 0.82rem;
		line-height: 1.25;
		-webkit-line-clamp: unset;
		line-clamp: unset;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
		line-break: strict;
		text-wrap: pretty;
	}
}

@media (max-width: 359px) {
	.woocommerce ul.products.site-product-grid li.product:not(.product-category) a img,
	.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) a img {
		width: calc(100% - 1.3rem);
		margin: 0.65rem 0.65rem 0.8rem;
	}

	.woocommerce ul.products.site-product-grid li.product:not(.product-category) .onsale,
	.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .onsale {
		top: 0.9rem;
		inset-inline-start: 0.9rem;
		padding: 0.32rem 0.7rem;
		font-size: 0.78rem;
	}

	.woocommerce ul.products.site-product-grid li.product:not(.product-category) .site-product-card__stock-status,
	.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .site-product-card__stock-status {
		max-width: calc(100% - 1.3rem);
		margin-inline: 0.65rem;
		font-size: 0.74rem;
	}
}

/* FC-008 follow-up: keep WooCommerce AJAX feedback calm, aligned and branded. */

/*
 * The status glyph is absolutely positioned, so the room it needs has to come
 * out of the button's padding. Reserving it at the inline end *only* left the
 * resting label 17px left of the button's centre line, which is the off-centre
 * "Sepete ekle" the audit saw.
 *
 * The same reserve is therefore taken at both ends. The label is centred by
 * `justify-content: center` in the content box, so a symmetric box puts it on
 * the button's centre line in every state, and because the reserve does not
 * depend on `.loading` or `.added` nothing reflows when WooCommerce adds them.
 * The total (2 x 1.9rem) is deliberately no wider than the 0.85rem + 3rem it
 * replaces, so no card loses room for its label at any breakpoint.
 */
.woocommerce ul.products.site-product-grid li.product:not(.product-category) .button.ajax_add_to_cart,
.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .button.ajax_add_to_cart {
	position: relative;
	padding-inline: 1.9rem;
}

.woocommerce ul.products.site-product-grid li.product:not(.product-category) .button.ajax_add_to_cart.loading,
.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .button.ajax_add_to_cart.loading {
	opacity: 1;
	pointer-events: none;
}

.woocommerce ul.products.site-product-grid li.product:not(.product-category) .button.ajax_add_to_cart.loading::after,
.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .button.ajax_add_to_cart.loading::after {
	position: absolute;
	top: 50%;
	/* Outermost dot lands at 1.81rem, inside the 1.9rem reserve. */
	inset-inline-end: 1.05rem;
	width: 0.28rem;
	height: 0.28rem;
	margin: 0;
	border: 0;
	border-radius: 50%;
	color: currentColor;
	background: currentColor;
	box-shadow: -0.48rem 0 0 currentColor, 0.48rem 0 0 currentColor;
	font-family: inherit;
	font-size: inherit;
	line-height: 1;
	content: "";
	transform: translateY(-50%);
	animation: fcsu-product-card-dots 720ms ease-in-out infinite alternate;
}

/*
 * Success check standard (tokens.css). This is the reference implementation:
 * the one check glyph, in the interface font, at the standard weight. Every
 * other presentation-owned success cue in the storefront matches it.
 */
.woocommerce ul.products.site-product-grid li.product:not(.product-category) .button.ajax_add_to_cart.added::after,
.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .button.ajax_add_to_cart.added::after {
	position: absolute;
	top: 50%;
	/*
	 * A declared width instead of the glyph's own advance: the tick then
	 * occupies exactly 0.9rem-1.9rem from the inline end whatever font
	 * resolves, so it can never reach into the centred label.
	 */
	inset-inline-end: 0.9rem;
	width: 1rem;
	margin: 0;
	color: currentColor;
	font-family: inherit;
	font-size: 1rem;
	font-weight: var(--fc-check-weight, 900);
	line-height: 1;
	text-align: center;
	content: var(--fc-check-glyph, "\2713");
	transform: translateY(-50%);
	animation: fcsu-product-card-added 220ms ease-out both;
}

@keyframes fcsu-product-card-dots {
	from {
		opacity: 0.45;
		transform: translateY(-50%) scale(0.82);
	}
	to {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}
}

@keyframes fcsu-product-card-added {
	from {
		opacity: 0;
		transform: translateY(-50%) scale(0.7);
	}
	to {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products.site-product-grid li.product:not(.product-category) .button.ajax_add_to_cart.loading::after,
	.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .button.ajax_add_to_cart.loading::after,
	.woocommerce ul.products.site-product-grid li.product:not(.product-category) .button.ajax_add_to_cart.added::after,
	.woocommerce-page ul.products.site-product-grid li.product:not(.product-category) .button.ajax_add_to_cart.added::after {
		animation: none;
	}
}