.riven-mobile-nav{
	display:none;
}

@media(max-width:767px){

	body{
		padding-bottom:100px;
	}

	.riven-mobile-nav{

		--active-left:50%;

		position:fixed;

		left:50%;
		bottom:10px;

		transform:translateX(-50%);

		width:calc(100% - 35px);
		max-width:430px;

		height:70px;

		display:flex;

		align-items:center;
		justify-content:space-between;

		padding-left:35px;
		padding-right:35px;

		background:#fff;

		border-radius:16px;

		box-shadow:
			0 20px 40px rgba(0,0,0,.18);

		z-index:99999;

		overflow:visible;
	}

	/*
	|--------------------------------------------------------------------------
	| Indicator
	|--------------------------------------------------------------------------
	*/

	.riven-mobile-nav-indicator{

		position:absolute;

		left:var(--active-left);

		top:-42px;

		width:70px;
		height:70px;

		transform:translateX(-50%);

		background:transparent;

		z-index:5;

		transition:left .35s cubic-bezier(.68,-.55,.27,1.55);

	}

	.riven-indicator-circle{

		position:absolute;

		inset:0;

		background:#9b35ef;

		border-radius:50%;

		border:8px solid #fff;

		z-index:3;

	}

	.riven-mobile-nav-indicator:before{

		content:"";

		position:absolute;

		top:25%;
		left:-24px;

		width:26px;
		height:26px;

		background:transparent;

		border-bottom-right-radius:25px;

		box-shadow:8px 8px 0 0 #fff;

	}

	.riven-mobile-nav-indicator:after{

		content:"";

		position:absolute;

		top:25%;
		right:-24px;

		width:26px;
		height:26px;

		background:transparent;

		border-bottom-left-radius:25px;

		box-shadow:-8px 8px 0 0 #fff;

	}

	/*
	|--------------------------------------------------------------------------
	| Nav Items
	|--------------------------------------------------------------------------
	*/

	.riven-mobile-nav-item{

		position:relative;

		flex:1;

		height:70px;

		display:flex;

		flex-direction:column;

		align-items:center;

		justify-content:center;

		text-decoration:none;

		color:#222;

		z-index:10;

	}

	.riven-nav-icon{

		display:flex;

		align-items:center;

		justify-content:center;

		transition:.35s ease;

	}

	.riven-nav-icon svg{

		width:26px;
		height:26px;

	}

	.riven-mobile-nav-item.active .riven-nav-icon{

		transform:translateY(-42px);

		color:#fff;

		z-index:20;

	}

	.riven-nav-label{

		position:absolute;

		bottom:20px;

		font-size:12px;

		font-weight:500;

		opacity:0;

		transform:translateY(10px);

		transition:.35s ease;

	}

	.riven-mobile-nav-item.active .riven-nav-label{

		opacity:1;

		transform:translateY(0);

	}

	/*
	|--------------------------------------------------------------------------
	| Badge
	|--------------------------------------------------------------------------
	*/

	.riven-nav-count{

		position:absolute;

		top:8px;

		right:14px;

		min-width:18px;

		height:18px;

		display:flex;

		align-items:center;

		justify-content:center;

		background:#dfff3c;

		color:#111;

		font-size:11px;

		font-weight:600;

		border-radius:20px;

		z-index:30;

	}

	.riven-mobile-nav-item.active .riven-nav-count{

		top:-35px;

		right:8px;

	}

}

/*
|--------------------------------------------------------------------------
| Panel Base
|--------------------------------------------------------------------------
*/

.riven-mobile-panel{

	position:fixed;

	display:flex;

	flex-direction:column;

	background:#fff;

	box-sizing:border-box;

	overflow:hidden;

	z-index:9998;

	transition:
		transform .35s cubic-bezier(.4,0,.2,1),
		opacity .3s ease;

	will-change:transform;

}

.riven-mobile-panel::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 5px;
    background: #ddd;
    border-radius: 20px;
}

.riven-mobile-panel .e-con>.e-con-inner {
	gap: 0px !important;
}

/*
|--------------------------------------------------------------------------
| Panel Header
|--------------------------------------------------------------------------
*/

.riven-panel-header{

	position:relative;

	padding: 32px 28px 20px;

	flex-shrink:0;

}


.riven-panel-subtitle {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #777;
    margin-bottom: 5px;
}

