/**
 * Ikrimikri opt-in section & card styles.
 * Add classes in Elementor → Advanced → CSS Classes (or widget CSS ID).
 * Pair with ik-*-shapes classes — JS injects animated blobs only where requested.
 *
 * Section backgrounds:  ik-section-bg ik-section-bg--{cream|sky|lavender|peach|mint}
 * Section shapes:        ik-section-shapes + ik-shapes-{float|drift|pulse|orbs|soft}
 * Single card:           ik-card ik-card--{sky|lavender|peach|gold|white} [ik-card-shapes] [ik-card--lift]
 * Product grid (parent): ik-cards-row [ik-cards-row--sky|lavender|peach|gold]
 * Service tiles (parent): ik-tiles-row
 * Blog grid (parent):    ik-blog-row
 */

:root {
	/* Prefer kids-storefront tokens when present; soft neutral shadows (not boxed/orange). */
	--ik-surface: var(--ks-card, #ffffff);
	--ik-border: color-mix(in srgb, var(--ks-border, #e8e3d8) 55%, transparent);
	--ik-radius: 20px;
	--ik-radius-sm: 16px;
	--ik-shadow: 0 6px 24px rgba(44, 49, 72, 0.06);
	--ik-shadow-hover: 0 10px 28px rgba(44, 49, 72, 0.09);
}

/* ── Shape animations ── */

@keyframes ik-shapes-float {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	33% {
		transform: translate(28px, -44px) scale(1.08);
	}
	66% {
		transform: translate(-18px, 18px) scale(0.92);
	}
}

@keyframes ik-shapes-drift {
	0%,
	100% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(40px, -20px);
	}
}

@keyframes ik-shapes-pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.3;
	}
	50% {
		transform: scale(1.15);
		opacity: 0.45;
	}
}

@keyframes ik-shapes-soft {
	0%,
	100% {
		transform: translate(0, 0) rotate(0deg);
	}
	50% {
		transform: translate(-12px, 16px) rotate(4deg);
	}
}

/* ── Injected shape layer ── */

.ik-shape-layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.ik-shape-layer .ik-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(64px);
	mix-blend-mode: multiply;
	opacity: 0.32;
}

.ik-shapes-float .ik-blob {
	animation: ik-shapes-float 7s ease-in-out infinite;
}

.ik-shapes-drift .ik-blob {
	animation: ik-shapes-drift 12s ease-in-out infinite;
}

.ik-shapes-pulse .ik-blob {
	animation: ik-shapes-pulse 5s ease-in-out infinite;
}

.ik-shapes-soft .ik-blob {
	animation: ik-shapes-soft 10s ease-in-out infinite;
	filter: blur(72px);
	opacity: 0.26;
}

.ik-shapes-orbs .ik-blob {
	animation: ik-shapes-drift 14s ease-in-out infinite;
	filter: blur(80px);
	opacity: 0.28;
}

.ik-shapes-orbs .ik-blob-3 {
	display: none;
}

.ik-shape-layer .ik-blob-1 {
	width: 180px;
	height: 180px;
	top: -48px;
	right: -48px;
}

.ik-shape-layer .ik-blob-2 {
	width: 150px;
	height: 150px;
	bottom: -36px;
	left: -36px;
	animation-delay: 2s;
}

.ik-shape-layer .ik-blob-3 {
	width: 120px;
	height: 120px;
	top: 42%;
	left: 52%;
	animation-delay: 4s;
	opacity: 0.22;
}

/* ── Section backgrounds ── */

.ik-section-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.ik-section-bg > .elementor-container,
.ik-section-bg > .elementor-column-wrap,
.ik-section-bg > .elementor-widget-wrap {
	position: relative;
	z-index: 2;
}

