:root {
    --pBg:#efefef;/* 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(--sansFm),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; }

.mnf{ font-family: var(--monoFm),ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace !important;}


h1,h2,h3,h4,h5,h6 { font-weight:700; line-height:1.2; padding:25px 0; color:var(--pTx); }

h1 { font-size:1.7rem; }
h2 { font-size:1.5rem; }
h3 { font-size:1.3rem; }
h4 { font-size:1.2rem; }




.hSep { width:100%; border-bottom:1px solid var(--hSpBdr); margin:27px 0 17px 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 13px; }
.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; }






.mnuIcon {background: transparent;color: var(--pTx);border: none;padding: 2px 15px;font-weight: 600;cursor: pointer;font-size: 1rem;}











/* 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) {
  .tc,.tp { padding:0 25px; }

    .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; }
    .sbF { margin-right: 25px; }

}








.mcF {
  display: flex;flex-wrap: wrap;max-width: 1400px;
  width: 100%;
  margin: 25px auto 0 auto;
  min-height: 90vh;
}

.sbF {
  flex: 0 0 230px; 
}

.mdF {
  flex: 1; min-width: 0;
  padding: 0;
}
.sbF { position:fixed; top:0; left:0; height: 100vh; background-color:#ffffff; overflow-y:auto; z-index:1001; transform:translateX(-100%); transition:transform .3s ease; }
.sbF.open { transform:translateX(0); }
.sbOverlay { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s ease; z-index:1000; }
.sbOverlay.show { opacity:1; visibility:visible; }
.sbToggle {width:30px; height:30px; border:0; color:color-mix(in srgb, var(--pAs) 80%, black 20%) !important; background:transparent; cursor:pointer;}
.sbClose { position:absolute; top:10px; right:10px; width:36px; height:36px; border:0; background:transparent; cursor:pointer; font-size:20px; }
@media (min-width:768px) {
    .sbF { position:static; width:auto; height:auto !important; background-color: transparent; transform:none; transition:none; box-shadow:none; margin-left: 20px; }
    .sbToggle,.sbClose,.sbOverlay { display:none; }
    #filterSidebar {border:1px solid var(--sb-border) !important;border-radius:var(--sb-radius) !important; }

}
/* side bar main style end */





.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:        #9d9d9d;
    --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:         0px;
    border-radius:  0;
    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-of-type {
    border-bottom:  none !important;
    padding-bottom: 0 !important;
    /* margin-bottom:  0 !important; */
  }

  /* 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:              10px;
    height:             10px;
    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:          10px;
    height:         10px;
    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:20px; }

.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)); }

/* .bxol.mdol a,.bxol.tnol a,.bxol.smol a,.bxol.nlol a { display: flex; height: 100%; text-decoration: none; color: inherit;} */


