.explore-active {
	background: linear-gradient(to bottom, var(--color-active-bg) calc(100% - 2px), var(--color-active-bottom) 5px) no-repeat left bottom;
}
.explore-active:hover {
	background: linear-gradient(to bottom, var(--color-active-bg-hover) calc(100% - 2px), var(--color-active-bottom) 5px) no-repeat left bottom !important;
}
.mt-explore {display: block !important;}
/* THEMES */
:root {
	--color-active-bg: #111111;
	--color-active-bg-hover: rgb(26, 26, 26);
	--color-active-bottom: #ffffff;
	--color-block1: #ffffff;
	--color-showing-msg: #1a1a1a;
	--color-exprecipe: #111111;
	--color-recipe2inner: #111111;
	--color-r2bottom-span: #aeaeae;
	--color-btn-paginate: #ffffff;
}
[data-theme="light"] {
	--color-active-bg: #efefef;
	--color-active-bg-hover: rgb(229, 229, 229);
	--color-active-bottom: #000000;
	--color-block1: #000000;
	--color-showing-msg: #e5e5e5;
	--color-recipe2inner: #efefef;
	--color-r2bottom-span: #5c5c5c;
	--color-btn-paginate: #000000;
}
[data-theme="dark"] {
	--color-active-bg: #111111;
	--color-active-bg-hover: rgb(26, 26, 26);
	--color-active-bottom: #ffffff;
	--color-block1: #ffffff;
	--color-showing-msg: #1a1a1a;
	--color-exprecipe: #111111;
	--color-recipe2inner: #111111;
	--color-r2bottom-span: #aeaeae;
	--color-btn-paginate: #ffffff;
}
/* SCALING */
:root {
	--font-block1: 16px;
	--font-flashed: 14px;
	--height-flashed: 17px;
	--font-showing: 14px;
	--height-showing: 17px;
	--font-pagination: 16px;
	--height-pagination: 34px;
	--height-r2bottom: 80px;
	--font-r2bottom-div: 18px;
	--height-r2bottom-div: 40px;
	--font-r2bottom-span: 14px;
	--w860-height-r2bottom: 75px;
	--w860-font-r2bottom-div: 16px;
	--w860-height-r2bottom-div: 36px;
	--w860-font-r2bottom-span: 12px;
	--w330-height-r2bottom: 69px;
	--w330-font-r2bottom-div: 14px;
	--w330-height-r2bottom-div: 30px;
	--w330-font-r2bottom-span: 10px;
}
[data-scaling="normal"] {
	--font-block1: 16px;
	--font-flashed: 14px;
	--height-flashed: 17px;
	--font-showing: 14px;
	--height-showing: 17px;
	--font-pagination: 16px;
	--height-pagination: 34px;
	--height-r2bottom: 80px;
	--font-r2bottom-div: 18px;
	--height-r2bottom-div: 40px;
	--font-r2bottom-span: 14px;
	--w860-height-r2bottom: 75px;
	--w860-font-r2bottom-div: 16px;
	--w860-height-r2bottom-div: 36px;
	--w860-font-r2bottom-span: 12px;
	--w330-height-r2bottom: 69px;
	--w330-font-r2bottom-div: 14px;
	--w330-height-r2bottom-div: 30px;
	--w330-font-r2bottom-span: 10px;
}
[data-scaling="large"] {
	--font-block1: 18px;
	--font-flashed: 16px;
	--height-flashed: 19px;
	--font-showing: 16px;
	--height-showing: 19px;
	--font-pagination: 18px;
	--height-pagination: 36px;
	--height-r2bottom: 86px;
	--font-r2bottom-div: 20px;
	--height-r2bottom-div: 44px;
	--font-r2bottom-span: 16px;
	--w860-height-r2bottom: 81px;
	--w860-font-r2bottom-div: 18px;
	--w860-height-r2bottom-div: 40px;
	--w860-font-r2bottom-span: 14px;
	--w330-height-r2bottom: 75px;
	--w330-font-r2bottom-div: 16px;
	--w330-height-r2bottom-div: 34px;
	--w330-font-r2bottom-span: 12px;
}
/* ACCENT COLOR APPLICATION */
.search-btn {background-color: var(--color);}
.search-btn:hover {background: var(--color-lighter);} 
.search-btn:active, .search-btn.active {background: var(--color-darker);}
.seemore {background-color: var(--color);}
.btn-next {background-color: var(--color);}
.btn-next:hover {background: var(--color-lighter);}
.btn-next:active, .btn-next.active {background: var(--color-darker);}
.btn-prev {background-color: var(--color);}
.btn-prev:hover {background: var(--color-lighter);}
.btn-prev:active, .btn-prev.active {background: var(--color-darker);}
.btn-default {background-color: var(--color);}
.btn-default:hover {background: var(--color-lighter);}
.btn-default:active, .btn-default.active {background: var(--color-darker);}
/* BLOCK 1 */
#block1 {
	height: 100px;
	width: 100%;
	color: var(--color-block1);
	font-size: var(--font-block1);
}
#block1 h2 {
	padding-top: 12px; 
	padding-bottom: 10px;
}
.block1inner {
	height: 100%;
	margin: 0 auto;
	width: 1300px;
}
.errorh2 {padding-left: 0px !important; padding-bottom: 0px !important;}
/* MESSAGES */
#flashed-err {
	background: var(--color-flashed-err); 
	font-size: var(--font-flashed);
	min-height: var(--height-flashed);
	margin-bottom: 12px;
	margin-top: 0px;
	padding: 6px;
}
#flashed-norm {
	background: var(--color-flashed-norm); 
	font-size: var(--font-flashed);
	min-height: var(--height-flashed);
	margin-bottom: 12px;
	margin-top: 0px;
	padding: 6px;
}
#showing-msg {
	background: var(--color-showing-msg);
	font-size: var(--font-showing);
	margin-bottom: 12px;
	margin-top: 0px;
	min-height: var(--height-showing);
	padding: 6px;
}
/* RECIPE LIST */
.recipe2cont {margin: 0 auto; width: 100%;}
.recipe2cont:after {clear: both; content: ""; display: table;}
.recipe2 {
	position: relative; /* important so the pseudo-element can be positioned behind it */
	float: left;
	padding-top: 0;
	border-radius: 15px;
	width: 243.5px;
	margin-left: 0px;
	margin-right: 20px;
	margin-bottom: 20px;
	transition: transform 0.15s;
}
.recipe2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit; /* same 15px corner rounding */
	background: var(--color-darker);
	z-index: -1; /* behind recipe2’s content */
	transition: transform 0.15s;
}
@media (hover: hover) and (pointer: fine) {
	.recipe2:hover {
		transform: translate(5px, -5px);
	}
	.recipe2:hover::before {
		transform: translate(-5px, 5px);
	}
}
.recipe2cont .r2a:nth-of-type(5n) .recipe2 {
    margin-right: 0; /* Remove margin-right from every 4th item */
}
.recipe2inner {
	background-color: var(--color-recipe2inner);
	border-radius: 15px;
}
.r2top {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: 15px 15px 0px 0px;
	aspect-ratio: 4 / 3;
}
.r2bottom {
	display: flex; /* Used for vertical centering */
	flex-direction: column; /* Stacks the child elements vertically */
	height: var(--height-r2bottom);
	justify-content: center; /* Vertically center the items */
	padding-left: 10px;
	padding-right: 10px;
	overflow: hidden;
}
.r2bottom div {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: var(--font-r2bottom-div);
	margin: 0;
	padding-bottom: 5px;
	text-overflow: ellipsis;
	overflow: hidden;
	max-height: var(--height-r2bottom-div);
}
.r2bottom span {
	color: var(--color-r2bottom-span); 
	font-size: var(--font-r2bottom-span);
}

