/**
 * Huazotl — Single variation adapter.
 *
 * Wapuos 7.7.166+ deliberately renders the Single selector with Cart Editor
 * list classes. Huazotl keeps that exact DOM/behavior and maps only its visual
 * presentation back to the compact circular selector from the supplied ecommerce
 * theme. No variation data, JS, Availability or cart logic is replaced here.
 */

body.single-product .wapu-single .wapu-single__variants--cart-editor {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 1rem !important;
	width: 100% !important;
	min-width: 0 !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variation-picker,
body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variation-picker--compact {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	overflow: visible !important;
	gap: 0 !important;
}

/* Base names this a list for shared cart-editor behavior. Huazotl presents it
 * exactly like the old compact grid without changing that semantic/JS class. */
body.single-product .wapu-single .wapu-single__variants--cart-editor #wapu-variant-items.wapu-single__variant-items--list.wapu-cart-edit-modal__option-list,
body.single-product .wapu-single .wapu-single__variants--cart-editor #wapu-variant-items.wapu-cart-edit-modal__option-list.has-internal-scroll {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	align-content: flex-start !important;
	gap: .75rem !important;
	width: 100% !important;
	max-height: none !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: visible !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	scrollbar-width: none;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor #wapu-variant-items::-webkit-scrollbar {
	display: none;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-item.wapu-cart-edit-modal__variant {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	box-sizing: border-box !important;
	width: 4.875rem !important;
	min-width: 4.875rem !important;
	max-width: 4.875rem !important;
	min-height: 0 !important;
	padding: 0 !important;
	gap: .5rem !important;
	border: 0 !important;
	border-bottom: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center !important;
	overflow: visible !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-item.wapu-cart-edit-modal__variant:hover:not(:disabled),
body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-item.wapu-cart-edit-modal__variant:is(.wapu-single__variant-item--selected,[aria-selected="true"]) {
	background: transparent !important;
}

/* Exact visible circle from the supplied theme: 3.875rem inside a 4.875rem cell. */
body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-thumb.wapu-cart-edit-modal__variant-swatch {
	box-sizing: border-box !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 3.875rem !important;
	height: 3.875rem !important;
	min-width: 3.875rem !important;
	min-height: 3.875rem !important;
	max-width: 3.875rem !important;
	max-height: 3.875rem !important;
	flex: 0 0 3.875rem !important;
	padding: .3125rem !important;
	border: 1px solid var(--wtds-separator-soft) !important;
	border-radius: 50% !important;
	background: var(--wtds-surface) !important;
	box-shadow: 0 .625rem 1.5rem var(--wtds-shadow-color-faint) !important;
	overflow: hidden !important;
	transition: border-color var(--wtds-dur-fast) var(--wtds-ease), box-shadow var(--wtds-dur-fast) var(--wtds-ease), transform var(--wtds-dur-fast) var(--wtds-ease) !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-item:hover:not(:disabled) .wapu-single__variant-thumb {
	border-color: var(--wtds-ink-4) !important;
	transform: translateY(-1px) !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-item:is(.wapu-single__variant-item--selected,[aria-selected="true"]) .wapu-single__variant-thumb {
	border-color: var(--wtds-accent) !important;
	box-shadow: 0 0 0 .125rem var(--wtds-surface), 0 0 0 .25rem var(--wtds-accent), 0 .625rem 1.5rem var(--wtds-shadow-color-soft) !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-thumb .wapu-single__variant-swatch,
body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-thumb .wapu-single__variant-swatch > img,
body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-thumb > img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	object-position: center !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-swatch--image,
body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-swatch--image > img {
	object-fit: contain !important;
	background-color: var(--wtds-surface);
}

body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-swatch--color {
	box-shadow: inset 0 0 0 1px var(--wtds-shadow-color-soft) !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-meta {
	position: relative !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
	width: 4.875rem !important;
	min-width: 4.875rem !important;
	padding: 0 !important;
	gap: 0 !important;
	text-align: center !important;
	overflow: visible !important;
	flex: 0 0 auto !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-name.wapu-cart-edit-modal__variant-name {
	display: -webkit-box !important;
	width: 100% !important;
	padding: 0 .125rem !important;
	white-space: normal !important;
	word-break: break-word !important;
	overflow-wrap: break-word !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden !important;
	text-overflow: clip !important;
	font-family: inherit !important;
	font-size: .6875rem !important;
	font-weight: var(--wtds-fw-medium) !important;
	line-height: 1.2 !important;
	color: var(--wtds-ink-2) !important;
	text-align: center !important;
}

/* Base-owned special badge indicator remains over the circular option. */
body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-item:has(.wapu-single__variant-badge-dot) {
	overflow: visible !important;
}
body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-badge-dot {
	position: absolute !important;
	top: -4.25rem !important;
	right: .375rem !important;
	z-index: 6 !important;
	width: .5rem !important;
	height: .5rem !important;
	flex: 0 0 .5rem !important;
	border-radius: 50% !important;
	box-shadow: 0 0 0 .125rem var(--wtds-surface) !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-item--sold-out .wapu-single__variant-thumb {
	opacity: .45;
	filter: grayscale(1);
}

@media (max-width: 47.9375rem) {
	body.single-product .wapu-single .wapu-single__variants--cart-editor #wapu-variant-items.wapu-cart-edit-modal__option-list.has-internal-scroll {
		gap: .625rem !important;
	}
	body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-item.wapu-cart-edit-modal__variant,
	body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-meta {
		width: 4.25rem !important;
		min-width: 4.25rem !important;
		max-width: 4.25rem !important;
	}
	body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-thumb.wapu-cart-edit-modal__variant-swatch {
		width: 3.375rem !important;
		height: 3.375rem !important;
		min-width: 3.375rem !important;
		min-height: 3.375rem !important;
		max-width: 3.375rem !important;
		max-height: 3.375rem !important;
		flex-basis: 3.375rem !important;
	}
	body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-badge-dot {
		top: -3.75rem !important;
		right: .3125rem !important;
	}
}


/* 1.3.8 · image swatches should fill the circular area completely. */
body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-swatch--image,
body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-swatch--image > img,
body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-thumb > img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-item:has(.wapu-single__variant-swatch--image) .wapu-single__variant-thumb.wapu-cart-edit-modal__variant-swatch {
	padding: 0 !important;
}


/* 1.4.1 · image swatches fill the circular visual completely. */
body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-swatch--image,
body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-swatch--image > img,
body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-thumb > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}
body.single-product .wapu-single .wapu-single__variants--cart-editor .wapu-single__variant-item:has(.wapu-single__variant-swatch--image) .wapu-single__variant-thumb.wapu-cart-edit-modal__variant-swatch {
    padding: 0 !important;
}


/* ==========================================================================
   1.4.3 · Visual swatches are round; text-only variations return to Base list\n   ========================================================================== */

/* A real image swatch fills the entire circular frame.  The image is pinned to
 * the frame instead of inheriting the old padded swatch anatomy. */
body.single-product .wapu-single .wapu-single__variants--cart-editor
.wapu-single__variant-item:not(.is-text-only):has(.wapu-single__variant-swatch--image)
.wapu-single__variant-thumb.wapu-cart-edit-modal__variant-swatch {
	position: relative !important;
	padding: 0 !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	background: transparent !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor
.wapu-single__variant-item:not(.is-text-only) .wapu-single__variant-swatch--image {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	overflow: hidden !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor
.wapu-single__variant-item:not(.is-text-only) .wapu-single__variant-swatch--image > img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	object-position: center !important;
	transform: scale(1.08);
	transform-origin: center;
}

/* When every option is text-only, stop forcing the circular Huazotl grid and
 * let the selector read like the Base list again.  Base already publishes the
 * `is-text-only` contract, so this is presentation-only and needs no JS/data fork. */
body.single-product .wapu-single .wapu-single__variants--cart-editor
#wapu-variant-items.wapu-cart-edit-modal__option-list.has-internal-scroll
:not(.wapu-single__variant-item) {
	/* keep non-option helpers untouched */
}

body.single-product .wapu-single .wapu-single__variants--cart-editor
#wapu-variant-items.wapu-cart-edit-modal__option-list.has-internal-scroll:not(:has(.wapu-single__variant-item:not(.is-text-only))) {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 0 !important;
	width: 100% !important;
	max-height: calc(2.75rem * 4) !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	border: var(--wtds-border-thin) solid var(--wtds-surface-container-high) !important;
	border-radius: var(--wtds-r-md) !important;
	background: var(--wtds-surface) !important;
	scrollbar-width: thin;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor
#wapu-variant-items:not(:has(.wapu-single__variant-item:not(.is-text-only)))
> .wapu-single__variant-item.is-text-only.wapu-cart-edit-modal__variant {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	min-height: 2.75rem !important;
	padding: .5rem .75rem !important;
	gap: .75rem !important;
	border: 0 !important;
	border-bottom: var(--wtds-border-thin) solid var(--wtds-surface-container-high) !important;
	border-radius: 0 !important;
	background: var(--wtds-surface) !important;
	box-shadow: none !important;
	text-align: left !important;
	overflow: visible !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor
#wapu-variant-items:not(:has(.wapu-single__variant-item:not(.is-text-only)))
> .wapu-single__variant-item.is-text-only.wapu-cart-edit-modal__variant:last-child {
	border-bottom: 0 !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor
#wapu-variant-items:not(:has(.wapu-single__variant-item:not(.is-text-only)))
> .wapu-single__variant-item.is-text-only.wapu-cart-edit-modal__variant:hover:not(:disabled) {
	background: var(--wtds-surface-container-low) !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor
#wapu-variant-items:not(:has(.wapu-single__variant-item:not(.is-text-only)))
> .wapu-single__variant-item.is-text-only.wapu-cart-edit-modal__variant:is(.wapu-single__variant-item--selected,[aria-selected="true"]) {
	background: var(--wtds-action-soft) !important;
}

/* Text-only means text-only in Huazotl: do not fabricate a circular fallback
 * from the variation product image. */
body.single-product .wapu-single .wapu-single__variants--cart-editor
#wapu-variant-items:not(:has(.wapu-single__variant-item:not(.is-text-only)))
> .wapu-single__variant-item.is-text-only .wapu-single__variant-thumb {
	display: none !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor
#wapu-variant-items:not(:has(.wapu-single__variant-item:not(.is-text-only)))
> .wapu-single__variant-item.is-text-only .wapu-single__variant-meta {
	position: static !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 0 !important;
	gap: .5rem !important;
	text-align: left !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor
#wapu-variant-items:not(:has(.wapu-single__variant-item:not(.is-text-only)))
> .wapu-single__variant-item.is-text-only .wapu-single__variant-name.wapu-cart-edit-modal__variant-name {
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 0 !important;
	white-space: normal !important;
	-webkit-line-clamp: unset !important;
	overflow: visible !important;
	text-overflow: initial !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: var(--wtds-fw-medium) !important;
	line-height: 1.5rem !important;
	color: var(--wtds-ink-2) !important;
	text-align: left !important;
}

body.single-product .wapu-single .wapu-single__variants--cart-editor
#wapu-variant-items:not(:has(.wapu-single__variant-item:not(.is-text-only)))
> .wapu-single__variant-item.is-text-only .wapu-single__variant-badge-dot {
	position: static !important;
	inset: auto !important;
	width: .5rem !important;
	height: .5rem !important;
	margin-left: auto !important;
	flex: 0 0 .5rem !important;
	border-radius: 50% !important;
	box-shadow: none !important;
}


/* ==========================================================================\n   1.5.5 · Primary variation density\n   --------------------------------------------------------------------------\n   Only the canonical primary visual axis becomes compact. Secondary/text\n   selectors keep the parent presentation and all variation behavior remains\n   Wapuos-owned.\n   ========================================================================== */
body.single-product .wapu-single--regular-product .wapu-sv-figma {
	--wapu-sv-tile-size: 40px !important;
	--wapu-sv-grid-size: 40px !important;
}

body.single-product .wapu-single--regular-product .wapu-sv-figma__section--primary
.wapu-sv-figma[data-mode="tiles"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text)),
body.single-product .wapu-single--regular-product .wapu-sv-figma__section--primary
.wapu-sv-figma[data-mode="grid"] .wapu-sv-figma__primary-option:not(:has(.wapu-sv-figma__option-visual.is-text)) {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	flex: 0 0 40px !important;
	padding: 3px !important;
	border-radius: 50% !important;
}