/* ------------------------------------------------------------------
   Ektaseb / Woodmart Child — Homepage styles
   Loaded only on the front page (see inc/enqueue.php).

   Selector strategy:
   - Prefer semantic Woodmart / Elementor widget classes.
   - Prefer custom ek-* classes (added manually in Elementor) for
     widgets that otherwise require ID-based targeting.
   - Keep Elementor ID fallbacks so the design works out-of-the-box
     before the ek-* classes are wired up inside Elementor.
------------------------------------------------------------------- */

@layer base {
	body.home {
		background-color: var(--ek-color-bg);
		color: var(--ek-color-text);
	}

	body.home :is(h1, h2, h3, h4, h5, h6, .title, .wd-entities-title) {
		color: var(--ek-color-heading);
	}

	body.home a:focus-visible,
	body.home button:focus-visible,
	body.home .btn:focus-visible {
		outline: none;
		box-shadow: var(--ek-ring);
	}
}

@layer components {
	/* ---------- Hero ---------- */
	body.home :is(.ek-hero, .elementor-element-6e033ef) {
		margin-block-start: 14px;
	}

	body.home :is(.ek-hero, .elementor-element-6e033ef) .elementor-image-carousel-wrapper {
		overflow: hidden;
		border-radius: var(--ek-radius-md);
		box-shadow: var(--ek-shadow-md);
	}

	/* ---------- Category grid ---------- */
	body.home :is(.ek-cats, .elementor-element-16c4e0be, .elementor-element-336c5bb) {
		padding-block-start: 10px;
	}

	body.home .category-grid-item .wd-cat-inner {
		border: 1px solid var(--ek-color-border);
		border-radius: var(--ek-radius-md);
		background: var(--ek-color-surface);
		box-shadow: var(--ek-shadow-sm);
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	body.home .category-grid-item:hover .wd-cat-inner {
		transform: translateY(-4px);
		box-shadow: var(--ek-shadow-md);
	}

	body.home .category-grid-item .wd-cat-thumb {
		border-start-start-radius: var(--ek-radius-md);
		border-start-end-radius: var(--ek-radius-md);
		overflow: hidden;
	}

	body.home .category-grid-item .wd-cat-content {
		padding-block: 10px 14px;
		padding-inline: 12px;
	}

	body.home .category-grid-item .wd-entities-title {
		font-size: 15px;
		font-weight: 700;
		text-align: center;
	}

	/* ---------- What's new card ---------- */
	body.home :is(.ek-whatsnew-card, .elementor-element-b90b7ad) {
		background: var(--ek-color-surface);
		border: 1px solid var(--ek-color-border);
		border-radius: var(--ek-radius-md);
		padding-block: 24px;
		padding-inline: 22px;
		box-shadow: var(--ek-shadow-sm);
	}

	body.home :is(.ek-whatsnew-title, .elementor-element-3892e979) .title {
		line-height: 1.35;
	}

	/* ---------- Primary & secondary CTAs ---------- */
	body.home
		:is(.ek-cta-primary, .elementor-element-7d57bc57)
		.btn,
	body.home a.btn[href$="/shop/"],
	body.home a.btn[href*="/shop/"] {
		background: var(--ek-color-primary);
		border-color: var(--ek-color-primary);
		color: #fff;
		box-shadow: var(--ek-shadow-cta);
	}

	body.home
		:is(.ek-cta-primary, .elementor-element-7d57bc57)
		.btn:hover,
	body.home a.btn[href$="/shop/"]:hover,
	body.home a.btn[href*="/shop/"]:hover {
		background: var(--ek-color-primary-dark);
		border-color: var(--ek-color-primary-dark);
		color: #fff;
	}

	body.home
		:is(.ek-cta-secondary, .elementor-element-3a4ba4c)
		.btn,
	body.home a.btn[href*="/my-account/my-wallet/"] {
		background: #fff;
		border: 1px solid var(--ek-color-primary);
		color: var(--ek-color-primary);
	}

	body.home
		:is(.ek-cta-secondary, .elementor-element-3a4ba4c)
		.btn:hover,
	body.home a.btn[href*="/my-account/my-wallet/"]:hover {
		background: var(--ek-color-primary-soft);
	}

	/* ---------- Trust section ---------- */
	body.home :is(.ek-trust, .elementor-element-54397678) {
		margin-block-start: 68px;
	}

	body.home
		:is(
			.ek-trust-box,
			.elementor-element-63bbd5c3,
			.elementor-element-d7c443a,
			.elementor-element-4dc3b105
		)
		.wd-info-box {
		background: #fff;
		border: 1px solid var(--ek-color-border);
		border-radius: var(--ek-radius-md);
		padding-block: 18px;
		padding-inline: 14px;
		height: 100%;
		box-shadow: var(--ek-shadow-sm);
	}

	/* ---------- Stats cards ---------- */
	body.home
		:is(
			.ek-stat-card,
			.elementor-element-46bf6775,
			.elementor-element-10b1c002,
			.elementor-element-315ebaae,
			.elementor-element-6cda8ebf
		)
		.wd-info-box {
		border-radius: var(--ek-radius-md);
		border: 1px solid #f3d7c7;
		box-shadow: var(--ek-shadow-stat);
	}

	body.home
		:is(
			.ek-stat-card,
			.elementor-element-46bf6775,
			.elementor-element-10b1c002,
			.elementor-element-315ebaae,
			.elementor-element-6cda8ebf
		)
		.info-box-icon {
		font-size: 34px;
		font-weight: 800;
		line-height: 1;
	}

	/* ---------- Bottom contact / confidence sections ---------- */
	body.home
		:is(.ek-contact-dark, .elementor-element-3224d883):not(.elementor-motion-effects-element-type-background),
	body.home
		:is(.ek-contact-dark, .elementor-element-3224d883)
		> .elementor-motion-effects-container
		> .elementor-motion-effects-layer {
		background-color: #102745;
	}

	body.home
		:is(.ek-contact-gold, .elementor-element-6e744c43):not(.elementor-motion-effects-element-type-background),
	body.home
		:is(.ek-contact-gold, .elementor-element-6e744c43)
		> .elementor-motion-effects-container
		> .elementor-motion-effects-layer {
		background: linear-gradient(180deg, #7a5606 0%, #6a4904 100%);
	}
}

@layer utilities {
	/* Keep the first two top sections always painted to avoid CLS on
	   above-the-fold content (hero + categories), lazy-paint the rest. */
	body.home .elementor-section.elementor-top-section:nth-of-type(n + 3) {
		content-visibility: auto;
		contain-intrinsic-size: 1px 900px;
	}

	body.home :is(.wd-animation, .elementor-invisible) {
		animation-duration: 0.35s;
	}
}

@layer overrides {
	@media (prefers-reduced-motion: reduce) {
		body.home .elementor-section * {
			animation: none !important;
			transition: none !important;
			scroll-behavior: auto !important;
		}
	}

	/* ---------- Mobile conversion path ---------- */
	@media (max-width: 767px) {
		body.home :is(.ek-hero, .elementor-element-6e033ef) {
			margin-block-start: 8px;
		}

		body.home :is(.ek-whatsnew-card, .elementor-element-b90b7ad) {
			margin-block-start: 16px;
			padding-block: 18px;
			padding-inline: 14px;
		}

		body.home .title-wrapper .title {
			line-height: 1.4;
		}

		/* Bottom toolbar focus: hide wishlist, keep shop/cart/account */
		body.home .wd-toolbar .wd-header-wishlist {
			display: none;
		}

		body.home
			.wd-toolbar
			> :is(.wd-toolbar-shop, .wd-header-cart, .wd-header-my-account) {
			flex: 1 1 33.333%;
		}

		body.home .wd-toolbar .wd-toolbar-shop {
			order: 1;
		}

		body.home .wd-toolbar .wd-header-cart {
			order: 2;
		}

		body.home .wd-toolbar .wd-header-my-account {
			order: 3;
		}

		/* HT Click-to-Chat injects inline bottom style, so !important
		   is the only reliable way to lift it above the mobile toolbar. */
		body.home #ht-ctc-chat {
			bottom: 74px !important;
		}
	}
}