@import "mixin";@import "default";@mixin font-face($folderpath,$familyname,$filename,$weight,$style){@font-face{font-family:$familyname;src:url("{{ themeAsset('fonts/#{$folderpath}/#{$filename}.eot') }}");src:url("{{ themeAsset('fonts/#{$folderpath}/#{$filename}.eot?#iefix') }}") format("embedded-opentype"),url("{{ themeAsset('fonts/#{$folderpath}/#{$filename}.woff') }}") format("woff"),url("{{ themeAsset('fonts/#{$folderpath}/#{$filename}.ttf') }}") format("truetype"),url("{{ themeAsset('fonts/#{$folderpath}/#{$filename}.svg?#webfont') }}") format("svg");font-weight:$weight;font-style:$style}}body{position:relative;left:0;color:$color-text;font-size:var(--font-size-12);font-family:$font-family;background:$color-white;transition:left .2s linear,right .2s linear;overflow-x:hidden}.openbox-overlay,.dropbox-overlay,.navigation-menu-overlay,.fancybox-is-open .fancybox-bg{opacity:.5;background:$color-text}&::-webkit-scrollbar{width:4px;height:2px}&::-webkit-scrollbar-track{background:$color-background}&::-webkit-scrollbar-thumb{background:$color-primary}@include min($lg){.container{max-width:calc(1536px + calc(2*var(--gutter)))}}.container,.container-fluid{padding-right:var(--gutter);padding-left:var(--gutter)}.row{margin-right:calc(-1*var(--gutter));margin-left:calc(-1*var(--gutter));.col,[class*="col-"]{padding-right:var(--gutter);padding-left:var(--gutter)}}.section{&-h1,&-title{line-height:inherit;font-size:inherit;font-weight:inherit;margin-bottom:0}&-paragraph{margin-top:0;margin-bottom:0}}#header{.header-top{background:$color-background}.header-bottom{@include max($lg){padding-block:var(--spacer-4)}}@include min($lg){position:relative;z-index:101;background:$color-white}}.header-sticky{position:sticky;position:-webkit-sticky;top:0;z-index:100;background:$color-white;border-top:1px solid $color-border;transition:$transition}body.sticked{.header-sticky{background:$color-primary;#navigation{.category-level-1{>ul{>li{>a{color:$color-white;margin-bottom:0;div{display:none}span{&::after{background:$color-white}}&:hover{color:$color-text;span{&::after{background:$color-text}}}}&.active{>a{color:$color-text;span{&::after{background:$color-text}}}}}}}}}}.header-user-buttons{display:flex;align-items:center;gap:var(--spacer-4);>div{>a{position:relative;@include center;min-width:24px;height:24px;color:$color-text;@include text-type-5;transition:$transition;>span{padding-left:var(--spacer-2);@include max($lg){display:none}}>svg{path[stroke]{stroke:currentColor;transition:$transition}}@include min($lg){&:hover{color:$color-primary}}}&.cart-menu{>a{width:52px;height:52px;background:$color-background;@include border-radius(50%);@include max($xs){width:40px;height:40px}}@include min($lg){display:flex;align-items:center;&::before{content:'';width:1px;height:24px;background:$color-border;margin-right:var(--spacer-4)}}}}}.custom-countdown-area{display:none;background-color:$color-text;.custom-countdown-inside{@include center;flex-wrap:wrap;text-align:center;gap:var(--spacer-5);padding-block:8px;.custom-countdown-title{color:$color-white;@include heading-type-5;>span{span{display:block;color:$color-warning;@include heading-type-4}}@include min($lg){text-align:left}}.custom-countdown-content{.custom-countdown{@include center;gap:var(--spacer-4);.custom-countdown-item{@include center;flex-direction:column;min-width:54px;height:54px;text-align:center;background:$color-primary;@include border-radius(12px);padding-inline:4px;>div{position:relative;display:flex;>span{color:$color-white;@include heading-type-5}}>span{display:block;color:$color-white;@include heading-type-6}&:has(#custom-countdown-hour){background:$color-white;>div>span{color:$color-text}>span{color:$color-text}}}}}}}.header-phone{>a{display:inline-flex;align-items:center;flex-wrap:wrap;height:48px;color:$color-text;@include text-type-5;transition:$transition;span{flex:1 0 0%;padding-left:var(--spacer-2)}@include min($lg){&:hover{color:$color-primary}}}}.header-menu{ul{display:flex;gap:var(--spacer-5);@include max($xlg){gap:var(--spacer-4)}li{>a{display:flex;align-items:center;height:48px;color:$color-text;@include text-type-5;transition:$transition;@include svg;span{padding-left:4px}@include min($lg){&:hover{color:$color-primary;@include svghover($color-primary)}}}}}@include max($lg){ul{display:block;li{display:block;>a{flex:0 0 100%;justify-content:flex-start!important;height:auto}}}}}.logo{padding-block:var(--spacer-4) var(--spacer-3);img{max-height:83px}@include max($lg){padding:0;img{max-height:52px}}}.notification-container{position:relative;>a{@include center;width:40px;height:40px;.notification-amount{position:absolute;right:-4px;top:2px;@include center;width:22px;height:22px;color:$color-white;@include line-rule(14);font-weight:500;text-align:center;border-radius:100%;background-color:$color-primary;@include max($lg){right:-2px;top:-3px;width:18px;height:18px;@include text-type-6}}}.notification-content{position:absolute;top:calc(100% + 20px);left:0;z-index:101;display:none;width:320px;background-color:$color-white;border:1px solid $color-border;border-radius:$border-radius;padding:var(--spacer-6);@include max($lg){left:auto;right:0}@include max($sm){position:fixed;top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:280px}.notification-item{&:not(:last-child){border-bottom:1px solid $color-border;padding-bottom:var(--spacer-3);margin-bottom:var(--spacer-3)}>div{color:$color-text;@include line-rule(16);font-weight:700;margin-bottom:var(--spacer-2)}>span{color:$color-sub-text;@include text-type-5}}}}body.notification-content-active{.notification-container{svg{path{fill:$color-primary}}}.notification-content{display:block}.notification-menu-overlay{display:block}}.search{form{position:relative;input{width:100%;height:52px;color:$color-text;font-size:var(--font-size-12);padding:6px 60px 6px 12px;border:none;border-radius:$border-radius;background-color:$color-background;@include min($xs){background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.3641 3.00001C9.38991 2.98866 8.42313 3.17074 7.51979 3.53569C6.61646 3.90065 5.79452 4.44124 5.1016 5.12613C4.40868 5.81102 3.85856 6.6266 3.4831 7.52562C3.10764 8.42465 2.91431 9.38924 2.91431 10.3635C2.91431 11.3378 3.10764 12.3024 3.4831 13.2014C3.85856 14.1004 4.40868 14.916 5.1016 15.6009C5.79452 16.2858 6.61646 16.8264 7.51979 17.1913C8.42313 17.5563 9.38991 17.7384 10.3641 17.727C12.3022 17.7044 14.1532 16.9187 15.5157 15.5402C16.8782 14.1617 17.6423 12.3017 17.6423 10.3635C17.6423 8.42532 16.8782 6.56528 15.5157 5.18681C14.1532 3.80834 12.3022 3.0226 10.3641 3.00001Z' stroke='%23747474' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M15.8569 15.86L20.9999 21.001' stroke='%23747474' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:16px center;padding-left:48px}&::placeholder{color:$color-sub-text;opacity:1}}button{position:absolute;top:0;right:0;@include center;width:64px;height:100%;padding:0;border:none;border-radius:$border-radius;background:none;color:$color-primary;@include heading-type-5;&::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:20px;background:$color-border}}}@include max($lg){padding-top:var(--spacer-4)}}body{&.user-menu-content-active{.user-menu-content{right:0}}&.user-menu-welcome-active{.user-menu-welcome{right:0}}&.user-menu-content-active,&.user-menu-welcome-active{overflow:hidden;@include max($sm){position:fixed;left:-320px;overflow:hidden;height:100%;width:100%}@include max($xxxs){left:-280px}}}.user-menu{>a{>i{position:absolute;right:-4px;top:-8px;@include center;width:18px;height:18px;background-color:$color-primary;border-radius:100%;@include min($lg){display:none}}}}.user-menu-content,.user-menu-welcome{position:fixed;top:0;right:-420px;width:420px;height:100%;z-index:101;overflow-y:auto;padding:var(--spacer-9) var(--spacer-10);background-color:#fff;transition:$transition;@include max($sm){right:-320px;width:320px}@include max($xxxs){right:-280px;width:280px}.user-menu-content-top{padding-bottom:var(--spacer-7);margin-bottom:var(--spacer-7);border-bottom:1px solid $color-border}.user-menu-title{line-height:28px;color:$color-text;font-size:var(--font-size-20);font-weight:600;margin-bottom:var(--spacer-3)}.user-menu-subtitle{line-height:20px;font-size:var(--font-size-16);margin-bottom:var(--spacer-5)}.user-menu-input{margin-bottom:var(--spacer-5);input{height:48px;color:$color-text;font-size:var(--font-size-14);padding:var(--spacer-2) var(--spacer-4);border:1px solid $color-border;background-color:#fff;&::placeholder{color:$color-text;opacity:1}}}.user-menu-remember{input[type=checkbox]{&+label{line-height:20px;color:$color-text;font-size:var(--font-size-14);padding-left:36px;&:before{width:20px;height:20px;border:1px solid $color-border}}&:checked{&+label{&:before{background-image:none;border-color:$color-border;background-color:$color-white}&:after{content:'';position:absolute;left:7px;top:2px;display:inline-block;width:6px;height:12px;border-bottom:2px solid $color-primary;border-right:2px solid $color-primary;transform:rotate(45deg)}}}}input[type=checkbox]:checked+label:before{background-image:none;border-color:$color-border;background-color:$color-white}}.user-menu-remember,.user-menu-forgot-pass{margin-bottom:var(--spacer-7)}.user-menu-forgot-pass{display:block;color:$color-text;font-size:var(--font-size-14);text-align:right}.user-menu-button{margin-bottom:var(--spacer-5);.btn{@include center;height:48px;font-size:var(--font-size-18);font-weight:600;padding:0;@include max($xxxs){height:44px}&.btn-facebook{color:#485a96!important;background:#fff!important;border:1px solid #485a96;transition:$transition;&:hover{color:#fff!important;background:#485a96!important}}&.btn-google{color:#4285f4!important;background:#fff!important;border:1px solid #4285f4;transition:$transition;&:hover{color:#fff!important;background:#4285f4!important}}&.btn-apple{color:#000000!important;background:#fff!important;border:1px solid #000;transition:$transition;&:hover{color:#fff!important;background:#000000!important}}}}.user-menu-profile-list{>a{display:flex;align-items:center;height:48px;color:$color-text;font-size:var(--font-size-14);font-weight:600;padding:0 var(--spacer-4);margin-bottom:var(--spacer-5);border:1px solid $color-border;border-radius:$border-radius;transition:$transition;&:hover{color:$color-white;border-color:$color-primary;background-color:$color-primary}}}}body{&.cart-content-active{overflow:hidden;.cart-content{right:0}@include max($sm){position:fixed;left:-320px;height:100%;width:100%}@include max($xxxs){left:-280px}}}.cart-menu{>a{.cart-amount{position:absolute;right:-2px;top:-3px;@include center;width:20px;height:20px;color:$color-white;@include text-type-6;text-align:center;border-radius:100%;background-color:$color-primary;box-shadow:0 0 24px 0 #00000040;@include max($lg){width:18px;height:18px}}}}.cart-content{position:fixed;top:0;right:-420px;width:420px;height:100%;z-index:101;background-color:$color-white;transition:$transition;@include max($sm){right:-320px;width:320px}@include max($xxxs){right:-280px;width:280px}.cart-content-inside{display:flex;flex-direction:column;height:100%;>div{flex:0 0 auto;width:100%;padding:var(--spacer-5);background-color:$color-white;&.cart-content-top{position:sticky;position:-webkit-sticky;top:0;z-index:24;border-bottom:1px solid $color-border}&.cart-content-middle{overflow-y:auto;flex:1 0 0%}&.cart-content-bottom{position:sticky;position:-webkit-sticky;bottom:0;z-index:24;padding-inline:var(--spacer-10);border-top:1px solid $color-border}}}.cart-content-title{display:flex;align-items:center;justify-content:space-between;line-height:28px;color:$color-text;font-size:var(--font-size-24);font-weight:600;margin-bottom:var(--spacer-3);.cart-all-delete{color:#7A7474;@include line-rule(12);font-weight:500;cursor:pointer;transition:$transition;@include min($lg){&:hover{color:$color-primary}}}}.cart-content-sub-title{line-height:20px;font-size:var(--font-size-16);span{font-weight:700;text-decoration:underline}}.cart-list{&::-webkit-scrollbar{width:4px}&::-webkit-scrollbar-track{background:lighten($color-border,5%)}&::-webkit-scrollbar-thumb{background:darken($color-border,5%)}.cart-list-item{display:flex;flex-wrap:wrap;padding-bottom:var(--spacer-5);margin-bottom:var(--spacer-5);border-bottom:1px solid $color-border;&:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.cart-list-item-image{flex:0 0 100px;max-width:100px;margin-right:var(--spacer-4);>a{display:block;position:relative;aspect-ratio:$aspect-ratio;@include imgcenter;border:1px solid $color-border}@include max($xxs){flex:0 0 80px;max-width:80px}}.cart-list-item-content{flex:1 0 0%;.cart-list-item-brand{margin-bottom:var(--spacer-1);a{display:inline-block;line-height:calc(var(--font-size-12) + 8px);color:$color-text;font-size:var(--font-size-12);transition:$transition;@include min($lg){&:hover{color:$color-primary}}}}.cart-list-item-title{margin-bottom:var(--spacer-2);a{overflow:hidden;display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:calc(var(--font-size-14) + 8px);color:$color-text;font-size:var(--font-size-14);transition:$transition;@include min($lg){&:hover{color:$color-primary}}}}.cart-list-item-price{display:flex;align-items:center;gap:3px;line-height:calc(var(--font-size-13) + 8px);font-size:var(--font-size-13);font-weight:400;margin-bottom:var(--spacer-2);@include max($xxs){overflow:hidden;height:20px}}.cart-qty-and-delete{display:flex;align-items:center;gap:var(--spacer-4);padding-right:var(--spacer-16);.cart-list-item-delete{@include center;overflow:hidden;width:32px;height:32px;border:1px solid $color-border;background-color:$color-white;transition:$transition;svg{path{transition:$transition}}&:hover{border-color:$color-primary;background-color:$color-primary;svg{path{fill:$color-white}}}}.cart-qty{position:relative;flex:1 0 0%;height:32px;>a{position:absolute;top:0;z-index:1;@include center;width:36px;height:100%;transition:$transition;@include svg;&.cart-qty-minus{left:0}&.cart-qty-plus{right:0}@include min($lg){&:hover{background-color:$color-primary;@include svghover($color-white)}}}input{width:100%;height:100%;color:$color-text;@include line-rule(16);font-weight:600;text-align:center;padding:0;border:1px solid $color-border;background-color:$color-white}&.cart-qty-disabled{opacity:.8;pointer-events:none;cursor:disabled;input{background-color:$color-border}}}}}}}.cart-content-total-price{display:flex;align-items:center;justify-content:space-between;gap:var(--spacer-5);margin-bottom:var(--spacer-5);>span{display:block;line-height:20px;font-size:var(--font-size-16)}>div{line-height:22px;font-size:var(--font-size-18);font-weight:700}}.cart-content-button{margin-bottom:var(--spacer-5)}.btn{@include center;height:48px;color:$color-white;font-size:var(--font-size-18);font-weight:600;padding:0;@include max($xxxs){height:48px}&.cart-button-continue{color:$color-text;border:1px solid $color-text;background-color:#fff;transition:$transition;&:hover{color:#fff;background-color:$color-text}}}.cart-content-empty{padding:var(--spacer-5);background-color:$color-white;.cart-content-empty-icon{position:relative;@include center;padding-block:var(--spacer-4);margin-block:var(--spacer-5);border-top:1px solid $color-border;border-bottom:1px solid $color-border;svg{width:40%;height:40%;opacity:.1}}}}.navigation-active{.navigation-menu-overlay{display:block}}#navigation{.category-level-1{>ul{display:flex;justify-content:center;flex-wrap:nowrap;// Alt alta çökmesini engellemek için nowrap yaptık // Mobilde ekran çok daralırsa menünün taşmasını önlemek için güvenli kaydırma (carousel etkisi) @media (max-width:768px){overflow-x:auto;white-space:nowrap;justify-content:flex-start;// Mobilde sola yaslanarak düzgün listelenir padding-left:15px;padding-right:15px;// Kaydırma çubuğunu gizler (tasarımın temiz kalması için) &::-webkit-scrollbar{display:none}scrollbar-width:none}>li{// IdeSoft'un orijinal li element genişlik mantığını korumak için esneklik ekledik
                flex: 0 0 auto; 

                > a {
                    @include center;
                    flex-direction: column;
                    height: 90px;
                    color: $color-text;
                    @include text-type-4;
                    margin-bottom: 30px;
                    padding: 0 var(--spacer-4);
                    transition: $transition;

                    // Mobilde padding'i biraz daraltalım ki sığışsınlar @media (max-width:768px){padding:0 var(--spacer-2)}div{position:relative;// IdeSoft'un orijinal 90px'ini max-width yapıyoruz // Böylece büyük ekranda yine tam 90px kalacak,küçük ekranda otomatik küçülecek width:100%;max-width:90px;height:auto;aspect-ratio:1 / 1;// Yuvarlak formun bozulmaması (oval olmaması) için şart @include border-radius(50%);overflow:hidden;margin-bottom:var(--spacer-1);transition:$transition;// Orijinal IdeSoft mixin'lerine kesinlikle dokunmuyoruz
                        &:not(.no-picture) {
                            @include fit;
                        }
                        &.no-picture {
                            @include imgcenter;
                        }
                    }
                    
                    span {
                        position: relative;
                        // Mobilde uzun yazıların taşarak tasarımı patlatmasını önler
                        @media (max-width: 768px) {
                            font-size: 12px; 
                            white-space: normal;
                            text-align: center;
                        }

                        &::after {
                            content: '';
                            position: absolute;
                            left: calc(-1 * var(--spacer-2));
                            top: 100%;
                            width: calc(100% + var(--spacer-4));
                            height: 2px;
                            background: $color-primary;
                            opacity: 0;
                            transition: $transition;
                        }
                    }
                    &:hover {
                        color: $color-primary;
                        span {
                            &::after {
                                opacity: 1;
                            }
                        }
                    }
                }
                &.active {
                    > a {
                        color: $color-primary;
                        span {
                            &::after {
                                opacity: 1;
                            }
                        }
                    }
                    > .category-level-2 {
                        display: block;
                    }
                }
            }
        }
    }
}
    .category-level-2 {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 101;
        display: none;
        width: 100%;
        padding-block: var(--spacer-8) var(--spacer-30);
        background-color: $color-white;
        box-shadow: 0px 6px 18px 0px #3632321A;
        border-top: 1px solid $color-border;
        ul.category-level-2-list {
            display: flex;
            flex-wrap: wrap;
            margin-right: calc(-1 * var(--gutter));
            margin-left: calc(-1 * var(--gutter));
            row-gap: var(--spacer-6);
            > li {
                flex: 0 0 calc(100% / 6);
                max-width: calc(100% / 6);
                padding: 0 var(--gutter);
                > a {
                    display: inline-block;
                    color: $color-text;
                    @include text-type-3;
                    font-weight: 600;
                    margin-bottom: var(--spacer-3);
                    transition: $transition;
                    &:only-child {
                        margin-bottom: 0;
                    }
                    &:hover {
                        color: $color-primary;
                    }
                }
                &.navigation-category-image {
                    > a {
                        display: flex;
                        align-items: center;
                        div {
                            position: relative;
                            flex: 0 0 54px;
                            width: 54px;
                            height: 54px;
                            border: 1px solid $color-border;
                            border-radius: $border-radius;
                            overflow: hidden;
                            margin-right: var(--spacer-2);
                            transition: $transition;
                            &:not(.no-picture) {
                                @include fit;
                            }
                            &.no-picture {
                                @include imgcenter;
                            }
                        }
                        &:hover {
                            div {
                                box-shadow: 0px 0px 24px 0px #00000040;
                            }
                        }
                    }
                }
            }
        }
        .navigation-first-image {
            a {
                display: block;
                position: relative;
                aspect-ratio: 760/256;
                overflow: hidden;
                border-radius: $border-radius;
                @include fit;
            }
        }
    }
    .category-level-3 {
        > ul {
            > li {
                &:not(:last-child) {
                    margin-bottom: var(--spacer-2);
                }
                > a {
                    display: inline-block;
                    color: $color-text;
                    transition: $transition;
                    &:hover {
                        color: $color-primary;
                    }
                }
                &.navigation-show-all {
                    font-style: italic;
                    text-decoration: underline;
                }
            }
        }
    }
    @include max($lg) {
        display: none;
    }
}

