.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-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 24px;
	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;
}

.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;
}

.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;
	}
}

/* Very narrow cards become the centered mobile composition. */
@container wcoc (max-width: 360px) {
	.wcoc-offer-cards {
		gap: 18px;
	}

	.wcoc-offer-card {
		grid-template-columns: 1fr;
		grid-template-areas:
			"image"
			"main"
			"purchase";
		justify-items: center;
		padding: 22px 16px;
		gap: 14px;
	}

	.wcoc-image {
		justify-self: center;
		width: 118px;
		min-height: 108px;
	}

	.wcoc-image img {
		max-width: 104px;
		max-height: 110px;
	}

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

	.wcoc-title {
		font-size: var(--wcoc-title-size-mobile);
	}

	.wcoc-description {
		text-align: center;
		font-size: 13px;
	}

	.wcoc-discount {
		margin-inline: auto;
		font-size: 20px;
		padding: 7px 16px;
	}

	.wcoc-purchase {
		width: 100%;
		align-items: center;
		justify-self: stretch;
		text-align: center;
		padding-right: 0;
		padding-top: 18px;
		border-right: 0;
		border-top: var(--wcoc-divider-width) solid var(--wcoc-divider);
	}

	.wcoc-price,
	.wcoc-price .price {
		width: 100%;
		align-items: center;
		text-align: center;
	}

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

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

	.wcoc-add-to-cart.button,
	.wcoc-add-to-cart.button.alt {
		width: min(74%, 220px);
		min-width: 0;
		padding: 13px 20px !important;
		font-size: 16px !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: 1fr;
			grid-template-areas: "image" "main" "purchase";
			justify-items: center;
			padding: 22px 16px;
		}

		.wcoc-main { text-align: center; }
		.wcoc-purchase {
			width: 100%;
			align-items: center;
			padding-right: 0;
			padding-top: 18px;
			border-right: 0;
			border-top: var(--wcoc-divider-width) solid var(--wcoc-divider);
		}
	}
}

/* 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;
	}
}