/* Shoppable Reels – front-end styles */
:root {
	--ofreels-primary: #ff3b5c;
	--ofreels-radius: 12px;
}

html.ofreels-lock,
html.ofreels-lock body { overflow: hidden !important; }

/* Reset theme button styles inside our components */
button[class*="ofreels-"] {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	box-shadow: none;
	border-radius: 0;
	line-height: normal;
	min-height: 0;
	min-width: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.ofreels-root svg,
.ofreels-reels svg,
.ofreels-stories svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	display: block;
}

/* ---------- Reels widget ---------- */
.ofreels-reels { margin: 24px 0; position: relative; }
.ofreels-heading { margin: 0 0 12px; font-size: 1.25em; }
.ofreels-slider-wrap { position: relative; }

.ofreels-layout-slider .ofreels-track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding: 2px;
	-webkit-overflow-scrolling: touch;
}
.ofreels-layout-slider .ofreels-track::-webkit-scrollbar { display: none; }
.ofreels-layout-slider .ofreels-card {
	flex: 0 0 calc( ( 100% - 12px * ( var(--ofreels-cols, 4) - 1 ) ) / var(--ofreels-cols, 4) );
	scroll-snap-align: start;
}
.ofreels-layout-grid .ofreels-track {
	display: grid;
	grid-template-columns: repeat( var(--ofreels-cols, 4), minmax(0, 1fr) );
	gap: 12px;
}

button.ofreels-card {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: #111;
	border-radius: var(--ofreels-radius);
	color: #fff;
	text-align: start;
	transition: transform .2s ease, box-shadow .2s ease;
}
button.ofreels-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
button.ofreels-card:focus-visible { outline: 3px solid var(--ofreels-primary); outline-offset: 2px; }
.ofreels-card-media,
.ofreels-card-media img,
.ofreels-card-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ofreels-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 55% );
}
.ofreels-card-play {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	z-index: 1;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .45);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ofreels-card-play svg { width: 14px; height: 14px; fill: #fff; stroke: none; margin-inline-start: 2px; }
.ofreels-card-info {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ofreels-card-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ofreels-card-price { font-size: 13px; opacity: .95; }
.ofreels-card-price del { opacity: .65; margin-inline-end: 4px; }
.ofreels-card-price ins { text-decoration: none; font-weight: 700; }

button.ofreels-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	color: #111;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	display: none;
	align-items: center;
	justify-content: center;
}
button.ofreels-arrow.is-prev { inset-inline-start: -12px; }
button.ofreels-arrow.is-next { inset-inline-end: -12px; }
[dir="rtl"] button.ofreels-arrow svg { transform: scaleX(-1); }
@media (hover: hover) and (min-width: 782px) {
	.ofreels-slider-wrap:hover button.ofreels-arrow { display: flex; }
}
@media (max-width: 781px) {
	.ofreels-layout-slider .ofreels-card { flex-basis: 42%; }
	.ofreels-layout-grid .ofreels-track { grid-template-columns: repeat( 2, minmax(0, 1fr) ); }
}

/* ---------- Stories bar ---------- */
.ofreels-stories { margin: 16px 0; }
.ofreels-stories-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 6px 4px;
	scrollbar-width: none;
}
.ofreels-stories-track::-webkit-scrollbar { display: none; }
button.ofreels-story-chip {
	flex: 0 0 auto;
	width: 78px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}