.header-text-wrapper {
    background: $color-primary;
    margin-top: var(--spacer-6);
    .header-text-container {
        height: 0;
        overflow: hidden;
        &.slick-slider {
            height: auto;
            overflow: visible;
        }
        .header-text-item {
            @include center;
            gap: var(--spacer-3);
            color: $color-white;
            @include heading-type-4;
            padding-block: var(--spacer-3);
            .header-text-icon {
                @include center;
                flex: 0 0 32px;
                width: 32px;
                height: 32px;
                svg {
                    max-width: 32px;
                    max-height: 32px;
                }
            }
        }
    }
}

/* @Entry */
#main {
	padding: var(--spacer-4) 0 var(--spacer-10);
}

.current-page-default-entry {
    #main {
        padding: 0;
    }
}

.current-page-product-detail {
    #main {
        padding-bottom: var(--spacer-14);
    }
}

#entry-slider {
    margin-bottom: var(--spacer-13);
    position: relative;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;

    > div {
        height: auto;
        &.slick-slider {
            overflow: visible;
        }
    }

    .slick-list {
        margin: 0;
        padding: 40px 0 !important;
        overflow: visible !important;
    }

    .entry-slider-item {
        display: flex;
        justify-content: center;
        padding: 0 20px;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
        opacity: 0.5;
        transform: scale(0.9);

        &.slick-center {
            opacity: 1;
            transform: scale(1);
        }

        > a {
            display: block;
            width: 100%;
            img {
                width: 100%;

                border-radius: 24px;
                box-shadow: 0 10px 40px rgba(0,0,0,0.15);
            }
        }
    }

    .slick-arrow {
        position: absolute;
        top: 50%;
        z-index: 10;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        cursor: pointer;
        background: $color-white;
        border: 1px solid $color-border;
        @include border-radius(50%);
        transition: $transition;
        @include center;
        @include svg;

        &.slick-prev {
            left: 1%;
        }
        &.slick-next {
            right: 1%;
        }

        &:hover {
            background: $color-primary;
            border-color: $color-primary;
            @include svghover($color-white);
        }

        @media (max-width: 1199px) {
            display: none !important;
        }
    }

    .slick-dots {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        z-index: 5;
        display: flex !important;
        align-items: center;
        
        > li {
            margin: 0 5px;
            button {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: rgba($color-white, 0.5);
                border: 1px solid rgba(0,0,0,0.1);
                text-indent: -9999px;
                transition: 0.3s;
                padding: 0;
            }
            &.slick-active button {
                background-color: $color-primary;
                width: 25px;
                border-radius: 10px;
            }
        }
    }

    @include max($lg) {
        max-width: 100%;
        .entry-slider-item {
            padding: 0 10px;
        }
    }
}

.video-banner-wrapper {
    margin-bottom: var(--spacer-16);
    .video-banner-container {
        height: 0;
        overflow: hidden;
        &.slick-slider {
            height: auto;
            overflow: visible;
        }
        .video-banner {
            > a {
                display: block;
                position: relative;
                overflow: hidden;
                border-radius: $border-radius;
                .video-banner-image {
                    aspect-ratio: 288/495;
                    position: relative;
                    img,
                    .banner-video {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                    .video-player-container {
                        width: 100%;
                        height: 100%;
                        position: relative;
                        .custom-play-btn {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            width: 48px;
                            height: 48px;
                            background-color: rgba(0, 0, 0, 0.6);
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            z-index: 2;
                            transition: opacity 0.3s ease;
                            svg {
                                width: 24px;
                                height: 24px;
                                fill: $color-white;
                                margin-left: 4px;
                            }
                            &:hover {
                                background-color: $color-primary;
                            }
                        }
                    }
                }
                .video-banner-content {
                    position: absolute;
                    left: 50%;
                    bottom: var(--spacer-6);
                    transform: translateX(-50%);
                    z-index: 1;
                    width: calc(100% - (var(--spacer-6) * 2));
                    display: flex;
                    align-items: center;
                    gap: var(--spacer-2);
                    padding: var(--spacer-2);
                    border: 1px solid $color-border;
                    border-radius: $border-radius;
                    background-color: $color-white;
                    box-shadow: 0px 2px 10px 0px #36323214;
                    transition: $transition;
                    @include min($lg) {
                        &:hover {
                            border-color: $color-primary;
                            box-shadow: 0px 0px 16px 0px rgba(251, 178, 22, 0.7);
                        }
                    }
                    .video-banner-small-image {
                        position: relative;
                        width: 52px;
                        height: 52px;
                        overflow: hidden;
                        border-radius: $border-radius;
                        background-color: $color-background;
                        @include imgcenter;
                    }
                    .video-banner-right {
                        flex: 1 0 0;
                        .video-banner-title {
                            color: $color-text;
                            @include text-type-6;
                            overflow: hidden;
                            display: -webkit-box;
                            -webkit-line-clamp: 1;
                            -webkit-box-orient: vertical;
                            @include max($sm) {
                                -webkit-line-clamp: 2;
                            }
                        }
                        .video-banner-price {
                            color: $color-text;
                            @include heading-type-5;
                        }
                    }
                }
                @include min($lg) {
                    &:hover {
                        .video-banner-content {
                            bottom: var(--spacer-10);
                        }
                    }
                }
            }
        }
        > .slick-dots {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            padding-top: 20px;
            > li {
                margin: 0 5px;
                > button {
                    position: relative;
                    overflow: hidden;
                    display: block;
                    width: 12px;
                    height: 12px;
                    text-indent: -9999px;
                    padding: 0;
                    border: none;
                    border-radius: 50%;
                    background-color: $color-border;
                }
                &.slick-active {
                    > button {
                        background-color: $color-primary;
                    }
                }
            }
        }
    }
}

.seo-text {
    background: $color-background;
    border-radius: $border-radius;
    text-align: center;
    padding: var(--spacer-12) var(--spacer-6);
    margin-bottom: var(--spacer-16);
    .seo-text-title {
        color: $color-text;
        @include display-type-6;
        margin-bottom: var(--spacer-3);
    }
    .seo-text-content {
        color: $color-sub-text;
        @include text-type-6;
    }
}

.default-products {
    margin-bottom: var(--spacer-16);

    .products-header {
        margin-bottom: var(--spacer-6);

        > h2 {
            color: $color-primary;
            @include display-type-5;
            font-weight: 700;
            letter-spacing: -0.5px;
        }
    }

    .products-content {
        height: 0;
        overflow: hidden;

        &.slick-slider {
            height: auto;
            overflow: visible;
            .slick-list {
                margin-block: calc(-1 * var(--gutter) - 10px);
                padding-block: calc(var(--gutter) + 10px);
                margin-inline: -10px; 
                padding-inline: 10px;
            }
        }
        .slick-slide {
            height: auto;
            
            > div {
                height: 100%;
                padding: 10px 0;
                > * {
                    background: $color-white;
                    border-radius: 16px !important;
                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
                    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease !important;
                    overflow: hidden;
                    &:hover {
                        transform: translateY(-8px) !important;
                        box-shadow: 0 20px 35px rgba(0, 0, 0, 0.15) !important;
                    }
                }
            }
        }
        > .slick-arrow {
            position: absolute;
            opacity: 1;
            top: 38.5%; 
            z-index: 10;
            transform: translateY(-50%);
            width: 42px;
            height: 42px;
            cursor: pointer;
            background: $color-white;
            border: none;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
            
            @include center;
            @include border-radius(50%);
            @include svg;

            &.slick-prev {
                left: -21px;
            }

            &.slick-next {
                right: -21px;
            }

            &:not(.slick-disabled) {
                &:hover,
                &:focus-visible {
                    background: $color-primary;
                    transform: translateY(-50%) scale(1.1);
                    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
                    outline: none;
                    @include svghover($color-white);
                }
            }
            
            &.slick-disabled {
                opacity: 0;
                pointer-events: none;
            }

            @include max($xxlg) {
                &.slick-prev { left: 10px; }
                &.slick-next { right: 10px; }
            }
        }
    
        > .slick-dots {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            padding-top: 24px;
            list-style: none;

            > li {
                margin: 0 5px;

                > button {
                    position: relative;
                    overflow: hidden;
                    display: block;
                    width: 10px;
                    height: 10px;
                    text-indent: -9999px;
                    padding: 0;
                    border: none;
                    border-radius: 50%;
                    background-color: rgba($color-border, 0.6);
                    transition: all 0.3s ease;
                }

                &.slick-active {
                    > button {
                        background-color: $color-primary;
                        width: 24px;
                        border-radius: 5px;
                    }
                }
            }
        }
    }

    > .row {
        display: flex;
        align-items: stretch;

        > .col-lg-3 {
            a {
                display: block;
                height: 100%;

                img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                    max-height: 450px;
                    border-radius: 16px;
                }
            }
        }

        > [class*="col-lg-9"] {
            display: flex;
            flex-direction: column;
            justify-content: center;

            .products-content {
                height: 100%;

                .slick-list, 
                .slick-track {
                    height: 100%;
                }

                .slick-track {
                    display: flex !important;
                    align-items: stretch;
                }

                .slick-slide {
                    height: auto;

                    > div {
                        height: 100%;
                    }
                }
            }
        }
    }
    &.category-product-carousel {
        padding: var(--spacer-10) var(--spacer-6);
        border-radius: 24px;
        .products-header {
            > h2,
            > p {
                color: $color-white;
                text-shadow: 0 2px 4px rgba(0,0,0,0.05);
            }
        }
        .showcase {
            padding-bottom: var(--spacer-3);
        }
        .products-content > .slick-arrow {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }
    }
}

.product-area-bottom {
    .default-products {
        &:last-child {
            margin-bottom: 0;
        }
    }
}