.riven-panel-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #000;
}

.riven-panel-divider{

	height:1px;

	background:#ececec;

	flex-shrink:0;

}

/*
|--------------------------------------------------------------------------
| Panel Content
|--------------------------------------------------------------------------
*/

.riven-panel-content{

	flex:1;

	overflow-y:auto;

	-webkit-overflow-scrolling:touch;

	box-sizing:border-box;

	padding:32px 24px 120px;

}

/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/

.riven-panel-overlay{

	position:fixed;

	inset:0;

	background:rgba(0,0,0,.45);

	opacity:0;

	visibility:hidden;

	z-index:9997;

	transition:.3s;

}

.riven-panel-overlay.active{

	opacity:1;

	visibility:visible;

}


/*
|--------------------------------------------------------------------------
| Bottom Animation
|--------------------------------------------------------------------------
*/

.riven-mobile-panel.animation-bottom{

	left:0;

	right:0;

	bottom:0;

	transform:translateY(100%);

}

.riven-mobile-panel.animation-bottom.active{

	transform:translateY(0);

}

/*
|--------------------------------------------------------------------------
| Top Animation
|--------------------------------------------------------------------------
*/

.riven-mobile-panel.animation-top{

	left:0;

	right:0;

	top:0;

	transform:translateY(-100%);

}

.riven-mobile-panel.animation-top.active{

	transform:translateY(0);

}

/*
|--------------------------------------------------------------------------
| Left Animation
|--------------------------------------------------------------------------
*/

.riven-mobile-panel.animation-left{

	left:0;

	top:0;

	bottom:0;

	transform:translateX(-100%);

}

.riven-mobile-panel.animation-left.active{

	transform:translateX(0);

}

/*
|--------------------------------------------------------------------------
| Right Animation
|--------------------------------------------------------------------------
*/

.riven-mobile-panel.animation-right{

	right:0;

	top:0;

	bottom:0;

	transform:translateX(100%);

}

.riven-mobile-panel.animation-right.active{

	transform:translateX(0);

}

/*
|--------------------------------------------------------------------------
| Fade Animation
|--------------------------------------------------------------------------
*/

.riven-mobile-panel.animation-fade{

	left:50%;

	top:50%;

	transform:
		translate(-50%,-50%)
		scale(.9);

	opacity:0;

}

.riven-mobile-panel.animation-fade.active{

	transform:
		translate(-50%,-50%)
		scale(1);

	opacity:1;

}

/*
|--------------------------------------------------------------------------
| Close Button
|--------------------------------------------------------------------------
*/

.riven-panel-close{

	position:absolute;

	top:20px;

	right:20px;

	z-index:20;

	display:flex;

	align-items:center;

	justify-content:center;

	width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0 !important;
    aspect-ratio: 1 / 1;

	border:1px solid #ececec;

	border-radius:50%;

	background:#f8f8f8;

	cursor:pointer;

	color:#111;

	transition:
		background .25s ease,
		border-color .25s ease,
		transform .25s ease;

}


.riven-panel-close:hover{

	background:#efefef;

	border-color:#dcdcdc;

	transform:rotate(90deg);

}

.riven-panel-close svg{

	width:20px;

	height:20px;

}

.riven-panel-close svg path{

	fill:none;

	stroke:currentColor;

	stroke-width:2;

	stroke-linecap:round;

	stroke-linejoin:round;

}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:767px){

	.riven-panel-handle{

		padding:12px 0 4px;

	}

	.riven-panel-handle span{

		width:64px;

		height:5px;

	}

	.riven-panel-header{

		padding:20px;

	}

	.riven-panel-subtitle{

		font-size:12px;

		letter-spacing:.14em;

	}

	.riven-panel-title{

		font-size:22px;

	}

	.riven-panel-content{

		padding:24px 20px 120px;

	}

	.riven-panel-close{

		top:16px;

		right:16px;

		width:42px;

		height:42px;

	}

	.riven-panel-close svg{

		width:18px;

		height:18px;

	}

}

.riven-product-mobile-nav{
	position:fixed;
	left:50%;
	bottom:10px;
	transform:translateX(-50%) translateY(100%);

	width:calc(100% - 32px);
	max-width:440px;

	z-index:9999;

	display:flex;
	flex-direction:column;

	background:#fff;
	border-radius:16px;
	box-shadow:0 8px 25px rgba(0,0,0,.12);

	overflow:hidden;

	opacity:0;
	visibility:hidden;
	pointer-events:none;

	transition:
		transform .3s ease,
		opacity .3s ease,
		visibility .3s ease;
}

