/**
 * ==========================================================
 * CHACHA HOME — PRODUCT CARD v1.5.0
 * ==========================================================
 *
 * Global WooCommerce product card presentation.
 *
 * Used by:
 * - Homepage / Yeni Gelenler
 * - Homepage / ChaCha Seçkisi
 * - Later: Shop
 * - Later: Category Archives
 *
 * ==========================================================
 */


/* ==========================================================
 * 01. PRODUCT COLLECTION
 * ========================================================== */

:is(.chacha-product-collection, .chacha-product-card-block-scope) {
	width: 100%;
}


/**
 * Product item
 */
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-product {
	position: relative;
	isolation: isolate;

	display: flex;
	flex-direction: column;

	min-width: 0;
	height: 100%;

	margin: 0;
	padding: 8px;

	background: transparent;

	border:
		1px
		solid
		var(
			--chacha-subtle,
			#D7CEC4
		);

	border-radius: 8px;
	box-shadow: none;
	overflow: visible;
}


/* ==========================================================
 * 02. PRODUCT IMAGE
 * ========================================================== */

:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-image {
	position: relative;

	display: block;

	width: 100%;
	aspect-ratio: 4 / 5;

	margin: 0;

	overflow: hidden;

	border-radius: 5px;

	background:
		var(
			--chacha-background-light,
			#FFFDFC
		);
}


/*
 * WooCommerce product link
 * Görsel kutusunun tamamını kaplamalıdır.
 */
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-image > a {

	display: block;

	width: 100%;
	height: 100%;

	overflow: hidden;
}


/*
 * Product image
 */
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-image img {

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transition:
		transform 500ms ease,
		opacity 300ms ease;
}


/*
 * Desktop hover
 */
@media (hover: hover) {

	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-components-product-image:hover img {

		transform: scale(1.025);

	}

}


/* ==========================================================
 * 03. SALE BADGE
 * ========================================================== */

:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-sale-badge {
	position: absolute;

	top: 12px;
	left: 12px;
	right: auto;

	z-index: 5;

	min-width: 0;
	min-height: 0;

	margin: 0;
	padding: 7px 10px;

	background:
		var(
			--chacha-text-strongest,
			#201A17
		);

	color: #FFFDFC;

	border: 0;
	border-radius: 0;

	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);

	font-size: 9px;
	font-weight: 600;

	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;

	box-shadow: none;
}


/* ==========================================================
 * 04. PRODUCT TITLE
 * ========================================================== */

:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;

	width: 100%;
	min-height: 2.7em;

	margin: 12px 0 8px;
	padding: 0;

	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);

	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;

	color:
		var(
			--chacha-text-strongest,
			#201A17
		);

	text-decoration: none;
}


/**
 * Product title link
 */
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-name a {

	color: inherit;

	text-decoration: none;

	transition: color 200ms ease;
}


@media (hover: hover) {

	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-components-product-name a:hover {

		color: #b08d57;
	}

}


/* ==========================================================
 * 05. PRICE
 * ========================================================== */

:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 7px;

	width: 100%;

	margin: 0 0 8px;

	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);

	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;

	color:
		var(
			--chacha-text-strongest,
			#201A17
		);
}


/**
 * Current price
 */
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-price
.woocommerce-Price-amount {

	color: #201a17;
}


/**
 * Old price
 */
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-price del {
	font-size: 12px;
	font-weight: 400;

	color:
		var(
			--chacha-text-medium,
			#6A5F58
		);

	opacity: 0.65;
}


/**
 * Discounted price
 */
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-price ins {

	color: #201a17;

	font-weight: 700;

	text-decoration: none;
}


/**
 * WooCommerce Product Collection blocks do not always render a
 * stock-status row. DEV-02 adds the same ChaCha stock component
 * from WooCommerce's product-state classes when that information
 * is available in the rendered card.
 */
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-product
> .chacha-product-stock {
	width: 100%;
	margin: 2px 0 16px;
}



/* ==========================================================
 * 06. PRODUCT ACTION LAYOUT
 * ==========================================================
 *
 * Visual CTA styling is centralized in:
 * assets/css/commerce-actions.css
 */

:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wp-block-button {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	width: 100%;
	min-height:
		var(
			--chacha-commerce-action-height,
			44px
		);
	margin-top: auto !important;
}


/**
 * The variable-product filter can return a direct ChaCha
 * trigger depending on the WooCommerce loop renderer.
 * Give that direct trigger the same bottom anchoring as the
 * standard Product Button wrapper.
 */
:is(.chacha-product-collection, .chacha-product-card-block-scope)
> .chacha-product-quick-trigger,

:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-product
> .chacha-product-quick-trigger {
	margin-top: auto !important;
	flex: 0 0 auto;
}

/**
 * Homepage / WooCommerce Block simple-product action.
 *
 * DEV-02 keeps WooCommerce Blocks as the request engine and only
 * turns its native simple add-to-cart control into the same compact
 * cart trigger used by classic Product Cards. Visual styling remains
 * centralized in commerce-actions.css; this file owns placement only.
 */
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-product
.wp-block-button:has(.chacha-home-product-cart-trigger) {
	display: contents !important;

	min-height: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}


:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-product
.chacha-home-product-cart-trigger {
	position: absolute;

	top: 18px;
	right: 18px;

	z-index: 20;

	font-size: 0 !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
}


/**
 * Woo Blocks keeps live cart-state text inside the native control.
 * Keep that text in the DOM for its state/ARIA machinery while the
 * compact cart icon is the only visible control content.
 */
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-product
.chacha-home-product-cart-trigger
> :not(.chacha-product-cart-trigger__icon) {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	margin: -1px !important;
	padding: 0 !important;

	overflow: hidden !important;

	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;

	white-space: nowrap !important;
}


/* ==========================================================
 * 07. PRODUCT CARD ALIGNMENT
 * ========================================================== */

/**
 * Woo inner wrappers can sometimes prevent
 * equal-height cards.
 */
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-product {

	height: 100%;
}


/**
 * Keeps product information visually aligned.
 */
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-name,
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-price,
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wp-block-button {

	width: 100%;
}


/* ==========================================================
 * 08. MOBILE
 * ========================================================== */

