/* MRC_HOME_UI_PHASE18_V1
   - Clear GOLD / SILVER category grouping
   - Uniform one-line product titles and equal card heights
   - Homepage horizontal loop-track presentation
*/

/* ---------- Product card consistency ---------- */
.listing-product-card{
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:0;
}
.listing-product-info{
    display:flex;
    flex:1 1 auto;
    min-width:0;
    flex-direction:column;
}
.listing-product-info>small{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.listing-product-info h3{
    min-width:0;
    min-height:26px;
    height:26px;
    margin-top:7px;
    margin-bottom:8px;
    overflow:hidden;
}
.listing-product-info h3>a{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:inherit;
    text-decoration:none;
}
.listing-product-info .db-sale-price,
.listing-product-info .catalogue-listing-label{
    flex:0 0 auto;
}
.listing-product-info .db-cart-form{
    margin-top:auto!important;
    padding-top:12px;
}
.listing-product-info>.db-cart-view{
    margin-top:auto!important;
}

/* ---------- All Products sidebar: visually separate metal groups ---------- */
.mrc-category-filter-directory{
    display:grid!important;
    gap:14px!important;
    padding-top:3px!important;
}
.mrc-filter-metal-group{
    border:1px solid #e7ddec;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
}
.mrc-filter-metal-head{
    display:grid;
    grid-template-columns:30px minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    min-height:46px;
    padding:8px 10px;
    border-bottom:1px solid rgba(0,0,0,.055);
}
.mrc-filter-metal-head strong{
    min-width:0;
    font-size:11px;
    line-height:1.2;
    letter-spacing:.075em;
    text-transform:uppercase;
}
.mrc-filter-metal-head em{
    display:grid;
    min-width:24px;
    height:24px;
    place-items:center;
    margin:0;
    padding:0 6px;
    border-radius:999px;
    background:rgba(255,255,255,.78);
    color:inherit;
    font-size:9px;
    font-style:normal;
    font-weight:800;
}
.mrc-filter-metal-icon{
    display:grid;
    width:30px;
    height:30px;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.78);
    font-size:13px;
}
.mrc-filter-metal-group.gold{
    border-color:#ead39c;
    box-shadow:0 5px 14px rgba(154,104,20,.055);
}
.mrc-filter-metal-group.gold .mrc-filter-metal-head{
    background:linear-gradient(135deg,#fff3c9,#fff9e8);
    color:#725016;
}
.mrc-filter-metal-group.silver{
    border-color:#d6e0e8;
    box-shadow:0 5px 14px rgba(70,88,104,.045);
}
.mrc-filter-metal-group.silver .mrc-filter-metal-head{
    background:linear-gradient(135deg,#eaf0f5,#f9fbfc);
    color:#425363;
}
.mrc-filter-metal-group.other .mrc-filter-metal-head{
    background:#f3ecf6;
    color:#5c4365;
}
.mrc-filter-metal-links{
    display:grid;
    gap:6px;
    padding:8px;
}
.mrc-filter-metal-links .category-page-link{
    min-height:38px;
    grid-template-columns:minmax(0,1fr) auto auto;
    margin:0;
    padding:8px 9px;
    border:1px solid transparent;
    border-radius:9px;
    background:#fff;
    transition:background .16s ease,border-color .16s ease,transform .16s ease,color .16s ease;
}
.mrc-filter-metal-links .category-page-link:hover{
    transform:translateX(2px);
}
.mrc-filter-metal-group.gold .category-page-link:hover{
    border-color:#ead8ad;
    background:#fffbf0;
    color:#714b0c;
}
.mrc-filter-metal-group.silver .category-page-link:hover{
    border-color:#d7e0e7;
    background:#f6f9fb;
    color:#3f5262;
}
.mrc-filter-metal-links .category-page-link>span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.mrc-filter-metal-links .category-page-link>em{
    display:grid;
    min-width:22px;
    height:22px;
    place-items:center;
    padding:0 5px;
    border-radius:999px;
    background:#f5f1f7;
    font-size:9px;
}

/* ---------- New Arrivals carousel ---------- */
.mrc-new-arrivals-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}
.mrc-new-arrivals-actions>a{
    margin-left:5px;
}
.mrc-loop-nav{
    display:grid;
    width:36px;
    height:36px;
    flex:0 0 36px;
    place-items:center;
    border:1px solid #ddcfe6;
    border-radius:50%;
    background:#fff;
    color:#5d1a72;
    cursor:pointer;
    transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.mrc-loop-nav:hover{
    transform:translateY(-1px);
    border-color:#c6afd1;
    background:#faf6fc;
}
.home-new-arrivals-listing.mrc-loop-track{
    display:flex!important;
    grid-template-columns:none!important;
    gap:22px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    scroll-behavior:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:4px 2px 14px;
}
.home-new-arrivals-listing.mrc-loop-track::-webkit-scrollbar{
    display:none;
}
.home-new-arrivals-listing.mrc-loop-track>.listing-product-card{
    flex:0 0 clamp(280px,22vw,350px);
    min-width:280px;
    max-width:350px;
}

/* ---------- Existing homepage category / collection rows become smooth loop tracks ---------- */
.home-collection-track.mrc-loop-track,
.mrc-home-category-loop.mrc-loop-track{
    scrollbar-width:none!important;
    -ms-overflow-style:none;
    scroll-behavior:auto!important;
    overscroll-behavior-inline:contain;
}
.home-collection-track.mrc-loop-track::-webkit-scrollbar,
.mrc-home-category-loop.mrc-loop-track::-webkit-scrollbar{
    display:none;
}
.mrc-home-category-loop.mrc-loop-track{
    display:flex!important;
    grid-template-columns:none!important;
    gap:14px!important;
    overflow-x:auto!important;
    overflow-y:hidden;
    padding:3px 2px 8px;
}
.mrc-home-category-loop.mrc-loop-track>a{
    flex:0 0 142px;
    min-width:142px;
}
.mrc-home-category-loop.mrc-loop-track .category-icon-wrap{
    width:82px;
    height:82px;
}
.mrc-loop-track [data-mrc-loop-clone="1"]{
    /* cloned elements are visually identical; JS keeps them in the seamless loop */
}

@media (max-width:980px){
    .listing-filters.mobile-open{
        display:block;
        margin-bottom:18px;
    }
    .mrc-category-filter-directory{
        grid-template-columns:repeat(2,minmax(0,1fr));
        align-items:start;
    }
}
@media (max-width:680px){
    .mrc-new-arrivals-actions{
        width:100%;
        justify-content:flex-start;
        margin-top:8px;
    }
    .home-new-arrivals-listing.mrc-loop-track{
        gap:16px;
    }
    .home-new-arrivals-listing.mrc-loop-track>.listing-product-card{
        flex-basis:min(82vw,300px);
        min-width:min(82vw,300px);
    }
    .mrc-category-filter-directory{
        grid-template-columns:1fr;
    }
    .mrc-home-category-loop.mrc-loop-track>a{
        flex-basis:126px;
        min-width:126px;
    }
}

@media (prefers-reduced-motion: reduce){
    .mrc-loop-track{scroll-behavior:auto!important}
}
