body {
	font-family: "Open Sans", sans-serif;
}

/* stylelint-disable-next-line selector-id-pattern */
#__next {
	/* min-height: 100vh; */
	position: relative;
}

.toast-add-item {
	position: absolute;
	top: 100%;
	right: 0;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
	text-transform: uppercase;
}

h1 {
	font-family: Italiana, serif;
}

h2 {
	font-family: Italiana, serif;
}

h3 {
	font-family: Quicksand, sans-serif;
}

/* General */
a {
	text-decoration: none;
	color: #000;
	font-weight: 500;
	position: relative;
}

a:hover {
	color: #787878;
}

a::before {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 0;
	height: 2px;
	background-color: #000;
	transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) and (pointer: fine) {
	a:hover::before {
		left: 0;
		right: auto;
		width: 100%;
	}

	a:hover {
		color: #787878;
	}
}

.btn {
	text-transform: uppercase;
	box-shadow: 0 0 5px #555;
	background-position: center;
	transition: background 0.8s;
}

.btn-dark:hover {
	background: #464646 radial-gradient(circle, transparent 1%, #464646 1%) center/15000%;
	border-color: #464646;
}

.btn-dark:active {
	background-color: #5e5e5e;
	border-color: #5e5e5e;
	background-size: 100%;
	transition: background 0s;
}

.btn-outline-dark:hover {
	background: #464646 radial-gradient(circle, transparent 1%, #464646 1%) center/15000%;
	border-color: #464646;
}

.btn-outline-dark:active {
	background-color: #5e5e5e;
	border-color: #5e5e5e;
	background-size: 100%;
	transition: background 0s;
}

.btn-light:hover {
	background: #f1f1f1 radial-gradient(circle, transparent 1%, #f1f1f1 1%) center/15000%;
	border-color: #f1f1f1;
}

.btn-light:active {
	background-color: #f1f1f1;
	border-color: #f1f1f1;
	background-size: 100%;
	transition: background 0s;
}

.btn-dark:focus,
.btn-outline-dark:focus {
	box-shadow: none;
}

.btn-dark:active:focus,
.btn-outline-dark:active:focus {
	box-shadow: none;
}

.app-container {
	margin: 2rem auto 0;
	max-width: 90vw;
	padding-top: 2rem;
}

.app-container h1 {
	margin-bottom: 2rem;
}

/* Utility */
.unselectable {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.zoom-effect {
  overflow: hidden;
}

.zoom-effect img {
  transition: transform .3s ease;
}

.zoom-effect:hover img {
  transform: scale(1.1);
}


/* Bootstrap Component */

.nav-link {
	color: #000;
}

.nav-link:hover {
	color: #555;
}

.nav-pills .nav-link.active {
	background-color: #000;
}

.nav-pills .active {
	border: #000;
}

.form-check-input:checked {
	background-color: #000;
	border-color: #000;
}

.breadcrumb {
	border: 0;
	padding-left: 0;
}

/* Custom Compoent */

/* image swiper */
/* stylelint-disable-next-line selector-class-pattern */
.mySwiper {
	box-shadow: 0 0 5px #555;
}

.custom-swiper .swiper-pagination-bullet-active {
	background: #000;
}

.custom-swiper .swiper-button-next,
.custom-swiper .swiper-button-prev {
	color: #000;
	height: 100%;
	top: 0;
	width: 5%;
	margin-top: 0;
}

.custom-swiper .swiper-button-next:hover,
.custom-swiper .swiper-button-prev:hover,
.custom-swiper .swiper-button-next:focus,
.custom-swiper .swiper-button-prev:focus {
	background-color: rgb(85 85 85 / 20%);
}

.custom-swiper .swiper-button-next {
	right: 0;
}

.custom-swiper .swiper-button-prev {
	left: 0;
}

.custom-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: #000;
}

/* Mobile Screen */
@media only screen and (width <= 576px) {
	.custom-swiper .swiper-button-next,
	.custom-swiper .swiper-button-prev {
		padding: 0 1.5rem;
	}
}

/* color selector */
.color-selector-outer {
	border: 0 solid #000;
	border-radius: 50%;
	margin: 5px 15px 5px 5px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1/1;
}

.color-selected {
	border-width: 1px !important;
}

.color-selector-outer:hover {
	border-width: 1px !important;
}

