/* =========================================================
   SELORA EXPLORE REELS
   Immersive vertical content viewer
   ========================================================= */

:root{
	--reels-primary:#4f46e5;
	--reels-primary-hover:#4338ca;
	--reels-bg:#090a0d;
	--reels-panel:#12141a;
	--reels-text:#ffffff;
	--reels-muted:rgba(255,255,255,.68);
	--reels-soft:rgba(255,255,255,.10);
	--reels-line:rgba(255,255,255,.11);
	--reels-safe-top:max(10px,env(safe-area-inset-top,0px));
	--reels-safe-bottom:max(12px,env(safe-area-inset-bottom,0px));
}

*{
	box-sizing:border-box;
}

html,
body{
	width:100%;
	height:100%;
	margin:0;
	overscroll-behavior:none;
}

html{
	background:var(--reels-bg);
}

body.reels-body{
	overflow:hidden;
	background:
		radial-gradient(
			circle at 50% 20%,
			#171923,
			#090a0d 52%
		);
	color:var(--reels-text);
	font-family:
		IRANSansX,
		Vazirmatn,
		IRANSans,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	-webkit-tap-highlight-color:transparent;
}

button,
a{
	font:inherit;
}

button{
	-webkit-tap-highlight-color:transparent;
}

a{
	color:inherit;
	text-decoration:none;
}

svg,
img{
	display:block;
}