.ofreels-ring {
	width: 72px;
	height: 72px;
	padding: 3px;
	border-radius: 50%;
	background: linear-gradient( 45deg, #ffb347, var(--ofreels-primary), #c13584 );
	display: block;
	transition: transform .15s ease;
}
button.ofreels-story-chip:hover .ofreels-ring { transform: scale(1.05); }
button.ofreels-story-chip:focus-visible .ofreels-ring { outline: 3px solid var(--ofreels-primary); outline-offset: 2px; }
button.ofreels-story-chip.is-seen .ofreels-ring { background: #cfd3d8; }
.ofreels-avatar {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 3px solid #fff;
	background: #f0f1f3;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.ofreels-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ofreels-avatar-letter { font-size: 24px; font-weight: 700; color: var(--ofreels-primary); }
.ofreels-chip-name {
	font-size: 12px;
	line-height: 1.2;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Overlays ---------- */
.ofreels-viewer,
.ofreels-story {
	position: fixed;
	inset: 0;
	z-index: 999990;
	background: rgba(8, 8, 10, .94);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: ofreels-fade .2s ease;
}
.ofreels-stage {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 480px;
	background: #000;
	overflow: hidden;
	color: #fff;
}
@media (min-width: 600px) {
	.ofreels-stage {
		height: min( calc( 100vh - 32px ), 880px );
		height: min( calc( 100dvh - 32px ), 880px );
		width: auto;
		aspect-ratio: 9 / 16;
		border-radius: 20px;
		box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
	}
}

.ofreels-feed {
	position: absolute;
	inset: 0;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	overscroll-behavior: contain;
	scrollbar-width: none;
}
.ofreels-feed::-webkit-scrollbar { display: none; }
.ofreels-slide {
	position: relative;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow: hidden;
}
.ofreels-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}
.ofreels-embed { position: absolute; inset: 0; background: #000 center / cover no-repeat; overflow: hidden; }
.ofreels-embed-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ofreels-slide.has-embed .ofreels-progress,
.ofreels-slide.is-embed-facebook .ofreels-tap,
.ofreels-slide.is-embed-facebook .ofreels-pause-icon,
.ofreels-slide.is-embed-facebook .ofreels-mute { display: none; }
.ofreels-shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient( to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, 0) 45% ),
		linear-gradient( to bottom, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 18% );
}
button.ofreels-tap { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; }
.ofreels-pause-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% ) scale(.8);
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .5);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .15s ease, transform .15s ease;
	pointer-events: none;
}
.ofreels-pause-icon svg { width: 34px; height: 34px; fill: #fff; stroke: none; margin-inline-start: 4px; }
.ofreels-slide.is-paused .ofreels-pause-icon { opacity: 1; transform: translate( -50%, -50% ) scale(1); }

button.ofreels-close {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	z-index: 5;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .4);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(6px);
}
button.ofreels-nav {
	position: absolute;
	inset-inline-end: 24px;
	z-index: 5;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
}
button.ofreels-nav:hover:not(:disabled) { background: rgba(255, 255, 255, .28); }
button.ofreels-nav:disabled { opacity: .3; cursor: default; }
button.ofreels-nav.is-prev { top: calc( 50% - 56px ); }
button.ofreels-nav.is-next { top: calc( 50% + 10px ); }
button.ofreels-nav.is-side.is-prev { top: 50%; inset-inline-end: auto; inset-inline-start: 24px; transform: translateY(-50%); }
button.ofreels-nav.is-side.is-next { top: 50%; transform: translateY(-50%); }
@media (min-width: 900px) { button.ofreels-nav { display: flex; } }

/* Right-hand action rail */
.ofreels-rail {
	position: absolute;
	inset-inline-end: 10px;
	bottom: 28px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}