/* Standart and Category Carousel Tab */
.list-tab {
    margin-bottom: var(--spacer-16);
    position: relative;
    &-title {
        @include center;
        flex-wrap: wrap;
        gap: var(--spacer-5);
        margin-bottom: var(--spacer-8);
        @include min($md) {
            gap: var(--spacer-6);
        }
        @include max($md) {
            position: relative;
            display: block;
            overflow: hidden;
            background: $color-white;
            border: 1px solid rgba($color-border, 0.9);
            border-radius: $border-radius;
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
        }
        [data-tab-index] {
            @include max($md) {
                flex: 0 0 100%;
                order: 2;
            }
            a {
                position: relative;
                display: block;
                text-decoration: none;
                span {
                    position: relative;
                    display: block;
                    color: rgba($color-text, 0.35);
                    line-height: calc(var(--font-size-26) + 8px);
                    font-size: var(--font-size-26);
                    font-weight: 800;
                    letter-spacing: -0.025em;
                    padding: var(--spacer-4) var(--spacer-7);
                    margin-bottom: 0;
                    border-radius: $border-radius;
                    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
                    @include max($md) {
                        color: $color-text;
                        @include heading-type-4;
                    }
                }
                @include min($lg) {
                    &:hover {
                        span {
                            color: rgba($color-primary, 0.75);
                            background: rgba($color-primary, 0.06);
                        }
                    }
                }
                @include max($md) {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    span {
                      
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: var(--spacer-5) var(--spacer-6);
                        border-radius: 0;
                        background-color: $color-white;
                        margin-bottom: 0;
                    }
                }
                @include max($sm) {
                    span {
                        padding: var(--spacer-5);
                    }
                }
            }
            &.active {
                @include max($md) {
                    order: 1;
                }
                a {
                    position: relative;
                    z-index: 1;
                    span {
                        color: $color-primary;
                        background: linear-gradient(180deg, $color-white 0%, $color-background 100%);
                        box-shadow: 0 10px 24px rgba($color-primary, 0.10);
                        @include min($md) {
                            padding: var(--spacer-4) var(--spacer-8);
                            &::before {
                                content: "";
                                position: absolute;
                                left: 50%;
                                bottom: -10px;
                                width: 46px;
                                height: 4px;
                                transform: translateX(-50%);
                                border-radius: 999px;
                                background: $color-primary;
                                box-shadow: 0 6px 14px rgba($color-primary, 0.35);
                            }
                            &::after {
                                content: "";
                                position: absolute;
                                left: 50%;
                                top: 100%;
                                transform: translateX(-50%);
                                border-top: 12px solid $color-background;
                                border-left: 9px solid transparent;
                                border-right: 9px solid transparent;
                            }
                        }
                        @include max($md) {
                            color: $color-white;
                            background: linear-gradient(135deg,$color-primary 0%,darken($color-primary, 8%) 100%);
                            box-shadow: none;
                        }
                    }

                    @include max($md) {
                        span {
                            &::after {
                                content: "\f078";
                                color: $color-white;
                                font-size: var(--font-size-16);
                                font-weight: 900;
                                font-family: "Font Awesome 5 Free";
                                pointer-events: none;
                            }
                        }
                    }
                }
            }
        }
        @include max($md) {
            &.open {
                [data-tab-index] {
                    a {
                        position: relative;
                    }
                    &:not(.active) {
                        a {
                            span {
                                border-top: 1px solid rgba($color-border, 0.85);
                                &:hover {
                                    color: $color-primary;
                                    background-color: rgba($color-primary, 0.04);
                                }
                            }
                        }
                    }
                    &.active {
                        a {
                            span {
                                &::after {
                                    content: "\f077";
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    &-content {
        position: relative;
        [data-tab-content] {
            height: 0;
            overflow: hidden;
            &.active {
                height: auto;
                overflow: visible;
            }
        }
        .products-content {
            height: 0;
            overflow: hidden;
            &.slick-slider {
                height: auto;
                overflow: visible;
                .slick-list {
                    margin-block: calc(-1 * var(--gutter));
                    padding-block: var(--gutter);
                }
                .slick-track {
                    display: flex;
                }
                .slick-slide {
                    height: auto;
                    > div {
                        height: 100%;
                    }
                }
            }
            .slick-arrow {
                position: absolute;
                opacity: 1;
                top: 38%;
                z-index: 3;
                transform: translateY(-50%);
                @include center;
                width: 38px;
                height: 38px;
                cursor: pointer;
                background: rgba($color-white, 0.96);
                border: 1px solid rgba($color-border, 0.9);
                @include border-radius(50%);
                box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
                backdrop-filter: blur(8px);
                transition: background-color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease,transform 0.3s ease;
                @include svg;
                &.slick-prev {
                    left: -18px;
                }
                &.slick-next {
                    right: -18px;
                }
                &:not(.slick-disabled) {
                    &:hover {
                        background: $color-primary;
                        border-color: $color-primary;
                        transform: translateY(-50%) scale(1.08);
                        box-shadow: 0 14px 28px rgba($color-primary, 0.24);
                        @include svghover($color-white);
                    }
                }
                &.slick-disabled {
                    opacity: 0.35;
                    cursor: not-allowed;
                }
                @include max($xxlg) {
                    &.slick-prev {
                        left: 4px;
                    }
                    &.slick-next {
                        right: 4px;
                    }
                }
                @include max($md) {
                    width: 34px;
                    height: 34px;
                    top: 36%;
                }
            }
            .slick-dots {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                width: 100%;
                gap: 8px;
                padding-top: var(--spacer-6);
                > li {
                    margin: 0;
                    > button {
                        position: relative;
                        overflow: hidden;
                        display: block;
                        width: 9px;
                        height: 9px;
                        text-indent: -9999px;
                        padding: 0;
                        border: none;
                        border-radius: 999px;
                        background-color: rgba($color-text, 0.18);
                        transition: width 0.3s ease, background-color 0.3s ease;
                    }
                    &.slick-active {
                        > button {
                            width: 26px;
                            background-color: $color-primary;
                        }
                    }
                }
            }
            .product-item,
            .product,
            .product-card,
            .showcase,
            .showcase-container {
                height: 100%;
                > a,
                .product-inner,
                .showcase-inner,
                .showcase-content {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    background: $color-white;
                    border: 1px solid rgba($color-border, 0.85);
                    border-radius: calc(#{$border-radius} + 4px);
                    overflow: hidden;
                    text-decoration: none;
                    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.045), 0 1px 2px rgba(0, 0, 0, 0.035);
                    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease;
                }
                .product-image,
                .product-img,
                .image-wrapper,
                .showcase-image,
                .showcase-picture {
                    position: relative;
                    overflow: hidden;
                    background: linear-gradient(180deg,rgba($color-background, 0.55) 0%,$color-white 100%);
                    border-radius: calc(#{$border-radius} + 4px);
                    img {
                        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),filter 0.35s ease;
                    }
                }
                .product-title,
                .product-name,
                .showcase-title {
                    color: $color-text;
                    font-weight: 700;
                    letter-spacing: -0.01em;
                    transition: color 0.3s ease;
                }
                .product-price,
                .price,
                .showcase-price {
                    color: $color-primary;
                    font-weight: 800;
                    letter-spacing: -0.02em;
                }
                .favorite,
                .showcase-favorite,
                .product-favorite {
                    transition: color 0.3s ease,transform 0.3s ease,background-color 0.3s ease;
                    @include min($lg) {
                        &:hover {
                            color: $color-primary;
                            transform: scale(1.1);
                        }
                    }
                }
                @include min($lg) {
                    &:hover {
                        > a,
                        .product-inner,
                        .showcase-inner,
                        .showcase-content {
                            transform: translateY(-8px);
                            border-color: rgba($color-primary, 0.55);
                            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10),0 8px 18px rgba($color-primary, 0.08);
                        }
                        .product-image,
                        .product-img,
                        .image-wrapper,
                        .showcase-image,
                        .showcase-picture {
                            img {
                                transform: scale(1.055);
                                filter: saturate(1.04);
                            }
                        }
                        .product-title,
                        .product-name,
                        .showcase-title {
                            color: $color-primary;
                        }
                    }
                }
            }
        }
        .products-content-empty {
            color: $color-text;
            font-size: var(--font-size-15);
            font-weight: 700;
            text-align: center;
            padding: 56px 20px;
            margin-bottom: var(--spacer-8);
            border: 1px solid rgba($color-border, 0.9);
            border-radius: $border-radius;
            background: radial-gradient(circle at top, rgba($color-primary, 0.06), transparent 36%), $color-white;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.045);
        }
    }
}

/* Showcase */
.showcase {
    position: relative;
    background-color: $color-white;
    @include border-radius(16px);
    border: 1px solid #e5e9ee;
    padding: var(--spacer-2) var(--spacer-2) var(--spacer-6);
    margin-bottom: var(--spacer-8);
    transition: $transition;
    .showcase-image-container {
        position: relative;
        a.showcase-label-container {
            .showcase-label-group {
                position: absolute;
                left: var(--spacer-3);
                top: var(--spacer-3);
                z-index: 20;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                > div {
                    color: $color-white;
                    @include heading-type-6;
                    @include border-radius(4px);
                    padding: var(--spacer-1) var(--spacer-2);
                    margin-bottom: var(--spacer-3);
                    &:last-child {
                        margin-bottom: 0;
                    }
                    &.showcase-extra-fields-1 {
                        background-color: $color-info;
                    }
                    &.showcase-extra-fields-2 {
                        background-color: $color-warning;
                    }
                    &.new-label {
                        background-color: $color-success;
                    }
                    &.gift-label {
                        background-color: $color-accent;
                    }
                    @include max($xlg) {
                        margin-bottom: var(--spacer-2);
                    }
                    @include max($lg) {
                        margin-bottom: var(--spacer-1);
                    }
                }
            }
            .sold-out-label {
                position: absolute;
                left: var(--spacer-3);
                bottom: var(--spacer-4);
                z-index: 20;
                color: $color-white;
                @include heading-type-6;
                padding: var(--spacer-1) var(--spacer-2);
                background-color: $color-text;
                @include border-radius(4px);
            }
        }
        .showcase-favorites {
            position: absolute;
            right: var(--spacer-3);
            bottom: var(--spacer-3);
            z-index: 10;
            > a.add-my-favorites {
                @include center;
                width: 24px;
                height: 24px;
                .showcase-icon-favori-add {
                    display: none;
                }
                &.favorite-product {
                    .showcase-icon-favori {
                        display: none;
                    }
                    .showcase-icon-favori-add {
                        display: block;
                    }
                }
            }
        }
    }
    .showcase-image {
        a {
            position: relative;
            display: block;
            overflow: hidden;
            aspect-ratio: 1.3333333333;
            background: $color-white;
            transition: $transition;
            @include imgcenter;
            img {
                border-radius: $border-radius;
            }
        }
    }
	.showcase-content {
        padding-top: var(--spacer-3);
        .showcase-brand {
            height: calc(var(--font-size-14) + 8px);
            text-align: center;
            margin-bottom: var(--spacer-2);
            a {
                overflow: hidden;
                display: block;
                height: calc(var(--font-size-14) + 8px);
                line-height: calc(var(--font-size-14) + 8px);
                color: $color-sub-text;
                font-size: var(--font-size-14);
            }
        }
		.showcase-title {
            text-align: center;
			margin-bottom: var(--spacer-3);
			a {
				overflow: hidden;
				display: block;
                height: calc((var(--font-size-16) + 8px) * 3);
                line-height: calc(var(--font-size-16) + 8px);
				color: $color-text;
                font-weight: 500;
                font-size: var(--font-size-15);
                @include max($xs) {
                    height: calc((var(--font-size-16) + 8px) * 3);
                }
			}
		}
	.showcase-price {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 15px 0; 
    background-color: #9d174d; 
    color: #ffffff;
    padding: 10px 25px;      
    border-radius: 6px;      
    width: fit-content;      
    margin-left: auto;       
    margin-right: auto;      

    gap: 12px;               

    .showcase-price-new {
        font-size: 18px;     
        font-weight: 600;    
        line-height: 1.2;
        color: #ffffff;
    }

    .showcase-price-old {
        font-size: 16px;     
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: line-through;
    }

    @include max($sm) {
        flex-direction: column;
        padding: 12px 20px;
        gap: 5px;
        
        .showcase-price-new {
            font-size: 18px;
        }
    }
}
       .discount-label { 
    font-size: 14px;
    display: block;
    width: fit-content;     
    margin: var(--spacer-3) auto 0 auto;
    
    color: $color-white;
    background: $color-primary;
    border-radius: $border-radius;
    text-align: center;
    padding: var(--spacer-1) var(--spacer-2);
}
    }
    @include min($lg) {
        &:hover {
            .showcase-image {
                a {
                    box-shadow: 0px 0px var(--gutter) 0px #00000033;
                }
            }
        }
    }
}

.showcase-container {
    &.quintuple-sorting {
        .showcase {
            .showcase-content {
                .showcase-price {
                    flex-direction: column;
                    height: calc(var(--font-size-18) + 8px + var(--font-size-14) + 8px);
                    .showcase-price-new {
                        line-height: calc(var(--font-size-18) + 8px);
                        font-size: var(--font-size-18);
                    }
                    .showcase-price-old {
                        line-height: calc(var(--font-size-14) + 8px);
                        font-size: var(--font-size-14);
                        margin-right: 0;
                    }
                }
            }
        }
    }
}

.theme-banner-wrapper {
    margin-bottom: var(--spacer-16);
    .theme-banner {
        > a {
            display: block;
            position: relative;
            overflow: hidden;
            @include fit;
            img {
                transition: $transition;
            }
            @include min($lg) {
                &:hover {
                    img {
                        transform: scale(1.05);
                    }
                }
            }
        }
    }
    &.theme-banner-wrapper-1,
    &.theme-banner-wrapper-2 {
        .theme-banner {
            > a {
                aspect-ratio: 1920/570;
            }
        }
    }
    &.theme-banner-wrapper-3 {
        .theme-banner {
            > a {
                aspect-ratio: 1920/730;
            }
        }
    }
}
.category-banner-wrapper {
    margin-bottom: var(--spacer-16);
    position: relative;

    .category-banner-header {

        text-align: center;
        margin-bottom: -1px;
        position: relative;
        z-index: 2;

        .category-banner-header-inside {
            display: inline-block;
            min-width: 360px;
            background: linear-gradient(180deg, $color-white 0%, $color-background 100%);
            border-radius: $border-radius $border-radius 0 0;
            padding: var(--spacer-7) var(--spacer-10) var(--spacer-4);
            box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.04);

            > h2 {
                color: $color-primary;
                @include heading-type-3;
                font-weight: 800;
                margin-bottom: var(--spacer-2);
                letter-spacing: -0.03em;
                line-height: 1.15;
            }

            > span {
                display: block;
                color: rgba($color-text, 0.68);
                @include text-type-3;
                font-weight: 500;
            }

            @include min($sm) {
                min-width: 527px;
            }

            @include max($sm) {
                min-width: auto;
                width: calc(100% - 32px);
                padding-inline: var(--spacer-5);
            }
        }
    }

    .category-banner-container {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at top left, rgba($color-primary, 0.09), transparent 34%),
            linear-gradient(180deg, lighten($color-background, 2%) 0%, $color-background 100%);
        padding: var(--spacer-12) var(--spacer-8) var(--spacer-14);
        border-radius: $border-radius;
        box-shadow: inset 0 1px 0 rgba($color-white, 0.85);

        @include max($md) {
            padding: var(--spacer-8) var(--spacer-4) var(--spacer-10);
        }

        .row {
            row-gap: var(--spacer-8);

            @include max($md) {
                row-gap: var(--spacer-5);
            }
        }

        .category-banner {
            height: 100%;

            > a {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                height: 100%;
                min-height: 300px;
                text-align: center;
                background: rgba($color-white, 0.96);
                border: 1px solid rgba(darken($color-background, 12%), 0.7);
                border-radius: calc(#{$border-radius} + 4px);
                padding: var(--spacer-7) var(--spacer-5);
                overflow: hidden;
                text-decoration: none;
                box-shadow:
                    0 8px 24px rgba(0, 0, 0, 0.045),
                    0 1px 2px rgba(0, 0, 0, 0.04);
                transition:
                    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                    border-color 0.35s ease,
                    background-color 0.35s ease;

                &::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(
                        135deg,
                        rgba($color-primary, 0.10) 0%,
                        rgba($color-white, 0) 42%
                    );
                    opacity: 0;
                    transition: opacity 0.35s ease;
                    pointer-events: none;
                }

                &::after {
                    content: "";
                    position: absolute;
                    top: 14px;
                    right: 14px;
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                    background: rgba($color-primary, 0.08);
                    transform: scale(0);
                    transition: transform 0.35s ease;
                    pointer-events: none;
                }

                .category-banner-image {
                    position: relative;
                    width: 200px;
                    height: 190px;
                    margin: 0 auto var(--spacer-5);
                    @include imgcenter;
                    transition:
                        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                        filter 0.35s ease;

                    img {
                        max-width: 100%;
                        max-height: 100%;
                        width: auto;
                        height: auto;
                        object-fit: contain;
                        border-radius: calc(#{$border-radius} - 2px);
                    }

                    @include max($md) {
                        width: 135px;
                        height: 135px;
                        margin-bottom: var(--spacer-4);
                    }
                }

                .category-banner-title {
                    position: relative;
                    color: $color-sub-text;
                    @include heading-type-4;
                    font-weight: 700;
                    letter-spacing: -0.015em;
                    margin-bottom: 0;
                    transition: color 0.3s ease;
                }

                @include min($lg) {
                    &:hover {
                        transform: translateY(-8px);
                        border-color: rgba($color-primary, 0.65);
                        background-color: $color-white;
                        box-shadow:
                            0 18px 38px rgba(0, 0, 0, 0.10),
                            0 6px 14px rgba($color-primary, 0.08);

                        &::before {
                            opacity: 1;
                        }

                        &::after {
                            transform: scale(1);
                        }

                        .category-banner-image {
                            transform: scale(1.07) translateY(-3px);
                            filter: saturate(1.05);
                        }

                        .category-banner-title {
                            color: $color-primary;
                        }
                    }
                }

                &:focus-visible {
                    outline: 3px solid rgba($color-primary, 0.28);
                    outline-offset: 4px;
                    border-color: $color-primary;
                }

                @include max($md) {
                    min-height: 230px;
                    padding: var(--spacer-5) var(--spacer-4);
                }
            }
        }
    }
}

/* Video Modal */
.video-modal {
    margin-bottom: var(--spacer-16);
    > a {
        display: block;
        position: relative;
        .video-modal-image {
            position: relative;
            aspect-ratio: 1536/520;
            overflow: hidden;
            border-radius: $border-radius;
            @include fit;
            &::after {
                content: '';
                position: absolute;
                inset: 0;
                background: rgba($color-text,.7);
            }
            img {
                transition: $transition;
            }
            @include max($lg) {
                aspect-ratio: 1.5;
            }
            @include max($xs) {
                aspect-ratio: 1;
            }
        }
        .video-modal-content {
            position: absolute;
            inset: 0;
            z-index: 1;
            @include center;
            flex-direction: column;
            text-align: center;
            gap: var(--spacer-6);
            padding: var(--spacer-6);
            .video-modal-small-image {
                max-width: 368px;
                max-height: 129px;
            }
            .video-modal-title {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: var(--spacer-2);
                color: $color-white;
                @include line-rule(20);
                font-weight: 700;
            }
        }
        @include min($lg) {
            &:hover {
                .video-modal-image {
                    img {
                        transform: scale(1.05);
                    }
                }
            }
        }
    }
}

.entry-blog-container {
    margin-bottom: var(--spacer-9);
    .entry-blog-title {
        margin-bottom: var(--spacer-5);
        > h2 {
            color: $color-primary;
            @include display-type-5;
        }
    }
    .entry-blog-content {
        @include min($lg) {
            height: 0;
            overflow: hidden;
            &.slick-slider {
                height: auto;
                overflow: visible;
            }
        }
        @include max($lg) {
            flex-wrap: nowrap;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding-bottom: var(--spacer-4);
            margin-bottom: var(--spacer-4);
            .entry-blog-item {
                width: 38vw;
            }
        }
        @include max($sm) {
            .entry-blog-item {
                width: 81vw;
            }
        }
        > .slick-arrow {
            position: absolute;
            opacity: 1;
            top: 38.5%;
            z-index: 2;
            transform: translateY(-50%);
            @include center;
            width: 32px;
            height: 32px;
            cursor: pointer;
            background: $color-white;
            border: 1px solid $color-border;
            @include border-radius(50%);
            transition: $transition;
            @include svg;
            &.slick-prev {
                left: -36px;
            }
            &.slick-next {
                right: -36px;
            }
            &:not(.slick-disabled) {
                &:hover {
                    background: $color-primary;
                    border-color: $color-primary;
                    box-shadow: 0px 0px 24px 0px #00000040;
                    @include svghover($color-white);
                }
            }
            @include max($xxlg) {
                &.slick-prev {
                    left: 0;
                }
                &.slick-next {
                    right: 0;
                }
            }
        }
        .entry-blog-item-container {
            .entry-blog-item-image {
                height: 100%;
                a {
                    position: relative;
                    overflow: hidden;
                    display: block;
                    aspect-ratio: 496/249;
                    border-radius: $border-radius;
                    @include fit;
                }
                .entry-blog-item-nopic {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 3;
                    color: #ccc;
                    font-size: 70px;
                    background: #f5f5f5;
                    @include center;
                }
            }
            .entry-blog-item-content {
                padding-top: var(--spacer-4);
                .entry-blog-item-title {
                    margin-bottom: var(--spacer-4);
                    a {
                        display: block;
                        overflow: hidden;
                        height: calc(var(--font-size-16) + 8px);
                        line-height: calc(var(--font-size-16) + 8px);
                        color: $color-text;
                        font-size: var(--font-size-16);
                        font-weight: 700;
                    }
                }
                .entry-blog-item-bottom {
                    a {
                        display: inline-block;
                        color: $color-sub-text;
                        @include text-type-6;
                        @include min($lg) {
                            transition: $transition;
                            &:hover {
                                color: $color-primary;
                            }
                        }
                    }
                }
            }
        }
    }
}

.limited-text {
    border-top: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
    padding-block: var(--spacer-6);
    margin-bottom: var(--spacer-8);
    .limited-text-title {
        color: $color-text;
        @include display-type-6;
        margin-bottom: var(--spacer-3);
    }
    .limited-text-content {
        [type="checkbox"] {
            display: none;
            + div {
                height: calc((var(--font-size-14) + 8px) * 4);
                line-height: calc(var(--font-size-14) + 8px);
                overflow: hidden;
                color: $color-sub-text;
                font-size: var(--font-size-14);
                margin-bottom: var(--spacer-4);
                + label {
                    margin: 0;
                    cursor: pointer;
                    color: $color-sub-text;
                    @include heading-type-6;
                    transition: $transition;
                    &:before {
                        content: attr(data-title-show);
                    }
                    &:hover {
                        color: $color-primary;
                    }
                }
            }
            &:checked {
                + div {
                    height: 100%;
                    overflow: visible;
                    + label {
                        color: $color-primary;
                        &:before {
                            content: attr(data-title-hide);
                        }
                    }
                }
            }
        }
    }
}

/* @Footer */
#footer {
    border-bottom: 1px solid $color-border;
	.footer-row-1 {
        background: $color-background;
        padding-block: var(--spacer-16) 186px;
        @include max($lg) {
            padding-bottom: var(--spacer-16);
            margin-bottom: var(--spacer-16);
        }
    }
    .footer-row-2 {
        margin: var(--spacer-8) 0;
        .container {
            > .row {
                row-gap: var(--spacer-16);
            }
        }
    }
    .footer-row-3 {
        @include min($lg) {
            border-top: 1px solid $color-border;
            padding-top: var(--spacer-8);
        }
        @include max($lg) {
            border-bottom: 1px solid $color-border;
            padding-bottom: 24px;
        }
    }
    .footer-row-4 {
        margin-bottom: var(--spacer-6);
    }
}
.shopping-banners {
  margin-bottom: var(--spacer-12);

  .row {
    row-gap: var(--spacer-8);
    justify-content: center; // kolonları ortalar
  }

  .shopping-banner {
    display: flex;
    flex-direction: column;
    align-items: center; // ikon + yazıları ortalar
    justify-content: center;
    text-align: center;

    @include svghover($color-primary);

    svg {
      display: block;
      max-width: 40px;
      max-height: 40px;
      margin-bottom: var(--spacer-4);
    }

    .shopping-banner-content {
      display: flex;
      flex-direction: column;
      align-items: center;

      .shopping-banner-title {
        color: $color-text;
        @include heading-type-4;
        margin-bottom: var(--spacer-3);
      }

      .shopping-banner-sub-title {
        color: $color-sub-text;
        @include text-type-5;
      }
    }
  }
}

.footer-menu-container {
    .footer-menu {
        .footer-menu-title {
            color: $color-text;
            @include heading-type-4;
            margin-bottom: var(--spacer-4);
        }
        .footer-menu-content {
            > ul {
                > li {
                    margin-bottom: var(--spacer-2);
                    &:last-child {
                        margin-bottom: 0;
                    }
                    > a {
                        display: inline-block;
                        color: $color-sub-text;
                        @include text-type-5;
                        transition: $transition;
                        @include min($lg) {
                            &:hover {
                                color: $color-primary;
                            }
                        }
                    }
                }
            }
        }
    }
    @include max($sm) {
        text-align: center;
        &[data-menu-type="accordion"] {
            text-align: left;
            .footer-menu {
                .footer-menu-title {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: space-between;
                    cursor: pointer;
                    padding: var(--spacer-8);
                    margin-bottom: var(--spacer-8);
                    border: 1px solid $color-text;
                    border-radius: $border-radius;
                    &:after {
                        content: '\f067';
                        font-size: var(--font-size-12);
                        font-weight: 900;
                        font-family: "Font Awesome 5 Free";
                    }
                 }
                .footer-menu-content {
                    padding: 0 var(--spacer-8) var(--spacer-8);
                    display: none;
                    > ul {
                        > li {
                            color: $color-text;
                            > a {
                                color: $color-text;
                            }
                        }
                    }
                }
                &.active {
                    .footer-menu-title {
                        &:after {
                            content: '\f068';
                        }
                    }
                    .footer-menu-content {
                        display: block;
                    }
                }
            }
        }
    }
}

.footer-row-3 {
    .footer-menu-container {
        .footer-menu {
            .footer-menu-title {
                color: $color-text;
                @include heading-type-4;
                margin-bottom: var(--spacer-4);
            }
            .footer-menu-content {
                > ul > li {
                    margin-bottom: var(--spacer-2);
                    &:last-child {
                        margin-bottom: 0;
                    }
                    > a {
                        display: inline-block;
                        color: $color-sub-text;
                        @include text-type-5;
                        transition: $transition;
                        @include min($lg) {
                            &:hover {
                                color: $color-primary;
                            }
                        }
                    }
                }
            }
        }
        @include max($sm) {
            text-align: center;
            &[data-menu-type="accordion"] {
                text-align: left;
                .footer-menu {
                    margin-bottom: var(--spacer-3);
                    .footer-menu-title {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: space-between;
                        cursor: pointer;
                        padding: var(--spacer-4) var(--spacer-6);
                        margin-bottom: 0;
                        border: 1px solid $color-border; // Sert görünüm yumuşatıldı
                        border-radius: $border-radius;
                        background-color: $color-background; // Basit bir zemin eklendi
                        &:after {
                            content: '\f067';
                            font-size: var(--font-size-12);
                            font-weight: 900;
                            font-family: "Font Awesome 5 Free";
                        }
                    }
                    .footer-menu-content {
                        padding: var(--spacer-4) var(--spacer-6);
                        border: 1px solid $color-border;
                        border-top: none;
                        border-radius: 0 0 $border-radius $border-radius;
                        display: none;
                        > ul > li > a {
                            color: $color-text;
                            padding: var(--spacer-2) 0;
                            display: block;
                        }
                    }
                    &.active {
                        .footer-menu-title {
                            border-radius: $border-radius $border-radius 0 0;
                            &:after {
                                content: '\f068';
                            }
                        }
                        .footer-menu-content {
                            display: block;
                        }
                    }
                }
            }
        }
    }
    @include max($lg) {
        .row > div {
            margin-bottom: var(--spacer-6);
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.newsletter {
    background: $color-primary;
    border-radius: $border-radius;
    padding: var(--spacer-8);
    .newsletter-title {
        margin-bottom: var(--spacer-5);
        > h2 {
            color: $color-white;
            @include heading-type-4;
            margin-bottom: var(--spacer-3);
        }
        > p {
            color: $color-white;
            @include text-type-5;
        }
    }
    .newsletter-content {
        form {
            position: relative;
            display: flex;
            background: $color-white;
            border: 1px solid $color-border;
            border-radius: $border-radius;
            input {
                width: 100%;
                height: 50px;
                color: $color-text;
                font-size: var(--font-size-12);
                padding: 8px 12px;
                border: none;
                border-radius: $border-radius;
                &::placeholder {
                    color: $color-sub-text;
                    opacity: 1;
                }
            }
            button {
                @include center;
                height: 50px;
                color: $color-primary;
                @include heading-type-5;
                padding: 0 var(--spacer-3);
                border: none;
                background: transparent;
                border-radius: $border-radius;
            }
        }
    }
}

.footer-logo {
    img {
        max-height: 72px;
    }
}

.footer-text {
    color: $color-sub-text;
    @include text-type-5;
}

.app-banner-wrapper {
    display: flex;
    gap: var(--spacer-8);
    .app-banner {
        > a {
            display: block;
            img {
                max-height: 24px;
            }
        }
    }
}

.footer-contact {
    background: $color-background;
    border-radius: $border-radius;
    padding: var(--spacer-4) var(--spacer-8);
    .footer-contact-title {
        margin-bottom: var(--spacer-4);
        > h2 {
            color: $color-text;
            @include heading-type-4;
            margin-bottom: var(--spacer-3);
        }
        > p {
            color: $color-sub-text;
            @include text-type-5;
        }
    }
    .footer-contact-content {
        > div {
            &:not(:last-child) {
                margin-bottom: var(--spacer-4);
            }
            > a {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                color: $color-text;
                @include text-type-5;
                background: $color-white;
                border-radius: $border-radius;
                padding: var(--spacer-4) var(--spacer-3);
                transition: $transition;
                @include svg;
                span {
                    flex: 1 0 0;
                    padding-left: var(--spacer-2);
                }
                @include min($lg) {
                    &:hover {
                        color: $color-white;
                        background: $color-primary;
                        @include svghover($color-white);
                    }
                }
            }
            &.footer-whatsapp {
                > a {
                    @include min($lg) {
                        &:hover {
                            background: $color-whatsapp;
                        }
                    }
                }
            }
        }
    }
}

.copyright {
    line-height: calc(var(--font-size-12) + 8px);
    font-size: var(--font-size-12);
    font-weight: 400;
    letter-spacing: .02em;
    color: $color-text;
    @include max($lg) {
        margin: 0;
        text-align: center;
    }
    > span {
        font-weight: 600;
    }
}

.footer-ssl {
    text-align: center;
    img {
        max-height: 32px;
    }
}

#scroll-top {
    position: fixed;
    right: var(--spacer-10);
    bottom: var(--spacer-10);
    z-index: 50;
    display: none;
    cursor: pointer;
    border: 1px solid $color-primary;
    border-radius: 100%;
    transition: $transition;
    > div {
        position: relative;
        overflow: hidden;
        @include center;
        width: 44px;
        height: 44px;
        @include svg;
        @include svghover($color-primary);
        > svg {
            position: absolute;
            transition: transform .5s ease,opacity .25s ease;
            &:last-child {
                transform: translateY(20px);
                opacity: 0;
            }
        }
    }
    @include min($lg) {
        &:hover {
            background-color: $color-primary;
            @include svghover($color-white);
            > div {
                > svg {
                    &:first-child {
                        transform: translateY(-20px);
                        opacity: 0;
                    }
                    &:last-child {
                        transform: translateY(0);
                        opacity: 1;
                    }
                }
            }
        }
    }
}

{% if theme.settings.whatsapp_style_1_position_type == 'whatsapp_style_1_position_type_1' or theme.settings.whatsapp_style_2_position_type == 'whatsapp_style_2_position_type_1' or theme.settings.whatsapp_style_2_position_type == 'whatsapp_style_2_position_type_2' %}
    @include max($lg) {
        #scroll-top {
            display: none !important;
        }
    }
{% endif %}

.custom-whatsapp-button {
    &.custom-whatsapp-button-style-1 {
        position: fixed;
        bottom: var(--spacer-10);
        z-index: 98;
        &.left-bottom {
            left: var(--spacer-10);
        }
        &.right-bottom {
            right: var(--spacer-10);
        }
        &.check-bottom {
            bottom: calc((var(--spacer-10) + 44px) + var(--spacer-10));
            @include max($lg) {
                bottom: var(--spacer-10);
            }
        }
        > a {
            @include center;
            width: 60px;
            height: 60px;
            @include border-radius(50%);
            animation: pulse-animation 2s infinite;
            background-color: $color-whatsapp;
            @include max($sm) {
                width: 48px;
                height: 48px;
                svg {
                    width: 24px;
                    height: 24px;
                }
            }
            > div {
                position: relative;
                width: 32px;
                height: 32px;
                > svg {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    transition: $transition;
                    &.open-icon {
                        animation: iconPulse 4s infinite;
                    }
                    &.close-icon {
                        width: 0;
                        height: 0;
                        overflow: hidden;
                    }
                }
            }
            &.active {
                > div {
                    > svg {
                        &.open-icon {
                            width: 0;
                            height: 0;
                            overflow: hidden;
                        }
                        &.close-icon {
                            width: 100%;
                            height: 100%;
                            overflow: visible;
                            @include max($sm) {
                                width: 24px;
                                height: 24px;
                            }
                        }
                    }
                }
                ~ .custom-whatsapp-button-content {
                    opacity: 1;
                    visibility: visible;
                }
            }
            &:hover {
                > div {
                    > svg {
                        &.close-icon {
                            transform: translate(-50%, -50%) rotate(90deg);
                        }
                    }
                }
            }
        }
        .custom-whatsapp-button-content {
            position: absolute;
            right: var(--spacer-8);
            bottom: calc(100% + 24px);
            z-index: 98;
            width: 350px;
            opacity: 0;
            visibility: hidden;
            @include border-radius(8px);
            padding: var(--spacer-6);
            transition: $transition;
            box-shadow: 2px 2px 8px 0px #00000014;
            background-color: $color-white;
            @include max($sm) {
                right: 0;
                width: 300px;
            }
            @include max($xxs) {
                width: 280px;
            }
            &.left-bottom {
                left: var(--spacer-8);
                right: auto;
                @include max($xs) {
                    left: 0;
                }
            }
            .custom-whatsapp-button-title {
                color: {{ theme.settings.whatsapp_style_1_title_color }};
                @include line-rule(16);
                font-weight: 500;
                margin-bottom: var(--spacer-3);
            }
            .custom-whatsapp-button-sub-title {
                color: {{ theme.settings.whatsapp_style_1_sub_title_color }};
                @include line-rule(16);
                font-weight: 400;
                margin-bottom: var(--spacer-6);
            }
            .custom-whatsapp-button-link {
                > a {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: 52px;
                    color: {{ theme.settings.whatsapp_style_1_button_title_color }};
                    @include line-rule(14);
                    font-weight: 500;
                    @include border-radius(8px);
                    padding-inline: var(--spacer-6);
                    transition: $transition;
                    background-color: {{ theme.settings.whatsapp_style_1_button_background_color }};
                    @include svg;
                    > div {
                        display: flex;
                        align-items: center;
                        gap: var(--spacer-2);
                    }
                    @include max($lg) {
                        height: 44px;
                    }
                    @include min($lg) {
                        &:hover {
                            color: {{ theme.settings.whatsapp_style_1_button_title_hover_color }};
                            padding-inline: var(--spacer-6) var(--spacer-3);
                            background-color: {{ theme.settings.whatsapp_style_1_button_background_hover_color }};
                            @include svghover({{ theme.settings.whatsapp_style_1_button_title_hover_color }});
                        }
                    }
                }
            }
        }
    }
    &.custom-whatsapp-button-style-2 {
        position: fixed;
        z-index: 98;
        &.right-bottom {
            right: calc((var(--spacer-10) + 44px) + var(--spacer-10));
            bottom: 0;
            @include max($lg) {
                right: var(--spacer-10);
            }
        }
        &.right-vertical {
            bottom: calc((var(--spacer-10) + 44px) + var(--spacer-10));
            right: 0;
            left: auto;
            > a {
                @include border-radius(0 8px 8px 0);
            }
        }
        &.left-bottom {
            left: var(--spacer-10);
            bottom: 0;
        }
        &.left-vertical {
            bottom: var(--spacer-10);
            left: 0;
            right: auto;
            > a {
                @include border-radius(8px 0 0 8px);
            }
        }
        &.right-vertical,
        &.left-vertical {
            @include max($lg) {
                bottom: var(--spacer-10);
            }
            writing-mode: vertical-lr;
            transform: scale(-1);
            > a {
                padding: var(--spacer-7) var(--spacer-3);
                > svg {
                    transform: rotate(180deg);
                }
            }
        }
        > a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: {{ theme.settings.whatsapp_style_2_button_title_color }};
            @include line-rule(16);
            font-weight: 500;
            white-space: nowrap;
            @include border-radius(8px 8px 0 0);
            gap: var(--spacer-3);
            padding: var(--spacer-3) var(--spacer-7);
            transition: $transition;
            background-color: {{ theme.settings.whatsapp_style_2_button_background_color }};
            @include svg;
            > svg {
                @include max($lg) {
                    width: 28px;
                    height: 28px;
                }
                @include max($sm) {
                    width: 24px;
                    height: 24px;
                }
            }
            @include min($lg) {
                &:hover {
                    color: {{ theme.settings.whatsapp_style_2_button_title_hover_color }};
                    background-color: {{ theme.settings.whatsapp_style_2_button_background_hover_color }};
                    @include svghover({{ theme.settings.whatsapp_style_2_button_title_hover_color }});
                }
            }
        }
    }
}

@keyframes iconPulse {
    0% {
        transform: translate(-50%, -50%) scale(.90);
    }
    20% {
        transform: translate(-50%, -50%) scale(1);
    }
    40% {
        transform: translate(-50%, -50%) scale(.90);
    }
    60% {
        transform: translate(-50%, -50%) scale(1);
    }
    80% {
        transform: translate(-50%, -50%) scale(.90);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px rgba(37, 211, 102, 1);
    }
    100% {
        box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
    }
}

.current-page-product-detail {
    #scroll-top,
    .custom-whatsapp-button {
        display: none !important;
    }
}

/* @Category */
/* Sorting View */
@include min($md) {
    .section-sorting-view {
        display: flex;
        align-items: center;
        gap: calc(var(--gutter) * 2);
        margin-bottom: var(--spacer-8);
        border: 1px solid $color-border;
        border-radius: $border-radius;
        padding: var(--spacer-5) var(--spacer-4);
        #filter-wrapper {
            flex: 1 0 0;
            #sorting-options {
                border: none;
                padding: 0;
                margin-bottom: 0;
            }
        }
    }
    .section-container {
        display: grid;
        align-items: flex-start;
        column-gap: calc(var(--gutter) * 2);
        grid-template-columns: minmax(0, 288px) minmax(0, 1fr);
        @include min($xlg) {
            grid-template-columns: minmax(0, 366px) minmax(0, 1fr);
        }
    }
}

@include max($lg) {
    {% if theme.settings.mobile_sticky_filter_bar_status %}
        .section-sorting-view {
            position: sticky;
            position: -webkit-sticky;
            top: var(--spacer-8);
            z-index: 99;
        }
    {% endif %}
    @include min($md) {
        .section-container {
            grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
        }
    }
}

@mixin filter-order-button {
    align-items: center;
    gap: var(--spacer-3);
    > span {
        @include center;
        width: 32px;
        height: 32px;
        cursor: pointer;
        border: 1px solid $color-border;
        border-radius: $border-radius;
        @include svghover($color-text);
        @include svg;
        transition: $transition;
        &:hover,
        &.active {
            border-color: $color-primary;
            background-color: $color-primary;
            @include svghover($color-white);
        }
    }
}

.filter-order-button {
    display: flex;
    @include filter-order-button;
    @include max($lg) {
        > span {
            &[data-selector="quintuple-sorting"],
            &[data-selector="quadruple-sorting"] {
                display: none;
            }
        }
    }
    @include max($md) {
        display: none;
    }
}

.mobile-filter-order-button {
    display: none;
    @include filter-order-button;
}

@include max($md) {
    #filter-wrapper {
        .filter-wrapper-header {
            display: flex;
            align-items: center;
            border: 1px solid $color-border;
            background-color: $color-white;
            border-radius: $border-radius;
            > div {
                position: relative;
                flex: 1 0 0;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 48px;
                color: $color-text;
                font-size: var(--font-size-12);
                gap: var(--spacer-4);
                text-transform: uppercase;
                padding-inline: var(--spacer-4);
                &.mobile-filter-order-button {
                    gap: var(--spacer-6);
                    justify-content: flex-end;
                }
                &:nth-child(2),
                &:nth-child(3) {
                    &:after {
                        content: '';
                        position: absolute;
                        left: -1px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 1px;
                        height: 24px;
                        @include border-radius(2px);
                        background-color: $color-border;
                    }
                }
            }
        }
    }
}

.showcase-container {
    display: grid;
    gap: var(--spacer-8) calc(var(--gutter) * 2);
    {% set showcaseRepeatColumns = theme.settings.showcase_repeat_columns %}
    {% if showcaseRepeatColumns == 2 %}
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    {% elseif showcaseRepeatColumns == 3 %}
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    {% elseif showcaseRepeatColumns == 4 %}
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    {% elseif showcaseRepeatColumns == 5 %}
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    {% endif %}
    &.quintuple-sorting {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    }
    &.quadruple-sorting {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    }
    &.triple-sorting {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    }
    &.dual-sorting {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    &.single-sorting {
        grid-template-columns: minmax(0, 1fr);
    }
    @include max($lg) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        &.quintuple-sorting,
        &.quadruple-sorting {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        }
    }
    @include max($md) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        &.quintuple-sorting,
        &.quadruple-sorting,
        &.triple-sorting {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }
    }
}