@media (max-width: 766px) {

	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wp-block-button {
		min-height:
			var(
				--chacha-commerce-action-height-mobile,
				40px
			);
	}

	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-components-product-image {
		margin-bottom: 0;
	}


	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-product
	.chacha-home-product-cart-trigger {
		top: 14px;
		right: 14px;
	}


	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-components-product-sale-badge {
		top: 8px;
		left: 8px;
		right: auto;

		padding: 6px 7px;

		font-size: 8px;
	}


	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-components-product-name {
		min-height: 2.8em;

		margin: 10px 0 6px;

		font-size: 12px;
		line-height: 1.4;
	}


	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-components-product-price {
		gap: 4px;
		margin-bottom: 6px;
		font-size: 14px;
	}



}


/* ==========================================================
 * 09. SMALL MOBILE
 * ========================================================== */

@media (max-width: 420px) {

	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-components-product-name {
		font-size: 12px;
	}


	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-components-product-price {
		font-size: 14px;
	}

}


/* ==========================================================
 * 10. REDUCED MOTION
 * ========================================================== */

@media (prefers-reduced-motion: reduce) {

	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-components-product-image img,
	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-components-product-name a {

		transition: none;
	}

}
/**
 * ==========================================================
 * CLASSIC PRODUCT LOOP CARD V1.3
 * ==========================================================
 *
 * Applies to:
 *
 * - Shop / category / tag archives
 * - Product search results
 * - Related / upsell loops
 * - Shortcodes / campaign product loops
 * - Future homepage carousel loops
 */


/**
 * ==========================================================
 * 01. CARD FOUNDATION
 * ==========================================================
 */

ul.products
li.product {
	position: relative;

	/*
	 * Keep all product-card overlays (cart trigger, sale badge,
	 * quick-buy panel) inside the card stacking context. Without
	 * this isolation, a high child z-index can escape into the
	 * page stacking context and appear above the site mega menu.
	 */
	isolation: isolate;

	display: flex !important;
	flex-direction: column;

	min-width: 0;

	height: 100%;

	padding: 8px;

	background: transparent;

	border:
		1px
		solid
		var(
			--chacha-subtle,
			#D7CEC4
		);

	border-radius: 8px;

	box-shadow: none;

	overflow: visible;
}


/**
 * Product main link.
 */

ul.products
li.product
> a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;

	flex:
		0
		0
		auto;

	width: 100%;

	color: inherit;

	text-decoration: none;
}


/**
 * Kadence product-info wrapper normalization.
 *
 * The parent theme adds a separate content background, padding
 * and margins to .entry-content-wrap. ChaCha product cards use
 * one continuous surface instead: media + product information + CTA.
 */

ul.products
li.product
.product-details.content-bg.entry-content-wrap {
	display: flex !important;
	flex-direction: column;

	flex:
		1
		1
		auto;

	width: 100%;

	margin: 0 !important;

	padding:
		12px
		0
		0 !important;

	background: transparent !important;

	border-radius: 0 !important;
}


/**
 * ==========================================================
 * 02. PRODUCT IMAGE — 4:5
 * ==========================================================
 */

.chacha-product-media {
	position: relative;

	display: block;

	width: 100%;

	aspect-ratio:
		4 / 5;

	margin-bottom: 0;

	overflow: hidden;

	border-radius: 5px;

	background:
		var(
			--chacha-background-light,
			#FFFDFC
		);
}


/**
 * Primary + Secondary image foundation
 */

.chacha-product-media
img {
	position: absolute !important;

	inset: 0;

	display: block;

	width: 100% !important;
	height: 100% !important;

	max-width: none !important;

	margin: 0 !important;

	padding: 0;

	object-fit: cover;

	object-position: center;

	transform:
		scale(1);

	transition:
		opacity 360ms ease,
		transform 550ms cubic-bezier(
			0.22,
			1,
			0.36,
			1
		);
}


/**
 * Primary
 */

.chacha-product-media__primary {
	z-index: 1;

	opacity: 1;
}


/**
 * Secondary
 */

.chacha-product-media__secondary {
	z-index: 2;

	opacity: 0;

	pointer-events: none;
}


/**
 * ==========================================================
 * 03. SECOND IMAGE HOVER
 * ==========================================================
 *
 * Only real mouse / trackpad devices get image swapping.
 *
 * Touch devices retain the primary image.
 */

@media (hover: hover) and (pointer: fine) {

	ul.products
	li.product:hover
	.chacha-product-media.has-secondary
	.chacha-product-media__primary {
		opacity: 0;

		transform:
			scale(1.015);
	}


	ul.products
	li.product:hover
	.chacha-product-media.has-secondary
	.chacha-product-media__secondary {
		opacity: 1;

		transform:
			scale(1.015);
	}

}


/**
 * Products without a second image get a
 * subtle luxury zoom instead.
 */

@media (hover: hover) and (pointer: fine) {

	ul.products
	li.product:hover
	.chacha-product-media:not(.has-secondary)
	.chacha-product-media__primary {
		transform:
			scale(1.025);
	}

}


/**
 * Quick Picker owns the product preview while it is open.
 *
 * Keeping the normal card hover swap active here would place the
 * secondary gallery image above the primary image that JavaScript
 * updates for the selected variation. Force the primary layer back
 * to the front-facing state until the picker closes.
 */
@media (hover: hover) and (pointer: fine) {

	ul.products
	li.product.chacha-quick-picker-open
	.chacha-product-media
	.chacha-product-media__primary {
		opacity: 1;

		transform:
			scale(1);
	}


	ul.products
	li.product.chacha-quick-picker-open
	.chacha-product-media.has-secondary
	.chacha-product-media__secondary {
		opacity: 0;

		transform:
			scale(1);
	}

}


/**
 * ==========================================================
 * 04. SALE BADGE
 * ==========================================================
 */

ul.products
li.product
.onsale.chacha-product-badge {
	position: absolute;

	top: 12px;
	left: 12px;
	right: auto;

	z-index: 5;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width: 0;
	min-height: 0;

	margin: 0;

	padding:
		7px
		10px;

	border: 0;
	border-radius: 0;

	background:
		var(
			--chacha-text-strongest,
			#201A17
		);

	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);

	font-size: 9px;
	font-weight: 600;

	line-height: 1;

	letter-spacing: 0.12em;

	text-transform: uppercase;

	color: #FFFDFC;

	box-shadow: none;
}


/**
 * ==========================================================
 * 05. PRODUCT TITLE
 * ==========================================================
 */

