header {
	min-height: 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.funtenjer {
	max-width: 1120px;
	width: 100%;
	margin: 0 auto;
}

main {
	height: calc(100vh - 80px);
	display: flex;
}

article {
	display: flex;
	align-items: center;
	margin: auto;
	width: 100%;
}

article .book {
	position: relative;
	margin-right: -130px;
	z-index: 1;
	font-size: 1.5rem;
}

article .book .back {
	position: absolute;
	left: 0;
	top: -100px;
	font-size: 0.5em;
	padding: 10px 20px;
	background: rgba(var(--rgb-primary), 0.06);
	z-index: 2;
	cursor: pointer;
	display: flex;
	align-items: center;
}

article .book .back i {
	font-size: 1.2em;
	margin-right: 5px;
	transition: 300ms;
}

article .book .back:hover i {
	transform: translateX(-5px);
}

article .book .back:hover span {
	text-decoration: underline;
}

article .content {
	position: relative;
	padding: 60px;
	padding-left: 200px;
	padding-right: 0;
	background: #cff0ea;
	background: rgba(var(--rgb-primary), 0.06);
	display: flex;
	flex: 1;
}

article .info {
	padding-right: 20px;
	flex: 1;
}

article author {
	display: block;
	font-size: 0.8em;
}

article .info h2 {
	font-family: var(--lora);
	font-size: 2em;
	margin: 0;
	margin-bottom: 10px;
}

article .info .sub-title {
	margin-bottom: 20px;
}

article .info .stars-holder {
	font-size: 0.8em;
	display: flex;
	justify-content: space-between;
}

article .info .description {
	overflow: auto;
	height: 17.4375em;
	margin: 10px 0;
	padding-right: 5px;

	/* -ms-overflow-style: none; 
    scrollbar-width: none;  */
}

article .info .description.book-buy {
	height: 13em;
}

/* article .info .description::-webkit-scrollbar {
    display: none;
} */

article .info .description p {
	font-size: 0.9em;
	line-height: 1.6;
	text-align: justify;
}

article nav {
	display: flex;
	padding-top: 10px;
}

article nav a > div {
	display: flex;
	margin-right: 20px;
	padding-right: 40px;
	height: 40px;
	position: relative;
	align-items: center;
	border-radius: 6px;
	background: rgba(var(--rgb-primary), 0.09);
	transition: 300ms;
	font-size: 0.8em;
	font-weight: 600;
	overflow: hidden;
}

article nav a > div.disabled {
	filter: grayscale(100%);
	user-select: none;
	pointer-events: none;
}

article nav a > div::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--secondary);
	transform: translate(-100%);
	transition: 300ms;
	z-index: -1;
}

nav a > div:active {
	transform: scale(0.96);
}

article nav a > div .ico-holder {
	margin-right: 40px;
	height: 100%;
	width: 50px;
	display: flex;
	background: var(--secondary);
}

article nav a > div .ico-holder span {
	margin: auto;
	color: #fff;
}

article nav a > div .ico-holder i {
	margin: auto;
	color: #fff;
}

article nav a > div:hover::after {
	transform: translate(0);
}

article nav a > div.disabled:hover::after {
	transform: translate(-100%);
}

nav a > div:hover {
	opacity: 0.8;
	color: #fff;
}

nav a > div.disabled:hover {
	opacity: 1;
	color: var(--primary);
}

article .content .more {
	position: relative;
	width: 100px;
	/* background: rgba(var(--rgb-primary), .05); */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 2;
}

article .content .more a {
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--surface-2);
	border-radius: 50%;
	display: flex;
	margin: 20px 0;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	transition: 300ms;
}

article .content .more a.disabled {
	user-select: none;
	pointer-events: none;
}

article .content .more a.disabled:hover {
	background: var(--body-color);
}

article .content .more a.disabled:hover .flag {
	display: none;
}

