.ofr-bx {
	position:relative;
	min-width:0;
	min-height:300px;
	flex:1 1 calc(50% - 10px);
	display:flex;
	overflow:hidden;
	border:var(--border);
	border-radius:var(--largeradius);
	background:var(--surface-color);
	box-shadow:var(--box-shadow-defult);
	transition:
		transform var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);
}

.ofr-bx > * {
	min-width:0;
}

.ofr-bx.is-hot {
	border-color: #00000024;
}

.ofr-bx:focus-within {
	border-color:var(--uicolor);
}

.ofr-bx .ofr-im {
	position:relative;
	width:40%;
	flex:0 0 40%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--media-placeholder);
	overflow:hidden;
}

.ofr-bx .ofr-im::after {
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(
		90deg,
		transparent 62%,
		color-mix(in srgb,var(--uicolor) 12%,transparent)
	);
	pointer-events:none;
}

:dir(rtl) .ofr-bx .ofr-im::after {
	background:linear-gradient(
		270deg,
		transparent 62%,
		color-mix(in srgb,var(--uicolor) 12%,transparent)
	);
}

.ofr-bx .ofr-im img {
	max-width:100%;
	max-height:100%;
	display:block;
	object-fit:contain;
}

.ofr-bx .ofr-cn {
	flex:1;
	min-width:0;
	display:flex;
	align-items:flex-start;
	flex-direction:column;
	padding:22px;
	text-align:start;
}

.ofr-bx .ofr-top {
	width:100%;
	min-width:0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-block-end:13px;
}

.ofr-bx .ofr-dis {
	min-width:0;
	min-height:32px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	padding:7px 11px;
	border-radius:999px;
	color:var(--on-color);
	background:var(--uicolor2);
	font-size: 16px;
	font-weight: 600;
	line-height:1.35;
	text-align:center;
	overflow-wrap:anywhere;
}

.ofr-bx .ofr-dis i,
.ofr-bx .ofr-dis svg {
	flex:none;
}

.ofr-bx .ofr-tim {
	flex:none;
	display:flex;
	align-items:flex-end;
	flex-direction:column;
	color:var(--secondarytext);
	text-align:end;
}

.ofr-bx .ofr-tim small {
	font-size:13px;
	font-weight:800;
	line-height:1.35;
}

.ofr-bx .ofr-tim b {
	color: var(--uicolor2);
	font-size:16px;
	font-weight:900;
	line-height: 40px;
	direction:ltr;
	unicode-bidi:isolate;
}

.ofr-bx h3 {
	width:100%;
	margin:0 0 7px;
	color:var(--primary-text);
	font-size:22px;
	font-weight:900;
	line-height:1.35;
	text-align:start;
	overflow-wrap:anywhere;
}

.ofr-bx h3 a {
	color:inherit;
	text-decoration:none;
}

.ofr-bx h3 a:focus-visible {
	outline:3px solid
		color-mix(in srgb,var(--uicolor) 35%,transparent);
	outline-offset:3px;
	border-radius:4px;
}

.ofr-bx .ofr-cn > p {
	width:100%;
	margin:0 0 14px;
	color: var(--Text-color);
	font-size: 17px;
	font-weight: 700;
	line-height:1.7;
	text-align:start;
	overflow-wrap:anywhere;
}

.ofr-bx .ofr-met {
	width:100%;
	min-width:0;
	display:flex;
	align-items:stretch;
	gap:9px;
	margin-block-end:13px;
}

.ofr-bx .ofr-cod,
.ofr-bx .ofr-prc {
	min-width:0;
	min-height:47px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	padding:7px 10px;
	border:1px dashed var(--uicolor);
	border-radius:10px;
	background: color-mix(in srgb,var(--uicolor) 12%,transparent);
	text-align:center;
}

.ofr-bx .ofr-cod {
	flex:1 1 45%;
	flex-direction:column;
}

.ofr-bx .ofr-prc {
	flex:1 1 55%;
	flex-wrap:wrap;
}

.ofr-bx .ofr-cod small {
	color:var(--secondarytext);
	font-size:13px;
	font-weight:800;
	line-height:1.3;
}

.ofr-bx .ofr-cod b {
	max-width:100%;
	color:var(--uicolor);
	font-family:var(--f-number);
	font-size:13px;
	font-weight:900;
	line-height:1.3;
	letter-spacing:1px;
	direction:ltr;
	unicode-bidi:isolate;
	overflow-wrap:anywhere;
}

