/* =========================================================
   CLOSEST RECIPES
   Standalone recipe pages intentionally reuse the normal
   Closest site shell and product-card visual language.
========================================================= */

.recipe-store-main{
    width:min(100% - 24px, 1480px);
    margin:0 auto;
    padding:12px 0 48px;
}

.recipe-listing-shell,
.recipe-detail-shell{
    margin-top:12px;
}

.recipe-section-header{
    align-items:center;
}
.recipe-section-header p{
    margin:5px 0 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
}

.recipe-category-tabs{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:14px 18px 2px;
    scrollbar-width:none;
}
.recipe-category-tabs::-webkit-scrollbar{display:none}
.recipe-category-tabs a{
    flex:0 0 auto;
    white-space:nowrap;
    text-decoration:none;
    color:#222;
    border:1px solid #e4e4e4;
    border-radius:999px;
    padding:8px 13px;
    background:#fff;
    font-size:12px;
    font-weight:700;
}
.recipe-category-tabs a.active{
    background:var(--brand-black,#111);
    color:#fff;
    border-color:var(--brand-black,#111);
}

/* Same scale and rhythm as normal product cards. */
.recipe-grid.recipe-product-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(190px,1fr));
    gap:14px;
    padding:18px;
}

#homeRecipes .recipe-grid.recipe-product-grid{
    grid-template-columns:repeat(6,minmax(190px,1fr));
    overflow-x:auto;
    scroll-snap-type:x proximity;
}

.recipe-product-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:190px;
    min-height:100%;
    overflow:hidden;
    border:1px solid #ececef;
    border-radius:20px;
    background:#fff;
    box-shadow:0 7px 18px rgba(31,41,55,.08);
    scroll-snap-align:start;
    transition:transform .2s ease,box-shadow .2s ease;
}
.recipe-product-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 24px rgba(31,41,55,.13);
}

