/**
 * Elementor Product ATC Swatches — front styles
 * RTL-first, matches Figma single product ATC block
 */

.epas-atc-widget {
	--epas-text: #111111;
	--epas-swatch-radius: 10px;
	--epas-swatch-font: 15px;
	--epas-wishlist-bg: #6c6c6c;
	direction: rtl;
	text-align: right;
	width: 100%;
	font-family: inherit;
}

.epas-atc-widget * {
	box-sizing: border-box;
}

/* —— Attribute groups —— */
.epas-attr {
	margin-bottom: 22px;
}

.epas-attr__label {
	display: block;
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 500;
	color: var(--epas-text);
	line-height: 1.5;
}

.epas-attr__swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* —— Text / size swatches —— */
.epas-swatch {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid #111111;
	cursor: pointer;
	padding: 0;
	margin: 0;
	background: transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	line-height: 1;
}

.epas-swatch:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

.epas-swatch--text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 18px;
	border-radius: var(--epas-swatch-radius);
	background-color: #ffffff;
	color: #111111;
	font-size: var(--epas-swatch-font);
	font-weight: 400;
	white-space: nowrap;
}

.epas-swatch--text:hover,
.epas-swatch--text.is-selected {
	background-color: #111111;
	color: #ffffff;
	border-color: #111111;
}

.epas-swatch.is-unavailable,
.epas-swatch.is-disabled,
.epas-swatch:disabled {
	cursor: not-allowed;
	pointer-events: none;
}

.epas-swatch--text.is-unavailable,
.epas-swatch--text.is-disabled:not(.epas-swatch--color) {
	opacity: 0.4;
	background-color: #ffffff;
	color: #999999;
	border-color: #dddddd;
}

.epas-swatch--text.is-unavailable.is-selected,
.epas-swatch--text.is-disabled.is-selected {
	background-color: #ffffff;
	color: #999999;
	border-color: #dddddd;
}

/* Locked attribute row — waiting for prior level */
.epas-attr.is-locked .epas-swatch {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.epas-attr.is-locked .epas-swatch--text,
.epas-attr.is-locked .epas-swatch--text.is-selected {
	background-color: #ffffff;
	color: #bbbbbb;
	border-color: #e0e0e0;
	opacity: 0.45;
}

.epas-attr.is-locked .epas-swatch--color.is-selected::after {
	border-color: transparent;
}

.epas-swatch--color.is-unavailable {
	opacity: 0.75;
	cursor: not-allowed;
}

/* Diagonal red line on unavailable color swatches */
.epas-swatch--color.is-unavailable::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 12%;
	width: 76%;
	height: 2px;
	background-color: #e53935;
	transform: translateY(-50%) rotate(-45deg);
	border-radius: 1px;
	z-index: 2;
	pointer-events: none;
}

.epas-swatch--color.is-unavailable::after {
	border-color: transparent !important;
}

/* —— Color circles —— */
.epas-swatch--color {
	position: relative;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.epas-swatch--color::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1.5px solid transparent;
	pointer-events: none;
	transition: border-color 0.2s ease;
}

.epas-swatch--color.is-selected::after,
.epas-swatch--color:hover::after {
	border-color: var(--epas-swatch-color, #111111);
}

.epas-swatch--color.is-selected {
	box-shadow: none;
}

/* —— Actions row: ATC ~80% + wishlist —— */
.epas-actions {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 10px;
	width: 100%;
	margin-top: 8px;
}

.epas-btn-atc {
	flex: 1 1 auto;
	width: 80%;
	max-width: 80%;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 20px;
	border: none;
	border-radius: 10px;
	background-color: #111111;
	color: #ffffff;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease;
	text-decoration: none;
	line-height: 1.2;
}

.epas-btn-atc:hover,
.epas-btn-atc:focus {
	background-color: #000000;
	color: #ffffff;
	opacity: 0.92;
}

.epas-btn-atc:disabled,
.epas-btn-atc.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.epas-btn-atc__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.epas-btn-atc__icon svg {
	display: block;
	stroke: currentColor;
}

/* Wishlist / like */
.epas-btn-wishlist {
	flex: 0 0 auto;
	width: 52px;
	min-width: 52px;
	height: auto;
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 10px;
	background-color: var(--epas-wishlist-bg);
	color: #ffffff;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.epas-btn-wishlist:hover {
	background-color: #555555;
}

.epas-btn-wishlist.is-active .epas-heart {
	fill: #ffffff;
}

.epas-btn-wishlist svg {
	display: block;
	stroke: currentColor;
}

.epas-btn-wishlist.is-active svg {
	fill: currentColor;
}

/* Quantity (optional) */
.epas-quantity-wrap {
	margin-bottom: 14px;
}

.epas-quantity-wrap .quantity {
	display: inline-flex;
}

.epas-feedback {
	margin-top: 10px;
	font-size: 13px;
	color: #2e7d32;
	min-height: 0;
}

.epas-feedback.is-error {
	color: #c62828;
}

.epas-empty {
	padding: 16px;
	border: 1px dashed #ccc;
	text-align: center;
	color: #666;
}

/* Mobile: keep ATC dominant, wishlist square */
@media (max-width: 767px) {
	.epas-btn-atc {
		width: calc(100% - 62px);
		max-width: none;
		flex: 1 1 auto;
		font-size: 14px;
		min-height: 48px;
		padding: 12px 14px;
	}

	.epas-btn-wishlist {
		width: 48px;
		min-width: 48px;
		min-height: 48px;
	}

	.epas-swatch--text {
		padding: 8px 14px;
		min-height: 38px;
	}
}

/* Hide native WooCommerce select rows — swatches are the UI */
.epas-atc-widget .variations tr:not(.epas-attr-row),
.epas-atc-widget table.variations tr:not(.epas-attr-row) {
	display: none !important;
}

.epas-atc-widget .variations .epas-attr-row td {
	padding: 0;
	border: none;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled]:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled]:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled]:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled[disabled]:hover {
    background-color: #050505 !important;
    color: #fff;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:hover {
    background-color: #000000 !important;
    color: #fff;
}