:root {
    --pBg:#ffffff;/* Primary Background */
    --hdBg:#ffffff;/* Header Background */
    --pTx:#333333;/* Primary Text */
    --sTx:#555555;/* Secondary Text */
    --pAs: #fd7125; /* Primary Accent */
    --sAs: #1380fd; /* Secondary Accent */
    --pRs:#007cc9;/* Primary Rs */
    --sRs:#999999;/* Secondary Rs */
    --disC:#75b900;/* Discount Color */
    --pLn:#0c3c85;/* Primary Link */
    --sLn:#0c4985;/* Secondary Link */
    --ftBg:#333333;/* Footer Background */
    --ftTx:#ffffff;/* Footer Text */
    --hSpBdr:#cbcaca;/* Horizontal Separator Border */
    --icn:#333333;/* Icon Color */
    --grdCat:repeat(auto-fill,minmax(100px,1fr));/* Grid for Categories */
    --grdPrd:repeat(auto-fill,minmax(225px,1fr));/* Grid for Products */
    --grdFeu:repeat(auto-fill,minmax(200px,1fr));/* Grid for Featured */
    --grdRlt:repeat(auto-fill,minmax(200px,1fr));/* Grid for Related */
    --gapCat:20px;/* Gap for 20px */
    --gapPrd:30px;/* Gap for 30px */
    --mqBg:#000000;/* Marquee Background */
    --mqTx:#ffffff;/* Marquee Text */
    --mqDot:#c6ff2b;/* Marquee Dot */
    --bxBg:#ffffff;/* Box Bg */
    --bxBdrC:#a7a7a745;/* Box Border Color */
    --bxBdrHC:#a7a7a74b;/* Box Border Hover Color */
    --bxTx:#000000;/* Box Text */
    --bxSw:rgba(0,0,0,0.08) 0 1px 20px;/* Box Shadow */
    --bxSw1:rgba(0,0,0,0.1) 0px 10px 50px;/* Box Shadow 1 */
    --bxSw2:rgba(17,17,26,0.05) 0px 4px 16px,rgba(17,17,26,0.05) 0px 8px 32px;/* Box Shadow 2 */
    --bxSwH:rgba(0,0,0,0.15) 0 0px 25px;/* Box Shadow Hover */
    --bxShS: 0 0 10px 5px rgba(0, 0, 0, 0.08);/* Box Shadow small */
    --bxImBg:#ffffff;/* Box Image Background */
    --bxImBdr:#a7a7a712;/* Box Image Border */
    --bxBdrSz:1px;/* Box Border Size */
}
[data-theme="dark"] {
    --pBg:#3a3a3a;
    --hdBg:#3a3a3a;
    --pTx:#ffffff;
    --sTx:#cccccc;
    --pRs:#84c8ff;
    --sRs:#adb5bd;
    --pLn:#0c3c85;
    --sLn:#0c4985;
    --ftBg:#333333;
    --ftTx:#ffffff;
    --hSpBdr:#818181;
    --icn:#ffffff;
    --mqBg:#ffb811;
    --mqTx:#0a0a0a;
    --mqDot:#000000;
    --bxBg:#505050;
    --bxBdrC:#000000;
    --bxBdrHC:#868686;
    --bxTx:#ffffff;
    --bxSw:rgba(0,0,0,0.25) 0 1px 20px;
    --bxSw1:rgba(0,0,0,0.1) 0px 10px 50px;
    --bxSw2:rgba(17,17,26,0.05) 0px 4px 16px,rgba(17,17,26,0.05) 0px 8px 32px;
    --bxSwH:rgba(0,0,0,0.8) 0 0px 25px;
    --bxShS: 0 0 10px 5px rgba(255, 255, 255, 0.17);
    --bxImBg:#ffffff;
    --bxImBdr:#a7a7a712; }
[data-theme="solarized"] {
    --pBg:#ffffff;
    --hdBg:#ffffff;
    --pTx:#333333;
    --sTx:#555555;
    --pRs:#007cc9;
    --sRs:#999999;
    --pLn:#0c3c85;
    --sLn:#0c4985;
    --ftBg:#333333;
    --ftTx:#ffffff;
    --hSpBdr:#cbcaca;
    --icn:#333333;
    --mqBg:#ffb811;
    --mqTx:#0a0a0a;
    --mqDot:#000000; }
[data-theme="forest"] {
    --pBg:#ffffff;
    --hdBg:#ffffff;
    --pTx:#333333;
    --sTx:#555555;
    --pRs:#007cc9;
    --sRs:#999999;
    --pLn:#0c3c85;
    --sLn:#0c4985;
    --ftBg:#333333;
    --ftTx:#ffffff;
    --hSpBdr:#cbcaca;
    --icn:#333333;
    --mqBg:#ffb811;
    --mqTx:#0a0a0a;
    --mqDot:#000000; }
[data-theme="ocean"] {
    --pBg:#ffffff;
    --hdBg:#ffffff;
    --pTx:#333333;
    --sTx:#555555;
    --pRs:#007cc9;
    --sRs:#999999;
    --pLn:#0c3c85;
    --sLn:#0c4985;
    --ftBg:#333333;
    --ftTx:#ffffff;
    --hSpBdr:#cbcaca;
    --icn:#333333;
    --mqBg:#ffb811;
    --mqTx:#0a0a0a;
    --mqDot:#000000; }
body { font-family:var(--font-sans),NotoSansDevanagari,NotoSansTamil,NotoSansTelugu,NotoSansKannada,NotoSansMalayalam,NotoSansGujarati,NotoSansOriya,var(--fallback); font-weight:400; font-size:16px; line-height:1.6; color:var(--pTx); background-color:var(--pBg); font-optical-sizing:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; overflow-y:auto; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; padding:0; margin:0; }
h1,h2,h3,h4,h5,h6 { font-weight:700; line-height:1.2; padding:25px 0; color:var(--pTx); }
.hSep { width:100%; border-bottom:1px solid var(--hSpBdr); margin:40px 0 25px 0; padding:0 0 5px 0; }
.hSep span { border-bottom:3px solid var(--pAs); padding-bottom:5px; }
h2.hSep a{float: right;  font-size: small;  line-height: 30px;  color: currentColor;}
p { margin-top:20px; }
.hb,.mb,.sr,.cr,.tc,.tp,.fp,.tm,.ft { width:100%; margin:auto; }
.tc,.tp { max-width:1400px; padding:0 30px; }
.ft { background-color:var(--ftBg); }
.hb { background-color:var(--hdBg); display:flex; justify-content:center; align-items:center;/* border-bottom: 1px solid #e4e4e4; */box-shadow:rgba(0,0,0,0.62) 0px 5px 30px -20px; font-size:25px; }
.hb .head { width:100%; max-width:1400px; height:55px; margin:0 auto; padding:0 10px; color:var(--ftTx); display:flex; justify-content:space-between; align-items:center; }
.hb .head img { width:auto; height:auto; max-height: 40px; max-width: 65px; filter:drop-shadow(0px 0px 1px rgba(255,255,255,1)) drop-shadow(0px 0px 2px rgba(255,255,255,1)) drop-shadow(0px 0px 4px rgba(255,255,255,0.9)) drop-shadow(0px 0px 6px rgba(255,255,255,0.8)) drop-shadow(0px 0px 10px rgba(255,255,255,0.6)); padding:0; }
.hb .head .srch { width:100%; }



.flBr { display:flex; width:100%; }
.flBx { flex-grow:1; flex-shrink:1; min-height:55px; max-height:65px; display:flex; align-items:center; }
.hb1 { min-width:fit-content; max-width:fit-content; flex-shrink:0; order:1; }
.hb2 { min-width:fit-content; max-width:fit-content; flex-shrink:0; order:2; }
.hb3 { /*min-width:fit-content;*/ order:3; }
.hb4 { min-width:fit-content; max-width:fit-content; flex-shrink:0; justify-content:right; order:4; }
.hb4 div { display:flex; height: 20px;; align-items:center; top: -0.15rem; position: relative;}
.hb4 div .mIcon { width:20px; height:20px; margin-left:10px; cursor:pointer; color:var(--pTx); }
.hb4 div .mIcon:first-child { margin-left:0; }



.mPC { display:none; }
.mMob { display:block; }
.mb { width:100%; height:auto; background-color:var(--pBg); display:flex; justify-content:center; align-items:center; }
#searchIcon { cursor:pointer; }
#closeSearch { width:20px; height:20px; margin-left:10px; cursor:pointer; }
.cr { width:100%; height:auto; background-color:var(--pBg); display:flex; justify-content:center; align-items:center; box-shadow:rgba(0,0,0,0.62) 0px 5px 30px -20px; }
.ftc { width:100%; max-width:1400px; font-size:14px; padding:15px; display:flex; flex-direction:column; align-items:center; text-align:center; margin:35px auto 0 auto; }
.ftc p { margin:5px 0; color:var(--ftTx); }
.ftc a { color:var(--ftTx); text-decoration:none; }
.ftc a:hover { text-decoration:underline; }
.css-selector { background:linear-gradient(270deg,#fffec7,#ffe3c7,#c7faff,#e3c7ff); background-size:800% 800%; -webkit-animation:ani1 30s ease infinite; -moz-animation:ani1 30s ease infinite; animation:ani1 30s ease infinite; }
@-webkit-keyframes ani1 { 
    0% { background-position:0% 50%}
    50% { background-position:100% 50%}
    100% { background-position:0% 50%}
    ; }
@-moz-keyframes ani1 { 
    0% { background-position:0% 50%}
    50% { background-position:100% 50%}
    100% { background-position:0% 50%}
    ; }
@keyframes ani1 { 
    0% { background-position:0% 50%}
    50% { background-position:100% 50%}
    100% { background-position:0% 50%}
    ; }
.ecsIS { display:inline-block; position:relative; color:var(--icn); font-size:24px; }
.ecsIS::before { content:attr(data-label); font-family:'GMS36' !important; font-weight:400 !important; font-size:inherit !important; display:inline-block !important; white-space:nowrap !important; word-wrap:normal !important; direction:ltr !important; -webkit-font-feature-settings:'liga' !important; font-feature-settings:'liga' !important; -webkit-font-smoothing:antialiased !important; position:inherit; min-height:18px; min-width:18px; color:inherit !important; margin-right:5px; }
h1>.ecsIS::before { font-size:2.5rem !important; vertical-align:-0.4rem; }
h2>.ecsIS::before { font-size:2.2rem !important; vertical-align:-0.3rem; }
h3>.ecsIS::before { font-size:2rem !important; vertical-align:-0.2rem; }
h4>.ecsIS::before { vertical-align:-0.2rem; }
h5>.ecsIS::before { vertical-align:-0.2rem; }
h6>.ecsIS::before { vertical-align:-0.2rem; }
p>.ecsIS::before { vertical-align:-0.2rem; }
a>.ecsIS::before { vertical-align:-0.2rem; }
span>.ecsIS::before { vertical-align:-0.2rem; }

/* Grid Layouts for Categories, Products, Featured, and Related sections */
.grid-wrapper { width:100%; max-width:1400px; margin:auto; }
.grid_cat { display:grid; grid-template-columns:var(--grdCat); gap:var(--gapCat); }
.grid_prd { display:grid; grid-template-columns:var(--grdPrd); gap:var(--gapPrd); }
.grid_feu { display:grid; grid-template-columns:var(--grdFeu); gap:var(--gapPrd); }
.grid_rlt { display:grid; grid-template-columns:var(--grdRlt); gap:var(--gapCat); }
.box { background:var(--bxBg); border:var(--bxBdrSz) solid var(--bxBdrC); min-height:100px; display:flex; align-items:center; justify-content:center; font-size:0.85rem; color:var(--bxTx); letter-spacing:0.04rem; border-radius:12px 12px 10px 10px; text-align:center; box-shadow:var(--bxSw); transition:transform 0.2s,box-shadow 0.2s; overflow:hidden; }
.box:hover { box-shadow:var(--bxSwH); border:var(--bxBdrSz) solid var(--bxBdrHC); }
.box:hover img { transform:scale(1.05); }
.box a { border:none; text-decoration:none; margin:0; padding:0; width:100%; height:100%; display: grid; align-content: space-between;}
.cat img { max-width:100%; height:auto; display:block; margin-bottom:10px; border-radius:10px 10px 0 0; overflow:hidden; transition:transform 0.3s ease; }
/* .cat img:hover { transform: scale(1.05); } */
.cat span { display:block; font-size:0.899rem; color:var(--bxTx); letter-spacing:0.02em; line-height:0.9rem; padding:0 0 8px 0; font-weight:500; }
@media (max-width:240px) {
    .grid,.grid_cat,.grid_prd,.grid_feu,.grid_rlt { grid-template-columns:1fr; }
}
.boximgMD { width:100%; height:250px; overflow:hidden; background-color:var(--bxImBg); text-align:center; padding:12px; border-radius:10px 10px 0 0; border-bottom:2px solid var(--bxImBdr); }
.boximgMD img { width:auto; height:100%; object-fit:cover; transition:transform 0.3s ease; margin:auto; }
/* .boximgMD:hover img { transform: scale(1.05); } */
.boxnameMD { font-size:0.9rem; color:var(--bxTx); letter-spacing:0.02em; padding:1px 20px 20px 20px; text-align:left; line-height:1.3rem; }
.boxpriceMD { font-size:1rem; color:var(--pRs); letter-spacing:0.02em; text-align:left; padding:15px 20px 2px 20px; }
.boxpriceMD b { font-weight:500 !important; }
.boxpriceMD .mrp { text-decoration:line-through; color:var(--sRs); margin-left:10px; }
.boxpriceMD .prz { font-weight:bold; }
.boxpriceMD .dis { margin-left:10px; color:var(--disC); }
/*********************************marquee****************************/
.marquee-track { width:100%; overflow:hidden; height:27px; display:flex; align-items:center; position:relative; background:var(--mqBg); cursor:grab; }
.marquee-track.dragging { cursor:grabbing; }
.marquee-track::before,.marquee-track::after { content:''; position:absolute; top:0; bottom:0; width:35px; z-index:2; pointer-events:none; }
.marquee-track::before { left:0; background:linear-gradient(to right,var(--mqBg),transparent); }
.marquee-track::after { right:0; background:linear-gradient(to left,var(--mqBg),transparent); }
.marquee-inner {/*display: flex;*/white-space:nowrap; will-change:transform; flex-shrink:0; }
.marquee-set { display:inline-flex; flex-shrink:0; }
.marquee-item { display:inline-flex; align-items:center; font-family:'Bebas Neue',sans-serif; font-size:14px; letter-spacing:0.05em; color:var(--mqTx); user-select:none; text-transform:uppercase; }
.marquee-item::after { content:''; width:6px; height:6px; border-radius:50%; background:var(--mqDot); flex-shrink:0; display:inline-block; margin:0 20px; }

.mIcon { font-family:'GMS36'; font-weight:normal; font-style:normal; font-size:1.5rem; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-feature-settings:'liga'; font-feature-settings:'liga'; position:relative; top:0.15rem; }


/* top menu */
.mnu {
    --bg-body:var(--pBg);
    --text-body:var(--pTx);
    --bg-header:var(--hdBg);
    --border-light:var(--bxBdrC);
    --border-medium:var(--bxBdrHC);
    --text-white:var(--pTx);
    --text-muted:var(--sTx);
    --text-dark-muted:var(--sRs);
    --text-title:var(--pTx);
    --brand-blue:var(--pLn);
    --brand-purple:var(--sLn);
    --hero-blue-light:var(--pBg);
    --hero-blue-mid:var(--pLn);
    --bg-hover-light:var(--bxBdrC);
    --bg-hover-btn:var(--bxBdrHC);
    --bg-submenu:var(--bxBg);
    --bg-submenu-mobile:var(--pBg);
    --hero-blob:transparent;
    --shadow-header:var(--bxSw);
    --shadow-dropdown:var(--bxSw1);
    --header-height:70px;
    --header-px:2rem;
    --nav-gap:1.5rem;
    --submenu-min-width:220px;
    --btn-px:1.2rem;
    --btn-py:0.6rem;
    --mobile-p:1.5rem;
    --close-btn-size:40px;
    --border-radius-base:0.5rem;
    --border-radius-lg:0.75rem; }
.mnu .menu-dropdown-wrapper { position:relative; display:flex; align-items:center; }
/* .mnu .menu-btn-desktop { background:transparent; color:var(--pTx); font-weight:500; cursor:pointer; font-size:1.1rem; border:1px solid #dddddd; padding:3px 15px; border-radius:8px; } */
.mnu .menu-btn-desktop {background: transparent;color: var(--text-title);border: none;padding: var(--btn-py) var(--btn-px);border-radius: var(--border-radius-base);font-weight: 600;cursor: pointer;font-size: 1rem;display: flex;align-items: center;}
.mnu .main-menu,.mnu .main-menu ul,.mnu .main-menu li { list-style:none; }
.mnu .main-menu li { position:relative; }
.mnu .main-menu li a { text-decoration:none; color:var(--text-muted); padding:var(--btn-py) var(--btn-px); display:flex; align-items:center; justify-content:space-between; border-radius:var(--border-radius-base); transition:all 0.2s ease; font-weight:500; font-size:0.95rem; }
.mnu .main-menu li>a:hover { color:var(--text-white); background:var(--bg-hover-light); }
.mnu ol,.mnu ul { padding-left:0; }
.mnu .has-children>a::after { content:''; display:inline-block; margin-left:0.6rem; width:0.4em; height:0.4em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transition:transform 0.2s ease; opacity:0.7; margin-top:1px; }
.mnu .mobile-toggle { display:none; background:none; border:none; color:var(--text-white); font-size:1.8rem; cursor:pointer; padding:0.5rem; border-radius:var(--border-radius-base); transition:background 0.2s; }
.mnu .mobile-toggle:hover { background:var(--border-medium); }
.mnu .close-btn { display:none; }
.mnu.is-desktop .menu-btn-desktop { display:block; }
/* .mnu.is-desktop .main-menu,.mnu.is-desktop .main-menu ul { list-style:none; position:absolute; background:var(--bg-submenu); border:1px solid var(--border-medium); border-radius:var(--border-radius-lg); min-width:var(--submenu-min-width); padding:0.5rem; box-shadow:var(--shadow-dropdown); opacity:0; visibility:hidden; transition:opacity 0.2s ease,transform 0.2s ease,visibility 0.2s; z-index:1000; display:flex; flex-direction:column; gap:0.2rem; } */
/* .mnu.is-desktop .main-menu { top:100%; left:0; margin-top:0.5rem; transform:translateY(10px); } */
/* .mnu.is-desktop .main-menu::before { content:''; position:absolute; top:-1.5rem; left:-1rem; right:-1rem; height:1.5rem; } */
/* .mnu.is-desktop .main-menu ul::before { content:''; position:absolute; top:-0.5rem; bottom:-0.5rem; left:-1rem; width:1rem; } */
/* .mnu.is-desktop .main-menu ul.open-left::before { left:auto; right:-1rem; } */
/* .mnu.is-desktop .menu-dropdown-wrapper:hover .main-menu { opacity:1; visibility:visible; transform:translateY(0); } */
/* .mnu.is-desktop .main-menu ul { top:0; left:100%; transform:translateX(10px); margin-top:0; } */
/* .mnu.is-desktop .main-menu li:hover>ul { opacity:1; visibility:visible; transform:translateX(0); } */
/* .mnu.is-desktop .main-menu>li { width:100%; } */
/* .mnu.is-desktop .main-menu ul.open-left { left:auto !important; right:100% !important; transform:translateX(-10px); } */
/* .mnu.is-desktop .main-menu li:hover>ul.open-left { transform:translateX(0) !important; } */
.mnu.is-desktop .has-children>a::after { transform:rotate(-45deg); }
.mnu.is-mobile .has-children>a::after { transform:rotate(45deg); }
/* .mnu.is-mobile .main-menu li.active-mobile>a::after { transform:rotate(225deg) !important; } */
.mnu.is-mobile .menu-btn-desktop { display:none; }
.mnu.is-mobile .mobile-toggle { display:block; }
.mnu.is-mobile .nav-container { position:fixed; top:0; left:0; width:100vw; height:100vh; background:var(--bg-body); z-index:999; display:flex; flex-direction:column; transform:translateY(-100%); transition:transform 0.4s cubic-bezier(0.16,1,0.3,1); overflow-y:auto; overflow-x:hidden; padding:var(--mobile-p); }
.mnu.is-mobile .nav-container.active { transform:translateY(0); }
.mnu.is-mobile .nav-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; padding-bottom:1rem; border-bottom:1px solid var(--border-medium); }
.mnu.is-mobile .mobile-nav-title { font-size:1.25rem; font-weight:600; color:var(--text-title); }
.mnu.is-mobile .close-btn { display:flex; align-items:center; justify-content:center; background:var(--border-light); border:1px solid var(--border-medium); color:var(--text-white); font-size:1.2rem; cursor:pointer; height:var(--close-btn-size); width:var(--close-btn-size); border-radius:50%; transition:all 0.2s; }
.mnu.is-mobile .close-btn:hover { background:var(--bg-hover-btn); }
/* .mnu.is-mobile .main-menu { flex-direction:column; align-items:flex-start; width:100%; gap:0; display:flex; }
.mnu.is-mobile .main-menu li { width:100%; }
.mnu.is-mobile .main-menu li a { font-size:1.15rem; padding:1.2rem 1rem; border-bottom:1px solid var(--border-light); border-radius:0; }
.mnu.is-mobile .main-menu li:hover>ul { transform:none; }
.mnu.is-mobile .main-menu ul { list-style-type:none; position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background:var(--bg-submenu-mobile); padding-left:0; display:none; width:100%; margin-top:0; border-radius:0; }
.mnu.is-mobile .main-menu ul li a { padding-left:2rem; font-size:1.05rem; color:var(--text-muted); }
.mnu.is-mobile .main-menu ul ul li a { padding-left:3rem; font-size:0.95rem; color:var(--text-dark-muted); }
.mnu.is-mobile .main-menu li.active-mobile>ul { display:block; animation:fadeInDown 0.3s ease forwards; }
.mnu.is-mobile .main-menu ul ul { position:static; left:auto; transform:none; } */
@keyframes fadeInDown { from { opacity:0; transform:translateY(-5px); }
    to { opacity:1; transform:translateY(0); }
}
.mnu.mnu-standalone-wrapper {/*position: absolute; top: 1rem; left: 1rem; display: flex; align-items: center; gap: 1rem;*/z-index:100; }
.prevent-scroll { margin:0; height:100vh; overflow:hidden; }
.mnu:not(.is-desktop):not(.is-mobile) {visibility: hidden;}
/* top menu end */


/* Search bar */
.sbar { width:100%; position:relative; display:flex; align-items:center; }
.sbarIp { width:100%; height:34px; padding:0 44px 0 16px; font-size:15px; color:var(--bxTx); background:var(--bxBg); border:1px solid #8d8d8d; border-radius:8px; outline:none; box-sizing:border-box; transition:border-color 0.15s; }
.sbarIp::placeholder { color:#aaa; }
.sbarIp:focus { border-color:#888; box-shadow:var(--bxShS); }
.sbarIcon { position:absolute; right:14px; font-size:20px; color:var(--sTx); pointer-events:none; user-select:none; line-height:1;top: unset !important; }
/* Search bar end */



@media all and (min-width:300px) {

    .hb .head img{max-height: 40px; max-width: 65px;}


}
@media all and (min-width:500px) {
    .mPC { display:flex; }
    .mMob { display:none; }
    .hb4 div .mIcon { margin-left:15px;}
    .hb .head img{max-height: 40px; max-width: 100px;}
    .hb .head {padding:0 20px;}
        :root {
        --grdCat:repeat(auto-fill,minmax(123px,1fr));/* Grid for Categories */
        --grdPrd:repeat(auto-fill,minmax(225px,1fr));/* Grid for Products */
        --grdFeu:repeat(auto-fill,minmax(200px,1fr));/* Grid for Featured */
        --grdRlt:repeat(auto-fill,minmax(200px,1fr));/* Grid for Related */
        --gapCat:20px;/* Gap for 20px */    
        --gapPrd:30px;/* Gap for 30px */
        --gapFeu:20px;/* Gap for 20px */
        --gapRlt:20px;/* Gap for 20px */
    }
}
@media all and (min-width:1440px) {
    .hb .head { width:100%; max-width:1400px; height:55px; margin:0 auto; padding:0; color:white; display:flex; justify-content:space-between; align-items:center; }
    .tc,.tp,.mcF { max-width:1400px; padding:0; }

}







.mcF {
  display: flex;
  width: 100%;
  margin: 25px auto 0 auto;
}

.sbF {
  flex: 0 0 250px; 
}

.mdF {
  flex: 1; 
  padding: 0 0 0 20px;
}


.catImg {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
  display: block;
  margin-bottom: 10px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  
}
.mdF h1 span {
  display: inline-block;
  font-size: 0.899rem;
  color: var(--bxTx);
  letter-spacing: 0.02em;
  line-height: 0.9rem;
  padding: 0 0 0 8px;
  font-weight: 400;
}






/* ── Sidebar ── */
  /* ── Variables ── */
  :root {
    --sb-bg:            #ffffff;
    --sb-surface:       #f6f4f1;
    --sb-hover:         #efece7;
    --sb-border:        #e4e0da;
    --sb-border-strong: #cac5bd;
    --sb-text:          #1c1b18;
    --sb-muted:         #8c8880;
    --sb-subtle:        #b5b1aa;
    --sb-accent:        #1c1b18;
    --sb-radius:        14px;
    --sb-radius-sm:     8px;
    --sb-ease:          180ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ── Sidebar Shell ── */
  #filterSidebar {
    width:          100%;
    max-width:      230px;
    max-height:     100vh;
    background:     var(--sb-bg);
    border:         1px solid var(--sb-border);
    border-radius:  var(--sb-radius);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
  }

  /* ── Heading ── */
  #filterSidebar > h3 {
    font-family:    'Playfair Display', Georgia, serif;
    font-weight:    500;
    font-size:      19px;
    letter-spacing: -0.2px;
    color:          var(--sb-text);
    padding:        20px 18px 0;
    margin:         0;
    flex-shrink:    0;
  }

  /* ── Selected filters area ── */
  #selected-filters {
    padding:     0 18px;
    min-height:  0;
    flex-shrink: 0;
  }

  /* ── Form ── */
  #filterForm {
    padding:    14px 18px 18px;
    flex:       1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  #filterForm:hover {
    scrollbar-color: var(--sb-border-strong) transparent;
  }

  #filterForm::-webkit-scrollbar       { width: 4px; }
  #filterForm::-webkit-scrollbar-track { background: transparent; }
  #filterForm::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
  #filterForm:hover::-webkit-scrollbar-thumb { background: var(--sb-border-strong); }

  /* ── Scroll list wrapper ── */
  .sb-scroll-wrap {
    position: relative;
    margin:   0 -7px;
  }

  /* Fade hint at bottom when more items below */
  .sb-scroll-wrap::after {
    content:        '';
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          4px;
    height:         30px;
    background:     linear-gradient(to bottom, transparent, var(--sb-bg));
    pointer-events: none;
    transition:     opacity 0.15s;
  }

  .sb-scroll-wrap.at-end::after { opacity: 0; }

  .sb-scroll-list {
    max-height:  148px;
    overflow-y:  hidden;
    padding:     0 7px;
    width:       calc(100% + 14px);
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  .sb-scroll-wrap:hover .sb-scroll-list,
  .sb-scroll-wrap:focus-within .sb-scroll-list,
  .sb-scroll-wrap.touching .sb-scroll-list {
    overflow-y: auto;
    scrollbar-color: var(--sb-border-strong) transparent;
  }

  .sb-scroll-list::-webkit-scrollbar       { width: 4px; }
  .sb-scroll-list::-webkit-scrollbar-track { background: transparent; }
  .sb-scroll-list::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
  .sb-scroll-wrap:hover .sb-scroll-list::-webkit-scrollbar-thumb,
  .sb-scroll-wrap:focus-within .sb-scroll-list::-webkit-scrollbar-thumb,
  .sb-scroll-wrap.touching .sb-scroll-list::-webkit-scrollbar-thumb { background: var(--sb-border-strong); }

  /* Each section div ── */
  #filterForm > div {
    border-bottom:  1px solid var(--sb-border);
    padding-bottom: 14px;
    margin-bottom:  14px;
  }

  #filterForm > div:last-child {
    border-bottom:  none;
    padding-bottom: 0;
    margin-bottom:  0;
  }

  /* Section headings ── */
  #filterForm > div > b,
  #filterForm > div > strong {
    display:        block;
    font-family:    'DM Sans', system-ui, sans-serif;
    font-size:      10px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color:          var(--sb-muted);
    margin-bottom:  10px;
  }

  /* Hide <br> after headings ── */
  #filterForm > div > b + br,
  #filterForm > div > strong + br {
    display: none;
  }

  /* Hide <hr> ── */
  #filterForm > hr {
    display: none;
  }

  /* Labels ── */
  #filterForm label {
    display:       flex;
    align-items:   center;
    gap:           9px;
    padding:       5px 7px;
    margin:        1px -7px;
    border-radius: var(--sb-radius-sm);
    cursor:        pointer;
    font-size:     13px;
    color:         var(--sb-text);
    line-height:   1.3;
    transition:    background var(--sb-ease);
    user-select:   none;
  }

  #filterForm label:hover {
    background: var(--sb-hover);
  }

  /* Disabled label ── */
  #filterForm label:has(input:disabled) {
    cursor: not-allowed;
    color:  var(--sb-subtle);
  }
  #filterForm label:has(input:disabled):hover {
    background: transparent;
  }

  /* Hide <br> after labels ── */
  #filterForm label + br {
    display: none;
  }

  /* ── Checkboxes ── */
  #filterForm input[type="checkbox"] {
    appearance:         none;
    -webkit-appearance: none;
    width:              17px;
    height:             17px;
    min-width:          17px;
    border-radius:      5px;
    border:             1.5px solid var(--sb-border-strong);
    background:         var(--sb-bg);
    cursor:             pointer;
    position:           relative;
    flex-shrink:        0;
    transition:         background var(--sb-ease), border-color var(--sb-ease);
  }

  #filterForm input[type="checkbox"]:checked {
    background:   var(--sb-accent);
    border-color: var(--sb-accent);
  }

  #filterForm input[type="checkbox"]:checked::after {
    content:       '';
    position:      absolute;
    top:           3.5px;
    left:          2.5px;
    width:         9px;
    height:        5.5px;
    border-left:   2px solid #fff;
    border-bottom: 2px solid #fff;
    transform:     rotate(-45deg);
  }

  #filterForm input[type="checkbox"]:disabled {
    background:   var(--sb-surface);
    border-color: var(--sb-border);
    cursor:       not-allowed;
  }

  /* ── Dual Range Slider ── */
  .dual-range-wrap {
    position:      relative;
    height:        20px;
    margin:        16px 0 10px;
  }

  /* Shared track behind both thumbs */
  .price-track {
    position:      absolute;
    top:           50%;
    left:          0;
    right:         0;
    height:        4px;
    transform:     translateY(-50%);
    border-radius: 2px;
    background:    var(--sb-border);
    pointer-events: none;
  }

  .price-track-fill {
    position:      absolute;
    height:        100%;
    border-radius: 2px;
    background:    var(--sb-accent);
  }

  /* Both inputs are absolutely stacked over the track */
  #priceMin,
  #priceMax {
    position:           absolute;
    top:                0;
    left:               -9px;
    width:              calc(100% + 18px);
    height:             100%;
    appearance:         none;
    -webkit-appearance: none;
    background:         transparent;
    outline:            none;
    border:             none;
    padding:            0;
    margin:             0;
    pointer-events:     none;
  }

  /* Only the thumbs receive pointer events */
  #priceMin::-webkit-slider-thumb,
  #priceMax::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:              19px;
    height:             19px;
    border-radius:      50%;
    background:         var(--sb-accent);
    border:             3px solid #fff;
    box-shadow:         0 1px 5px rgba(0,0,0,0.22);
    cursor:             pointer;
    pointer-events:     all;
    transition:         transform var(--sb-ease);
  }

  #priceMin::-webkit-slider-thumb:hover,
  #priceMax::-webkit-slider-thumb:hover {
    transform: scale(1.15);
  }

  #priceMin::-webkit-slider-runnable-track,
  #priceMax::-webkit-slider-runnable-track {
    background: transparent;
  }

  #priceMin::-moz-range-thumb,
  #priceMax::-moz-range-thumb {
    width:          19px;
    height:         19px;
    border-radius:  50%;
    background:     var(--sb-accent);
    border:         3px solid #fff;
    box-shadow:     0 1px 5px rgba(0,0,0,0.22);
    cursor:         pointer;
    pointer-events: all;
  }

  #priceMin::-moz-range-track,
  #priceMax::-moz-range-track {
    background: transparent;
  }

  /* Price label row ── */
  #filterForm > div > div {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             6px;
    margin-top:      2px;
  }

  #minPriceLabel,
  #maxPriceLabel {
    font-size:      12px;
    font-weight:    500;
    color:          var(--sb-text);
    background:     var(--sb-surface);
    border:         1px solid var(--sb-border);
    border-radius:  var(--sb-radius-sm);
    padding:        4px 0;
    width:          90px;
    min-width:      90px;
    max-width:      90px;
    text-align:     center;
    white-space:    nowrap;
    overflow:       hidden;
    font-variant-numeric: tabular-nums;
  }




  /* from category-test  */

 /* body { background-color:#f5f5f7; } */
  .bxol { width:100%; max-width:1400px; margin:0 auto; display:grid; gap:16px; }

  .bxol.tnol { grid-template-columns:repeat(auto-fill,minmax(123px,1fr)); gap:8px; }
  .bxol.smol { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
  .bxol.mdol { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
  .bxol.nlol { grid-template-columns:repeat(auto-fill,minmax(225px,1fr)); }

  .crdol { background:#ffffff; border-radius:8px; overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,0.04); position:relative; display:flex; flex-direction:column; padding:10px; transition:transform 0.2s ease,box-shadow 0.2s ease; }
  .crdol:hover { transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,0.08); }
  .imgol { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; }
  
  .titol { font-size:0.95rem; font-weight:600; color:#1d1d1f; margin:8px 0 4px 0; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  
  .sbtol { font-size:0.65rem; font-weight:500; color:#333333; margin:0; line-height:1.2; display:-webkit-box; -webkit-line-clamp:1; line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-align: center; }

  .subMR { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; margin-top: auto; }
  .sutol { font-size:0.8rem; color:#bf4800; margin-bottom: 0; text-align: right; }
  
  .prcRw { display:flex; align-items:center; padding:6px; gap:2px; border-top:1px solid #e8e8e8; }
  .prcBx { font-size:0.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  
  .prcBx.cur { font-weight:700; color:#1d1d1f; text-align:left; flex:1; }
  .prcBx.dsc { font-weight:600; color:#34c759; background-color:#eafaf1; padding:1px 3px; border-radius:3px; font-size:0.75rem; flex-shrink:0; }
  .prcBx.mrp { color:#86868b; text-decoration:line-through; text-align:right; font-size:0.75rem; flex-shrink:0; margin-left:13px; }

  .bxol.tnol .titol { font-size:0.75rem; margin:4px 0 2px 0; }
  .bxol.tnol .sutol,.bxol.tnol .prcBx { font-size:0.65rem; }
  .bxol.tnol .prcRw { flex-direction:column; align-items:flex-start; background:transparent; padding:0; }
  .bxol.tnol .prcBx.cur,.bxol.tnol .prcBx.mrp { text-align:left; }
  .bxol.tnol .subMR { margin-bottom: 4px; }

  .ofrTag { position:absolute; top: 0px; right: 0px; background-color:#ff3b30; font-size: 0.5rem; line-height:1; white-space: nowrap; font-weight:500; padding:4px 10px; color:#ffffff; z-index:10; border-bottom-left-radius:10px; }
  .tnol .ofrTag { display: none !important;}
  .smol .ofrTag { font-size:0.6rem !important; }
  .mdol .ofrTag { font-size:0.65rem !important; }
  .nlol .ofrTag { font-size:0.7rem !important; }

  .strrg { position: relative; display: inline-flex; align-items: center; font-family: system-ui, sans-serif; font-weight: 500; color: #86868b; flex-shrink: 0; user-select: none; gap: 4px; }
  
  .strbx { position: relative; display: inline-block; font-family: 'Arial', 'Helvetica', sans-serif; line-height: 1; letter-spacing: 1px; color: #e5e5ea; }
  .strbxFl { position: absolute; top: 0; left: 0; height: 100%; width: 0%; overflow: hidden; color: #ffb400; }

  .smol .strrg { font-size: 0.75rem; }
  .smol .strbx { font-size: 0.75rem; }
  
  .mdol .strrg { font-size: 0.8rem; }
  .mdol .strbx { font-size: 0.85rem; }
  
  .nlol .strrg { font-size: 0.85rem; }
  .nlol .strbx { font-size: 0.95rem; }

  .tnol .strrg { display: none !important; }
  .strrg span { font-size: 0.65rem; color: #86868b; } 


  .bxol .tac { text-align: center !important; } /* text align center */
  .bxol .tar { text-align: right !important; } /* text align right */
  .bxol .tal { text-align: left !important; } /* text align left */
  .bxol .ln1 { display: -webkit-box; -webkit-box-orient: vertical; white-space: nowrap; overflow: hidden; line-clamp: 1; -webkit-line-clamp: 1; overflow: hidden; } /* text one line only */
  .bxol .ln2 { display: -webkit-box; -webkit-box-orient: vertical; white-space: nowrap; overflow: hidden; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; } /* text two lines only */
  .bxol .ln3 { display: -webkit-box; -webkit-box-orient: vertical; white-space: nowrap; overflow: hidden; line-clamp: 3; -webkit-line-clamp: 3; overflow: hidden; } /* text three lines only */
  .bxol .imgc { object-fit:contain !important;  } /* image contain mode for product image centering by height and width */