.color-selector-inner {
	border-radius: 50%;
	width: 80%;
	height: 80%;
	display: block;
	text-align: center;
}

/* size selector */
.size-selector {
	border: solid 1px #000;
	margin-right: 15px;
	cursor: pointer;
	display: flex;
	background-color: #fff;
	color: #000;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.size-selector:hover {
	background-color: #000;
	color: #fff;
}

/* quantity-selector */
.quantity-selector .qty-btn {
	border: 1px solid #000;
	padding: 5px 12px;
	margin-right: 15px;
	font-size: 1.5rem;
	height: 35px;
	width: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
}

.quantity-selector .increase-btn {
	margin-right: 0;
}

.quantity-selector .quantity-box {
	width: 85px;
	margin-right: 15px;
}

.quantity-selector .quantity-box #cart-quantity {
	width: 5px;
	margin-right: 15px;
}

.quantity-selector .quantity-box .form-control {
	border: 1px solid #000;
	max-height: 35px;
}

.quantity-selector .qty-btn:hover {
	background-color: #000;
	color: #fff;
}

/* review */
.review-name {
	font-family: Quicksand, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	margin-bottom: 0;
}

.review-title {
	font-family: Quicksand, sans-serif;
	font-size: 1.25rem;
	font-weight: 500;
	margin-bottom: 0;
}

.review-comment {
	font-size: 1rem;
	color: #555;
}

/* Header */
header {
	background-color: white;
	font-family: "Open Sans", sans-serif;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

.navbar {
	position: relative;
	z-index: 1030;
	background-color: #fff;
	height: 75px;
	box-shadow: 0 2px 4px 0 rgb(227 225 224 / 60%);
	transition: box-shadow 200ms;
}

.menu-container {
	padding: 0;
	height: 100%;
}

.header-logo {
	font-family: Italiana, serif;
	font-size: 2rem;
}

.icon-menu {
	font-size: 1.25rem;
}

.icon-menu a {
	color: #000 !important;
	font-size: 0;
}

.icon-menu .fa-circle-user,
.icon-menu .fa-basket-shopping {
	font-size: 1.25rem;
}

.icon-menu .cart-icon #notification {
	font-size: 0.5rem;
	font-weight: 900;
	padding: 12%;
	opacity: 1;
	visibility: visible;
	transition: opacity 250ms ease-in-out;
	top: 15%;
	left: 60%;
}

/* category dropdown */
.category-dropdown-menu {
	position: absolute;
	top: -5000px;
	left: 0;
	margin: 0.125rem 0 0;
	z-index: 1000;
	width: 100%;
	padding: 0;
	color: #222;
	background-color: #fff;
	box-shadow: 0 2px 4px 0 rgb(227 225 224 / 60%);
	display: grid;
	grid-template-columns: 1fr 1fr;
	transition: all 0.7s ease-in-out;
}

.dropdown-menu-img-wrapper {
	position: relative;
	width: 50vw;
	height: 100%;
	aspect-ratio: 3/2;
	cursor: pointer;
}

.dropdown-menu-img-wrapper img {
	transition: all 0.5s ease-in-out;
}

.dropdown-menu-img-wrapper:hover img {
	transform: scale(1.1);
}

.dropdown-menu-img-wrapper .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	transition: background-color 0.5s ease-in-out;
	z-index: 1;
}

.dropdown-menu-img-wrapper:hover .overlay {
	background-color: rgb(0 0 0 / 15%);
}

/* stylelint-disable-next-line selector-class-pattern */
.category-dropdown-menu .dropdown-menu-img__cover {
	width: 100%;
	height: 100%;
	position: relative;
	opacity: 1;
	visibility: visible;
	transition: opacity 650ms ease-in-out;
}

/* stylelint-disable-next-line selector-class-pattern */
.category-dropdown-menu .dropdown-menu-img__hover {
	width: 34%;
	height: 100%;
	position: absolute;
	top: 0;
	opacity: 0;
	visibility: visible;
	transition: opacity 650ms ease-in-out;
}

.category-dropdown-menu .category-dropdown-wrapper {
	column-count: 2;
	text-align: left;
	padding: 2rem;
}

.category-dropdown-menu .category-dropdown-wrapper .menu-parent,
.menu-child {
	padding-left: 0;
	list-style: none;
	color: #222;
}

