:root {
    --transition: all 0.3s;

    --clr-bg: #EBEBEC;
    --clr-light-bg: #F6F6F6;
    --clr-text: #4D4D4D;
    --clr-black: #0D0D0D;

    --fs-14: 14px;
    --fs-16: 16px;
    --fs-28: 28px;

    --fw-400: 400;
    --fw-500: 500;
    --fw-700: 700;
}

* {
    -webkit-tap-highlight-color: transparent !important;
}

html {
    scrollbar-gutter: stable;
}

select,
input,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
button:focus,
button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

a:focus-visible {
    outline: none !important;
}

p:last-child {
    margin-bottom: 0 !important;
}

p:empty {
    display: none;
}

/*Button Order Arrow*/
.button-hover-arrow svg {
    width: 18.5px !important;
    height: 18.5px !important;
    transition: var(--transition);
    opacity: 0.5;
}

.button-hover-arrow svg line {
    transition: var(--transition);
    transform: scaleX(0);
    transform-origin: 216px 128px;
}

.button-hover-arrow a:hover svg {
    opacity: 1;
    transform: translateX(3px);
}

.button-hover-arrow a:hover svg line {
    transform: scaleX(1);
    stroke: white;
}

/*Menu*/
.main-header>.e-con-inner {
    position: relative;
}

.main-header div:not(.e-con-inner, .elementor-lightbox, .elementor-shape, .custom-cart-dropdown, .elementor-menu-cart__main, .elementor-menu-cart__productsm, .elementor-menu-cart__close-button, .elementor-widget-woocommerce-menu-cart, .product-remove, .remove_from_cart_button, .woocommerce-cart-form__cart-item) {
    position: unset !important;
}

#main-menu {
    position: absolute !important;
    inset: 0;
    top: 90%;
    z-index: 999;
    height: auto;
    visibility: hidden;
}

#main-menu .main-menu-wrapper {
    height: auto;
    border-radius: 32px;
    background-color: white;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    padding: 24px 20px;
    overflow-y: auto;
}

#main-menu .main-menu-wrapper {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

#main-menu .main-menu-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
}

#main-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 4px;

}

#main-menu ul li {
    width: fit-content;
}

#main-menu ul li a {
    color: var(--clr-text);
    padding: 8px 12px;
    border-radius: 10px;
    transition: var(--transition);
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    line-height: 22px;
    height: 40px;
    display: flex;
    align-items: center;
}

#main-menu ul li a:hover {
    background-color: var(--clr-light-bg);
}

#main-menu ul li.current_page_item a {
    background-color: var(--clr-bg);
}

#main-menu ul li.current_page_item a:hover {
    background-color: var(--clr-light-bg);
}

.nav-hamberger {
    display: flex;
    align-items: center;
    height: 10px;
    gap: 5px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    transition: var(--transition);
    border-radius: 10px;
}

.nav-hamberger:hover {
    background-color: var(--clr-bg);
}

.nav-hamberger .nav-hamberger-icon {
    position: relative !important;
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-hamberger .nav-hamberger-icon svg {
    height: 100%;
}

#navigation.active .nav-hamberger svg path,
#navigation .nav-hamberger svg path {
    transition: transform 0.15s ease-in-out;
}

#navigation .nav-hamberger svg path:first-child {
    transform: translateX(0) translateY(0) rotate(0deg);
}

#navigation .nav-hamberger svg path:last-child {
    transform: translateX(0) translateY(0) rotate(0deg);
}

#navigation.active .nav-hamberger svg path:first-child {
    transform: translateX(13px) translateY(-4px) rotate(45deg);
}

#navigation.active .nav-hamberger svg path:last-child {
    transform: translateX(-11px) translateY(13px) rotate(-45deg);
}

#navigation .main-menu-wrapper {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease-in-out;
    visibility: hidden;
}

#navigation.active .main-menu-wrapper {
    opacity: 1;
    transform: translateY(0px);
    visibility: visible;
}

.elementor-element.box--hours {
    display: none;
}

.product-list .loop-item--product img {
    aspect-ratio: 1 / 0.8;
    object-fit: cover;
}

.product-list .loop-item--product .elementor-widget-woocommerce-product-add-to-cart {
    margin-top: auto;
}

/*Cart*/
/* .custom-cart-toggle svg {
    width: 32px !important;
    height: 32px !important;
}

#elementor-menu-cart__toggle_button {
    font-size: 0 !important;
    border: 0 !important;
    padding: 0 !important;
}

.elementor-menu-cart__toggle_button:before {
    content: '';
    background-image: url('./assets/img/cart.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
}

.elementor-menu-cart--items-indicator-bubble .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter] {
    top: -20px !important;
    font-size: 15px !important;
    background-color: #4d4d4d !important;
    line-height: 24px !important;
} */


