/**
 * Product Grid Widget Styles
 */
#products-root {
	padding-right: 10px;
	padding-left: 10px;
}

.product-grid-wrapper {
	width: 100%;
}

.product-grid-header {
	margin-bottom: 30px;
}

.product-grid-title {
	margin: 0 0 10px 0;
	font-size: 2em;
	font-weight: bold;
}

.product-grid-copy {
	margin: 0;
	color: #666;
}

.product-grid {
	display: grid;
	width: 100%;
}

/* Ensure product cards maintain their styles within grid */
.product-grid .product-card,
.product-grid .card {
	/* Reset any grid-specific properties that might affect card layout */
	display: flex;
	flex-direction: column;
	/* Ensure cards don't inherit grid properties */
	grid-column: auto;
	grid-row: auto;
	/* Minimal margin just for shadows */
	margin: 2px;
	/* Force visible overflow for shadows */
	overflow: visible !important;
}

/* Default grid styles - only apply if not customized via Elementor */
.elementor-widget-product_grid .product-grid:not([style*="grid-template-columns"]),
.elementor-widget-product_slider .product-grid:not([style*="grid-template-columns"]) {
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* Tablet */
@media (max-width: 1024px) {

	.elementor-widget-product_grid .product-grid:not([style*="grid-template-columns"]),
	.elementor-widget-product_slider .product-grid:not([style*="grid-template-columns"]) {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile */
@media (max-width: 768px) {

	.elementor-widget-product_grid .product-grid:not([style*="grid-template-columns"]),
	.elementor-widget-product_slider .product-grid:not([style*="grid-template-columns"]) {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.product-grid-header {
		margin-bottom: 20px;
	}

	.product-grid-title {
		font-size: 1.5em;
	}
}

/* Small Mobile */
@media (max-width: 480px) {
	.product-grid {
		gap: 10px;
	}
}

/* Loading spinner */
.loading-products {
	text-align: center;
	padding: 40px;
	color: #666;
}

.loading-products i {
	font-size: 32px;
}

/* Archive Widget - Fix for box-shadow visibility */
.elementor-widget-archive #products-root {
	/* Ensure visible overflow */
	overflow: visible !important;
}

.elementor-widget-archive #products-root > [class*="col-"] {
	/* Ensure columns don't clip shadows */
	overflow: visible !important;
}

.elementor-widget-archive .product-card {
	/* Minimal margin for shadows */
	margin: 2px;
	/* Force visible overflow */
	overflow: visible !important;
}

/* Fix for container clipping issues */
.elementor-widget-archive .container,
.elementor-widget-archive .container-fluid {
	overflow: visible !important;
}