.category-dropdown-menu .category-dropdown-wrapper .menu-parent-item {
	margin-bottom: 1.2rem;
}

.category-dropdown-menu .category-dropdown-wrapper .menu-parent-link {
	text-transform: uppercase;
	font-weight: 500;
	font-size: 1.75rem;
	line-height: 1.8rem;
	margin-bottom: 0.8rem;
	display: inline-block;
}

.category-dropdown-menu .category-dropdown-wrapper .menu-child-link {
	position: static;
	margin-left: 1rem;
	text-transform: none;
	font-weight: normal;
	font-size: 1rem;
	margin-bottom: 0.625rem;
}

/* account dropdown */
.account-dropdown-menu {
	position: absolute;
	top: 55px;
	right: 0;
	z-index: 1000;
	min-width: 10rem;
	margin: 0;
	color: #222;
	text-align: left;
	list-style: none;
	background-color: #fff;
	border: 1px solid rgb(0 0 0 / 10%);
}

.account-dropdown-menu .account-dropdown-item {
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	display: block;
	width: 100%;
	clear: both;
	font-weight: 400;
	color: #222;
	text-align: inherit;
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
}

.account-dropdown-menu .account-dropdown-item:hover {
	background: rgb(0 0 0 / 10%);
}

.account-dropdown-menu .account-dropdown-title {
	text-transform: uppercase;
	font-weight: 500;
	font-family: Quicksand, sans-serif;
	font-size: 1.5rem;
	user-select: none;
}

.sub-menu {
	align-items: center;
	height: 100%;
	text-transform: uppercase;
}

.sub-menu a {
	position: static;
	height: 100%;
	display: flex;
	align-items: center;
}

.sub-menu a:hover {
	color: #000;
	font-weight: 600;
}

.sub-menu .nav-link.active {
	color: rgb(0 0 0 / 55%) !important;
}

#dropdown-menu .dropdown-menu {
	right: 0;
	left: auto;
}

.offcanvas-body {
	padding: 0;
}

.offcanvas-body-upper {
	text-transform: uppercase;
	font-size: 1.3rem;
}

.offcanvas-start {
	width: 370px;
}

.offcanvas-link {
	padding: 0.5rem 1rem !important;
	display: flex;
	justify-content: space-between;
}

.offcanvas a:active {
	background-color: #e8e8e8;
}

.offcanvas-body-lower a {
	padding: 0.5rem 0.25rem;
}

.offcanvas-body-lower a:active {
	outline: #bbb solid 3px;
	border-radius: 9px;
}

/* Home page */
.menu-tab {
	background-color: #ffffffb5;
	z-index: 4;
	position: absolute;
	inset: 90% 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: auto;
	opacity: 0;
}

.menu-tab-mobile {
	margin: 1rem 0;
}

.slide-in-bottom {
	-webkit-animation: slide-in-bottom 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-in-bottom 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-out-bottom {
	-webkit-animation: slide-out-bottom 0.25s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	animation: slide-out-bottom 0.25s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.add-to-cart-btn {
	padding: 6px 25px;
	text-transform: uppercase;
	font-weight: 600;
	min-width: 160px;
}

.add-to-cart-btn-lg {
	display: block;
	text-transform: uppercase;
	font-weight: 600;
	border: 1px solid black;
	margin: 0.5rem 0;
}

.add-to-cart-btn:hover {
	background-color: #000;
	color: #fff;
}

.add-to-cart-btn:focus {
	box-shadow: none;
	outline: 0;
}

.ads-container {
	margin: 0;
}

.ads-img {
	width: 100%;
	height: 100%;
	position: relative;
	aspect-ratio: 16/9;
	cursor: pointer;
	opacity: 1;
	visibility: visible;
	transition: opacity 650ms ease-in-out;
}

.product-card {
	border: 0;
}

.product-img {
	position: relative;
}

/* stylelint-disable-next-line selector-class-pattern */
.product-img__cover {
	width: 100%;
	height: 100%;
	position: relative;
	aspect-ratio: 6/9;
	cursor: pointer;
	opacity: 1;
	visibility: visible;
	transition: opacity 650ms ease-in-out;
}

/* stylelint-disable-next-line selector-class-pattern */
.product-img__hover {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	cursor: pointer;
	opacity: 0;
	visibility: visible;
	transition: opacity 650ms ease-in-out;
}

.card-body-wrapper {
	position: relative;
	z-index: 5;
	background-color: white;
	padding: 1rem 0.5rem;
}

.card-product-title {
	text-transform: uppercase;
	text-decoration: none;
	color: black;
	padding: 0;
}

.card-product-title a {
	color: black;
	text-decoration: none;
	font-weight: 400;
}

.card-product-price {
	padding: 0;
	display: flex;
	flex-direction: column;
}

.card-product-price h4 {
	font-weight: 400;
}

.card-product-reviews {
	font-size: 0.9rem;
	padding: 0;
}

.card-product-color {
	font-size: 0.9rem;
	padding: 0;
}

.breadcrumb-label {
	padding: 0 3rem;
}

/* Tablet Screen */
@media only screen and (width <= 576px) {
	.breadcrumb-label {
		padding: 0 1rem;
	}
}

/* Mobile Screen */
@media only screen and (width <= 425px) {
	.add-to-cart-btn {
		padding: 0 15px;
		font-size: 0.6rem;
	}
}

/* Category Page */
.category-header {
	font-family: Italiana, serif;
	padding-top: 2rem;
	margin: 0 0 1rem;
	text-align: center;
}

/* Product page */
#product-page {
	padding-bottom: 2rem;
	border-bottom: 1px solid rgb(0 0 0 / 12.5%);
}

#product-page .list-group-item {
	border: 0;
}