ul.products
li.product
.woocommerce-loop-product__title {
	display: -webkit-box;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

	overflow: hidden;

	min-height:
		2.7em;

	margin:
		0
		0
		8px !important;

	padding: 0;

	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);

	font-size: 14px;
	font-weight: 500;

	line-height: 1.35;

	letter-spacing: -0.01em;

	color:
		var(
			--chacha-text-strongest,
			#201A17
		);
}


/**
 * ==========================================================
 * 06. PRICE
 * ==========================================================
 */

ul.products
li.product
.price {
	display: flex;

	align-items: baseline;

	flex-wrap: wrap;

	gap:
		4px
		7px;

	margin:
		0
		0
		8px !important;

	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);

	font-size: 16px;
	font-weight: 600;

	line-height: 1.35;

	color:
		var(
			--chacha-text-strongest,
			#201A17
		);
}


/**
 * Old price
 */

ul.products
li.product
.price del {
	font-size: 12px;
	font-weight: 400;

	color:
		var(
			--chacha-text-medium,
			#6A5F58
		);

	opacity: 0.65;
}


/**
 * Sale price
 */

ul.products
li.product
.price ins {
	font-weight: 600;

	text-decoration: none;

	color:
		var(
			--chacha-text-strongest,
			#201A17
		);
}


/**
 * ==========================================================
 * 07. STOCK STATUS
 * ==========================================================
 */

.chacha-product-stock {
	margin:
		2px
		0
		16px;

	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);

	font-size: 9px;
	font-weight: 600;

	line-height: 1.35;

	letter-spacing: 0.1em;

	text-transform: uppercase;
}


/**
 * In Stock
 */

.chacha-product-stock.is-in-stock {
	color:
		var(
			--chacha-success,
			#2F6B4F
		);
}


/**
 * Out of Stock
 */

.chacha-product-stock.is-out-of-stock {
	color:
		var(
			--chacha-alert,
			#A63D40
		);
}


/**
 * Backorder
 */

.chacha-product-stock.is-backorder {
	color:
		var(
			--chacha-warning,
			#B7791F
		);
}


/**
 * ==========================================================
 * 08. PRODUCT ACTION
 * ==========================================================
 */

ul.products
li.product
.product-action-wrap {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	width: 100%;
	min-height:
		var(
			--chacha-commerce-action-height,
			44px
		);

	margin-top: auto !important;
}


/**
 * Simple-product cart-icon actions are overlays, not a new row.
 *
 * Kadence can keep the action inside positioned info wrappers.
 * Reset only cards that actually contain the ChaCha cart trigger
 * so the absolute control is anchored by li.product.
 */
ul.products
li.product
.product-details.content-bg.entry-content-wrap:has(
	.chacha-product-cart-trigger
) {
	position: static !important;

	/*
	 * Kadence applies a hover transform to the product-details
	 * wrapper. A transformed ancestor becomes the containing block
	 * for absolutely positioned descendants, which made the cart
	 * trigger jump from the media corner down into the details area.
	 * Keep ChaCha's overlay anchored to li.product instead.
	 */
	transform: none !important;
}


ul.products
li.product
.product-action-wrap--cart-overlay,

ul.products
li.product
.product-action-wrap:has(
	.chacha-product-cart-trigger
) {
	display: contents !important;

	min-height: 0 !important;

	margin: 0 !important;

	padding: 0 !important;

	opacity: 1 !important;

	visibility: visible !important;

	transform: none !important;

	pointer-events: auto !important;
}


/**
 * Cart trigger placement.
 *
 * The control is intentionally a sibling overlay rather than
 * nested inside the product link. This keeps the markup valid
 * and preserves independent add-to-cart click behaviour.
 */
ul.products
li.product
.chacha-product-cart-trigger {
	position: absolute;

	top: 18px;
	right: 18px;

	z-index: 20;

	flex:
		0
		0
		auto;
}


/**
 * Safety for renderers that return the variable trigger as a
 * direct product-card child instead of placing it inside
 * .product-action-wrap.
 */
ul.products
li.product
> .chacha-product-quick-trigger:not(
	.chacha-product-cart-trigger
) {
	margin-top: auto !important;
	flex: 0 0 auto;
}


/**
 * Product CTA visual styling is centralized in:
 * assets/css/commerce-actions.css
 */

/**
 * ==========================================================
 * 09. MOBILE
 * ==========================================================
 */

@media (max-width: 767px) {

	ul.products
	li.product
	.chacha-product-cart-trigger {
		top: 14px;
		right: 14px;
	}

ul.products
li.product
.onsale.chacha-product-badge {
		top: 8px;
		left: 8px;

		padding:
			6px
			7px;

		font-size: 8px;
	}


ul.products
li.product
.woocommerce-loop-product__title {
		margin-bottom:
			6px !important;

		font-size: 12px;

		line-height: 1.4;

		min-height:
			2.8em;
	}


ul.products
li.product
.price {
		gap: 4px;

		margin-bottom:
			6px !important;

		font-size: 14px;
	}


ul.products
li.product
.price del {
		font-size: 10px;
	}


	.chacha-product-stock {
		margin-bottom: 12px;

		font-size: 8px;

		letter-spacing: 0.07em;
	}



}


/**
 * ==========================================================
 * 10. REDUCED MOTION
 * ==========================================================
 */

@media (prefers-reduced-motion: reduce) {

	.chacha-product-media
	img {
		transition: none;
	}

}
/**
 * ==========================================================
 * DELIVERY / RETURN CONTENT V1.1
 * ==========================================================
 */

.chacha-delivery-return {
	display: grid;

	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);

	gap: 0;

	border-top:
		1px
		solid
		var(
			--chacha-subtle,
			#D7CEC4
		);

	border-bottom:
		1px
		solid
		var(
			--chacha-subtle,
			#D7CEC4
		);
}


.chacha-delivery-return__section {
	padding:
		40px
		38px;
}


.chacha-delivery-return__section
+
.chacha-delivery-return__section {
	border-left:
		1px
		solid
		var(
			--chacha-subtle,
			#D7CEC4
		);
}


.chacha-delivery-return__eyebrow {
	margin:
		0
		0
		10px !important;

	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);

	font-size: 9px;
	font-weight: 600;

	line-height: 1.4;

	letter-spacing: 0.16em;

	text-transform: uppercase;

	color:
		var(
			--chacha-accent,
			#B08D57
		);
}


