*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#342820;background:#fff}.topbar{background:#2d211b;color:#fff;text-align:center;font-size:11px;letter-spacing:1.5px;padding:9px}.headrow{max-width:1240px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:20px}.logo{font:normal 27px Georgia,serif;letter-spacing:3px;color:#3a261a;text-decoration:none;white-space:nowrap}.logo span{color:#b28a45}.search{display:flex;width:44%}.search input[type=text]{width:100%;padding:12px;border:1px solid #ddd}.search input[type=submit]{background:#a27b42;color:#fff;border:0;padding:0 20px}.headlinks{display:flex;gap:20px}.headlinks a{color:#3a2a20;text-decoration:none;font-size:13px}.mainnav{border-top:1px solid #eee;border-bottom:1px solid #ddd;display:flex;justify-content:center;align-items:center;gap:2px;background:#fff;position:relative;z-index:50}.mainnav>a,.navitem>a{display:block;padding:17px 14px;color:#392a20;text-decoration:none;font-size:11px;letter-spacing:1px}.navitem{position:static}.navitem:hover>a{color:#a17a40}.mega{position:absolute;display:none;left:0;right:0;top:100%;background:#fff;border-top:2px solid #a27b42;box-shadow:0 8px 20px rgba(0,0,0,.15);padding:28px max(25px,calc((100% - 1180px)/2));grid-template-columns:1.2fr 1.2fr 1.2fr 1fr;gap:35px}.navitem:hover .mega{display:grid}.mega h4{font-size:11px;letter-spacing:1.5px;color:#9a7137;margin:0 0 14px}.mega a{display:block;color:#51443b;text-decoration:none;font-size:13px;padding:6px 0}.mega a:hover{color:#a27b42}.megaPromo{min-height:170px;background:linear-gradient(135deg,#f0dfc8,#b89569);padding:25px;display:flex;flex-direction:column;justify-content:center;color:#38271d}.megaPromo.diamond{background:linear-gradient(135deg,#eee,#bdb4a9)}.megaPromo.silver{background:linear-gradient(135deg,#eee,#b5b5b5)}.megaPromo b{font:normal 20px Georgia,serif}.megaPromo span{font-size:12px;margin:10px 0 15px}.megaPromo a{color:#fff!important;background:#49352a!important;padding:9px 12px!important;width:max-content}.offer{color:#a33!important}.hero{height:520px;background:url('https://images.pexels.com/photos/26570970/pexels-photo-26570970.jpeg?auto=compress&cs=tinysrgb&w=1800') center/cover no-repeat;position:relative}.heroText{position:absolute;left:10%;top:120px}.eyebrow{letter-spacing:3px;font-size:11px;color:#96703c}.hero h1{font:normal 54px Georgia,serif;line-height:1.08;margin:16px 0;color:#38271c}.hero p{font-size:16px}.btn{display:inline-block;background:#9d763b;color:#fff!important;border:0;padding:13px 25px;text-decoration:none;font-size:11px;letter-spacing:1px;margin-top:10px}.outline{background:#fff!important;color:#9d763b!important;border:1px solid #9d763b}.section{max-width:1200px;margin:55px auto;padding:0 20px}.section>h2,.banner h2,.rate h2{font:normal 27px Georgia,serif;letter-spacing:2px;text-align:center}.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.cat{height:230px;margin-top:25px;display:flex;align-items:end;justify-content:center;padding-bottom:25px;color:#fff;font:normal 25px Georgia,serif;text-shadow:0 1px 4px #222}.cat1{background:linear-gradient(#e3cdb4,#78563d)}.cat2{background:linear-gradient(#d8b9a5,#775243)}.cat3{background:linear-gradient(#eadfcb,#927b5c)}.cat4{background:linear-gradient(#9c9083,#3a3029)}.catgrid a{text-decoration:none}.banner{height:320px;margin:50px 0;background:url('https://images.pexels.com/photos/30276932/pexels-photo-30276932.jpeg?auto=compress&cs=tinysrgb&w=1800') center/cover no-repeat;color:#fff;text-align:center;padding-top:75px}.banner h2{color:#fff}.banner .eyebrow{color:#e0c497}.products{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.product{text-align:center;position:relative}.product img{width:100%;height:285px;object-fit:cover;background:#eee}.product h3{font:normal 18px Georgia,serif;margin:12px 0 5px}.product p{font-size:12px;color:#777}.product strong{font-size:16px;color:#9b7135}.link{display:block;color:#9d763b;text-decoration:none;font-size:11px;margin-top:12px}.wish{position:absolute;right:10px;top:10px;z-index:2}.wish a{display:block;background:#fff;border-radius:50%;padding:8px;color:#8b6233;text-decoration:none}.rate{background:#f4ece1;padding:50px;text-align:center}.rates{display:flex;justify-content:center;gap:90px;margin-top:25px}.rates div{font-size:11px;letter-spacing:1px}.rates b{display:block;font-size:18px;color:#9d763b;margin-top:8px}.pagehead{text-align:center;padding:55px 20px;background:#f6f0e8}.pagehead h1{font:normal 36px Georgia,serif;letter-spacing:2px}.filters{max-width:1200px;margin:25px auto;padding:0 20px;display:flex;gap:10px}.filters input,.filters select{padding:11px;border:1px solid #ddd;min-width:200px}.small{padding:11px 20px!important;margin:0}.listing{max-width:1200px;margin:30px auto 70px;padding:0 20px}.detail{max-width:1100px;margin:55px auto 90px;display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:0 20px}.detailimg{width:100%;height:560px;object-fit:cover;background:#eee}.detailinfo h1{font:normal 40px Georgia,serif}.stars{color:#b08a51;letter-spacing:4px}.detailinfo h2{font-size:28px;color:#9d763b}.detailinfo table{width:100%;border-collapse:collapse;margin:25px 0}.detailinfo td{padding:12px;border-bottom:1px solid #eee}.cartbox{max-width:1000px;margin:50px auto 100px;padding:0 20px}.cartrow{display:grid;grid-template-columns:120px 1fr 130px 120px;align-items:center;gap:25px;padding:20px 0;border-bottom:1px solid #ddd}.cartrow img{width:120px;height:120px;object-fit:cover}.cartrow a{color:#9d763b}.qty a{padding:5px 10px;border:1px solid #ddd;text-decoration:none}.grand{display:flex;justify-content:space-between;font-size:23px;color:#8d6638;padding:25px 0}.formbox{max-width:500px;margin:60px auto 100px;padding:40px;background:#faf6f0}.formbox.wide{max-width:700px}.formbox input,.formbox textarea,.formbox select{width:100%;padding:13px;margin:7px 0;border:1px solid #ddd}.message{display:block;margin-top:15px;color:#8a6130}.account{max-width:700px;margin:70px auto;padding:30px;text-align:center;min-height:350px}.account a{margin:10px;color:#8b6334}.offergrid{max-width:1100px;margin:50px auto 100px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.offergrid>div{padding:60px 30px;text-align:center;background:linear-gradient(135deg,#ead8bf,#b08a60);min-height:250px}.offergrid h2{font:normal 24px Georgia,serif}.admin{max-width:1100px;margin:60px auto 100px;padding:20px}.admin h1{font:normal 32px Georgia,serif}.admincards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0}.admincards div{padding:30px;background:#f4ece1;text-align:center;letter-spacing:1px}.admincards b{font-size:30px;color:#9d763b}.adminform{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0}.adminform input{padding:12px;border:1px solid #ddd}.grid{width:100%;border-collapse:collapse;margin-top:30px}.grid td,.grid th{padding:12px;border:1px solid #ddd;text-align:left}footer{background:#2d211b;color:#eee;padding:50px max(20px,calc((100% - 1200px)/2));display:grid;grid-template-columns:2fr 1fr 1fr 2fr;gap:30px}footer h3{font:normal 24px Georgia,serif;color:#d2ad75}footer h4{font-size:11px;letter-spacing:2px}footer a{display:block;color:#ccc;text-decoration:none;margin:9px 0;font-size:12px}footer input{padding:11px;width:100%}.copyright{grid-column:1/-1;border-top:1px solid #514239;padding-top:18px;color:#aaa;font-size:11px}@media(max-width:850px){.headrow{flex-wrap:wrap}.search{width:100%;order:3}.mainnav{overflow:auto;white-space:nowrap;justify-content:flex-start}.mega{position:fixed;top:135px;overflow:auto;max-height:70vh;grid-template-columns:1fr 1fr}.hero{height:430px}.heroText{left:7%;top:80px}.hero h1{font-size:40px}.catgrid,.products{grid-template-columns:repeat(2,1fr)}.detail{grid-template-columns:1fr}.offergrid,.admincards{grid-template-columns:1fr}.rates{flex-direction:column;gap:20px}.cartrow{grid-template-columns:80px 1fr}.cartrow>strong,.qty{grid-column:2}footer{grid-template-columns:1fr 1fr}}
/* =========================================================
   FULL RESPONSIVE OVERRIDES - VISUAL STABILITY
   ========================================================= */
