/** Products **/
	/** (=begin) General **/
		.product-grid .grid-header,
		.product-row .row-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;
		}

		.product-grid .grid-header .grid-title,
		.product-row .row-header .row-title {
			font-weight: bold;
			font-size: 1.3em;
		}

		.product-grid .grid-header .grid-link i,
		.product-row .row-header .row-link i {
			font-size: 10px;
		}
	/** (=end) General **/

	/** (=begin) Product Grid **/
		.product-grid {
			background-color: #f9f9f9;
			border-radius: 5px;
			box-shadow: 0 2px 5px #ddd;
			padding: 20px;
		}

		.product-grid .product-list {
			--col-width: calc(var(--box-size) - var(--col-gap));
			display: grid;
			grid-column-gap: var(--col-gap);
			grid-row-gap: 15px;
			justify-content: center;
			grid-template-columns: auto;
		}

		.product-grid .product-list .product-box {
			width: 100%;
			box-shadow: 0 1px 2px 1px #efefef;
		}
		@media screen and (min-width: 400px) {
			.product-grid .product-list {
				--box-size: 50%;
				--col-gap: 8%;
				grid-template-columns: var(--col-width) var(--col-width);
			}
		}
		@media screen and (min-width: 600px) {
			.product-grid .product-list {
				--col-gap: 5%;
				--box-size: 33%;
				grid-template-columns: var(--col-width) var(--col-width) var(--col-width);
			}
		}
		@media screen and (min-width: 992px) {
			.product-grid .product-list {
				--col-gap: 1.5%;
				--box-size: 25%;
				grid-template-columns: var(--col-width) var(--col-width) var(--col-width) var(--col-width);
			}
		}
		/*@media screen and (min-width: 992px) {
			.product-grid .product-list {
				--col-gap: 0.667%;
				--col-size: 20%;
				grid-template-columns: var(--box-size) var(--box-size) var(--box-size) var(--box-size) var(--box-size);
			}
		}*/
	/** (=end) Product Grid */

	/** (=begin) Product Row */
		.product-row {
			padding: 20px;
			background-color: #e1eeff;
			border-radius: 5px;
			margin-bottom: 15px;
			box-shadow: 0 2px 4px #ddd;
		}
		@media screen and (max-width: 600px) {
			.product-row .product-list {
				display: flex;
                gap: 10px;
				white-space: nowrap;
				overflow-x: auto;
				overflow-y: hidden;
			}
		}
		@media screen and (min-width: 601px) {
            .product-row .product-list {
                gap: 15px;
            }
        }

		.product-row .product-list .product-box-wrapper {
			width: 260px;
		}
        @media screen and (min-width: 601px) {
            .product-row .product-list .product-box-wrapper {
                margin-left: 15px;
            }
        }
		/*.product-row .product-list .product-box-wrapper:not(:first-child):not(:last-child) {
			margin-right: 10px;
		}*/
	/** (=end) Product Row */

	/** (=begin) Product Box */
		.product-box {
			position: relative;
			user-select: none;
			background-color: white;
			overflow: hidden;
			min-width: 150px;
			max-width: 260px;
			padding: 10px;
			border-radius: 8px;
		}

		.product-box .product-top-section .product-img-container {
			height: 210px;
			width: 100%;
			left: 0;
			top: 0;
		}
        @media screen and (max-width: 600px) {
            .product-box .product-top-section .product-img-container {
                height: 130px;
            }
        }

		.product-box a {
			display: block;
		}

		.product-box .product-top-section .product-img-container img {
			margin: 0 auto;
			width: 100%;
			height: 100%;
			object-fit: contain;
			background-color: white; /*For images whose width is not up to the container box*/
		}

		.product-box .product-top-section .sold-out-tag {
			position: absolute;
			left: 11%;
			top: -13%;
			transform: rotate(325deg) translate(-51%, 0px);
			background-color: #cf1f00;
			color: white;
			padding: 0 5px;
			width: 200px;
			text-align: center;
		}
		@media screen and (max-width: 600px) {
			.product-box .product-top-section .sold-out-tag {
				transform: rotate(315deg) translate(-43%, -40px);
			}
		}

		.product-box .product-top-section .discount-tag {
			position: absolute;
			top: 14px;
			right: 15px;
			background-color: tomato;
			color: white;
			padding: 2px 5px;
			font-size: 11px;
			border-radius: 3px;
		}

		.product-box .product-top-section .new-tag {
			position: absolute;
			top: 15px;
			left: 15px;
			width: 45px;
			height: 45px;
			border-radius: 50%;
			background-color: #3635aa;
			color: #ffffff;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-webkit-transition: all 0.5s ease;
			transition: all 0.5s ease;
			text-transform: uppercase;
			font-weight: 700;
			font-size: calc(10px + (14 - 10) * ((100vw - 320px) / (1920 - 320)));
		}

        .product-box .product-top-section .product-icon {
            display: flex;
            width: 100%;
            margin-top: 10px;
            display: -webkit-box;
            display: -ms-flexbox;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
        }
        @media screen and (min-width: 601px) {
            .product-box .product-top-section .product-icon {
                position: absolute;
                bottom: 0;
                opacity: 0;
                margin: 0;
                left: 0;
                -webkit-transition: all 0.5s ease;
                    transition: all 0.5s ease;
            }
            .product-box:hover .product-top-section .product-icon {
                opacity: 1;
                bottom: 45%;
            }
        }

		.product-box .product-top-section .product-icon a {
            --size: 35px;
			background-color: #ffffff;
			border: 1px solid #dddddd;
			color: #515151;
			width: var(--size);
			height: var(--size);
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			margin-left: 7px;
			-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
			-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;
			border-radius: 50%;
		}
        @media screen and (min-width: 601px) {
            .product-box .product-top-section .product-icon a {
                --size: 45px;
                -webkit-transition: all 0.5s ease;
					transition: all 0.5s ease;
            }
        }
		.product-box .cart-btn {
			background-color: var(--primary);
			color: var(--white);
		}

		.product-box .product-top-section .product-icon a:not(.disabled):hover {
			background-color: #3635aa;
			color: white;
			-webkit-transition: all 0.5s ease;
				transition: all 0.5s ease;
		}

		.product-box .product-icon a.disabled {
			background-color: ghostwhite;
			color: darkgrey;
		}

		.product-box .product-detail {
			text-align: center;
			background-color: #ffffff;
		}

		.product-box .product-detail .product-name {
			font-size: 1em !important;
			font-weight: 700;
			text-transform: capitalize;
            line-height: 1em;
			color: #444444;
			max-width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
        @media screen and (min-width: 601px) {
            .product-box .product-detail .product-name {
                margin: 5px 0;
            }
        }

		.product-box .product-detail [class*=price] {
			color: #3635aa;
			font-weight: 600;
			font-size: 0.9rem;
		}

		.product-box .product-detail [class*=price].striked {
			color: #484848;
			font-size: 0.75em !important;
			font-weight: normal;
			text-decoration: line-through;
		}

		.product-box .rating-field {
			justify-content: center;
            margin-top: 5px;
            margin-left: -7px;
		}

		@media screen and (max-width: 600px) {
			#product-boxes-container {
				white-space: nowrap;
				overflow: auto hidden;
			}

			.product-box {
				display: inline-block;
				width: 180px;
				overflow: visible; /* For the options dropdown */
			}

			.product-box .product-top-section .product-img-container {
				height: 180px;
				position: relative;
			}

			.product-box .product-top-section .new-tag {
				left: 2px;
				top: 2px;
				font-size: 8px;
				width: 25px;
				height: 25px;
				padding: 0;
			}

			.product-box .product-detail [class*=price].striked {
				display: none;
			}


		}
	/** (=end) Product Box */