#showcase-previous-page {
    @include center;
    margin-bottom: var(--spacer-10);
}

#showcase-load-spinner {
    text-align: center;
    margin-top: var(--spacer-25);
    .showcase-container-loader {
        display: block;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: inline-block;
        border-top: 3px solid $color-primary;
        border-right: 3px solid transparent;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
        @include max($sm) {
            width: 36px;
            height: 36px;
        }
    }
    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}

/* Blocks */
.block-item {
    margin-bottom: var(--spacer-8);
    border: 1px solid $color-border;
    border-radius: $border-radius;
	a {
		color: $color-text;
        transition: $transition;
		&:hover {
			color: $color-primary;
		}
	}
	.block-item-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
        color: $color-text;
        @include heading-type-5;
		padding: var(--spacer-3);
        border-bottom: 1px solid $color-border;
		> i {
			display: none;
			@include max($sm) {
				display: block;
			}
		}
	}
    .block-item-content {
        padding: var(--spacer-2) var(--spacer-3);
    }
    &[data-type="filter-product-groups"] {
        padding: 0;
        border: none;
        .block-item-title {
            margin-bottom: var(--spacer-6);
            border-bottom: 1px solid $color-border;
            display: none;
        }
        .block-item-content {
            padding: 0;
        }
    }
    &[data-type="product-groups"] {
        border: none;
        .block-item-content {
            padding: 0;
        }
    }
	&.active {
		.block-item-title {
			> i.fa-angle-down {
				&:before {
					content: '\f106';
				}
			}
		}
	}
	&[data-type="no-frame"] {
		.block-item-title {
			display: none;
		}
	}
}

/* Tablet Blocks */
@include max($md) {
	.block-item {
        display: none;
        .block-item-title {
            
        }
		&[data-type="filter-product-groups"] {
			display: block;
			margin-bottom: 0;
			border: none;
			.block-item-title {
                display: none;
			}
			.block-item-content {
				display: block;
				padding: 0;
			}
		}
		&[data-type="product-groups"] {
			display: none;
		}
        &[data-type=member-menu] {
            display: block;
            .block-item-title {
                cursor: pointer;
                i {
                    display: block;
                }
            }
            .block-item-content {
                display: none;
            }
            &.active {
                .block-item-content {
                    display: block;
                }
            }
        }
	}
	.filter-menu,
	.horizontal-filter-menu {
		position: fixed;
		width: 280px;
		height: 100%;
		left: -280px;
		top: 0;
		background: #ffffff;
		z-index: 100;
		padding: 28px var(--spacer-4) var(--spacer-4);
		transition: $transition;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
        @include max($sm) {
            padding: 28px var(--spacer-8) var(--spacer-8);
        }
	}
    .horizontal-filter-menu {
		.filter-menu-category {
			display: none;
		}
    }
	.filter-menu-active {
		left: 280px;
		overflow: hidden;
		position: fixed;
		height: 100%;
		width: 100%;
		.filter-menu,
		.horizontal-filter-menu {
			left: 0 !important;
		}
	}
	#filter-wrapper {
        margin-bottom: var(--spacer-8);
        .filter-wrapper-content {
            #sorting-options {
                display: none;
                margin-top: var(--spacer-8);
            }
        }
		&.has-sorting-option:not(.has-filter-option) {
			.filter-wrapper-header {
				.filter-options-title {
					display: none;
				}
			}
		}
	}
	.sorting-options-content-active {
		#filter-wrapper {
			.filter-wrapper-content {
				#sorting-options {
					display: block;
				}
			}
		}
	}
}

@include min($md) {
    .filter-menu-overlay,
    .filter-wrapper-header {
        display: none !important;
    }
}

/* Vertical Filter Menu */
.filter-menu {
    @include max($md) {
        .openbox-close {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 1;
            width: 28px;
            height: 28px;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 55%;
            background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.884 6.706L16 14.59L8.11599 6.706C7.92637 6.53248 7.67711 6.43881 7.42014 6.44451C7.16317 6.4502 6.9183 6.55482 6.73655 6.73657C6.5548 6.91832 6.45019 7.16318 6.44449 7.42015C6.4388 7.67712 6.53247 7.92638 6.70599 8.116L14.586 16L6.70399 23.882C6.60769 23.9738 6.53072 24.0839 6.47758 24.2058C6.42445 24.3278 6.39622 24.4591 6.39458 24.5921C6.39293 24.7251 6.41789 24.8571 6.46799 24.9803C6.51809 25.1036 6.59232 25.2155 6.68631 25.3097C6.7803 25.4038 6.89216 25.4782 7.01532 25.5284C7.13847 25.5787 7.27043 25.6039 7.40345 25.6024C7.53646 25.601 7.66784 25.5729 7.78986 25.52C7.91188 25.467 8.02208 25.3902 8.11399 25.294L16 17.412L23.884 25.296C24.0736 25.4695 24.3229 25.5632 24.5798 25.5575C24.8368 25.5518 25.0817 25.4472 25.2634 25.2654C25.4452 25.0837 25.5498 24.8388 25.5555 24.5819C25.5612 24.3249 25.4675 24.0756 25.294 23.886L17.41 16.002L25.294 8.116C25.3903 8.02423 25.4673 7.91414 25.5204 7.79219C25.5735 7.67025 25.6018 7.53891 25.6034 7.4059C25.6051 7.27289 25.5801 7.14089 25.53 7.01766C25.4799 6.89444 25.4057 6.78247 25.3117 6.68835C25.2177 6.59422 25.1058 6.51983 24.9827 6.46956C24.8595 6.41929 24.7275 6.39414 24.5945 6.3956C24.4615 6.39706 24.3301 6.42509 24.2081 6.47805C24.0861 6.53102 23.9759 6.60784 23.884 6.704V6.706Z' fill='black'/%3E%3C/svg%3E");
        }
    }
	.filter-menu-box {
        margin-bottom: var(--spacer-2);
        border: 1px solid $color-border;
        border-radius: $border-radius;
        &.filter-menu-main-category {
            padding: var(--spacer-2) var(--spacer-3);
        }
	}
	.filter-menu-category {
		.filter-menu-category-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--spacer-3);
            color: $color-text;
            @include heading-type-5;
			padding: var(--spacer-5) var(--spacer-3);
            border-bottom: 1px solid $color-border;
			background-color: transparent;
            i {
                display: block;
                order: 2;
                flex: 0 0 16px;
                width: 16px;
                height: 16px;
                background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3535 8.35378L6.35354 13.3538C6.30708 13.4002 6.25193 13.4371 6.19124 13.4622C6.13054 13.4874 6.06549 13.5003 5.99979 13.5003C5.93409 13.5003 5.86904 13.4874 5.80834 13.4622C5.74764 13.4371 5.69249 13.4002 5.64604 13.3538C5.59958 13.3073 5.56273 13.2522 5.53759 13.1915C5.51245 13.1308 5.49951 13.0657 5.49951 13C5.49951 12.9343 5.51245 12.8693 5.53759 12.8086C5.56273 12.7479 5.59958 12.6927 5.64604 12.6463L10.2929 8.00003L5.64604 3.35378C5.55222 3.25996 5.49951 3.13272 5.49951 3.00003C5.49951 2.86735 5.55222 2.7401 5.64604 2.64628C5.73986 2.55246 5.86711 2.49976 5.99979 2.49976C6.13247 2.49976 6.25972 2.55246 6.35354 2.64628L11.3535 7.64628C11.4 7.69272 11.4369 7.74786 11.4621 7.80856C11.4872 7.86926 11.5002 7.93433 11.5002 8.00003C11.5002 8.06574 11.4872 8.13081 11.4621 8.1915C11.4369 8.2522 11.4 8.30735 11.3535 8.35378Z' fill='black'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: 50%;
                &:before {
                    content: none;
                }
            }
		}
		.filter-menu-category-content {
            border-bottom: none;
			a {
                color: $color-text;
                @include heading-type-6;
                padding: var(--spacer-4) var(--spacer-6);
                border-bottom: 1px solid $color-border;
                transition: $transition;
                &:hover {
                    color: $color-primary;
                }
                i {
                    display: none;
                }
			}
		}
		.filter-menu-category-top {
			a {
                justify-content: flex-start;
                color: $color-text;
                @include heading-type-5;
				padding: var(--spacer-4) var(--spacer-6);
                background-color: $color-background;
                border: none;
                @include border-radius(0 0 $border-radius $border-radius);
                transition: $transition;
                i {
                    @include center;
                    flex: 0 0 20px;
                    width: 20px;
                    height: 20px;
                    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.9422 15.8078C13.0003 15.8659 13.0463 15.9348 13.0777 16.0107C13.1092 16.0865 13.1254 16.1679 13.1254 16.25C13.1254 16.3321 13.1092 16.4134 13.0777 16.4893C13.0463 16.5652 13.0003 16.6341 12.9422 16.6922C12.8841 16.7502 12.8152 16.7963 12.7393 16.8277C12.6634 16.8592 12.5821 16.8753 12.5 16.8753C12.4179 16.8753 12.3366 16.8592 12.2607 16.8277C12.1848 16.7963 12.1159 16.7502 12.0578 16.6922L5.80782 10.4422C5.74971 10.3841 5.70361 10.3152 5.67215 10.2393C5.6407 10.1634 5.62451 10.0821 5.62451 9.99998C5.62451 9.91785 5.6407 9.83652 5.67215 9.76064C5.70361 9.68477 5.74971 9.61584 5.80782 9.55779L12.0578 3.30779C12.1751 3.19052 12.3342 3.12463 12.5 3.12463C12.6659 3.12463 12.8249 3.19052 12.9422 3.30779C13.0595 3.42507 13.1254 3.58413 13.1254 3.74998C13.1254 3.91583 13.0595 4.07489 12.9422 4.19217L7.1336 9.99998L12.9422 15.8078Z' fill='black'/%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-position: 50%;
                    margin-right: var(--spacer-2);
                    &:before {
                        content: none;
                    }
                }
			}
		}
	}
	.filter-menu-groups {
        &.active {
            .filter-menu-group-title {
                @include border-radius($border-radius $border-radius 0 0);
                &::after {
                    transform: rotate(-180deg);
                }
            }
        }
		.filter-menu-group-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--spacer-3);
            color: $color-text;
            @include heading-type-5;
			padding: var(--spacer-3);
            border: none;
			background-color: $color-background;
            border-radius: $border-radius;
            cursor: pointer;
            transition: $transition;
            &::after {
                content: '';
                flex: 0 0 16px;
                width: 16px;
                height: 16px;
                background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.3536 5.02026C14.5488 4.825 14.5488 4.50849 14.3536 4.31323C14.1583 4.11797 13.8418 4.11797 13.6465 4.31323L8.00004 9.95972L2.35355 4.31323C2.15829 4.11797 1.84179 4.11797 1.64652 4.31323C1.45126 4.50849 1.45126 4.825 1.64652 5.02026L7.64652 11.0203C7.74029 11.114 7.86743 11.1667 8.00004 11.1667C8.13265 11.1667 8.25979 11.114 8.35355 11.0203L14.3536 5.02026Z' fill='black'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: 50%;
                transition: $transition;
            }
		}
		.filter-menu-group-content {
            display: none;
            border-top: 1px solid $color-border;
            padding: 0;
            .checkbox-custom {
                padding: 8px 12px;
                margin-bottom: 0;
            }
			label {
                line-height: 20px;
                color: $color-text;
                font-size: var(--font-size-12);
                font-weight: 400;
                transition: $transition;
                &:hover {
                    color: $color-primary;
                }
            }
            .filter-menu-box-image {
                padding: 8px 12px;
                .filter-menu-image-checkbox {
                    input[type=checkbox] {
                        + label {
                            border: none;
                            transition: $transition;
                            &:hover {
                                opacity: 0.6;
                            }
                        }
                    }
                    img {
                        max-width: 100%;
                        max-height: 100%;
                    }
                }
            }
            input[type=checkbox] {
                & + label {
                    line-height: 20px;
                    color: $color-text;
                    font-size: var(--font-size-12);
                    font-weight: 400;
                    padding-left: 28px;
                    &:before {
                        width: 20px;
                        height: 20px;
                        border: 2px solid $color-text;
                        @include border-radius(2px);
                    }
                }
                &:checked {
                    & + label {
                        color: $color-primary;
                        &:before {
                            background-image: none;
                            background-color: $color-white;
                            border-color: $color-primary;
                        }
                        &:after {
                            content: '';
                            position: absolute;
                            left: 7px;
                            top: 2px;
                            display: inline-block;
                            width: 6px;
                            height: 12px;
                            border-bottom: 2px solid $color-primary;
                            border-right: 2px solid $color-primary;
                            transform: rotate(45deg);
                        }
                    }
                }
            }
            .scrollbar-inner {
                max-height: 144px !important;
                >.scroll-element {
                    box-sizing: border-box;
                    width: 4px;
                    right: 0;
                    div {
                        box-sizing: border-box;
                    }
                    .scroll-element_track {
                        background-color: $color-background;
                    }
                    .scroll-bar {
                        background-color: $color-primary;
                    }
                    .scroll-bar,
                    .scroll-element_track,
                    .scroll-element_outer {
                        opacity: 1;
                        @include border-radius(0);
                    }
                    &:hover,
                    &.scroll-draggable {
                        .scroll-bar {
                            background-color: $color-primary-lighten;
                        }
                    }
                }
            }
		}
	}
	.filter-menu-selected-items {
        background: $color-background;
		.filter-menu-selected-items-title {
            color: $color-text;
            @include heading-type-5;
			padding: var(--spacer-3);
            border-bottom: 1px solid $color-border;
			background-color: transparent;
		}
		.filter-menu-selected-items-content {
            padding: var(--spacer-3);
			.filter-menu-selected-group {
                margin-bottom: var(--spacer-6);
				.filter-menu-selected-group-title {
                    color: $color-text;
                    @include heading-type-6;
                    margin-bottom: var(--spacer-2);
				}
				.filter-menu-selected-group-content {
					.filter-menu-selected-item {
                        margin-bottom: var(--spacer-3);
                        a {
                            color: $color-text;
                            @include text-type-6;
                            padding: var(--spacer-3);
                            background: $color-white;
                            border: 1px solid $color-border;
                            border-radius: $border-radius;
                            gap: var(--spacer-2);
                            i {
                                flex: 0 0 24px;
                                width: 24px;
                                height: 24px;
                                background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 3H4.5C4.10218 3 3.72064 3.15804 3.43934 3.43934C3.15804 3.72064 3 4.10218 3 4.5V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H19.5C19.8978 21 20.2794 20.842 20.5607 20.5607C20.842 20.2794 21 19.8978 21 19.5V4.5C21 4.10218 20.842 3.72064 20.5607 3.43934C20.2794 3.15804 19.8978 3 19.5 3ZM19.5 19.5H4.5V4.5H19.5V19.5ZM15.5306 9.53063L13.0603 12L15.5306 14.4694C15.6003 14.5391 15.6556 14.6218 15.6933 14.7128C15.731 14.8039 15.7504 14.9015 15.7504 15C15.7504 15.0985 15.731 15.1961 15.6933 15.2872C15.6556 15.3782 15.6003 15.4609 15.5306 15.5306C15.4609 15.6003 15.3782 15.6556 15.2872 15.6933C15.1961 15.731 15.0985 15.7504 15 15.7504C14.9015 15.7504 14.8039 15.731 14.7128 15.6933C14.6218 15.6556 14.5391 15.6003 14.4694 15.5306L12 13.0603L9.53063 15.5306C9.46094 15.6003 9.37822 15.6556 9.28717 15.6933C9.19613 15.731 9.09855 15.7504 9 15.7504C8.90145 15.7504 8.80387 15.731 8.71283 15.6933C8.62178 15.6556 8.53906 15.6003 8.46937 15.5306C8.39969 15.4609 8.34442 15.3782 8.3067 15.2872C8.26899 15.1961 8.24958 15.0985 8.24958 15C8.24958 14.9015 8.26899 14.8039 8.3067 14.7128C8.34442 14.6218 8.39969 14.5391 8.46937 14.4694L10.9397 12L8.46937 9.53063C8.32864 9.38989 8.24958 9.19902 8.24958 9C8.24958 8.80098 8.32864 8.61011 8.46937 8.46937C8.61011 8.32864 8.80098 8.24958 9 8.24958C9.19902 8.24958 9.38989 8.32864 9.53063 8.46937L12 10.9397L14.4694 8.46937C14.5391 8.39969 14.6218 8.34442 14.7128 8.3067C14.8039 8.26899 14.9015 8.24958 15 8.24958C15.0985 8.24958 15.1961 8.26899 15.2872 8.3067C15.3782 8.34442 15.4609 8.39969 15.5306 8.46937C15.6003 8.53906 15.6556 8.62178 15.6933 8.71283C15.731 8.80387 15.7504 8.90145 15.7504 9C15.7504 9.09855 15.731 9.19613 15.6933 9.28717C15.6556 9.37822 15.6003 9.46094 15.5306 9.53063Z' fill='%23C02D78'/%3E%3C/svg%3E");
                                background-repeat: no-repeat;
                                background-position: 50%;
                                &:before {
                                    content: none;
                                }
                            }
                        }
                    }
				}
			}
		}
	}
}