.recipe-card-image{
    width:100%;
    height:160px;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:linear-gradient(180deg,#f7f7f8 0%,#fff 100%);
    text-decoration:none;
}
.recipe-card-image img{
    width:135px;
    height:135px;
    object-fit:contain;
    transition:transform .25s ease;
}
.recipe-product-card:hover .recipe-card-image img{transform:scale(1.05)}
.recipe-placeholder{
    width:92px;
    height:92px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#f0f1f3;
    color:#a5abb2;
    font-size:30px;
}

.recipe-card-body{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:13px 15px 16px;
}
.recipe-category{
    display:block;
    margin-bottom:5px;
    color:#29823b;
    font-size:9px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.recipe-card-title{
    display:-webkit-box;
    min-height:36px;
    overflow:hidden;
    color:#20252b;
    text-decoration:none;
    font-size:14px;
    font-weight:800;
    line-height:18px;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.recipe-meta{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    color:#687079;
    font-size:10px;
    margin:9px 0 10px;
}
.recipe-meta span{
    display:inline-flex;
    gap:4px;
    align-items:center;
    white-space:nowrap;
}
.recipe-meta i{font-size:9px;color:#858c94}
.recipe-price-row{
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:center;
    margin-top:auto;
    padding-top:3px;
}
.recipe-price-row strong{
    font-size:18px;
    color:#15191e;
    line-height:1;
}
.recipe-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:var(--primary,#f28b18);
    color:#fff;
    border:0;
    border-radius:9px;
    padding:9px 11px;
    text-decoration:none;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}
.recipe-btn:hover{filter:brightness(.97)}
.recipe-btn.secondary{background:#111}
.recipe-card-action{min-height:34px}
.recipe-empty{
    text-align:center;
    padding:70px 20px;
    color:#666;
}
.recipe-empty > i{font-size:34px}

/* Recipe detail page */
.recipe-detail-content{padding:18px}
.recipe-breadcrumb{
    width:min(100% - 24px,1480px);
    margin:0 auto;
    padding:12px 0 0;
    font-size:13px;
    color:#777;
}
.recipe-breadcrumb a{color:#555;text-decoration:none}
.recipe-detail{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:26px;
    align-items:start;
}
.recipe-main-image{
    width:100%;
    aspect-ratio:4/3;
    object-fit:contain;
    border-radius:20px;
    background:#f7f7f8;
}
.recipe-detail-card{
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:20px;
    padding:22px;
}
.recipe-detail-card h1{font-size:34px;margin:0 0 8px}
.recipe-detail-card h2{margin-top:0}
.recipe-ingredient-list{display:grid;gap:10px;margin:18px 0}
.recipe-ingredient{
    display:grid;
    grid-template-columns:auto 52px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:10px;
    border:1px solid #eee;
    border-radius:13px;
}
.recipe-ingredient input{width:18px;height:18px}
.recipe-ingredient img{width:52px;height:52px;object-fit:contain;background:#f7f7f7;border-radius:10px}
.recipe-ingredient strong{display:block}
.recipe-ingredient small{display:block;color:#777;margin-top:3px}
.recipe-optional{font-size:11px;border-radius:999px;background:#f2f2f2;padding:4px 7px;color:#666}
.recipe-total-box{display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:1px solid #eee;padding-top:16px}
.recipe-status-message{margin-top:10px;font-size:14px;font-weight:700}
.recipe-status-message.ok{color:#217a3d}
.recipe-status-message.error{color:#c62828}
.recipe-instructions{white-space:pre-line;line-height:1.7;color:#444}

@media(max-width:1200px){
    .recipe-grid.recipe-product-grid{grid-template-columns:repeat(5,minmax(180px,1fr))}
}
@media(max-width:1000px){
    .recipe-grid.recipe-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .recipe-detail{grid-template-columns:1fr}
}
@media(max-width:760px){
    .recipe-grid.recipe-product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px}
    .recipe-section-header{align-items:flex-start}
    .recipe-section-header > a{display:none}
}
@media(max-width:620px){
    .recipe-store-main{width:100%;padding:0 0 34px}
    .recipe-listing-shell,.recipe-detail-shell{margin-top:8px;border-radius:0}
    .recipe-grid.recipe-product-grid,.recipe-page-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:10px}
    #homeRecipes .recipe-grid.recipe-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding:10px}
    .recipe-category-tabs{padding:10px 10px 2px}
    .recipe-card-image{height:128px}
    .recipe-card-image img{width:105px;height:105px}
    .recipe-card-body{padding:10px 10px 12px}
    .recipe-card-title{min-height:34px;font-size:12px;line-height:17px}
    .recipe-meta{gap:5px;font-size:9px;margin:7px 0 9px}
    .recipe-meta span:nth-child(3){display:none}
    .recipe-price-row strong{font-size:15px}
    .recipe-card-action{min-height:30px;padding:7px 8px;font-size:9px;border-radius:7px}
    .recipe-detail-content{padding:10px}
    .recipe-detail-card{padding:16px;border-radius:15px}
    .recipe-detail-card h1{font-size:26px}
    .recipe-breadcrumb{width:100%;padding:10px 12px 0}
    .recipe-ingredient{grid-template-columns:auto 44px minmax(0,1fr)}
    .recipe-ingredient img{width:44px;height:44px}
    .recipe-ingredient .recipe-item-price{grid-column:3}
    .recipe-total-box{align-items:stretch;flex-direction:column}
    .recipe-total-box .recipe-btn{width:100%}
}

/* =========================================================
   2026-10-05 HOME RECIPES — isolate from recipes.php
   Match the compact homepage product-card proportions.
   These selectors are intentionally scoped to #homeRecipes so
   visiting recipes.php and returning via browser Back cannot
   change the homepage recipe-card dimensions.
========================================================= */
#homeRecipes .recipe-home-grid{
    display:grid !important;
    grid-template-columns:repeat(7,minmax(145px,1fr)) !important;
    gap:9px !important;
    padding:9px 10px 11px !important;
    overflow-x:auto !important;
    align-items:start !important;
    scroll-snap-type:x proximity;
}
#homeRecipes .recipe-home-card{
    min-width:145px !important;
    height:auto !important;
    min-height:0 !important;
    align-self:start !important;
    border-radius:14px !important;
    box-shadow:0 4px 12px rgba(31,41,55,.065) !important;
}
#homeRecipes .recipe-home-card .recipe-card-image{
    height:92px !important;
    min-height:92px !important;
    max-height:92px !important;
}
#homeRecipes .recipe-home-card .recipe-card-image img{
    width:82px !important;
    height:82px !important;
    object-fit:contain !important;
}
#homeRecipes .recipe-home-card .recipe-placeholder{
    width:54px !important;
    height:54px !important;
    font-size:18px !important;
}
#homeRecipes .recipe-home-card .recipe-card-body{
    padding:8px 9px 10px !important;
}
#homeRecipes .recipe-home-card .recipe-category{
    margin-bottom:3px !important;
    font-size:7px !important;
    line-height:10px !important;
}
#homeRecipes .recipe-home-card .recipe-card-title{
    min-height:28px !important;
    font-size:10px !important;
    line-height:14px !important;
}
#homeRecipes .recipe-home-card .recipe-meta{
    gap:5px !important;
    margin:5px 0 7px !important;
    font-size:7px !important;
    line-height:10px !important;
}
#homeRecipes .recipe-home-card .recipe-meta i{
    font-size:7px !important;
}
#homeRecipes .recipe-home-card .recipe-price-row{
    gap:5px !important;
}
#homeRecipes .recipe-home-card .recipe-price-row strong{
    font-size:12px !important;
}
#homeRecipes .recipe-home-card .recipe-card-action{
    min-height:24px !important;
    padding:5px 7px !important;
    border-radius:6px !important;
    font-size:7.5px !important;
}

@media (max-width:900px){
    #homeRecipes .recipe-home-grid{
        display:flex !important;
        grid-template-columns:none !important;
        gap:11px !important;
        padding:12px !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        scroll-snap-type:x mandatory !important;
        scrollbar-width:none;
    }
    #homeRecipes .recipe-home-grid::-webkit-scrollbar{display:none}
    #homeRecipes .recipe-home-card{
        flex:0 0 165px !important;
        min-width:165px !important;
        scroll-snap-align:start;
    }
    #homeRecipes .recipe-home-card .recipe-card-image{
        height:120px !important;
        min-height:120px !important;
        max-height:120px !important;
    }
    #homeRecipes .recipe-home-card .recipe-card-image img{
        width:105px !important;
        height:105px !important;
    }
    #homeRecipes .recipe-home-card .recipe-card-body{
        padding:10px 12px 12px !important;
    }
    #homeRecipes .recipe-home-card .recipe-card-title{
        min-height:32px !important;
        font-size:12px !important;
        line-height:16px !important;
    }
    #homeRecipes .recipe-home-card .recipe-meta{
        font-size:9px !important;
    }
    #homeRecipes .recipe-home-card .recipe-price-row strong{
        font-size:15px !important;
    }
    #homeRecipes .recipe-home-card .recipe-card-action{
        min-height:30px !important;
        padding:7px 8px !important;
        font-size:9px !important;
        border-radius:7px !important;
    }
}
@media (max-width:420px){
    #homeRecipes .recipe-home-card{
        flex-basis:155px !important;
        min-width:155px !important;
    }
}