[hidden]{
	display:none !important;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.reels-topbar{
	position:fixed;
	top:0;
	right:0;
	left:0;
	z-index:120;
	height:calc(56px + var(--reels-safe-top));
	display:grid;
	grid-template-columns:44px 1fr 44px;
	align-items:end;
	gap:8px;
	padding:
		var(--reels-safe-top)
		max(12px,env(safe-area-inset-right,0px))
		8px
		max(12px,env(safe-area-inset-left,0px));
	pointer-events:none;
	background:
		linear-gradient(
			180deg,
			rgba(0,0,0,.42),
			rgba(0,0,0,.12) 70%,
			transparent
		);
}

.reels-topbar__button,
.reels-topbar__brand{
	pointer-events:auto;
}

.reels-topbar__button{
	width:40px;
	height:40px;
	display:grid;
	place-items:center;
	padding:0;
	border:1px solid rgba(255,255,255,.14);
	border-radius:13px;
	background:rgba(13,15,20,.32);
	color:#fff;
	cursor:pointer;
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
	transition:
		background-color .16s ease,
		transform .16s ease,
		border-color .16s ease;
}

.reels-topbar__button:hover{
	background:rgba(255,255,255,.13);
	border-color:rgba(255,255,255,.22);
}

.reels-topbar__button:active{
	transform:scale(.94);
}

.reels-topbar__button svg{
	width:20px;
	height:20px;
}

.reels-topbar__brand{
	justify-self:center;
	height:40px;
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:0 11px;
	border:1px solid rgba(255,255,255,.10);
	border-radius:13px;
	background:rgba(13,15,20,.24);
	color:#fff;
	font-size:12px;
	font-weight:800;
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
}

.reels-topbar__brand img{
	width:22px;
	height:22px;
	object-fit:contain;
}


/* =========================================================
   FEED / SNAP
   ========================================================= */

.reels-feed{
	position:relative;
	width:100%;
	height:100dvh;
	overflow-y:auto;
	overflow-x:hidden;
	scroll-snap-type:y mandatory;
	scroll-behavior:smooth;
	overscroll-behavior-y:contain;
	scrollbar-width:none;
	-webkit-overflow-scrolling:touch;
}

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

.reel-slide{
	position:relative;
	width:100%;
	height:100dvh;
	min-height:100dvh;
	scroll-snap-align:start;
	scroll-snap-stop:always;
	overflow:hidden;
	outline:none;
	background:#090a0d;
}

.reel-slide__stage{
	position:relative;
	width:100%;
	height:100%;
	margin:0 auto;
	overflow:hidden;
	background:#090a0d;
}

.reel-slide.is-active{
	z-index:2;
}


/* =========================================================
   MEDIA
   ========================================================= */

.reel-media{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
	background:#090a0d;
}

.reel-media__image-shell{
	position:absolute;
	inset:0;
	overflow:hidden;
	background:#0b0c10;
}

.reel-media__image{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
}

.reel-media__image--blur{
	object-fit:cover;
	filter:blur(34px) saturate(.82) brightness(.50);
	transform:scale(1.14);
	opacity:.78;
}

.reel-media__image--main{
	z-index:1;
	object-fit:contain;
}

.reel-media__video{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	background:#050506;
}

.reel-media__embed{
	position:absolute;
	inset:58px 0 0;
	display:grid;
	place-items:center;
	overflow:hidden;
	background:#0a0b0f;
}

.reel-media__embed--aparat iframe{
	width:100%;
	height:100%;
	border:0;
}

.reel-media__embed--instagram{
	overflow-y:auto;
	overscroll-behavior:contain;
	scrollbar-width:none;
}

.reel-media__embed--instagram::-webkit-scrollbar{
	display:none;
}

.reel-media__embed--instagram .instagram-media{
	max-width:540px !important;
	min-width:0 !important;
}

.reel-media__placeholder{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:12px;
	color:rgba(255,255,255,.48);
	font-size:12px;
}

.reel-media__placeholder svg{
	width:44px;
	height:44px;
}

.reel-media__vignette{
	position:absolute;
	z-index:4;
	inset:0;
	pointer-events:none;
	background:
		linear-gradient(
			180deg,
			rgba(0,0,0,.20) 0%,
			transparent 20%,
			transparent 51%,
			rgba(0,0,0,.15) 67%,
			rgba(0,0,0,.68) 100%
		),
		linear-gradient(
			90deg,
			transparent 0%,
			transparent 72%,
			rgba(0,0,0,.12) 100%
		);
}

.reel-media__play-state{
	position:absolute;
	z-index:8;
	top:50%;
	left:50%;
	width:70px;
	height:70px;
	display:grid;
	place-items:center;
	padding:0;
	border:0;
	border-radius:999px;
	background:rgba(10,11,15,.48);
	color:#fff;
	opacity:0;
	pointer-events:none;
	transform:translate(-50%,-50%) scale(.86);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	transition:
		opacity .16s ease,
		transform .16s ease;
}

.reel-media__play-state.is-visible{
	opacity:1;
	transform:translate(-50%,-50%) scale(1);
}

.reel-media__play-state svg{
	width:28px;
	height:28px;
}


/* =========================================================
   BOTTOM OVERLAY / CREATOR
   ========================================================= */

.reel-overlay{
	position:absolute;
	z-index:16;
	right:max(14px,env(safe-area-inset-right,0px));
	bottom:calc(var(--reels-safe-bottom) + 14px);
	left:82px;
	max-width:600px;
	pointer-events:none;
}

.reel-overlay > *{
	pointer-events:auto;
}

.reel-creator{
	display:flex;
	align-items:center;
	gap:9px;
	min-width:0;
	margin-bottom:9px;
}

.reel-creator__identity{
	min-width:0;
	display:flex;
	align-items:center;
	gap:9px;
	color:#fff;
}

.reel-creator__avatar{
	width:38px;
	height:38px;
	flex:0 0 38px;
	overflow:hidden;
	display:block;
	border:2px solid rgba(255,255,255,.9);
	border-radius:999px;
	background:rgba(255,255,255,.15);
	box-shadow:0 4px 14px rgba(0,0,0,.18);
}

.reel-creator__avatar img,
.reel-creator__avatar-placeholder{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
}

.reel-creator__avatar-placeholder{
	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,.28),
			rgba(255,255,255,.10)
		);
}

.reel-creator__copy{
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:0;
	text-shadow:0 2px 8px rgba(0,0,0,.45);
}