/* Horizontal Filter Menu */
.horizontal-filter-menu {
    margin-bottom: var(--spacer-5);
    @include max($md) {
        .openbox-close {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 1;
            width: 28px;
            height: 28px;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 55%;
            background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.884 6.706L16 14.59L8.11599 6.706C7.92637 6.53248 7.67711 6.43881 7.42014 6.44451C7.16317 6.4502 6.9183 6.55482 6.73655 6.73657C6.5548 6.91832 6.45019 7.16318 6.44449 7.42015C6.4388 7.67712 6.53247 7.92638 6.70599 8.116L14.586 16L6.70399 23.882C6.60769 23.9738 6.53072 24.0839 6.47758 24.2058C6.42445 24.3278 6.39622 24.4591 6.39458 24.5921C6.39293 24.7251 6.41789 24.8571 6.46799 24.9803C6.51809 25.1036 6.59232 25.2155 6.68631 25.3097C6.7803 25.4038 6.89216 25.4782 7.01532 25.5284C7.13847 25.5787 7.27043 25.6039 7.40345 25.6024C7.53646 25.601 7.66784 25.5729 7.78986 25.52C7.91188 25.467 8.02208 25.3902 8.11399 25.294L16 17.412L23.884 25.296C24.0736 25.4695 24.3229 25.5632 24.5798 25.5575C24.8368 25.5518 25.0817 25.4472 25.2634 25.2654C25.4452 25.0837 25.5498 24.8388 25.5555 24.5819C25.5612 24.3249 25.4675 24.0756 25.294 23.886L17.41 16.002L25.294 8.116C25.3903 8.02423 25.4673 7.91414 25.5204 7.79219C25.5735 7.67025 25.6018 7.53891 25.6034 7.4059C25.6051 7.27289 25.5801 7.14089 25.53 7.01766C25.4799 6.89444 25.4057 6.78247 25.3117 6.68835C25.2177 6.59422 25.1058 6.51983 24.9827 6.46956C24.8595 6.41929 24.7275 6.39414 24.5945 6.3956C24.4615 6.39706 24.3301 6.42509 24.2081 6.47805C24.0861 6.53102 23.9759 6.60784 23.884 6.704V6.706Z' fill='black'/%3E%3C/svg%3E");
        }
    }
    .horizontal-filter-menu-title {
        line-height: 20px;
        color: $color-text;
        font-size: var(--font-size-16);
        font-weight: 600;
        margin-bottom: var(--spacer-5);
        @include max($md) {
            display: none;
        }
    }
    .horizontal-filter-menu-content {
        padding: var(--spacer-4);
        padding-bottom: 0;
        margin-bottom: var(--spacer-5);
        border: 1px solid $color-border;
        border-radius: $border-radius;
        background-color: $color-white;
        @include max($md) {
            display: flex;
            flex-direction: column-reverse;
            padding: 0;
            border: none;
        }
    }
    .filter-menu-groups-wrapper {
        @include min($md) {
            display: flex;
            flex-wrap: wrap;
            margin-right: calc(-1*var(--gutter));
            margin-left: calc(-1*var(--gutter));
        }
        @include max($md) {
            padding: var(--spacer-4);
            border: 1px solid $color-border;
        }
    }
	.filter-menu-groups {
        padding-right: var(--gutter);
        padding-left: var(--gutter);
        @include max($md) {
            flex: 0 0 100%;
            padding: 0;
        }
		.filter-menu-group-selectbox {
            position: relative;
            margin-bottom: var(--spacer-4);
            > a {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 44px;
                line-height: 20px;
                color: $color-text;
                font-size: var(--font-size-14);
                font-weight: 400;
                padding: 4px 12px 4px 16px;
                border-radius: $border-radius;
                border: 1px solid $color-border;
                background-color: #fff;
                span {
                    padding-right: 16px;
                }
                @include max($md) {
                    height: auto;
                    font-size: var(--font-size-16);
                    font-weight: 600;
                    pointer-events: none;
                    padding: 4px 0 12px;
                    border: none;
                    border-bottom: 1px solid $color-border;
                    svg {
                        display: none;
                    }
                }
            }
            .filter-menu-group-selectbox-content {
                position: absolute;
                top: calc(100% - 1px);
                left: 0;
                z-index: 101;
                overflow: auto;
                display: none;
                width: 220px;
                max-height: 174px;
                padding: var(--spacer-4);
                background-color: #fff;
                border-radius: $border-radius;
                border: 1px solid $color-border;
                @include max($md) {
                    max-height: 178px;
                    padding-bottom: 0;
                }
                &::-webkit-scrollbar {
                    width: 5px;
                }
                &::-webkit-scrollbar-track {
                    background: lighten($color-border, 5%);
                }
                &::-webkit-scrollbar-thumb {
                    background: darken($color-border, 5%);
                }
                @include max($md) {
                    position: static;
                    top: 0;
                    display: block;
                    width: 100%;
                    padding-left: 0;
                    border: none;
                    border-radius: 0;
                    margin-top: var(--spacer-4);
                }
                > div > a {
                    position: relative;
                    display: block;
                    line-height: 20px;
                    color: $color-text;
                    font-size: var(--font-size-14);
                    padding-left: 36px;
                    margin-bottom: var(--spacer-5);
                    transition: $transition;
                    span {
                        color: $color-sub-text;
                        padding-left: 4px;
                    }
                    &:last-child {
                        margin-bottom: 0;
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 20px;
                        height: 20px;
                        border-radius: $border-radius;
                        border: 1px solid $color-border;
                        background-color: #fff;
                        transition: $transition;
                    }
                    &:before {
                        content: '';
                        position: absolute;
                        left: 7px;
                        top: 2px;
                        z-index: 1;
                        opacity: 0;
                        visibility: hidden;
                        display: inline-block;
                        width: 6px;
                        height: 12px;
                        border-bottom: 2px solid $color-primary;
                        border-right: 2px solid $color-primary;
                        transform: rotate(45deg);
                        transition: $transition;
                    }
                    &:hover,
                    &.checked {
                        color: $color-primary;
                        span {
                            color: $color-primary;
                        }
                        &:after {
                            border-color: $color-primary;
                        }
                        &:before {
                            opacity: 1;
                            visibility: visible;
                        }
                    }
                }
            }
            > a.active + .filter-menu-group-selectbox-content {
                display: block;
            }
        }
	}
    .filter-menu-selected-items {
        @include min($md) {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            > div {
                margin-right: var(--spacer-4);
                &:last-child {
                    margin-right: 0;
                }
            }
        }
        @include max($md) {
            display: flex;
            flex-direction: column;
            > div {
                margin-bottom: var(--spacer-4);
                &.clear-filters {
                    order: 1;
                }
                &.filter-menu-selected-group {
                    order: 2;
                }
            }
        }
        .filter-menu-selected-group {
            @include min($md) {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }
            .filter-menu-selected-item {
                @include min($md) {
                    margin-bottom: var(--spacer-4);
                    margin-right: var(--spacer-4);
                    &:last-child {
                        margin-right: 0;
                    }
                }
                @include max($md) {
                    margin-bottom: var(--spacer-4);
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
                a {
                    display: flex;
                    align-items: center;
                    line-height: 20px;
                    color: $color-text;
                    font-size: var(--font-size-14);
                    font-weight: 400;
                    background-color: #fff;
                    border-radius: $border-radius;
                    border: 1px solid $color-border;
                    transition: $transition;
                    svg {
                        path {
                            transition: $transition;
                        }
                    }
                    span {
                        position: relative;
                        margin: 0 12px;
                        &:after {
                            content: '';
                            position: absolute;
                            left: 0;
                            right: 0;
                            top: 50%;
                            transform: translateY(-51%);
                            width: 0;
                            height: 1px;
                            margin: 0 auto;
                            background-color: $color-primary;
                            transition: $transition;
                        }
                    }
                    i {
                        @include center;
                        width: 34px;
                        height: 34px;
                        background-color: $color-background;
                        border-right: 1px solid $color-border;
                    }
                    &:hover {
                        color: $color-primary;
                        svg {
                            path {
                                stroke: $color-primary;
                            }
                        }
                        span {
                            &:after {
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
        .clear-filters {
            margin-left: var(--spacer-2);
            margin-bottom: var(--spacer-4);
            @include max($md) {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            > span {
                line-height: 20px;
                color: $color-text;
                font-size: var(--font-size-16);
                font-weight: 600;
                @include min($md) {
                    display: none;
                }
            }
            @include max($md) {
                margin-left: 0;
            }
            a {
                display: flex;
                align-items: center;
                height: 36px;
                line-height: 20px;
                color: $color-text;
                font-size: var(--font-size-14);
                font-weight: 400;
                transition: $transition;
                &:hover {
                    color: $color-primary;
                }
                @include max($md) {
                    color: $color-primary;
                    font-weight: 600;
                }
            }
        }
    }
}

/* Sorting Options */
#sorting-options {
    border: 1px solid $color-border;
    border-radius: $border-radius;
    padding: var(--spacer-5) var(--spacer-4);
    margin-bottom: var(--spacer-8);
    .row {
        align-items: center;
    }
    select.form-control:not([size]):not([multiple]), select:not([size]) {
        height: 44px;
        color: $color-text;
        font-size: var(--font-size-12);
        cursor: pointer;
        padding: 4px 40px 4px 12px;
        border: 1px solid $color-border;
        border-radius: $border-radius;
        background-size: 20px;
        background-position: right 12px center;
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.692 7.94217L10.442 14.1922C10.384 14.2503 10.3151 14.2964 10.2392 14.3278C10.1633 14.3593 10.082 14.3755 9.99986 14.3755C9.91772 14.3755 9.8364 14.3593 9.76052 14.3278C9.68465 14.2964 9.61572 14.2503 9.55767 14.1922L3.30767 7.94217C3.1904 7.82489 3.12451 7.66583 3.12451 7.49998C3.12451 7.33413 3.1904 7.17507 3.30767 7.05779C3.42495 6.94052 3.58401 6.87463 3.74986 6.87463C3.91571 6.87463 4.07477 6.94052 4.19205 7.05779L9.99986 12.8664L15.8077 7.05779C15.8657 6.99972 15.9347 6.95366 16.0105 6.92224C16.0864 6.89081 16.1677 6.87463 16.2499 6.87463C16.332 6.87463 16.4133 6.89081 16.4892 6.92224C16.565 6.95366 16.634 6.99972 16.692 7.05779C16.7501 7.11586 16.7962 7.1848 16.8276 7.26067C16.859 7.33654 16.8752 7.41786 16.8752 7.49998C16.8752 7.5821 16.859 7.66342 16.8276 7.73929C16.7962 7.81516 16.7501 7.8841 16.692 7.94217Z' fill='black'/%3E%3C/svg%3E");
        @include min($lg) {
            min-width: 212px !important;
        }
    }
    .record-count {
        line-height: 20px;
        color: $color-text;
        font-size: var(--font-size-12);
        font-weight: 700;
    }
    .checkbox-custom {
        line-height: 24px;
        input[type=checkbox] {
            & + label {
                line-height: 24px;
                color: $color-text;
                font-size: var(--font-size-12);
                font-weight: 400;
                padding-left: 34px;
                &:before {
                    width: 24px;
                    height: 24px;
                    border: 2px solid $color-text;
                    @include border-radius(2px);
                }
            }
            &:checked {
                & + label {
                    &:before {
                        background-image: none;
                        border-color: $color-primary;
                        background-color: $color-white;
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        left: 9px;
                        top: 4px;
                        display: inline-block;
                        width: 6px;
                        height: 12px;
                        border-bottom: 2px solid $color-primary;
                        border-right: 2px solid $color-primary;
                        transform: rotate(45deg);
                    }
                }
            }
        }
    }
}

.product-category-and-brand-list {
    margin-bottom: var(--spacer-4);
    .product-category-and-brand-list-header {
        line-height: 20px;
        color: $color-text;
        font-size: var(--font-size-16);
        font-weight: 600;
        margin-bottom: var(--spacer-5);
    }
    .product-category-and-brand-list-content {
        > div {
            display: flex;
            flex-wrap: wrap;
            margin-right: calc(-1*var(--gutter));
            margin-left: calc(-1*var(--gutter));
            > div {
                flex: 0 0 auto;
                max-width: none;
                padding-right: var(--gutter);
                padding-left: var(--gutter);
                margin-bottom: var(--spacer-4);
                > a {
                    display: flex;
                    align-items: center;
                    height: 40px;
                    line-height: 20px;
                    color: $color-text;
                    font-size: var(--font-size-12);
                    font-weight: 700;
                    padding: 0 var(--spacer-4);
                    background-color: $color-white;
                    border: 1px solid $color-border;
                    transition: $transition;
                    border-radius: $border-radius;
                    span {
                        color: $color-sub-text;
                        font-weight: 500;
                    }
                    &:hover {
                        border-color: $color-primary;
                        background-color: $color-white;
                    }
                }
            }
            &.product-category-and-brand-list-content-image {
                margin-right: calc(-1*var(--gutter));
                margin-left: calc(-1*var(--gutter));
                > div {
                    flex: 0 0 calc(100% / 9);
                    max-width: calc(100% / 9);
                    padding-right: var(--gutter);
                    padding-left: var(--gutter);
                    @include max($xlg) {
                        flex: 0 0 calc(100% / 7);
                        max-width: calc(100% / 7);
                    }
                    @include max($lg) {
                        flex: 0 0 calc(100% / 5);
                        max-width: calc(100% / 5);
                    }
                    @include max($md) {
                        flex: 0 0 calc(100% / 4);
                        max-width: calc(100% / 4);
                    }
                    @include max($sm) {
                        flex: 0 0 calc(100% / 3);
                        max-width: calc(100% / 3);
                    }
                    @include max($xxs) {
                        flex: 0 0 calc(100% / 2);
                        max-width: calc(100% / 2);
                    }
                    > a {
                        display: block;
                        height: 100%;
                        text-align: center;
                        padding: var(--spacer-4);
                        .product-list-image {
                            position: relative;
                            overflow: hidden;
                            aspect-ratio: $aspect-ratio;
                            margin-bottom: var(--spacer-6);
                            @include imgcenter;
                        }
                    }
                }
            }
            {% if theme.settings.display_category_brands_logo_mobile %}
                @include max($lg) {
                    flex-wrap: nowrap;
                    overflow-x: auto;
                }
                &.product-category-and-brand-list-content-image {
                    > div {
                        @include max($lg) {
                            flex: 0 0 calc(100% / 5.5);
                            max-width: calc(100% / 5.5);
                        }
                        @include max($md) {
                            flex: 0 0 calc(100% / 4.5);
                            max-width: calc(100% / 4.5);
                        }
                        @include max($sm) {
                            flex: 0 0 calc(100% / 3.5);
                            max-width: calc(100% / 3.5);
                        }
                        @include max($xxs) {
                            flex: 0 0 calc(100% / 2.5);
                            max-width: calc(100% / 2.5);
                        }
                    }
                }
            {% endif %}
        }
    }
}

.cascade-menu {
	.parent-item {
		a.selected-item {
			color: $color-primary;
		}
	}
}

@include min($md) {
    #sorting-options {
        select.form-control:not([size]):not([multiple]), select:not([size]) {
            min-width: 160px;
        }
    }
}

/* Pagination */
.paginate-wrapper {
	position: relative;
	padding-top: var(--spacer-20);
	.paginate {
		display: flex;
		justify-content: flex-end;
		a {
			display: flex;
            align-items: center;
            justify-content: center;
            height: 32px;
			color: $color-sub-text;
            @include heading-type-4;
            margin: 0 var(--spacer-3);
		}
		.paginate-content {
			display: flex;
		}
		.paginate-left {
			a {
				margin-left: 0;
                width: 32px;
                border: 1px solid $color-border;
                @include border-radius(50%);
                i {
                    width: 16px;
                    height: 16px;
                    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.98 1.64645C11.1752 1.45118 11.4917 1.45118 11.687 1.64645C11.8823 1.84171 11.8823 2.15822 11.687 2.35348L6.04053 7.99996L11.687 13.6464C11.8823 13.8417 11.8823 14.1582 11.687 14.3535C11.4917 14.5487 11.1752 14.5487 10.98 14.3535L4.97998 8.35348C4.88621 8.25971 4.8335 8.13257 4.8335 7.99996C4.8335 7.86735 4.88621 7.74021 4.97998 7.64645L10.98 1.64645Z' fill='%23747474'/%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-position: 50%;
                    &:before {
                        display: none;
                    }
                }
			}
		}
		.paginate-right {
			a {
				margin-right: 0;
                width: 32px;
                border: 1px solid $color-border;
                @include border-radius(50%);
                i {
                    width: 16px;
                    height: 16px;
                    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.68701 1.64645C5.49175 1.45118 5.17524 1.45118 4.97998 1.64645C4.78472 1.84171 4.78472 2.15822 4.97998 2.35348L10.6265 7.99996L4.97998 13.6464C4.78472 13.8417 4.78472 14.1582 4.97998 14.3535C5.17524 14.5487 5.49175 14.5487 5.68701 14.3535L11.687 8.35348C11.7808 8.25971 11.8335 8.13257 11.8335 7.99996C11.8335 7.86735 11.7808 7.74021 11.687 7.64645L5.68701 1.64645Z' fill='%23747474'/%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-position: 50%;
                    &:before {
                        display: none;
                    }
                }
			}
		}
		.paginate-element-active {
            color: $color-primary;
		}
	}
}

/* Breadcrumbs */
#breadcrumbs {
	margin-bottom: var(--spacer-6);
	padding-bottom: var(--spacer-4);
    border-bottom: 2px solid $color-border;
	@include max($lg) {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
	ol {
		display: flex;
		align-items: center;
		padding: 0;
		margin: 0;
		li {
			i {
				width: 16px;
                height: 16px;
				background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.8535 3.85378L3.85354 12.8538C3.75972 12.9476 3.63247 13.0003 3.49979 13.0003C3.36711 13.0003 3.23986 12.9476 3.14604 12.8538C3.05222 12.76 2.99951 12.6327 2.99951 12.5C2.99951 12.3674 3.05222 12.2401 3.14604 12.1463L12.146 3.14628C12.2399 3.05246 12.3671 2.99976 12.4998 2.99976C12.6325 2.99976 12.7597 3.05246 12.8535 3.14628C12.9474 3.2401 13.0001 3.36735 13.0001 3.50003C13.0001 3.63272 12.9474 3.75996 12.8535 3.85378Z' fill='%23747474'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: 50%;
				margin: 0 8px;
			}
			span {
				display: flex;
				align-items: center;
				white-space: nowrap;
                line-height: 22px;
                color: $color-sub-text;
                font-size: var(--font-size-14);
                font-weight: 400;
                span,
                a {
                    padding: var(--spacer-1) var(--spacer-2);
                }
			}
			a {
				color: $color-sub-text;
            }
            &:first-child {
                span {
                    span {
                        &:before {
                            content: '';
                            width: 16px;
                            height: 16px;
                            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.6769 6.48566L8.67688 1.76816C8.67443 1.76603 8.67213 1.76373 8.67 1.76129C8.48591 1.59387 8.24602 1.5011 7.99719 1.5011C7.74836 1.5011 7.50846 1.59387 7.32438 1.76129L7.3175 1.76816L2.32312 6.48566C2.22125 6.57934 2.13993 6.69315 2.08431 6.81988C2.02869 6.94661 1.99998 7.08351 2 7.22191V13C2 13.2653 2.10536 13.5196 2.29289 13.7071C2.48043 13.8947 2.73478 14 3 14H6C6.26522 14 6.51957 13.8947 6.70711 13.7071C6.89464 13.5196 7 13.2653 7 13V10H9V13C9 13.2653 9.10536 13.5196 9.29289 13.7071C9.48043 13.8947 9.73478 14 10 14H13C13.2652 14 13.5196 13.8947 13.7071 13.7071C13.8946 13.5196 14 13.2653 14 13V7.22191C14 7.08351 13.9713 6.94661 13.9157 6.81988C13.8601 6.69315 13.7788 6.57934 13.6769 6.48566ZM13 13H10V10C10 9.73482 9.89464 9.48047 9.70711 9.29293C9.51957 9.10539 9.26522 9.00004 9 9.00004H7C6.73478 9.00004 6.48043 9.10539 6.29289 9.29293C6.10536 9.48047 6 9.73482 6 10V13H3V7.22191L3.00688 7.21566L8 2.50004L12.9937 7.21441L13.0006 7.22066L13 13Z' fill='%23747474'/%3E%3C/svg%3E");
                            background-repeat: no-repeat;
                            background-position: 50%;
                            margin-right: var(--spacer-2);
                        }
                    }
                }
            }
            &:last-child {
                span {
                    i {
                        background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.8535 3.85378L3.85354 12.8538C3.75972 12.9476 3.63247 13.0003 3.49979 13.0003C3.36711 13.0003 3.23986 12.9476 3.14604 12.8538C3.05222 12.76 2.99951 12.6327 2.99951 12.5C2.99951 12.3674 3.05222 12.2401 3.14604 12.1463L12.146 3.14628C12.2399 3.05246 12.3671 2.99976 12.4998 2.99976C12.6325 2.99976 12.7597 3.05246 12.8535 3.14628C12.9474 3.2401 13.0001 3.36735 13.0001 3.50003C13.0001 3.63272 12.9474 3.75996 12.8535 3.85378Z' fill='black'/%3E%3C/svg%3E");
                    }
                    span,
                    a {
                        color: $color-text;
                        font-weight: 700;
                    }
                }
            }
		}
	}
}

.default-category-name {
    h1 {
        color: $color-text;
        @include display-type-6;
        margin-bottom: var(--spacer-3);
    }
}

.current-page-product-list-filter {
    #head-content {
        color: $color-sub-text;
        @include text-type-5;
        border: none;
        padding: 0;
        margin-bottom: var(--spacer-8);
    }
}

#footer-content {
    color: $color-sub-text;
    @include text-type-5;
    border-top: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
    padding-block: var(--spacer-6);
    margin-top: var(--spacer-20);

}

/* @Product Detail */
/* Product Top Area */
.product-left,
.product-right {
    margin-bottom: var(--spacer-14);
}

.product-label-group {
    position: absolute;
    right: var(--spacer-8);
    top: var(--spacer-8);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    > div {
        color: $color-white;
        @include heading-type-6;
        @include border-radius(4px);
        padding: var(--spacer-1) var(--spacer-2);
        margin-bottom: var(--spacer-3);
        &:last-child {
            margin-bottom: 0;
        }
        &.product-extra-fields-1 {
            background-color: $color-info;
        }
        &.product-extra-fields-2 {
            background-color: $color-warning;
        }
        &.new-label {
            background-color: $color-success;
        }
        &.gift-label {
            background-color: $color-accent;
        }
    }
    @include max($sm) {
        right: var(--spacer-4);
        top: var(--spacer-4);
    }
}

.product-image {
	#product-primary-image {
        position: relative;
        aspect-ratio: $aspect-ratio;
        overflow: hidden;
        border-radius: $border-radius;
		margin-bottom: var(--spacer-6);
		@include imgcenter;
	}
}

.zoomContainer {
    overflow: hidden;
    border-radius: $border-radius;
}

#product-thumb-image {
    height: 0;
    overflow: hidden;
    &.slick-slider {
        height: auto;
        overflow: visible;
        @include max($sm) {
            padding-right: 2px;
        }
    }
	.thumb-item {
		> a {				
            position: relative;
            display: block;
            aspect-ratio: $aspect-ratio;
            overflow: hidden;
            border-radius: $border-radius;
            opacity: 0.4;
            @include imgcenter;
            &.zoomGalleryActive {
                opacity: 1;
            }
        }
	}
    .slick-dots {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding-top: var(--spacer-8);
        width: 100%;
        > li {
            margin: 0 3px;
            > button {
                width: 10px;
                height: 10px;
                border: none;
                position: relative;
                overflow: hidden;
                text-indent: -9999px;
                border-radius: 100%;
                background-color: $color-border;
                padding: 0;
                display: block;
                margin-bottom: 5px;
                transition: $transition;
            }
            &.slick-active {
                > button {
                    background-color: $color-primary;
                }
            }
        }
    }
	.slick-arrow {
		position: absolute;
        opacity: 1;
        top: 50%;
        z-index: 2;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        cursor: pointer;
        background: $color-white;
        &.slick-prev {
            left: 12px;
        }
        &.slick-next {
            right: 12px;
        }
        &.slick-disabled {
            opacity: 0.5;
        }
	}
}

.product-info {
    display: flex;
    gap: var(--spacer-4);
    margin-bottom: var(--spacer-6);
}

.product-title {
	h1 {
        color: $color-text;
        @include display-type-5;
        margin-bottom: 0;
	}
}

.product-favorites {
    > a.add-my-favorites {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        .product-icon-favori-add {
            display: none;
        }
        &.favorite-product {
            .product-icon-favori {
                display: none;
            }
            .product-icon-favori-add {
                display: block;
            }
        }
    }
}

.product-price {
    margin-bottom: var(--spacer-6);
    .product-price-content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--spacer-3);
    }
    .product-price-new {
        color: $color-text;
        @include display-type-4;
    }
    .product-price-old {
        color: $color-sub-text;
        @include text-type-3;
        text-decoration: line-through;
    }
/* Kutu boyutunu değiştirmeden hafifçe büyütüp küçülten güvenli animasyon */
@keyframes gentlePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); } /* Çok hafif büyür */
    100% { transform: scale(1); }
}