/*Shop*/
.shop-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 80px 20px;
}

.shop-container .shop-sidebar {
    position: sticky;
    top: 70px;
    transition: all 0.3s ease-in-out;
    background-color: white;
    z-index: 99;
}

.shop-container .shop-content {
    width: 100%;
}

.shop-container .shop-content .products {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.shop-container .shop-content .products:before,
.shop-container .shop-content .products:after {
    display: none;
}

.category-section {
    width: 100%;
    max-width: 100%;
}

.category-section .product-lists {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}

.product-item .featured-image img {
    aspect-ratio: 4/3;
    border-radius: 16px;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-item .featured-image {
    position: relative;
}

.product-item .featured-image .add_to_cart_button {
    position: absolute;
    bottom: 8px;
    right: 8px;
    border-radius: 10px;
    background-color: white;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: black;
}

.product-item .featured-image .add_to_cart_button .cart-quantity {
    color: black;
    font-weight: 400;
}

.category-section h2 {
    font-size: var(--fs-28);
    font-weight: var(--fw-500);
    color: var(--clr-black);
    margin: 0 0 24px 0;
}

.product-item h3 {
    font-size: var(--fs-16);
    font-weight: var(--fw-700);
    color: var(--clr-black);
    margin: 0 0 4px 0 !important;
}

.product-item .woocommerce-Price-amount.amount {
    font-weight: var(--fw-500);
    font-size: var(--fs-16);
    color: var(--clr-black);
}

#search-results {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}

.no-results {
    grid-column: span 12;
}

.no-results strong {
    font-weight: var(--fw-500);
    font-size: var(--fs-28);
    margin-bottom: 20px;
    display: block;
}

.woocommerce-notices-wrapper {
    display: none !important;
}

.shop-sidebar-wrapper {
    position: sticky;
    top: 87px;
    display: flex;
    align-items: center;
    gap: 0;
	flex-direction: column
}

.admin-bar .shop-sidebar {
    position: sticky;
    top: 102px;
    padding: 10px 0;
}

.product-content .product-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-14);
    font-weight: var(--fw-500);
    color: var(--clr-text);
}

.product-content .product-desc {
    margin-top: 14px;
    margin-bottom: 14px;
}

.product-content a {
    border-radius: 16px !important;
    background-color: transparent !important;
    font-size: var(--fs-16) !important;
    font-weight: var(--fw-500) !important;
    color: var(--clr-black) !important;
    border: 1px solid var(--clr-black) !important;
    transition: var(--transition);
}

.product-content .added_to_cart.wc-forward {
    border: 0 !important;
    background-color: white !important;
    width: fit-content;
    text-decoration: none;
}

.product-content {
    display: flex;
    flex-direction: column;
}

.product-content .add_to_cart_button {
    margin-top: auto;
    width: fit-content;
}

.product-content a:hover {
    background-color: #F6F6F6 !important;
}

.search-bar {
    position: relative;
    height: 48px;
    min-width: 20%;
	order: 1;
	margin-left: auto;
}

.search-bar svg {
    position: absolute;
    top: 50%;
    padding: 0px 10px;
    transform: translateY(-50%);
    width: 20px;
    height: 100%;
}

.swiper-button-prev.popular-prev:after,
.swiper-button-next.popular-next:after {
    color: var(--e-global-color-primary);
    font-size: 20px;
}

.swiper-button-prev.popular-prev svg,
.swiper-button-next.popular-next svg {
    fill: transparent !important;
}

.swiper-button-prev.popular-prev svg path,
.swiper-button-next.popular-next svg path {
    stroke: var(--e-global-color-primary) !important;
}

.swiper-button-prev.popular-prev,
.swiper-button-next.popular-next {
    width: 30px;
    height: 30px;
    padding: 10px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.51);
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.51);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.51);
}

.search-bar .search-input {
    width: 100%;
    height: 100%;
    display: inline-flex;
}

.search-bar .search-input input {
    width: 100%;
    height: 100%;
    padding: 0 0 0 40px;
    display: flex;
    border-radius: 10px;
    border: 1px solid var(--clr-bg);
    font-size: var(--fs-16);
}

.search-bar .search-input input:focus,
.search-bar .search-input input:focus-visible {
    outline: 2px solid var(--clr-black) !important;
}

.category-list {
    overflow: hidden;
    position: relative;
}