article .content .more a.disabled::after {
	content: '\f023';
	font-weight: 900;
	font-family: 'Font Awesome 6 Pro';
	position: absolute;
	right: -5px;
	height: 25px;
	width: 25px;
	font-size: 0.7em;
	background: rgba(var(--rgb-primary), 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

article .content .more a.disabled.rate:hover + .rate-container {
	display: none;
}

article .content .more a i {
	margin: auto;
	font-size: 0.8em;
}

article .content .more a.active i {
	font-weight: bold;
}

article .content .more a:hover {
	background: var(--surface-3);
}

article .content .more a .flag {
	--color: var(--surface-3);
	padding: 5px 10px;
	background: var(--color);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: calc(100% + 10px);
	animation: fadeIn 300ms;
	display: none;
	border-radius: 5px;
}

article .content .more a .flag span {
	font-size: 0.8em;
	white-space: nowrap;
	opacity: 0.9;
}

article .content .more a .flag::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -9px;
	width: 0;
	height: 0;
	transform: translateY(-50%) rotate(-90deg);
	border-right: 6px solid transparent;
	border-bottom: 6px solid var(--color);
	border-left: 6px solid transparent;
}

article .content .more a:hover .flag {
	display: block;
}

article .content .more a.rate {
	position: relative;
}

article .content .more a.rate:hover + .rate-container {
	display: block;
}

article .content .more a.rate.rated i {
	font-weight: bold;
	color: var(--star-background);
	transition: 300ms;
}

article .content .more a.rate > span {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	right: -5px;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: var(--star-background);
	color: var(--body-color);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	font-weight: bold;
	font-size: 0.7em;
	animation: fadeIn 300ms;
	display: none;
}
article .content .more a.rate.rated > span {
	display: flex;
}

article .content .more .rate-container {
	position: absolute;
	right: calc(100% - 10px);
	background: var(--body-color);
	padding: 1.25em 0.625em;
	border-radius: 6px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	display: none;
	transform: rotate(180deg);
	animation: fadeIn 300ms;
}

article .content .more .rate-container:hover {
	display: block;
}

article .content .more .rate-container::after {
	content: '';
	position: absolute;
	top: 50%;
	right: calc(100% - 10px);
	width: 0;
	height: 0;
	transform: translateX(-50%) rotate(-90deg);
	border-right: 6px solid transparent;
	border-bottom: 6px solid var(--body-color);
	border-left: 6px solid transparent;
}

article .content .more .rate-container::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	width: 20px;
}

article .content .more .rate-container .star {
	position: relative;
	display: flex;
	margin-bottom: 10px;
	color: rgba(var(--rgb-primary), 0.2);
	cursor: pointer;
	transform: rotate(36deg);
}

article .content .more .rate-container .star.active {
	color: var(--star-background);
}

article .content .more .rate-container .star:last-child {
	margin: 0;
}

/* subscribe to eKelimeh ico */

.ek-initials {
	margin: auto;
	font-family: var(--lora);
	font-weight: 600;
}

.ek-initials::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	border-radius: 50%;
	border: 2px dashed rgba(var(--rgb-primary), 0.5);
	animation: rotate 17s linear infinite;
}

/* buying book */

.buy-book .price {
	font-weight: 600;
	font-size: 2em;
	/* font-family: var(--lora); */
}

.buy-book .btn-holder {
	display: flex;
	align-items: center;
	margin-top: 20px;
}

.buy-book .btn-holder p {
	margin: 0;
	color: rgba(var(--rgb-primary), 0.6);
	margin-left: 10px;
	font-size: 0.8em;
}

.add-to-card {
	--background: var(--primary);
	--text: #fff;
	--cart: #fff;
	--tick: var(--background);
	position: relative;
	border: none;
	background: none;
	padding: 8px 50px;
	border-radius: 8px;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	overflow: hidden;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	min-width: 144px;
	flex-shrink: 0;
	color: var(--text);
	background: var(--background);
	transform: scale(var(--scale, 1));
	transition: transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27), opacity 300ms ease;
	outline: none;
}

