/* AMR Group Reels — front styles. */

.amr-reels {
	--amr-accent: #FF3366;
	max-width: 1100px;
	margin: 0 auto;
	direction: rtl;
	font-family: Vazirmatn, "IRANSans", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* ---- Grid ---- */
.amr-reels-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
}

.amr-reels-tile {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	padding: 0;
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	background: #000;
}

.amr-reels-thumb {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #2b2b2b, #000);
}

.amr-reels-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.amr-reels-play {
	position: relative;
	z-index: 1;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 0 13px 21px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.amr-reels-cap {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	padding: 10px 12px;
	color: #fff;
	font-size: 13px;
	text-align: start;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.amr-reels-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
	box-shadow: inset 0 0 0 2px transparent;
	transition: box-shadow 0.15s ease;
	pointer-events: none;
}

.amr-reels-tile:hover::after,
.amr-reels-tile:focus-visible::after {
	box-shadow: inset 0 0 0 2px var(--amr-accent);
}

/* The fullscreen shortcode hides its (data-only) grid; the modal fills the viewport. */
.amr-reels-fs .amr-reels-grid {
	display: none;
}

/* ---- Fullscreen vertical feed ---- */
.amr-reels-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	background: #000;
}

.amr-reels-modal.is-open {
	display: block;
}

.amr-reels-feed {
	position: relative;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior: contain;
}

.amr-reels-feed::-webkit-scrollbar {
	display: none;
}