.scroll-btn {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 100%;
    width: auto;
    backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.scroll-btn-left.hidden~ul.scroll-content {
    padding-left: 10px !important;
}

.scroll-btn-right.hidden~ul.scroll-content {
    padding-right: 10px !important;
}

.scroll-btn.scroll-btn-right {
    right: 0;
    left: unset;
}

.scroll-btn svg {
    width: 30px;
    height: 100%;
}

.scroll-btn.hidden {
    display: none;
}

.scroll-btn svg path {
    stroke: var(--e-global-color-primary);
}

.category-list ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px;
    margin: 0;
}

.category-list ul::-webkit-scrollbar {
    display: none;
}

.category-list li a {
    font-size: var(--fs-16);
    color: #3c3c3c;
    font-weight: var(--fw-500);
    transition: var(--transition);
    text-decoration: none;
    padding: 8px;
    border-radius: 10px;
    display: flex;
    white-space: nowrap;
}

.category-list li a:hover {
    color: var(--clr-black);
}

.category-list li.active a {
    background-color: var(--clr-bg);
    white-space: nowrap;
}

.category-list li.active a:hover,
.category-list li a:hover {
    box-shadow: 0 0 0 3px rgba(13, 13, 13, 0.2);
}

.product-item {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 16px;
    padding: 3px;
    border-radius: 16px;
    border: 1px solid var(--clr-bg);
}

.popular-container {
    position: relative;
    width: 100%;
    overflow: hidden !important;
}

.popular-container .swiper-wrapper {
    width: 100%;
    padding: 10px 0;
}

.popular-container .swiper-slide {
    height: auto !important;
}

.popular-container .swiper-slide .product-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.popular-container .swiper-slide .product-item .product-content {
    order: 2;
}

.popular-container .swiper-slide .product-item .featured-image {
    order: 1;
}

.product-item .product-content {
    order: 1;
    padding: 13px 0 13px 13px;
}

.product-item .featured-image {
    order: 2;
}

.product-item .featured-image img {
    aspect-ratio: 1/1;
}


.wp-block-woocommerce-mini-cart {
    color: var(--e-global-color-secondary);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--e-global-color-text);
    border-radius: 10px 10px 10px 10px;
    max-height: 40px;
    max-width: 40px;
}

.wc-block-mini-cart--wrapper {
    max-height: 40px;
    max-width: 40px;
    overflow: hidden;
}

.search-bar span {
    display: none;
}

.search-bar .search-input-wrapper {
    height: 100%;
}

/*Cart*/
.wc-custom-cart {
    width: 60px !important;
}

.wc-custom-cart .wc-block-mini-cart--wrapper {
    max-width: 100% !important;
    width: 100% !important;
}

.wc-custom-cart .wc-block-mini-cart {
    border: 0 !important;
    padding: 0 !important;
}

.wc-block-mini-cart__empty-cart-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.wc-custom-cart .wc-block-mini-cart button.wc-block-mini-cart__button span svg {
    display: none !important;
}

.wc-custom-cart .wc-block-mini-cart button.wc-block-mini-cart__button span.wc-block-mini-cart__badge {
    background-color: black !important;
    color: white !important;
    width: 25px !important;
    height: 25px !important;
    top: 5px !important;
}

.wc-custom-cart .wc-block-mini-cart button.wc-block-mini-cart__button span.wc-block-mini-cart__quantity-badge:before {
    content: '';
    background-image: url('../img/cart.svg');
    background-size: contain;
    background-repeat: no-repeat !important;
    width: 32px;
    height: 32px;
}

.shop-container .product-item a.added:after {
    display: none !important;
}

/*Header*/
.main-header>.e-con-inner {
    transition: all 0.3s ease-in-out;
}

/*.main-header.header-fixed {
    position: fixed;
    top: 0;
}*/

.main-header.header-fixed>.e-con-inner {
    padding: 10px 0 !important;
}

/*Popular*/
.shop-container section {
    width: 100%;
    max-width: 100%;
}