.ik-section-bg--cream {
	background: linear-gradient(165deg, var(--ks-cream, #f7f2e8) 0%, #fff7ed 55%, #eff6ff 100%) !important;
}

.ik-section-bg--sky {
	background: linear-gradient(160deg, color-mix(in srgb, var(--ks-sky, #5ba8d9) 14%, white) 0%, #e0f2fe 50%, #ffffff 100%) !important;
}

.ik-section-bg--lavender {
	background: linear-gradient(160deg, color-mix(in srgb, var(--ks-purple, #8b3db8) 10%, white) 0%, #f3e8ff 50%, #ffffff 100%) !important;
}

.ik-section-bg--peach {
	background: linear-gradient(160deg, color-mix(in srgb, var(--ks-coral, #e56b4a) 12%, white) 0%, #fce7f3 50%, #ffffff 100%) !important;
}

.ik-section-bg--mint {
	background: linear-gradient(160deg, color-mix(in srgb, var(--ks-mint, #4db88a) 14%, white) 0%, #d1fae5 45%, #ffffff 100%) !important;
}

.ik-section-shapes {
	position: relative;
	overflow: hidden;
}

/* ── Card base ── */

.ik-card,
.ik-cards-row ul.products li.product > .post_item,
.ik-tiles-row .sc_services_item,
.ik-blog-row .sc_blogger_item_body {
	position: relative;
	overflow: hidden;
	border-radius: var(--ik-radius);
	isolation: isolate;
	border: 1px solid var(--ik-border);
	transition: box-shadow 0.28s ease;
}

.ik-card > *:not(.ik-shape-layer),
.ik-cards-row ul.products li.product > .post_item > *:not(.ik-shape-layer),
.ik-tiles-row .sc_services_item > *:not(.ik-shape-layer),
.ik-blog-row .sc_blogger_item_body > *:not(.ik-shape-layer) {
	position: relative;
	z-index: 2;
}

/* Lift only when explicitly requested; default rows get a soft shadow nudge only */
.ik-card--lift:hover {
	transform: translateY(-3px);
	box-shadow: var(--ik-shadow-hover);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.ik-cards-row ul.products li.product:hover > .post_item,
.ik-tiles-row .sc_services_item:hover,
.ik-blog-row .sc_blogger_item:hover .sc_blogger_item_body {
	box-shadow: var(--ik-shadow-hover);
}

/* ── Card color themes ── */

.ik-card--sky,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 1) > .post_item,
.ik-card--sky.ik-card {
	background: linear-gradient(135deg, #eff6ff 0%, #ffffff 72%);
	box-shadow: var(--ik-shadow);
}

.ik-card--sky .ik-blob-1,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 1) > .post_item .ik-blob-1 {
	background: #93c5fd;
}

.ik-card--sky .ik-blob-2,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 1) > .post_item .ik-blob-2 {
	background: #c4b5fd;
}

.ik-card--sky .ik-blob-3,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 1) > .post_item .ik-blob-3 {
	background: #bfdbfe;
}

.ik-card--lavender,
.ik-cards-row--lavender ul.products li.product:nth-child(4n + 2) > .post_item,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 2) > .post_item {
	background: linear-gradient(135deg, #faf5ff 0%, #ffffff 72%);
	box-shadow: var(--ik-shadow);
}

.ik-card--lavender .ik-blob-1,
.ik-cards-row--lavender ul.products li.product:nth-child(4n + 2) > .post_item .ik-blob-1,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 2) > .post_item .ik-blob-1 {
	background: #c4b5fd;
}

.ik-card--lavender .ik-blob-2,
.ik-cards-row--lavender ul.products li.product:nth-child(4n + 2) > .post_item .ik-blob-2,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 2) > .post_item .ik-blob-2 {
	background: #f9a8d4;
}

.ik-card--lavender .ik-blob-3,
.ik-cards-row--lavender ul.products li.product:nth-child(4n + 2) > .post_item .ik-blob-3,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 2) > .post_item .ik-blob-3 {
	background: #ddd6fe;
}

.ik-card--peach,
.ik-cards-row--peach ul.products li.product:nth-child(4n + 3) > .post_item,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 3) > .post_item {
	background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 72%);
	box-shadow: var(--ik-shadow);
}

.ik-card--peach .ik-blob-1,
.ik-cards-row--peach ul.products li.product:nth-child(4n + 3) > .post_item .ik-blob-1,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 3) > .post_item .ik-blob-1 {
	background: #f9a8d4;
}

.ik-card--peach .ik-blob-2,
.ik-cards-row--peach ul.products li.product:nth-child(4n + 3) > .post_item .ik-blob-2,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 3) > .post_item .ik-blob-2 {
	background: #fda4af;
}

.ik-card--peach .ik-blob-3,
.ik-cards-row--peach ul.products li.product:nth-child(4n + 3) > .post_item .ik-blob-3,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 3) > .post_item .ik-blob-3 {
	background: #fbcfe8;
}

.ik-card--gold,
.ik-cards-row--gold ul.products li.product:nth-child(4n + 4) > .post_item,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 4) > .post_item {
	background: linear-gradient(135deg, #fffbeb 0%, #ffffff 72%);
	box-shadow: var(--ik-shadow);
}

.ik-card--gold .ik-blob-1,
.ik-cards-row--gold ul.products li.product:nth-child(4n + 4) > .post_item .ik-blob-1,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 4) > .post_item .ik-blob-1 {
	background: #fcd34d;
}

.ik-card--gold .ik-blob-2,
.ik-cards-row--gold ul.products li.product:nth-child(4n + 4) > .post_item .ik-blob-2,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 4) > .post_item .ik-blob-2 {
	background: #fdba74;
}

.ik-card--gold .ik-blob-3,
.ik-cards-row--gold ul.products li.product:nth-child(4n + 4) > .post_item .ik-blob-3,
.ik-cards-row--sky ul.products li.product:nth-child(4n + 4) > .post_item .ik-blob-3 {
	background: #fde68a;
}

.ik-card--white {
	background: var(--ik-surface);
	box-shadow: var(--ik-shadow);
}

.ik-card--white .ik-blob-1 {
	background: #bfdbfe;
}

.ik-card--white .ik-blob-2 {
	background: #fbcfe8;
}

.ik-card--white .ik-blob-3 {
	background: #fde68a;
	opacity: 0.18;
}

/* ── WooCommerce product row ── */

.ik-cards-row ul.products li.product > .post_item {
	background: var(--ik-surface);
	box-shadow: var(--ik-shadow);
}

.ik-cards-row ul.products li.product > .post_item .post_featured {
	border-radius: var(--ik-radius) var(--ik-radius) 0 0;
	overflow: hidden;
	margin-bottom: 0 !important;
}

.ik-cards-row ul.products li.product > .post_item .post_data {
	padding-top: 1rem;
	padding-bottom: 1.25rem;
}

.ik-cards-row ul.products.products_style_centered li.product > .post_item .post_data {
	padding-left: 1rem;
	padding-right: 1rem;
}

/* ── Service tiles row ── */

.ik-tiles-row .sc_services_item {
	box-shadow: var(--ik-shadow);
}

.ik-tiles-row .sc_services_item_content {
	border-radius: var(--ik-radius);
}

.ik-tiles-row .sc_services_item_content .ik-shape-layer {
	opacity: 0.5;
	mix-blend-mode: soft-light;
}

.ik-tiles-row .sc_services_item_content .sc_services_item_content_inner {
	z-index: 3;
}

/* ── Blog row ── */

.ik-blog-row .sc_blogger_item_body {
	background: var(--ik-surface);
	box-shadow: var(--ik-shadow);
}

.ik-blog-row .sc_blogger_item_body .post_featured {
	border-radius: var(--ik-radius) var(--ik-radius) 0 0;
	overflow: hidden;
}

.ik-blog-row .sc_blogger_item_body .sc_blogger_item_content {
	padding: 1rem 1.15rem 1.25rem;
}

/* ── Standalone card padding (icon boxes, testimonials, etc.) ── */

.ik-card.sc_icons_item,
.ik-card.sc_testimonials_item,
.elementor-widget-icon-box .ik-card,
.elementor-widget-image-box .ik-card {
	padding: 1.35rem 1.5rem;
	box-shadow: var(--ik-shadow);
}

.sc_testimonials_accent .ik-card.sc_testimonials_item {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 246, 255, 0.92) 100%);
}

.sc_icons_divider4 .ik-cards-row .sc_icons_item::after,
.ik-cards-row.sc_icons_columns_wrap .sc_icons_item::after {
	display: none !important;
}

/* ── Example IDs (optional — add matching id in Elementor) ── */

#ik-hero-section.ik-section-bg--cream,
#ik-products-section.ik-section-bg--sky,
#ik-about-section.ik-section-bg--peach {
	/* hooks for named sections; combine with bg + shapes classes */
}

@media (prefers-reduced-motion: reduce) {
	.ik-shape-layer .ik-blob {
		animation: none !important;
	}

	.ik-card--lift:hover {
		transform: none;
	}
}