/*======================================
    RESET
======================================*/

@import url(../fonts/NotoSerifGrantha-Regular.ttf);


@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;600;700&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Figtree-Font';
    /* font-family: 'Noto-Serif'; */
    /* font-family:'Lato',sans-serif; */
}
@font-face {
    font-family: 'Figtree-Font';
    src: url('../fonts/Figtree-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'Noto-Serif';
    src: url('../fonts/NotoSerifGrantha-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  :root {
    --jp-wine: #47443e;
    --jp-wine-deep: #343330;
    --jp-gold: #c69a45;
    --jp-gold-soft: #343330 ;
    --jp-cream: #fffaf1;
    --jp-paper: #ffffff;
    --jp-ink: #271d1f;
    --jp-muted: #7b6d6f;
    --jp-line: rgba(132, 94, 47, .18);
    --jp-shadow: 0 12px 32px rgba(61, 27, 34, .10);
    --sb-charcoal: #343330;
    --sb-charcoal-2: #45433f;
    --sb-ink: #2b2a28;
    --sb-muted: #77736b;
    --sb-gold: #c8a96b;
    --sb-gold-deep: #a8874b;
    --sb-gold-soft: #f2eadb;
    --sb-canvas: #f5f4f1;
    --sb-surface: #ffffff;
    --sb-surface-2: #faf9f7;
    --sb-line: #e6e0d5;
    --sb-line-strong: #d7ccba;
    --sb-shadow: 0 12px 30px rgba(41, 38, 32, .08);
    --sb-shadow-soft: 0 6px 20px rgba(41, 38, 32, .06);
    --sb-radius: 18px;
}


  .tblOrderHistory span,h1,p,td{
    font-family: 'Figtree-Font'!important;
  }
  .shop table.cart span,h1 {
	font-family: 'Figtree-Font'!important;
}
.tblOrderHistory{
    background: linear-gradient(135deg, #343330, #343330) !important;
    border-radius: 0.625rem;
    padding: 1.25rem 0.9375rem;
}

html{
    scroll-behavior:smooth;
}

body{
    background: #ececec;
    /* background: hsla(36,68%,93%,.69); */
    color:#343330;
    overflow-x:hidden;
}

.Page_hedding{
    padding: 14px 16px !important;
    margin: 0 !important;
    color: #343330!important;
    background: linear-gradient(90deg, #f8f6f1, #fff, #f8f6f1) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--jp-line) !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px !important;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-align: center;
}

.app{
    width:100%;
    max-width:480px;
    margin:auto;
    background:#fff;
    min-height:100vh;
    position:relative;
    overflow:hidden;
}

.Logo_align{
    text-align: left;
    margin-left: 5px;
}


/* footer nav{
     
        position: fixed;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 100%;
        max-width: 480px;
        height: 75px;
        background: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
        box-shadow: 0 -4px 18px rgb(0 0 0 / 10%);
        z-index: 9999;
    
} */

/* BOTTOM NAV */
 
footer nav{

    position:fixed;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:100%;

    max-width:480px;

    height:75px;

    background:#fff;
    /* background-image: url(../img/appimages/ornishab2c-marble-bg.jpg); */

    background-size: 100% 100%;

    display:flex;

    justify-content:space-around;

    align-items:center;

    border-top-left-radius:22px;

    border-top-right-radius:22px;

    box-shadow:0 -4px 18px rgba(0,0,0,10%);

    z-index:9999;

}

footer nav a{
    text-decoration:none;
    color:#343330;
    display:flex;
    flex-direction:column;
    align-items:center;
    font-size:13px;
}

footer nav i{
    font-size:22px;
    margin-bottom:5px;
}

footer nav .active{
    color:#ecb2be;
}

.addtoButton{
    background: linear-gradient(135deg, var(--kg-gold), var(--kg-gold-light));
    color: #000;
    font-size: 14px;
    /* font-size: 1.25vw; */
    --border-offset: 0;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: 0px;
}


/*======================================
    HEADER
======================================*/

/* header{

    position:fixed;
    top:0;
    left:50%;
    transform:translateX(-50%);

    width:100%;
    max-width:480px;

    height:74px;

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

    backdrop-filter:blur(15px);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:12px;

    z-index:999;

    box-shadow:0 3px 15px rgba(0,0,0,.06);

} */

.logo{

    width:200px;
    height:50px;

    /* border-radius:00%; */

    overflow:hidden;

    flex-shrink:0;

}

.logo img{

    width:100%;
    height:100%;
    object-fit:cover;

}

.searchBox{

    flex:1;

    margin:0 12px;

    height:44px;

    background:#f3f3f3;

    border-radius:30px;

    display:flex;

    align-items:center;

    padding:0 16px;

}

.searchBox i{

    color:#888;

    margin-right:10px;

}

.searchBox input{

    border:none;

    background:none;

    outline:none;

    width:100%;

    font-size:14px;

}

/* .headerIcons{

    display:flex;

    gap:10px;

} */

.icon{

    width:42px;

    height:42px;

    /* background: hsla(36,68%,93%,.69); */

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;
    /* border: 1.16px solid #eedbbe; */

    box-shadow:0 4px 12px rgba(0,0,0,.08);

    cursor:pointer;

    transition:.25s;

}

.icon:hover{

    transform:translateY(-3px);

}

.icon i{

    font-size:18px;

}

/* ===========================
   SHOP COLLECTION SECTION
=========================== */

.collectionSection {
    padding: 40px 20px;
    background: #bebdbd;
    margin-top: 25px;
}

.collectionSectionD {
    padding: 40px 20px;
    background: #fff;
    /* margin-top: 25px; */
}

.sectionHeader {
    text-align: center;
    margin-bottom: 0px;
}

.sectionHeader h2 {
    font-size: 32px;
    font-weight: 700;
    color: #343330;
    margin: 0;
    position: relative;
    display: inline-block;
}

/* .sectionHeader h2::after {
    content: "";
    width: 60px;
    height: 3px;
    background: #c89b3c;
    display: block;
    margin: 10px auto 0;
    border-radius: 5px;
} */

/* Collection Grid */

.collectionGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Collection Card */

.collectionCard {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    transition: all .3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,.08);
}

.collectionCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.collectionCard img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.collectionCard div {
    padding: 15px;
    font-size: 18px;
    font-weight: 600;
    color: #343330;
}


/* Tablet */

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

.categoryGrid {

display: grid;

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

gap: 10px 5px;

width: 100%;

/* padding: 0 5px; */

box-sizing: border-box;

}


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

@media (max-width:991px) {

    .collectionGrid {
        grid-template-columns: repeat(2,1fr);
    }

    .collectionCard img {
        height: 220px;
    }

}

/* Mobile */

@media (max-width:576px) {

    .collectionSection {
        padding: 5px 5px;
    }
    .collectionSectionD {
        padding: 5px 5px;
    }

    /* .sectionHeader h2 {
        font-size: 26px;
    } */

    .collectionGrid {
        grid-template-columns: repeat(2,1fr);
        gap: 15px;
    }

    .collectionCard img {
        height: 170px;
    }

    .collectionCard div {
        font-size: 16px;
        padding: 12px;
    }

}


/*======================================
    HERO
======================================*/

.hero{

    width:100%;

    overflow:hidden;

    /* border-radius:25px; */

    margin:0px 0;

}


.heroSlider{

    display:flex;

    width:100%;

    transition:0.6s ease-in-out;

}


.slide{

    min-width:100%;

    flex-shrink:0;

}


.slide img{

    width:100%;

    height:275px;

    object-fit:cover;

    display:block;
    /* margin-left: 3%; */
    /* border-radius: 20px; */

}

/* ---------- Modern hero slider ---------- */
.hero {
    margin: 10px 14px 7px !important;
    width: auto !important;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #e9e6df;
    box-shadow: var(--sb-shadow);
}
.heroSlider { transition: transform .6s cubic-bezier(.22,.61,.36,1) !important; }
.slide { position: relative; }
.slide img {
    height: 275px !important;
    object-fit: cover !important;
    filter: saturate(.92) contrast(.97) brightness(1.02);
}
.hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(35,34,31,.34), transparent);
}
.hero-caption {
    position: absolute;
    z-index: 4;
    left: 16px;
    bottom: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 9px;
    pointer-events: none;
}
.hero-caption .hero-caption-label {
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 650;
    text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.hero-caption i { color: #f1d8a6; }
.hero-dots {
    position: absolute;
    right: 15px;
    bottom: 17px;
    z-index: 5;
    display: flex;
    gap: 5px;
}
.hero-dot {
    width: 6px;
    height: 6px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    transition: .25s ease;
}
.hero-dot.active { width: 18px; border-radius: 8px; background: #fff; }

/* ---------- Home quick actions ---------- */

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

/* .sectionHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 16px 14px;

}

.sectionHeader h2{

    font-size:22px;

    font-weight:600;

}

.sectionHeader span{

    color:#ff3d83;

    font-size:14px;

    cursor:pointer;

} */


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

.sectionHeader{

    /* display:flex;

    justify-content:space-between;

    align-items:center; */

    padding:10px 16px 5px;

}

.sectionHeader h2{

    font-size:21px;

    font-weight:700;

}

.sectionHeader span{

    color:#d4af37;

    font-size:14px;

    cursor:pointer;

}



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

.categorySlider{

    display:flex;

    overflow-x:auto;

    gap:2px;

    padding:5px 10px 5px;

    scrollbar-width:none;

    /* margin-top: 35px; */
    margin-top: 65px;

}

.categorySlider::-webkit-scrollbar{

    display:none;

}

.categoryCard{

    min-width:86px;

    text-align:center;

    cursor:pointer;

    transition:.25s;

}

.categoryCard:hover{

    transform:translateY(-4px);

}

.categoryImage{

    width:72px;

    height:72px;

    border-radius:17px;

    overflow:hidden;

    margin:auto;

     /* background-image: url(../img/bj/ctbg.png); */

     background-size: 100% 100%;
    /* background: #f8f6f1; */
    /* border: 1.16px solid #eedbbe; */
    box-shadow: 0 4px 12px rgb(0 0 0 / 8%);

    /* box-shadow:0 8px 18px rgba(38, 13, 85, 0.08); */

}

.categoryImage img{

    width:100%;

    height:100%;

    object-fit:cover;
    


}

.categoryCard h4{

    font-size:11px;

    margin-top:10px;

    font-weight:600;

    text-align: center;

    

}

.fa-cart-shopping:before, .fa-shopping-cart:before {
    content: "\f07a";
}


.categorySection h1 {
    font-family: 'Noto-Serif'!important;
    font-size: clamp(14px,2vw,1.125rem);
    font-weight: 600;
    color: #343330;
    line-height: 1.625rem!important;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    margin-top: 3rem;
    font-size: 2.125rem;
}


.sectionHeader h1 {
    font-family: 'Noto-Serif'!important;
    font-size: clamp(14px,2vw,1.125rem);
    font-weight: 600;
    color: #343330;
    line-height: 1.625rem!important;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    margin-top: 2rem;
    font-size: 2.125rem;
}
/*======================================
    OFFER
======================================*/

.offerBanner{

    padding:20px 10px 10px 10px;

}

.offerBanner img{

    width:100%;

    border-radius:20px;

    display:block;
    max-height: 150px;
    /* margin-top: 0px; */

}
.offerBanner2 img{

    width:100%;

    border-radius:20px;

    display:block;
    max-height: 450px;
    /* margin-top: 0px; */

}

.offerBanner2{

    padding:0px 0px 0px 0px;

}

.offerBanner2 img{

    width:100%;

    border-radius:0px;

    display:block;
    margin-top: 25px;

}


.css-7rtnu6 {
    margin-left: unset;
    margin-right: unset;
}

.css-7rtnu6 {
    padding: 4px 6px;
    width: 30px;
    /* background: rgb(238, 232, 255); */
    border-radius: 6px;
    margin-left: unset;
    margin-right: unset;
}

.css-1xryoxd.countryFlag {
    margin-left: 0;
}

.css-1xryoxd {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: default;
}
.css-1xryoxd {
    width: 25px;
    height: 25px;
}

.css-1xryoxd {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin: 0;
    cursor: pointer;
}

.css-gmuwbf {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

*, ::before, ::after {
    background-repeat: no-repeat;
    box-sizing: inherit;
}
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    }
    .css-1so1y3b {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        /* padding: 11px 20px; */
        background-color: transparent;
        /* border-radius: 20px; */
        gap: 10px;
    }


    .css-mu2fqx {
        cursor: default;
    }
    
    .css-mu2fqx {
        background: url(../img/appimages/flag-sprite.png) -5px -99px / 190px no-repeat transparent;
        cursor: pointer;
        width: 25px;
        height: 14px;
        display: block;
    }



/*======================================
    LOADING
======================================*/

.skeleton{

    animation:pulse 1.2s infinite;

    background:#ececec;

}

@keyframes pulse{

0%{

opacity:.5;

}

50%{

opacity:1;

}

100%{

opacity:.5;

}

}
/* ==============================================================
   IPAD / TABLET RESPONSIVE LAYER
   Covers iPad Mini, iPad, iPad Air and iPad Pro in portrait/landscape.
   Mobile rules below 768px and large desktop rules above 1366px stay intact.
================================================================ */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
    html,
    body,
    .body,
    .main,
    .main.shop {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .container,
    .mainpad1,
    .mainpad3,
    .main-container {
        width: calc(100% - 36px) !important;
        max-width: 1180px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Header */
    #header .header-container,
    #header .header-row,
    #header .header-column,
    #header .header-nav {
        width: 100%;
        max-width: 100%;
    }

    .logo1 {
        height: 82px !important;
        width: auto !important;
        max-width: min(58vw, 430px) !important;
        padding: 7px 0 !important;
        object-fit: contain;
    }

    #header .header-btn-collapse-nav {
        min-width: 48px;
        min-height: 48px;
        padding: 8px !important;
    }

    #header .header-btn-collapse-nav img {
        width: 32px !important;
        height: 32px !important;
        object-fit: contain;
    }

    .headerIcons .icon,
    .headerIcons .icon a {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .headerIcons .icon i {
        font-size: 24px;
    }

    /* Home hero / section spacing */
    .hero,
    .offerBanner,
    .offerBanner2 {
        width: 100%;
    }

    .categorySection {
        padding-left: 12px;
        padding-right: 12px;
    }

    .categorySlider {
        gap: 14px;
        padding: 12px 18px 14px;
        margin-top: 80px;
    }

    .categoryCard {
        min-width: 108px;
    }

    .categoryImage {
        width: 92px;
        height: 92px;
    }

    .categoryCard h4 {
        font-size: 13px;
        line-height: 1.25;
        margin-top: 10px;
    }

    .collectionSection {
        padding: 10px 18px 30px;
    }
    .collectionSectionD {
        padding: 10px 18px 30px;
    }
    

    .sectionHeader {
        padding-left: 18px;
        padding-right: 18px;
    }

    .sectionHeader h1,
    .categorySection h1 {
        font-size: 30px;
        line-height: 1.3 !important;
    }

    /* API-generated category/product grids use inline 2-column styles.
       !important is intentional here so iPad can use the available width. */
    #category_Home > div > div[style*="display: grid"],
    #gvData div[style*="display: grid"][style*="grid-template-columns"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    #category_Home,
    #gvData {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #category_Home .res_mob_font_width,
    #gvData .res_mob_font_width {
        width: 100% !important;
        height: 100%;
    }

    #category_Home .imghei3,
    #gvData .imghei3 {
        width: 100% !important;
        height: 235px !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Live rate and general data tables */
    table.res_mob_font_width,
    table.tt_33 {
        width: 100% !important;
    }

    .bodyy {
        width: calc(100% - 36px) !important;
        max-width: 1180px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Bottom navigation: remove the phone-only 480px cap on iPad. */
    footer nav {
        width: 100% !important;
        max-width: 100% !important;
        height: 82px;
        padding-left: 10%;
        padding-right: 10%;
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
    }

    footer nav a {
        min-width: 96px;
        font-size: 14px;
    }

    footer nav i {
        font-size: 23px;
        margin-bottom: 6px;
    }

    /* Bottom sheets / filter popups */
    .popup {
        left: 50% !important;
        width: calc(100% - 48px) !important;
        max-width: 900px;
        transform: translateX(-50%);
        border-radius: 20px 20px 0 0;
        padding: 24px;
    }

    .popup.popup2 {
        padding: 0;
    }

    .popup .btnn1 {
        font-size: 17px;
        padding: 20px 18px;
    }

    /* Keep fixed/footer content from covering page content. */
    .main,
    .main.shop,
    .ui-content {
        padding-bottom: 105px;
    }
    .slide img{

        width:100%;
    
        height:275px!important;
    
        object-fit:cover;
    
        display:block;
        /* margin-left: 3%; */
        /* border-radius: 20px; */
    
    }
}

/* iPad landscape / larger iPad Pro */
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
    .container,
    .mainpad1,
    .mainpad3,
    .main-container,
    .bodyy {
        width: calc(100% - 56px) !important;
    }

    #category_Home > div > div[style*="display: grid"],
    #gvData div[style*="display: grid"][style*="grid-template-columns"] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    #category_Home .imghei3,
    #gvData .imghei3 {
        height: 225px !important;
    }

    .categorySlider {
        gap: 18px;
        padding-left: 28px;
        padding-right: 28px;
    }

    .categoryCard {
        min-width: 118px;
    }

    .categoryImage {
        width: 98px;
        height: 98px;
    }

    footer nav {
        padding-left: 17%;
        padding-right: 17%;
    }
}
#header .app-welcome-strip {
    background: linear-gradient(90deg, #ececec, #838383)!important;
    /* background: linear-gradient(90deg, #ecd9c2, #ecd9c2) !important; */
    color: #121212;
    min-height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px 16px;
    font-size: 10px;
    letter-spacing: 1.35px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}

/* ==============================================================
   API HOME CATEGORY - EDITORIAL / MASONRY LAYOUT
   Applies only to #category_Home. Existing API and CategoryClick
   behavior are kept in js/json/Category_Home_Json.js.
================================================================ */
#category_Home {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

#category_Home .category-home-masonry {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
}