.chacha-delivery-return__title {
	margin:
		0
		0
		22px !important;

	font-family:
		var(
			--chacha-font-heading,
			"Cormorant Garamond",
			serif
		) !important;

	font-size:
		34px !important;

	font-weight:
		500 !important;

	line-height:
		1 !important;

	color:
		var(
			--chacha-text-strongest,
			#201A17
		) !important;
}


.chacha-delivery-return__content {
	font-family:
		var(
			--chacha-font-body,
			Inter,
			sans-serif
		);

	font-size: 13px;

	line-height: 1.75;

	color:
		var(
			--chacha-text-medium,
			#6A5F58
		);
}


.chacha-delivery-return__content
p {
	margin:
		0
		0
		16px !important;
}


.chacha-delivery-return__content
p:last-child {
	margin-bottom:
		0 !important;
}


.chacha-delivery-return__content
strong {
	font-weight: 600;

	color:
		var(
			--chacha-text-strong,
			#3B322D
		);
}


/**
 * MOBILE
 */

@media (max-width: 767px) {

	.chacha-delivery-return {
		grid-template-columns:
			1fr;
	}


	.chacha-delivery-return__section {
		padding:
			30px
			20px;
	}


	.chacha-delivery-return__section
	+
	.chacha-delivery-return__section {
		border-left: 0;

		border-top:
			1px
			solid
			var(
				--chacha-subtle,
				#D7CEC4
			);
	}


	.chacha-delivery-return__title {
		font-size:
			30px !important;
	}


	.chacha-delivery-return__content {
		font-size: 12px;

		line-height: 1.75;
	}

}

/**
 * ==========================================================
 * DEV-UI-PRODUCT-CARD-RATING-STARS-01
 * PRODUCT CARD — ACCESSIBLE STAR RATING
 * ==========================================================
 *
 * WooCommerce keeps its aria-label / role="img" rating text for
 * screen readers. The verbose inner sentence is visually replaced
 * by five stars and the existing inline percentage continues to
 * control the filled portion.
 */


/* Classic WooCommerce product cards */
ul.products
li.product
.star-rating,

/* Woo Product Collection cards */
.chacha-product-collection
.wc-block-components-product-rating-stars__stars {
	position:
		relative;

	display:
		block;

	overflow:
		hidden;

	width:
		5.9em;

	height:
		1em;

	margin:
		0
		0
		9px;

	font-family:
		Arial,
		sans-serif;

	font-size:
		12px;

	font-weight:
		400;

	line-height:
		1;

	letter-spacing:
		0.08em;

	color:
		#D7CEC4;

	white-space:
		nowrap;
}


/**
 * Empty/base stars.
 */
ul.products
li.product
.star-rating::before,

.chacha-product-collection
.wc-block-components-product-rating-stars__stars::before {
	content:
		"★★★★★";

	position:
		absolute;

	top:
		0;

	left:
		0;

	z-index:
		1;

	font-size:
		12px;

	line-height:
		1;

	letter-spacing:
		0.08em;

	color:
		#D7CEC4;
}


/**
 * WooCommerce supplies an inline width percentage on this span.
 * Preserve that width and clip the filled stars to the real rating.
 */
ul.products
li.product
.star-rating
> span,

.chacha-product-collection
.wc-block-components-product-rating-stars__stars
> span {
	position:
		absolute;

	top:
		0;

	left:
		0;

	z-index:
		2;

	overflow:
		hidden;

	height:
		1em;

	margin:
		0;

	padding:
		0;

	font-size:
		0;

	line-height:
		1;

	color:
		transparent;

	white-space:
		nowrap;
}


ul.products
li.product
.star-rating
> span::before,

.chacha-product-collection
.wc-block-components-product-rating-stars__stars
> span::before {
	content:
		"★★★★★";

	display:
		block;

	font-family:
		Arial,
		sans-serif;

	font-size:
		12px;

	font-weight:
		400;

	line-height:
		1;

	letter-spacing:
		0.08em;

	color:
		var(
			--chacha-accent,
			#B08D57
		);
}


/**
 * The readable sentence remains available through the parent
 * aria-label; do not let nested strong/rating text affect layout.
 */
ul.products
li.product
.star-rating
> span
strong,

.chacha-product-collection
.wc-block-components-product-rating-stars__stars
> span
.rating {
	font-size:
		0 !important;

	line-height:
		0;
}


/* Mobile keeps the same symbol language with a slightly tighter size. */
@media (max-width: 767px) {

	ul.products
	li.product
	.star-rating,

	.chacha-product-collection
	.wc-block-components-product-rating-stars__stars {
		width:
			5.75em;

		font-size:
			11px;
	}


	ul.products
	li.product
	.star-rating::before,

	.chacha-product-collection
	.wc-block-components-product-rating-stars__stars::before,

	ul.products
	li.product
	.star-rating
	> span::before,

	.chacha-product-collection
	.wc-block-components-product-rating-stars__stars
	> span::before {
		font-size:
			11px;
	}

}

/**
 * ==========================================================
 * DEV-UI-VARIABLE-PRODUCT-CARD-CONSISTENCY-01-R4
 * Woo Product Collection variable cards -> Tüm Ürünler action.
 * ==========================================================
 */

.chacha-product-collection
.wc-block-product.chacha-has-variable-cart-trigger {
	position: relative;
}

