/*
 * Kanaan ornamental overlay system.
 * The supplied artwork is intentionally reserved for structural surfaces,
 * section boundaries and brand moments so product photography stays clean.
 */

:root {
	--fk-ornament-mandala-left: url("ornaments/mandala-left.png");
	--fk-ornament-mandala-right: url("ornaments/mandala-right.png");
	--fk-ornament-mandala-half: url("ornaments/mandala-half.png");
	--fk-ornament-mandala-slice: url("ornaments/mandala-slice.png");
	--fk-ornament-tab: url("ornaments/ornament-tab.png");
	--fk-ornament-diamond-strip: url("ornaments/diamond-strip.png");
	--fk-ornament-diamond-corner: url("ornaments/diamond-corner.png");
}

/*
 * Ambient page canvas.
 * The supplied white artwork is used as a mask so it can become a restrained
 * turquoise-and-gold watermark on light backgrounds without touching copy.
 */
html {
	background-color: #f7f3e8;
}

body {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(circle at 100% 18%, rgba(8, 155, 156, .055), transparent 30rem),
		radial-gradient(circle at 0 72%, rgba(216, 166, 43, .045), transparent 34rem),
		linear-gradient(180deg, rgba(255, 253, 247, .985), rgba(248, 245, 235, .97)) !important;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: linear-gradient(160deg, #087f80 0 62%, #b98518 100%);
	-webkit-mask-image:
		var(--fk-ornament-mandala-right),
		var(--fk-ornament-mandala-left),
		var(--fk-ornament-mandala-half),
		var(--fk-ornament-diamond-corner);
	-webkit-mask-position:
		right 15%,
		left 58%,
		center calc(100% + 125px),
		left 86%;
	-webkit-mask-size:
		156px auto,
		150px auto,
		440px auto,
		62px 92px;
	-webkit-mask-repeat: no-repeat;
	mask-image:
		var(--fk-ornament-mandala-right),
		var(--fk-ornament-mandala-left),
		var(--fk-ornament-mandala-half),
		var(--fk-ornament-diamond-corner);
	mask-position:
		right 15%,
		left 58%,
		center calc(100% + 125px),
		left 86%;
	mask-size:
		156px auto,
		150px auto,
		440px auto,
		62px 92px;
	mask-repeat: no-repeat;
	opacity: .065;
	pointer-events: none;
}

#site-header.fk-header--v2 .fk-mobile-menu__inner {
	background-color: #fff !important;
	background-image: var(--fk-ornament-diamond-corner) !important;
	background-position: left top !important;
	background-size: 62px 92px !important;
	background-repeat: no-repeat !important;
}

/* Dark brand surfaces: pale mandalas remain behind copy and controls. */
.fk-auth__story {
	background-image:
		var(--fk-ornament-mandala-right),
		var(--fk-ornament-mandala-slice),
		linear-gradient(145deg, rgba(5, 107, 109, .98), rgba(8, 155, 156, .9)) !important;
	background-position: right center, left center, center !important;
	background-size: 130px auto, 78px auto, auto !important;
	background-repeat: no-repeat !important;
}

.fk-account-welcome {
	position: relative;
	overflow: hidden;
	background-image:
		var(--fk-ornament-mandala-right),
		linear-gradient(135deg, var(--fk-turquoise-dark), var(--fk-turquoise)) !important;
	background-position: right center, center !important;
	background-size: 112px auto, auto !important;
	background-repeat: no-repeat !important;
}

.fk-page-hero {
	background-image:
		var(--fk-ornament-mandala-right),
		var(--fk-ornament-mandala-left),
		linear-gradient(135deg, var(--fk-turquoise-dark), var(--fk-turquoise)) !important;
	background-position: right center, left center, center !important;
	background-size: 130px auto, 130px auto, auto !important;
	background-repeat: no-repeat !important;
}