#category_Home .category-home-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#category_Home .category-home-card {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: #f3f0eb;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    transform: translateZ(0);
    box-sizing: border-box;
}

/*
   Repeating proportions create the same visual rhythm as the reference:
   left column: short -> medium -> tall
   right column: tall -> medium -> short
*/
#category_Home .category-home-short {
    aspect-ratio: 1 / 0.95;
}

#category_Home .category-home-medium {
    aspect-ratio: 1 / 1.08;
}

#category_Home .category-home-tall {
    aspect-ratio: 1 / 1.20;
}

#category_Home .category-home-image,
#category_Home .category-home-image-empty {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

#category_Home img.category-home-image {
    object-fit: cover;
    object-position: center;
    transition: transform 0.35s ease;
}

#category_Home .category-home-image-empty {
    background: linear-gradient(135deg, #f5f1eb 0%, #e7ded3 100%);
}

#category_Home .category-home-card::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(20, 18, 16, 0.72) 0%, rgba(20, 18, 16, 0.28) 48%, rgba(20, 18, 16, 0) 100%);
}

#category_Home .category-home-title {
    position: absolute;
    z-index: 2;
    left: 10px;
    right: 10px;
    bottom: 0;
    display: block;
    padding: 30px 6px 15px;
    color: #fff;
    /* font-size: clamp(12px, 1.45vw, 17px); */
    font-weight: 600;
    line-height: 1.22;
    text-align: center;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
    overflow-wrap: anywhere;
}

#category_Home .category-home-card:focus {
    outline: 2px solid rgba(52, 51, 48, 0.55);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    #category_Home .category-home-card:hover img.category-home-image {
        transform: scale(1.035);
    }
}

/* Tablet */
@media only screen and (min-width: 576px) and (max-width: 991px) {
    #category_Home .category-home-masonry,
    #category_Home .category-home-column {
        gap: 16px;
    }

    #category_Home .category-home-card {
        border-radius: 13px;
    }
}

/* Mobile: two independent staggered columns like the reference image. */
@media only screen and (max-width: 575px) {
    #category_Home {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #category_Home .category-home-masonry,
    #category_Home .category-home-column {
        gap: 12px;
    }

    #category_Home .category-home-card {
        border-radius: 11px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    }

    #category_Home .category-home-title {
        left: 6px;
        right: 6px;
        padding: 24px 4px 11px;
        /* font-size: clamp(13px, 4vw, 17px); */
    }
}

@media only screen and (max-width: 359px) {
    #category_Home .category-home-masonry,
    #category_Home .category-home-column {
        gap: 10px;
    }
}