.df-wrapper{
    background:transparent;
}

/* FILTER */

.df-filter{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:30px;
}

.df-filter button{
    height:40px;
    padding:0 22px;
    border-radius:100px;
    border:1px solid #E7DED6;
    background:#fff;
    cursor:pointer;
    font-size:14px;
}

.df-filter button.active {
    background: linear-gradient(90deg, #786755 0%, #8B7A68 100%);
    border-color: #A8937D;
    color: #fff;
}

.df-single{
    max-width:800px;
    margin:30px auto;
    width:100%;
}


/* GRID */

.df-feed{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.df-grid-item{
    position:relative;
    aspect-ratio:1/1;
    border-radius:20px;
    overflow:hidden;
    cursor:pointer;
}

.df-grid-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.df-grid-item:after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:45%;
    background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));
    pointer-events:none;
}

.df-card-info{
    position:absolute;
    left:20px;
    right:20px;
    bottom:20px;
    z-index:3;
}

.df-card-category{
    display:inline-flex;
    align-items:center;
    height:34px;
    padding:0 14px;
    border-radius:100px;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(10px);
    color:#fff;
    font-size:11px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:12px;
}

.df-card-title{
    margin:0;
    padding-top:0!important;
    font-family:inherit;
    font-size:18px;
    line-height:28px;
    font-weight:500;
    color:#fff;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
}

.df-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:.25s;
}

.df-grid-item:hover .df-overlay{
    opacity:1;
}

.df-type{
    width:80px;
    height:56px;
    border-radius:18px;
    background:rgba(139,122,104,.92);
    backdrop-filter:blur(12px);
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}

/* POPUP */

.df-popup{
    position:fixed;
    inset:0;
    z-index:99999;
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
}

.df-popup.active{
    opacity:1;
    visibility:visible;
}


.df-popup-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:20px;

}


.df-popup-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.75);
    backdrop-filter:blur(6px);
}

.df-popup-inner{

    position:absolute;

    left:50%;

    top:40px;

    width:min(900px,95vw);

    max-height:calc(100vh - 80px);

    background:#fff;

    border-radius:24px;

    padding:30px;

    overflow-y:auto;

    transform:translateX(-50%) scale(.96);

    transition:.25s ease;

}

.df-popup.active .df-popup-inner{

    transform:translateX(-50%) scale(1);

}

.df-popup-inner{

    scrollbar-width:none;

}

.df-popup-inner::-webkit-scrollbar{

    display:none;

}

.df-popup-close{

    position:absolute;

    top:20px;

    right:20px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#F7F2ED;

    color:#8B7A68;

    font-size:24px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:100;

    transition:.2s ease;

}

.df-popup-close:hover{

    background:#EEE6DE;

}

.df-popup-loading{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:300px;
    font-size:18px;
    color:#8B7A68;
}

.df-popup-meta{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:12px;
}

.df-popup-category{
    display:inline-flex;
    align-items:center;
    height:34px;
    padding:0 14px;
    border-radius:100px;
    background:#F4EFEA;
    color:#8B7A68;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin:0;
}

.df-popup-date{
    margin:0;
    color:#A7A19B;
    font-size:13px;
    line-height:1;
}

.df-popup-title{
    margin:0 0 20px;
    padding-top:0!important;
    color:#1F1F1F;
    font-size:30px;
    line-height:40px;
    font-weight:600;
}

.df-popup-image{
    width:100%;
    max-width:700px;
    height:auto;
    object-fit:cover;
    border-radius:20px;
    display:block;
    margin:0 auto 0;
}

.df-popup-gallery{
    width:100%;
    margin-bottom:0;
}

.df-popup-gallery img{
    width:100%;
    display:block;
    border-radius:20px;
}

.df-popup-gallery .swiper-button-prev,
.df-popup-gallery .swiper-button-next{
    color:#fff;
}

.df-popup-gallery .swiper-pagination-bullet{
    background:#fff;
}

.df-popup-video{
    position:relative;
    width:100%;
    padding-top:56.25%;
    margin-bottom:0px;
    border-radius:20px;
    overflow:hidden;
}

.df-popup-video iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

.df-popup-text{
    font-size:16px;
    margin-top:20px;
    line-height:26px;
    color:#444;
}

/* RESPONSIVE */