.fk-commerce-intro {
	position: relative;
	isolation: isolate;
	background-image:
		var(--fk-ornament-mandala-right),
		var(--fk-ornament-mandala-slice),
		var(--fk-ornament-mandala-half),
		linear-gradient(135deg, var(--fk-flow-teal-dark), #0a9494) !important;
	background-position: right center, left center, center calc(100% + 120px), center !important;
	background-size: 130px auto, 78px auto, min(430px, 58%) auto, auto !important;
	background-repeat: no-repeat !important;
}

.fk-commerce-intro > * {
	position: relative;
	z-index: 1;
}

/* Elementor hero imagery receives a single radial watermark, never a tile. */
.home .fk-elementor-page .fk-el-hero::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 0;
	width: 130px;
	height: 272px;
	background: var(--fk-ornament-mandala-right) right center / contain no-repeat;
	opacity: .52;
	transform: translateY(-50%);
	pointer-events: none;
}

/* Premium product slider: each product receives its own AI-created ornamental
 * copy-panel artwork derived from that ring's stone and metalwork. */
.home .fk-premium-slide__content {
	overflow: hidden;
	background-color: #056b6d !important;
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
}

.home .fk-premium-slide[data-fk-product-id="36"] .fk-premium-slide__content {
	background-image: url("premium-overlays/product-36-overlay.webp") !important;
}

.home .fk-premium-slide[data-fk-product-id="36"] .fk-premium-slide__image {
	transform: translateX(-6%);
}

.home .fk-premium-slide[data-fk-product-id="327"] .fk-premium-slide__content {
	background-image: url("premium-overlays/product-327-overlay.webp") !important;
}

.home .fk-premium-slide[data-fk-product-id="108"] .fk-premium-slide__content {
	background-image: url("premium-overlays/product-108-overlay.webp") !important;
}

.home .fk-premium-slide[data-fk-product-id="35"] .fk-premium-slide__content {
	background-image: url("premium-overlays/product-35-overlay.webp") !important;
}

.home .fk-premium-slide[data-fk-product-id="434"] .fk-premium-slide__content {
	background-image: url("premium-overlays/product-434-overlay.webp") !important;
}

.fk-elementor-page .fk-el-feature {
	overflow: hidden;
}

.fk-elementor-page .fk-el-feature::after {
	content: "";
	position: absolute;
	bottom: -126px;
	left: 50%;
	z-index: 0;
	width: min(518px, 68%);
	aspect-ratio: 518 / 276;
	background: var(--fk-ornament-mandala-half) center / contain no-repeat;
	opacity: .18;
	transform: translateX(-50%);
	pointer-events: none;
}

.fk-elementor-page .fk-el-feature > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* Light page heroes and selected CTAs use the geometric family. */
.fk-elementor-page .fk-el-page-hero:not(.fk-el-page-hero--compact) {
	position: relative;
	overflow: hidden;
	background-color: var(--fk-paper) !important;
	background-image: none !important;
}

.fk-elementor-page .fk-el-page-hero:not(.fk-el-page-hero--compact) > .e-con-inner {
	position: relative;
	z-index: 1;
}

.fk-elementor-page .fk-el-page-hero:not(.fk-el-page-hero--compact)::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -34px;
	z-index: 0;
	width: 130px;
	height: 272px;
	background: #087f80;
	-webkit-mask: var(--fk-ornament-mandala-left) center / contain no-repeat;
	mask: var(--fk-ornament-mandala-left) center / contain no-repeat;
	opacity: .055;
	transform: translateY(-50%);
	pointer-events: none;
}

.fk-elementor-page .fk-el-cta::before,
.fk-elementor-page .fk-el-contact-cta::before,
.fk-home-proof::before,
.fk-product-decision::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 0;
	height: 15px;
	border: 0;
	background: var(--fk-ornament-diamond-strip) center / auto 15px repeat-x;
	opacity: .34;
	pointer-events: none;
}

