/*
Theme Name: Astra AI Factory
Theme URI: https://example.com/astra-ai-factory
Description: Child theme of Astra designed for AI-assisted section generation.
Author: Ahmad Sulivan
Template: astra
Version: 1.0.0
Text Domain: astra-ai-factory
*/


/* Ensure existing shop hero container behaves like the homepage hero (scoped) */
body.woocommerce-shop .shop-category-hero{
	position:relative;
	width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	box-sizing:border-box;
	overflow:hidden;
}

body.woocommerce-shop .shop-category-hero .container{
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
}

body.woocommerce-shop .shop-category-hero img{max-width:100%;height:auto;display:block}

/* Typing cursor used by homepage (scoped to shop) */
body.woocommerce-shop .shop-category-hero .typing-cursor{display:inline-block;width:3px;background:#000;margin-left:6px;animation:astra_ai_cursor 1s steps(2) infinite}
@keyframes astra_ai_cursor{50%{opacity:0}}

/* Small spacing to separate hero from products */
body.woocommerce-shop .shop-category-hero .container.px-4.py-12{margin-bottom:2rem}

/* Prevent page-level horizontal overflow on shop page only */
body.woocommerce-shop{overflow-x:hidden}

/* Remove any background that might be applied to the whole hero or its flex wrapper */
body.woocommerce-shop .shop-category-hero{
	background: linear-gradient(to bottom, #e8fcef 0%, #26b497 100%) !important;
}

body.woocommerce-shop .shop-category-hero > .container,
body.woocommerce-shop .shop-category-hero .flex.flex-col.lg\:flex-row{
	background: transparent !important;
}

/* Apply blue background only to the image column, and make it wrap tightly around the image.
	 Keep this behavior only on desktop (lg and up); on mobile the layout remains stacked and full-width. */
@media (min-width: 1024px) {
	body.woocommerce-shop .shop-category-hero .lg\:w-1\/2:first-child{
		/* let text column take remaining space */
		width: auto !important;
		flex: 1 1 auto !important;
	}

	body.woocommerce-shop .shop-category-hero .lg\:w-1\/2:last-child{
		/* shrink to content so background wraps the image tightly */
		width: auto !important;
		flex: 0 0 auto !important;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0; /* background will come from the image styling */
		background: transparent !important;
	}

	/* Style the image itself so the blue box wraps it tightly with padding and radius */
	body.woocommerce-shop .shop-category-hero .lg\:w-1\/2:last-child img{
		display: block;
		max-width: 520px; /* visually similar to homepage hero image */
		width: 100%;
		height: auto;
		background-color: #0ea5e9; /* blue background */
		padding: 0.75rem; /* space between image and blue box */
		border-radius: 12px;
		box-sizing: content-box;
		box-shadow: 0 8px 24px rgba(14,165,233,0.12);
	}
}

/* On smaller screens keep image full-width but without full-hero background */
@media (max-width: 1023px) {
	body.woocommerce-shop .shop-category-hero .lg\:w-1\/2:last-child img{
		background: transparent;
		padding: 0;
		border-radius: 8px;
	}
}

/* =========================================
   GLOBAL SECTION SPACING RULE
   ========================================= */

section + section {
	margin-top: 4rem;
}