/* CC Product Swatches — Frontend Styles */

/* ========================================
   Swatch List (shared: single + archive)
   ======================================== */

.ccps-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 4px 0;
	align-items: center;
}

/* ========================================
   Individual Swatch Item
   ======================================== */

.ccps-swatch-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 4px;
}

.ccps-swatch-item:hover .ccps-swatch-color {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px #555;
}

.ccps-swatch-item:focus-visible {
	outline: 2px solid #0073aa;
	outline-offset: 3px;
}

/* Color square */
.ccps-swatch-color {
	display: block;
	position: relative;
	width: var(--ccps-swatch-size, 28px);
	height: var(--ccps-swatch-size, 28px);
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	transition: box-shadow 0.15s ease;
}

/* Selected state — white gap + dark outer ring */
.ccps-swatch-item.selected .ccps-swatch-color {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333;
}

/* Disabled / unavailable */
.ccps-swatch-item.disabled {
	pointer-events: none;
	opacity: 0.35;
}

/* Out-of-stock: X cross overlay */
.ccps-swatch-item.out-of-stock {
	opacity: 0.7;
}

.ccps-swatch-item.out-of-stock .ccps-swatch-color::before,
.ccps-swatch-item.out-of-stock .ccps-swatch-color::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 8%;
	right: 8%;
	height: 1.5px;
	background: rgba(0, 0, 0, 0.5);
	transform-origin: center;
	border-radius: 1px;
}

.ccps-swatch-item.out-of-stock .ccps-swatch-color::before {
	transform: translateY(-50%) rotate(45deg);
}

.ccps-swatch-item.out-of-stock .ccps-swatch-color::after {
	transform: translateY(-50%) rotate(-45deg);
}

/* ========================================
   Tooltip (pure CSS)
   ======================================== */

[data-ccps-tooltip] {
	position: relative;
}

[data-ccps-tooltip]::before {
	content: attr(data-ccps-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: #333;
	color: #fff;
	font-size: 12px;
	line-height: 1.3;
	padding: 4px 10px;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 100;
}

[data-ccps-tooltip]::after {
	content: '';
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: #bbb;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 100;
}

[data-ccps-tooltip]:hover::before,
[data-ccps-tooltip]:hover::after {
	opacity: 1;
}

/* ========================================
   Archive Page Swatches
   ======================================== */

.ccps-archive-swatches {
	margin: 6px 0;
}

.ccps-archive-swatches .ccps-swatches {
	justify-content: center;
	gap: 5px;
}

.ccps-archive-swatches .ccps-swatch-color {
	width: 22px;
	height: 22px;
}

/* ========================================
   Single Product Wrapper
   ======================================== */

/* Hide the raw select when swatches are active */
.ccps-raw-select {
	display: none !important;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 480px) {
	.ccps-swatch-color {
		width: var(--ccps-swatch-size, 26px);
		height: var(--ccps-swatch-size, 26px);
	}

	.ccps-archive-swatches .ccps-swatch-color {
		width: 20px;
		height: 20px;
	}
}