.amr-reels-slide {
	position: relative;
	width: 100%;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Cover, player, and overlays all share one fixed-size stage box. */
.amr-reels-stage {
	position: relative;
	height: 100%;
	aspect-ratio: 9 / 16;
	max-width: 100vw;
	margin: auto;
	background: #000;
	overflow: hidden;
}

/* Skeleton shimmer shown until the cover image or player paints over it. */
.amr-reels-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient( 100deg, #15151a 30%, #25252c 50%, #15151a 70% );
	background-size: 200% 100%;
	animation: amr-skeleton 1.3s ease-in-out infinite;
}

.amr-reels-slide.is-playing .amr-reels-stage::before {
	display: none;
}

@keyframes amr-skeleton {
	0% { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.amr-reels-stage::before {
		animation: none;
	}
}

.amr-reels-slide-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.amr-reels-slide-player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.amr-reels-frame,
.amr-reels-video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

/* Transparent layer to capture taps over the (click-swallowing) iframe. */
.amr-reels-tap {
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: pointer;
}

/* ---- Caption (bottom, beside the action rail) ---- */
.amr-reels-slide-cap {
	position: absolute;
	left: 14px;
	right: 78px;
	bottom: 18px;
	z-index: 3;
	color: #fff;
	font-size: 14px;
	line-height: 1.8;
	text-align: start;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
	pointer-events: none;
}

.amr-reels-hashtag {
	color: #8fc0ff;
	text-decoration: none;
	pointer-events: auto;
}

/* ---- Action rail (right side, attached to the video) ---- */
.amr-reels-actions {
	position: absolute;
	right: 8px;
	bottom: 18px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.amr-reels-actions button {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

.amr-reels-actions svg {
	width: 30px;
	height: 30px;
}

.amr-reels-like-count {
	font-size: 12px;
}

.amr-reels-like.is-liked {
	color: var(--amr-accent);
}

.amr-reels-like.is-liked svg {
	fill: var(--amr-accent);
	stroke: var(--amr-accent);
}

.amr-reels-save.is-saved {
	color: var(--amr-accent);
}

.amr-reels-save.is-saved svg {
	fill: var(--amr-accent);
	stroke: var(--amr-accent);
}

.amr-reels-heart-pop {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
}

.amr-reels-heart-pop svg {
	width: 120px;
	height: 120px;
	fill: var(--amr-accent);
	stroke: var(--amr-accent);
	filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
}

.amr-reels-heart-pop.is-animating {
	animation: amr-heart-pop 0.8s ease;
}

@keyframes amr-heart-pop {
	0% { opacity: 0; transform: scale( 0.4 ); }
	25% { opacity: 1; transform: scale( 1.1 ); }
	60% { opacity: 1; transform: scale( 1 ); }
	100% { opacity: 0; transform: scale( 1.25 ); }
}

.amr-reels-share-panel {
	position: absolute;
	right: 8px;
	bottom: 96px;
	z-index: 5;
	min-width: 132px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: rgba(20, 20, 20, 0.96);
	border-radius: 12px;
}

.amr-reels-share-item {
	display: block;
	background: transparent;
	border: 0;
	color: #fff;
	text-align: start;
	padding: 8px 10px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 13px;
	text-decoration: none;
}

.amr-reels-share-item:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* ---- Top controls ---- */
.amr-reels-close,
.amr-reels-mute {
	position: fixed;
	top: 16px;
	z-index: 100000;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.amr-reels-close {
	inset-inline-end: 16px;
	font-size: 28px;
}

.amr-reels-mute {
	inset-inline-end: 70px;
}

.amr-reels-close:hover,
.amr-reels-mute:hover {
	background: var(--amr-accent);
}

/* ---- WooCommerce product card ---- */
.amr-reels-product {
	position: absolute;
	left: 14px;
	right: 78px;
	bottom: 14px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 12px;
}

.amr-reels-stage.has-product .amr-reels-slide-cap {
	bottom: 86px;
	-webkit-line-clamp: 2;
}

.amr-reels-product-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	color: #fff;
	text-decoration: none;
	border: 0;
	background: transparent;
	text-align: start;
	cursor: pointer;
	font: inherit;
	padding: 0;
}

.amr-reels-product-title {
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.amr-reels-product-info:hover .amr-reels-product-title {
	text-decoration: underline;
}

.amr-reels-product-price {
	font-size: 12px;
	opacity: 0.9;
}

.amr-reels-add-cart {
	flex-shrink: 0;
	border: 0;
	border-radius: 8px;
	padding: 8px 12px;
	background: var(--amr-accent);
	color: #fff;
	font-size: 12px;
	cursor: pointer;
}

.amr-reels-add-cart[disabled] {
	opacity: 0.7;
}

/* ---- Playback progress bar (Instagram-style, bottom edge) ---- */
.amr-reels-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	height: 3px;
	background: rgba(255, 255, 255, 0.22);
	pointer-events: none;
}

.amr-reels-progress-bar {
	height: 100%;
	width: 0;
	background: var(--amr-accent);
	transition: width 0.2s linear;
}

.amr-reels-slide.is-embed .amr-reels-progress {
	display: none;
}

/* ---- Product filter bar (shown while viewing one product's reels) ---- */
.amr-reels-filterbar {
	position: fixed;
	top: 16px;
	inset-inline-start: 16px;
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 62vw;
	padding: 7px 10px 7px 14px;
	background: rgba(20, 20, 20, 0.92);
	border-radius: 22px;
	color: #fff;
}

.amr-reels-filterbar-label {
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.amr-reels-filterbar-clear {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.amr-reels-filterbar-clear:hover {
	background: var(--amr-accent);
}

/* ---- Guest gate ---- */
.amr-reels-gate {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.amr-reels-gate-box {
	max-width: 360px;
	padding: 28px 24px;
	text-align: center;
	color: #fff;
	background: #16181c;
	border-radius: 16px;
}

.amr-reels-gate-box h2 {
	margin: 0 0 10px;
	font-size: 18px;
}

.amr-reels-gate-box p {
	margin: 0 0 20px;
	color: #c3c4c7;
	font-size: 14px;
	line-height: 1.9;
}

.amr-reels-gate-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.amr-reels-gate-login,
.amr-reels-gate-register {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 10px;
	font-size: 14px;
	text-decoration: none;
}

.amr-reels-gate-login {
	background: var(--amr-accent);
	color: #fff;
}

.amr-reels-gate-register {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.amr-reels-noscroll {
	overflow: hidden;
}

.amr-reels-empty {
	padding: 24px;
	text-align: center;
	color: #666;
}

/* ---- Action-rail polish (premium feel) ---- */
.amr-reels-actions {
	gap: 21px;
}

.amr-reels-actions button {
	transition: transform 0.14s ease;
}

.amr-reels-actions button:active {
	transform: scale( 0.88 );
}

.amr-reels-actions svg {
	width: 29px;
	height: 29px;
	filter: drop-shadow( 0 1px 4px rgba( 0, 0, 0, 0.55 ) );
}

.amr-reels-act-count,
.amr-reels-like-count {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

/* ---- Instant fullscreen boot cover (prevents the page flash) ---- */
.amr-reels-boot {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: #000;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.amr-reels-boot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.28 );
}

.amr-reels-boot-spin {
	position: relative;
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 3px solid rgba( 255, 255, 255, 0.25 );
	border-top-color: #fff;
	animation: amr-reels-spin 0.8s linear infinite;
}

@keyframes amr-reels-spin {
	to { transform: rotate( 360deg ); }
}

/* ---- Mobile/tablet-only display gate ---- */
.amr-reels-desktop-gate {
	display: none;
}

@media ( min-width: 1025px ) {
	.amr-reels-mobile-only .amr-reels-grid,
	.amr-reels-mobile-only .amr-reels-modal {
		display: none !important;
	}

	.amr-reels-mobile-only .amr-reels-desktop-gate {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 320px;
		padding: 48px 24px;
		background: linear-gradient( 160deg, #1d1d22, #0c0c0e );
		border-radius: 18px;
	}
}

.amr-reels-desktop-gate-box {
	max-width: 360px;
	text-align: center;
	color: #fff;
}

.amr-reels-desktop-gate-icon svg {
	width: 56px;
	height: 56px;
	color: var(--amr-accent);
	margin-bottom: 14px;
}

.amr-reels-desktop-gate-box p {
	font-size: 16px;
	line-height: 2;
	margin: 0;
	color: rgba( 255, 255, 255, 0.92 );
}

/* The fullscreen variant hides its own close button (it never closes). */
.amr-reels-fs .amr-reels-close {
	display: none;
}

/* ============================================================
   Elegance pass — legibility scrim, crisp controls, richer card
   ============================================================ */

/* Soft top+bottom gradient so the white caption, action counts and product
   card stay legible over bright footage. Sits above the player, below the
   interactive overlays (tap z-index 2, caption/actions/product z-index 3). */
.amr-reels-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient( to top, rgba( 0, 0, 0, 0.64 ) 0%, rgba( 0, 0, 0, 0.16 ) 26%, transparent 46% ),
		linear-gradient( to bottom, rgba( 0, 0, 0, 0.3 ) 0%, transparent 18% );
}

/* Tidy multi-line caption. */
.amr-reels-slide-cap {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 500;
}

/* Crisp SVG glyphs for the top controls (replaces the old emoji/entity). */
.amr-reels-close,
.amr-reels-mute {
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
}

.amr-reels-close svg,
.amr-reels-mute svg {
	width: 22px;
	height: 22px;
}

/* Product card: glassy backdrop + wrap room for the post-add cart link. */
.amr-reels-product {
	flex-wrap: wrap;
	row-gap: 8px;
	background: rgba( 0, 0, 0, 0.46 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
	border: 1px solid rgba( 255, 255, 255, 0.1 );
}

/* Small "all reels of this product" affordance (the product filter). */
.amr-reels-product-more {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: rgba( 255, 255, 255, 0.14 );
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}

.amr-reels-product-more:hover {
	background: rgba( 255, 255, 255, 0.26 );
}

.amr-reels-product-more svg {
	width: 18px;
	height: 18px;
}

.amr-reels-add-cart {
	transition: transform 0.14s ease, background 0.15s ease;
	font-weight: 600;
}

.amr-reels-add-cart:not(.is-oos):active {
	transform: scale( 0.94 );
}

/* Out-of-stock: muted, non-interactive label instead of a dead add button. */
.amr-reels-add-cart.is-oos {
	background: rgba( 255, 255, 255, 0.16 );
	color: rgba( 255, 255, 255, 0.85 );
	cursor: default;
}

/* Success state + clear path to the cart. */
.amr-reels-add-cart.is-added {
	background: #1f8a4c;
}

.amr-reels-view-cart {
	flex-shrink: 0;
	border-radius: 8px;
	padding: 8px 12px;
	background: rgba( 255, 255, 255, 0.18 );
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.amr-reels-view-cart:hover {
	background: rgba( 255, 255, 255, 0.3 );
}

/* ============================================================
   Premium pass v2 — first impression, feel, and the buy moment
   (append order matters: reduced-motion guard is the LAST block)
   ============================================================ */

/* ---- Hashtag pill chips (reads instantly as a social feed) ---- */
.amr-reels-hashtag {
	display: inline-block;
	padding: 1px 8px;
	margin: 0 1px;
	border-radius: 999px;
	color: #fff;
	font-weight: 600;
	font-size: 0.92em;
	background: rgba( 255, 51, 102, 0.22 );
	border: 1px solid rgba( 255, 51, 102, 0.45 );
	backdrop-filter: blur( 2px );
	-webkit-backdrop-filter: blur( 2px );
	text-shadow: none;
	transition: background 0.15s ease;
}

.amr-reels-hashtag:hover {
	background: var( --amr-accent );
}

/* ---- Caption: stronger legibility + soft fade-mask ---- */
.amr-reels-slide-cap {
	line-height: 1.7;
	letter-spacing: 0.005em;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.6 ), 0 2px 10px rgba( 0, 0, 0, 0.55 );
	-webkit-mask-image: linear-gradient( to bottom, #000 70%, transparent 100% );
	mask-image: linear-gradient( to bottom, #000 70%, transparent 100% );
}

/* ---- Grid: glassy circular play badge ---- */
.amr-reels-play {
	position: relative;
	z-index: 1;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.32 );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.45 ), inset 0 0 0 1.5px rgba( 255, 255, 255, 0.85 );
	filter: none;
	transition: transform 0.18s ease, background 0.18s ease;
}

.amr-reels-play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -42%, -50% );
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #fff;
}

.amr-reels-tile:hover .amr-reels-play {
	transform: scale( 1.08 );
	background: var( --amr-accent );
}

/* ---- Grid: tactile lift, press, cover zoom, glowing ring ---- */
.amr-reels-tile {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	will-change: transform;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.18 );
}

.amr-reels-tile:hover,
.amr-reels-tile:focus-visible {
	transform: translateY( -4px );
	box-shadow: 0 10px 26px rgba( 0, 0, 0, 0.34 );
}

.amr-reels-tile:active {
	transform: translateY( -1px ) scale( 0.985 );
	transition-duration: 0.09s;
}

.amr-reels-tile:hover::after,
.amr-reels-tile:focus-visible::after {
	box-shadow: inset 0 0 0 2px var( --amr-accent ), 0 0 0 1px rgba( 255, 51, 102, 0.35 );
}

.amr-reels-cover {
	transition: transform 0.45s ease;
}

.amr-reels-tile:hover .amr-reels-cover {
	transform: scale( 1.06 );
}

/* ---- Tile -> fullscreen open animation ---- */
.amr-reels-modal.is-open .amr-reels-feed {
	animation: amr-reels-open 0.34s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.amr-reels-modal.is-open {
	animation: amr-reels-fade-in 0.2s ease;
}

@keyframes amr-reels-open {
	from { transform: scale( 0.92 ) translateY( 14px ); opacity: 0; }
	to { transform: scale( 1 ) translateY( 0 ); opacity: 1; }
}

@keyframes amr-reels-fade-in {
	from { background-color: rgba( 0, 0, 0, 0 ); }
	to { background-color: #000; }
}

/* ---- Calmer skeleton shimmer ---- */
.amr-reels-stage::before {
	background:
		radial-gradient( 120% 80% at 50% 0%, rgba( 255, 255, 255, 0.04 ), transparent 60% ),
		linear-gradient( 100deg, #131318 28%, #20202a 50%, #131318 72% );
	background-size: 100% 100%, 200% 100%;
	animation: amr-skeleton 1.6s ease-in-out infinite;
}

/* ---- Dual-ring boot spinner ---- */
.amr-reels-boot-spin {
	position: relative;
	z-index: 2;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: conic-gradient( from 0deg, rgba( 255, 255, 255, 0 ) 0deg, var( --amr-accent ) 300deg, rgba( 255, 255, 255, 0 ) 360deg );
	-webkit-mask: radial-gradient( farthest-side, transparent calc( 100% - 3.5px ), #000 calc( 100% - 3.5px ) );
	mask: radial-gradient( farthest-side, transparent calc( 100% - 3.5px ), #000 calc( 100% - 3.5px ) );
	animation: amr-reels-spin 0.85s linear infinite;
}

/* ---- Action rail v2: bigger tap targets, dual shadow, spring press ---- */
.amr-reels-actions {
	gap: 22px;
	bottom: 22px;
}

.amr-reels-actions button {
	position: relative;
	gap: 5px;
	min-width: 44px;
	line-height: 1;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.16s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.amr-reels-actions svg {
	width: 30px;
	height: 30px;
	filter: drop-shadow( 0 1px 1.5px rgba( 0, 0, 0, 0.55 ) ) drop-shadow( 0 2px 8px rgba( 0, 0, 0, 0.35 ) );
}

.amr-reels-actions button:active {
	transform: scale( 0.86 );
}

/* ---- Like: spring bounce + accent burst ring ---- */
.amr-reels-like svg {
	transition: transform 0.18s cubic-bezier( 0.34, 1.8, 0.5, 1 ), fill 0.18s ease, stroke 0.18s ease;
}

.amr-reels-like.is-bursting svg {
	animation: amr-like-bounce 0.42s cubic-bezier( 0.34, 1.7, 0.5, 1 );
}

.amr-reels-like::before {
	content: "";
	position: absolute;
	top: 14px;
	left: 50%;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border-radius: 50%;
	background: radial-gradient( circle, var( --amr-accent ) 0%, rgba( 255, 51, 102, 0 ) 68% );
	opacity: 0;
	transform: scale( 0.2 );
	pointer-events: none;
}

.amr-reels-like.is-bursting::before {
	animation: amr-like-burst 0.5s ease-out;
}

@keyframes amr-like-bounce {
	0% { transform: scale( 1 ); }
	35% { transform: scale( 1.32 ); }
	70% { transform: scale( 0.92 ); }
	100% { transform: scale( 1 ); }
}

@keyframes amr-like-burst {
	0% { opacity: 0.55; transform: scale( 0.2 ); }
	60% { opacity: 0.32; }
	100% { opacity: 0; transform: scale( 2.4 ); }
}

/* ---- Double-tap heart-pop (refined) ---- */
.amr-reels-heart-pop svg {
	width: 110px;
	height: 110px;
	filter: drop-shadow( 0 6px 22px rgba( 255, 51, 102, 0.45 ) ) drop-shadow( 0 2px 10px rgba( 0, 0, 0, 0.4 ) );
}

.amr-reels-heart-pop.is-animating {
	animation: amr-heart-pop 0.7s cubic-bezier( 0.2, 0.9, 0.3, 1.2 );
}

@keyframes amr-heart-pop {
	0% { opacity: 0; transform: scale( 0.3 ) rotate( -12deg ); }
	15% { opacity: 1; transform: scale( 1.18 ) rotate( 6deg ); }
	30% { transform: scale( 0.96 ) rotate( -2deg ); }
	45% { opacity: 1; transform: scale( 1.04 ) rotate( 0deg ); }
	100% { opacity: 0; transform: scale( 1.3 ) translateY( -12px ) rotate( 0deg ); }
}

/* ---- Save: bounce on bookmark ---- */
.amr-reels-save svg {
	transition: transform 0.18s cubic-bezier( 0.34, 1.8, 0.5, 1 ), fill 0.18s ease, stroke 0.18s ease;
}

.amr-reels-save.is-bouncing svg {
	animation: amr-save-bounce 0.46s cubic-bezier( 0.34, 1.7, 0.5, 1 );
}

@keyframes amr-save-bounce {
	0% { transform: translateY( 0 ) scale( 1 ); }
	30% { transform: translateY( -4px ) scale( 1.18 ); }
	60% { transform: translateY( 0 ) scale( 0.94 ); }
	100% { transform: translateY( 0 ) scale( 1 ); }
}

/* ---- Count typography (no width jitter) ---- */
.amr-reels-like-count,
.amr-reels-act-count {
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: 0.01em;
	line-height: 1.2;
	color: rgba( 255, 255, 255, 0.95 );
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.6 );
}

/* ---- Product card: glass + price-as-hero ---- */
.amr-reels-product {
	padding: 9px 11px;
	border-radius: 16px;
	background: linear-gradient( 145deg, rgba( 30, 30, 36, 0.62 ), rgba( 10, 10, 14, 0.5 ) );
	box-shadow: 0 6px 22px rgba( 0, 0, 0, 0.4 ), inset 0 1px 0 rgba( 255, 255, 255, 0.12 );
	border: 1px solid rgba( 255, 255, 255, 0.14 );
}

.amr-reels-product-price {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	opacity: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

.amr-reels-product-title {
	font-size: 12px;
	opacity: 0.82;
}

/* ---- Add to cart: idle polish + state machine ---- */
.amr-reels-add-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 34px;
	padding: 8px 14px;
	border-radius: 10px;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba( 255, 51, 102, 0.34 );
	transition: transform 0.14s ease, background 0.18s ease, box-shadow 0.18s ease, width 0.18s ease;
}

.amr-reels-add-cart:not(.is-oos):not([disabled]):hover {
	background: color-mix( in srgb, var( --amr-accent ) 88%, #fff );
	box-shadow: 0 6px 18px rgba( 255, 51, 102, 0.45 );
}

.amr-reels-cart-ico {
	width: 15px;
	height: 15px;
}

.amr-reels-cart-spin {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2px solid rgba( 255, 255, 255, 0.45 );
	border-top-color: #fff;
	animation: amr-reels-spin 0.7s linear infinite;
}

.amr-reels-add-cart.is-loading {
	background: var( --amr-accent );
	opacity: 0.92;
	cursor: default;
}

.amr-reels-cart-check {
	width: 16px;
	height: 16px;
	animation: amr-reels-check-pop 0.35s ease;
}

@keyframes amr-reels-check-pop {
	0% { transform: scale( 0.4 ); opacity: 0; }
	60% { transform: scale( 1.15 ); opacity: 1; }
	100% { transform: scale( 1 ); }
}

.amr-reels-add-cart.is-error {
	background: #c0392b;
}

.amr-reels-add-cart.is-added {
	background: #1f8a4c;
	box-shadow: 0 4px 14px rgba( 31, 138, 76, 0.4 );
	cursor: default;
}

.amr-reels-view-cart {
	animation: amr-reels-cart-in 0.28s cubic-bezier( 0.22, 1, 0.36, 1 );
}

@keyframes amr-reels-cart-in {
	from { opacity: 0; transform: translateY( 6px ); }
	to { opacity: 1; transform: translateY( 0 ); }
}

/* ---- Out-of-stock status pill ---- */
.amr-reels-add-cart.is-oos {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba( 255, 255, 255, 0.1 );
	color: rgba( 255, 255, 255, 0.72 );
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	box-shadow: none;
	font-weight: 600;
	cursor: default;
}

.amr-reels-add-cart.is-oos::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.55 );
	flex-shrink: 0;
}

/* ---- Product-more (filter) button ---- */
.amr-reels-product-more {
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: rgba( 255, 255, 255, 0.1 );
	border: 1px solid rgba( 255, 255, 255, 0.16 );
	transition: background 0.15s ease, transform 0.14s ease;
}

.amr-reels-product-more:hover {
	background: rgba( 255, 255, 255, 0.22 );
}

.amr-reels-product-more:active {
	transform: scale( 0.92 );
}

.amr-reels-product-more svg {
	width: 17px;
	height: 17px;
	opacity: 0.92;
}

/* ---- Top controls: dark glass + sound-on accent ---- */
.amr-reels-close,
.amr-reels-mute {
	width: 42px;
	height: 42px;
	background: rgba( 18, 18, 22, 0.42 );
	border: 1px solid rgba( 255, 255, 255, 0.16 );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.32 );
	backdrop-filter: blur( 12px ) saturate( 1.2 );
	-webkit-backdrop-filter: blur( 12px ) saturate( 1.2 );
	transition: background 0.16s ease, transform 0.14s ease, box-shadow 0.16s ease;
}

.amr-reels-close:hover,
.amr-reels-mute:hover {
	background: var( --amr-accent );
	box-shadow: 0 6px 18px rgba( 255, 51, 102, 0.5 );
}

.amr-reels-close:active,
.amr-reels-mute:active {
	transform: scale( 0.9 );
}

.amr-reels-mute[data-muted="0"] {
	background: rgba( 255, 51, 102, 0.9 );
}

/* ---- Progress bar: slimmer + accent glow ---- */
.amr-reels-progress {
	height: 2.5px;
	background: rgba( 255, 255, 255, 0.16 );
}

.amr-reels-progress-bar {
	background: var( --amr-accent );
	box-shadow: 0 0 6px rgba( 255, 51, 102, 0.7 );
}

/* ---- Consolidated reduced-motion guard (keep this the LAST block) ---- */
@media ( prefers-reduced-motion: reduce ) {
	.amr-reels-play,
	.amr-reels-tile,
	.amr-reels-tile:hover,
	.amr-reels-tile:focus-visible,
	.amr-reels-tile:active,
	.amr-reels-cover,
	.amr-reels-tile:hover .amr-reels-cover,
	.amr-reels-tile:hover .amr-reels-play,
	.amr-reels-hashtag,
	.amr-reels-actions button,
	.amr-reels-like svg,
	.amr-reels-save svg,
	.amr-reels-add-cart {
		transition: none;
		transform: none;
	}

	.amr-reels-modal.is-open .amr-reels-feed,
	.amr-reels-modal.is-open,
	.amr-reels-like.is-bursting svg,
	.amr-reels-like.is-bursting::before,
	.amr-reels-save.is-bouncing svg,
	.amr-reels-cart-spin,
	.amr-reels-cart-check,
	.amr-reels-view-cart {
		animation: none;
	}

	.amr-reels-boot-spin {
		animation: none;
		background: conic-gradient( from 0deg, rgba( 255, 255, 255, 0.15 ), var( --amr-accent ) );
	}

	.amr-reels-heart-pop.is-animating {
		animation: amr-heart-fade 0.5s ease;
	}
}

@keyframes amr-heart-fade {
	0% { opacity: 0; }
	20% { opacity: 1; }
	100% { opacity: 0; }
}