.reel-creator__name{
	max-width:220px;
	overflow:hidden;
	font-size:12px;
	font-weight:850;
	line-height:1.45;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.reel-creator__handle{
	color:rgba(255,255,255,.66);
	font-size:9px;
	font-weight:500;
	line-height:1.4;
	direction:ltr;
	text-align:right;
}

.reel-creator__follow{
	min-height:32px !important;
	flex:0 0 auto;
	padding:0 11px !important;
	border:1px solid rgba(255,255,255,.35) !important;
	border-radius:10px !important;
	background:rgba(255,255,255,.12) !important;
	color:#fff !important;
	font-size:9.5px !important;
	font-weight:800 !important;
	box-shadow:none !important;
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
}

.reel-creator__follow.is-following{
	background:rgba(255,255,255,.92) !important;
	color:#20232c !important;
	border-color:rgba(255,255,255,.8) !important;
}

.reel-overlay__title{
	max-width:560px;
	margin:0 0 4px;
	color:#fff;
	font-size:14px;
	font-weight:850;
	line-height:1.75;
	text-shadow:0 2px 10px rgba(0,0,0,.45);
}

.reel-caption{
	max-width:560px;
	margin-bottom:10px;
}

.reel-caption__text{
	display:-webkit-box;
	overflow:hidden;
	color:rgba(255,255,255,.88);
	font-size:11px;
	font-weight:500;
	line-height:1.85;
	text-shadow:0 2px 9px rgba(0,0,0,.42);
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}

.reel-caption.is-expanded .reel-caption__text{
	display:block;
	max-height:min(27vh,220px);
	overflow-y:auto;
	padding-left:5px;
	scrollbar-width:none;
}

.reel-caption.is-expanded .reel-caption__text::-webkit-scrollbar{
	display:none;
}

.reel-caption__toggle{
	margin-top:2px;
	padding:0;
	border:0;
	background:transparent;
	color:rgba(255,255,255,.65);
	cursor:pointer;
	font-size:9px;
	font-weight:700;
}


/* =========================================================
   PRODUCT PILL
   ========================================================= */

.reel-products-pill{
	max-width:min(360px,100%);
	min-height:46px;
	display:inline-flex;
	align-items:center;
	gap:9px;
	padding:5px 10px 5px 6px;
	border:1px solid rgba(255,255,255,.15);
	border-radius:15px;
	background:rgba(14,16,21,.48);
	color:#fff;
	cursor:pointer;
	box-shadow:0 8px 24px rgba(0,0,0,.13);
	backdrop-filter:blur(16px) saturate(1.1);
	-webkit-backdrop-filter:blur(16px) saturate(1.1);
	transition:
		background-color .17s ease,
		transform .17s ease,
		border-color .17s ease;
}

.reel-products-pill:hover{
	background:rgba(25,27,35,.68);
	border-color:rgba(255,255,255,.23);
}

.reel-products-pill:active{
	transform:scale(.98);
}

.reel-products-pill__thumbs{
	display:flex;
	align-items:center;
	direction:rtl;
}

.reel-products-pill__thumbs img,
.reel-products-pill__thumb-placeholder{
	width:32px;
	height:32px;
	display:block;
	overflow:hidden;
	margin-left:-7px;
	border:2px solid rgba(255,255,255,.85);
	border-radius:9px;
	background:#eceef2;
	object-fit:cover;
}

.reel-products-pill__thumbs > :last-child{
	margin-left:0;
}

.reel-products-pill__copy{
	min-width:0;
	display:flex;
	flex-direction:column;
	text-align:right;
}

.reel-products-pill__copy strong{
	font-size:10px;
	font-weight:850;
	line-height:1.4;
}

.reel-products-pill__copy span{
	color:rgba(255,255,255,.61);
	font-size:8px;
	line-height:1.45;
}

.reel-products-pill__arrow{
	width:14px;
	height:14px;
	flex:0 0 14px;
	margin-right:auto;
	color:rgba(255,255,255,.65);
}


/* =========================================================
   ACTION RAIL
   ========================================================= */

.reel-actions{
	position:absolute;
	z-index:18;
	left:max(12px,env(safe-area-inset-left,0px));
	bottom:calc(var(--reels-safe-bottom) + 16px);
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:13px;
}

.reel-action{
	width:52px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
	padding:0;
	border:0;
	background:transparent;
	color:#fff;
	cursor:pointer;
}

.reel-action__surface{
	width:44px;
	height:44px;
	display:grid;
	place-items:center;
	border:1px solid rgba(255,255,255,.13);
	border-radius:14px;
	background:rgba(13,15,20,.38);
	box-shadow:0 5px 16px rgba(0,0,0,.10);
	backdrop-filter:blur(13px);
	-webkit-backdrop-filter:blur(13px);
	transition:
		transform .16s ease,
		background-color .16s ease,
		color .16s ease,
		border-color .16s ease;
}

.reel-action:hover .reel-action__surface{
	background:rgba(255,255,255,.15);
}

.reel-action:active .reel-action__surface{
	transform:scale(.91);
}

.reel-action__icon{
	width:21px;
	height:21px;
}

.reel-action__label{
	color:rgba(255,255,255,.74);
	font-size:8px;
	font-weight:650;
	text-shadow:0 1px 5px rgba(0,0,0,.4);
}

.reel-action__icon--filled{
	display:none;
}

.reel-action.is-active .reel-action__surface{
	border-color:rgba(114,105,255,.58);
	background:var(--reels-primary);
	color:#fff;
}

.reel-action.is-active .reel-action__icon--outline{
	display:none;
}

.reel-action.is-active .reel-action__icon--filled{
	display:block;
}

.reel-action__icon--sound-on{
	display:none;
}

.reel-action[data-muted="0"] .reel-action__icon--sound-on{
	display:block;
}

.reel-action[data-muted="0"] .reel-action__icon--sound-off{
	display:none;
}


/* =========================================================
   NAVIGATION ARROWS
   ========================================================= */

.reel-nav-arrows{
	position:absolute;
	z-index:18;
	top:50%;
	right:max(14px,env(safe-area-inset-right,0px));
	display:flex;
	flex-direction:column;
	gap:8px;
	transform:translateY(-50%);
}

.reel-nav-arrow{
	width:40px;
	height:40px;
	display:grid;
	place-items:center;
	padding:0;
	border:1px solid rgba(255,255,255,.12);
	border-radius:13px;
	background:rgba(12,14,19,.30);
	color:#fff;
	cursor:pointer;
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
	transition:
		background-color .16s ease,
		opacity .16s ease,
		transform .16s ease;
}

.reel-nav-arrow:hover:not(:disabled){
	background:rgba(255,255,255,.14);
}

.reel-nav-arrow:active:not(:disabled){
	transform:scale(.93);
}

.reel-nav-arrow:disabled{
	opacity:.18;
	cursor:default;
}

.reel-nav-arrow svg{
	width:18px;
	height:18px;
}


/* =========================================================
   FEEDBACK
   ========================================================= */

.reels-feedback{
	position:fixed;
	z-index:180;
	top:72px;
	left:50%;
	min-height:34px;
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:0 11px;
	border:1px solid rgba(255,255,255,.12);
	border-radius:999px;
	background:rgba(17,19,25,.76);
	color:rgba(255,255,255,.86);
	box-shadow:0 7px 24px rgba(0,0,0,.16);
	font-size:9px;
	font-weight:650;
	transform:translateX(-50%);
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
}

.reels-feedback__spinner{
	width:12px;
	height:12px;
	border:2px solid rgba(255,255,255,.22);
	border-top-color:#fff;
	border-radius:999px;
	animation:reelsSpin .7s linear infinite;
}

@keyframes reelsSpin{
	to{transform:rotate(360deg)}
}


/* =========================================================
   PRODUCTS SHEET
   ========================================================= */

.reel-sheet{
	position:fixed;
	inset:0;
	z-index:400;
}

.reel-sheet__backdrop{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	padding:0;
	border:0;
	background:rgba(0,0,0,.48);
	cursor:pointer;
	backdrop-filter:blur(5px);
	-webkit-backdrop-filter:blur(5px);
}

.reel-sheet__panel{
	position:absolute;
	right:0;
	bottom:0;
	left:0;
	max-height:min(72dvh,680px);
	overflow:hidden;
	padding:
		7px
		14px
		max(14px,env(safe-area-inset-bottom,0px));
	border:1px solid rgba(255,255,255,.08);
	border-bottom:0;
	border-radius:24px 24px 0 0;
	background:#f9fafc;
	color:#171a22;
	box-shadow:0 -18px 60px rgba(0,0,0,.28);
	animation:reelSheetIn .22s cubic-bezier(.2,.7,.2,1);
}

@keyframes reelSheetIn{
	from{transform:translateY(28px);opacity:.65}
	to{transform:translateY(0);opacity:1}
}

.reel-sheet__grabber{
	width:38px;
	height:4px;
	margin:1px auto 8px;
	border-radius:999px;
	background:#d5d8df;
}

.reel-sheet__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	padding:7px 2px 12px;
	border-bottom:1px solid #eceef2;
}