/* PAGINATION BUTTONS */
.prevnext {height: 64px; text-align: center; width: 100%;}
.btn-next {
	border: none;
	border-radius: 7px;
	color: var(--color-btn-paginate);
	cursor: pointer;
	font-size: var(--font-pagination);
	height: var(--height-pagination);
	margin-left: 6px;
	margin-top: 10px;
	padding: 0;
	transition: background-color 0.08s linear, border 0.08s linear;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-transition: background-color 0.08s linear, border 0.08s linear;
}
.btn-next:active, .btn-next.active, .btn-next:hover, .btn-next:focus {outline: none;}
.btn-next-text {float: left; padding-left: 8px;}
.btn-next-icon {
	display: block; 
	float: right; 
	height: 16px; 
	padding-left: 8px;
	padding-right: 8px; 
	padding-top: 2px;
	width: 10px;
}
.btn-next-icon img {height: 100%; width: 100%;}
.btn-prev {
	border: none;
	border-radius: 7px;
	color: var(--color-btn-paginate);
	cursor: pointer;
	font-size: var(--font-pagination);
	height: var(--height-pagination);
	margin-right: 6px;
	margin-top: 10px;
	padding: 0;
	transition: background-color 0.08s linear, border 0.08s linear;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-transition: background-color 0.08s linear, border 0.08s linear;
}
.btn-prev:active, .btn-prev.active, .btn-prev:hover, .btn-prev:focus {outline: none;}
.btn-prev-text {float: right; padding-right: 8px;}
.btn-prev-icon {
	display: block; 
	float: left; 
	height: 16px; 
	padding-right: 8px;
	padding-left: 8px; 
	padding-top: 2px;
	width: 10px;
}
.btn-prev-icon img {height: 100%; width: 100%;}