.ofr-bx .ofr-prc del {
	color:var(--secondarytext);
	font-family:var(--f-number);
	font-size:15px;
	line-height:1;
	direction:ltr;
	unicode-bidi:isolate;
}

.ofr-bx .ofr-prc b {
	color: var(--uicolor4);
	font-family:var(--f-number);
	font-size: 35px;
	font-weight:900;
	line-height:1;
	direction:ltr;
	unicode-bidi:isolate;
}

.ofr-bx .ofr-prc small {
	color:var(--primary-text);
	font-size:12px;
	font-weight:900;
	line-height:1.3;
}

.ofr-bx .ofr-rel {
	width:100%;
	min-width:0;
	display:flex;
	align-items:stretch;
	flex-wrap:wrap;
	gap:7px;
	margin-block-end:14px;
}

.ofr-bx .ofr-rel > span {
	min-width:0;
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:6px;
	padding:6px 9px;
	border-radius:8px;
	color:var(--primary-text);
	background:var(--background2);
	font-size: 17px;
	line-height: 14px;
	font-weight: 600;
	text-align:start;
	overflow-wrap:anywhere;
}

.ofr-bx .ofr-rel small {
	color: var(--Text-color);
	font-weight:900;
}

.ofr-bx .ofr-rel b {
	font-weight:900;
}

.ofr-bx .ofr-rel em {
	color:var(--uicolor);
	font-style:normal;
	font-weight:900;
}

.ofr-bx .ofr-ft {
	width:100%;
	min-width:0;
	display:flex;
	align-items:center;
	gap:12px;
	margin-block-start:auto;
}

.ofr-bx .ofr-btn {
	min-width:0;
	flex:1;
}

.ofr-bx .ofr-btn > a {
	width:100%;
	min-height:44px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:8px 14px;
	border-radius:10px;
	text-align:center;
	background: var(--uicolor);
	overflow-wrap:anywhere;
	color: #fff;
	-webkit-tap-highlight-color:transparent;
	touch-action:manipulation;
}

.ofr-bx .ofr-btn > a:focus-visible,
.ofr-bx .ofr-trm:focus-visible {
	outline:3px solid
		color-mix(in srgb,var(--uicolor) 35%,transparent);
	outline-offset:3px;
}

.ofr-bx .ofr-trm {
	min-height:44px;
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	padding-inline:4px;
	color: var(--Text-color);
	font-size:14px;
	font-weight: 900;
	line-height:1.4;
	text-align:center;
	text-decoration:underline;
	overflow-wrap:anywhere;
	-webkit-tap-highlight-color:transparent;
	touch-action:manipulation;
}

.ofr-bx .ofr-txt {
	width:100%;
	margin-block-start:12px;
	padding:12px;
	border-radius:10px;
	color:var(--secondarytext);
	background:var(--background2);
	font-size:11px;
	line-height:1.7;
	text-align:start;
	overflow-wrap:anywhere;
}

.ofr-bx .ofr-txt[hidden] {
	display:none;
}


/* =========================
   Desktop Interaction
========================= */

@media (hover:hover) and (pointer:fine) {
	.ofr-bx:hover {
		border-color:var(--border-hover);
		box-shadow:var(--box-shadow-hover);
		transform:translateY(-4px);
	}
}


/* =========================
   Tablet Responsive
========================= */

@media only screen and (max-width:1080px) {
	.ofr-bx {
		flex-basis:100%;
	}

	.ofr-bx .ofr-im {
		flex-basis:36%;
		width:36%;
	}

	.ofr-bx .ofr-cn {
		padding:20px;
	}
}


