:root {
	--ctc-gold: #c8a45f;
	--ctc-gold-soft: #ead7ad;
	--ctc-ink: #15110D;
	--ctc-cream: #f4eee3;
	--ctc-oud: #5a3424;
	--ctc-muted: #7b746c;
}

.ctc-availability-badge {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: 0.38rem 0.72rem 0.32rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.69rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}

.ctc-availability-badge--in_stock {
	color: #FFFFFF;
	background: #315E46;
}

.ctc-availability-badge--in_procurement {
	color: #15110D;
	background: #B57A2D;
}

.ctc-availability-badge--out_of_stock {
	color: #FFFFFF;
	background: #7D3535;
}

.ctc-availability-badge--loop {
	margin: 0.55rem 0 0.7rem;
}

.ctc-availability-panel {
	display: grid;
	gap: 0.7rem;
	margin: 0 0 1.35rem;
	padding: 1rem 1.1rem;
	border-inline-start: 2px solid var(--ctc-gold);
	background: color-mix(in srgb, var(--ctc-gold-soft) 13%, transparent);
}

.ctc-availability-panel p,
.ctc-product-disclaimer p {
	margin: 0;
}

.ctc-availability-promise {
	color: inherit;
	font-size: 0.94rem;
	line-height: 1.55;
}

.ctc-price-request-note {
	color: #6c645c;
	font-size: 0.86rem;
	line-height: 1.5;
}

.ctc-price-on-request {
	color: inherit;
	font-size: 0.92em;
	font-weight: 500;
	letter-spacing: 0.04em;
}

/*
 * Product-card identity rhythm. The model retains the loop heading while the
 * exact reference becomes a distinct LTR line. Two model lines are reserved on
 * multi-column grids so model, reference, price, and CTA baselines remain even.
 */
.ctc-product-card-reference {
	box-sizing: border-box;
	color: #7a6a57;
	direction: ltr;
	display: block;
	font-family: var(--ct-body, "Manrope", Arial, sans-serif);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.35;
	min-block-size: 1.35em;
	text-align: center;
	text-transform: uppercase;
	unicode-bidi: isolate;
}

.ctc-product-card-reference bdi {
	direction: ltr;
	font-variant-numeric: tabular-nums;
	unicode-bidi: isolate;
}

.ct-products-grid ul.products li.product .woocommerce-loop-product__title,
.ct-products-grid--archive ul.products li.product .woocommerce-loop-product__title {
	box-sizing: border-box;
	min-block-size: 2.16em;
}

.ct-products-grid ul.products li.product .ctc-product-card-reference {
	margin: 0.2rem 1.25rem 0;
}

.ct-products-grid--archive ul.products li.product .ctc-product-card-reference {
	margin: 0.18rem 1.1rem 0;
}

/*
 * The temporary catalogue photography carries more white canvas above the
 * watch than below it. Rebalance that intrinsic framing without changing the
 * total vertical padding, image-box height, or the card rhythm beneath it.
 */
.ct-products-grid ul.products li.product a img {
	background: #fff !important;
	padding-block-start: clamp(0.25rem, 0.55vw, 0.45rem) !important;
	padding-block-end: clamp(1.25rem, 3vw, 2.25rem) !important;
	padding-inline: clamp(0.75rem, 1.8vw, 1.35rem) !important;
}

/*
 * Curated product-card media. The square stack occupies the same footprint as
 * the previous single thumbnail. Its decorative close-up is the default view;
 * the existing featured image crossfades into place only on true hover or when
 * a control inside the card receives keyboard focus. Touch retains the user's
 * intentional close-up instead of relying on an unavailable hover gesture.
 */
.ctc-loop-media-stack {
	position: relative;
	display: block;
	overflow: hidden;
	inline-size: 100%;
	aspect-ratio: 1;
	background: #fff;
	isolation: isolate;
}

.ctc-loop-media-stack .ctc-loop-media__image {
	display: block !important;
	box-sizing: border-box !important;
	inline-size: 100% !important;
	block-size: 100% !important;
	max-inline-size: none !important;
	margin: 0 !important;
	background: #fff !important;
	pointer-events: none;
	transition:
		transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
		opacity 480ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity, transform;
}

.ctc-loop-media-stack .ctc-loop-media__image--closeup {
	position: relative;
	z-index: 2;
	padding: 0 !important;
	opacity: 1 !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	transform-origin: 50% 50% !important;
	transform: scale(1.68) !important;
}

/*
 * Beat both the legacy grid-padding rule and Divi's high-specificity
 * !important contain/position rules. The transform is intentionally applied to
 * the close-up only; the regular featured-image layer retains its exact 0.10.0
 * framing.
 */
.ct-products-grid ul.products li.product a .ctc-loop-media-stack .ctc-loop-media__image--closeup {
	padding-block-start: 0 !important;
	padding-block-end: 0 !important;
	padding-inline: 0 !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	transform-origin: 50% 50% !important;
	transform: scale(1.68) !important;
}

/*
 * Active official imagery uses an asymmetric dial crop. The first nine
 * configurations place the crown/dial detail toward the right; the left-crown
 * Sprite configuration mirrors that composition. Generic and unpublished
 * marketplace cards keep the safer centred 1.68× crop above.
 */
.ct-products-grid ul.products li.product:is(.post-76, .post-77, .post-78, .post-79, .post-80, .post-81, .post-82, .post-83, .post-84) .ctc-loop-media-stack > img.ctc-loop-media__image--closeup {
	transform-origin: 73% 50% !important;
	transform: scale(2.40) !important;
}

