.wcoc-offer-cards {
	--wcoc-card: #f8faf9;
	--wcoc-featured-bg: #dfeceb;
	--wcoc-featured-bg-end: #ffffff;
	--wcoc-border: #d7e1de;
	--wcoc-featured-border: #4b6665;
	--wcoc-text: #064f4c;
	--wcoc-price: #064f4c;
	--wcoc-old-price: #b8c4c3;
	--wcoc-price-size: 32px;
	--wcoc-title-size: 30px;
	--wcoc-title-size-compact: 20px;
	--wcoc-title-size-mobile: 23px;
	--wcoc-card-padding-v: 26px;
	--wcoc-card-padding-h: 34px;
	--wcoc-mobile-scale: .88;
	--wcoc-mobile-card-padding: 16px;
	--wcoc-button: #064f4c;
	--wcoc-button-hover: #0b716c;
	--wcoc-button-text: #fff;
	--wcoc-discount: #28b8ad;
	--wcoc-discount-text: #fff;
	--wcoc-divider: #b9c4c1;
	--wcoc-divider-width: 2px;
	--wcoc-shadow: rgba(185, 200, 197, .58);
	--wcoc-shadow-strong: rgba(185, 200, 197, .78);
	--wcoc-card-radius: 28px;
	--wcoc-button-radius: 16px;
	--wcoc-muted: #b8c4c3;

	display: grid;
	gap: 22px;
	width: 100%;
	margin: 0 0 10px;
	direction: rtl;
	container-type: inline-size;
	container-name: wcoc;
}

.wcoc-offer-card {
	position: relative;
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr) 180px;
	grid-template-areas: "purchase main image";
	align-items: center;
	gap: 20px;
	padding: var(--wcoc-card-padding-v) var(--wcoc-card-padding-h);
	border: 1px solid var(--wcoc-border);
	border-radius: var(--wcoc-card-radius);
	background: var(--wcoc-card);
	box-shadow: 0 4px 14px var(--wcoc-shadow);
	direction: ltr;
	overflow: visible;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.wcoc-offer-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px var(--wcoc-shadow-strong);
}

.wcoc-offer-card.is-featured {
	background: linear-gradient(90deg, var(--wcoc-featured-bg-end) 0%, var(--wcoc-featured-bg) 100%);
	border: 2px solid var(--wcoc-featured-border);
	box-shadow: 0 6px 16px var(--wcoc-shadow-strong);
}

.wcoc-offer-card.is-unavailable {
	opacity: .64;
	filter: grayscale(.08);
}

.wcoc-image {
	grid-area: image;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-self: end;
	width: 154px;
	min-height: 130px;
	padding: 8px;
	background: transparent;
	border-radius: 24px;
}

.wcoc-offer-card.is-featured .wcoc-image {
	background: rgba(255,255,255,.88);
}