.discount-label {
    /* ürün sayfasında görünen indirim kutusu*/
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 6px 14px;
    
    display: inline-block;
    color: $color-white;
    background: $color-primary;
    border-radius: $border-radius;
    margin-bottom: var(--spacer-3);

    /* GÜNCELLEME: Mobilde de sıfır kasma ile çalışan animasyon kodları */
    animation: gentlePulse 2.5s infinite ease-in-out; /* Sonsuz döngüde yumuşak hareket */
    will-change: transform; /* Mobil işlemcisini (GPU) devreye sokar, kasmayı önler */
}
}

.product-tax-price {
    margin-bottom: var(--spacer-6);
    .custom-installment-boxes {
        display: flex;
        align-items: stretch;
        gap: 12px;
        flex-wrap: wrap;
        
        .custom-installment-box {
            display: flex;
            flex-direction: column;
            flex: 1; 
            min-width: 130px;
            background-color: $color-white;
            border: 1px solid $color-border; 
            border-radius: 12px; // Modern oval hatlar
            overflow: hidden;          
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            box-shadow: 0 2px 6px rgba(0,0,0,0.02);

            &:hover {
                transform: translateY(-3px);
                border-color: #9d174d; // Bordo tema renginiz
                box-shadow: 0 6px 16px rgba(157, 23, 77, 0.12); // Yumuşak marka gölgesi
            }

            .installment-top {
                background-color: transparent;    
                color: $color-sub-text !important;    
                padding: 12px 10px 4px 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 18px; 
                font-weight: 500;   
                margin-bottom: 0;
                white-space: nowrap;
                border: none; 
            }

            .installment-bottom {
                background-color: transparent;    
                color: #9d174d !important; 
                padding: 4px 10px 12px 10px;            
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 21px;
                font-weight: 700;             
                margin-bottom: 0;
                white-space: nowrap;
            }
        }
    }
}

.product-tax-text {
    display: flex;
    align-items: center;
    gap: var(--spacer-3);
    color: $color-text;
    @include heading-type-4;
    border: 1px solid $color-border;
    border-radius: $border-radius;
    padding: var(--spacer-4);
    margin-bottom: var(--spacer-6);
    span {
        flex: 1 0 0;
    }
}

.jq-ry-container {
    position: relative;
    line-height: 0;
    cursor: pointer;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    direction: ltr;
    > .jq-ry-group-wrapper {
        position: relative;
        width: 100%;
        > .jq-ry-group {
            position: relative;
            line-height: 0;
            z-index: 2;
            white-space: nowrap;
            > svg {
                display: inline-block;
            }
        }
        > .jq-ry-groupjq-ry-normal-group {
            width: 100%;
        }
        > .jq-ry-group.jq-ry-rated-group {
            width: 0;
            z-index: 2;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
        }
    }
}

.product-comments-container {
    display: flex;
    align-items: center;
    color: $color-text;
    @include text-type-6;
    cursor: pointer;
    margin-bottom: var(--spacer-3);
    > span {
        margin-left: var(--spacer-3);
    }
}

/* Product List */
.product-list-container {
    margin-bottom: var(--spacer-6);
    background: #fcfcfc; // Arka plandan hafif ayırmak için çok açık gri
    padding: 16px;
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: 12px;

    .product-list-row {
        display: flex;
        align-items: center;
        font-size: 13px; 
        
        &:not(:last-child) {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba($color-border, 0.5); // Şık bir ayrım çizgisi
        }

        a {
            color: $color-text;
            transition: $transition;
            &:hover {
                color: $color-primary;
            }
        }

        .product-list-title {
            flex: 0 0 100px; 
            color: $color-sub-text; 
            font-weight: 500;
        }

        .product-list-content {
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            font-weight: 600;
            color: $color-text;
            
            &:before {
                content: ':';
                font-weight: 500;
                color: $color-sub-text;
                margin-right: 10px;
            }
        }
    }
}


/* @Variants */
.product-options {
    .variant-group-title {
        display: block;
        color: $color-text;
        @include heading-type-5;
		margin-bottom: var(--spacer-3);
    }
	select.form-control:not([size]):not([multiple]),
    select:not([size]) {
        height: 44px;
        color: $color-text;
        font-size: var(--font-size-12);
        font-weight: 300;
        cursor: pointer;
        padding: 6px 28px 6px 20px;
        border: 1px solid $color-border;
        background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 16.0005L18 22L12 16.0005L12.9999 15L18 20.0004L23.0001 15L24 16.0005Z' fill='%232B2D42'/%3E%3C/svg%3E%0A");
        background-size: 36px;
        background-position: right center;
        border-radius: $border-radius;
    }
    .variant-plural {
        margin-bottom: var(--spacer-4);
    }
}

.variant-select {
    margin-bottom: var(--spacer-8);
	.variant-list {
		margin-bottom: var(--spacer-4);
		&:last-child {
			margin-bottom: 0;
		}
		select {
			width: 50% !important;
			@include max($xs) {
				width: 100% !important;
			}
		}
	}
}

.variant-plural {
    .variant-list-group {
        &:not(:last-child) {
            margin-bottom: var(--spacer-4);
        }
    }
    .variant-list {
        flex: 0 0 100%;
        display: flex;
        flex-wrap: wrap;
    }
    span {
        position: relative;
        flex: 0 0 auto;
        cursor: pointer;
        padding: 12px;
        margin: 0 8px 8px 0;
        border: 1px solid $color-border;
        background-color: $color-white;
        border-radius: 8px; // 12px yaparak biraz modernleştirdik
        color: $color-text;
        @include text-type-6;
        transition: all 0.25s ease;
        
        &:last-child {
            margin-right: 0;
        }
        
        &:hover {
            border-color: $color-primary;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05); // Üzerine gelince zarif gölge
        }
        
        &.variant-selected {
            border-color: $color-primary;
            box-shadow: 0 0 0 1px $color-primary; // Seçileni daha net vurgulama
            
            &:before {
                content: '\f00c';
                position: absolute;
                right: -6px; // Köşeye daha iyi oturması için
                top: -6px; 
                z-index: 1;
                width: 18px;
                height: 18px;
                @include center;
                color: $color-white;
                font-size: 9px;
                font-weight: 900;
                font-family: "Font Awesome 5 Free";
                padding-top: 1px;
                background-color: $color-primary;
                border-radius: 100%;
                box-shadow: 0 2px 4px rgba(0,0,0,0.2); // Tik işaretine gölge
            }
        }
        
        &.variant-passive,
        &.variant-no-stock,
        &.variant-passive:hover,
        &.variant-no-stock:hover {
            cursor: no-drop;
            background-color: #f9f9f9;
            color: #aaa;
            border-color: #eee;
        }
        
        &.variant-image {
            width: 42px; // Resmi biraz büyüterek tıklamayı kolaylaştırdık
            height: 42px;
            padding: 2px; // Resim etrafındaki beyaz pay
            border-color: $color-border;
            @include border-radius(50%);
            
            img {
                width: 100%;
                height: 100%;
                @include border-radius(50%);
                padding: 0;
                object-fit: cover;
            }
            
            &:hover,
            &.variant-selected {
                border-color: $color-primary;
                padding: 2px;
            }
            
            &.variant-passive {
                opacity: 0.4;
                background-color: transparent;
            }
        }
    }
}
.variant-singular {
    margin-bottom: var(--spacer-4);
	.radio-custom {
        margin-bottom: var(--spacer-4);
	}
}

.cargo-date-area {
    display: flex;
    align-items: center;
    gap: var(--spacer-3);
    border: 1px solid $color-border;
    border-radius: $border-radius;
    padding: var(--spacer-4);
    margin-bottom: var(--spacer-6);
    .cargo-date-content {
        flex: 1 0 0;
        color: $color-text;
        @include text-type-5;
    }
}

.product-cart-buttons {
	display: flex;
    flex-wrap: wrap;
    gap: var(--spacer-4);
    margin-bottom: var(--spacer-6);
    > div {
        flex: 1 0 0;
        max-width: none;
        &.product-qty {
            flex: 0 0 123px;
            max-width: 123px;
        }
    }
    @include max($sm) {
        > div {
            &.product-qty {
                flex: 0 0 100%;
                max-width: 100%;
            }
        } 
    }
}

.product-qty {
    position: relative;
    height: 54px; 
    > a {
        position: absolute;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        width: 36px;
        height: 100%;
        color: $color-text;
        transition: all 0.2s ease;
        &:hover {
            color: $color-primary;
        }
        &.product-qty-minus {
            left: 0;
            justify-content: flex-end;
        }
        &.product-qty-plus {
            right: 0;
        }
    }
    input {
        width: 100%;
        height: 100%;
        color: $color-text;
        @include line-rule(14);
        font-weight: 600;
        font-size: 16px;
        text-align: center;
        padding: 0;
        background-color: $color-white;
        border-radius: 12px; // Adet alanının köşeleri de buton gibi
        border: 1px solid $color-border;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);
        
        &:focus {
            border-color: $color-primary;
            outline: none;
        }
    }
    select.form-control:not([size]):not([multiple]),
    select:not([size]) {
        height: 100%;
        color: $color-text;
        @include line-rule(14);
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        padding: 6px 36px 6px 12px;
        border: 1px solid $color-border;
        border-radius: 12px;
        background-color: $color-white;
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.64645 4.64645C1.84171 4.45118 2.15829 4.45118 2.35355 4.64645L8 10.2929L13.6464 4.64645C13.8417 4.45118 14.1583 4.45118 14.3536 4.64645C14.5488 4.84171 14.5488 5.15829 14.3536 5.35355L8.35355 11.3536C8.15829 11.5488 7.84171 11.5488 7.64645 11.3536L1.64645 5.35355C1.45118 5.15829 1.45118 4.84171 1.64645 4.64645Z' fill='black'/%3E%3C/svg%3E%0A");
        background-size: 16px;
    }
}

.product-cart-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-bottom: var(--spacer-8); 

    > div {
        flex: 1 0 0;
        max-width: none;
        &.product-qty {
            flex: 0 0 120px; 
            max-width: 120px;
        }
    }

    a.add-to-cart-button,
    a.no-stock-button,
    a.quick-order-button,
    a.remind-me-button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 54px; // Butonu biraz dolgunlaştırdık
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.3px;
        border-radius: 12px; // Modern hatlar
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    a.add-to-cart-button {
        background-color: #9d174d; 
        color: $color-white;
        border: none;
        box-shadow: 0 4px 12px rgba(157, 23, 77, 0.25); // Marka rengiyle şık bir gölge

        &:hover {
            transform: translateY(-2px); // Hover olunca yukarı kalkar
            background-color: darken(#9d174d, 4%);
            box-shadow: 0 6px 16px rgba(157, 23, 77, 0.35);
        }
        
        &:active {
            transform: translateY(0);
        }
    }

    @include max($sm) {
        gap: 8px;
        > div {
            &.product-qty {
                flex: 0 0 100px;
                max-width: 100px;
            }
        }
        a.add-to-cart-button {
            font-size: 15px;
        }
    }
}


