/* =============================================================================
   Etucart Variation Swatches — shop / archive compact picker (1.6.0)

   Fully scoped under .etucart-shop-pick. Design tokens are kept parallel
   to etucart-swatches.css so the picker reads as the same product family:
     - Pills / circles with heavy rounding (999px).
     - Color swatches: 28px outer circle, 22px inner dot.
     - Size buttons: 36px tall pills.
     - Add-to-cart: solid dark pill, full-width inside the card.
   Everything is marked !important because WC themes aggressively style
   .button / .add_to_cart_button / inputs inside product loops.
   ============================================================================= */

.etucart-shop-pick,
.etucart-shop-pick * {
	box-sizing: border-box !important;
}

.etucart-shop-pick {
	--eshop-text: #111111;
	--eshop-muted: #6b6b6b;
	--eshop-border: #e0e0e0;
	--eshop-border-strong: #111111;
	--eshop-bg: #ffffff;
	--eshop-bg-soft: #f2f2f2;
	--eshop-accent: #111111;
	--eshop-success: #0f8a4a;
	--eshop-danger: #ca2b1d;
	--eshop-radius-pill: 999px;
	--eshop-gap: 6px;
	--eshop-transition: 140ms ease;
	--eshop-font: "Ploni", "Ploni ML v2 AAA", "Ploni ML", "Assistant",
		"Rubik", "Heebo", "Noto Sans Hebrew", -apple-system,
		BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;

	direction: rtl !important;
	text-align: right !important;
	font-family: var(--eshop-font) !important;
	color: var(--eshop-text) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	padding: 10px 0 0 0 !important;
	margin: 8px 0 0 0 !important;
	width: 100% !important;
	background: transparent !important;
	border: 0 !important;
}

.etucart-shop-pick,
.etucart-shop-pick * {
	font-family: var(--eshop-font) !important;
}

.etucart-shop-pick button {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	box-shadow: none !important;
	line-height: 1 !important;
	font-family: inherit !important;
	-webkit-tap-highlight-color: transparent !important;
}

.etucart-shop-pick button:focus {
	outline: none !important;
}

.etucart-shop-pick button:focus-visible {
	outline: 2px solid var(--eshop-text) !important;
	outline-offset: 2px !important;
}

/* ---------- Price (החל מ: ₪X) ---------- */
.etucart-shop-pick__price {
	display: flex !important;
	align-items: baseline !important;
	gap: 4px !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	color: var(--eshop-text) !important;
	margin: 0 0 2px 0 !important;
	min-height: 16px;
}

.etucart-shop-pick__price-prefix {
	color: var(--eshop-muted) !important;
	font-weight: 400 !important;
}

.etucart-shop-pick__price-value {
	font-weight: 700 !important;
	color: var(--eshop-text) !important;
}

.etucart-shop-pick__price-value .woocommerce-Price-amount,
.etucart-shop-pick__price-value bdi {
	font-weight: 700 !important;
	color: var(--eshop-text) !important;
}

.etucart-shop-pick__price-value del {
	color: var(--eshop-muted) !important;
	opacity: .7 !important;
	font-weight: 400 !important;
	margin-inline-end: 6px !important;
}

/* ---------- Attribute row ---------- */
.etucart-shop-pick__attrs {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.etucart-shop-pick__attr {
	margin: 0 !important;
	padding: 0 !important;
}

.etucart-shop-pick__attr-head {
	display: flex !important;
	align-items: baseline !important;
	gap: 6px !important;
	margin: 0 0 4px 0 !important;
	font-size: 12px !important;
	line-height: 1.2 !important;
}

.etucart-shop-pick__attr-label {
	font-weight: 600 !important;
	color: var(--eshop-text) !important;
}

.etucart-shop-pick__attr-selected {
	color: var(--eshop-muted) !important;
	font-weight: 400 !important;
}

.etucart-shop-pick__attr-selected:empty::before {
	content: attr(data-default-text);
	color: var(--eshop-muted);
}

.etucart-shop-pick__opts {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--eshop-gap) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	justify-content: flex-start !important;
}

/* Overflow options hidden until +N is clicked. `hidden` attr is our primary
   mechanism; the class is a fallback for themes that unset [hidden]. */