.wcoc-image img {
	display: block;
	max-width: 138px;
	max-height: 140px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.wcoc-main {
	grid-area: main;
	direction: rtl;
	text-align: right;
	justify-self: stretch;
	min-width: 0;
}

.wcoc-title {
	margin: 0;
	color: var(--wcoc-text);
	font-size: var(--wcoc-title-size);
	font-weight: 800;
	line-height: 1.12;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
	text-wrap: balance;
}

.wcoc-description {
	margin: 8px 0 0;
	color: var(--wcoc-text);
	opacity: .78;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.wcoc-discount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 14px;
	margin-inline-start: 0;
	padding: 8px 20px;
	border-radius: 16px;
	background: var(--wcoc-discount);
	color: var(--wcoc-discount-text);
	font-size: 25px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.wcoc-purchase {
	grid-area: purchase;
	direction: ltr;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	justify-self: start;
	text-align: left;
	gap: 12px;
	padding-right: 34px;
	border-right: var(--wcoc-divider-width) solid var(--wcoc-divider);
}

.wcoc-price,
.wcoc-price .price {
	display: flex;
	direction: rtl;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
}

.wcoc-price {
	color: var(--wcoc-price);
	font-size: var(--wcoc-price-size);
	font-weight: 800;
	line-height: 1.05;
	white-space: nowrap;
}

.wcoc-price .woocommerce-Price-amount,
.wcoc-price bdi {
	font-weight: 800;
}

/* RTL price fix.
 * In this store WooCommerce outputs the amount as:
 * <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">₪</span>&nbsp;189</span>
 * There is no <bdi> wrapper, so targeting bdi does nothing. Isolate the entire
 * amount as an LTR inline flex row. That preserves the source order and keeps
 * the shekel sign visually to the left of the number: ₪ 189. */
html[dir="rtl"] .wcoc-price .woocommerce-Price-amount {
	display: inline-flex;
	flex-direction: row;
	align-items: baseline;
	direction: ltr;
	unicode-bidi: isolate;
	white-space: nowrap;
}

html[dir="rtl"] .wcoc-price .woocommerce-Price-currencySymbol {
	direction: rtl;
	unicode-bidi: isolate;
	margin-right: .18em;
}

/* Keep compatibility with themes/WooCommerce versions that wrap the amount in bdi. */
html[dir="rtl"] .wcoc-price .woocommerce-Price-amount bdi {
	direction: ltr;
	unicode-bidi: isolate;
	white-space: nowrap;
}

.wcoc-price del {
	color: var(--wcoc-old-price);
	font-size: calc(var(--wcoc-price-size) * .68);
	font-weight: 500;
	opacity: 1;
}

.wcoc-price del .woocommerce-Price-amount,
.wcoc-price del bdi {
	font-weight: 500;
}

.wcoc-price ins {
	color: var(--wcoc-price);
	font-size: var(--wcoc-price-size);
	font-weight: 800;
	text-decoration: none;
}

.wcoc-stock {
	display: none;
}

.wcoc-unavailable-reason {
	margin: 0;
	font-size: 12px;
	color: #a33e39;
}

.wcoc-add-to-cart.button,
.wcoc-add-to-cart.button.alt {
	min-width: 156px;
	padding: 14px 26px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: var(--wcoc-button-radius) !important;
	background: var(--wcoc-button) !important;
	color: var(--wcoc-button-text) !important;
	box-shadow: none !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-align: center;
	white-space: nowrap;
	transition: transform .16s ease, background .16s ease;
}

.wcoc-add-to-cart.button:hover,
.wcoc-add-to-cart.button.alt:hover {
	background: var(--wcoc-button-hover) !important;
	transform: translateY(-1px);
}

.wcoc-add-to-cart.button:disabled,
.wcoc-add-to-cart.button.alt:disabled {
	background: #98a7a4 !important;
	cursor: not-allowed;
	transform: none;
}

.wcoc-feedback {
	min-height: 1.4em;
	margin-top: -4px;
	font-size: 13px;
	font-weight: 700;
}

/* Do not reserve layout space until there is real feedback to show. */
.wcoc-feedback:empty {
	display: none;
	min-height: 0;
	margin: 0;
	padding: 0;
}

.wcoc-feedback.is-error { color: #b32d2e; }
.wcoc-feedback.is-success { color: var(--wcoc-text); }
.wcoc-offer-cards.is-loading { opacity: .72; pointer-events: none; }

/*
 * Compact desktop/tablet mode.
 * This responds to the actual Elementor column width, not the browser width.
 * The card stays horizontal, but becomes deliberately quieter and tighter.
 */
@container wcoc (max-width: 760px) {
	.wcoc-offer-cards {
		gap: 14px;
	}

	.wcoc-offer-card {
		grid-template-columns: 112px minmax(0, 1fr) 76px;
		grid-template-areas: "purchase main image";
		gap: 10px;
		padding: min(var(--wcoc-card-padding-v), 17px) min(var(--wcoc-card-padding-h), 18px);
		border-radius: min(var(--wcoc-card-radius), 20px);
		box-shadow: 0 3px 10px var(--wcoc-shadow);
	}

	.wcoc-offer-card.is-featured {
		box-shadow: 0 4px 12px var(--wcoc-shadow-strong);
	}

	.wcoc-image {
		width: 76px;
		min-height: 72px;
		padding: 5px;
		border-radius: 16px;
	}

	.wcoc-image img {
		max-width: 68px;
		max-height: 76px;
	}

	.wcoc-title {
		font-size: var(--wcoc-title-size-compact);
		line-height: 1.15;
		text-wrap: pretty;
	}

	.wcoc-description {
		margin-top: 5px;
		font-size: 12px;
		line-height: 1.3;
	}

	.wcoc-discount {
		margin-top: 7px;
		padding: 5px 10px;
		border-radius: 10px;
		font-size: 15px;
	}

	.wcoc-purchase {
		gap: 7px;
		padding-right: 14px;
	}

	.wcoc-price,
	.wcoc-price ins {
		font-size: min(var(--wcoc-price-size), 20px);
	}

	.wcoc-price,
	.wcoc-price .price {
		gap: 4px;
	}

	.wcoc-price del {
		font-size: 13px;
	}

	.wcoc-add-to-cart.button,
	.wcoc-add-to-cart.button.alt {
		min-width: 100px;
		padding: 9px 12px !important;
		border-radius: min(var(--wcoc-button-radius), 12px) !important;
		font-size: 13px !important;
	}
}

/* Mobile / very narrow cards keep the same horizontal visual language as desktop.
 * Instead of stacking image, content and purchase into three rows, shrink the
 * existing three-column card progressively so the customer sees the same
 * comparison pattern on every device. */
@container wcoc (max-width: 430px) {
	.wcoc-offer-cards {
		gap: calc(14px * var(--wcoc-mobile-scale));
	}

	.wcoc-offer-card {
		grid-template-columns: 92px minmax(0, 1fr) 56px;
		grid-template-areas: "purchase main image";
		align-items: center;
		justify-items: stretch;
		gap: 7px;
		padding: min(var(--wcoc-mobile-card-padding), 12px) 10px;
		border-radius: min(var(--wcoc-card-radius), 18px);
	}

	.wcoc-image {
		justify-self: end;
		width: 54px;
		min-height: 58px;
		padding: 4px;
		border-radius: 12px;
	}

	.wcoc-image img {
		max-width: 48px;
		max-height: 54px;
	}

	.wcoc-main {
		text-align: right;
	}

	.wcoc-title {
		font-size: max(14px, calc(var(--wcoc-title-size-compact) * .75 * var(--wcoc-mobile-scale)));
		line-height: 1.14;
		text-wrap: pretty;
	}

	.wcoc-description {
		margin-top: 3px;
		font-size: max(10px, calc(12px * var(--wcoc-mobile-scale)));
		line-height: 1.2;
		text-align: right;
	}

	.wcoc-discount {
		margin-top: 5px;
		margin-inline: 0;
		padding: 4px 8px;
		border-radius: 8px;
		font-size: max(11px, calc(14px * var(--wcoc-mobile-scale)));
	}

	.wcoc-purchase {
		width: auto;
		align-items: flex-start;
		justify-self: start;
		text-align: left;
		gap: 5px;
		padding: 0 9px 0 0;
		border-top: 0;
		border-right: var(--wcoc-divider-width) solid var(--wcoc-divider);
	}

	.wcoc-price,
	.wcoc-price .price {
		width: auto;
		align-items: flex-start;
		text-align: left;
		gap: 3px;
	}

	.wcoc-price,
	.wcoc-price ins {
		font-size: max(16px, calc(19px * var(--wcoc-mobile-scale)));
	}

	.wcoc-price del {
		font-size: max(10px, calc(12px * var(--wcoc-mobile-scale)));
	}

	.wcoc-add-to-cart.button,
	.wcoc-add-to-cart.button.alt {
		width: auto;
		min-width: 82px;
		padding: 8px 8px !important;
		border-radius: min(var(--wcoc-button-radius), 10px) !important;
		font-size: max(10px, calc(12px * var(--wcoc-mobile-scale))) !important;
	}
}

@container wcoc (max-width: 340px) {
	.wcoc-offer-card {
		grid-template-columns: 84px minmax(0, 1fr) 48px;
		gap: 5px;
		padding: 10px 8px;
	}

	.wcoc-image {
		width: 46px;
		min-height: 50px;
		padding: 3px;
	}

	.wcoc-image img {
		max-width: 42px;
		max-height: 46px;
	}

	.wcoc-title {
		font-size: 14px;
	}

	.wcoc-description {
		font-size: 10px;
	}

	.wcoc-discount {
		font-size: 11px;
		padding: 3px 6px;
	}

	.wcoc-purchase {
		padding-right: 7px;
	}

	.wcoc-price,
	.wcoc-price ins {
		font-size: 16px;
	}

	.wcoc-price del {
		font-size: 10px;
	}

	.wcoc-add-to-cart.button,
	.wcoc-add-to-cart.button.alt {
		min-width: 76px;
		padding: 7px 6px !important;
		font-size: 10px !important;
	}
}

/* Fallback for older browsers without container query support. */
@supports not (container-type: inline-size) {
	@media (max-width: 480px) {
		.wcoc-offer-card {
			grid-template-columns: 92px minmax(0, 1fr) 56px;
			grid-template-areas: "purchase main image";
			gap: 7px;
			padding: 12px 10px;
		}
		.wcoc-image { width: 54px; min-height: 58px; padding: 4px; }
		.wcoc-image img { max-width: 48px; max-height: 54px; }
		.wcoc-main { text-align: right; }
		.wcoc-title { font-size: 15px; }
		.wcoc-description { font-size: 10px; text-align: right; }
		.wcoc-discount { margin-top: 5px; padding: 4px 8px; font-size: 12px; }
		.wcoc-purchase {
			width: auto;
			align-items: flex-start;
			padding: 0 9px 0 0;
			border-top: 0;
			border-right: var(--wcoc-divider-width) solid var(--wcoc-divider);
		}
		.wcoc-price,
		.wcoc-price .price { width: auto; align-items: flex-start; }
		.wcoc-price,
		.wcoc-price ins { font-size: 17px; }
		.wcoc-price del { font-size: 11px; }
		.wcoc-add-to-cart.button,
		.wcoc-add-to-cart.button.alt { width: auto; min-width: 82px; padding: 8px !important; font-size: 11px !important; }
	}
}

/* Unified add-to-cart feedback below the full Offer Cards group. */
.wcoc-feedback.is-success {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: -6px;
	padding: 10px 14px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--wcoc-discount) 10%, white);
	color: var(--wcoc-text);
	text-align: center;
}

.wcoc-feedback__message {
	font-weight: 700;
}

.wcoc-feedback__cart-link {
	color: var(--wcoc-text);
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wcoc-feedback__cart-link:hover,
.wcoc-feedback__cart-link:focus-visible {
	color: var(--wcoc-button-hover);
}

@media (max-width: 480px) {
	.wcoc-feedback.is-success {
		flex-direction: column;
		gap: 4px;
	}
}

/* Variation image preview affordance. The featured card remains the marketing
   highlight; selected only adds a subtle interaction cue. */
.wcoc-offer-card {
	cursor: pointer;
}
.wcoc-offer-card.is-selected {
	box-shadow: 0 7px 20px var(--wcoc-shadow-strong);
}
.wcoc-offer-card.is-unavailable {
	cursor: default;
}


/* Optional per-variation marketing text shown under the product name in cart/checkout. */
.wcoc-cart-offer-description {
	display: block;
	margin-top: 4px;
	color: #60716f;
	font-size: .88em;
	font-weight: 600;
	line-height: 1.35;
}