/* Color SEO Manager - frontend styles */

.csm-color-selector { margin: 1em 0; }
.csm-color-search-input {
	width: 100%;
	max-width: 320px;
	padding: 8px 10px;
	border: 1px solid #d0d3d6;
	border-radius: 4px;
	margin-bottom: 12px;
}
.csm-color-swatch-grid {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}
.csm-color-swatch-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 72px;
	text-align: center;
}
.csm-color-swatch {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid #e2e4e7;
	cursor: pointer;
	padding: 0;
	transition: transform 0.1s ease, border-color 0.1s ease;
}
.csm-color-swatch:hover,
.csm-color-swatch:focus {
	transform: scale(1.08);
	border-color: #333;
	outline: none;
}
.csm-color-swatch.is-selected {
	border-color: #111;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111;
}
.csm-color-label {
	font-size: 11px;
	margin-top: 4px;
	line-height: 1.3;
	color: #555;
	word-break: break-word;
}
.csm-color-swatch-item.is-hidden { display: none; }
.csm-no-results { color: #777; font-style: italic; }

/* Single color page */
.csm-single-color .csm-color-header {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
}
.csm-color-swatch-large {
	width: 100px;
	height: 100px;
	border-radius: 8px;
	border: 1px solid #e2e4e7;
	flex-shrink: 0;
}
.csm-color-meta span { margin-right: 16px; display: inline-block; }

/* Available Products: real WooCommerce product cards via wc_get_template_part().
   This fallback grid only kicks in if the active theme doesn't already style
   `.products.columns-4` (most WooCommerce-ready themes do) - it never fights
   theme card styling, it only lays the cards out responsively if nothing else does. */
.csm-product-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}
.csm-product-cards li.product { margin: 0; }

.csm-related-color-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.csm-related-color-list li a { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.csm-mini-swatch { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: 1px solid #ddd; }