/** End Product **/

/** Subcategory Box **/
	.category {
		position:relative;
		font-size:1rem
	}
	.category .img-container {
		display: block;
	}
	.category img {
		display:block;
		width:100%;
		height:auto;
		margin-left:auto;
		margin-right:auto
   }
	.category .category-name {
		margin-bottom:0.3rem;
		font-size:1.4rem;
		font-weight:600;
		line-height:1.2;
		color:inherit;
		text-transform:capitalize
   }
	.category .category-name a {
		color:inherit
	}
	.category .category-count {
		font-size:1.2rem;
		line-height:1.2
	}
   	.category-rounded .category-media {
		overflow: hidden;
		border-radius: 1rem
   	}

   	.category-content {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		text-align: center;
   	}
/** End Subcategory Box **/


/** Rating Field **/
	.rating-field {
		--color: #ffa800;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.rating-field > ul,
	.rating-field > ul li {
		display: inline-block;
		user-select: none;
	}

	.rating-field ul {
		margin-left:  5px;
	}

	.rating-field .star-filled,
	.rating-field .star-outline {
		font-style:  normal;
	}

	.rating-field .star-filled::before {
		color: var(--color);
	}

	.rating-field .star-outline::before {
		-webkit-text-stroke: 1px var(--color);
		color: transparent;
	}

	.rating-field.compact > ul {
		display: none;
	}
	.rating-field.compact .rating-value::before {
		content: var(--icon-star);
		color: #FFA800;
		margin-right: 5px;
		font-family: var(--icon-provider);
	}

	.rating-field.compact .rating-value::before {
		color: var(--color);
		margin-right: 5px;
	}
/** End Rating Field **/

/** Quantity Control **/
	.quantity-control {
		display: inline-flex;
		user-select: none;
	}

	.quantity-control .icon-block {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 25px;
	}

	.quantity-control .input-wrapper {
		display: inline-flex;
		height: 35px;
		border: 1px solid #dddddd;
		border-top-left-radius: 17.5px;
		border-top-right-radius: 17.5px;
		border-bottom-left-radius: 17.5px;
		border-bottom-right-radius: 17.5px;
		font-weight: 900;
		color: #444444;
		font-size: 16px;
		cursor: pointer;
		line-height: 1;
		background-color: #ffffff;
		overflow: hidden;
	}

	.quantity-control .input-wrapper input {
		-webkit-appearance: textfield;
		background-color: #f5f5f5;
		text-align: center;
		width: 70px;
		border: 0px solid #ddd;
		border-top: unset;
		border-bottom: unset;
		padding: 10px 15px;
		font-size: 14px;
	}

	.quantity-control .input-wrapper input:focus {
		outline: none;
	}
	/* Higher specificity to force white background */
	.quantity-control .input-wrapper input[readonly] {
		background-color: white !important;
	}
	@media screen and (max-width: 599px) {
		.quantity-control .input-wrapper input {
			width: 50px;
		}
	}

	.quantity-control .input-wrapper input::-webkit-outer-spin-button,
	.quantity-control .input-wrapper input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	.quantity-control .input-wrapper .qty-down,
	.quantity-control .input-wrapper .qty-up {
		cursor: pointer;
		line-height: 1;
		background-color: #ffffff;
		border: none;
		color: #555;
		border-radius: 50%;
		width: 30px;
		font-size: 14px;
	}

	.quantity-control .input-wrapper .qty-up::before,
	.quantity-control .input-wrapper .qty-down::before {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		padding: 0;
		height: 100%;
	}
/** End Quantity Control **/