.ofreels-slide.has-products .ofreels-rail { bottom: 142px; }
button.ofreels-rail-btn {
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
button.ofreels-rail-btn svg { width: 30px; height: 30px; filter: drop-shadow( 0 1px 3px rgba(0, 0, 0, .5) ); transition: transform .15s ease; }
button.ofreels-rail-btn:active svg { transform: scale(.88); }
button.ofreels-rail-btn.is-liked svg { fill: var(--ofreels-primary); stroke: var(--ofreels-primary); }

/* Bottom: caption + product cards */
.ofreels-bottom {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 3;
	padding: 0 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	pointer-events: none;
}
.ofreels-bottom > * { pointer-events: auto; }
.ofreels-caption {
	margin: 0;
	padding-inline-end: 56px;
	font-size: 14px;
	line-height: 1.45;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
	white-space: pre-line;
}
.ofreels-caption.is-clamped {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	cursor: pointer;
}
.ofreels-pcards {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.ofreels-pcards::-webkit-scrollbar { display: none; }
button.ofreels-pcard {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	background: rgba(255, 255, 255, .94);
	color: #111;
	border-radius: 16px;
	text-align: start;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
	box-sizing: border-box;
}
.ofreels-pcards.is-multi button.ofreels-pcard { flex-basis: 88%; }
button.ofreels-pcard img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: #eee; }
.ofreels-pcard-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ofreels-pcard-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ofreels-pcard-price { font-size: 13px; color: #444; }
.ofreels-pcard-price del { opacity: .6; margin-inline-end: 4px; }
.ofreels-pcard-price ins { text-decoration: none; font-weight: 700; color: #111; }
.ofreels-pcard-cta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 12px;
	background: var(--ofreels-primary);
	color: #fff;
	border-radius: var(--ofreels-radius);
	font-size: 12.5px;
	font-weight: 700;
}
.ofreels-pcard-cta svg { width: 16px; height: 16px; }

.ofreels-progress {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 18px;
	z-index: 4;
	cursor: pointer;
	direction: ltr;
}
.ofreels-progress::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255, 255, 255, .28);
	transition: height .12s ease;
}
.ofreels-progress span {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
	transition: height .12s ease;
}
.ofreels-progress:hover::before,
.ofreels-progress:hover span { height: 6px; }

/* ---------- Stories viewer ---------- */
.ofreels-story-body { position: absolute; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; }
.ofreels-story-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.ofreels-story-zone { position: absolute; inset: 0; z-index: 2; touch-action: pan-x; }
.ofreels-story-stage::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 130px;
	z-index: 3;
	background: linear-gradient( to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) );
	pointer-events: none;
}
.ofreels-bars { position: absolute; top: 10px; inset-inline: 10px; z-index: 4; display: flex; gap: 4px; direction: ltr; }
.ofreels-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.ofreels-bar i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.ofreels-story-head { position: absolute; top: 22px; inset-inline: 12px; z-index: 5; display: flex; align-items: center; gap: 10px; }
.ofreels-story-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ofreels-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	flex: 0 0 auto;
}
.ofreels-story-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ofreels-story-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 12px; line-height: 1.25; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.ofreels-story-meta strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ofreels-story-meta span { opacity: .85; }
button.ofreels-story-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 50%; }
button.ofreels-story-btn:hover { background: rgba(255, 255, 255, .15); }
.ofreels-story-cta { position: absolute; inset-inline: 16px; bottom: 22px; z-index: 5; display: flex; justify-content: center; }
.ofreels-story-cta:empty { display: none; }
.ofreels-story-cta .ofreels-btn-primary { min-width: 180px; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }

/* ---------- Order drawer ---------- */
.ofreels-drawer-wrap {
	position: fixed;
	inset: 0;
	z-index: 999995;
	background: rgba(0, 0, 0, .5);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	animation: ofreels-fade .15s ease;
}
.ofreels-drawer {
	width: 100%;
	max-width: 480px;
	max-height: 88vh;
	overflow-y: auto;
	background: #fff;
	color: #111;
	border-radius: 22px 22px 0 0;
	padding: 18px 18px 22px;
	box-sizing: border-box;
	animation: ofreels-up .22s ease;
	font-size: 14px;
}
@media (min-width: 600px) {
	.ofreels-drawer-wrap { align-items: center; }
	.ofreels-drawer { border-radius: 22px; }
}
.ofreels-drawer-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ofreels-drawer-img { width: 68px; height: 68px; border-radius: 12px; object-fit: cover; background: #eee; flex: 0 0 auto; }
.ofreels-drawer-info { flex: 1 1 auto; min-width: 0; }
.ofreels-drawer-name { margin: 0 0 4px; font-size: 16px; line-height: 1.3; color: #111; }
.ofreels-drawer-price { font-size: 15px; font-weight: 700; }
.ofreels-drawer-price del { opacity: .55; font-weight: 400; margin-inline-end: 6px; }
.ofreels-drawer-price ins { text-decoration: none; }
button.ofreels-drawer-close { width: 36px; height: 36px; border-radius: 50%; background: #f2f3f5; color: #111; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ofreels-drawer svg { width: 18px; height: 18px; }
.ofreels-opt-group,
.ofreels-qty-row { margin-bottom: 14px; }
.ofreels-opt-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #555; margin-bottom: 8px; }
.ofreels-opt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
button.ofreels-chip {
	padding: 9px 14px;
	border: 1.5px solid #d8dbe0;
	border-radius: var(--ofreels-radius);
	background: #fff;
	color: #111;
	font-size: 13px;
	font-weight: 600;
	transition: all .12s ease;
}
button.ofreels-chip:hover { border-color: #111; }
button.ofreels-chip[aria-pressed="true"] { border-color: var(--ofreels-primary); background: var(--ofreels-primary); color: #fff; }
.ofreels-qty { display: inline-flex; align-items: center; border: 1.5px solid #d8dbe0; border-radius: var(--ofreels-radius); overflow: hidden; }
button.ofreels-qty-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #111; }
button.ofreels-qty-btn:hover { background: #f2f3f5; }
input.ofreels-qty-input { width: 48px; height: 40px; border: 0; text-align: center; font-size: 15px; font-weight: 700; background: transparent; color: #111; padding: 0; margin: 0; box-shadow: none; -moz-appearance: textfield; }
input.ofreels-qty-input::-webkit-outer-spin-button,
input.ofreels-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ofreels-drawer-msg { min-height: 18px; margin-bottom: 10px; color: #c0392b; font-size: 13px; }
.ofreels-drawer-actions { display: flex; gap: 10px; }
.ofreels-drawer-actions > * { flex: 1 1 0; }

button.ofreels-btn-primary,
a.ofreels-btn-primary,
button.ofreels-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 16px;
	border-radius: var(--ofreels-radius);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: transform .1s ease, opacity .15s ease;
	box-sizing: border-box;
	border: 2px solid var(--ofreels-primary);
}
button.ofreels-btn-primary,
a.ofreels-btn-primary { background: var(--ofreels-primary); color: #fff; }
button.ofreels-btn-secondary { background: #fff; color: var(--ofreels-primary); }
button.ofreels-btn-primary:active,
button.ofreels-btn-secondary:active { transform: scale(.97); }
button.ofreels-btn-primary:disabled,
button.ofreels-btn-secondary:disabled { opacity: .45; cursor: not-allowed; }
.ofreels-drawer.is-busy { opacity: .85; pointer-events: none; }
.ofreels-btn-primary svg { width: 18px; height: 18px; }

/* Toast */
.ofreels-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 999999;
	background: #111;
	color: #fff;
	padding: 12px 18px;
	border-radius: 999px;
	font-size: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	display: flex;
	gap: 12px;
	align-items: center;
	animation: ofreels-up .2s ease;
}
.ofreels-toast a { color: #ffd166; font-weight: 700; text-decoration: underline; }

/* Product page section */
.ofreels-product-section { margin: 32px 0; clear: both; }
.ofreels-archive-section { margin: 0 0 32px; clear: both; }

@keyframes ofreels-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ofreels-up { from { transform: translateY( 24px ); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.ofreels-viewer, .ofreels-story, .ofreels-drawer, .ofreels-drawer-wrap, .ofreels-toast { animation: none; }
	button.ofreels-card, .ofreels-ring { transition: none; }
}


/* ======================================================================
 * v1.1 – polish
 * ==================================================================== */

/* Badges */
.ofreels-card-badges {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.ofreels-badge {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--ofreels-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: .02em;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.ofreels-badge.is-warn { background: #fff; color: #b42318; }
.ofreels-badge.is-timer { background: #111; color: #fff; font-variant-numeric: tabular-nums; }
.ofreels-drawer-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Hover preview */
.ofreels-card-media .ofreels-preview { opacity: 0; transition: opacity .25s ease; }
.ofreels-card-media .ofreels-preview.is-on { opacity: 1; }

/* Player: backdrop, spinner, landscape videos */
.ofreels-backdrop {
	position: absolute;
	inset: -30px;
	background-size: cover;
	background-position: center;
	filter: blur(28px) brightness(.55);
	transform: scale(1.1);
}
.ofreels-slide.is-landscape .ofreels-video { object-fit: contain; }
.ofreels-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42px;
	height: 42px;
	margin: -21px 0 0 -21px;
	border: 3px solid rgba(255, 255, 255, .3);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}
.ofreels-slide.is-loading .ofreels-spinner { opacity: 1; animation: ofreels-spin .8s linear infinite; }

/* Double-tap heart */
.ofreels-burst {
	position: absolute;
	z-index: 6;
	width: 96px;
	height: 96px;
	margin: -48px 0 0 -48px;
	pointer-events: none;
	animation: ofreels-burst .8s ease forwards;
}
.ofreels-burst svg { width: 100%; height: 100%; fill: var(--ofreels-primary); stroke: var(--ofreels-primary); filter: drop-shadow( 0 4px 14px rgba(0, 0, 0, .4) ); }

/* Glass product card + CTA pulse */
button.ofreels-pcard {
	background: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(16px) saturate(1.6);
	backdrop-filter: blur(16px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, .5);
}
.ofreels-pcard-cta { position: relative; }
.ofreels-pcard-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 var(--ofreels-primary);
	animation: ofreels-pulse 2.2s ease-out infinite;
	pointer-events: none;
}

/* Order sheet extras */
.ofreels-drawer { position: relative; }
button.ofreels-btn-wa {
	width: 100%;
	margin-top: 10px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--ofreels-radius);
	background: #25d366;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	box-sizing: border-box;
}
button.ofreels-btn-wa:disabled { opacity: .45; cursor: not-allowed; }
.ofreels-btn-wa svg { width: 18px; height: 18px; }
.ofreels-drawer-alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
a.ofreels-btn-alt {
	flex: 1 1 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 14px;
	border: 1px solid currentColor;
	border-radius: var(--ofreels-radius);
	background: transparent;
	color: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	box-sizing: border-box;
}
a.ofreels-btn-alt:hover, a.ofreels-btn-alt:focus-visible { background: rgba(0, 0, 0, .06); }
.ofreels-theme-dark a.ofreels-btn-alt:hover, .ofreels-theme-dark a.ofreels-btn-alt:focus-visible { background: rgba(255, 255, 255, .1); }
.ofreels-btn-alt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ofreels-trust { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: #555; }
.ofreels-success {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .96);
	border-radius: inherit;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 5;
}
.ofreels-drawer.is-success .ofreels-success { display: flex; }
.ofreels-success span {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: #16a34a;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: ofreels-pop .35s cubic-bezier(.2, 1.4, .4, 1);
}
.ofreels-success svg { width: 44px; height: 44px; stroke-width: 3; }

/* Dark sheet */
.ofreels-theme-dark .ofreels-drawer { background: #17171b; color: #f5f5f7; }
.ofreels-theme-dark .ofreels-drawer-name { color: #fff; }
.ofreels-theme-dark .ofreels-opt-label,
.ofreels-theme-dark .ofreels-trust { color: #a1a1aa; }
.ofreels-theme-dark button.ofreels-drawer-close { background: #26262c; color: #fff; }
.ofreels-theme-dark button.ofreels-chip { background: #1f1f25; border-color: #35353d; color: #f5f5f7; }
.ofreels-theme-dark button.ofreels-chip:hover { border-color: #fff; }
.ofreels-theme-dark .ofreels-qty { border-color: #35353d; }
.ofreels-theme-dark button.ofreels-qty-btn,
.ofreels-theme-dark input.ofreels-qty-input { color: #fff; }
.ofreels-theme-dark button.ofreels-qty-btn:hover { background: #26262c; }
.ofreels-theme-dark button.ofreels-btn-secondary { background: transparent; }
.ofreels-theme-dark .ofreels-success { background: rgba(23, 23, 27, .96); }
.ofreels-theme-dark .ofreels-drawer-msg { color: #ff8a80; }

/* Floating player */
.ofreels-float {
	position: fixed;
	bottom: 20px;
	z-index: 99990;
	width: 104px;
	aspect-ratio: 9 / 16;
	border-radius: 16px;
	background: #000;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
	overflow: hidden;
	animation: ofreels-up .35s ease;
}
.ofreels-float[hidden] { display: none; }
.ofreels-float.is-right { inset-inline-end: 16px; }
.ofreels-float.is-left { inset-inline-start: 16px; }
button.ofreels-float-open { position: absolute; inset: 0; width: 100%; height: 100%; }
.ofreels-float video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ofreels-float-play {
	position: absolute;
	bottom: 8px;
	inset-inline-start: 8px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ofreels-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ofreels-float-play svg { width: 12px; height: 12px; fill: #fff; stroke: none; margin-inline-start: 1px; }
button.ofreels-float-close {
	position: absolute;
	top: 6px;
	inset-inline-end: 6px;
	z-index: 2;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
button.ofreels-float-close svg { width: 12px; height: 12px; }
@media (max-width: 600px) { .ofreels-float { width: 84px; bottom: 76px; } }

@keyframes ofreels-spin { to { transform: rotate( 360deg ); } }
@keyframes ofreels-burst {
	0% { transform: scale(.3); opacity: 0; }
	25% { transform: scale(1.15); opacity: 1; }
	60% { transform: scale(1); opacity: 1; }
	100% { transform: scale(1.1) translateY( -30px ); opacity: 0; }
}
@keyframes ofreels-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 59, 92, .55); }
	70%, 100% { box-shadow: 0 0 0 12px rgba(255, 59, 92, 0); }
}
@keyframes ofreels-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.ofreels-pcard-cta::after, .ofreels-slide.is-loading .ofreels-spinner, .ofreels-burst, .ofreels-float, .ofreels-success span { animation: none; }
}

/* ---------- Order channels: WhatsApp, Messenger and Call in one compact row ---------- */
.ofreels-channels { margin-top: 14px; }
.ofreels-channels-label { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.ofreels-channels-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
button.ofreels-btn-wa.ofreels-channel,
a.ofreels-btn-alt.ofreels-channel {
	width: auto;
	margin: 0;
	flex: none;
	padding: 11px 8px;
	gap: 6px;
	font-size: 13px;
	line-height: 1.2;
	justify-content: center;
}
a.ofreels-btn-alt.ofreels-channel { border: 1.5px solid rgba(0, 0, 0, .18); }
.ofreels-theme-dark a.ofreels-btn-alt.ofreels-channel { border-color: rgba(255, 255, 255, .28); }
.ofreels-channel svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------- Design style: Tag ---------- */
/* Story rings */
.ofreels-style-tag .ofreels-ring {
	background: conic-gradient(from 0deg, var(--ofreels-primary), #ffb627, #1f9d8b, var(--ofreels-primary));
	animation: ofreels-ring-turn 7s linear infinite;
	box-shadow: 0 6px 16px -8px var(--ofreels-primary);
}
.ofreels-style-tag .ofreels-avatar {
	animation: ofreels-ring-turn 7s linear infinite reverse;
	background: radial-gradient(circle at 30% 25%, #fff, #f6f1ea);
	color: var(--ofreels-primary);
}
.ofreels-style-tag .ofreels-story-chip.is-seen .ofreels-ring { background: #cfd3d8; animation: none; box-shadow: none; }
.ofreels-style-tag .ofreels-story-chip.is-seen .ofreels-avatar { animation: none; }
.ofreels-style-tag .ofreels-chip-name { font-weight: 600; letter-spacing: .01em; }
@keyframes ofreels-ring-turn { to { transform: rotate(360deg); } }

/* Cards */
.ofreels-style-tag button.ofreels-card {
	border-radius: 22px;
	box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.ofreels-style-tag .ofreels-card-play { width: 34px; height: 34px; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.ofreels-style-tag .ofreels-card-info { padding: 14px 12px; gap: 8px; background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); }
.ofreels-style-tag .ofreels-card-title { font-size: 14.5px; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.ofreels-style-tag .ofreels-card-price {
	position: relative;
	align-self: flex-start;
	width: max-content;
	max-width: 100%;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 7px;
	padding: 5px 14px 5px 22px;
	background: #fff4e0;
	color: #10302b;
	font-size: 13.5px;
	font-weight: 800;
	opacity: 1;
	clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
.ofreels-style-tag .ofreels-card-price::before { content: ""; position: absolute; inset-inline-start: 9px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #10302b; opacity: .5; }
.ofreels-style-tag .ofreels-card-price del { margin: 0; font-size: 11.5px; font-weight: 500; opacity: .55; }
.ofreels-style-tag .ofreels-badge { font-weight: 800; letter-spacing: .02em; }

/* Player: store name and logo */
.ofreels-brand {
	position: absolute;
	top: 14px;
	inset-inline-start: 14px;
	z-index: 5;
	max-width: calc(100% - 84px);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px 5px 5px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .4);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}
.ofreels-brand img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #fff; flex: 0 0 auto; }
.ofreels-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ofreels-brand:not(:has(img)) { padding-inline-start: 12px; }

/* Player: ticket-style product card */
.ofreels-style-tag { --ofreels-cta-w: 92px; }
.ofreels-style-tag button.ofreels-pcard {
	position: relative;
	gap: 12px;
	padding: 10px;
	background: #fff4e0;
	border-radius: 20px;
	box-shadow: none;
	filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45));
	-webkit-mask: radial-gradient(circle 9px at calc(100% - var(--ofreels-cta-w) - 17px) 0, transparent 98%, #000) top / 100% 51% no-repeat,
	              radial-gradient(circle 9px at calc(100% - var(--ofreels-cta-w) - 17px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
	        mask: radial-gradient(circle 9px at calc(100% - var(--ofreels-cta-w) - 17px) 0, transparent 98%, #000) top / 100% 51% no-repeat,
	              radial-gradient(circle 9px at calc(100% - var(--ofreels-cta-w) - 17px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.ofreels-style-tag button.ofreels-pcard::after {
	content: "";
	position: absolute;
	top: 16px;
	bottom: 16px;
	inset-inline-end: calc(var(--ofreels-cta-w) + 17px);
	border-inline-start: 2px dashed rgba(16, 48, 43, .28);
}
.ofreels-style-tag button.ofreels-pcard img { width: 60px; height: 60px; border-radius: 14px; }
.ofreels-style-tag .ofreels-pcard-name { font-size: 14px; font-weight: 700; color: #10302b; }
.ofreels-style-tag .ofreels-pcard-price { font-size: 17px; font-weight: 800; color: var(--ofreels-primary); }
.ofreels-style-tag .ofreels-pcard-price del { font-size: 12px; font-weight: 500; color: #7b8a86; }
.ofreels-style-tag .ofreels-pcard-price ins { color: var(--ofreels-primary); }
.ofreels-style-tag .ofreels-pcard-cta {
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: var(--ofreels-cta-w);
	padding: 10px 6px;
	border-radius: 16px;
	background: #10302b;
	color: #fff4e0;
	font-size: 12px;
	line-height: 1.15;
	text-align: center;
	animation: none;
	box-shadow: none;
}
.ofreels-style-tag .ofreels-pcard-cta svg { width: 20px; height: 20px; stroke: #ffb627; }

@media (prefers-reduced-motion: reduce) {
	.ofreels-style-tag .ofreels-ring, .ofreels-style-tag .ofreels-avatar { animation: none; }
}

/* ---------- Accessibility ---------- */
.ofreels-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Brand colour, a little deeper wherever it carries text, so it stays readable (WCAG AA). */
.ofreels-badge,
.ofreels-pcard-cta,
button.ofreels-btn-primary,
a.ofreels-btn-primary,
.ofreels-btn-primary { background: var(--ofreels-primary); background: color-mix(in srgb, var(--ofreels-primary) 78%, #000); }
button.ofreels-btn-secondary,
.ofreels-btn-secondary { color: var(--ofreels-primary); color: color-mix(in srgb, var(--ofreels-primary) 78%, #000); border-color: currentColor; }
.ofreels-badge.is-warn { background: #fff; }
.ofreels-pcard-price del { color: #6b6b6b; opacity: 1; }
.ofreels-style-tag .ofreels-pcard-price,
.ofreels-style-tag .ofreels-pcard-price ins { color: var(--ofreels-primary); color: color-mix(in srgb, var(--ofreels-primary) 78%, #000); }
.ofreels-style-tag .ofreels-pcard-price del { color: #5a6a66; opacity: 1; }
button.ofreels-btn-wa { background: #0f7a3c; }
button.ofreels-btn-wa.ofreels-channel { background: #0f7a3c; border-color: #0f7a3c; }
.ofreels-drawer-price del, .ofreels-drawer-price del * { color: #6b6b6b; opacity: 1; }