:root{
    --clr01: #ffbd2b;
    --clr02: #000;
    --clr03: #f7c54c;
    --clr04: #113700;

    --hclr: var(--secttlclr);
    --h-letspace: 0px;

    --containerWidthSet_1200: 1200px;
    --containerWidthSet_991: 960px;
    --containerWidthSet_767: 720px;
    --containerWidthSet_575: 540px;

    --secttlmarg: 0 0 45px;
 
    --body-lineheight: 1.5;
    --subttlsize: 110%; 
    --subttlfamily: var(--ft-t2);
    --subttl: 0;
    --secttlmarg_default: 0 0 30px;
}

/* ::-moz-selection {
    color: var(--clr01); 
}
::selection {
    color: var(--clr01); 
} */
@media (max-width: 767px) {
    /* .container, .container-fluid {
        max-width: calc(100% - 30px);
    } */
} 

@media (min-width: 767px) {
    /* :root {
        --h4: calc(60 / 18 * 100%)
    } */
}
a.btn,
.btn{ 
    --btnbgclr: var(--clr01, #000);
    --btnbgclrhov: var(--clr02);
    --btnborderclr: var(--btnbgclr);
    --btnborderclrhov: var(--btnbgclrhov);
    --btnclr: var(--clr01x, #fff);
    --btnclrhov: var(--clr02x, #fff);
    --btnpad: 15px 15px;
    --btn-minwidth: 150px;
    --btnborderrad: 50px;
    --btnfontsize: 90%;
    --btnborderwidth: 2px;
    gap: 9px;

    &.btn-line{
        --btnbgclr: var(--clr01x, transparent);
        --btnbgclrhov: var(--clr01);
        --btnborderclr: var(--btnbgclrx, var(--btnclr));
        --btnborderclrhov: var(--btnbgclrhov);
        --btnclr: var(--clr01, #fff);
        --btnclrhov: var(--clr01x, #fff);
    }
    &.btn-line-neg{
        --btnbgclr: var(--clr01x, transparent);
        --btnbgclrhov: var(--clr01);
        --btnborderclr: var(--btnbgclrx, var(--btnclr));
        --btnborderclrhov: var(--btnbgclrhov);
        --btnclr: var(--clr01, #fff);
        --btnclrhov: var(--clr01x, #fff);
    }
}

.btn{
    position: relative;
    z-index: 1; 
    min-width: auto;
    line-height: 1; 
    /* border: 0 !important;  */
    font-size: inherit; 

    
    &::before{
        display: none !important;
    }
    
    &::after,
    &::before{
        content: '';
        display: inline-block;
        transition: inherit;
        /* position: absolute;   */
    }
    &:hover::after,
    &.active::after{
        --mkclr: var(--btnclrhov);
    } 
    &::after{ 
        --mkclr: var(--btnclr);
        --square: 25px;
        margin: 0;
        height: calc(var(--square) / 2);
        width: var(--square);
        
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-position: center;
        -webkit-mask-position: center;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        background-color: var(--mkclr);
        -webkit-mask-image: url(src/arrow-right.png);
        mask-image: url(src/arrow-right.png);
    } 
}
section{
    &.btn-line{
        .btn{
        --btnbgclr: var(--clr01x, transparent);
        --btnbgclrhov: var(--clr01);
        --btnborderclr: var(--btnbgclrx, var(--btnclr));
        --btnborderclrhov: var(--btnbgclrhov);
        --btnclr: var(--clr01, #fff);
        --btnclrhov: var(--clr01x, #fff);
        } 
    }
    &.btn-line-neg{
        .btn{
        --btnbgclr: var(--clr01x, transparent);
        --btnbgclrhov: var(--clr01x, #fff);
        --btnborderclr: var(--btnbgclrx, #fff);
        --btnborderclrhov: var(--btnbgclrhovx, #fff);
        --btnclr: var(--clr01x, #fff);
        --btnclrhov: var(--clr01, #fff);
        } 
    }
    &.img_max_50{
        ._imgobj{
            img{
                max-height: 50svh;

                @media(width<=767px){
                    max-height: 300px !important;
                }
            }
        }
    }
    &.img_max_65{
        ._imgobj{
            img{
                max-height: 65svh;

                @media(width<=767px){
                    max-height: 300px !important;
                }
            }
        }
    }

    &.white_transparent_wave_right{
        &::after{
            content: '';
            display: block;
            background-image: url(src/white_trans_bg.png);
            background-position: right center;
            background-size: contain;
            position: absolute;
            right: 0;
            top: 50%;
            translate: 0 -50%;
            width: 90px;
            max-width: 10%;
            aspect-ratio: 90 / 611;
            z-index: -1;

        }
    }
    &.white_transparent_wave_left{
        &::after{
            content: '';
            display: block;
            background-image: url(src/white_trans_bg.png);
            background-position: right center;
            background-size: contain;
            position: absolute;
            left: 0;
            top: 50%;
            translate: 0 -50%;
            width: 90px;
            max-width: 10%;
            aspect-ratio: 90 / 611;
            z-index: -1;

        }
    }
    &.white_pale_blue_wave_right{
        &::after{
            content: '';
            display: block;
            background-image: url(src/white_pale_blue_bg.png);
            background-position: right center;
            background-size: contain;
            position: absolute;
            right: 0;
            top: 50%;
            translate: 0 -50%;
            width: 90px;
            max-width: 10%;
            aspect-ratio: 90 / 611;
            z-index: -1;

        }
    }
    &.white_pale_blue_wave_left{
        &::after{
            content: '';
            display: block;
            background-image: url(src/white_pale_blue_bg.png);
            background-position: right center;
            background-size: contain;
            position: absolute;
            left: 0;
            top: 50%;
            translate: 0 -50%;
            width: 90px;
            max-width: 10%;
            aspect-ratio: 90 / 611;
            z-index: -1;

        }
    }

    &.min_height_100svh{
        min-height: 100svh;;
    }
}


.h4 img {
    vertical-align: middle;
    margin: -6px 6px 0;
}
section {
    --secttlclr: var(--clr01, inherit); 
}
.btn i {
    /* font-size: 200%; */
    margin: 0 3px;
}
.btn.f > * {
    display: inline-flex;
    vertical-align: middle;
} 
label{
    --lblfont: var(--ft-t2);
} 
/* ============== */ 
a {
    text-decoration: none;
}
body{
    background-color: #fefefe;
} 
/* section:is([style*="--secbgclr"]) {
    --btnborderclr: #fff;
    --btnclr: #fff;

    .mediabx {
        --iconclr: var(--clr01x, #fff);
        --iconhovclr: var(--clr01, #fff);
        --bgclr: var(--clr02x, transparent);
        --bghovclr: var(--clr02, #fff);
        --mediaborder: 2px solid #fff;
        --mediahovborder: 2px solid var(--clr02, #fff);
        --mediaborderradius: 50%;
        --mg: 0;
    }
} */
section.maintitle_style{
    ._secttlbx{
        padding-left: 30px;
        position: relative;

        &::after{
            content: '';
            display: block;
            position: absolute;
            height: 100%;
            width: 9px;
            background-color: var(--clr04);
            left: 0;
            top: 0;
            border: 1px solid #fff;
        }
    }
}
section:is([style*="--secttlclr"]) { 
    .ttldecor-top:after {
       background-color: var(--secttlclr);
    } 
}
.listobx.categorylistbx{
    font-family: var(--ft-t2);
}
.btn_noti {
    font-family: var(--ft-t2);
}




.searchbx { 
    position: relative;
    width: 150px;
    
    overflow: hidden;

    .searchw {
        position: relative;
    }
    & input {
        margin: 0;
        padding: 9px 30px 9px 9px;
        width: 100%;
        border-radius: 3px;
        border: 0;
        font-size: inherit;
    }
    & button.i {
        position: absolute;
        left: auto;
        right: 12px;
        top: 50%;
        translate: 0 -50%;
        color: inherit;
        width: auto;
        border: 0;
        padding: 0;
        background-color: transparent;
    }

    
}

.dekstickbx .searchbx,
.nav .searchbx{
    border-radius: 50px;
    font-size: 80%;
    border: 2px solid var(--clr02);
    color: var(--clr02);
    
    & input {
        padding: 9px 30px 9px 15px; 
        background-color: transparent;
        &::placeholder{
            color: var(--clr02);
        }
    }
}

#mouse-circle {
    position: absolute;
    width: 15px !important;
    height: 15px !important;
    margin: -7px 0px 0px -7px;
    border: 1px solid var(--clr01);
    background-color: var(--clr02);
    border-radius: 50%;
    pointer-events: none !important;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0);
    z-index: 1000; 
}

.galbxmain {
    .bimgw{
        background-color: #eee;
    }
}

.btn-neg .btn{
    --btnbgclr: var(--clr02x, #fff);
    --btnbgclrhov: var(--clr01);
    --btnborderclr: var(--btnbgclr);
    --btnborderclrhov: var(--btnbgclrhov);
    --btnclr: var(--clr01x, #000);
    --btnclrhov: var(--clr01x, #fff);
    --btnp: 15px;
    --btnminwidth: 100px;
}

.btn-neg-line .btn{
--btnborderclr: #fff;
    --btnbgclr: transparent;
}

/* .ttldecor-btm{
    line-height: 1;

    &::after{
        content: '';
        width: 60px;
        height: 3px;
        display: inline-block;
        background-color: var(--secttlclr, var(--clr02));
    }
} */

body{
    &:has( .level_detail ),
    &:has( .level_item ){
        [mn="1008"]{
            display: none !important;
        }
    }
}


.categorybx:has(.sku){
    overflow: clip;
    border-radius: 21px;
    border: 1px solid #eee;
    background-color: #fff;
    padding: 21px; 
    color: #000;
    line-height: 1.2;

    .top{
        flex: 1 0 0;
    } 

    .titlebx{ 
        border-top: 1px solid #ccc; 
        padding: 15px 0 0;
        margin: 9px 0 0;
    }

    .title {
        font-family: var(--ft-t1);
        color: #1f3870;
        letter-spacing: 1px;
        margin: 0;
    }

    .sku{
        font-size: 80% !important;
    }

    .btnbx{ 
        .btn{
            font-size: 80%;
            padding: 12px;
            border-radius: 50px;
        }
    } 

    .blurb{
        font-family: var(--ft-t1);
        line-height: 1.3;
        font-size: 80%;
    }

    .bimgw { 
        .bimg {
            transition: .3s all ease;
        }
    }

    &:hover {
        .bimg {
            scale: .85;
        }
    }

    .colorbx{
        --gap: 3px;

        .colorw{
            gap: var(--gap)
        }

        .color-{
            aspect-ratio: 1;
            width: 30px;
            border-radius: 50%;
        }
    }
}



.nav_{
    aspect-ratio: 85 / 24;
    width: 85px;
    display: inline-block;
    cursor: pointer;

    &.nav_next{
        background-image: url(src/nav_next.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    &.nav_prev{
        background-image: url(src/nav_prev.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    
    @media(width<=575px){
        width: 50px;
    }
}

.swiper_cus_nav{
    --swiper-scrollbar-drag-bg-color: var(--clr01);
    line-height: 1;
    width: 600px;
    max-width: 100%;
    margin: 30px auto 0;
    gap: 9px;
    z-index: 9;

    &:has(.swiper-scrollbar-lock){
        display: none;
    }

    .swiper-scrollbar{
        position: relative;
    }

   .nav-m{
        flex: 1 0 0;
   }
}

.nav_w{
    .nav_{
        &.nav_next{
            background-image: url(src/nav_next_w.png); 
        }

        &.nav_prev{
            background-image: url(src/nav_prev_w.png); 
        }
    }
    .swiper_cus_nav{
        --swiper-scrollbar-drag-bg-color: #fff;
    }
}