.chacha-product-collection
.wc-block-product
.chacha-variable-product-action-overlay {
	display: contents !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.chacha-product-collection
.wc-block-product
.chacha-product-cart-trigger--variable {
	position: absolute !important;
	top: 18px !important;
	right: 18px !important;
	z-index: 20;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 1px solid var(--chacha-subtle, #D7CEC4) !important;
	border-radius: 50% !important;
	background: var(--chacha-surface, #FFFDFC) !important;
	box-shadow: 0 2px 10px rgba(32, 26, 23, 0.06) !important;

	color: var(--chacha-text-strongest, #201A17) !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-decoration: none !important;
}

.chacha-product-collection
.wc-block-product.chacha-has-variable-cart-trigger
.wc-block-components-product-sale-badge {
	left: 14px !important;
	right: auto !important;
}

.chacha-product-collection
.wc-block-product.chacha-has-variable-cart-trigger
.chacha-product-wishlist-trigger {
	position: absolute !important;
	top: 64px !important;
	right: 18px !important;
	z-index: 20;
}

@media (max-width: 767px) {
	.chacha-product-collection
	.wc-block-product
	.chacha-product-cart-trigger--variable {
		top: 14px !important;
		right: 14px !important;

		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		min-height: 34px !important;
	}

	.chacha-product-collection
	.wc-block-product.chacha-has-variable-cart-trigger
	.chacha-product-wishlist-trigger {
		top: 56px !important;
		right: 14px !important;
	}

	.chacha-product-collection
	.wc-block-product.chacha-has-variable-cart-trigger
	.wc-block-components-product-sale-badge {
		left: 8px !important;
		right: auto !important;
	}
}
/* DEV-CAMPAIGN-BADGE-01: campaign type is owned by Campaign Manager. */
ul.products li.product .onsale.chacha-product-badge--advantage,
ul.products li.product .onsale.chacha-product-badge--super,
ul.products li.product .onsale.chacha-product-badge--flash {
  box-sizing: border-box;
  max-width: calc(100% - 64px);
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
}
ul.products li.product .onsale.chacha-product-badge--advantage {
  background: #FAF5ED;
  color: #35291F;
  border-color: #C5AC83;
}
ul.products li.product .onsale.chacha-product-badge--super {
  background: #C6B08D;
  color: #251D17;
  border-color: #B49C74;
}
ul.products li.product .onsale.chacha-product-badge--flash {
  background: #241D18;
  color: #EBD2AC;
  border-color: #C3A373;
}
@media (max-width: 767px) {
  ul.products li.product .onsale.chacha-product-badge--advantage,
  ul.products li.product .onsale.chacha-product-badge--super,
  ul.products li.product .onsale.chacha-product-badge--flash {
    top: 8px;
    left: 8px;
    max-width: calc(100% - 55px);
    padding: 5px 6px;
    font-size: 8px;
    line-height: 1.25;
    letter-spacing: 0.025em;
  }
}


/* DEV-CAMPAIGN-BADGE-01B: WooCommerce Product Collection badges.
 * Classic loop styles above remain unchanged; the shared Core helper
 * determines which campaign is really applied to each card's product.
 */
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-sale-badge.chacha-product-badge--advantage,
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-sale-badge.chacha-product-badge--super,
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-sale-badge.chacha-product-badge--flash {
    box-sizing: border-box;
    min-width: 0;
    max-width: calc(100% - 64px);
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    letter-spacing: 0.06em;
    font-weight: 700;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 3px;
}
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-sale-badge.chacha-product-badge--advantage {
    background: #FAF5ED;
    color: #35291F;
    border-color: #C5AC83;
}
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-sale-badge.chacha-product-badge--super {
    background: #C6B08D;
    color: #251D17;
    border-color: #B49C74;
}
:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-sale-badge.chacha-product-badge--flash {
    background: #241D18;
    color: #EBD2AC;
    border-color: #C3A373;
}
@media (max-width: 767px) {
    :is(.chacha-product-collection, .chacha-product-card-block-scope)
    .wc-block-components-product-sale-badge.chacha-product-badge--advantage,
    :is(.chacha-product-collection, .chacha-product-card-block-scope)
    .wc-block-components-product-sale-badge.chacha-product-badge--super,
    :is(.chacha-product-collection, .chacha-product-card-block-scope)
    .wc-block-components-product-sale-badge.chacha-product-badge--flash {
        top: 8px;
        left: 8px;
        right: auto;
        max-width: calc(100% - 55px);
        padding: 5px 6px;
        font-size: 8px;
        line-height: 1.25;
        letter-spacing: 0.025em;
    }
}

/**
 * ==========================================================
 * CHA-PRODUCT-CARD-UNIFICATION-01 / A2.2A
 * CONSOLIDATED FULL-CARD VISUAL CONTRACT
 * ==========================================================
 *
 * Canonical visual reference:
 * Shop / product-category Classic Product Card.
 *
 * This layer adapts non-archive renderers without changing
 * their functional behaviour.
 */


/* ==========================================================
 * 01. HOMEPAGE / WOO PRODUCT COLLECTION
 * ========================================================== */

:is(
    .chacha-product-collection,
    .chacha-product-card-block-scope
)
.wc-block-product {
    padding: 0 !important;

    border:
        1px
        solid
        var(
            --chacha-subtle,
            #D7CEC4
        ) !important;

    border-radius:
        8px !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    overflow:
        hidden !important;
}


:is(
    .chacha-product-collection,
    .chacha-product-card-block-scope
)
.wc-block-product
.wc-block-components-product-image {
    width:
        100% !important;

    aspect-ratio:
        4 / 5 !important;

    margin:
        0 !important;

    border-radius:
        5px !important;

    background:
        var(
            --chacha-background-light,
            #FFFDFC
        ) !important;

    overflow:
        hidden !important;
}


:is(
    .chacha-product-collection,
    .chacha-product-card-block-scope
)
.wc-block-product
.wc-block-components-product-image
img {
    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    object-fit:
        cover !important;

    object-position:
        center !important;
}


:is(
    .chacha-product-collection,
    .chacha-product-card-block-scope
)
.wc-block-product
.wc-block-components-product-name {
    display:
        -webkit-box !important;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    line-clamp:
        2;

    min-height:
        2.7em !important;

    margin:
        0
        0
        8px !important;

    padding:
        8px
        0 !important;

    overflow:
        hidden;

    font-family:
        var(
            --chacha-font-body,
            Inter,
            sans-serif
        ) !important;

    font-size:
        16px !important;

    font-weight:
        500 !important;

    line-height:
        1.35 !important;

    letter-spacing:
        -0.01em !important;

    color:
        var(
            --chacha-text-strongest,
            #201A17
        ) !important;
}


:is(
    .chacha-product-collection,
    .chacha-product-card-block-scope
)
.wc-block-product
.wc-block-components-product-price {
    display:
        flex !important;

    align-items:
        baseline;

    flex-wrap:
        wrap;

    gap:
        4px
        7px !important;

    width:
        100%;

    margin:
        0
        0
        8px !important;

    padding:
        0 !important;

    font-family:
        var(
            --chacha-font-body,
            Inter,
            sans-serif
        ) !important;

    font-size:
        13.712px !important;

    font-weight:
        400 !important;

    line-height:
        1.35 !important;

    color:
        var(
            --chacha-text-strong,
            #3B322D
        ) !important;
}


/* ==========================================================
 * 02. PDP / RELATED PRODUCTS
 *
 * single-product.css still contains legacy card skin.
 * These stronger canonical selectors neutralize it safely.
 * Retained temporarily as cascade guards pending context cleanup.
 * ========================================================== */

body.single-product
.related.products
ul.products
li.product
.woocommerce-loop-product__title {
    margin:
        0
        0
        8px !important;

    padding:
        8px
        0 !important;

    font-family:
        var(
            --chacha-font-body,
            Inter,
            sans-serif
        ) !important;

    font-size:
        16px !important;

    font-weight:
        500 !important;

    line-height:
        1.35 !important;

    letter-spacing:
        -0.01em !important;
}


body.single-product
.related.products
ul.products
li.product
.price {
    margin:
        0
        0
        8px !important;

    padding:
        0 !important;

    font-family:
        var(
            --chacha-font-body,
            Inter,
            sans-serif
        ) !important;

    font-size:
        13.712px !important;

    font-weight:
        400 !important;

    line-height:
        1.35 !important;
}


/* ==========================================================
 * 03. WISHLIST PAGE
 * ========================================================== */

body.chacha-wishlist-page-page
.chacha-wishlist-products
ul.products
li.product {
    padding:
        0 !important;
}


body.chacha-wishlist-page-page
.chacha-wishlist-products
ul.products
li.product
.woocommerce-loop-product__title {
    margin:
        0
        0
        8px !important;

    padding:
        8px
        0 !important;

    font-family:
        var(
            --chacha-font-body,
            Inter,
            sans-serif
        ) !important;

    font-size:
        16px !important;

    font-weight:
        500 !important;

    line-height:
        1.35 !important;
}


body.chacha-wishlist-page-page
.chacha-wishlist-products
ul.products
li.product
.price {
    margin:
        0
        0
        8px !important;

    padding:
        0 !important;

    font-family:
        var(
            --chacha-font-body,
            Inter,
            sans-serif
        ) !important;

    font-size:
        13.712px !important;

    font-weight:
        400 !important;

    line-height:
        1.35 !important;
}


/* ==========================================================
 * 04. ADD-TO-CART MODAL RECOMMENDATIONS
 * ========================================================== */

.chacha-cart-modal
.chacha-cart-modal__recommendations
.chacha-cart-modal__grid
article.chacha-modal-product {
    box-sizing:
        border-box;

    position:
        relative;

    isolation:
        isolate;

    display:
        flex !important;

    flex-direction:
        column;

    height:
        100%;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        1px
        solid
        var(
            --chacha-subtle,
            #D7CEC4
        ) !important;

    border-radius:
        8px !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    overflow:
        hidden !important;
}


.chacha-cart-modal
.chacha-cart-modal__grid
.chacha-modal-product
.chacha-modal-product__media {
    position:
        relative;

    display:
        block;

    width:
        100%;

    height:
        auto !important;

    aspect-ratio:
        4 / 5 !important;

    margin:
        0 !important;

    border-radius:
        5px !important;

    background:
        var(
            --chacha-background-light,
            #FFFDFC
        ) !important;

    overflow:
        hidden !important;
}


.chacha-cart-modal
.chacha-cart-modal__grid
.chacha-modal-product
.chacha-modal-product__image {
    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    aspect-ratio:
        auto !important;

    object-fit:
        cover !important;

    object-position:
        center !important;
}


.chacha-cart-modal
.chacha-cart-modal__grid
.chacha-modal-product
.chacha-modal-product__title {
    display:
        -webkit-box !important;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    line-clamp:
        2;

    min-height:
        2.7em;

    margin:
        0
        0
        8px !important;

    padding:
        8px
        0 !important;

    overflow:
        hidden;

    font-family:
        var(
            --chacha-font-body,
            Inter,
            sans-serif
        ) !important;

    font-size:
        16px !important;

    font-weight:
        500 !important;

    line-height:
        1.35 !important;

    color:
        var(
            --chacha-text-strongest,
            #201A17
        ) !important;
}


.chacha-cart-modal
.chacha-cart-modal__grid
.chacha-modal-product
.chacha-modal-product__price {
    display:
        flex !important;

    align-items:
        baseline;

    flex-wrap:
        wrap;

    gap:
        4px
        7px;

    width:
        100%;

    margin:
        0
        0
        8px !important;

    padding:
        0 !important;

    font-family:
        var(
            --chacha-font-body,
            Inter,
            sans-serif
        ) !important;

    font-size:
        13.712px !important;

    font-weight:
        400 !important;

    line-height:
        1.35 !important;
}


/* ==========================================================
 * 05. 404 RECOVERY PRODUCTS
 * ========================================================== */

.chacha-404-product {
    border:
        1px
        solid
        var(
            --chacha-subtle,
            #D7CEC4
        ) !important;

    border-radius:
        8px !important;

    background:
        transparent !important;

    overflow:
        hidden !important;
}


.chacha-404-product__media {
    width:
        100%;

    aspect-ratio:
        4 / 5 !important;

    margin:
        0 !important;

    border-radius:
        5px !important;

    background:
        var(
            --chacha-background-light,
            #FFFDFC
        ) !important;
}


.chacha-404-product__image {
    width:
        100% !important;

    height:
        100% !important;

    object-fit:
        cover !important;

    object-position:
        center !important;
}


.chacha-404-product__content
h3 {
    display:
        -webkit-box !important;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    line-clamp:
        2;

    min-height:
        2.7em;

    margin:
        0
        0
        8px !important;

    padding:
        8px
        0 !important;

    overflow:
        hidden;

    font-family:
        var(
            --chacha-font-body,
            Inter,
            sans-serif
        ) !important;

    font-size:
        16px !important;

    font-weight:
        500 !important;

    line-height:
        1.35 !important;
}


.chacha-404-product__price {
    display:
        flex !important;

    align-items:
        baseline;

    flex-wrap:
        wrap;

    gap:
        4px
        7px;

    width:
        100%;

    margin:
        0
        0
        8px !important;

    padding:
        0 !important;

    font-family:
        var(
            --chacha-font-body,
            Inter,
            sans-serif
        ) !important;

    font-size:
        13.712px !important;

    font-weight:
        400 !important;

    line-height:
        1.35 !important;
}

/* ==========================================================
 * 01. CLASSIC WOO PRODUCT CARDS
 * ========================================================== */

ul.products
li.product {
    padding:
        0 !important;
}


ul.products
li.product
.woocommerce-loop-product__title {
    display:
        -webkit-box !important;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    line-clamp:
        2;

    min-height:
        2.7em !important;

    margin:
        0
        0
        8px !important;

    padding:
        8px
        0 !important;

    overflow:
        hidden !important;

    font-family:
        var(
            --chacha-font-body,
            Inter,
            sans-serif
        ) !important;

    font-size:
        16px !important;

    font-weight:
        500 !important;

    line-height:
        1.35 !important;

    letter-spacing:
        -0.01em !important;

    color:
        var(
            --chacha-text-strongest,
            #201A17
        ) !important;
}


ul.products
li.product
.price {
    display:
        flex !important;

    align-items:
        baseline;

    flex-wrap:
        wrap;

    gap:
        4px
        7px !important;

    margin:
        0
        0
        8px !important;

    padding:
        0 !important;

    font-family:
        var(
            --chacha-font-body,
            Inter,
            sans-serif
        ) !important;

    font-size:
        13.712px !important;

    font-weight:
        400 !important;

    line-height:
        1.35 !important;

    color:
        var(
            --chacha-text-strong,
            #3B322D
        ) !important;
}

/* ==========================================================
 * 02. HOMEPAGE WOO BLOCK CARDS
 *
 * Use explicit homepage context to beat the Woo block cascade.
 * ========================================================== */

.home
.chacha-new-arrivals
.wc-block-product
.wc-block-components-product-name,

.home
.chacha-featured
.wc-block-product
.wc-block-components-product-name,

.home
.chacha-product-collection
.wc-block-product
.wc-block-components-product-name {
    display:
        -webkit-box !important;

    -webkit-box-orient:
        vertical !important;

    -webkit-line-clamp:
        2 !important;

    line-clamp:
        2 !important;

    min-height:
        2.7em !important;

    margin:
        0
        0
        8px !important;

    padding:
        8px
        0 !important;

    overflow:
        hidden !important;

    font-family:
        var(
            --chacha-font-body,
            Inter,
            sans-serif
        ) !important;

    font-size:
        16px !important;

    font-weight:
        500 !important;

    line-height:
        1.35 !important;

    letter-spacing:
        -0.01em !important;

    color:
        var(
            --chacha-text-strongest,
            #201A17
        ) !important;
}


.home
.chacha-new-arrivals
.wc-block-product
.wc-block-components-product-price,

.home
.chacha-featured
.wc-block-product
.wc-block-components-product-price,

.home
.chacha-product-collection
.wc-block-product
.wc-block-components-product-price {
    gap:
        4px
        7px !important;

    margin:
        0
        0
        8px !important;

    padding:
        0 !important;

    font-family:
        var(
            --chacha-font-body,
            Inter,
            sans-serif
        ) !important;

    font-size:
        13.712px !important;

    font-weight:
        400 !important;

    line-height:
        1.35 !important;
}

/* ==========================================================
 * 04. MOBILE CANONICAL CONTRACT
 * ========================================================== */

@media (max-width: 767px) {

    ul.products
    li.product
    .woocommerce-loop-product__title,

    .home
    .chacha-new-arrivals
    .wc-block-product
    .wc-block-components-product-name,

    .home
    .chacha-featured
    .wc-block-product
    .wc-block-components-product-name,

    .home
    .chacha-product-collection
    .wc-block-product
    .wc-block-components-product-name,

    .chacha-cart-modal
    .chacha-cart-modal__grid
    .chacha-modal-product
    .chacha-modal-product__title,

    .chacha-404-product
    .chacha-404-product__content
    h3 {
        min-height:
            2.8em !important;

        margin:
            0
            0
            6px !important;

        padding:
            8px
            0 !important;

        font-family:
            var(
                --chacha-font-body,
                Inter,
                sans-serif
            ) !important;

        font-size:
            16px !important;

        font-weight:
            500 !important;

        line-height:
            1.4 !important;

        letter-spacing:
            -0.01em !important;
    }


    ul.products
    li.product
    .price,

    .home
    .chacha-new-arrivals
    .wc-block-product
    .wc-block-components-product-price,

    .home
    .chacha-featured
    .wc-block-product
    .wc-block-components-product-price,

    .home
    .chacha-product-collection
    .wc-block-product
    .wc-block-components-product-price,

    .chacha-cart-modal
    .chacha-cart-modal__grid
    .chacha-modal-product
    .chacha-modal-product__price,

    .chacha-404-product
    .chacha-404-product__price {
        gap:
            4px
            7px !important;

        margin:
            0
            0
            8px !important;

        padding:
            0 !important;

        font-family:
            var(
                --chacha-font-body,
                Inter,
                sans-serif
            ) !important;

        font-size:
            13.712px !important;

        font-weight:
            400 !important;

        line-height:
            1.35 !important;
    }

}

/* ==========================================================
 * 02. MOBILE — WISHLIST
 *
 * Match the existing context-specific specificity and restore
 * the canonical mobile values measured from Tüm Ürünler.
 * ========================================================== */

@media (max-width: 767px) {

    body.chacha-wishlist-page-page
    .chacha-wishlist-products
    ul.products
    li.product
    .woocommerce-loop-product__title {
        min-height:
            2.8em !important;

        margin:
            0
            0
            6px !important;

        padding:
            8px
            0 !important;

        font-family:
            var(
                --chacha-font-body,
                Inter,
                sans-serif
            ) !important;

        font-size:
            16px !important;

        font-weight:
            500 !important;

        line-height:
            1.4 !important;

        letter-spacing:
            -0.01em !important;
    }


    body.chacha-wishlist-page-page
    .chacha-wishlist-products
    ul.products
    li.product
    .price {
        margin:
            0
            0
            8px !important;

        padding:
            0 !important;

        font-family:
            var(
                --chacha-font-body,
                Inter,
                sans-serif
            ) !important;

        font-size:
            13.712px !important;

        font-weight:
            400 !important;

        line-height:
            1.35 !important;
    }


    /* ======================================================
     * 03. MOBILE — PDP RELATED
     * ====================================================== */

    body.single-product
    .related.products
    ul.products
    li.product
    .woocommerce-loop-product__title {
        min-height:
            2.8em !important;

        margin:
            0
            0
            6px !important;

        padding:
            8px
            0 !important;

        font-family:
            var(
                --chacha-font-body,
                Inter,
                sans-serif
            ) !important;

        font-size:
            16px !important;

        font-weight:
            500 !important;

        line-height:
            1.4 !important;

        letter-spacing:
            -0.01em !important;
    }


    body.single-product
    .related.products
    ul.products
    li.product
    .price {
        margin:
            0
            0
            8px !important;

        padding:
            0 !important;

        font-family:
            var(
                --chacha-font-body,
                Inter,
                sans-serif
            ) !important;

        font-size:
            13.712px !important;

        font-weight:
            400 !important;

        line-height:
            1.35 !important;
    }

}

.chacha-new-arrivals
.wc-block-product
.wp-block-post-title,

.chacha-featured
.wc-block-product
.wp-block-post-title {
    box-sizing:
        border-box;

    display:
        -webkit-box !important;

    -webkit-box-orient:
        vertical !important;

    -webkit-line-clamp:
        2 !important;

    line-clamp:
        2 !important;

    width:
        100% !important;

    min-height:
        2.7em !important;

    margin:
        0
        0
        8px !important;

    padding:
        8px
        0 !important;

    overflow:
        hidden !important;

    font-family:
        var(
            --chacha-font-body,
            Inter,
            sans-serif
        ) !important;

    font-size:
        16px !important;

    font-weight:
        500 !important;

    line-height:
        1.35 !important;

    letter-spacing:
        -0.01em !important;

    color:
        var(
            --chacha-text-strongest,
            #201A17
        ) !important;
}


.chacha-new-arrivals
.wc-block-product
.wp-block-post-title
a,

.chacha-featured
.wc-block-product
.wp-block-post-title
a {
    color:
        inherit !important;

    text-decoration:
        none !important;
}


@media (max-width: 767px) {

    .chacha-new-arrivals
    .wc-block-product
    .wp-block-post-title,

    .chacha-featured
    .wc-block-product
    .wp-block-post-title {
        min-height:
            2.8em !important;

        margin:
            0
            0
            6px !important;

        padding:
            8px
            0 !important;

        font-size:
            16px !important;

        font-weight:
            500 !important;

        line-height:
            1.4 !important;

        letter-spacing:
            -0.01em !important;
    }

}

/**
 * ==========================================================
 * CHA-PRODUCT-CARD-POLISH-02 / CONTENT GUTTER
 * ==========================================================
 *
 * Keep media full-bleed while giving title / price / stock
 * calm inline breathing space from the card border.
 */

:root {
    --chacha-product-card-content-inline: 12px;
}


ul.products
li.product
.woocommerce-loop-product__title {
    box-sizing: border-box;

    padding:
        8px
        var(--chacha-product-card-content-inline) !important;
}


ul.products
li.product
.price {
    box-sizing: border-box;

    padding:
        0
        var(--chacha-product-card-content-inline) !important;
}


ul.products
li.product
.chacha-product-stock {
    box-sizing: border-box;

    padding-inline:
        var(--chacha-product-card-content-inline) !important;
}


:is(
    .chacha-product-collection,
    .chacha-product-card-block-scope
)
.wc-block-product
:is(
    .wc-block-components-product-name,
    .wp-block-post-title
) {
    box-sizing: border-box;

    padding:
        8px
        var(--chacha-product-card-content-inline) !important;
}


:is(
    .chacha-product-collection,
    .chacha-product-card-block-scope
)
.wc-block-product
.wc-block-components-product-price {
    box-sizing: border-box;

    padding:
        0
        var(--chacha-product-card-content-inline) !important;
}


:is(
    .chacha-product-collection,
    .chacha-product-card-block-scope
)
.wc-block-product
> .chacha-product-stock {
    box-sizing: border-box;

    padding-inline:
        var(--chacha-product-card-content-inline) !important;
}


@media (max-width: 767px) {

    :root {
        --chacha-product-card-content-inline: 10px;
    }

}

/**
 * ==========================================================
 * CHA-PRODUCT-CARD-POLISH-02 REV.4 / HOME PRICE GUTTER
 * ==========================================================
 *
 * Runtime evidence:
 * .wc-block-components-product-price was still 0px / 0px
 * while title and stock already matched the content gutter.
 *
 * Match the real Woo Block price wrapper used by homepage
 * product collections and align price with title / stock.
 */

body.home
:is(
    .chacha-new-arrivals,
    .chacha-featured
)
.chacha-product-collection
.chacha-product-card-block-scope
.wc-block-product
.wp-block-woocommerce-product-price
>
.wc-block-components-product-price,

body.home
:is(
    .chacha-new-arrivals,
    .chacha-featured
)
.chacha-product-collection
.wc-block-product
.wp-block-woocommerce-product-price
>
.wc-block-components-product-price {
    box-sizing:
        border-box;

    width:
        100%;

    padding:
        0
        var(
            --chacha-product-card-content-inline,
            12px
        ) !important;
}

/* ==========================================================
 * CHA-PRODUCT-IMAGE-SYSTEM-01 / HOMEPAGE BLOCK SECONDARY IMAGE
 * ==========================================================
 *
 * Progressive enhancement for WooCommerce Product Collection cards.
 * Existing card sizing, 4:5 framing and primary responsive image stay
 * untouched. Desktop fine-pointer hover swaps Studio -> first distinct
 * gallery image. Touch/coarse-pointer devices keep Studio only.
 */

:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-image.chacha-product-block-media--has-secondary
> a {
	position: relative;
}


:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-image.chacha-product-block-media--has-secondary
> a
> img:not(.chacha-product-block-media__secondary) {
	position: relative;
	z-index: 1;

	opacity: 1;
}


:is(.chacha-product-collection, .chacha-product-card-block-scope)
.wc-block-components-product-image
.chacha-product-block-media__secondary {
	position: absolute;
	inset: 0;

	z-index: 2;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	opacity: 0;

	pointer-events: none;

	transition:
		opacity 300ms ease,
		transform 500ms ease;
}


@media (hover: hover) and (pointer: fine) {

	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-components-product-image.chacha-product-block-media--has-secondary:hover
	> a
	> img:not(.chacha-product-block-media__secondary) {
		opacity: 0;
	}


	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-components-product-image.chacha-product-block-media--has-secondary:hover
	.chacha-product-block-media__secondary {
		opacity: 1;
		transform: scale(1.025);
	}

}


@media (hover: none), (pointer: coarse) {

	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-components-product-image
	.chacha-product-block-media__secondary {
		display: none;
	}


	:is(.chacha-product-collection, .chacha-product-card-block-scope)
	.wc-block-components-product-image.chacha-product-block-media--has-secondary
	> a
	> img:not(.chacha-product-block-media__secondary) {
		opacity: 1;
	}

}