.riven-product-mobile-nav.is-visible{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:translateX(-50%) translateY(0);
}

/*------------------------------------
	Product
------------------------------------*/

.riven-product-top{
	display:flex;
	align-items:center;
	gap:12px;
	padding:10px 12px;
}

.riven-product-back{
	flex:0 0 40px;
	width:40px;
	height:40px;

	display:flex;
	align-items:center;
	justify-content:center;

	padding:0;

	border:0;
	border-radius:50%;

	background:#f5f5f5;
	color:#111;

	cursor:pointer;
	transition:.25s;
}

.riven-product-back:hover{
	background:#ececec;
}

.riven-product-back svg{
	width:20px;
	height:20px;
	fill:none;
	stroke:currentColor;
}

.riven-product-meta{
	flex:1;
	min-width:0;
}

.riven-product-title{
	margin:0;

	font-size:13px;
	font-weight:600;
	line-height:1.25;
	color:#111;

	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.riven-product-price{
	margin-top:2px;

	font-size:14px;
	font-weight:700;
	line-height:1.2;
	color:#111;
}

.riven-product-price del{
	margin-right:5px;

	font-size:12px;
	font-weight:500;
	color:#9a9a9a;
}

.riven-product-price ins{
	color:#111;
	text-decoration:none;
}

.riven-product-order{
	flex:0 0 130px;
	width:130px;
	height:38px;

	padding:0 16px;

	border:0;
	border-radius:10px;

	background:#111;
	color:#fff;

	font-size:13px;
	font-weight:600;

	cursor:pointer;
	transition:.25s;
}

.riven-product-order:hover{
	background:#000;
}

/*------------------------------------
	Support
------------------------------------*/

.riven-support-card{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;

	padding:10px 12px;

	border-top:1px solid #ededed;
}

.riven-support-left{
	display:flex;
	align-items:center;
	gap:10px;

	flex:1;
	min-width:0;
}

.riven-support-icon{
	flex:0 0 38px;

	width:38px;
	height:38px;

	display:flex;
	align-items:center;
	justify-content:center;

	border-radius:10px;
	background:#f5f5f5;
	overflow:hidden;
}

.riven-support-icon img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

.riven-support-content{
	flex:1;
	min-width:0;
}

.riven-support-title{
	margin:0;

	font-size:13px;
	font-weight:600;
	line-height:1.2;
	color:#111;

	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.riven-support-subtitle{
	margin-top:2px;

	font-size:12px;
	font-weight:500;
	line-height:1.2;
	color:#777;

	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.riven-support-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	min-width:112px;
	height:36px;

	padding:0 16px;

	border-radius:10px;

	background:#111;
	color:#fff;

	font-size:12px;
	font-weight:600;
	text-decoration:none;

	white-space:nowrap;

	transition:.25s;
}

.riven-support-button:hover{
	background:#000;
	color:#fff;
}

/*------------------------------------
	Desktop
------------------------------------*/

@media (min-width:768px){

	.riven-product-mobile-nav{
		display:none !important;
	}

}

/*------------------------------------
	Small Mobile
------------------------------------*/

@media (max-width:430px){

	.riven-product-mobile-nav{
		width:calc(100% - 20px);
		bottom:10px;
	}

	.riven-product-top{
		padding:9px 10px;
		gap:10px;
	}

	.riven-support-card{
		padding:9px 10px;
		gap:10px;
	}

	.riven-product-order{
		min-width:105px;
		height:36px;
		padding:0 14px;
		font-size:12px;
	}

	.riven-support-button{
		min-width:100px;
		height:34px;
		padding:0 14px;
		font-size:11px;
	}

	.riven-product-title,
	.riven-support-title{
		font-size:12px;
	}

	.riven-product-price{
		font-size:13px;
	}

	.riven-support-subtitle{
		font-size:11px;
	}

	.riven-product-back{
		width:36px;
		height:36px;
		flex-basis:36px;
	}

	.riven-support-icon{
		width:36px;
		height:36px;
		flex-basis:36px;
	}

}