.add-to-card:hover {
	opacity: 0.9;
}

.add-to-card:active {
	--scale: 0.95;
}
.add-to-card span {
	font-weight: 600;
	display: block;
	position: relative;
	padding-left: 24px;
	margin-left: -8px;
	line-height: 26px;
	transform: translateY(var(--span-y, 0));
	transition: transform 0.7s ease;
}
.add-to-card span::before,
.add-to-card span::after {
	content: '';
	width: var(--w, 2px);
	height: var(--h, 14px);
	border-radius: 1px;
	position: absolute;
	left: var(--l, 8px);
	top: var(--t, 6px);
	background: currentColor;
	transform: scale(0.75) rotate(var(--icon-r, 0deg)) translateY(var(--icon-y, 0));
	transition: transform 0.65s ease 0.05s;
}
.add-to-card span::after {
	--w: 14px;
	--h: 2px;
	--l: 2px;
	--t: 12px;
}
.add-to-card .cart {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -13px 0 0 -18px;
	transform-origin: 12px 23px;
	transform: translateX(-150px) rotate(-18deg);
	opacity: 0;
}
.add-to-card .cart::before,
.add-to-card .cart::after {
	content: '';
	position: absolute;
}
.add-to-card .cart::before {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px var(--cart);
	bottom: 0;
	left: 9px;
	filter: drop-shadow(11px 0 0 var(--cart));
}
.add-to-card .cart::after {
	width: 16px;
	height: 9px;
	background: var(--cart);
	left: 9px;
	bottom: 7px;
	transform-origin: 50% 100%;
	transform: perspective(4px) rotateX(-6deg) scaleY(var(--fill, 0));
	transition: transform 1.2s ease var(--fill-d);
}
.add-to-card .cart svg {
	z-index: 1;
	width: 36px;
	height: 26px;
	display: block;
	position: relative;
	fill: none;
	stroke: var(--cart);
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.add-to-card .cart svg polyline:last-child {
	stroke: var(--tick);
	stroke-dasharray: 10px;
	stroke-dashoffset: var(--offset, 10px);
	transition: stroke-dashoffset 0.4s ease var(--offset-d);
}
.add-to-card.in-progress {
	--scale: 0.95;
	--span-y: -32px;
	--icon-r: 180deg;
	--fill: 1;
	--fill-d: 0.8s;
	--offset: 0;
	--offset-d: 1.73s;
}
.add-to-card.in-progress .cart {
	animation: cart 3.4s linear forwards 0.2s;
}

@keyframes cart {
	12.5% {
		transform: translateX(-60px) rotate(-18deg);
		opacity: 1;
	}
	25%,
	45%,
	55%,
	75% {
		transform: none;
		opacity: 1;
	}
	50% {
		transform: scale(0.9);
	}
	44%,
	56% {
		transform-origin: 12px 23px;
	}
	45%,
	55% {
		transform-origin: 50% 50%;
	}
	87.5% {
		transform: translateX(70px) rotate(-18deg);
	}
	100% {
		transform: translateX(140px) rotate(-18deg);
	}
}

.add-to-card.active {
	--background: var(--secondary);
	transition: 300ms;
}

.add-to-card.active span {
	position: relative;
}

.add-to-card.active span::after {
	display: none;
}
/* .add-to-card.active span::before{
    display: none;
  } */

.add-to-card.active span::before {
	content: '\f00c';
	font-weight: 900;
	font-family: 'Font Awesome 6 Pro';
	background-color: transparent;
	top: unset;
	left: 1px;
	transform: none;
}

.buy-disclaimer {
	display: flex;
	margin-left: 15px;
	align-items: center;
	gap: 5px;
}

.buy-disclaimer i {
	font-size: 1.15em;
	color: var(--secondary);
	box-shadow: rgba(var(--rgb-secondary), 0.9) 0px 8px 24px;
	cursor: pointer;
	border-radius: 50%;
}

.buy-disclaimer i:hover + span {
	opacity: 1;
}

.buy-disclaimer span {
	opacity: 0;
	font-size: 0.8em;
	color: rgba(var(--rgb-primary), 0.8);
	background: rgba(var(--rgb-primary), 0.06);
	padding: 5px 20px;
	border-radius: 6px;
	transition: 300ms;
	max-width: 100%;
	width: 100%;
}

@media screen and (max-width: 1380px) {
	.rate-container {
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 1000px) {
	body {
		font-size: 0.9rem;
	}

	article nav a > div {
		padding-right: 20px;
	}

	article nav a > div .ico-holder {
		margin-right: 20px;
	}
}

@media screen and (max-width: 900px) {
	div.basket-popup {
		bottom: 75px;
	}

	body {
		font-size: 1rem;
	}

	.funtenjer {
		padding: 0;
	}

	header {
		display: none;
	}

	article nav {
		flex-direction: column;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0 20px;
		padding-bottom: 20px;
		background: var(--body-color);
		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	}

	article nav a {
		margin-top: 20px;
	}

	article nav a > div {
		padding-right: 40px;
		margin: 0;
	}

	article .buy-book {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10px;
		min-height: 80px;
		background: var(--body-color);
		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	}

	/* ZA SAD */
	article .buy-disclaimer {
		display: none;
	}

	article .buy-book .price {
		background: rgba(var(--rgb-primary), 0.06);
		padding: 2px 20px;
		border-radius: 6px;
		font-size: 1.2em;
	}

	article .buy-book .btn-holder {
		margin-top: 0;
		flex: 1;
		display: flex;
	}

	article .buy-book .btn-holder .add-to-card {
		flex: 1;
		min-width: unset;
		padding: 8px 20px;
	}

	article .info .description p:last-child {
		padding-bottom: 64px;
	}

	article nav a > div .ico-holder {
		margin-right: 40px;
	}

	article {
		flex-direction: column;
		margin-top: 50px;
	}

	article .book {
		margin-right: 0;
		margin-bottom: -135px;
		font-size: 1.5rem;
	}

	article .book .back {
		position: absolute;
		padding: 7px 20px;
		top: -2em;
		left: -4em;
		background: var(--surface-3);
	}

	article .book .back span {
		display: none;
	}

	article .book .back i {
		font-size: 3em;
	}

	article .content {
		padding-top: 200px;
		padding-left: 20px;
		flex-direction: column;
	}

	article .content .more {
		position: absolute;
		top: 10px;
		right: 10px;
		transform: translateY(-50%);
	}

	article .content .more a:hover .flag {
		display: none;
	}

	article .info .description.book-buy,
	article .info .description {
		height: unset;
	}
}

@media screen and (max-width: 500px) {
	article .book {
		font-size: 1rem;
		margin-left: -20px;
	}

	/* article .book .back {
        left: -105px;
        top: -35px;
        font-size: .8em;
    } */
}

/* Basket popup */

.basket-popup{
	position: fixed;
	transform: translate(-50%, 200px);
	bottom: 10px;
	left: 50%;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    border: 1px solid rgba(var(--rgb-primary), .06);
	border-radius: .5em;
	/* overflow: hidden; */
	transition: 400ms ease-in-out;
	opacity: 0;
	z-index: 500;
}

.basket-popup.active{
	transform: translate(-50%, 0);
	opacity: 1;
}

/* // Initials for phone */

.basket-popup .initials{
	--width:60px;
	--height: 50px;
	position: absolute;
	bottom: 10px;
	left: calc(var(--width) * -1);
	height: var(--height);
	width: var(--width);
	border-radius: 6px 0 0 6px;
	background: var(--body-color);
	display: flex;
	justify-content: center;
	align-items: center;
    border: 2px solid rgba(var(--rgb-primary), .06);
	border-right: none;
	display: none;
	transition: 500ms;
}

.basket-popup .initials:active{
	background: var(--primary);
	color: var(--body-color);
}

.basket-popup .items-holder{
	display: flex;
	align-items: center;
	padding: 20px;
	background: var(--body-color);
	border-radius: .5em;
}

.basket-popup .items-holder .img-holder{
	--size: 5em;
	height: var(--size);
	width: 6em;
	position: relative;
	background: rgba(var(--rgb-primary), .06);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
}

.basket-popup .items-holder .img-holder img{
	width: 2.5em;
	border-radius: 4px;
	z-index: 2;
}

.basket-popup .items-holder .img-holder::before,
.basket-popup .items-holder .img-holder::after{
	content: "";
	width: 2.5em;
	height: 4em;
	border-radius: 4px;
	position: absolute;
	transform: rotate(-15deg);
	margin-left: -20px;
	transition: 400ms;
}

.basket-popup .items-holder .img-holder.one::after,
.basket-popup .items-holder .img-holder.two::before {
  transition: 400ms;
}

.basket-popup .items-holder .img-holder.one::after{
	background: var(--img1);
	background-size: cover;
	transform: rotate(-15deg);
	margin-right: 20px;
}

.basket-popup .items-holder .img-holder.two::before{
	background: var(--img2);
	background-size: cover;
	transform: rotate(15deg);
	margin-left: 20px;
}

.basket-popup .items-holder .info{
	margin: 0 40px 0 20px;
}

.basket-popup .items-holder .info .price{
	font-weight: 600;
	font-size: 1.3em;
}

.basket-popup .items-holder .info span{
	font-size: .9em;
	color: rgba(var(--rgb-primary), .7);
	text-transform: uppercase;
}

.basket-popup .items-holder .btn-holder{
	align-self: flex-end;
}

.basket-popup .items-holder .btn-holder a{
	display: block;
	margin: auto;
	background: var(--primary);
	border-radius: .5em;
	font-weight: 500;
	padding: 10px 20px;
	color: #fff;
	white-space: nowrap;
	border: 2px solid transparent;
}

.basket-popup .items-holder .btn-holder a:hover{
	border-color: var(--primary);
	background: var(--body-color);
	color: var(--primary);
}

.basket-popup .items-holder .btn-holder a i:first-child{
	margin-right: 7px;
	font-size: .8em;
}

.basket-popup .items-holder .btn-holder a i:last-child{
	margin-left: 10px;
}

.basket-popup .items-holder .close-container{
	align-self: flex-start;
}

.basket-popup .items-holder .close-container .close{
	--size: 1.5em;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 400ms;
	cursor: pointer;
}

.basket-popup .items-holder .close-container .close:hover{
	background: rgba(var(--rgb-primary), .06);
}

@media screen and (max-width: 800px){
	.basket-popup{
		transform: translate(140%,0);
		left: 0;
		right: 0;
		bottom: 60px;
		border-radius: 0;
		border-width: 2px 0 0 0; 
	}
	.basket-popup.active{
		transform: translate(100%,0);
	}

	.basket-popup .initials{
		display: flex;
	}

	.basket-popup .initials.reposition{
		bottom: unset;
		left: unset;
		top: calc(var(--height) * -1);
		right: 20px;
		border-right: 2px solid rgba(var(--rgb-primary), .06);
		border-bottom: none;
		border-radius: 6px 6px 0 0;
	}

	.basket-popup.show{
		transform: translate(0,0);
	}

	.basket-popup .items-holder{
		flex-wrap: wrap;
		gap: 20px;
	}

	.basket-popup .itmes-holder .img-holder,
	.basket-popup .items-holder .info{
		flex: 1;
	}

	.basket-popup .items-holder .btn-holder{
		flex: 2;
	}

	.basket-popup .items-holder .btn-holder a{
		display: flex;
		align-items: center;
	}

	.basket-popup .items-holder .btn-holder a i:last-child{
		margin-left: auto;
	}

	.basket-popup .items-holder .close-container {
		position: absolute;
		right: 20px;
	}
}