.product-short-details {
    color: $color-sub-text;
    @include text-type-4;
    margin-bottom: var(--spacer-6);
}

#product-user-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacer-8);
    > div {
        a {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            color: $color-text;
            @include text-type-5;
            transition: $transition;
            @include svg;
            span {
                padding-left: 4px;
            }
            @include min($lg) {
                &:hover {
                    color: $color-primary;
                    @include svghover($color-primary);
                }
            }
        }
    }
}

.product-social {
    position: relative;
    > a {
        @include svg;
        @include min($lg) {
            &:hover {
                color: $color-primary !important;
                @include svghover($color-primary);
            }
        }
        &.active {
            color: $color-primary !important;
            @include svghover($color-primary);
        }
    }
    .product-social-content {
        position: absolute;
        top: 150%;
        left: 0;
        z-index: 11;
        display: none;
        padding: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        background-color: #fff;
        border-radius: $border-radius;
        > div {
            display: flex;
            > div {
                margin-right: 5px;
                &:last-child {
                    margin-right: 0;
                }
                > a {
                    @include center;
                    width: 26px;
                    height: 26px;
                    svg {
                        path {
                            fill: $color-white !important;
                        }
                    }
                    &.product-social-facebook {
                        background-color: #3b5998;
                    }
                    &.product-social-twitter {
                        background-color: #1da1f2;
                    }
                    &.product-social-pinterest {
                        background-color: #bd081c;
                    }
                    &.product-social-whatsapp {
                        background-color: #128c7e;
                    }
                }
            }
        }
    }
}

/* Product Detail Tab */
.product-detail-tab {
    margin-bottom: var(--spacer-30);
    .product-detail-tab-content {
        .product-detail-tab-row {
            border: 1px solid $color-border;
            border-radius: $border-radius;
            background-color: $color-primary;
            padding: var(--spacer-4) var(--spacer-5);
            transition: $transition;
            &:not(:last-child) {
                margin-bottom: var(--spacer-6);
            }
            [data-tab-index] {
                > a {
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: var(--spacer-3);
                    color: $color-white;
                    @include heading-type-4;
                    &:after {
                        content: '';
                        flex: 0 0 20px;
                        width: 20px;
                        height: 20px;
                        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_12348_2551' fill='white'%3E%3Cpath d='M10.0003 13.9998C9.41693 13.9998 8.83359 13.7748 8.39193 13.3331L2.95859 7.89979C2.71693 7.65812 2.71693 7.25812 2.95859 7.01646C3.20026 6.77479 3.60026 6.77479 3.84193 7.01646L9.27526 12.4498C9.67526 12.8498 10.3253 12.8498 10.7253 12.4498L16.1586 7.01646C16.4003 6.77479 16.8003 6.77479 17.0419 7.01646C17.2836 7.25812 17.2836 7.65812 17.0419 7.89979L11.6086 13.3331C11.1669 13.7748 10.5836 13.9998 10.0003 13.9998Z'/%3E%3C/mask%3E%3Cpath d='M10.0003 13.9998C9.41693 13.9998 8.83359 13.7748 8.39193 13.3331L2.95859 7.89979C2.71693 7.65812 2.71693 7.25812 2.95859 7.01646C3.20026 6.77479 3.60026 6.77479 3.84193 7.01646L9.27526 12.4498C9.67526 12.8498 10.3253 12.8498 10.7253 12.4498L16.1586 7.01646C16.4003 6.77479 16.8003 6.77479 17.0419 7.01646C17.2836 7.25812 17.2836 7.65812 17.0419 7.89979L11.6086 13.3331C11.1669 13.7748 10.5836 13.9998 10.0003 13.9998Z' fill='black'/%3E%3Cpath d='M8.39193 13.3331L7.33127 14.3938V14.3938L8.39193 13.3331ZM2.95859 7.89979L4.01925 6.83913V6.83913L2.95859 7.89979ZM3.84193 7.01646L2.78127 8.07712L3.84193 7.01646ZM9.27526 12.4498L10.3359 11.3891L9.27526 12.4498ZM10.7253 12.4498L11.7859 13.5104V13.5104L10.7253 12.4498ZM16.1586 7.01646L15.0979 5.95579L15.0979 5.95579L16.1586 7.01646ZM17.0419 7.89979L15.9813 6.83913V6.83913L17.0419 7.89979ZM11.6086 13.3331L12.6693 14.3938V14.3938L11.6086 13.3331ZM10.0003 13.9998V12.4998C9.80099 12.4998 9.60337 12.4232 9.45259 12.2725L8.39193 13.3331L7.33127 14.3938C8.06382 15.1263 9.03286 15.4998 10.0003 15.4998V13.9998ZM8.39193 13.3331L9.45259 12.2725L4.01925 6.83913L2.95859 7.89979L1.89793 8.96045L7.33127 14.3938L8.39193 13.3331ZM2.95859 7.89979L4.01925 6.83913C4.36337 7.18325 4.36337 7.733 4.01925 8.07712L2.95859 7.01646L1.89793 5.95579C1.07048 6.78325 1.07048 8.133 1.89793 8.96045L2.95859 7.89979ZM2.95859 7.01646L4.01925 8.07712C3.67513 8.42124 3.12539 8.42124 2.78127 8.07712L3.84193 7.01646L4.90259 5.95579C4.07513 5.12834 2.72539 5.12834 1.89793 5.95579L2.95859 7.01646ZM3.84193 7.01646L2.78127 8.07712L8.2146 13.5104L9.27526 12.4498L10.3359 11.3891L4.90259 5.95579L3.84193 7.01646ZM9.27526 12.4498L8.2146 13.5104C9.20039 14.4962 10.8001 14.4962 11.7859 13.5104L10.7253 12.4498L9.6646 11.3891C9.85039 11.2033 10.1501 11.2033 10.3359 11.3891L9.27526 12.4498ZM10.7253 12.4498L11.7859 13.5104L17.2193 8.07712L16.1586 7.01646L15.0979 5.95579L9.6646 11.3891L10.7253 12.4498ZM16.1586 7.01646L17.2193 8.07712C16.8751 8.42124 16.3254 8.42124 15.9813 8.07712L17.0419 7.01646L18.1026 5.95579C17.2751 5.12834 15.9254 5.12834 15.0979 5.95579L16.1586 7.01646ZM17.0419 7.01646L15.9813 8.07712C15.6371 7.733 15.6371 7.18325 15.9813 6.83913L17.0419 7.89979L18.1026 8.96045C18.93 8.133 18.93 6.78325 18.1026 5.95579L17.0419 7.01646ZM17.0419 7.89979L15.9813 6.83913L10.5479 12.2725L11.6086 13.3331L12.6693 14.3938L18.1026 8.96045L17.0419 7.89979ZM11.6086 13.3331L10.5479 12.2725C10.3972 12.4232 10.1995 12.4998 10.0003 12.4998V13.9998V15.4998C10.9677 15.4998 11.9367 15.1263 12.6693 14.3938L11.6086 13.3331Z' fill='%23747474' mask='url(%23path-1-inside-1_12348_2551)'/%3E%3C/svg%3E");
                        background-repeat: no-repeat;
                        background-position: 50%;
                        transition: $transition;
                    }
                }
            }
            &.active {
                background: $color-background;
                border-color: $color-background;
                padding-block: var(--spacer-6);
                [data-tab-index] {
                    > a {
                        color: $color-primary;
                        &:after {
                            transform: rotate(-180deg);
                            @function url-encoded-color($color) {
                                @return '%23' + str-slice('#{$color}', 2, -1);
                            }
                            background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_12348_2551' fill='white'%3E%3Cpath d='M10.0003 13.9998C9.41693 13.9998 8.83359 13.7748 8.39193 13.3331L2.95859 7.89979C2.71693 7.65812 2.71693 7.25812 2.95859 7.01646C3.20026 6.77479 3.60026 6.77479 3.84193 7.01646L9.27526 12.4498C9.67526 12.8498 10.3253 12.8498 10.7253 12.4498L16.1586 7.01646C16.4003 6.77479 16.8003 6.77479 17.0419 7.01646C17.2836 7.25812 17.2836 7.65812 17.0419 7.89979L11.6086 13.3331C11.1669 13.7748 10.5836 13.9998 10.0003 13.9998Z'/%3E%3C/mask%3E%3Cpath d='M10.0003 13.9998C9.41693 13.9998 8.83359 13.7748 8.39193 13.3331L2.95859 7.89979C2.71693 7.65812 2.71693 7.25812 2.95859 7.01646C3.20026 6.77479 3.60026 6.77479 3.84193 7.01646L9.27526 12.4498C9.67526 12.8498 10.3253 12.8498 10.7253 12.4498L16.1586 7.01646C16.4003 6.77479 16.8003 6.77479 17.0419 7.01646C17.2836 7.25812 17.2836 7.65812 17.0419 7.89979L11.6086 13.3331C11.1669 13.7748 10.5836 13.9998 10.0003 13.9998Z' fill='black'/%3E%3Cpath d='M8.39193 13.3331L7.33127 14.3938V14.3938L8.39193 13.3331ZM2.95859 7.89979L4.01925 6.83913V6.83913L2.95859 7.89979ZM3.84193 7.01646L2.78127 8.07712L3.84193 7.01646ZM9.27526 12.4498L10.3359 11.3891L9.27526 12.4498ZM10.7253 12.4498L11.7859 13.5104V13.5104L10.7253 12.4498ZM16.1586 7.01646L15.0979 5.95579L15.0979 5.95579L16.1586 7.01646ZM17.0419 7.89979L15.9813 6.83913V6.83913L17.0419 7.89979ZM11.6086 13.3331L12.6693 14.3938V14.3938L11.6086 13.3331ZM10.0003 13.9998V12.4998C9.80099 12.4998 9.60337 12.4232 9.45259 12.2725L8.39193 13.3331L7.33127 14.3938C8.06382 15.1263 9.03286 15.4998 10.0003 15.4998V13.9998ZM8.39193 13.3331L9.45259 12.2725L4.01925 6.83913L2.95859 7.89979L1.89793 8.96045L7.33127 14.3938L8.39193 13.3331ZM2.95859 7.89979L4.01925 6.83913C4.36337 7.18325 4.36337 7.733 4.01925 8.07712L2.95859 7.01646L1.89793 5.95579C1.07048 6.78325 1.07048 8.133 1.89793 8.96045L2.95859 7.89979ZM2.95859 7.01646L4.01925 8.07712C3.67513 8.42124 3.12539 8.42124 2.78127 8.07712L3.84193 7.01646L4.90259 5.95579C4.07513 5.12834 2.72539 5.12834 1.89793 5.95579L2.95859 7.01646ZM3.84193 7.01646L2.78127 8.07712L8.2146 13.5104L9.27526 12.4498L10.3359 11.3891L4.90259 5.95579L3.84193 7.01646ZM9.27526 12.4498L8.2146 13.5104C9.20039 14.4962 10.8001 14.4962 11.7859 13.5104L10.7253 12.4498L9.6646 11.3891C9.85039 11.2033 10.1501 11.2033 10.3359 11.3891L9.27526 12.4498ZM10.7253 12.4498L11.7859 13.5104L17.2193 8.07712L16.1586 7.01646L15.0979 5.95579L9.6646 11.3891L10.7253 12.4498ZM16.1586 7.01646L17.2193 8.07712C16.8751 8.42124 16.3254 8.42124 15.9813 8.07712L17.0419 7.01646L18.1026 5.95579C17.2751 5.12834 15.9254 5.12834 15.0979 5.95579L16.1586 7.01646ZM17.0419 7.01646L15.9813 8.07712C15.6371 7.733 15.6371 7.18325 15.9813 6.83913L17.0419 7.89979L18.1026 8.96045C18.93 8.133 18.93 6.78325 18.1026 5.95579L17.0419 7.01646ZM17.0419 7.89979L15.9813 6.83913L10.5479 12.2725L11.6086 13.3331L12.6693 14.3938L18.1026 8.96045L17.0419 7.89979ZM11.6086 13.3331L10.5479 12.2725C10.3972 12.4232 10.1995 12.4998 10.0003 12.4998V13.9998V15.4998C10.9677 15.4998 11.9367 15.1263 12.6693 14.3938L11.6086 13.3331Z' fill='#{url-encoded-color($color-primary)}' mask='url(%23path-1-inside-1_12348_2551)'/%3E%3C/svg%3E");
                        }
                    }
                }
            }
        }
        [data-tab-content] {
            height: auto;
            overflow: visible;
            display: none;
            > div {
                color: $color-text;
                @include text-type-5;
                padding-top: var(--spacer-4);
            }
        }
    }
}

.product-customization {
    padding: var(--spacer-8) 0 var(--spacer-3);
    margin: var(--spacer-8) 0;
    border-top: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
    .product-customization-group {
        .product-customization-group-title {
            @include line-rule(14);
            margin-bottom: var(--spacer-4);
        }
        .product-customization-field {
            .form-group {
                .control-label {
                    color: $color-text;
                    @include line-rule(12);
                    font-weight: 600;
                    margin-bottom: 0;
                    @include max($sm) {
                        margin-bottom: var(--spacer-3);
                    }
                }
            }
        }
    }
    .form-control {
        height: 44px;
        border: 1px solid $color-border;
        border-radius: $border-radius;
    }
    textarea.form-control {
        height: 120px;
    }
    .form-group select.form-control:not([size]):not([multiple]),
    .form-group select:not([size]) {
        height: 44px;
        cursor: pointer;
        border: 1px solid $color-border;
        border-radius: $border-radius;
        background-size: 36px;
        background-position: right center;
        background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 16.0005L18 22L12 16.0005L12.9999 15L18 20.0004L23.0001 15L24 16.0005Z' fill='%232B2D42'/%3E%3C/svg%3E%0A");
    }
    .form-horizontal .form-question {
        top: 5px;
        right: -4px;
        width: 15px;
        height: 15px;
        border-radius: 100%;
    }
}

.product-sticky {
    position: fixed;
	left: 0;
	bottom: -100%;
	z-index: 90;
	width: 100%;
    background: $color-white;
    box-shadow: 0px -4px 24px 0px #0000001A;
    padding: var(--spacer-4) var(--spacer-6);
    transition: all 0.75s ease-in-out;
    .product-image {
        #product-primary-image {
            width: 116px;
            height: 116px;
            margin-bottom: 0;
        }
    }
    .product-info,
    .product-price,
    .product-cart-buttons {
        margin-bottom: 0;
    }
    .product-cart-buttons {
        > div {
            flex: 1 0 0;
            max-width: none;
            &.product-qty {
                flex: 0 0 123px;
                max-width: 123px;
            }
        }
        .product-add-to-cart-button,
        .product-no-stock-button,
        .product-remind-me-button {
            width: 487px;
        }
    }
}

.product-sticked {
	.product-sticky {
		bottom: 0;
	}
}



@include max($lg) {
    .idea-promotion-bar {
        {% if theme.settings.idea_popup_bar_control %}
		    display: block !important;
        {% else %}
            display: none !important;
        {% endif %}
	}
}


/* 5. STOK TÜKENDİ DURUMUNDA FİYATLARI GİZLEME VE UYARI EKLENTİSİ */
// Eğer butonlar arasında "Gelince Haber Ver" veya "Stokta Yok" butonu varsa
body:has(.remind-me-button),
body:has(.no-stock-button) {
    
    // Fiyat alanlarını ve miktar/adet seçiciyi tamamen gizle
    .product-price,
    .product-tax-price,
    .product-qty {
        display: none !important;
    }

    // Butonların olduğu alanı alt alta dizeriz ve bir uyarı ekleriz
    .product-cart-buttons {
        flex-direction: column;
        
        &::before {
            content: 'STOKLAR TÜKENDİ';
            display: block;
            width: 100%;
            text-align: center;
            font-size: 18px;
            font-weight: 800;
            color: #d32f2f; // Dikkat çekici bir uyarı kırmızısı
            background-color: #fdeaea;
            border: 1px dashed #ef9a9a;
            border-radius: 12px;
            padding: 14px;
        }
        
        // "Gelince Haber Ver" Butonu tam genişlik (full-width) yapısı alır
        a.remind-me-button,
        a.no-stock-button {
            width: 100%;
        }
    }
}
/* @Extra Code */
/* Aşağıdaki root kontrollerini lütfen değiştirmeyiniz */
:root {
    --gutter : #{$gutter};
    {% for i in 1..40 %}
        --spacer-{{ i }}: {{ i*4 }}px;
    {% endfor %}
    {% for i in 10..120 %}
        --font-size-{{ i }}: {{ i }}px;
    {% endfor %}
}

@include max($lg) {
    :root {
        {% for i in 1..20 %}
            --spacer-{{ i }}: {{ i*3 }}px;
        {% endfor %}
        {% for i in 21..29 %}
            --spacer-{{ i }}: {{ i*(2.5) }}px;
        {% endfor %}
        {% for i in 30..40 %}
            --spacer-{{ i }}: {{ i*2 }}px;
        {% endfor %}
        {% for i in 10..14 %}
            --font-size-{{ i }}: {{ i*(0.95) }}px;
        {% endfor %}
        {% for i in 15..18 %}
            --font-size-{{ i }}: {{ i*(0.90) }}px;
        {% endfor %}
        {% for i in 19..28 %}
            --font-size-{{ i }}: {{ i*(0.80) }}px;
        {% endfor %}
        {% for i in 29..36 %}
            --font-size-{{ i }}: {{ i*(0.75) }}px;
        {% endfor %}
        {% for i in 37..84 %}
            --font-size-{{ i }}: {{ i*(0.65) }}px;
        {% endfor %}
        {% for i in 85..120 %}
            --font-size-{{ i }}: {{ i*(0.55) }}px;
        {% endfor %}
    }
}

@include max($sm) {
    :root {
        {% for i in 1..20 %}
            --spacer-{{ i }}: {{ i*2 }}px;
        {% endfor %}
        {% for i in 21..29 %}
            --spacer-{{ i }}: {{ i*(1.5) }}px;
        {% endfor %}
        {% for i in 30..40 %}
            --spacer-{{ i }}: {{ i*1 }}px;
        {% endfor %}
        {% for i in 10..14 %}
            --font-size-{{ i }}: {{ i*(0.85) }}px;
        {% endfor %}
        {% for i in 15..18 %}
            --font-size-{{ i }}: {{ i*(0.80) }}px;
        {% endfor %}
        {% for i in 19..28 %}
            --font-size-{{ i }}: {{ i*(0.75) }}px;
        {% endfor %}
        {% for i in 29..36 %}
            --font-size-{{ i }}: {{ i*(0.70) }}px;
        {% endfor %}
        {% for i in 37..84 %}
            --font-size-{{ i }}: {{ i*(0.55) }}px;
        {% endfor %}
        {% for i in 85..120 %}
            --font-size-{{ i }}: {{ i*(0.45) }}px;
        {% endfor %}
    }
}

.row {
    &.no-gutters {
        margin-right: 0;
        margin-left: 0;
        > .col,
        > [class*="col-"] {
            padding-right: 0;
            padding-left: 0;
        }
    }
}

/* Button Style */
.btn {
    position: relative;
    overflow: hidden;
	@include line-rule(14);
    font-weight: 600;
	border-radius: $border-radius;
	transition: $transition;
	&.btn-primary {
		color: $color-white;
		background: $color-primary;
		&:not(.btn-loading):active,
		&:not(.btn-loading).active,
		&:not(.btn-loading):hover,
		&:not(.btn-loading).hover,
		&:not([disabled]):not(.disabled):active,
		&:not([disabled]):not(.disabled).active {
			color: $color-white;
			background: $color-primary-lighten;
		}
        &:focus {
			background: $color-primary-darken;
        }
	}
	&.btn-secondary {
		color: $color-text;
		background: $color-border;
		&:not(.btn-loading):active,
		&:not(.btn-loading).active,
		&:not(.btn-loading):hover,
		&:not(.btn-loading).hover {
			color: $color-white;
            background: darken($color-border, 30%);
		}
	}
    &[disabled=disabled] {
        opacity: 1;
    }
}

@mixin btneffectactive {
    .btn {
        > span {
            position: relative;
            z-index: 1;
        }
        &.btn-primary,
        &.btn-secondary {
            &:not(.btn-loading) {
                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    transform: translate3d(0,-102%,0);
                    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
                }
            }
            &:not(.btn-loading):active,
            &:not(.btn-loading).active,
            &:not(.btn-loading):hover,
            &:not(.btn-loading).hover,
            &:not([disabled]):not(.disabled):active,
            &:not([disabled]):not(.disabled).active {
                &::before {
                    transform: translate3d(0,0,0);
                }
            }
        }
        &.btn-primary {
            &:not(.btn-loading) {
                &::before {
                    background: $color-primary-lighten;
                }
            }
            &:focus,
            &:not(.btn-loading):active,
            &:not(.btn-loading).active,
            &:not(.btn-loading):hover,
            &:not(.btn-loading).hover,
            &:not([disabled]):not(.disabled):active,
            &:not([disabled]):not(.disabled).active {
                background: $color-primary;
            }
        }
        &.btn-secondary {
            &:not(.btn-loading) {
                &::before {
                    background: darken($color-border, 30%);
                }
            }
            &:not(.btn-loading):active,
            &:not(.btn-loading).active,
            &:not(.btn-loading):hover,
            &:not(.btn-loading).hover {
                background: $color-border;
                &::before {
                    transform: translate3d(0,0,0);
                }
            }
        }
    }
}