@media(max-width:1024px){
    .df-feed{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .df-feed{
        grid-template-columns:1fr;
    }

      .df-popup-inner{
        position:fixed;
        inset:0;
        width:100vw;
        height:100dvh;
        max-height:none;
        top:0;
        left:0;
        transform:none!important;
        border-radius:0;
        padding:20px;
        overflow-y:auto;
            transform:translateY(100%);

        transition:.35s cubic-bezier(.22,1,.36,1);
        -webkit-overflow-scrolling:touch;
           padding-top:

        calc(

            env(safe-area-inset-top)

            + 70px

        );

        padding-bottom:

        calc(

            env(safe-area-inset-bottom)

            + 30px

        );
    }
     .df-popup-close{

        position:fixed;

        top:16px;

        right:16px;

        width:48px;

        height:48px;

        z-index:999999;

    }
    
   .df-popup-progress{

    top:-20px;

    margin-left:-20px;

    width:calc(100% + 40px);

}

    .df-popup-title{
        font-size:20px;
        line-height:30px;
    }
}








/* =========================
   SWIPER NAVIGATION
========================= */

.df-popup-gallery .swiper-button-prev,
.df-popup-gallery .swiper-button-next{

    width:44px;

    height:44px;

    border-radius:50%;

    background:#8B7A68;

    color:#fff;

    transition:.2s ease;

}

.df-popup-gallery .swiper-button-prev:hover,
.df-popup-gallery .swiper-button-next:hover{

    background:#7B6B5B;

}

.df-popup-gallery .swiper-button-prev:after,
.df-popup-gallery .swiper-button-next:after{

    font-size:14px;

    font-weight:700;

}

.df-popup-gallery .swiper-button-prev{

    left:15px;

}

.df-popup-gallery .swiper-button-next{

    right:15px;

}









/* =========================
   SWIPER PAGINATION
========================= */

.df-popup-gallery .swiper-pagination{

    bottom:15px !important;

    display:inline-flex;

    align-items:center;

    gap:8px;

    left:50% !important;

    transform:translateX(-50%);

    width:auto !important;

    padding:8px 14px;

    border-radius:100px;

    background:#8B7A68;

}

.df-popup-gallery .swiper-pagination-bullet{

    width:8px;

    height:8px;

    margin:0 !important;

    background:#fff;

    opacity:.45;

    transition:.2s ease;

}

.df-popup-gallery .swiper-pagination-bullet-active{

    opacity:1;

    transform:scale(1.15);

}










.df-popup-progress{

    position:sticky;

    top:-30px;

    margin-left:-30px;

    width:calc(100% + 60px);

    height:3px;

    background:transparent;

    z-index:200;

    margin-bottom:0px;

}

.df-popup-progress-bar{

    width:0;

    height:100%;

    background:#8B7A68;

}









.df-skeleton *{

    animation:skeleton 1.2s infinite;

}

.df-skeleton-meta{

    width:180px;

    height:34px;

    border-radius:100px;

    background:#F4EFEA;

    margin-bottom:20px;

}

.df-skeleton-title{

    height:26px;

    border-radius:10px;

    background:#F4EFEA;

    margin-bottom:12px;

}

.df-skeleton-title.short{

    width:60%;

    margin-bottom:25px;

}

.df-skeleton-image{

    width:100%;

    aspect-ratio:16/9;

    border-radius:20px;

    background:#F4EFEA;

    margin-bottom:25px;

}

.df-skeleton-text{

    height:16px;

    border-radius:8px;

    background:#F4EFEA;

    margin-bottom:12px;

}

.df-skeleton-text.short{

    width:70%;

}

@keyframes skeleton{

    0%{
        opacity:.6;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:.6;
    }

}


.df-popup-text hr{

    border:none;

    height:1px;

    background:linear-gradient(

        to right,

        transparent,

        #8B7A68,

        transparent

    );



}



.df-popup-text h1{

    font-size:30px;
    line-height:40px;
    margin: 0;
    padding: 0px 0px 10px 0px;
    font-weight: 600;

}

.df-popup-text h2{

    font-size:25px;
    line-height:35px;
    margin: 0;
     padding: 0px 0px 10px 0px;
    font-weight: 600;

}

.df-popup-text h3{

    font-size:22px;
     line-height:32px;
     margin: 0;
    padding: 0px 0px 10px 0px;
     font-weight: 600;

}

.df-popup-text h4{

    font-size:20px;
     line-height:30px;
     margin: 0;
      padding: 0px 0px 10px 0px;
     font-weight: 600;

}

.df-popup-text h5{

    font-size:18px;
     line-height:28px;
     margin: 0;
      padding: 0px 0px 10px 0px;
     font-weight: 600;

}

.df-popup-text h6{

    font-size:16px;
     line-height:26px;
     margin: 0;
      padding: 0px 0px 10px 0px;
     font-weight: 600;

}

.df-popup-text p{

    margin:0 0 10px;

}

.df-popup-text ul,
.df-popup-text ol{

    margin:10px 0;

    padding-left:24px;

}

.df-popup-text li{

    margin-bottom:10px;

}

.df-popup-text blockquote{

    margin:20px 0;
    
    font-size: 16px;
    line-height: 26px;

    padding:20px 25px;

    border-left:4px solid #8B7A68;

    background:#F8F4EF;

    border-radius:12px;

}

.df-popup-text blockquote:before{

    display:none!important;

    content:none!important;

}

.df-popup-text a{

    color:#8B7A68;

    text-decoration:none;

    transition:.2s ease;

}

.df-popup-text img{

    max-width:100%;

    height:auto;

    border-radius:20px;

    margin:20px 0;

}






.df-load-more {
    height: 52px;
    padding: 0 50px;
    border: none;
    border-radius: 100px;
    background: linear-gradient(90deg, #786755 0%, #8B7A68 100%);
    color: #fff;
    font-weight: 500;
    cursor: pointer;
}


.df-load-more-wrap{

    display:flex;

    justify-content:center;

    margin-top:30px;

    min-height:54px;

}








.df-load-more{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

.df-load-more:before{

    content:'';

    width:18px;

    height:18px;

    flex-shrink:0;

    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2v6h-6'/%3E%3Cpath d='M20.49 15A9 9 0 1 1 17 5.13L21 8'/%3E%3C/svg%3E") center/contain no-repeat;

}


.df-load-more.loading:before{

    animation:dfSpin .8s linear infinite;

}

@keyframes dfSpin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}







@media(max-width:768px){

     .df-popup-progress{

        position:fixed;

        top:0;

        left:0;

        width:100vw;

        height:4px;

        margin:0;

        z-index:9999999;

        background:rgba(0,0,0,.06);

    }

    .df-popup-progress-bar{

        height:100%;

        width:0;

        background:#8B7A68;

        transition:width .1s linear;

    }

}



@media(max-width:768px){

  

    .df-popup.active .df-popup-inner{

        transform:translateY(0);

    }

}





@media(max-width:768px){



.df-card-title{
    font-size:16px;
    line-height:26px;
}



    .df-filter{

        flex-wrap:nowrap;

        overflow-x:auto;

        overflow-y:hidden;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;

        padding-bottom:5px;

        margin-bottom:25px;

    }

    .df-filter::-webkit-scrollbar{

        display:none;

    }

    .df-filter button{

        flex-shrink:0;

        white-space:nowrap;

    }

}






.df-popup-videos{

    display:flex;

    flex-direction:column;

    gap:20px;

}




@media(max-width:768px){

    .df-popup-inner{

        will-change:transform;

        touch-action:pan-y;

    }

}
















@keyframes dfFadeIn{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}







.df-grid-item img{

    transition:.5s ease;

}

.df-grid-item:hover img{

    transform:scale(1.06);

}



.df-card-info{

    transition:.3s ease;

}

.df-grid-item:hover .df-card-info{

    transform:translateY(-8px);

}



.df-card-category{

    transition:.3s ease;

}

.df-grid-item:hover .df-card-category{

    background:rgba(255,255,255,.28);

}




.df-overlay{

    backdrop-filter:blur(4px);

}











.df-filter-wrap{

    position:relative;

}

.df-filter-wrap:after{

    content:'';

    position:absolute;

    top:0;

    right:0;

    width:40px;

    height:100%;

    pointer-events:none;

    z-index:5;

    background:linear-gradient(

        to right,

        rgba(255,255,255,0),

        #fff

    );

}








.df-btn{

    display:flex;
    width:100%;
    margin-top: 20px;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 28px;
    border:none;
    border-radius:100px;
    background:linear-gradient(
        90deg,
        #786755 0%,
        #8B7A68 100%
    );
    color:#fff!important;
    font-size:16px;
    font-weight:500;
    text-decoration:none!important;
    cursor:pointer;
    transition:.25s ease;

}

.df-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(139,122,104,.25);

}

.df-btn:active{

    transform:translateY(0);

}





/* =========================
   SINGLE POST
========================= */

.df-btn{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 28px;
    border:none;
    border-radius:100px;
    background:linear-gradient(90deg,#786755 0%,#8B7A68 100%);
    color:#fff!important;
    font-size:16px;
    font-weight:500;
    text-decoration:none!important;
    cursor:pointer;
    transition:.25s ease;
}

.df-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(139,122,104,.25);
}

.df-btn:active{
    transform:translateY(0);
}

.df-single{
    max-width:800px;
    width:100%;
    margin:30px auto;
}

.df-single-inner{
    position:relative;
    width:100%;
    max-width:900px;
    margin:0 auto;
    background:#fff;
    border-radius:24px;
    padding:30px;
    box-sizing:border-box;
}

.df-popup-text > *:last-child{
    margin-bottom:0!important;
}

.df-single-footer{
    margin-top:20px;
}

@media(max-width:768px){

    .df-single{
        margin:0 auto;
        padding:0;
    }

    .df-single-inner{
        border-radius:0;
        padding:20px;
    }

}