/*
 * Restyles WooCommerce's own block-based "Add to Cart with Options" swatch
 * chips (.wc-block-product-filter-chips, style "swatch") into circles laid
 * out in the same grid shape the palette's source chart image had — only for
 * rows wcp-block-swatches.js has marked .wcp-block-swatches after matching
 * them to a wcp-managed attribute. Every other attribute row (text chips,
 * dropdowns, non-wcp colour/image attributes) is untouched.
 */

.wcp-block-swatches .wc-block-product-filter-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: calc(var(--wcp-cols, 4) * 48px - 8px);
}

.wcp-block-swatches .wc-block-product-filter-chips__item {
	display: block;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	overflow: hidden;
}

.wcp-block-swatches .wc-block-product-filter-chips__item:hover {
	transform: scale(1.08);
}

.wcp-block-swatches .wc-block-product-filter-chips__item[aria-checked="true"] {
	box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff;
}

.wcp-block-swatches .wc-block-product-filter-chips__label {
	display: block;
	width: 100%;
	height: 100%;
}

.wcp-block-swatches .wc-block-product-filter-chips__swatch {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

/* Keep the colour name available to assistive tech (the button already has
   aria-label/title) without showing it as visible text next to the circle. */
.wcp-block-swatches .wc-block-product-filter-chips__text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The hidden "None" fallback value (see WCP_None_Option / wcp-block-swatches.js
   setUpNoneOption()) — kept in the DOM so it's still a real, clickable swatch
   item WooCommerce's own store can select, just never shown. Always sorts
   last (it has no grid position — see class-wcp-frontend.php's
   block_swatch_data_for_product()), so hiding it doesn't disturb the
   circles' shape. */
.wcp-block-swatches .wc-block-product-filter-chips__item.wcp-none-option {
	display: none;
}

/* Shown only while "None" is the current selection — see WCP_None_Option and
   wcp-block-swatches.js's setUpNoneOption(). */
.wcp-none-message {
	display: none;
	margin: 0 0 1em;
	font-style: italic;
	opacity: 0.75;
}

.wcp-none-message.is-visible {
	display: block;
}

/*
 * Keeps the product gallery (and the palette chart image the swatches focus
 * on hover — see wcp-block-swatches.js) on screen while the swatches are
 * being browsed, instead of tracking visibility in JS and swapping in a
 * separate preview image. Gutenberg's own columns block already stretches
 * both columns of the single-product layout to the height of the taller one
 * (.wp-block-columns' default align-items:normal computes to stretch), so
 * the gallery's column is already exactly as tall as the product info
 * column next to it; position:sticky on the gallery itself rides inside
 * that box and releases naturally at its bottom — no bottom offset/JS
 * bookkeeping needed. Limited to >=782px, the same breakpoint Gutenberg's
 * own columns block switches from stacked to side-by-side at (below that,
 * both columns are full-width and stacked, so there's no taller sibling to
 * stick within).
 */
@media (min-width: 782px) {
	.wp-block-woocommerce-product-gallery {
		position: sticky;
		top: 20px;
	}
}