#product-page .product-main-img {
	position: absolute;
	opacity: 0;
	visibility: visible;
	top: 0;
}

#product-page .toggle-main-img {
	position: relative;
	opacity: 1;
	aspect-ratio: 6/9;
	transition: opacity 650ms ease-in-out;
	box-shadow: 0 0 5px #555;
}

#product-page .product-side-img {
	aspect-ratio: 6/9;
	margin-bottom: 1rem;
	position: relative;
	width: 100%;
}

#product-page .product-side-img:hover {
	cursor: pointer;
	box-shadow: rgb(0 0 0 / 16%) 0 3px 6px, rgb(0 0 0 / 23%) 0 3px 6px;
}

#product-page .toggle-side-img {
	box-shadow: rgb(6 24 44 / 40%) 0 0 0 2px, rgb(6 24 44 / 65%) 0 4px 6px -1px, rgb(255 255 255 / 8%) 0 1px 0 inset;
}

#product-page .product-price {
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
}

#product-page .product-desc {
	font-size: 1rem;
	font-weight: 100;
	color: #555;
}

#product-page .product-page-box {
	font-family: Quicksand, sans-serif;
	padding: 0.5rem;
}

#product-page .product-page-box h5 {
	text-transform: uppercase;
	font-weight: 300;
}

#product-page .coupon-text {
	width: 70%;
}

#product-page .coupon-button {
	width: 30%;
}

.profile-img {
	position: relative;
	padding: 0;
}

.text-area {
	height: 100px;
}

.trash-btn {
	position: absolute;
	left: 85%;
	width: 35px;
	height: 35px;
}

.description-tabs {
	cursor: pointer;
	outline: 1px solid #000;
	text-transform: uppercase;
}

#size-chart {
	display: inline-flex;
}

.description-panel {
	padding: 0 1.5rem;
}

.description-section {
	margin-bottom: 2rem;
}

.description-section h6 {
	font-family: "Lucida Sans", sans-serif;
	font-size: 1.15rem;
}

.description-section p {
	color: #555;
}

/* Mobile, Tablet Screen */
@media only screen and (width <= 576px) {
	#product-page .toggle-main-img {
		box-shadow: none;
	}

	#product-page .product-side-img {
		box-shadow: none;
	}
}

/* Dashboard */
.admin-dashboard .nav-link {
	cursor: pointer;
	color: #000;
	text-transform: uppercase;
}

.admin-dashboard .nav-link:hover {
	outline: 1px solid #000;
}

.admin-dashboard .nav-link.active {
	cursor: pointer;
	color: #fff;
	background-color: #000;
}

.admin-dashboard .nav-pills .active {
	cursor: pointer;
	border: none;
}

.carousel-product-parent {
	width: 100%;
}

.carousel-product-item {
	position: relative;
	aspect-ratio: 6/9;
}

.dashboard-profile-img {
	position: relative;
	aspect-ratio: 1/1;
}

/* Cart page */
#cart-items {
	font-size: 1.2rem;
}