.reel-sheet__title{
	margin:0;
	color:#171a22;
	font-size:14px;
	font-weight:850;
}

.reel-sheet__subtitle{
	margin:1px 0 0;
	color:#858b99;
	font-size:9px;
}

.reel-sheet__close{
	width:36px;
	height:36px;
	display:grid;
	place-items:center;
	padding:0;
	border:1px solid #e7e9ef;
	border-radius:11px;
	background:#fff;
	color:#636a7b;
	cursor:pointer;
}

.reel-sheet__close svg{
	width:17px;
	height:17px;
}

.reel-sheet__body{
	max-height:calc(min(72dvh,680px) - 96px);
	overflow-y:auto;
	padding:12px 0 3px;
	overscroll-behavior:contain;
	scrollbar-width:none;
}

.reel-sheet__body::-webkit-scrollbar{
	display:none;
}

.reel-sheet-products{
	display:grid;
	gap:8px;
}

.reel-product{
	min-height:72px;
	display:grid;
	grid-template-columns:58px minmax(0,1fr) 30px;
	align-items:center;
	gap:10px;
	padding:7px;
	border:1px solid #eceef2;
	border-radius:15px;
	background:#fff;
	color:#252a35;
	transition:
		border-color .17s ease,
		transform .17s ease,
		box-shadow .17s ease;
}