.etucart-shop-pick__opt[hidden],
.etucart-shop-pick__opt.is-overflow:not(.is-revealed) {
	display: none !important;
}

/* ---------- Color swatch (circle) ---------- */
.etucart-shop-pick__opt--color {
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: 2px solid transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	transition: border-color var(--eshop-transition), transform var(--eshop-transition) !important;
	position: relative !important;
}

.etucart-shop-pick__dot {
	display: block !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: #e5e7eb;
	border: 1.5px solid var(--eshop-border) !important;
	box-sizing: border-box !important;
	transition: transform var(--eshop-transition) !important;
}

.etucart-shop-pick__opt--color.is-light .etucart-shop-pick__dot {
	border-color: #b5b5b5 !important;
}

.etucart-shop-pick__opt--color:hover:not(.is-unavailable):not(.is-out-of-stock) .etucart-shop-pick__dot {
	transform: scale(1.05);
}

.etucart-shop-pick__opt--color.is-selected {
	border-color: var(--eshop-border-strong) !important;
}

/* ---------- Size / text pill ---------- */
.etucart-shop-pick__opt--button {
	min-width: 36px !important;
	height: 32px !important;
	padding: 0 12px !important;
	border-radius: var(--eshop-radius-pill) !important;
	border: 1.5px solid var(--eshop-border) !important;
	background: var(--eshop-bg) !important;
	color: var(--eshop-text) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	transition: background var(--eshop-transition), border-color var(--eshop-transition), color var(--eshop-transition) !important;
}

.etucart-shop-pick__opt--button:hover:not(.is-unavailable):not(.is-out-of-stock) {
	border-color: var(--eshop-text) !important;
}

.etucart-shop-pick__opt--button.is-selected {
	background: var(--eshop-text) !important;
	color: #fff !important;
	border-color: var(--eshop-text) !important;
}

/* ---------- Unavailable / OOS ---------- */
.etucart-shop-pick__opt.is-unavailable,
.etucart-shop-pick__opt.is-out-of-stock {
	cursor: not-allowed !important;
}

.etucart-shop-pick__opt.is-unavailable {
	opacity: 0.35 !important;
}

.etucart-shop-pick__opt.is-out-of-stock {
	opacity: 0.55 !important;
}

.etucart-shop-pick__opt--color.is-out-of-stock .etucart-shop-pick__dot {
	filter: grayscale(1) brightness(1.05);
}

.etucart-shop-pick__opt--color.is-unavailable::after,
.etucart-shop-pick__opt--color.is-out-of-stock::after,
.etucart-shop-pick__opt--button.is-unavailable::after,
.etucart-shop-pick__opt--button.is-out-of-stock::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 50%;
	width: 70%;
	height: 1px;
	background: var(--eshop-muted);
	transform: translate(50%, -50%) rotate(-18deg);
	pointer-events: none;
}

.etucart-shop-pick__opt--button {
	position: relative !important;
}

/* ---------- +N / − reveal pill ---------- */
.etucart-shop-pick__more {
	min-width: 32px !important;
	height: 28px !important;
	padding: 0 10px !important;
	border-radius: var(--eshop-radius-pill) !important;
	border: 1px dashed var(--eshop-border) !important;
	background: var(--eshop-bg-soft) !important;
	color: var(--eshop-muted) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: background var(--eshop-transition), color var(--eshop-transition), border-color var(--eshop-transition) !important;
}

.etucart-shop-pick__more:hover {
	background: #e6e6e6 !important;
	color: var(--eshop-text) !important;
	border-color: var(--eshop-text) !important;
	border-style: solid !important;
}

.etucart-shop-pick__more[aria-expanded="true"] {
	border-style: solid !important;
	border-color: var(--eshop-text) !important;
	color: var(--eshop-text) !important;
	background: transparent !important;
}

/* ---------- Add to cart ---------- */
.etucart-shop-pick__add {
	width: 100% !important;
	min-height: 40px !important;
	padding: 0 16px !important;
	border-radius: var(--eshop-radius-pill) !important;
	border: 0 !important;
	background: var(--eshop-text) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	margin: 4px 0 0 0 !important;
	transition: background var(--eshop-transition), color var(--eshop-transition), opacity var(--eshop-transition) !important;
	text-decoration: none !important;
	line-height: 1 !important;
}

