: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.6;
    --subttlsize: 110%; 
    --subttlfamily: var(--ft-t2);
    --subttl: 0;
    --secttlmarg_default: 0 0 30px;

    --ft-nav: var(--ft-t1);
}

/* ::-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(--clr02x, #fff);
    --btnclrhov: var(--clr01x, #fff);
    --btnpad: 15px 21px;
    --btn-minwidth: 150px;
    --btnborderrad: 50px;
    --btnfontsize: 100%;
    position: relative;  
    line-height: 1; 
}
.btn.btn-space-line{
    --btnbgclrhov: var(--clr01);
    --btnclr: var(--clr01);
}
.h4 img {
    vertical-align: middle;
    margin: -6px 6px 0;
}
section {
    --secttlclr: var(--clr01, #000); 

    ._secttlbx,
    ._ittl{
        h4{
            display: flex;
            flex-wrap: wrap;
            justify-content: var(--ttlalign);
            align-items: baseline;
            gap: 15px 0;
        }
        h4::after{
            content: '';
            width: 90px;
            height: 3px;
            background-color: var(--secttlclr);
            display: inline-block;
            margin: 0 6px;
        }
    }

    &:is([style*="--ttlalign:center"]) { 
        ._secttlbx,
        ._ittl{ 
            h4::before{
                content: '';
                width: 90px;
                height: 3px;
                background-color: var(--secttlclr);
                display: inline-block;
                margin: 0 6px;
            }
        }
    }

    &.mediabx_negative {
        --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: 1px 2px;
        }
    }
    &.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;
            }
        }
    }
    &:is([style*="--secttlclr"]) { 
        .ttldecor-top:after {
           background-color: var(--secttlclr);
        } 
    }
}
.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;
} 

.listobx.categorylistbx{
    font-family: var(--ft-t2);
}
.btn_noti {
    font-family: var(--ft-t2);
}




.searchbx { 
    position: relative;
    width: 250px;
    
    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: #888;
        width: auto;
        border: 0;
        padding: 0;
        background-color: transparent;
    }
}

.dekstickbx .searchbx,
.nav .searchbx{
    border-radius: 50px;
    font-size: 80%;
    border: 1px solid #888;
    
    & input {
        padding: 9px 30px 9px 15px; 
        background-color: #fff;
    }
}

#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; 
}

.btnbx{
    --gap: 15px
} 
 

body:has([mn="8997"], [mn="8996"]){ 
    & > *:not(.bodybx, .loaderbx, .licht),
    .bodybx > *:not([mn="8997"], [mn="8996"]){
        display: none;
    }
}
 
.title-s{
    font-family: var(--ft-t1);
    font-size: 80%; 
}

.infobx{
    & > * ~ *{
        margin-top: 6px;
    }
}

/* h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6{
    letter-spacing: 2px;
} */

 

._subttl{
    margin: 15px 0 0;
}
 
.dot_decor{
    background-image: url(src/dot_decor.png);
    aspect-ratio: 1;
    width: 25px;
    display: block;
    margin: 0 auto;
    position: relative;
}
.bimgw:has(.theme_mask){
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.45));
}
.theme_mask{
    mask-composite: add;

    mask-image: url(src/round_tl.png), url(src/round_tr.png), url(src/round_br.png), url(src/round_bl.png), url(src/mask_square.png), url(src/mask_square.png);

    mask-position: top left, top right, bottom right, bottom left, center, center;

    mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;

    mask-size: auto, auto, auto, auto, calc(100% - 60px) 100%, 100% calc(100% - 60px);

    @media(width<=767px){
        mask-size: 50px, 50px, 50px, 50px, calc(100% - 60px) 100%, 100% calc(100% - 60px);
    }

}

.decor_horizon_red{
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;

    background-image: url(src/decor_horizon_red.png), url(src/decor_horizon_red.png);
    background-position: top center, bottom center;
    background-size: auto;
    background-repeat: no-repeat, no-repeat;
}

.decor_horizon_gold_long{
    background-image: url(src/decor_horizon_gold_long.png);
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
    width: 100%;
    height: 30px;
    display: block;
    margin: 0 0 45px;
}
.decore_square_red{
    display: inline-block;
    aspect-ratio: 1;
    vertical-align: middle;
    width: 15px;
    margin: 0 0 5px;

    background-image: url(src/decore_square_red.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
._topsubttl{
    font-size: 170%;
    font-style: italic;
}
.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;

    .swiper-scrollbar{
        position: relative;
    }

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

.whatsappstickybx {
    @media (width < 767px) {
        bottom: 105px;
    }
}

._link.taste{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: var(--secalign);
}