img{max-width:100%}
html,body{overflow-x:hidden}
button,input,select,textarea{font:inherit;max-width:100%}
@media (max-width:1200px){
 .headrow{padding-left:18px;padding-right:18px}
 .mainnav>a,.navitem>a{padding-left:10px;padding-right:10px}
 .mega{padding-left:28px;padding-right:28px;gap:20px}
 .section,.listing,.cartbox,.detail{max-width:1100px}
}
@media (max-width:900px){
 .topbar{font-size:9px;letter-spacing:1px;white-space:normal}
 .headrow{display:grid;grid-template-columns:1fr auto;gap:12px;padding:15px}
 .logo{font-size:22px}
 .search{grid-column:1/-1;width:100%;order:initial}
 .headlinks{gap:12px}
 .mainnav{justify-content:flex-start;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
 .mainnav>a,.navitem>a{font-size:10px;padding:14px 11px}
 .mega{position:absolute;left:0;right:auto;width:100vw;max-height:70vh;overflow-y:auto;grid-template-columns:repeat(2,minmax(0,1fr));padding:22px 20px;gap:20px}
 .hero{height:430px;background-position:center}
 .heroText{left:7%;right:35%;top:85px}
 .hero h1{font-size:40px}
 .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
 .product img{height:250px}
 .catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cat{height:200px}
 .detail{grid-template-columns:1fr;gap:30px}
 .detailimg{height:auto;max-height:600px}
 .offergrid{grid-template-columns:1fr 1fr;padding:0 20px}
 footer{grid-template-columns:1.5fr 1fr 1fr}
}
@media (max-width:600px){
 .topbar{display:none}
 .headrow{grid-template-columns:1fr auto;padding:12px}
 .logo{font-size:19px;letter-spacing:2px}
 .headlinks{font-size:12px;gap:9px}
 .search input[type=text]{min-width:0;padding:10px;font-size:12px}
 .search input[type=submit]{padding:0 12px;font-size:10px}
 .mainnav{scrollbar-width:none}
 .mainnav::-webkit-scrollbar{display:none}
 .mainnav>a,.navitem>a{padding:12px 9px;font-size:9px}
 .mega{position:fixed;top:103px;left:0;width:100vw;max-height:calc(100vh - 103px);grid-template-columns:1fr;padding:20px;z-index:1000}
 .megaPromo{min-height:130px}
 .hero{height:430px;background-position:58% center}
 .heroText{left:22px;right:18px;top:70px}
 .hero h1{font-size:34px}
 .hero p{font-size:14px;max-width:320px}
 .section{margin:35px auto;padding:0 15px}
 .section>h2,.banner h2,.rate h2{font-size:23px}
 .catgrid{grid-template-columns:1fr 1fr;gap:10px}
 .cat{height:170px;font-size:19px;padding-bottom:18px}
 .products{grid-template-columns:1fr 1fr;gap:12px}
 .product img{height:205px}
 .product h3{font-size:15px}
 .product p{font-size:10px}
 .product strong{font-size:14px}
 .listing{padding:0 12px;margin-top:20px}
 .pagehead{padding:38px 15px}
 .pagehead h1{font-size:28px}
 .filters{padding:0 12px;display:grid;grid-template-columns:1fr;gap:8px}
 .filters input,.filters select{width:100%;min-width:0}
 .detail{margin:30px auto 60px;padding:0 15px}
 .detailinfo h1{font-size:31px}
 .detailinfo .btn{width:100%;text-align:center;margin-right:0}
 .cartbox{padding:0 12px;margin:25px auto 60px}
 .cartrow{grid-template-columns:78px 1fr;gap:12px}
 .cartrow img{width:78px;height:78px}
 .qty{grid-column:2}
 .cartrow>strong{grid-column:2}
 .grand{font-size:18px}
 .formbox{margin:35px 15px 60px;padding:25px 18px}
 .offergrid{grid-template-columns:1fr;padding:0 15px;margin-top:30px}
 .offergrid>div{min-height:210px;padding:45px 20px}
 .admin{margin:35px auto 60px;padding:15px}
 .admincards{grid-template-columns:1fr}
 .adminform{grid-template-columns:1fr}
 .grid{display:block;overflow-x:auto;white-space:nowrap}
 footer{grid-template-columns:1fr 1fr;padding:35px 20px}
 footer>div:first-child,footer>div:last-child{grid-column:1/-1}
}
@media (max-width:380px){
 .products{grid-template-columns:1fr}
 .product img{height:280px}
 .catgrid{grid-template-columns:1fr}
 .cat{height:200px}
 .hero h1{font-size:29px}
}

.pageHero{height:260px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center}
.productsHero{background-image:url('https://images.pexels.com/photos/12194265/pexels-photo-12194265.jpeg?auto=compress&cs=tinysrgb&w=1400')}
.offersHero{background-image:url('https://images.pexels.com/photos/14999288/pexels-photo-14999288.jpeg?auto=compress&cs=tinysrgb&w=1800')}
.accountHero{background-image:url('https://images.pexels.com/photos/27954777/pexels-photo-27954777.jpeg?auto=compress&cs=tinysrgb&w=1600')}
.checkoutHero{background-image:url('https://images.pexels.com/photos/10475793/pexels-photo-10475793.jpeg?auto=compress&cs=tinysrgb&w=1600')}
.pageHero h1{font:normal 40px Georgia,serif;margin:12px 0;letter-spacing:2px}
.pageHero .eyebrow{color:#f1d9b2}
@media(max-width:600px){.pageHero{height:190px}.pageHero h1{font-size:28px;padding:0 15px}}
.pageHero + .pagehead{padding:28px 15px;background:#fff}.pageHero + .pagehead h1{font-size:24px;margin:7px 0}
/* Local jewellery image treatment */
.product img{display:block;border:1px solid #eee}
.cat{background-size:cover;background-position:center}
.cat1{background-image:url('https://images.pexels.com/photos/12194265/pexels-photo-12194265.jpeg?auto=compress&cs=tinysrgb&w=900')}
.cat2{background-image:url('https://images.pexels.com/photos/37485307/pexels-photo-37485307.jpeg?auto=compress&cs=tinysrgb&w=900')}
.cat3{background-image:url('https://images.pexels.com/photos/19869443/pexels-photo-19869443.jpeg?auto=compress&cs=tinysrgb&w=900')}
.cat4{background-image:url('https://images.pexels.com/photos/10475789/pexels-photo-10475789.jpeg?auto=compress&cs=tinysrgb&w=900')}

.hero{overflow:hidden;background:#5a3d2a!important}.heroImage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(45,28,18,.58),rgba(45,28,18,.10) 70%,rgba(45,28,18,.02));z-index:1}.heroText{z-index:2}

/* V7 REAL PHOTOGRAPHY */
.heroImage{background:#6f4b31}
.cat{background-size:cover!important;background-position:center!important;position:relative;overflow:hidden}
.cat:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.58));z-index:0}
.cat{isolation:isolate}
.cat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,rgba(0,0,0,.55));z-index:0}
.cat{font-weight:normal}
.cat{padding-bottom:22px}
.cat1{background-image:url('https://images.pexels.com/photos/12194265/pexels-photo-12194265.jpeg?auto=compress&cs=tinysrgb&w=900')!important}
.cat2{background-image:url('https://images.pexels.com/photos/37485307/pexels-photo-37485307.jpeg?auto=compress&cs=tinysrgb&w=900')!important}
.cat3{background-image:url('https://images.pexels.com/photos/19869443/pexels-photo-19869443.jpeg?auto=compress&cs=tinysrgb&w=900')!important}
.cat4{background-image:url('https://images.pexels.com/photos/10475789/pexels-photo-10475789.jpeg?auto=compress&cs=tinysrgb&w=900')!important}
.catgrid a .cat{color:#fff;position:relative}
.hero:after{background:linear-gradient(90deg,rgba(25,15,10,.48),rgba(25,15,10,.10) 72%,rgba(25,15,10,0))}
.banner{background-image:url('https://images.pexels.com/photos/30276932/pexels-photo-30276932.jpeg?auto=compress&cs=tinysrgb&w=1800')!important}
.product img{background:#f4f1ec;object-fit:cover}

/* =========================================================
   V8 - CLEAN INDIAN JEWELLERY E-COMMERCE PHOTOGRAPHY
   Product imagery is intentionally white/minimal like a jewellery catalogue.
   ========================================================= */
.heroImage{object-fit:cover;object-position:center 42%;}
.cat1{background-image:url('https://images.pexels.com/photos/10581731/pexels-photo-10581731.jpeg?auto=compress&cs=tinysrgb&w=1200')!important;background-position:center!important;}
.cat2{background-image:url('https://images.pexels.com/photos/37485307/pexels-photo-37485307.jpeg?auto=compress&cs=tinysrgb&w=1200')!important;background-position:center!important;}
.cat3{background-image:url('https://images.pexels.com/photos/19869443/pexels-photo-19869443.jpeg?auto=compress&cs=tinysrgb&w=1200')!important;background-position:center!important;}
.cat4{background-image:url('https://images.pexels.com/photos/10475789/pexels-photo-10475789.jpeg?auto=compress&cs=tinysrgb&w=1200')!important;background-position:center!important;}
.product img{object-fit:cover;background:#fff;}
.banner{background-image:url('https://images.pexels.com/photos/32235790/pexels-photo-32235790.jpeg?auto=compress&cs=tinysrgb&w=1800')!important;background-position:center 30%!important;}
.productsHero{background-image:url('https://images.pexels.com/photos/29502969/pexels-photo-29502969.jpeg?auto=compress&cs=tinysrgb&w=1200')!important;background-position:center 45%!important;}
.offersHero{background-image:url('https://images.pexels.com/photos/12194330/pexels-photo-12194330.jpeg?auto=compress&cs=tinysrgb&w=1200')!important;background-position:center 40%!important;}
.accountHero{background-image:url('https://images.pexels.com/photos/12194385/pexels-photo-12194385.jpeg?auto=compress&cs=tinysrgb&w=1200')!important;background-position:center 35%!important;}
.checkoutHero{background-image:url('https://images.pexels.com/photos/14111400/pexels-photo-14111400.jpeg?auto=compress&cs=tinysrgb&w=1200')!important;background-position:center 35%!important;}
.hero:after{background:linear-gradient(90deg,rgba(15,10,5,.48),rgba(15,10,5,.12) 62%,rgba(15,10,5,.02))!important;}
.cat:before{background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.55))!important;}

/* =========================================================
   V8 CORRECTIONS
   ========================================================= */

/* Category labels always remain above image overlays. */
.cat{z-index:1}
.cat:before,.cat:after{z-index:0;pointer-events:none}
.cat span{position:relative;z-index:3;color:#fff!important;text-shadow:0 2px 6px rgba(0,0,0,.85),0 1px 2px #000;display:inline-block}

/* Make page headers visibly premium instead of plain white. */
.pagehead{
  background:linear-gradient(90deg,#f0e3d2,#fbf7f1,#ead7bf)!important;
  border-top:1px solid #eadbc8;
  border-bottom:1px solid #e3d1bb;
  color:#3c2b20;
}
.pagehead h1{color:#3c2b20!important}
.pageHero.subPageHero{
  height:250px!important;
  background-color:#6a4932!important;
  background-size:cover!important;
  background-position:center 42%!important;
  position:relative;
}
.subPageHero:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(35,20,12,.58),rgba(35,20,12,.18),rgba(35,20,12,.05));
}
.subPageHero .pageHeroText{position:relative;z-index:2}
.pageHeroText h1{color:#fff!important;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.pageHeroText .eyebrow{color:#f3d7a8!important}

/* Mega menu: small related jewellery photographs beside each link. */
.mega a{
  display:flex!important;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:4px 0!important;
}
.megaThumb{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:2px;
  object-fit:cover!important;
  background:#f3eee8;
  border:1px solid #eadbc9;
  display:block;
}
.mega a span{display:inline-block;line-height:1.2}
.mega h4{margin-bottom:10px!important}
.megaPromo a{display:inline-block!important}

/* Keep price symbols consistent. */
.product strong,.detailinfo h2,.cartrow p,.cartrow>strong,.grand b{font-variant-numeric:tabular-nums}

@media(max-width:600px){
 .megaThumb{width:30px!important;height:30px!important;min-width:30px!important}
 .mega a{min-height:34px}
 .pageHero.subPageHero{height:190px!important}
}

/* Prevent broken-image icons from destroying the layout. */
.product img,.detailimg,.cartrow img{background:#f7f3ed;min-height:120px}


/* =========================================================
   V10 RESPONSIVE MEGA MENU
   Keeps the existing desktop menu design.
   Adds touch-friendly dropdown behavior for tablets/mobile.
   ========================================================= */

/* Desktop: preserve existing hover behavior. */
@media (min-width: 901px){
    .mainnav .mega{
        top: 100%;
        width: 100%;
    }

    .mainnav .navitem:hover > .mega{
        display: grid;
    }

    .mainnav .navitem.open > .mega{
        display: none;
    }
}

/* Tablet and touch devices. */
@media (max-width: 900px){
    .mainnav{
        position: relative;
        z-index: 100;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mainnav::-webkit-scrollbar{
        display: none;
    }

    .mainnav .navitem{
        position: static;
        flex: 0 0 auto;
    }

    .mainnav .navitem > a{
        position: relative;
        z-index: 2;
        cursor: pointer;
    }

    /* Hidden until a category is tapped. */
    .mainnav .navitem > .mega{
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: var(--mega-top, 120px);
        width: 100vw;
        max-width: 100vw;
        max-height: calc(100vh - var(--mega-top, 120px));
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: 1000;
        margin: 0;
        background: #fff;
    }

    /* Open state is controlled by site.js on touch devices. */
    .mainnav .navitem.open > .mega{
        display: grid;
    }

    .mainnav .navitem:hover > .mega{
        display: none;
    }

    .mainnav .navitem.open:hover > .mega{
        display: grid;
    }

    .mainnav .mega > div{
        min-width: 0;
    }

    .mainnav .mega a{
        min-width: 0;
        overflow: hidden;
    }

    .mainnav .mega a span{
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .mainnav .megaPromo{
        min-width: 0;
    }
}

/* Larger tablets: two-column mega menu. */
@media (min-width: 601px) and (max-width: 900px){
    .mainnav .mega{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        padding: 22px 20px;
    }
}

/* Phones: one-column mega menu so nothing is squeezed or clipped. */
@media (max-width: 600px){
    .mainnav .mega{
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px 16px 28px;
    }

    .mainnav .mega > div{
        padding-bottom: 8px;
        border-bottom: 1px solid #eee5db;
    }

    .mainnav .mega > div:last-child{
        border-bottom: 0;
    }

    .mainnav .mega h4{
        margin-bottom: 8px !important;
    }

    .mainnav .mega a{
        min-height: 38px;
        padding: 4px 0 !important;
        gap: 9px;
    }

    .mainnav .megaThumb{
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    .mainnav .megaPromo{
        min-height: 125px;
        padding: 18px;
    }

    /* Keep the existing nav visually unchanged; only allow it to scroll. */
    .mainnav > a,
    .mainnav .navitem > a{
        flex: 0 0 auto;
    }
}

/* Very small phones. */
@media (max-width: 380px){
    .mainnav .mega{
        padding-left: 13px;
        padding-right: 13px;
    }

    .mainnav .mega a{
        font-size: 12px;
    }

    .mainnav .megaThumb{
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }
}

/* Prevent the page behind the open mobile menu from moving. */
body.menu-open{
    overflow: hidden;
}


/* =========================================================
   V11 - RESPONSIVE MEGA MENU FIX
   Keeps the existing desktop Bhima-style menu unchanged.
   Requires viewport meta tag in Site.master.
   ========================================================= */

@media (max-width: 900px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .mainnav {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        justify-content: flex-start;
        position: relative;
        z-index: 2000;
    }

    .mainnav .navitem {
        position: static;
        flex: 0 0 auto;
    }

    .mainnav .navitem > a {
        position: relative;
        z-index: 2002;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mainnav .navitem > .mega {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: var(--mega-top, 120px);
        width: 100vw;
        max-width: 100vw;
        max-height: calc(100vh - var(--mega-top, 120px));
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 3000;
        box-sizing: border-box;
        margin: 0;
        background: #fff;
    }

    .mainnav .navitem.open > .mega {
        display: grid !important;
    }

    /* Do not let touch/hover behavior hide an explicitly opened menu. */
    .mainnav .navitem:hover > .mega {
        display: none;
    }

    .mainnav .navitem.open:hover > .mega {
        display: grid !important;
    }

    .mainnav .mega > div {
        min-width: 0;
    }

    .mainnav .mega a {
        min-width: 0;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .mainnav .navitem > .mega {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        padding: 22px 20px;
    }
}

@media (max-width: 600px) {
    .mainnav .navitem > .mega {
        grid-template-columns: 1fr;
        padding: 18px 16px 28px;
        gap: 14px;
    }

    .mainnav .mega > div {
        padding-bottom: 8px;
        border-bottom: 1px solid #eee5db;
    }

    .mainnav .mega > div:last-child {
        border-bottom: 0;
    }

    .mainnav .megaThumb {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    body.menu-open {
        overflow: hidden;
        touch-action: none;
    }
}

@media (max-width: 380px) {
    .mainnav .navitem > .mega {
        padding-left: 12px;
        padding-right: 12px;
    }

    .mainnav .megaThumb {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }
}

/* =========================================================
   V12 - FINAL RESPONSIVE MENU BEHAVIOR FIX
   Keeps the existing Bhima-style menu and dropdown design.
   Fixes touch/click and hover behavior below 900px.
   ========================================================= */
@media (max-width: 900px) {
    .mainnav .navitem > .mega {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        display: grid !important;
        transform: translateY(0);
    }

    /* Mouse/trackpad hover: show the same existing dropdown. */
    .mainnav .navitem:hover > .mega {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        display: grid !important;
    }

    /* Touch/click: JavaScript adds .open. */
    .mainnav .navitem.open > .mega,
    .mainnav .navitem.open:hover > .mega {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        display: grid !important;
    }
}

/* =========================================================
   V17 - RELIABLE TOUCH SCROLL
   Uses native touch axes plus Touch Events from site.js.
   No menu redesign; desktop behavior remains unchanged.
   ========================================================= */
@media (max-width: 900px) {
    .mainnav {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .mainnav::-webkit-scrollbar {
        display: none;
    }

    .mainnav > a,
    .mainnav > .navitem {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .mainnav .navitem > .mega {
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.menu-open {
        overflow: hidden;
        touch-action: auto !important;
    }
}

/* =========================================================
   V18 - NO HORIZONTAL TOUCH SCROLLING
   Mobile/tablet navigation wraps onto multiple rows so every
   top-level menu item is reachable without dragging left/right.
   Open mega menus flow below the navigation and use normal page
   scrolling. Desktop is intentionally untouched.
   ========================================================= */
@media (max-width: 900px) {
    html, body {
        overflow-x: hidden !important;
    }

    .mainnav {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        white-space: normal !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        align-items: center !important;
        position: relative !important;
        touch-action: auto !important;
    }

    .mainnav > a,
    .mainnav > .navitem {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .mainnav .navitem {
        position: static !important;
    }

    /* The dropdown is placed below the entire wrapped navigation. */
    .mainnav .navitem > .mega {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: auto !important;
        touch-action: auto !important;
        overscroll-behavior: auto !important;
        box-sizing: border-box !important;
    }

    /* The open dropdown is allowed to extend the page normally. */
    .mainnav .navitem.open > .mega,
    .mainnav .navitem.open:hover > .mega {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: grid !important;
    }

    /* Do not lock the whole page when a mega menu is open. */
    body.menu-open {
        overflow: visible !important;
        touch-action: auto !important;
    }
}

@media (max-width: 600px) {
    .mainnav > a,
    .mainnav .navitem > a {
        padding: 11px 9px !important;
        font-size: 9px !important;
    }

    .mainnav .navitem > .mega {
        grid-template-columns: 1fr !important;
        padding: 18px 16px 28px !important;
        gap: 14px !important;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .mainnav .navitem > .mega {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: 22px 20px !important;
        gap: 20px !important;
    }
}


/* =========================================================
   V19 - MOBILE/TABLET DROPDOWN VERTICAL SCROLL
   Keep V18's wrapped top navigation. The open mega menu gets
   its own vertical scroll area so users can move UP/DOWN
   inside the dropdown without changing the desktop menu.
   ========================================================= */
@media (max-width: 900px) {
    .mainnav .navitem > .mega {
        max-height: calc(100vh - 145px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;
        scrollbar-width: auto !important;
        scrollbar-color: #a77b3b #f3eee7 !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar {
        width: 12px !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-track {
        background: #f3eee7 !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-thumb {
        background: #a77b3b !important;
        border-radius: 8px !important;
        border: 2px solid #f3eee7 !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-thumb:hover {
        background: #8d652e !important;
    }
}

@media (max-width: 600px) {
    .mainnav .navitem > .mega {
        max-height: calc(100vh - 135px) !important;
    }
}


/* =========================================================
   V21 - SIMPLE NATIVE TOUCH SCROLLING
   Based on the working V19 dropdown behavior.
   Mobile/tablet only. No JavaScript drag scrolling.
   ========================================================= */
@media (max-width: 900px) {
    .mainnav {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 2px !important;
        white-space: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        scrollbar-width: auto !important;
        scrollbar-color: #a77b3b #f3eee7 !important;
        position: relative !important;
    }

    .mainnav::-webkit-scrollbar {
        height: 6px !important;
    }

    .mainnav::-webkit-scrollbar-track {
        background: #f3eee7 !important;
    }

    .mainnav::-webkit-scrollbar-thumb {
        background: #a77b3b !important;
        border-radius: 6px !important;
    }

    .mainnav > a,
    .mainnav > .navitem {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .mainnav .navitem {
        position: static !important;
    }

    /* Keep the dropdown in normal document positioning. */
    .mainnav .navitem > .mega {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 145px) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;
        scrollbar-width: auto !important;
        scrollbar-color: #a77b3b #f3eee7 !important;
        z-index: 10000 !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar {
        width: 12px !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-track {
        background: #f3eee7 !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-thumb {
        background: #a77b3b !important;
        border-radius: 8px !important;
        border: 2px solid #f3eee7 !important;
    }

    .mainnav .navitem.open > .mega,
    .mainnav .navitem.open:hover > .mega {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: grid !important;
    }

    body.menu-open {
        overflow: visible !important;
        touch-action: auto !important;
    }
}

@media (max-width: 600px) {
    .mainnav > a,
    .mainnav .navitem > a {
        padding: 11px 9px !important;
        font-size: 9px !important;
        flex: 0 0 auto !important;
    }

    .mainnav .navitem > .mega {
        grid-template-columns: 1fr !important;
        padding: 18px 16px 28px !important;
        max-height: calc(100vh - 135px) !important;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .mainnav .navitem > .mega {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: 22px 20px !important;
        gap: 20px !important;
    }
}

/* =========================================================
   V22 - KEEP V21 HORIZONTAL MAIN MENU + RESTORE HOVER DROPDOWN
   The main navigation remains horizontally scrollable on
   mobile/tablet, but the mega menu is taken out of the
   scroll container with fixed positioning so mouse/trackpad
   hover can display it correctly.
   ========================================================= */
@media (max-width: 900px) {
    .mainnav .navitem > .mega {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: var(--mega-top, 120px) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: calc(100vh - var(--mega-top, 120px)) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;
        z-index: 30000 !important;
        margin: 0 !important;
    }

    /* Mouse/trackpad hover must work even though the nav itself scrolls. */
    .mainnav .navitem:hover > .mega {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: grid !important;
    }

    /* Touch/click opened state continues to work. */
    .mainnav .navitem.open > .mega,
    .mainnav .navitem.open:hover > .mega {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: grid !important;
    }
}

/* =========================================================
   V25 - RESTORE A REAL VERTICAL SCROLL AREA INSIDE THE MEGA MENU
   Based on the working V24 behavior. Do not change the main
   horizontal navigation or hover behavior. Only make the
   fixed mega menu a definite-height vertical scroll container.
   ========================================================= */
@media (max-width: 900px) {
    .mainnav .navitem > .mega {
        /* Keep the dropdown below the navigation and give it a
           definite viewport-based height so overflow-y is real. */
        top: var(--mega-top, 120px) !important;
        height: calc(100vh - var(--mega-top, 120px) - 10px) !important;
        max-height: none !important;
        min-height: 180px !important;

        overflow-x: hidden !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;

        /* Reserve space for the scrollbar so it is visible and
           does not change the width of the menu content. */
        scrollbar-gutter: stable !important;
        scrollbar-width: auto !important;
        scrollbar-color: #a77b3b #f3eee7 !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar {
        width: 14px !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-track {
        background: #f3eee7 !important;
        border-left: 1px solid #e3d8c8 !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-thumb {
        background: #a77b3b !important;
        border-radius: 8px !important;
        border: 3px solid #f3eee7 !important;
        min-height: 45px !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-thumb:hover {
        background: #8d652e !important;
    }
}

@media (max-width: 600px) {
    .mainnav .navitem > .mega {
        height: calc(100vh - var(--mega-top, 120px) - 10px) !important;
        min-height: 180px !important;
    }
}


/* =========================================================
   V26 - STABLE COMBINATION
   Keep V25 horizontal main-menu scrolling.
   Keep the mega menu outside the scroll clipping using fixed positioning.
   Add a reliable hover bridge/delay so the pointer can cross the
   horizontal scrollbar area without closing the dropdown.
   Give the dropdown a true scroll viewport.
   ========================================================= */
@media (max-width: 900px) {
    /* Main navigation: keep native horizontal scrolling. */
    .mainnav {
        overflow-x: auto !important;
        overflow-y: visible !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        position: relative !important;
        z-index: 2000 !important;
    }

    /* Do NOT let the nav's overflow create a clipping context for the mega. */
    .mainnav .navitem {
        position: static !important;
        flex: 0 0 auto !important;
    }

    /* Fixed dropdown: independent of the horizontal nav scroll. */
    .mainnav .navitem > .mega {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: var(--mega-top, 120px) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: min(70vh, 620px) !important;
        max-height: calc(100vh - var(--mega-top, 120px) - 8px) !important;
        min-height: 180px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        background: #fff !important;
        z-index: 40000 !important;

        /* The mega itself is the vertical scroll viewport. */
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;
        scrollbar-width: auto !important;
        scrollbar-color: #a77b3b #f3eee7 !important;
        scrollbar-gutter: stable !important;
    }

    /* Force a real scrollable layout instead of allowing grid rows to
       stretch the content to the viewport height. */
    .mainnav .navitem > .mega > div {
        min-height: 0 !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar {
        width: 14px !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-track {
        background: #f3eee7 !important;
        border-left: 1px solid #e3d8c8 !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-thumb {
        background: #a77b3b !important;
        border-radius: 8px !important;
        border: 3px solid #f3eee7 !important;
        min-height: 45px !important;
    }

    /* JS-controlled hover-open state. This is separate from :hover so
       the menu survives the small gap created by the horizontal scrollbar. */
    .mainnav .navitem.hover-open > .mega {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: grid !important;
    }

    .mainnav .navitem.open > .mega,
    .mainnav .navitem.open.hover-open > .mega {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: grid !important;
    }
}

@media (max-width: 600px) {
    .mainnav .navitem > .mega {
        height: min(72vh, 620px) !important;
        max-height: calc(100vh - var(--mega-top, 120px) - 8px) !important;
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   V27 - FINAL MOBILE/TABLET MEGA-MENU FIX
   Keep the working horizontal main-menu scroll from V26.
   Make the mega menu a real vertical scroll viewport without
   changing its jewellery/menu design.
   ========================================================= */
@media (max-width: 900px) {
    .mainnav .navitem > .mega {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: var(--mega-top, 120px) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100vh - var(--mega-top, 120px) - 6px) !important;
        min-height: 180px !important;
        max-height: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 22px 20px 40px !important;
        background: #fff !important;
        z-index: 40000 !important;

        /* The mega itself is the scroll viewport. */
        display: grid !important;
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;
        align-content: start !important;
        grid-auto-rows: max-content !important;
        scrollbar-width: auto !important;
        scrollbar-color: #a27b42 #f3eee7 !important;
        scrollbar-gutter: stable !important;
    }

    /* Never let the grid's rows stretch to fill the scroll viewport. */
    .mainnav .navitem > .mega > div {
        min-height: 0 !important;
        height: auto !important;
        align-self: start !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar {
        width: 14px !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-track {
        background: #f3eee7 !important;
        border-left: 1px solid #e3d8c8 !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-thumb {
        background: #a27b42 !important;
        border-radius: 8px !important;
        border: 3px solid #f3eee7 !important;
        min-height: 55px !important;
    }

    /* Open states. */
    .mainnav .navitem.open > .mega,
    .mainnav .navitem.open.hover-open > .mega,
    .mainnav .navitem.hover-open > .mega {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: grid !important;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .mainnav .navitem > .mega {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}

@media (max-width: 600px) {
    .mainnav .navitem > .mega {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 18px 16px 40px !important;
    }
}

/* =========================================================
   V28 - ONLY DROPDOWN VERTICAL SCROLL FIX
   Keep all V27 menu/hover/horizontal-scroll behavior unchanged.
   Give the existing mobile/tablet mega menu a smaller, definite
   viewport so its content must scroll vertically.
   ========================================================= */
@media (max-width: 900px) {
    .mainnav .navitem > .mega {
        height: 55vh !important;
        min-height: 260px !important;
        max-height: 55vh !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        scrollbar-width: auto !important;
        scrollbar-color: #a27b42 #f3eee7 !important;
        scrollbar-gutter: stable !important;
        align-content: start !important;
        grid-auto-rows: max-content !important;
    }

    .mainnav .navitem > .mega > div {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar {
        width: 14px !important;
        display: block !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-track {
        background: #f3eee7 !important;
        border-left: 1px solid #e3d8c8 !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-thumb {
        background: #a27b42 !important;
        border-radius: 8px !important;
        border: 3px solid #f3eee7 !important;
        min-height: 45px !important;
    }
}

@media (max-width: 600px) {
    .mainnav .navitem > .mega {
        height: 55vh !important;
        max-height: 55vh !important;
    }
}

/* =========================================================
   V29 - DROPDOWN VERTICAL SCROLL ONLY
   Based on V28. Do not change the main navigation, hover
   bridge, dropdown layout, colours or positioning.
   The only change here is to give the existing mega menu
   a definite scroll viewport so its content can move vertically.
   ========================================================= */
@media (max-width: 900px) {
    .mainnav .navitem > .mega {
        height: 42vh !important;
        max-height: 42vh !important;
        min-height: 220px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        scrollbar-width: auto !important;
        scrollbar-color: #a27b42 #f3eee7 !important;
        scrollbar-gutter: stable !important;
        align-content: start !important;
        grid-auto-rows: max-content !important;
    }

    .mainnav .navitem > .mega > div {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar {
        width: 14px !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-track {
        background: #f3eee7 !important;
        border-left: 1px solid #e3d8c8 !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar-thumb {
        background: #a27b42 !important;
        border-radius: 8px !important;
        border: 3px solid #f3eee7 !important;
        min-height: 45px !important;
    }
}

@media (max-width: 600px) {
    .mainnav .navitem > .mega {
        height: 42vh !important;
        max-height: 42vh !important;
    }
}

/* =========================================================
   V30 - FINAL MOBILE/TABLET DROPDOWN SCROLL + HOVER FIX
   Keep V29 visual design and horizontal main-menu scrolling.
   Adds a visible custom vertical scrollbar to the existing mega
   menu because mobile browsers may hide native scrollbars.
   Also fixes stale hover-open state when moving between items.
   ========================================================= */
@media (max-width: 900px) {
    .mainnav .navitem > .mega {
        position: fixed !important;
        top: var(--mega-top, 120px) !important;
        left: 0 !important;
        right: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 42vh !important;
        max-height: 42vh !important;
        min-height: 220px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;
        scrollbar-width: none !important;
        padding-right: 42px !important;
    }

    .mainnav .navitem > .mega::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

    .mega-scroll-track {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        width: 16px !important;
        background: #f3eee7 !important;
        border: 1px solid #e3d8c8 !important;
        border-radius: 9px !important;
        z-index: 50000 !important;
        cursor: ns-resize !important;
        display: block !important;
    }

    .mega-scroll-thumb {
        position: absolute !important;
        left: 2px !important;
        right: 2px !important;
        top: 2px !important;
        min-height: 46px !important;
        background: #a27b42 !important;
        border-radius: 7px !important;
        cursor: grab !important;
        touch-action: none !important;
    }

    .mega-scroll-thumb:active {
        cursor: grabbing !important;
    }

    .mainnav .navitem > .mega > .mega-scroll-track {
        height: auto !important;
        min-height: 0 !important;
        align-self: auto !important;
    }
}

@media (max-width: 600px) {
    .mainnav .navitem > .mega {
        height: 42vh !important;
        max-height: 42vh !important;
        padding-right: 40px !important;
    }
}

/* V30.1 - ONLY vertical scrollbar visibility adjustment.
   Preserve all V30 horizontal menu, hover, dropdown and scrolling behavior. */
@media (max-width: 900px) {
    .mainnav .navitem > .mega {
        padding-right: 50px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .mainnav .navitem > .mega > .mega-scroll-track {
        top: 6px !important;
        right: 16px !important;
        bottom: 6px !important;
        width: 18px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }

    .mainnav .navitem > .mega > .mega-scroll-track > .mega-scroll-thumb {
        left: 2px !important;
        right: 2px !important;
        min-height: 46px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 600px) {
    .mainnav .navitem > .mega {
        padding-right: 50px !important;
    }

    .mainnav .navitem > .mega > .mega-scroll-track {
        right: 16px !important;
        width: 18px !important;
    }
}

/* V30 BASE - ONLY reliable vertical scrollbar dragging */
@media (max-width:900px){
 .mainnav .navitem > .mega > .mega-scroll-track{pointer-events:auto!important;touch-action:none!important;}
 .mainnav .navitem > .mega > .mega-scroll-track > .mega-scroll-thumb{pointer-events:auto!important;touch-action:none!important;user-select:none!important;-webkit-user-select:none!important;}
}

/* =========================================================
   FIND STORE
   ========================================================= */

.store-locator{
    max-width:1050px;
    margin:55px auto 90px;
    padding:0 20px;
}

.store-search-box{
    display:flex;
    align-items:center;
    gap:22px;
    padding:28px 32px;
    border:1px solid #e5d9ca;
    background:#faf6f0;
    box-shadow:0 8px 24px rgba(65,45,30,.06);
}

.store-search-icon,
.store-card-icon,
.recent-empty-icon{
    flex:0 0 auto;
    width:54px;
    height:54px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f0e2cf;
    color:#9d763b;
}

.store-search-icon svg,
.store-card-icon svg,
.recent-empty-icon svg{
    width:28px;
    height:28px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.store-search-box h2{
    font:normal 25px Georgia,serif;
    margin:0 0 7px;
    color:#3b2a20;
}

.store-search-box p{
    margin:0;
    color:#74675d;
    font-size:13px;
    line-height:1.6;
}

.store-info-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:25px;
}

.store-info-card{
    padding:32px;
    border:1px solid #eadfd2;
    background:#fff;
    text-align:center;
}

.store-card-icon{
    margin:0 auto 15px;
    width:50px;
    height:50px;
}

.store-info-card h3{
    font:normal 21px Georgia,serif;
    margin:8px 0;
}

.store-info-card p{
    color:#74675d;
    font-size:13px;
    line-height:1.7;
    max-width:430px;
    margin:0 auto 10px;
}

/* =========================================================
   RECENTLY VIEWED
   ========================================================= */

.recent-page{
    max-width:1200px;
    margin:50px auto 90px;
    padding:0 20px;
}

.recent-products{
    min-height:100px;
}

.recent-card{
    transition:transform .2s ease;
}

.recent-card:hover{
    transform:translateY(-3px);
}

.recent-footer{
    text-align:center;
    margin-top:38px;
}

.recent-empty{
    max-width:550px;
    margin:20px auto 80px;
    text-align:center;
    padding:45px 25px;
    border:1px solid #eadfd2;
    background:#faf6f0;
}

.recent-empty-icon{
    margin:0 auto 18px;
}

.recent-empty h2{
    font:normal 25px Georgia,serif;
    margin:0 0 8px;
    color:#3b2a20;
}

.recent-empty p{
    color:#74675d;
    font-size:13px;
    margin:0 0 22px;
}

@media(max-width:600px){
    .store-locator,.recent-page{
        margin-top:30px;
        padding:0 15px;
    }
    .store-search-box{
        align-items:flex-start;
        padding:22px 18px;
        gap:14px;
    }
    .store-search-icon{
        width:44px;
        height:44px;
    }
    .store-search-icon svg{
        width:23px;
        height:23px;
    }
    .store-search-box h2{
        font-size:21px;
    }
    .store-info-grid{
        grid-template-columns:1fr;
    }
    .store-info-card{
        padding:26px 20px;
    }
}


/* =========================================================
   V31 - RESPONSIVE PINCODE / MEGA-SCROLLBAR ISOLATION
   Keep the custom vertical scrollbar hidden unless its mega menu
   is actually open. This prevents it from appearing when the user
   moves over PINCODE or other catalogue controls.
   ========================================================= */
@media (max-width: 900px) {
    .mainnav .navitem:not(.open):not(.hover-open) > .mega > .mega-scroll-track {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .mainnav .navitem.open > .mega > .mega-scroll-track,
    .mainnav .navitem.hover-open > .mega > .mega-scroll-track {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Touch/mobile: menu opens by tap/click only, not by CSS hover. */
@media (max-width: 900px) and (hover: none) {
    .mainnav .navitem:hover > .mega {
        display: none !important;
    }
    .mainnav .navitem.open > .mega {
        display: grid !important;
    }
}

/* V8 real product photography */
.product img, .products .product img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    background: #f8f6f2;
}