.ct-products-grid ul.products li.product.post-85 .ctc-loop-media-stack > img.ctc-loop-media__image--closeup {
	transform-origin: 27% 50% !important;
	transform: scale(2.40) !important;
}

.ctc-loop-media-stack .ctc-loop-media__image--regular {
	position: absolute;
	z-index: 1;
	inset: 0;
	padding-block-start: clamp(0.25rem, 0.55vw, 0.45rem) !important;
	padding-block-end: clamp(1.25rem, 3vw, 2.25rem) !important;
	padding-inline: clamp(0.75rem, 1.8vw, 1.35rem) !important;
	opacity: 0 !important;
	object-fit: contain;
	object-position: 50% 50%;
	transform: scale(1.045) !important;
}

@media (hover: hover) and (pointer: fine) {
	/*
	 * Divi's rendered hover-out is 280ms ease on both image layers. Entering
	 * hover/focus uses its exact temporal inverse. These declarations exist only
	 * in the active state, so leaving the card retains Divi's return unchanged.
	 */
	.ct-products-grid ul.products li.product:hover .ctc-loop-media-stack > img.ctc-loop-media__image,
	.ct-products-grid ul.products li.product:focus-within .ctc-loop-media-stack > img.ctc-loop-media__image,
	body.woocommerce-shop .ct-products-grid--archive ul.products li.product:hover .ctc-loop-media-stack > img.ctc-loop-media__image,
	body.woocommerce-shop .ct-products-grid--archive ul.products li.product:focus-within .ctc-loop-media-stack > img.ctc-loop-media__image {
		transition:
			transform 280ms cubic-bezier(0.75, 0, 0.75, 0.9),
			opacity 280ms cubic-bezier(0.75, 0, 0.75, 0.9);
	}

	li.product:hover .ctc-loop-media-stack .ctc-loop-media__image--closeup,
	li.product:focus-within .ctc-loop-media-stack .ctc-loop-media__image--closeup {
		opacity: 0 !important;
		transform: scale(1.10) !important;
	}

	.ct-products-grid ul.products li.product:hover .ctc-loop-media-stack > img.ctc-loop-media__image--closeup,
	.ct-products-grid ul.products li.product:focus-within .ctc-loop-media-stack > img.ctc-loop-media__image--closeup {
		object-fit: cover !important;
		object-position: 50% 50% !important;
		transform: scale(1.10) !important;
	}

	li.product:hover .ctc-loop-media-stack .ctc-loop-media__image--regular,
	li.product:focus-within .ctc-loop-media-stack .ctc-loop-media__image--regular {
		opacity: 1 !important;
		transform: scale(1) !important;
	}
}

/*
 * Divi's later global archive rule forces every descendant of an out-of-stock
 * card to opacity: 1 !important. These shop-only selectors deliberately carry
 * greater specificity without depending on a current or future stock status.
 * The Home grid remains governed by the general media-stack rules above.
 */
body.woocommerce-shop .ct-products-grid--archive ul.products li.product .ctc-loop-media-stack > img.ctc-loop-media__image--regular {
	opacity: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
	body.woocommerce-shop .ct-products-grid--archive ul.products li.product:hover .ctc-loop-media-stack > img.ctc-loop-media__image--closeup,
	body.woocommerce-shop .ct-products-grid--archive ul.products li.product:focus-within .ctc-loop-media-stack > img.ctc-loop-media__image--closeup {
		opacity: 0 !important;
	}

	body.woocommerce-shop .ct-products-grid--archive ul.products li.product:hover .ctc-loop-media-stack > img.ctc-loop-media__image--regular,
	body.woocommerce-shop .ct-products-grid--archive ul.products li.product:focus-within .ctc-loop-media-stack > img.ctc-loop-media__image--regular {
		opacity: 1 !important;
	}
}

.ct-products-grid .dipl_single_woo_product_content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.ct-products-grid .dipl_single_woo_product_price {
	margin-block-start: auto !important;
}

.ctc-product-disclaimer {
	display: grid;
	gap: 0.7rem;
	clear: both;
	margin: 1.5rem 0;
	padding: 1rem 1.15rem;
	border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
	color: var(--ctc-muted);
	font-size: 0.78rem;
	line-height: 1.65;
}

[dir="rtl"] .ctc-availability-badge {
	letter-spacing: 0;
}

[dir="rtl"] .ctc-product-card-reference {
	letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ctc-availability-panel,
	.ctc-availability-badge,
	.ctc-product-disclaimer {
		animation: none !important;
		scroll-behavior: auto;
		transition: none;
	}

	.ctc-loop-media-stack .ctc-loop-media__image {
		transition: none !important;
	}
}

@media (max-width: 980px) {
	.ctc-product-disclaimer {
		font-size: 1rem;
	}
}

@media (max-width: 559px) {
	.ct-products-grid ul.products li.product .woocommerce-loop-product__title,
	.ct-products-grid--archive ul.products li.product .woocommerce-loop-product__title {
		min-block-size: 0;
	}
}

@supports not (color: color-mix(in srgb, black, white)) {
	.ctc-availability-panel {
		background: rgba(200, 164, 95, 0.08);
	}

	.ctc-product-disclaimer {
		border-color: rgba(127, 118, 108, 0.28);
	}
}