body:not([class*="checkout-page"]):not(.fancybox-active):not(.modal-open) {
    @include btneffectactive;
}

/* Extra kod yazılması gerekiyorsa bu alandan devam edebilirsiniz */
.marquee-wrapper {
    background: $color-primary;
    &.main-marquee-wrapper {
        padding-block: 6px; // Pembe kutuya üst-alt boşluk verir
        .marquee-content {
            display: flex;
            align-items: center;
            overflow: hidden;

            .marquee-content-group {
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                animation-duration: 85s;
                animation-play-state: running;
                width: max-content;
                will-change: transform, width;
                animation-name: scrolling-left;

                > div {
                    display: flex;
                    align-items: center;
                    margin-inline: var(--spacer-3);

                    span {
                        // Değeri 30'dan 24'e çektik (Daha da küçültmek istersen 20 yapabilirsin)
                        @include line-rule(20); 
                        font-weight: 500;
                        color: $color-white;
                    }

                    &:before {
                        content: '|';
                        // Ayırıcı 'x' ikonunun da boyutunu span ile eşitledik
                        @include line-rule(24); 
                        font-weight: 500;
                        color: $color-white;
                        margin-right: var(--spacer-6);
                    }
                }
            }

            @include min($lg) {
                &:hover {
                    .marquee-content-group {
                        animation-play-state: paused;
                    }
                }
            }
        }
    }
}

@keyframes scrolling-left {
    0% {
      transform: translate3d(0, 0, 0);
      visibility: visible;
    }
    100% {
      transform: translate3d(-100%, 0, 0);
    }
}

.story-banners {
    margin-bottom: var(--spacer-12);
    .story-banner {
        display: block;
        .story-card-wrapper {
            display: flex;
            flex-direction: column;
            border: 1px solid $color-border;
            border-radius: 8px;
            overflow: hidden;
            text-decoration: none;
            transition: $transition;
            &:hover {
                border-color: #ff5e00;
                .story-text-right svg {
                    transform: translateX(4px);
                }
            }
        }
       .story-banner-img {
            position: relative;
            display: block;
            width: 100%;
            height: auto; 
            aspect-ratio: 16 / 9; 
            background-color: $color-white;
            border-bottom: 1px solid $color-border;
            img {
                width: 100%;
                height: 100%;
                object-fit: fill; 
                display: block;
            }
        }
        .story-text {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f9f9f9;
            padding: 16px;
            @include max($md) {
                padding: 8px;
            }
            .story-text-left {
                @include center;
                flex-direction: column;
                height: 30px;
                @include max($md) {
                    height: 72px;
                }
                small {
                    font-size: 12px;
                    color: #777;
                    margin-bottom: 4px;
                    line-height: 1;
                }
                span {
                    font-size: 15px;
                    font-weight: 500;
                    color: #222;
                    line-height: 1.2;
                }
            }
            .story-text-right {
                display: flex;
                align-items: center;
                color: #222;
                svg {
                    transition: $transition;
                }
            }
        }
    }
    .slick-list {
        padding: var(--spacer-6) 0;
    }
    .slick-arrow {
        position: absolute;
        opacity: 1;
        top: 50%;
        z-index: 2;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        cursor: pointer;
        background: transparent;
        &.slick-prev {
            left: -20px;
        }
        &.slick-next {
            right: -20px;
        }
        @include max(1475) {
            display: none !important;
        }
    }
    .slick-dots {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        padding-bottom: var(--spacer-6);
        > li {
            margin: 0 var(--spacer-1);
            > button {
                position: relative;
                overflow: hidden;
                display: block;
                width: 12px;
                height: 12px;
                text-indent: -9999px;
                padding: 0;
                border: none;
                border-radius: 50%;
                background-color: $color-white;
            }
            &.slick-active {
                > button {
                    background-color: $color-primary;
                }
            }
        }
    }
}

.category-story-banners {
    margin-bottom: var(--spacer-12);
    &-title {
        @include heading-type-4;
        margin-bottom: var(--spacer-3);
    }
    .story-banner {
        display: block;
        .story-banner-img {
            position: relative;
            display: block;
            width: 100%;
            aspect-ratio: 1;
            transition: $transition;
            filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.05));
            @include imgcenter;
            &:hover {
                border-color: #ff5e00;
            }
        }        
    }
    .story-text {
        @include center;
        text-align: center;
        span {
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
        }
    }
    .slick-list {
        padding: var(--spacer-6) 0;
    }
    .slick-arrow {
        position: absolute;
        opacity: 1;
        top: 50%;
        z-index: 2;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        cursor: pointer;
        background: transparent;
        &.slick-prev {
            left: -20px;
        }
        &.slick-next {
            right: -20px;
        }
        @include max(1475) {
            display: none !important;
        }
    }
    .slick-dots {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        padding-bottom: var(--spacer-6);
        > li {
            margin: 0 var(--spacer-1);
            > button {
                position: relative;
                overflow: hidden;
                display: block;
                width: 12px;
                height: 12px;
                text-indent: -9999px;
                padding: 0;
                border: none;
                border-radius: 50%;
                background-color: $color-white;
            }
            &.slick-active {
                > button {
                    background-color: $color-primary;
                }
            }
        }
    }
}

.campaign-carousel-wrapper {
    padding: var(--spacer-6) 0;
    margin-bottom: var(--spacer-8);
    .campaign-card {
        display: block;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        text-decoration: none;
        background-color: #ffffff;
        margin: 0 5px;
        .campaign-image {
            aspect-ratio: 1;
            img {
               height: auto;
                display: block;
            }
        }
        .campaign-title {
            background-color: #f8f9fa;
            padding: 10px;
            text-align: center;
            border-top: 1px solid #e0e0e0;
            span {
                color: #000000;
                font-size: 13px;
                font-weight: 700;
                display: block;
            }
        }
    }
    .slick-list {
        padding: 10px 0;
    }
    .slick-arrow {
        position: absolute;
        top: 50%;
        z-index: 2;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        cursor: pointer;
        background: transparent;
        border: none;
        &.slick-prev {
            left: -25px;
        }
        &.slick-next {
            right: -25px;
        }
        @include max($md) {
            display: none !important;
        }
    }
}

.custom-product-carousel {
    padding: var(--spacer-6) 0;
    margin-bottom: var(--spacer-12);
    .carousel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacer-4);
        padding: 0 var(--spacer-3);
        .carousel-title {
            font-size: 20px;
            font-weight: 700;
            color: #ffffff;
            margin: 0;
        }
        .see-all-link {
            font-size: 14px;
            color: #ffffff;
            text-decoration: underline;
            font-weight: 600;
        }
    }
    .slick-list {
        padding: var(--spacer-2) 0;
    }
    .product-card {
        background-color: #ffffff;
        border-radius: 4px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        height: 100%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        margin: 0 10px;
        .product-image {
            position: relative;
            margin-bottom: 10px;
            display: block;
            width: 100%;
            img {
                width: 100%;
                aspect-ratio: 1;
                object-fit: cover;
                display: block;
            }
            .fav-btn {
                position: absolute;
                top: 5px;
                right: 5px;
                background: transparent;
                border: none;
                cursor: pointer;
                padding: 0;
                z-index: 2;
                svg {
                    width: 24px;
                    height: 24px;
                    stroke: #ff5e00;
                    fill: none;
                    stroke-width: 2;
                }
            }
        }
        .product-name {
            font-size: 14px;
            color: #333333;
            line-height: 1.4;
            margin-bottom: 15px;
            text-decoration: none;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: 38px;
        }
        .product-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: auto;
            flex-wrap: wrap;
            gap: 5px;
            .discount-badge {
                border: 1px solid #ff5e00;
                color: #ff5e00;
                padding: 2px 4px;
                font-size: 12px;
                font-weight: 700;
                border-radius: 2px;
            }
            .price-col {
                display: flex;
                flex-direction: column;
                flex: 1;
                .old-price {
                    font-size: 11px;
                    text-decoration: line-through;
                    color: #888888;
                    margin-bottom: 2px;
                }
                .new-price {
                    font-size: 14px;
                    font-weight: 700;
                    color: #333333;
                }
            }
            .add-to-cart-btn {
                background-color: #ff5e00;
                color: #ffffff;
                border: none;
                padding: 8px 10px;
                font-size: 12px;
                font-weight: 700;
                border-radius: 4px;
                cursor: pointer;
                transition: background-color 0.2s ease;
                text-decoration: none;
                display: inline-block;
                text-align: center;
                white-space: nowrap;

                &:hover {
                    background-color: #e05300;
                    color: #ffffff;
                }
            }
        }
    }
    .slick-arrow {
        position: absolute;
        opacity: 1;
        top: 50%;
        z-index: 2;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid #ddd;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 0;
        &.slick-prev {
            left: -15px;
        }
        &.slick-next {
            right: -15px;
        }
        @include max($md) {
            display: none !important;
        }
    }
}

.custom-slogan-area {
    margin-bottom: 24px;
    .slogan-item {
        background-color: {{ theme.settings.slogan_bg_color }};
        @include border-radius($border-radius);
        padding: 20px 10px;
        transition: $transition;
        @include center;
        text-align: center;
        margin-bottom: 12px;
        &:hover {
            transform: translateY(-3px);
            @include box-shadow(0, 5px, 15px, 0, rgba(0, 0, 0, 0.1));
        }
        a {
            .slogan-top-title {
                color: {{ theme.settings.slogan_title_color }};
                @include heading-type-4;
                margin-bottom: 8px;
            }
            .slogan-sub-title {
                color: {{ theme.settings.slogan_title_color }};
                @include text-type-3;
            }
        }
    }
}

#ideasoft {
    > :not(a:first-child) {
        display: none;
    }
}

.footer-whatsapp,
.footer-store {
    > a {
        display: flex;
        align-items: center;
        color: $color-text;
        line-height: calc(var(--font-size-14) + 8px);
        font-size: var(--font-size-14);
        font-weight: 400;
        gap: var(--spacer-4);
        transition: $transition;
        > svg {
            max-width: 48px;
            max-height: 48px;
        }
        > div {
            flex: 1 0 0%;
            > span {
                color: $color-secondary;
                @include heading-type-5;
            }
        }
        @include max($lg) {
            @include line-rule(10);
            justify-content: center;
        }
        @include max($xs) {
            flex-direction: column;
            text-align: center;
            gap: var(--spacer-2);
        }
        @include min($lg) {
            &:hover {
                color: $color-secondary;
            }
        }
    }
}

.footer-app {
    &-title {
        color: $color-secondary;
        @include line-rule(14);
        font-weight: 700;
        margin-bottom: 12px;
    }
    &-content {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        @include max($lg) {
            @include min($md) {
                flex-wrap: nowrap;
            }
        }
        > div {
            > a {
                display: block;
            }
        }
    }
}

.footer-social {
    &-title {
        color: $color-secondary;
        @include line-rule(14);
        font-weight: 700;
        margin-bottom: 12px;
    }
    &-content {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacer-2);
        > div > a {
            @include center;
            width: 48px;
            height: 48px;
            border-radius: 100%;
            transition: $transition;
            background-color: $color-border;
            @include svg;
            @include min($lg) {
                &:hover {
                    background-color: $color-secondary;
                    @include svghover($color-white);
                }
                &.footer-social-youtube:hover > svg path:last-child {
                    fill: $color-secondary;
                }
            }
        }
    }
    
    @include max($lg) {
        text-align: center;
        &-content {
            justify-content: center;
        }
    }
    @include min($md) {
        @include max($lg) {
            text-align: right;
            &-content {
                justify-content: flex-end;
                > div > a {
                    width: 44px;
                    height: 44px;
                }
            }
        }
    }
}

.etbis-area {
    display: flex;
    gap: var(--spacer-6);
    @include max($lg) {
        gap: var(--spacer-20);
    }
    @include max($xs) {
        justify-content: center;
        margin-bottom: 32px;
    }
}

.trgo-code,
#ETBIS {
    img {
        width: 87px;
        height: 100px;
        object-fit: contain;
    }
}

.footer-logo {
    img {
        max-height: 34px;
    }
}

.footer-menu-extra {
    > ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--spacer-8);
        > li {
            @include min($lg) {
                &:not(:last-child) {
                    position: relative;
                    &:after {
                        content : '';
                        position: absolute;
                        top: 50%;
                        right: calc(-1*var(--spacer-4));
                        transform: translateY(-50%);
                        width: 1px;
                        height: 24px;
                        background-color: $color-secondary;
                    }
                }
            }
            > a {
                display: inline-block;
                color: $color-secondary;
                @include text-type-1;
                font-size: 12px;
                transition: $transition;
                &:hover {
                    color: $color-text;
                }
            }
        }
        @include max($xlg) {
            gap: var(--spacer-4);
            > li:not(:last-child):after {
                right: calc(-1*var(--spacer-2));
            }
        }
        @include max($lg) {
            justify-content: center;
            margin: 0;
            gap: var(--spacer-3);
            > li {
                > a {
                    padding: var(--spacer-2);
                }
                &:not(:last-child):after {
                    display: none;
                }
            }
        }
    }
}

@include max($lg) {
    .footer-logo,
    .copyright,
    .footer-ssl {
        text-align: center;
    }
}

.delivery-time-wrapper {
    margin-bottom: var(--spacer-6);
    padding: var(--spacer-4);
    border: 1px solid $color-border;
    border-radius: $border-radius;
    background-color: $color-background;
    display: inline-block;
    min-width: 300px;
    .delivery-time-title {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--spacer-2);
        color: $color-text;
        font-weight: 600;
        @include text-type-5;
        margin-bottom: var(--spacer-1);
        .delivery-icon {
            width: 20px;
            height: 20px;
            fill: $color-primary;
        }
    }
    .delivery-time-range {
        color: $color-secondary;
        @include heading-type-5;
        font-weight: 700;
        padding-left: 28px;
    }
    @include max($xs) {
        display: block;
        width: 100%;
        text-align: center;
        .delivery-time-title {
            justify-content: center;
        }
        .delivery-time-range {
            padding-left: 0;
        }
    }
}

/* Ekstra kod bitiş */

/* Contentbox */
.contentbox-header {
    margin-bottom: var(--spacer-8);
	p {
		display: block;
		font-size: var(--font-size-12);
		margin-bottom: 0;
	}
	h4 {
        color: $color-text;
        font-size: var(--font-size-24);
		margin-bottom: 0;
	}
}

body[class*="checkout-page"],
body[class*="current-page-cart"] {
    .contentbox-header {
        text-align: left;
        margin-bottom: var(--spacer-1);
        border-bottom: none;
        h4 {
            font-size: var(--font-size-18);
        }
    }
}

{% if not theme.settings.detail_search_form %}
.current-page-product-list-search {
    .contentbox-body,
    .contentbox-header {
        display: none !important;
    }
}
{% endif %}

/* User Login Page */
.user-login-page-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    .user-login-page-container {
        position: relative;
        z-index: 2;
        width: 460px;
        @include max($sm) {
            width: 380px;
        }
        @include max($xxs) {
            width: 330px;
        }
        @include max($xxxs) {
            width: 280px;
        }
        .user-login-page-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 56px;
            padding: var(--spacer-5);
            img {
                max-height: 56px;
            }
        }
    }
    .user-login-page-content {
        padding: var(--spacer-10);
        margin-bottom: var(--spacer-8);
        background-color: #fff;
        border: 1px solid $color-border;
        border-radius: $border-radius;
    }
    .user-login-page-title {
        text-align: center;
        margin-bottom: var(--spacer-7);
        span {
            line-height: 28px;
            font-size: var(--font-size-24);
            font-weight: 700;
        }
        &.user-login-page-sub-title {
            padding-top: var(--spacer-7);
        }
    }
    .user-login-page-order-registration {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 52px;
        color: $color-text;
        font-size: var(--font-size-16);
        font-weight: 600;
        text-align: center;
        margin-top: var(--spacer-9);
        background-color: rgba(220, 53, 69, 0.3);
    }
    .user-login-page-row {
        position: relative;
        margin-bottom: var(--spacer-5);
        .password-toggle {
            position: absolute;
            right: var(--gutter);
            top: 15px;
            @include center;
            width: 20px;
            height: 20px;
            cursor: pointer;
            @include svghover($color-sub-text);
        }
        &.user-login-page-button-social {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: var(--spacer-5);
            @include max($sm) {
                flex-direction: column;
            }
            > div {
                flex: 1 0 0;
                max-width: calc(50% - (var(--spacer-5) / 2));
                &:only-child {
                    max-width: 100%;
                }
                > .btn {
                    color: $color-text !important;
                    font-size: var(--font-size-15);
                    font-weight: 400;
                    background: #fff !important;
                    border: 1px solid $color-border;
                    span {
                        padding-left: 10px;
                    }
                    &:hover {
                        color: $color-text !important;
                        background: #fff !important;
                    }
                }
                @include max($sm) {
                    flex: 0 0 100%;
                    width: 100%;
                    max-width: 100%;
                }
            }
        }
        input.form-control {
            height: 52px;
            color: $color-text;
            font-size: var(--font-size-14);
            padding: var(--spacer-2) var(--spacer-4);
        }
        .btn {
            @include center;
            height: 52px;
            font-size: var(--font-size-18);
            font-weight: 600;
            padding: 0;
            @include max($xxxs) {
                height: 48px;
            }
            &.btn-green {
                color: $color-white;
                font-weight: 400;
                margin-bottom: var(--spacer-8);
                border: 1px solid $color-border;
                background-color: $color-whatsapp;
            }
        }
    }
    .checkbox-custom,
    .user-login-forgot-pass {
        margin-bottom: var(--spacer-9);
    }
    .checkbox-custom {
        input[type=checkbox] {
            & + label {
                line-height: 20px;
                color: $color-text;
                font-size: var(--font-size-14);
                padding-left: 36px;
                &:before {
                    width: 20px;
                    height: 20px;
                    border: 1px solid $color-border;
                }
            }
            &:checked {
                & + label {
                    &:before {
                        background-image: none;
                        border-color: $color-border;
                        background-color: $color-white;
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        left: 7px;
                        top: 2px;
                        display: inline-block;
                        width: 6px;
                        height: 12px;
                        border-bottom: 2px solid $color-primary;
                        border-right: 2px solid $color-primary;
                        transform: rotate(45deg);
                    }
                }
            }
        }
    }
    .user-login-forgot-pass {
        a {
            display: block;
            color: $color-text;
            font-size: var(--font-size-14);
        }
    }
}

/* Signup Page */
.signup-page-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: var(--spacer-5);
    img {
        max-height: 56px;
    }
}

.signup-container {
    width: 580px;
    margin: 0 auto var(--spacer-4);
    padding: var(--spacer-6) var(--spacer-10) var(--spacer-5);
    border: 1px solid $color-border;
    border-radius: $border-radius;
    background-color: $color-white;
    @include max($sm) {
        width: calc(100% - 8px);
    }
    &.signup-container-information {
        width: 100%;
        .information-content {
            border: none;
        }
    }
    .contentbox-header {
        text-align: center !important;
        margin: 0 0 var(--spacer-7) !important;
        padding: 0 !important;
        border: none !important;
        h4 {
            line-height: 28px;
            font-size: var(--font-size-24) !important;
            font-weight: 700 !important;
            margin-bottom: 0 !important;
        }
    }
    .alert.alert-primary {
        margin-bottom: var(--spacer-5);
    }
    .form-group {
        margin-bottom: var(--spacer-5);
        &.signup-campaign-status,
        &.signup-agreement,
        &.signup-personal-data-agreement {
            .col-12.col-lg-4.control-label {
                display: none;
            }
        }
        .col-12.col-lg-5,
        .col-12.col-lg-8,
        .col-12.col-lg-9.text-right {
            flex: 1 0 0;
            max-width: none;
        }
        .col-12.col-lg-4.control-label {
            & + .col-6.col-lg-5 {
                flex: 1 0 0%;
                max-width: none;
            }
        }
        .security-code {
            height: 48px;
        }
        input.form-control {
            height: 48px;
            color: $color-text;
            font-size: var(--font-size-14);
            padding: var(--spacer-2) var(--spacer-4);
            &::placeholder {
                opacity: .5;
            }
        }
        select.form-control:not([size]):not([multiple]), select:not([size]) {
            height: 48px;
        }
        .form-question {
            top: 14px !important;
        }
        .btn {
            height: 48px;
        }
        .btn-group-binary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            &:before,
            &:after {
                display: none;
            }
            > button {
                flex: 0 0 48%;
                max-width: 48%;
                &.mr-2 {
                    margin-right: 0 !important;
                }
            }
        }
    }
    .form-horizontal {
        .toggle-password {
            top: 0;
            right: calc(var(--gutter) * 1.5);
            @include center;
            width: 20px;
            height: 48px;
            color: $color-sub-text;
            background-color: transparent;
        }
    }
}

/* Lütfen bu açıklama satırından sonra kod eklemeyiniz. */