.woocommerce-MyAccount-navigation ul {
    padding-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.woocommerce-MyAccount-navigation ul li {
    list-style: none;
}

.woocommerce-MyAccount-navigation ul li a {
    padding: 8px 12px;
    border-radius: 10px;
    transition: var(--transition);
    line-height: 24px;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #EBEBEC;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #F6F6F6;
}

.woocommerce table.my_account_orders td,
.woocommerce table.my_account_orders th {
    padding: 8px 12px !important;
}

.woocommerce table.my_account_orders .button {
    border-radius: 10px !important;
    background-color: var(--e-global-color-primary) !important;
    transition: var(--transition);
    color: white !important;
    font-weight: var(--fw-500) !important;
}

.woocommerce-info a.button {
    border-radius: 10px !important;
    background-color: var(--e-global-color-primary) !important;
    transition: var(--transition);
    color: white !important;
    font-weight: var(--fw-500) !important;
}

.woocommerce-info {
    border-top-color: #FF9D00 !important;
}

.woocommerce-info::before {
    color: #FF9D00 !important;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
    padding: 12px 16px !important;
    border-radius: 10px !important;
    border-color: #d6d6d6 !important;
}

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row .input-text:focus-visible {
    outline: 2px solid black !important;
}

#account_display_name_description {
    margin-top: 5px !important;
    display: block !important;
}

.woocommerce form .form-row label {
    color: black !important;
}

.woocommerce button[type="submit"] {
    padding: 8px 12px !important;
    border-radius: 10px !important;
    background-color: var(--e-global-color-primary) !important;
    transition: var(--transition);
    font-family: "Inter", sans-serif !important;
    color: white !important;
    /*margin-top: 10px !important;*/
    line-height: 24px !important;
    font-weight: var(--fw-500) !important;
}

.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

legend {
    color: black !important;
}

fieldset {
    border-color: black !important;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
    margin: 0 !important;
}

.category-list ul {
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
    height: auto;
    padding: 5px 40px;
}

@media screen and (max-width: 768px) {
    :root {
        --fs-28: 20px;
    }

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

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

    .swiper-button-prev.popular-prev,
    .swiper-button-next.popular-next {
        padding: 5px;
    }

    .swiper-button-prev.popular-prev:after,
    .swiper-button-next.popular-next:after {
        font-size: 15px;
    }

    .category-list ul {
        height: 40px;
		flex-wrap: nowrap;
    }

    #main-menu {
        width: 100vw;
        left: -20px;
        top: 100%;
        height: calc(100dvh + 104px);
    }

    .header-fixed #main-menu {
        height: calc(100dvh + 84px);
    }

    .admin-bar #main-menu {
        height: calc(100dvh + 104px - 46px);
    }

    #main-menu .main-menu-wrapper {
        height: 100%;
        box-shadow: none;
        border-radius: 0;
        padding: 24px 12px;
    }

    #main-menu ul {
        grid-template-columns: 1fr;
        grid-gap: 4px;
    }

    .shop-container {
        display: flex;
        flex-direction: column;
    }

    .category-section .product-lists {
        grid-template-columns: 1fr;
    }



    .category-list li {
        height: 100%;
    }

    .category-list {
        overflow: hidden;
    }

    .category-list li a {
        white-space: nowrap;
        height: 100%;
        padding: 0 8px;
        align-items: center;
    }

    .shop-sidebar-wrapper {
        position: unset;
        display: flex;
        align-items: center;
        gap: 10px;
		flex-direction: row;
    }

    .shop-sidebar {
        position: sticky;
        top: 57px;
        background-color: white;
        z-index: 99;
        padding: 10px 20px;
    }

    .shop-container .shop-content .products {
        padding: 0 20px;
    }

    .shop-container {
        padding: 0;
    }

    .search-bar {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: var(--transition);
        min-width: auto;
		order: 0;
		margin: 0;
    }

    .search-bar .search-input-wrapper {
        width: 100%;
        height: 100%;
    }

    .search-bar.active {
        width: 100%;
    }

    .search-bar.active span {
        display: block;
    }

    .search-bar.active~.category-list {
        width: 0;
    }

    .category-list li.active a:hover,
    .category-list li a:hover {
        box-shadow: none !important;
    }

    .shop-container .shop-content {
        width: 100%;
    }

    .shop-container .shop-sidebar {
        top: 57px;
        padding: 10px 20px;
        min-width: unset;
    }

    .wc-custom-cart {
        width: 50px !important;
    }

    #search-results {
        grid-template-columns: 1fr;
    }

    .wc-block-components-drawer {
        width: 100% !important;
    }

    .wc-custom-cart .wc-block-mini-cart button.wc-block-mini-cart__button span.wc-block-mini-cart__badge {
        width: 23px !important;
        height: 23px !important;
    }

    .woocommerce-MyAccount-navigation ul {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow: scroll !important;
        padding: 20px 0 !important;
    }

    .woocommerce-MyAccount-navigation ul li a {
        white-space: nowrap !important;
    }

    .nav-hamberger .nav-hamberger-icon {
        height: 30px;
    }

    .nav-hamberger {
        width: 30px;
        height: 30px;
        border-radius: 7px
    }
}