.etucart-shop-pick__add:hover:not(:disabled):not(.is-busy) {
	background: #000 !important;
}

.etucart-shop-pick__add:disabled,
.etucart-shop-pick__add[aria-disabled="true"] {
	background: var(--eshop-bg-soft) !important;
	color: var(--eshop-muted) !important;
	cursor: not-allowed !important;
}

.etucart-shop-pick__add.is-busy {
	opacity: .7 !important;
	cursor: wait !important;
}

.etucart-shop-pick__add.is-success {
	background: var(--eshop-success) !important;
	color: #fff !important;
}

.etucart-shop-pick__add.is-error {
	background: var(--eshop-danger) !important;
	color: #fff !important;
}

/* ---------- Toast notifications (1.6.4 → restyled in 1.6.5) ----------
 *
 * Visual language matches the PDP's `.etucart-toast` (dark pill, bottom-left,
 * green circular check on success, soft shadow, slide-up from below). The
 * shop picker emits the same toast kind so the user's experience is
 * consistent across archive → product.
 *
 * Stack is fixed-position, bottom-left of the viewport, appended to
 * document.body — completely outside the product grid so message length
 * can never resize a card or push neighbours around.
 *
 * Pointer events on the stack are off, so toasts never accidentally block
 * clicks on the page underneath. Only the toast bodies themselves receive
 * clicks (for the close button and for their own dismiss tap).
 */
.etucart-shop-toast-stack {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(360px, calc(100% - 24px));
	pointer-events: none;
	direction: rtl;
	font-family: var(--etucart-font, inherit);
}

.etucart-shop-toast {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 220px;
	max-width: 100%;
	padding: 12px 18px;
	background: #111111;
	color: #ffffff;
	border-radius: 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	text-align: right;
	word-wrap: break-word;
	overflow-wrap: anywhere; /* hard-wrap long words/URLs so width is bounded */
	transform: translateY(140%);
	opacity: 0;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

.etucart-shop-toast.is-visible {
	transform: translateY(0);
	opacity: 1;
}

.etucart-shop-toast.is-leaving {
	transform: translateY(140%);
	opacity: 0;
}

/* Success: green circular check mark — identical treatment to PDP .etucart-toast__check. */
.etucart-shop-toast__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--etucart-success, #0f8a4a);
	color: #ffffff;
	font-size: 14px;
	flex: 0 0 auto;
}

.etucart-shop-toast__check::before {
	content: "";
	display: block;
	width: 6px;
	height: 11px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}

/* Error: red circular "!" on the same dark pill. */
.etucart-shop-toast__bang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--eshop-danger, #d14c4c);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	flex: 0 0 auto;
	line-height: 1;
}

.etucart-shop-toast__text {
	flex: 1 1 auto;
	min-width: 0; /* allow text to wrap inside the flex row */
}

.etucart-shop-toast__close {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.75);
	padding: 0 4px;
	margin: -2px -6px -2px 0;
	font-family: inherit;
}
.etucart-shop-toast__close:hover,
.etucart-shop-toast__close:focus {
	color: #ffffff;
	outline: none;
}

@media (max-width: 768px) {
	/* Sit the toast above any sticky bottom bar so they don't overlap,
	   mirroring the PDP toast behaviour. */
	.etucart-shop-toast-stack {
		bottom: calc(88px + env(safe-area-inset-bottom, 0px));
		left: 12px;
		right: 12px;
		width: auto;
	}
	.etucart-shop-toast {
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.etucart-shop-toast {
		transition-duration: 120ms !important;
	}
}

/* ---------- Narrow card adjustments ---------- */
@media (max-width: 480px) {
	.etucart-shop-pick__opt--color {
		width: 26px !important;
		height: 26px !important;
		min-width: 26px !important;
	}
	.etucart-shop-pick__dot {
		width: 20px !important;
		height: 20px !important;
	}
	.etucart-shop-pick__opt--button {
		height: 30px !important;
		padding: 0 10px !important;
		font-size: 11px !important;
	}
	.etucart-shop-pick__add {
		min-height: 38px !important;
		font-size: 13px !important;
	}
}

/* ---------- screen reader text (duplicated so we don't rely on the theme) --- */
.etucart-shop-pick .screen-reader-text {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	word-wrap: normal !important;
}