.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; height: 100%;width: 100%;}
.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.8rem; font-weight:500; color:#1d1d1f; margin:12px 0 8px 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:#509300; margin-bottom: 0; text-align: right; }
.sutol.outs { color:#bf4800; }



.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:500; color:#1d1d1f; text-align:left; flex:1; }
.prcBx.dsc { font-weight:500; 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:#b55651; 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 */

.jccntr{ justify-content: center; }

.jccntr a>p{ font-size: 0.9rem !important; color: #0d66b9 !important; text-align: center !important; }





/* ── Cat Banner ── */

  :root {
    --grad-1:#fd7125;
    --grad-2:#ff4d6d;
    --grad-3:#8b3dff;
    --grad-4:#1380fd;
    --panel:#ffffff;
    --ink:#ffffff;
    --ink-soft:rgba(255,255,255,0.82);
    --radius:10px; }
/* * { box-sizing:border-box; } */
/* body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 16px; background:#f3f1ee; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; } */
.cat-banner { position:relative; width:100%; max-width:1200px; display:flex; align-items:center; gap:clamp(10px,4vw,25px); padding:clamp(14px,3vw,15px); border-radius:var(--radius); overflow:hidden; isolation:isolate; background:radial-gradient(120% 160% at 0% 0%,var(--grad-1) 0%,transparent 55%),radial-gradient(120% 160% at 100% 100%,var(--grad-4) 0%,transparent 55%),linear-gradient(115deg,var(--grad-1) 0%,var(--grad-2) 35%,var(--grad-3) 68%,var(--grad-4) 100%); box-shadow:0 10px 30px -12px rgba(60,20,90,0.35); }
.cat-banner::before { content:""; position:absolute; inset:0; z-index:0; opacity:0.14; background-image:radial-gradient(circle,#fff 1.5px,transparent 1.5px); background-size:22px 22px; mask-image:linear-gradient(115deg,#000 0%,transparent 60%); -webkit-mask-image:linear-gradient(115deg,#000 0%,transparent 60%); }
.cat-banner::after { content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.35),transparent 70%); z-index:0; pointer-events:none; }
.cat-img-wrap { display:none;/* hidden below 450px — text-only on mobile */position:relative; z-index:1; flex:0 0 auto; width:clamp(72px,18vw,120px); height:clamp(72px,18vw,120px); border-radius:var(--radius); background:var(--panel); padding:4px; align-items:center; justify-content:center; box-shadow:0 6px 16px -6px rgba(0,0,0,0.35); }
@media (min-width:450px) {
    .cat-img-wrap { display:flex; }
}
.cat-img-wrap img { width:100%; height:100%; object-fit:contain; border-radius:4px; display:block; }
.cat-info { position:relative; z-index:1; min-width:0; flex:1 1 auto; color:var(--ink); }
.cat-title { margin:0 0 6px 0; font-size:clamp(1.05rem,2.6vw,1.5rem); font-weight:700; line-height:1.25; letter-spacing:-0.01em; text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color : white; }
.cat-count { display:inline-flex; align-items:center; gap:6px; font-size:clamp(0.78rem,1.8vw,0.9rem); font-weight:600; color:var(--ink-soft); background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.3); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:5px 12px; border-radius:999px; white-space:nowrap; }
.cat-count .dot { width:6px; height:6px; border-radius:50%; background:#ffffff; flex-shrink:0; }
@media (max-width:340px) {
    .cat-title { font-size:0.95rem; }
}

/*-- Cat Banner Alt --*/

.cbnr { position:relative; width:100%; height:200px; border-radius:12px 12px 0 0; overflow:hidden; background:var(--bxBg);/* shows through briefly while loading, and if the image fails */}
.cbnrImg { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:opacity 0.2s; }
/* If the image 404s, hide the broken-image icon/alt box entirely
   and let the fallback background (below) carry the card instead */
.cbnrImg--broken { opacity:0; }
/* Fallback look when there's no working photo: a themed dark gradient
   standing in for the missing image, so the card never looks "empty" */
.cbnr--fallback { background:linear-gradient(135deg,#3a3a3a 0%,#1c1b18 100%); }
.cbnrOverlay { position: relative;
  display: block;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.05);
   }
.cbnrTitle { margin:0; color:#000000; font-size:clamp(0.95rem,2.2vw,1.25rem); font-weight:700; line-height:1.25;  padding: 10px 0;}
.cbnrMeta { display:inline-flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:600; color:#000000;  }
.cbnrDot { width:6px; height:6px; border-radius:50%; background:#000000; flex-shrink:0; }
/* ── Cat Banner End ── */

/* ── Result Bar ── */
.resultBar { width:100%; max-width:1400px;/* matches .tc / .tp container width */margin:20px auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:12px 16px; background:var(--bxBg);background: color-mix(in srgb, var(--bxBg) 97%, black 3%); border:var(--bxBdrSz) solid var(--bxBdrC); border-radius:12px; /*box-shadow:var(--bxSw);*/ transition:box-shadow 0.2s; }
.resultBar:hover { /*box-shadow:var(--bxSwH);*/ border-color:var(--bxBdrHC); }
#product-count { font-size:0.9rem; color:var(--sTx); white-space:nowrap; }
.sortWrap { display:flex; align-items:center; gap:8px; margin-left:auto; }
.sortWrap label { font-size:0.9rem; color:var(--pTx); white-space:nowrap; }
#sortBy { padding:6px 10px; font-size:0.9rem; /*font-family:inherit;*/ color:var(--pTx); background:var(--bxBg); border:var(--bxBdrSz) solid var(--bxBdrC); border-radius:8px; cursor:pointer; outline:none; transition:border-color 0.15s; }
#sortBy:hover { border-color:var(--bxBdrHC); }
#sortBy:focus { border-color:var(--sAs);/* site's secondary accent */}
@media (max-width:480px) {
    .resultBar { flex-direction:column; align-items:stretch; gap:10px; }
    .sortWrap { margin-left:0; justify-content:space-between; }
    #sortBy { flex:1; }
}
/* ── Result Bar End ── */


/* ── Pagination ── */
.pgnWrap { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin:20px 0; }
.pgnBtn { min-width:36px; height:36px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; font-family:inherit; font-size:0.9rem; font-weight:500; color:var(--pTx); background:var(--bxBg); border:var(--bxBdrSz) solid var(--bxBdrC); border-radius:8px; cursor:pointer; transition:background 0.15s,border-color 0.15s,color 0.15s; }
.pgnBtn:hover { border-color:var(--bxBdrHC); box-shadow:var(--bxSw); }
.pgnBtn.is-active { background:var(--pAs); border-color:var(--pAs); color:#ffffff; font-weight:700; cursor:default; }
.pgnBtn.is-active:hover { box-shadow:none; }
.pgnBtn:disabled { opacity:0.4; cursor:not-allowed; }
@media (max-width:480px) {
    .pgnBtn { min-width:32px; height:32px; font-size:0.85rem; padding:0 8px; }
}
/* ── Pagination End ── */