.fk-elementor-page .fk-el-cta,
.fk-elementor-page .fk-el-contact-cta,
.fk-home-proof,
.fk-product-decision {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.fk-elementor-page .fk-el-cta > *,
.fk-elementor-page .fk-el-contact-cta > *,
.fk-home-proof > *,
.fk-product-decision > * {
	position: relative;
	z-index: 1;
}

/* A single corner flourish identifies important utility panels. */
.fk-product-summary,
.fk-product-inquiry,
.fk-product-decision,
.fk-account-logged-in .woocommerce-MyAccount-navigation,
.fk-purchase-steps,
.fk-checkout-page #customer_details,
.fk-cart-page .cart_totals,
.fk-info-card,
.fk-faq-list details {
	background-image: var(--fk-ornament-diamond-corner) !important;
	background-position: left top !important;
	background-size: 62px 92px !important;
	background-repeat: no-repeat !important;
}

/* Footer: radial edges frame the information without competing with it. */
body .fk-footer {
	isolation: isolate;
	background-color: #056b6d !important;
	background-image:
		var(--fk-ornament-mandala-left),
		var(--fk-ornament-mandala-right),
		linear-gradient(135deg, #044f50, #087f80) !important;
	background-position: left center, right center, center !important;
	background-size: 130px auto, 130px auto, auto !important;
	background-repeat: no-repeat !important;
}

body .fk-footer::after {
	content: "" !important;
	position: absolute !important;
	bottom: -118px !important;
	left: 50% !important;
	z-index: 0 !important;
	display: block !important;
	width: min(518px, 72vw) !important;
	height: 276px !important;
	border: 0 !important;
	background: var(--fk-ornament-mandala-half) center / contain no-repeat !important;
	opacity: .1 !important;
	transform: translateX(-50%) !important;
	pointer-events: none !important;
}

body .fk-footer .fk-footer__inner::after {
	content: "" !important;
	position: absolute !important;
	top: -5px !important;
	left: 50% !important;
	z-index: 0 !important;
	display: block !important;
	width: 160px !important;
	height: 80px !important;
	border: 0 !important;
	background: var(--fk-ornament-tab) center top / contain no-repeat !important;
	opacity: .22 !important;
	transform: translateX(-50%) !important;
	pointer-events: none !important;
}

body .fk-footer__contact {
	background-image:
		var(--fk-ornament-mandala-slice),
		linear-gradient(rgba(5, 107, 109, .52), rgba(5, 107, 109, .52)) !important;
	background-position: left center, center !important;
	background-size: 78px auto, auto !important;
	background-repeat: no-repeat !important;
}

body .fk-footer__bottom {
	position: relative;
	z-index: 1;
	padding-top: 28px;
	border-top: 0;
	background: var(--fk-ornament-diamond-strip) center top / auto 14px repeat-x;
}

@media (max-width: 960px) {
	body::before {
		-webkit-mask-position: right 18%, left 62%, center calc(100% + 105px);
		-webkit-mask-size: 112px auto, 108px auto, 340px auto;
		mask-position: right 18%, left 62%, center calc(100% + 105px);
		mask-size: 112px auto, 108px auto, 340px auto;
		opacity: .052;
	}

	body .fk-footer {
		background-size: 104px auto, 104px auto, auto !important;
	}
}

@media (max-width: 620px) {
	body {
		background:
			radial-gradient(circle at 0 34%, rgba(8, 155, 156, .04), transparent 16rem),
			linear-gradient(180deg, rgba(255, 253, 247, .99), rgba(248, 245, 235, .975)) !important;
	}

	body::before {
		-webkit-mask-image:
			var(--fk-ornament-mandala-left),
			var(--fk-ornament-mandala-half);
		-webkit-mask-position: left 32%, center calc(100% + 62px);
		-webkit-mask-size: 72px auto, 230px auto;
		-webkit-mask-repeat: no-repeat;
		mask-image:
			var(--fk-ornament-mandala-left),
			var(--fk-ornament-mandala-half);
		mask-position: left 32%, center calc(100% + 62px);
		mask-size: 72px auto, 230px auto;
		mask-repeat: no-repeat;
		opacity: .04;
	}

	.fk-auth__story {
		background-image:
			var(--fk-ornament-mandala-right),
			linear-gradient(145deg, rgba(5, 107, 109, .98), rgba(8, 155, 156, .91)) !important;
		background-position: right center, center !important;
		background-size: 94px auto, auto !important;
	}

	.fk-account-welcome,
	.fk-page-hero {
		background-size: 90px auto, auto !important;
	}

	.fk-page-hero {
		background-image:
			var(--fk-ornament-mandala-right),
			linear-gradient(135deg, var(--fk-turquoise-dark), var(--fk-turquoise)) !important;
		background-position: right center, center !important;
	}

	.fk-commerce-intro {
		background-image:
			var(--fk-ornament-mandala-right),
			var(--fk-ornament-mandala-half),
			linear-gradient(135deg, var(--fk-flow-teal-dark), #0a9494) !important;
		background-position: right center, center calc(100% + 82px), center !important;
		background-size: 92px auto, 260px auto, auto !important;
	}

	.home .fk-elementor-page .fk-el-hero::after {
		width: 90px;
		height: 190px;
		opacity: .3;
	}

	.fk-elementor-page .fk-el-page-hero:not(.fk-el-page-hero--compact)::after {
		left: -28px;
		width: 76px;
		height: 160px;
		opacity: .04;
	}

	.fk-product-summary,
	.fk-product-inquiry,
	.fk-product-decision,
	.fk-account-logged-in .woocommerce-MyAccount-navigation,
	.fk-purchase-steps,
	.fk-checkout-page #customer_details,
	.fk-cart-page .cart_totals,
	.fk-info-card,
	.fk-faq-list details,
	.fk-elementor-page .fk-el-page-hero:not(.fk-el-page-hero--compact) {
		background-size: 46px 68px !important;
	}

	body .fk-footer {
		background-image:
			var(--fk-ornament-mandala-left),
			linear-gradient(135deg, #044f50, #087f80) !important;
		background-position: left 26%, center !important;
		background-size: 62px auto, auto !important;
		background-repeat: no-repeat !important;
	}

	body .fk-footer::after {
		bottom: -92px !important;
		display: block !important;
		width: min(230px, 62vw) !important;
		height: 126px !important;
		opacity: .06 !important;
	}

	body .fk-footer__contact {
		background-image:
			var(--fk-ornament-mandala-slice),
			linear-gradient(rgba(5, 107, 109, .52), rgba(5, 107, 109, .52)) !important;
		background-position: left center, center !important;
		background-size: 48px auto, auto !important;
		background-repeat: no-repeat !important;
	}

	body .fk-footer .fk-footer__inner::after {
		top: 0 !important;
		width: 110px !important;
		height: 55px !important;
	}
}

@media (max-width: 540px) {
	.home .fk-premium-slide__content {
		background-position: left center !important;
	}

	.home .fk-premium-slide[data-fk-product-id="36"] .fk-premium-slide__image {
		transform: none;
	}
}

/* Keep ornamental artwork on outer page edges only. Decorative images must
 * never sit inside a content card or behind readable copy. */
#site-header.fk-header--v2 .fk-mobile-menu__inner,
.fk-product-summary,
.fk-product-inquiry,
.fk-product-decision,
.fk-account-logged-in .woocommerce-MyAccount-navigation,
.fk-purchase-steps,
.fk-checkout-page #customer_details,
.fk-cart-page .cart_totals,
.fk-info-card,
.fk-faq-list details {
	background-image: none !important;
}

.fk-auth__story {
	background: linear-gradient(145deg, rgba(5, 107, 109, .98), rgba(8, 155, 156, .9)) center / cover no-repeat !important;
}

.fk-account-welcome,
.fk-page-hero {
	background: linear-gradient(135deg, var(--fk-turquoise-dark), var(--fk-turquoise)) center / cover no-repeat !important;
}

.fk-commerce-intro {
	background: linear-gradient(135deg, var(--fk-flow-teal-dark), #0a9494) center / cover no-repeat !important;
}

body .fk-footer__brand,
body .fk-footer__links,
body .fk-footer__contact,
body .fk-footer__trust {
	background: rgba(5, 107, 109, .52) !important;
}

.home .fk-elementor-page .fk-el-hero::after,
.fk-elementor-page .fk-el-feature::after,
.fk-elementor-page .fk-el-page-hero:not(.fk-el-page-hero--compact)::after,
body .fk-footer::after {
	display: none !important;
}