/* RESPONSIVE */
@media screen and (max-width: 1300px) { 
	.block1inner {width: 100%;}
	#block1 p {padding-left: 10px; padding-right: 10px;}
	#block1 h2 {padding-left: 10px; padding-right: 10px;}
	#showing-msg {margin-left: 10px; margin-right: 10px;}
	.recipe2cont {margin: 0 auto; width: calc(100% - 20px);}
	.recipe2 {
		width: calc(20% - 20px);
		margin-left: 10px;
		margin-right: 10px;
	}
	.recipe2cont .r2a:nth-of-type(5n) .recipe2 {
		margin-right: 10px;
	}
}
@media screen and (max-width: 1150px) { 
	.r2bottom {height: var(--w860-height-r2bottom);}
	.r2bottom div {
		font-size: var(--w860-font-r2bottom-div); 
		max-height: var(--w860-height-r2bottom-div);
	}
	.r2bottom span {font-size: var(--w860-font-r2bottom-span);}
}
@media screen and (max-width: 1000px) { 
	.recipe2 {
		width: calc(25% - 20px);
		margin-left: 10px;
		margin-right: 10px;
	}
	.r2bottom {height: var(--height-r2bottom);}
	.r2bottom div {
		font-size: var(--font-r2bottom-div); 
		max-height: var(--height-r2bottom-div);
	}
	.r2bottom span {font-size: var(--font-r2bottom-span);}
}
@media screen and (max-width: 860px) { 
	.r2bottom {height: var(--w860-height-r2bottom);}
	.r2bottom div {
		font-size: var(--w860-font-r2bottom-div); 
		max-height: var(--w860-height-r2bottom-div);
	}
	.r2bottom span {font-size: var(--w860-font-r2bottom-span);}
}
@media screen and (max-width: 770px) { 
	.recipe2 {width: calc(33.33% - 20px);}
	.r2bottom {height: var(--height-r2bottom);}
	.r2bottom div {
		font-size: var(--font-r2bottom-div); 
		max-height: var(--height-r2bottom-div);
	}
	.r2bottom span {font-size: var(--font-r2bottom-span);}
}
@media screen and (max-width: 700px) { 
	#recipe2container {width: calc(100% - 16px);}
	.recipe2 {
		width: calc(33.33% - 16px); 
		margin-left: 8px;
		margin-right: 8px;
		margin-bottom: 16px;
	}
	.recipe2cont .r2a:nth-of-type(5n) .recipe2 {
		margin-right: 8px;
	}
}
@media screen and (max-width: 620px) { 
	.r2bottom {height: var(--w860-height-r2bottom);}
	.r2bottom div {
		font-size: var(--w860-font-r2bottom-div); 
		max-height: var(--w860-height-r2bottom-div);
	}
	.r2bottom span {font-size: var(--w860-font-r2bottom-span);}
}
@media screen and (max-width: 530px) { 
	.recipe2 {width: calc(50% - 16px);}
	.r2bottom {height: var(--height-r2bottom);}
	.r2bottom div {
		font-size: var(--font-r2bottom-div); 
		max-height: var(--height-r2bottom-div);
	}
	.r2bottom span {font-size: var(--font-r2bottom-span);}
}
@media screen and (max-width: 470px) { 
	.r2bottom {height: var(--w860-height-r2bottom);}
	.r2bottom div {
		font-size: var(--w860-font-r2bottom-div); 
		max-height: var(--w860-height-r2bottom-div);
	}
	.r2bottom span {font-size: var(--w860-font-r2bottom-span);}
}
@media screen and (max-width: 400px) { 
	.recipe2cont {width: calc(100% - 10px);}
	.recipe2 {
		width: calc(50% - 10px); 
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 10px;
	}
	.recipe2cont .r2a:nth-of-type(5n) .recipe2 {
		margin-right: 5px;
	}
}
@media screen and (max-width: 330px) { 
	.r2bottom {height: var(--w330-height-r2bottom);}
	.r2bottom div {
		font-size: var(--w330-font-r2bottom-div); 
		max-height: var(--w330-height-r2bottom-div);
	}
	.r2bottom span {font-size: var(--w330-font-r2bottom-span);}
}