.reel-product:hover{
	border-color:rgba(79,70,229,.14);
	box-shadow:0 7px 20px rgba(17,24,39,.045);
	transform:translateY(-1px);
}

.reel-product__media{
	width:58px;
	height:58px;
	overflow:hidden;
	display:block;
	border-radius:11px;
	background:#f1f2f5;
}

.reel-product__media img,
.reel-product__placeholder{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
}

.reel-product__placeholder{
	background:
		linear-gradient(
			135deg,
			#eceef2,
			#f7f8fa
		);
}

.reel-product__copy{
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:2px;
}

.reel-product__name{
	overflow:hidden;
	font-size:11px;
	font-weight:780;
	line-height:1.6;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.reel-product__meta{
	color:#969ba7;
	font-size:8.5px;
}

.reel-product__go{
	width:30px;
	height:30px;
	display:grid;
	place-items:center;
	border-radius:9px;
	background:#f5f5ff;
	color:var(--reels-primary);
}

.reel-product__go svg{
	width:14px;
	height:14px;
}

.reel-sheet__shop-button{
	min-height:44px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-top:4px;
	padding:0 14px;
	border-radius:12px;
	background:var(--reels-primary);
	color:#fff;
	font-size:10px;
	font-weight:800;
	transition:background-color .17s ease;
}

.reel-sheet__shop-button:hover{
	background:var(--reels-primary-hover);
}


/* =========================================================
   MORE MENU
   ========================================================= */

.reels-menu{
	position:fixed;
	inset:0;
	z-index:410;
}

.reels-menu__backdrop{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	padding:0;
	border:0;
	background:rgba(0,0,0,.42);
	cursor:pointer;
}

.reels-menu__panel{
	position:absolute;
	top:calc(58px + var(--reels-safe-top));
	left:max(12px,env(safe-area-inset-left,0px));
	width:min(240px,calc(100% - 24px));
	overflow:hidden;
	padding:6px;
	border:1px solid rgba(255,255,255,.10);
	border-radius:16px;
	background:rgba(23,25,32,.94);
	box-shadow:0 18px 48px rgba(0,0,0,.28);
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
}

.reels-menu__item{
	width:100%;
	min-height:44px;
	display:flex;
	align-items:center;
	gap:9px;
	padding:0 11px;
	border:0;
	border-radius:11px;
	background:transparent;
	color:#fff;
	cursor:pointer;
	font-size:10px;
	font-weight:650;
	text-align:right;
}

.reels-menu__item:hover{
	background:rgba(255,255,255,.08);
}

.reels-menu__item svg{
	width:17px;
	height:17px;
	color:rgba(255,255,255,.72);
}


/* =========================================================
   SHARED OTP OVERRIDES ON DARK PAGE
   ========================================================= */

.reels-body .x-otpbackdrop{
	z-index:500 !important;
}


/* =========================================================
   DESKTOP PRESENTATION
   ========================================================= */

@media(min-width:760px){

	.reel-slide__stage{
		width:min(620px,100%);
		border-right:1px solid rgba(255,255,255,.04);
		border-left:1px solid rgba(255,255,255,.04);
		box-shadow:
			-24px 0 80px rgba(0,0,0,.18),
			24px 0 80px rgba(0,0,0,.18);
	}

	.reel-overlay{
		right:18px;
		left:86px;
		bottom:24px;
	}

	.reel-actions{
		left:18px;
		bottom:26px;
	}

	.reel-nav-arrows{
		right:18px;
	}

	.reel-sheet__panel{
		right:50%;
		left:auto;
		width:min(500px,calc(100% - 30px));
		transform:translateX(50%);
		border-radius:24px;
		border-bottom:1px solid rgba(255,255,255,.08);
		bottom:18px;
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:759px){

	.reels-topbar{
		height:calc(52px + var(--reels-safe-top));
		grid-template-columns:38px 1fr 38px;
		padding-bottom:6px;
	}

	.reels-topbar__button{
		width:36px;
		height:36px;
		border-radius:12px;
	}

	.reels-topbar__brand{
		height:36px;
		font-size:11px;
	}

	.reel-media__embed{
		inset:52px 0 0;
	}

	.reel-overlay{
		right:12px;
		left:72px;
		bottom:calc(var(--reels-safe-bottom) + 9px);
	}

	.reel-creator{
		gap:7px;
		margin-bottom:7px;
	}

	.reel-creator__avatar{
		width:34px;
		height:34px;
		flex-basis:34px;
	}

	.reel-creator__name{
		max-width:150px;
		font-size:11px;
	}

	.reel-creator__handle{
		font-size:8px;
	}

	.reel-creator__follow{
		min-height:29px !important;
		padding-inline:9px !important;
		font-size:8.5px !important;
	}

	.reel-overlay__title{
		font-size:12px;
		line-height:1.65;
	}

	.reel-caption__text{
		font-size:9.7px;
		line-height:1.75;
	}

	.reel-products-pill{
		min-height:42px;
		border-radius:13px;
	}

	.reel-products-pill__thumbs img,
	.reel-products-pill__thumb-placeholder{
		width:28px;
		height:28px;
		border-radius:8px;
	}

	.reel-actions{
		left:9px;
		bottom:calc(var(--reels-safe-bottom) + 10px);
		gap:10px;
	}

	.reel-action{
		width:48px;
	}

	.reel-action__surface{
		width:40px;
		height:40px;
		border-radius:13px;
	}

	.reel-action__icon{
		width:19px;
		height:19px;
	}

	.reel-action__label{
		font-size:7.5px;
	}

	.reel-nav-arrows{
		display:none;
	}
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:390px){

	.reel-overlay{
		left:66px;
	}

	.reel-creator__name{
		max-width:118px;
	}

	.reel-overlay__title{
		font-size:11.5px;
	}

	.reel-products-pill__copy span{
		display:none;
	}
}


/* =========================================================
   FOCUS / REDUCED MOTION
   ========================================================= */

.reels-body button:focus-visible,
.reels-body a:focus-visible{
	outline:3px solid rgba(113,105,255,.42);
	outline-offset:3px;
}

@media(prefers-reduced-motion:reduce){

	.reels-feed{
		scroll-behavior:auto;
	}

	.reel-media__image--blur{
		filter:blur(28px) saturate(.8) brightness(.5);
	}

	.reel-media__video,
	.reel-action__surface,
	.reel-products-pill,
	.reel-nav-arrow,
	.reel-product{
		transition:none !important;
	}
}