.cart-img {
	position: relative;
	aspect-ratio: 6/9;
	cursor: pointer;
}

#cart-items .cart-product-title {
	font-size: 1.2rem;
	text-transform: uppercase;
}

#cart-items .cart-price {
	width: 25%;
}

#cart-items .cart-quantity {
	width: 10px;
	margin-right: 15px;
}

#cart-items .cart-trash-btn {
	width: 35px;
	height: 35px;
}

#cart-items .form-select-sm {
	width: 50%;
}

.order-id {
	max-width: 80%;
}

/* Tablet Screen */
@media only screen and (width <= 768px) {
	.order-id {
		font-size: 1.5rem;
	}
}

/* Tablet Screen */
@media only screen and (width <= 576px) {
	#cart-items .cart-price {
		width: 100%;
	}
}

/* Mobile Screen */
@media only screen and (width <= 425px) {
	.order-id {
		font-size: 1.2rem;
	}

	#cart-items .cart-product-title {
		font-size: 1rem;
	}

	#cart-items h6 {
		font-size: 1rem;
	}

	#checkout-step .nav-item {
		font-size: 0.65rem;
		width: 55px;
	}

	#checkout-step .nav-item a {
		padding: 5px 8px;
		text-align: center;
	}
}

/* Sign In & Sign Up Page */
.register-box {
	box-shadow: 1px 1px 12px rgb(44 44 44);
	margin: 100px auto 0;
	padding: 0;
	max-width: 1000px;
}

.register-box .row {
	margin: 0;
}

.register-box .row .col:nth-child(2) {
	padding: 2rem;
}

.register-box h1 {
	font-family: Italiana, serif;
}

.banner-img {
	position: relative;
	min-height: 80vh;
	padding: 0;
	cursor: pointer;
}

.register-box .gender-age-form {
	margin: 1rem 0;
}

.register-box .gender-form {
	padding-right: 1rem;
	padding-left: 0;
}

.register-box .age-form {
	padding-right: 0;
	padding-left: 1rem;
}

/* Mobile, Tablet Screen */
@media only screen and (width <= 768px) {
	.register-box {
		max-width: none;
		width: auto;
		margin: 100px 15px 0;
	}

	.banner-img {
		display: none;
	}

	.register-box .gender-age-form {
		margin: 0;
	}

	.register-box .gender-form {
		padding-right: 0;
		margin-bottom: 1rem;
	}

	.register-box .age-form {
		padding-left: 0;
		margin-bottom: 1rem;
	}
}

/* Footer */
footer {
	background: #fff;
	padding: 0;
	color: #000;
}

.upper-footer {
	padding: 2rem;
	height: auto;
	margin: auto 0;
}

.topic-footer {
	margin-bottom: 1.5rem;
}

.topic-footer h5 {
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 20px;
}

.footer-lists {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-lists li {
	margin: 5px 0;
}

.footer-lists li a {
	text-decoration: none;
	font-weight: normal;
}

.footer-newsletter {
	display: flex;
	flex-direction: row;
}

.social-media {
	margin-top: 10px;
}

.social-media a {
	margin-right: 5px;
	transition: all 0.3s ease-out;
	transition-duration: 0.8s;
}

.lower-footer {
	padding: 2rem 0;
	text-align: center;
	border-top: 1px solid;
}

.lower-footer p {
	text-align: center;
}

/* Mobile Screen */
@media only screen and (width <= 486px) {
	.footer-newsletter {
		flex-direction: column;
	}
}

/* Mobile Screen */
@media only screen and (width >= 768px) and (width <= 1200px) {
	.footer-newsletter {
		flex-direction: column;
	}
}

/* ----------------------------------------------
 * Generated by Animista on 2023-4-21 15:54:49
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-bottom {
	0% {
		-webkit-transform: translateY(100px);
		transform: translateY(100px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
	}

	@keyframes slide-in-bottom {
	0% {
		-webkit-transform: translateY(100px);
		transform: translateY(100px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

/**
 * ----------------------------------------
 * animation slide-out-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes slide-out-bottom {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}

	100% {
		-webkit-transform: translateY(100px);
		transform: translateY(100px);
		opacity: 0;
	}
	}

	@keyframes slide-out-bottom {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}

	100% {
		-webkit-transform: translateY(100px);
		transform: translateY(100px);
		opacity: 0;
	}
}
