.gra-purple {
    background: #41295a;
    background: -webkit-linear-gradient(to right, #2F0743, #41295a);
    background: linear-gradient(to right, #2F0743, #41295a);
}
.light20 {
	color: #4b5563 !important;
	--bs-bg-opacity: 0.2 !important;
}
.light30 {
	color: #4b5563 !important;
	--bs-bg-opacity: 0.3 !important;
}
.light50 {
	color: #4b5563 !important;
	--bs-bg-opacity: 0.5 !important;
}
.light70 {
	color: #4b5563 !important;
	--bs-bg-opacity: 0.7 !important;
}
.light10 {
	color: #4b5563 !important;
	--bs-bg-opacity: 0.1 !important;
}
.max-w {
	max-width: 64rem;
}
.min-w-0 {
	min-width: initial;
}
.min-w-22rem {
	min-width: 22rem;
}
.ms--3 {
    margin-left: -1rem !important;
}
.mb--3 {
	margin-bottom: -1rem !important;
}
.rounded-4 {
	border-radius: 0.4rem !important;
}
.rounded-5 {
	border-radius: 0.5rem !important;
}
.rounded-7 {
	border-radius: 0.7rem !important;
}
.rounded-tse {
	border-top-left-radius: 0.7rem !important;
	border-top-right-radius: 0.7rem !important;
}
.rounded-tse-5 {
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}
.rounded-bse-5 {
    border-bottom-left-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}
.rounded-bs {
	border-bottom-left-radius: 0.5rem !important;
}
.rounded-be {
	border-bottom-right-radius: 0.5rem !important;
}
.h-85 {
	height: 85% !important;
}
.mw-90 {
	max-width: 90% !important;
}
.mw-80 {
	max-width: 80% !important;
}
.mw-50 {
	max-width: 50% !important;
}
.mw-40 {
	max-width: 40% !important;
}
.w-15 {
    width: 15% !important;
}
.w-20 {
    width: 20% !important;
}
.w-85 {
    width: 75% !important;
}
@media (min-width: 768px) {
	.w-md-25 {
		width: 50% !important;
	}
	.w-md-50 {
		width: 50% !important;
	}
	.w-md-60 {
		width: 60% !important;
	}
	.w-md-75 {
		width: 75% !important;
	}
    .w-md-85 {
        width: 85% !important;
    }
	.w-md-100 {
		width: 100% !important;
	}
}
.square25 {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 25px !important;
	height: 25px !important ;
	margin: 0 !important;
	padding: 0 !important;
}
.top-20 {
	top: 20% !important;
}
.top-30 {
	top: 30% !important;
}
.bg-dotted {
	background-color: #f8f9fa;
	background-image: radial-gradient(circle, #dee2e6 1px, rgba(0,0,0,0) 1px);
	background-size: 1rem 1rem;
}
.shadow-top {
    box-shadow: rgba(0, 0, 0, 0.25) 0px -13px 20px -25px;
}
.shadow-bottom {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 13px 20px -25px;
}

.btn-blue {
    background-image: linear-gradient(to right, #457fca 0%, #5691c8  51%, #457fca  100%);
    border: none;
    transition: 0.5s !important;
    background-size: 200% auto !important;
    color: #eee;
}
.btn-blue:hover {
    color: #fff;
    background-position: right center !important;
}

.btn-gray {
    background-image: linear-gradient(to right, #757F9A 0%, #535a6c 51%, #757F9A  100%);
    border: none;
    transition: 0.5s !important;
    background-size: 200% auto !important;
    color: #eee;
}
.btn-gray:hover {
    background-position: center center !important;
}

/*custom*/
a:focus-visible,
a:active,
a:hover {
	outline: none !important;
	box-shadow: none !important;
}

.nav-link {
    padding: 0.5rem !important;
}
.nav-link:hover, .nav-link:focus {
    color: #f10000;
}
.nav-link.disabled {
    color: #9ca3af;
    pointer-events: none;
    cursor: default;
}

/*nav-dark*/
.nav-dark .nav-link {
    background: #eee;
    border: 0;
    border-radius: 0.25rem;
}
.nav-dark .nav-link.active,
.nav-dark .show > .nav-link {
    color: #fff;
    background-color: #4b5563;
}

/*link*/
.link {
    display: block;
    color: #4b5563;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .link {
        transition: none;
    }
}
.link:hover,
.link:focus {
    color: #f10000;
    /*text-decoration: underline;*/
}
.link.active {
    color: #f10000;
    font-weight: bold;
}
.link.disabled {
    color: #9ca3af;
    pointer-events: none;
    cursor: default;
}
.link-white {
    color: #fff;
}
.link-white:hover,
.link-white:focus {
    color: #d0d0ea;
    text-decoration: underline;
}
.link-white.active {
    color: #d0d0ea;
    font-weight: bold;
}
.link-blue {
    color: #4f5087;
}
.link-blue:hover,
.link-blue:focus {
    color: #4a4bd0;
}
.link-blue.active {
    color: #4a4bd0;
    font-weight: bold;
}
.link-red {
    color: #f10000;
}
.link-red:hover,
.link-red:focus {
    color: #c70707;
}
.link-red.active {
    color: #c70707;
    font-weight: bold;
}

/*collapse-link*/
a.collapse-link{
	transition: 160ms ease-in-out;
}
a.collapse-link:not(.collapsed){
	transform: rotate(180deg);
}

/*main*/
.top a {
    color: #d2d2d2;
}
.main {
	display: flex;
	position: relative;
	flex-direction: column;
	min-height: calc(var(--vh, 1vh) * 100);
}
.admin_bar .main {
	min-height: calc(var(--vh, 1vh) * 100 - 36px);
}
.main-nav {
	z-index: 995;
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 20px 25px -5px !important
}
.main-container {
	max-width: 1300px !important;
}
.no-sidebar {
	display: flex;
	position: relative;
	flex-direction: column;
}
.fixed-top {
    z-index: 800;
	-webkit-animation-name: headerAnimation;
	animation-name: headerAnimation;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.admin_bar .fixed-top {
	top:30px;
}
@-webkit-keyframes headerAnimation {
	from {
		transform: translate3d(0, -100%, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}
@keyframes headerAnimation {
	from {
		transform: translate3d(0, -100%, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

@media (max-width: 700px) {
	:root {
		--main-body-padding: 1rem;
	}
}

/*admin_bar*/
.scroll-margin-top {
	scroll-margin-top: 80px;
}
.admin_bar .scroll-margin-top {
	scroll-margin-top: 110px;
}

/*page*/
.page {
    padding-bottom: 1.5rem !important;
}
.page-title {
    margin-bottom: 1rem !important;
}
.page-center {
    margin: auto;
}
.page-value p{
    margin-bottom: 1.5rem;
}
.page-value,
.page-value p,
.page-value p span{
    font-size: 1.09375rem !important;
}
.page-value ul ul,
.page-value ul ol,
.page-value ol ul{
    margin-top: 1rem !important;
}
.page-value li{
    margin-bottom: 1rem !important;
}
.page-value img{
    max-width: 100% !important;
    height: auto !important;
}
.page-value :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 900;
    margin-bottom: 1.5rem !important;
}
.page-value pre {
    margin-bottom: 1.5rem !important;
    background: rgba(243, 244, 246, 0.65) !important;
}
.page-value pre,
.page-value pre code,
.page-value pre p,
.page-value-value pre span{
    font-weight: bolder !important;
    font-size: 0.875rem !important;
}

/*figure.caption*/
figure.caption {
    display: block;
    padding: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    background: #f3f4f6;
    border-radius: 0.3rem !important;
}
figure.align-center {
    text-align: center;
}
figure.caption img {
    margin-bottom: 0.5rem;
    line-height: 1;
    border-radius: 0.3rem !important;
}
figure.caption figcaption {
    font-size: 0.875em;
    color: #4b5563;
}

/*splide__arrow*/
.splide__arrow--prev{
    left: -0.5em;
}
.splide__arrow--next{
    right: -0.5em;
}
.splide__arrow {
    background: #fff;
    opacity: 1;
}
.splide__arrow:disabled {
    opacity: 0;
}
.splide-banner .splide__arrow--prev{
    left: -1em;
}
.splide-banner .splide__arrow--next{
    right: -1em;
}

/*card image*/
.splide-items .card img,
.products .card img {
    -webkit-transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
}
.splide-items .card img:hover,
.products .card img:hover,
.splide-items .card img:focus,
.products .card img:focus {
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}

/*offcanvas-product*/
.offcanvas-product {
    max-width: 95% !important;
    height: 95% !important;
    margin: 0 auto;
    border-top-left-radius: 0.3rem !important;
    border-top-right-radius: 0.3rem !important;
}

@media (min-width: 768px) {
    .offcanvas-product {
        max-width: 80% !important;
    }
}
.offcanvas-product .product-image {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
}
.offcanvas-product .product-image img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*promo*/
.promo1 {
    border-radius: 1rem;
    background: #0938b0;
    background: linear-gradient(90deg, rgba(9, 56, 176, 1) 0%, rgba(28, 96, 214, 1) 50%, rgba(18, 38, 166, 1) 100%);
}
.promo3 {
    background: #6C2770;
    background: linear-gradient(90deg, rgba(108, 39, 112, 1) 0%, rgba(180, 28, 214, 1) 50%, rgba(108, 39, 112, 1) 100%);
}

/*options_radio*/
.options_radio input{
    display: none;
}
.options_radio span{
    color: #000;
    background-color: #f3f4f6;
    border-color: #f3f4f6;
}
.options_radio span:hover {
    background-color: #f5f6f7;
    border-color: #f4f5f7;
}
.options_radio .active span{
    /*background-color: #facc15;
    border-color: #facc15;*/
    background-color: #111;
    border-color: #111;
    color: #eee;
}
.options_radio .active span:hover {
    /*background-color: #fbd438;
    border-color: #fbd12c;*/
    background-color: #111;
    border-color: #111;
    color: #eee;
}

/*cart_add*/
.cart_add {
    color: #16a34a;
    background-color: rgba(22, 163, 74, 0.18);
    border-color: #eee;
}
.cart_add:hover {
    color: #fff;
    background-color: #16a34a;
}
.cart_added {
    color: #fff;
    background-color: #16a34a;
    border-color: #16a34a;
}
.cart_added:hover {
    background-color: #138b3f;
    border-color: #12823b;
}
.cart_added .state-add,
.cart_add .state-added {
    display: none !important;
}
.cart_added .state-added {
    display: block !important;
}

/*cart-stiky*/
.cart-stiky {
    /*position: fixed !important;
    z-index: 1500 !important;
    bottom: 0 !important;
    left: 50%;
    transform: translate(-50%, -50%)*/;
    /*box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 36px !important;*/
}

/*radio-list*/
.radio-list .form-check-input {
    outline: none !important;
}
.radio-list .form-check-input:checked {
    background-color: #ffe6d7 !important;
    border-color: #ffe6d7 !important;
}
.radio-list label {
    width: 100%;
    color: #4b5563;
    background-color: #f3f4f6;
    border-color: #f3f4f6;
    cursor: pointer;
}
.radio-list label:hover {
    background-color: #f5f6f7;
    border-color: #f4f5f7;
}
.radio-list .active label {
    color: #000;
    background-color: #ffd7dc;
    border-color: #ffd7dc;
}
.radio-list .active label:hover {
    background-color: #fdc8ce;
    border-color: #fdc8ce;
}
.radio-list .disabled label {
    color: #000;
    background-color: #d5d5d5;
    border-color: #464646;
    opacity: 0.3;
}
.radio-list input {
    display: none;
}

/*delivery_time*/
.delivery_time .form-check-input {
    outline: none !important;
}
.delivery_time .form-check-input:checked {
    background-color: #ffe6d7 !important;
    border-color: #ffe6d7 !important;
}
.delivery_time label {
    width: 100%;
    color: #4b5563;
    background-color: #f3f4f6;
    border-color: #f3f4f6;
    cursor: pointer;
}
.delivery_time label:hover {
    background-color: #f5f6f7;
    border-color: #f4f5f7;
}
.delivery_time .active label{
    color: #000;
    background-color: #ffe6d7;
    border-color: #ffe6d7;
}
.delivery_time .active label:hover {
    background-color: #ffe6d7;
    border-color: #ffe6d7;
}

/*address_type*/
.address_type .form-check-input {
    outline: none !important;
}
.address_type .form-check-input:checked {
    background-color: #ffe6d7 !important;
    border-color: #ffe6d7 !important;
}
.address_type label {
    width: 100%;
    color: #4b5563;
    background-color: #f3f4f6;
    border-color: #f3f4f6;
    cursor: pointer;
}
.address_type label:hover {
    background-color: #f5f6f7;
    border-color: #f4f5f7;
}
.address_type .active label{
    color: #000;
    background-color: #ffe6d7;
    border-color: #ffe6d7;
}
.address_type .active label:hover {
    background-color: #ffe6d7;
    border-color: #ffe6d7;
}

/*delivery_schedule*/
.delivery_schedule select{
    width: auto !important
}

.cart-summary .card:after {
    background:
            linear-gradient(45deg, transparent 33.333%, #fff 33.333%, #fff 66.667%, transparent 66.667%),
            linear-gradient(-45deg, transparent 33.333%, #fff 33.333%, #fff 66.667%, transparent 66.667%) !important;
    background-position: 0 -20px !important;
    background-size: 20px 40px !important;
    bottom: -10px;
    content: "";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    right: 0;
    top: auto;
}

.order-summary .card:after {
    background:
            linear-gradient(45deg, transparent 33.333%, #fff 33.333%, #fff 66.667%, transparent 66.667%),
            linear-gradient(-45deg, transparent 33.333%, #fff 33.333%, #fff 66.667%, transparent 66.667%) !important;
    background-position: 0 -20px !important;
    background-size: 20px 40px !important;
    bottom: -10px;
    content: "";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    right: 0;
    top: auto;
}

.square25 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 25px !important;
    height: 25px !important ;
    margin: 0 !important;
    padding: 0 !important;
}

.tips_value input{
    display: none;
}
.tips_value span{
    color: #000;
    background-color: #f3f4f6;
    border-color: #f3f4f6;
}
.tips_value span:hover {
    background-color: #f5f6f7;
    border-color: #f4f5f7;
}
.tips_value .active span{
    background-color: #facc15;
    border-color: #facc15;
}
.tips_value .active span:hover {
    background-color: #fbd438;
    border-color: #fbd12c;
}

.list-group-item.active {
    background-color: #f10000;
    border: none !important;
    color: #fff;
    border-radius: 0.3rem !important;
}

.nav-link.active {
    color: #f10000;
}

.splide__track--nav>.splide__list>.splide__slide.is-active {
    border-radius: 0.5rem !important;
}

.spec-value table{
    text-align: center;
}
.spec-value table p{
    margin: 0;
    padding: 0;
}
.spec-value table > :not(caption) > * {
    border-width: 1px 0;
}
.spec-value table > :not(caption) > * > * {
    border-width: 0 1px;
}