/* ==========================================================
   FLAVORDROP RECIPES
========================================================== */

.fdr-recipes-container{
    max-width:1200px;
    margin:0 auto;
}
.fdr-recipes-full{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:0 5%;
    box-sizing:border-box;
}

.fdr-recipes-wrapper{
    max-width:1600px;
    margin:0 auto;
}



/* ==========================================================
SECTION TITLE
========================================================== */

.fdr-section-title{
    color:#fff;
    font-size:38px;
    font-weight: 400;
    margin:0 0 35px;
}

/* ==========================================================
FILTER BUTTONS
========================================================== */

.fdr-category-tabs,
.fdr-product-filters{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:40px;
}

/* Default State */

.fdr-category-tabs button,
.fdr-product-filters button{

    background:transparent;
    color:#fff;
    border:1px solid #444444;
    border-radius:50px;
    padding:12px 24px;
    font-weight:600;
    cursor:pointer;
    transition:all .3s ease;

}

/* Hover */

.fdr-category-tabs button:hover{

    background:#d4a017;
    border-color:#d4a017;
    color:#000;

}

.fdr-product-filters button:hover{

    background:#8b1a1a;
    border-color:#8b1a1a;
    color:#fff;

}

/* Active */

.fdr-category-tabs button.active{

    background:#d4a017;
    border-color:#d4a017;
    color:#000;

}

.fdr-product-filters button.active{

    background:#8b1a1a;
    border-color:#8b1a1a;
    color:#fff;

}

/* ==========================================================
GRID
========================================================== */

.fdr-recipes-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* ==========================================================
CARD
========================================================== */

.fdr-recipe-card{

    background: #000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .30);
    transition: .35s;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #444;

}

.fdr-recipe-card:hover{

    transform:translateY(-8px);

}

.fdr-card-image img{

    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;

}

.fdr-card-body{

    padding:28px;
    display:flex;
    flex-direction:column;
    flex:1;

}

/* ==========================================================
TITLE
========================================================== */

.fdr-title{

    font-size:28px;
    line-height:1.3;
    margin:0 0 20px;
    font-weight:700;

}

.fdr-title a{

    color:#fff;
    text-decoration:none;

}

/* ==========================================================
PRODUCT
========================================================== */

.fdr-product{

    display:inline-block;
    width:max-content;
    background:#8b1a1a;
    color:#fff;
    padding:8px 18px;
    border-radius:50px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:14px;

}

/* ==========================================================
CATEGORY
========================================================== */

.fdr-category{

    display:inline-block;
    width:max-content;
    background:#d4a017;
    color:#000;
    padding:8px 18px;
    border-radius:50px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:18px;

}

/* ==========================================================
META
========================================================== */

.fdr-meta{

    display:flex;
    flex-wrap:wrap;
    gap:18px;
    color:#fff;
    font-size:15px;
    margin-bottom:20px;

}

.fdr-meta span{

    display:flex;
    align-items:center;
    gap:6px;

}

/* ==========================================================
DESCRIPTION
========================================================== */

.fdr-description{

    color:#fff;
    line-height:1.8;
    opacity:.9;
    margin-bottom:30px;
    flex:1;

}

/* ==========================================================
BUTTON
========================================================== */

.fdr-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    background: #8b1a1a;
    color: #fff !important;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 400;
    text-decoration: none;
    transition: .3s;
    font-family: "Playfair Display";
}

.fdr-button:hover{

    background:#a41d1d;

}

/* ==========================================================
NO IMAGE
========================================================== */

.fdr-placeholder{

    display:flex;
    justify-content:center;
    align-items:center;
    height:300px;
    background:#222;
    color:#fff;

}

/* ==========================================================
   FLAVORDROP SINGLE RECIPE
========================================================== */

body.single-recipe{
    color:#fff;
}

.fdr-single{
    max-width:1400px;
    margin:60px auto 100px;
}

/* ==========================================================
BREADCRUMB
========================================================== */

.fdr-breadcrumb{
    color:#999;
    font-size:14px;
    margin-bottom:20px;
}

.fdr-breadcrumb a{
    color:#999;
    text-decoration:none;
    transition:.3s;
}

.fdr-breadcrumb a:hover{
    color:#fff;
}

.fdr-breadcrumb strong{
    color:#fff;
}

/* ==========================================================
TITLE
========================================================== */

.fdr-single-title{
    font-size:56px;
    line-height:1.15;
    font-weight:400;
    color:#fff;
    margin:0 0 25px;
}

/* ==========================================================
META
========================================================== */

.fdr-single-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:15px;
    margin-bottom:40px;
}

.fdr-single-product{
    background:#8b1a1a;
    color:#fff;
    padding:10px 18px;
    border-radius:40px;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
}

.fdr-single-category{
    color:#d4a017;
    font-size:15px;
    font-weight:600;
}

.fdr-single-info{
    color:#fff;
    font-size:15px;
}