/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:760px) {
	.ofr-bx {
		width:min(88vw,320px);
		max-width:calc(
			100vw - (var(--container-padding--value) * 2)
		);
		min-width:0;
		min-height:0;
		flex:0 0 min(88vw,320px);
		flex-direction:column;
		border-radius:16px;
		scroll-snap-align:start;
		scroll-snap-stop:normal;
	}

	.ofr-bx .ofr-im {
		width:100%;
		height:170px;
		flex:0 0 170px;
	}

	.ofr-bx .ofr-im::after,
	:dir(rtl) .ofr-bx .ofr-im::after {
		background:linear-gradient(
			0deg,
			color-mix(in srgb,var(--uicolor) 10%,transparent),
			transparent 45%
		);
	}

	.ofr-bx .ofr-im img {
		width:100%;
		height:100%;
		max-width:none;
		max-height:none;
		object-fit:cover;
	}

	.ofr-bx .ofr-cn {
		padding:18px 16px 16px;
	}

	.ofr-bx .ofr-top {
		align-items:flex-start;
		gap:9px;
		margin-block-end:11px;
	}

	.ofr-bx .ofr-dis {
		min-height:30px;
		padding:6px 9px;
		font-size:11.5px;
	}

	.ofr-bx .ofr-tim small {
		font-size:11.5px;
	}

	.ofr-bx .ofr-tim b {
		font-size:14px;
	}

	.ofr-bx h3 {
		font-size:19px;
		line-height:1.4;
	}

	.ofr-bx .ofr-cn > p {
		margin-block-end:13px;
		font-size:14px;
		line-height:1.65;
	}

	.ofr-bx .ofr-met {
		display:grid;
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:8px;
	}

	.ofr-bx .ofr-cod,
	.ofr-bx .ofr-prc {
		width:100%;
		min-height:58px;
		padding:7px 8px;
	}

	.ofr-bx .ofr-cod small {
		font-size:11.5px;
	}

	.ofr-bx .ofr-cod b {
		font-size:12px;
		letter-spacing:.6px;
	}

	.ofr-bx .ofr-prc {
		gap:4px 5px;
	}

	.ofr-bx .ofr-prc del {
		font-size:13px;
	}

	.ofr-bx .ofr-prc b {
		font-size:21px;
	}

	.ofr-bx .ofr-prc small {
		font-size:11px;
	}

	.ofr-bx .ofr-rel {
		flex-wrap:nowrap;
		gap:7px;
		margin-inline:0;
		padding-block-end:5px;
		overflow-x:auto;
		overflow-y:hidden;
		scroll-snap-type:x proximity;
		overscroll-behavior-inline:contain;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}

	.ofr-bx .ofr-rel::-webkit-scrollbar {
		width:0;
		height:0;
		display:none;
	}

	.ofr-bx .ofr-rel > span {
		min-width:max-content;
		flex:0 0 auto;
		flex-wrap:nowrap;
		font-size:12px;
		white-space:nowrap;
		scroll-snap-align:start;
	}

	.ofr-bx .ofr-ft {
		align-items:stretch;
		flex-direction:column;
		gap:7px;
	}

	.ofr-bx .ofr-btn {
		width:100%;
		flex:none;
	}

	.ofr-bx .ofr-btn > a {
		min-height:48px;
	}

	.ofr-bx .ofr-trm {
		width:100%;
		min-height:40px;
		padding-inline:10px;
		font-size:12.5px;
	}

	.ofr-bx .ofr-txt {
		margin-block-start:9px;
		padding:10px;
	}
}


/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:390px) {
	.ofr-bx {
		width:min(87vw,300px);
		flex-basis:min(87vw,300px);
		border-radius:14px;
	}

	.ofr-bx .ofr-im {
		height:155px;
		flex-basis:155px;
	}

	.ofr-bx .ofr-cn {
		padding:16px 14px 14px;
	}

	.ofr-bx .ofr-top {
		flex-wrap:wrap;
	}

	.ofr-bx .ofr-tim {
		align-items:flex-start;
		flex-basis:100%;
		text-align:start;
	}

	.ofr-bx .ofr-met {
		gap:7px;
	}

	.ofr-bx .ofr-cod,
	.ofr-bx .ofr-prc {
		padding-inline:6px;
	}

	.ofr-bx h3 {
		font-size:18px;
	}

	.ofr-bx .ofr-rel > span {
		padding-inline:8px;
	}
}


/* =========================
   Touch Interaction
========================= */

@media (hover:none) and (pointer:coarse) {
	.ofr-bx .ofr-btn > a:active {
		transform:scale(.985);
	}

	.ofr-bx .ofr-trm:active {
		color:var(--uicolor);
	}
}


/* =========================
   Reduced Motion
========================= */

@media (prefers-reduced-motion:reduce) {
	.ofr-bx {
		transition:none;
	}

	.ofr-bx:hover,
	.ofr-bx .ofr-btn > a:active {
		transform:none;
	}
}