/* ==========================================================
FEATURED IMAGE
========================================================== */

.fdr-single-image{
    margin-bottom:70px;
}

.fdr-single-image img{
    width:100%;
    height:500px !important;
    object-fit:cover;
    border-radius:18px;
    display:block;
}

/* ==========================================================
ABOUT
========================================================== */

.fdr-about{
    margin-bottom:70px;
}

.fdr-about h2{
    font-size:34px;
    color:#fff;
    margin-bottom:25px;
}

.fdr-about-content{
    color:#ddd;
    font-size:18px;
    line-height:1.9;
}

.fdr-about-content p{
    margin-bottom:20px;
}

/* ==========================================================
CONTENT GRID
========================================================== */

.fdr-content{
    display:grid;
    grid-template-columns:35% 65%;
    gap:40px;
    align-items:start;
}

/* ==========================================================
INGREDIENTS
========================================================== */

.fdr-ingredients{
    position:sticky;
    top:120px;
    background:#111;
    border:1px solid #333;
    border-radius:18px;
    padding:35px;
}

.fdr-ingredients h2{
    color:#fff;
    font-size:30px;
    margin-bottom:25px;
}

.fdr-ingredients ul{
    margin:0;
    padding-left:22px;
}

.fdr-ingredients li{
    color:#fff;
    line-height:1.8;
    margin-bottom:14px;
}

.fdr-ingredients p{
    color:#fff;
    line-height:1.8;
}

/* ==========================================================
INSTRUCTIONS
========================================================== */

.fdr-instructions{
    background:#111;
    border:1px solid #333;
    border-radius:18px;
    padding:40px;
}

.fdr-instructions h2{
    color:#fff;
    font-size:32px;
    margin-bottom:30px;
}

.fdr-instructions ol,
.fdr-instructions ul{
    padding-left:24px;
}

.fdr-instructions li{
    color:#fff;
    line-height:1.9;
    margin-bottom:18px;
}

.fdr-instructions p{
    color:#ddd;
    line-height:1.9;
    margin-bottom:20px;
}

.fdr-instructions strong{
    color:#fff;
}

/* ==========================================================
EDITOR CONTENT
========================================================== */

.fdr-about-content ul,
.fdr-about-content ol,
.fdr-ingredients ul,
.fdr-instructions ul{
    padding-left:22px;
}

.fdr-about-content li,
.fdr-ingredients li,
.fdr-instructions li{
    margin-bottom:12px;
}

.fdr-about-content img,
.fdr-instructions img{
    max-width:100%;
    height:auto;
    border-radius:12px;
}

.fdr-about table,
.fdr-instructions table{
    width:100%;
    border-collapse:collapse;
}

.fdr-about td,
.fdr-about th,
.fdr-instructions td,
.fdr-instructions th{
    border:1px solid #444;
    padding:12px;
}

.fdr-about a,
.fdr-instructions a{
    color:#d4a017;
    text-decoration:none;
}

.fdr-about a:hover,
.fdr-instructions a:hover{
    text-decoration:underline;
}

/* ==========================================================
RESPONSIVE
========================================================== */

@media (max-width:991px){

.fdr-single{
    margin:40px auto 80px;
}

.fdr-single-title{
    font-size:42px;
}

.fdr-content{
    grid-template-columns:1fr;
}

.fdr-ingredients{
    position:relative;
    top:auto;
}

.fdr-single-image img{
    height:380px;
}

}

@media (max-width:767px){

.fdr-single-title{
    font-size:34px;
}

.fdr-single-meta{
    gap:10px;
}

.fdr-single-image img{
    height:260px;
}

.fdr-about-content{
    font-size:16px;
}

.fdr-ingredients,
.fdr-instructions{
    padding:25px;
}

}
/* ==========================================================
RESPONSIVE
========================================================== */

@media(max-width:1100px){

.fdr-content{

grid-template-columns:1fr;

}

.fdr-ingredients{

position:relative;
top:auto;

}

}

@media(max-width:768px){

.fdr-single-wrapper{

padding:40px 15px;

}

.fdr-single-title{

font-size:38px;

}

.fdr-single-meta{

gap:10px;

}

.fdr-single-product,
.fdr-single-category{

font-size:12px;
padding:8px 14px;

}

.fdr-single-image img{

height:300px;

}

.fdr-about h2,
.fdr-ingredients h2,
.fdr-instructions h2{

font-size:28px;

}

.fdr-about-content{

font-size:16px;

}

.fdr-ingredients,
.fdr-instructions{

padding:25px;

}

}

/* ==========================================================
RESPONSIVE
========================================================== */

@media (max-width:991px){

.fdr-recipes-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media (max-width:767px){

.fdr-recipes-grid{

grid-template-columns:1fr;

}

.fdr-title{

font-size:24px;

}

.fdr-card-body{

padding:22px;

}

}