:root {
    --pBg:#efefef;/* Primary Background */
    --sBg:#ffffff;/* Secondary 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 */
    --g1: #eeeeee; /* Grey 1 */
    --g2: #cccccc; /* Grey 2 */
    --g3: #999999; /* Grey 3 */
    --g4: #666666; /* Grey 4 */
    --g5: #333333; /* Grey 5 */
    --g6: #111111; /* Grey 6 */



    --qBg:#ffffff;
    --qBdrC:#d8d8d8;
    --qBtnBg:#f5f5f5;
    --qBtnBgH:#ebebeb;
    --qBtnBgA:#e0e0e0;
    --qTxt:#222222;
    --qDisabled:#c4c4c4;
    --qRad:8px;
  






}
[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; }

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

body.strPg { overflow-y:visible; overflow-x:visible; }


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

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

.pBg{ background-color:var(--pBg); }
.sBg{ background-color:var(--sBg); }


.hSep { width:100%; border-bottom:1px solid var(--hSpBdr); margin:27px 0 17px 0; padding:0 ; }
.hSep span { border-bottom:3px solid var(--pAs); line-height: 2rem; }
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; }

/* Account menu — the wrapper carries the row spacing so the button inside keeps .mIcon sizing
.acctMnu { position:relative; display:inline-flex; align-items:center; margin-left:10px; }
.hb4 div .acctMnu .mIcon { margin-left:0; }
/* Chrome reset only — font-family must stay with .mIcon or the GMS36 ligature renders as text */
/* .acctBtn { background:none; border:0; padding:0; font:inherit; line-height:1; } */
/* .acctBtn { -webkit-appearance:none; appearance:none; background:none; border:0; padding:0; line-height:1; } */ 
/* ---- */
/* Account menu — the wrapper carries the row spacing so the button inside keeps .mIcon sizing */
.acctMnu { position:relative; display:inline-flex; align-items:center; margin-left:10px; }
.hb4 div .acctMnu .mIcon { margin-left:0; }
/* :first-child on line 131 targets .mIcon, which .acctMnu (a span) can never match — without this the account button keeps 10px when permissions hide every other icon in the row. */
.hb4 div .acctMnu:first-child { margin-left:0; }
/* Chrome reset ONLY. Never add `font:inherit` — it is a shorthand, so it resets font-family too, wiping .mIcon's 'GMS36' and rendering the literal text "person_4" instead of the glyph. */
/* Opt out of the global button skin at :999 — it also brings border-radius + box-shadow, which paint a rounded halo around the glyph even with background/border cleared. */
.acctBtn { -webkit-appearance:none; appearance:none; background:none; border:0; border-radius:0; padding:0; line-height:1; box-shadow:none; transition:none; }
/* button:hover/:active are (0,1,1) and outrank a bare .acctBtn (0,1,0) — these need the pseudo-class to win. */
.acctBtn:hover { box-shadow:none; }
.acctBtn:active { transform:none; }

/* --------- */
.acctDrop { position:absolute; top:100%; right:0; margin-top:10px; z-index:1200; min-width:170px; display:flex; flex-direction:column; background:var(--sBg); border:1px solid var(--hSpBdr); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,0.12); overflow:hidden; }
.acctDrop[hidden] { display:none; }
.acctDrop .acctHi { padding:10px 14px; border-bottom:1px solid var(--hSpBdr); white-space:nowrap; }
.acctDrop .acctName { display:block; font-size:0.8rem; font-weight:600; color:var(--pTx); }
/* Capped and clipped — a long address would otherwise stretch the whole dropdown */
.acctDrop .acctMail { display:block; margin-top:2px; font-size:0.72rem; color:var(--sTx); max-width:200px; overflow:hidden; text-overflow:ellipsis; }
.acctDrop a { padding:10px 14px; font-size:0.9rem; color:var(--pTx); text-decoration:none; white-space:nowrap; }
.acctDrop a:hover { background:var(--pBg); }



.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';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    position: relative;
    top: 0.15rem;
}

/* Inline variant — scales with the surrounding text instead of the fixed 1.5rem default.
   Use alongside .mIcon (class="mIcon mIcon-il") for icons embedded in body text,
   badges, buttons, toasts and headings; leave plain .mIcon for standalone nav/UI glyphs. */
.mIcon-il { font-size: 1em; }

.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 */


.sb { width:100%; height:auto; background-color:var(--sBg); box-shadow:rgba(0,0,0,0.62) 0px 5px 30px -20px; border-radius:12px; margin:25px auto; padding:20px; min-height: calc(80vh - 50px);}


@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;}
    .acctMnu { margin-left:15px; }
    .hb4 div .acctMnu .mIcon { margin-left:0; }
    .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; }
    .sb { max-width:1400px; margin:25px auto; padding:20px; }
    .sbF { margin-right: 25px; }

}








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

.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 6px 0 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:#0098e3; 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; }

.acb .mIcon { font-size: 1.6rem !important; color: #0098e3 !important; top: 3px !important; }
/* The cart icon is role=button tabindex=0 inside .prcRw, so a focus ring drawn round it landed on .prcRw's border-top and read as a blue border. :focus-visible keeps the ring for keyboard users only. */
.acb .mIcon:focus { outline: none; }
.acb .mIcon:focus-visible { outline: 2px solid var(--sAs); outline-offset: 2px; border-radius: 4px; }
/* Same treatment for the card link, whose default ring otherwise shows when focus is restored on Back. */
.bxol > a:focus { outline: none; }
.bxol > a:focus-visible { outline: 2px solid var(--sAs); outline-offset: 2px; border-radius: 8px; }



/* ── 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 ── */




/* ── Image Viewer ── */
/* Component-only sizing tokens — no equivalents in the site sheet, kept local.
   Everything else (colors/borders/shadows) below pulls from style.css's :root. */
:root {
    --thumb-size: clamp(50px, 9vw, 100px);
    --arrow-size: clamp(25px, 3vw, 32px);
    --viewer-pad: clamp(10px, 1.5vw, 15px);
}

/* Scoped reset — avoids touching box-sizing site-wide */
.viewer, .viewer *, .lightbox, .lightbox * { box-sizing:border-box; }

.viewer { max-width:1000px; margin:auto; background:var(--bxBg); /*border:var(--bxBdrSz) solid var(--bxBdrC); box-shadow:var(--bxSw);*/ padding:var(--viewer-pad); }

/* Main image */
.main { position:relative; overflow:hidden; min-width:240px; /*background:var(--g1);*/ }
.main img { display:block; width:100%; height:auto; cursor:zoom-in; user-select:none; }
/* When .viewer sits inside a flex column (e.g. .clImg in the product-details
   split layout), its own max-width and .main's min-width can force it wider
   than the column, bleeding past the parent's padding. Pin it to the column. */
.clImg .viewer { width:100%; max-width:100%; margin:0; }
.clImg .main { min-width:0; width:100%; }
.clImg .thumbs { max-width:100%; }
/* Shared control style (arrows + close) — no background pill; text-shadow keeps
   them legible over any photo or the lightbox backdrop. */
.circleBtn { position:absolute; display:flex; align-items:center; justify-content:center;
    color:#fff; text-decoration:none; font-weight:bold; cursor:pointer; user-select:none;
    text-shadow:0 1px 4px rgba(0,0,0,.11), 0 0 8px rgba(0,0,0,.4); transition:transform .2s, opacity .25s; }

/* Overlay arrows on main image — auto-hidden until hover/touch */
.arrow { top:50%; transform:translateY(-50%); width:var(--arrow-size); height:var(--arrow-size);
    font-size:34px; z-index:20; opacity:0; pointer-events:none; }
.main:hover .arrow, .main.touch-active .arrow { opacity:1; pointer-events:auto; }
.arrow:hover { transform:translateY(-50%) scale(1.15); }
.prev { left:10px; }
.next { right:10px; }

/* Thumbnails — scrollbar hidden until hover/touch */
.thumbs { display:flex; gap:10px; margin:12px 0; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch; padding-bottom:15px; scrollbar-width:none; -ms-overflow-style:none; }
/* .thumbs::-webkit-scrollbar { height:8px; }
.thumbs::-webkit-scrollbar-thumb { background:transparent; border-radius:20px; transition:background .25s; }
.thumbs::-webkit-scrollbar-track { background:transparent; } */
.thumbs:hover, .thumbs.scroll-active { scrollbar-width:thin; scrollbar-color:var(--g2) var(--g1); }
.thumbs:hover::-webkit-scrollbar-thumb, .thumbs.scroll-active::-webkit-scrollbar-thumb { background:var(--g2); }
.thumbs:hover::-webkit-scrollbar-track, .thumbs.scroll-active::-webkit-scrollbar-track { background:var(--g1); }
.thumb { width:var(--thumb-size); height:var(--thumb-size); flex:0 0 auto; border:2px solid transparent;
    cursor:pointer; background-repeat:no-repeat; transition:.2s; border-radius: 10px;}
.thumb.thumb-linked { background-color:var(--g1); }
/* .thumb:hover { transform:scale(1.05); } */
.thumb.active { border-color:var(--g2); }


/************ product details left image right text ************/
.pDtls { display:flex; flex-direction:column; gap:20px; }
.clImg { position:static; width:100%; }
.clDtl { background:#fff; min-width:0; }
.clImg img { width:100%; display:block; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,0.15); }
@media (min-width:600px) {
    .pDtls { flex-direction:row; gap:40px; align-items:flex-start; }
    .clImg { flex:0 0 calc(55% - 20px); max-width:calc(55% - 20px); min-width:0; position:sticky; top:20px; align-self:flex-start; width:auto; }
    .clDtl { flex:0 0 calc(45% - 20px); max-width:calc(45% - 20px); min-width:0; overflow-x:hidden; }
}






/* Lightbox — deliberately stays near-black regardless of theme */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.96); display:none; align-items:center;
    justify-content:center; z-index:99999; }
.lightbox.open { display:flex; }
.lightbox img { max-width:95vw; max-height:92vh; object-fit:contain; }

.close { top:10px; right:10px; width:44px; height:44px; font-size:32px; }
.close:hover { transform:scale(1.15); }
.lbArrow { top:50%; transform:translateY(-50%); width:54px; height:54px; font-size:46px; }
.lbArrow:hover { transform:translateY(-50%) scale(1.15); }
.lbPrev { left:10px; }
.lbNext { right:10px; }

/* ── Image Viewer End ── */


/* ── Product Info Card ── */
/* ── Price block ─────────────────────────────────────────── */
.prcBlk { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 16px 0; }
.prcNow p { font-size:1.6rem; font-weight:700; color:var(--pRs); margin:0; letter-spacing:-0.01em; }
.prcMrp p { font-size:0.95rem; color:var(--sRs); text-decoration:line-through; margin:0; }
.prcDis p { font-size:0.78rem; font-weight:600; color:var(--disC); background:color-mix(in srgb, var(--disC) 12%, transparent); padding:3px 8px; border-radius:5px; margin:0; }
.prcSav p { font-size:0.82rem; font-weight:500; color:var(--disC); margin:0; }

/* ── Bought recently ─────────────────────────────────────── */
.byRc { margin:0 0 14px 0; }
.byRcItm p { font-size:0.8rem; color:var(--sTx); margin:0; display:flex; align-items:center; gap:6px; }
.byRcItm p::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--disC); flex-shrink:0; }

/* ── Rating / brand ──────────────────────────────────────── */
.rtWrp { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 18px 0; padding-bottom:16px; border-bottom:1px solid var(--hSpBdr); }
.rtStr span { display:inline-flex; align-items:center; font-size:0.82rem; font-weight:600; color:#ffffff; background:var(--disC); padding:3px 9px; border-radius:5px; }
.rtCntWrp a { font-size:0.8rem; color:var(--sTx); text-decoration:underline; text-underline-offset:2px; }
.rtCntWrp a:hover { color:var(--sAs); }
.brdWrp { margin-left:auto; }
.brdWrp a { font-size:0.78rem; color:var(--sAs); font-weight:500; border:var(--bxBdrSz) solid var(--bxBdrC); padding:5px 12px; border-radius:2px; transition:border-color .15s,background .15s; }
.brdWrp a:hover { border-color:var(--sAs); background:color-mix(in srgb, var(--sAs) 6%, transparent); }

.rtWrp .write-review a{font-size:0.85rem}

/* ── Variant options ─────────────────────────────────────── */



/* Stack variant groups vertically with clean horizontal separators */
.vrWrp { display:flex; flex-direction:column; gap:16px; margin:20px 0; }
.vrGrp { display:flex; flex-direction:column; gap:8px; width:100%; }
/* Horizontal separator between groups (handles 1, 2, 3+ items automatically) */
.vrGrp:not(:last-child) { padding-bottom:5px; /*border-bottom:var(--bxBdrSz,1px) solid var(--bxBdrC,#e2e8f0);*/ }
.vrLbl p { font-size:0.78rem; font-weight:700; color:var(--sAs,#64748b); text-transform:uppercase; letter-spacing:0.06em; margin:0; }
/* Always force options to render horizontally and fold/wrap when needed */
.vrOpts { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px; }
.vrBtn { padding:6px 12px; font-size:0.72rem; font-family:inherit; color:#333333cf; background:var(--bxBg); border:2px solid var(--bxBdrC); border-radius:6px; cursor:pointer; transition:border-color .15s,color .15s,background .15s; box-shadow:none; }
.vrBtn.selc { background:#e2ffd8; border-color: #96da02; font-weight:600; }
.vrBtn.aval { background:#e7f5ff; border-color: #80c9ff; font-weight:600; }
.vrBtn.dsbl { opacity:0.8; cursor:not-allowed; text-decoration:line-through;border-style: dashed;color: #333333cf;background: #e9e9e9;border-color: #a7a7a79e; }




/* ── Action buttons ──────────────────────────────────────── */
.actRw { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0; }
.actItm { flex:1 1 auto;/*flex:1 1 100%;*/ }
.actBtn { width:100%; padding:13px 18px; font-size:0.9rem; font-weight:600; font-family:inherit; border-radius:8px; cursor:pointer; border:var(--bxBdrSz) solid transparent; transition:transform .15s,box-shadow .15s,border-color .15s,color .15s; white-space:nowrap;  }
.actBtn:active { transform:scale(0.97); }
.buyNow { background:var(--pAs); color:#ffffff; box-shadow:0 3px 10px color-mix(in srgb, var(--pAs) 35%, transparent); }
.buyNow:hover { box-shadow:0 5px 14px color-mix(in srgb, var(--pAs) 45%, transparent); }
.addCart { background:var(--sAs); color:#ffffff; box-shadow:0 3px 10px color-mix(in srgb, var(--sAs) 30%, transparent); }
.addCart:hover { box-shadow:0 5px 14px color-mix(in srgb, var(--sAs) 40%, transparent); }

.wishItm{margin-left: auto; transition: border-color .15s,color .15s,background .15s; cursor:pointer;}
.wishI { fill:#EA3323; overflow:visible; transform-origin:center; }
.wishI .filled { opacity:0; transition:opacity 0.15s ease; }
.wishI:active .filled { opacity:1; animation:favPop 0.35s ease; transform-origin:center; }
.wishI.is-favorited .filled { opacity:1; }
@keyframes favPop { 0% { transform:scale(1); }35% { transform:scale(1.3); }60% { transform:scale(0.9); }100% { transform:scale(1); }}




@media (min-width:481px) {
    /* .actRw { flex-wrap:nowrap; } */
    .actItm { flex:1 1 auto; }
    /* .wishI { width:auto; padding:13px 20px; } */
}

/* ── COD / refund info ───────────────────────────────────── */
.infRw { display:flex; flex-wrap:wrap; gap:10px 22px; padding-top:16px; border-top:1px solid var(--hSpBdr); }
.infItm p { font-size:0.8rem; color:var(--g4); margin:0; display:flex; align-items:center; gap:6px; }
.infItm p::before { content:"\2713"; color:var(--disC); font-weight:700; }



/* ── Product Info Card End ── */

/* ── Breadcrumbs ── */
    .brcb { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; font-size:13px; line-height:1.4; margin:0 0 15px 0; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
    .brcb::-webkit-scrollbar { height:3px; }
    .brcb a { text-decoration:none; transition:color 0.15s ease; color:var(--g5) !important; white-space:nowrap; flex-shrink:0; }
    .brcb a:hover { text-decoration:underline; }
    .brcb>span { display:flex; align-items:center; flex-shrink:0; white-space:nowrap; }
    .brcb>span::before { content:"\276F"; margin:0 8px 0 2px; color:var(--g5); flex-shrink:0; }
    .brcb>span:last-child { white-space:nowrap; }
    .brcb i { vertical-align:baseline; font-size:17px; top:1px; transition:transform 0.3s ease; }
    .brcb a:hover i { transform:scale(1.15); }
    @media (min-width:600px) {
        .brcb { flex-wrap:wrap; overflow-x:visible; white-space:normal; }
        .brcb a,.brcb>span,.brcb>span:last-child { white-space:normal; }
    }
/* ── Breadcrumbs End ── */



/* varient list */

/* :root {
    --txtMain:#1c1c26;
    --txtMut:#6b6b78;
    --priceClr:#c2740a;
    --okBg:#e3f6ea;
    --okTxt:#1e8a4c;
    --lowBg:#fdf3d8;
    --lowTxt:#a06d00;
    --outBg:#fbe6e6;
    --outTxt:#c23b3b;
    --r1:10px;
    --r2:999px; }
.vrl { margin:0 auto; background:#fff; border:0; overflow:hidden; }
.vrl-head { display:none; }
.vrl-row { display:grid; grid-template-columns:0px 1fr auto; grid-template-rows:auto auto auto; column-gap:14px; align-items:start; padding:14px 0; border-bottom:1px solid var(--bxBdrC); }
.vrl-row:last-child { border-bottom:none; }
.vrl-img { grid-column:1; grid-row:1 / -1; align-self:start; display:none; }
.vrl-img img { display:block; width:64px; height:64px; object-fit:contain; border:1px solid var(--bxBdrC); border-radius:8px; background:#fff; padding:4px; }
.variant1 { grid-column:2; grid-row:1; font-weight:600; font-size:.95rem; color:var(--txtMain); }
.variant2 { grid-column:2; grid-row:2; font-size:.82rem; color:var(--txtMut); }
.variant3 { grid-column:2; grid-row:3; font-size:.82rem; color:var(--txtMut); }
.vrl-price { grid-column:3; grid-row:1; justify-self:end; font-weight:700; font-size:.95rem; color:var(--priceClr); white-space:nowrap; }
.vrl-btn { grid-column:3; grid-row:3; justify-self:end; align-self:end; border:none; cursor:pointer; background:var(--pAs); color:#fff; font-weight:600; font-size:.82rem; padding:8px 18px; border-radius:var(--r2); white-space:nowrap; transition:background .15s ease,transform .1s ease; }
.vrl-btn:hover { background:var(--sAs); }
.vrl-btn:active { transform:scale(.97); }
.vrl-btn[disabled] { background:#e2e2e8; color:#9c9ca8; cursor:not-allowed; }
.vrl-stock { display:none; font-size:.7rem; font-weight:600; padding:3px 9px; border-radius:var(--r2); text-transform:capitalize; white-space:nowrap; }
.vrl-stock.is-in { background:var(--okBg); color:var(--okTxt); }
.vrl-stock.is-low { background:var(--lowBg); color:var(--lowTxt); }
.vrl-stock.is-out { background:var(--outBg); color:var(--outTxt); }
@media (min-width:350px) {
    .vrl-row { grid-template-columns:64px 1fr auto; }
    .vrl-img { display:flex; }
}
@media (min-width:760px) {
    .vrl { border:1px solid var(--bxBdrC); border-radius:var(--r1); }
    .vrl-head { display:grid; grid-template-columns:72px 1fr .85fr .75fr .8fr .9fr .9fr; padding:14px 16px; background:var(--g1); border-bottom:1px solid var(--bxBdrC); }
    .vrl-head span { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--txtMut); }
    .vrl-row { grid-template-columns:72px 1fr .85fr .75fr .8fr .9fr .9fr; grid-template-rows:auto; column-gap:0; align-items:center; padding:10px 16px; transition:background .12s ease; }
    .vrl-row:hover { background:color-mix(in srgb, var(--g1) 50%, white 50%); }
    .vrl-img { grid-column:1; grid-row:1; }
    .vrl-img img { width:48px; height:48px; }
    .variant1 { grid-column:2; grid-row:1; font-size:.9rem; color:var(--txtMain); }
    .variant2 { grid-column:3; grid-row:1; font-size:.85rem; color:var(--txtMain); }
    .variant3 { grid-column:4; grid-row:1; font-size:.85rem; color:var(--txtMain); }
    .vrl-price { grid-column:5; grid-row:1; justify-self:start; align-self:center; font-size:.9rem; }
    .vrl-stock { display:inline-block; grid-column:6; grid-row:1; justify-self:start; }
    .vrl-btn { grid-column:7; grid-row:1; justify-self:start; align-self:center; padding:7px 20px; }
} */



:root {
    --txtMain:#1c1c26;
    --txtMut:#6b6b78;
    --priceClr:#c2740a;
    --okBg:#e3f6ea;
    --okTxt:#1e8a4c;
    --lowBg:#fdf3d8;
    --lowTxt:#a06d00;
    --outBg:#fbe6e6;
    --outTxt:#c23b3b;
    --r1:10px;
    --r2:999px; }
.vrl { margin:0 auto; background:#fff; border:0; overflow:hidden; }
.vrl-head { display:none; }
.vrl-row { position:relative; display:grid; grid-template-columns:0px 1fr auto; grid-template-rows:auto auto auto; column-gap:14px; align-items:start; padding:14px 0; border-bottom:1px solid var(--bxBdrC); }
.vrl-row:last-child { border-bottom:none; }
.vrl-row-selected { background:var(--bxBg); }
.vrl-row-selected::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--pAs); }
.vrl-img { grid-column:1; grid-row:1 / -1; align-self:start; display:none; }
.vrl-img-el { display:block; width:64px; height:64px; object-fit:contain; border:1px solid var(--bxBdrC); border-radius:8px; background:#fff; padding:4px; }
.vrl-opt { grid-column:2; grid-row:1; font-weight:600; font-size:.95rem; color:var(--txtMain); }
.vrl-opt + .vrl-opt { grid-row:2; font-weight:400; font-size:.82rem; color:var(--txtMut); }
.vrl-opt + .vrl-opt + .vrl-opt { grid-row:3; }
.vrl-price { grid-column:3; grid-row:1; justify-self:end; }
.vrl-price-b { font-weight:700; font-size:.95rem; color:var(--priceClr); white-space:nowrap; }
.vrl-stock { display:none; }
.vrl-stock-b { font-size:.7rem; font-weight:600; padding:3px 9px; border-radius:var(--r2); text-transform:capitalize; white-space:nowrap; }
.vrl-stock-b.is-in { background:var(--okBg); color:var(--okTxt); }
.vrl-stock-b.is-low { background:var(--lowBg); color:var(--lowTxt); }
.vrl-stock-b.is-out { background:var(--outBg); color:var(--outTxt); }
.vrl-act { grid-column:3; grid-row:3; justify-self:end; align-self:end; }
.vrl-btn { border:none; cursor:pointer; background:var(--pAs); color:#fff; font-weight:600; font-size:.82rem; padding:8px 18px; border-radius:var(--r2); white-space:nowrap; transition:background .15s ease,transform .1s ease; }
.vrl-btn:hover { background:var(--sAs); }
.vrl-btn:active { transform:scale(.97); }
.vrl-btn[disabled] { background:#e2e2e8; color:#9c9ca8; cursor:not-allowed; }
@media (min-width:350px) {
    .vrl-row { grid-template-columns:64px 1fr auto; }
    .vrl-img { display:flex; }
}
@media (min-width:760px) {
    .vrl { border:1px solid var(--bxBdrC); border-radius:var(--r1); }
    .vrl { display:table; width:100%; table-layout:fixed; }
    .vrl-head { display:table-row; background:var(--g1); }
    .vrl-head span { display:table-cell; padding:14px 16px; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--txtMut); border-bottom:1px solid var(--bxBdrC); white-space:nowrap; text-align: center;}
    .vrl-head span:first-child { width:72px; }
    #variantCombinationsTableBody { display:table-row-group; }
    .vrl-row { display:table-row; }
    .vrl-row:hover { background:color-mix(in srgb,var(--g1) 50%,white 50%); }
    .vrl-row-selected::before { content:none; }
    .vrl-row-selected .vrl-cell:first-child { box-shadow:inset 3px 0 0 var(--pAs); }
    .vrl-cell { display:table-cell; vertical-align:middle; padding:10px 16px; border-bottom:1px solid var(--bxBdrC); text-align: center;}
    .vrl-row:last-child .vrl-cell { border-bottom:none; }
    .vrl-img-el { width:48px; height:48px; }
    .vrl-opt,.vrl-opt + .vrl-opt { font-weight:400; font-size:.9rem; color:var(--txtMain); }
    .vrl-stock { display:table-cell; }
    .vrl-btn { padding:7px 20px; }
}




/* varient list end */

/* quantity selector */



.qtyWrp { display:inline-flex; align-items:stretch; width:auto !important; max-width:none !important; border:1px solid var(--qBdrC) !important; border-radius:var(--qRad) !important; overflow:hidden; background:var(--qBg) !important; box-shadow:none !important; height:44px !important; user-select:none; }
.qtyWrp button { width:36px !important; height:auto !important; margin:0 !important; padding:0 !important; border:none !important; border-radius:0 !important; background:var(--qBtnBg) !important; color:var(--qTxt) !important; font-size:20px !important; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:none !important; transform:none !important; transition:background .15s ease !important; }
.qtyWrp button:hover { background:var(--qBtnBgH) !important; box-shadow:none !important; }
.qtyWrp button:active { background:var(--qBtnBgA) !important; transform:none !important; }
.qtyWrp button:disabled { color:var(--qDisabled) !important; cursor:not-allowed; background:var(--qBtnBg) !important; box-shadow:none !important; }
.qtyWrp button.minus { border-right:1px solid var(--qBdrC) !important; }
.qtyWrp button.plus { border-left:1px solid var(--qBdrC) !important; }
.qtyWrp input[type="number"] { width:45px !important; max-width:52px !important; padding:0 !important; margin:0 !important; border:none !important; border-radius:0 !important; text-align:center; font-size:16px !important; color:var(--qTxt) !important; background:transparent !important; outline:none !important; box-shadow:none !important; transition:none !important; -moz-appearance:textfield !important; appearance:textfield !important; }
.qtyWrp input[type="number"]::-webkit-outer-spin-button,.qtyWrp input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none !important; margin:0 !important; }
.qtyWrp input[type="number"]:hover,.qtyWrp input[type="number"]:focus { border:none !important; outline:none !important; box-shadow:none !important; }
/* quantity selector end */

/* ── Product Info Card End ── */

/* ── shopping cart ── */

/* Shopping cart list — #upd is the base class/container */
#upd {
    --cartGap:10px;
    --cartPad:8px;
    --cartBdrC:#e2e2e2;
    --cartImgSz:60px;
    --cartNameFs:14px; display:flex; flex-direction:column; gap:var(--cartGap); }
/* Each immediate child = one cart entry */
#upd>div { display:flex; flex-direction:row; align-items:center; gap:var(--cartGap); padding:var(--cartPad); border-left: 5px solid #4ed2d245; background-color: whitesmoke; border-radius: 10px; }
/* Image */
#upd>div [aria-label="Image"] { flex:0 0 auto; }
#upd>div [aria-label="Image"] img { width:var(--cartImgSz); height:var(--cartImgSz); object-fit:cover; display:block; border-radius:3px; }
/* Product Name */
#upd>div [aria-label="Product Name"] { flex:1 1 auto; min-width:0; }
#upd>div [aria-label="Product Name"] a { font-size:13px; font-weight:400; text-decoration:none; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#656565;}
/* Price */
/* #upd>div [aria-label="Price"] { flex:0 0 auto; min-width:60px; text-align:right; } */
/* Quantity Control (.qtyWrp) — intentionally left unstyled, already handled elsewhere */
/* Total Price */
#upd>div [aria-label="Total Price"] { flex:0 0 auto; min-width:70px; text-align:right; font-weight:400;}
/* Remove button */
#upd>div [aria-label="Remove"] { flex:0 0 auto; min-width:32px; background:none; border:none; cursor:pointer;  color:var(--pAs);  transition:transform .15s ease;}
#upd>div [aria-label="Remove"] .mIcon {font-size:18px; line-height:1;}
#upd>div [aria-label="Unit Price"] { font-size:0.8rem; color:var(--txtMut); font-weight:400; color:#0aa060}
#upd>div [aria-label="Unit Price"] strong { font-weight:500;}

#upd>div [aria-label="Discount Percent"] { font-size:0.75rem; }

#upd>div [aria-label="Discount Percent"]::before { content:"["; margin-right:2px; }
#upd>div [aria-label="Discount Percent"]::after { content:"]"; margin-left:2px; }

 #upd>div.cart-freebie-row {border-left: 5px solid #f2c94c85;background-color: #fff8e1;border-radius: 10px;}
.cart-freebie-row [aria-label="Remove"] .mIcon {color: #c1c1c1;}
.cart-freebie-row [aria-label="Gift Note"] {color: #af00b5;}


/* ===== Responsive (mobile-first, min-width breakpoints) ===== */
@media (min-width:480px) {
    #upd {
        --cartGap:14px;
        --cartPad:10px; }
    #upd>div [aria-label="Product Name"] a { white-space:normal; }
}
@media (min-width:768px) {
    #upd>div { gap:20px; }
    #upd>div [aria-label="Product Name"] { flex:1 1 40%; }
    #upd>div [aria-label="Price"] { min-width:80px; }
    #upd>div [aria-label="Total Price"] { min-width:90px; }
}

/* ── shopping cart end ── */



/* ── Product Information Table ── */
.spTbl {
    --pAs:#1f2937;
    --sAs:#4c515b;
    --bxBg:#ffffff;
    --bxBdrC:#e5e7eb;
    --bxSw:1px;
    --g1:12px;
    --g2:16px; container-type:inline-size; container-name:spTbl; border:var(--bxSw) solid var(--bxBdrC); border-radius:8px; overflow:hidden; font-size: 14px;}
.spTbl>div { display:flex; flex-direction:column; background:var(--bxBg); }
.spTbl>div:not(:last-child) { border-bottom:var(--bxSw) solid var(--bxBdrC); }
.spTbl>div>div { flex:1 1 100%; padding:6px var(--g2); }
.spTbl>div>div:first-child { font-weight:325; color:var(--sAs); padding-bottom:2px; }
.spTbl>div>div:last-child { color:var(--sAs); text-align:left; }
@media (min-width:400px) {
    .spTbl>div { flex-direction:row; }
    .spTbl>div>div { flex:1 1 50%; padding:var(--g1) var(--g2); }
    .spTbl>div>div:first-child { padding-bottom:var(--g1); }
    .spTbl>div>div:last-child { text-align:left; }
}
@supports (container-type:inline-size) {
    @container spTbl (min-width:400px) {
        .spTbl>div { flex-direction:row; }
        .spTbl>div>div { flex:1 1 50%; padding:var(--g1) var(--g2); }
        .spTbl>div>div:first-child { padding-bottom:var(--g1); }
        .spTbl>div>div:last-child { text-align:left; }
    }
    @container spTbl (max-width:399.98px) {
        .spTbl>div { flex-direction:column; }
        .spTbl>div>div { flex:1 1 100%; padding:6px var(--g2); }
        .spTbl>div>div:first-child { padding-bottom:2px; }
        .spTbl>div>div:last-child { text-align:left; }
    }
}
/* ── Product Information Table End ── */






/* ── General Css ── */
.p0 { padding:0 !important; }
.p5 { padding:5px !important; }
.p10 { padding:10px !important; }
.p15 { padding:15px !important; }
.p20 { padding:20px !important; }
.p25 { padding:25px !important; }
.p30 { padding:30px !important; }
.p35 { padding:35px !important; }

.px0 { padding-left:0 !important; padding-right:0 !important; }
.px5 { padding:0 5px !important; }
.px10 { padding:0 10px !important; }
.px15 { padding:0 15px !important; }
.px20 { padding:0 20px !important; }
.px25 { padding:0 25px !important; }
.px30 { padding:0 30px !important; }
.px35 { padding:0 35px !important; }

.py0 { padding-top:0 !important; padding-bottom:0 !important; }
.py5 { padding:5px 0 !important; }
.py10 { padding:10px 0 !important; }
.py15 { padding:15px 0 !important; }
.py20 { padding:20px 0 !important; }
.py25 { padding:25px 0 !important; }
.py30 { padding:30px 0 !important; }
.py35 { padding:35px 0 !important; }

.m0 { margin:0 !important; }
.m5 { margin:5px !important; }
.m10 { margin:10px !important; }
.m15 { margin:15px !important; }
.m20 { margin:20px !important; }
.m25 { margin:25px !important; }
.m30 { margin:30px !important; }
.m35 { margin:35px !important; }

.mx0 { margin-left:0 !important; margin-right:0 !important; }
.mx5 { margin:0 5px !important; }
.mx10 { margin:0 10px !important; }
.mx15 { margin:0 15px !important; }
.mx20 { margin:0 20px !important; }
.mx25 { margin:0 25px !important; }
.mx30 { margin:0 30px !important; }
.mx35 { margin:0 35px !important; }

.my0 { margin-top:0 !important; margin-bottom:0 !important; }
.my5 { margin:5px 0 !important; }
.my10 { margin:10px 0 !important; }
.my15 { margin:15px 0 !important; }
.my20 { margin:20px 0 !important; }
.my25 { margin:25px 0 !important; }
.my30 { margin:30px 0 !important; }
.my35 { margin:35px 0 !important; }


.pt0 { padding-top:0 !important; }
.pb0 { padding-bottom:0 !important; }
.mt0 { margin-top:0 !important; }
.mb0 { margin-bottom:0 !important; }

/* .strPg p {  margin:0; font-weight:400;}
.strPg ul, .strPg ol { font-weight:400; } */







.pM2 { padding:10px 15px !important; }
@media (min-width:600px) {
    .pM2 { padding:25px 40px !important; }
}












/* ── General Css for typography and forms ── */

/* ---------- Lists (not covered by rootThemes/style.css) ---------- */
ul,ol { margin:15px 0; padding-left:1.4em; color:var(--pTx); }
li { margin:.3em 0; }
ul { list-style:disc; }
ol { list-style:decimal; }
ul ul,ol ul { list-style:circle; margin:.3em 0; }
li::marker { color:var(--sTx); }
/* ---------- Blockquote ---------- */
blockquote { margin:15px 0; padding:.5em 1em; border-left:3px solid var(--bxBdrC); color:var(--sTx); background:var(--bxBg); border-radius:0 8px 8px 0; }
/* ---------- Inline / block code (font already set by rootThemes' var(--font-mono) rule) ---------- */
code { background:var(--g1); color:var(--pTx); padding:.15em .4em; border-radius:4px; font-size:.9em; }
pre { background:var(--g1); color:var(--pTx); padding:1em; border-radius:8px; overflow-x:auto; border:var(--bxBdrSz) solid var(--bxBdrC); }
pre code { background:none; padding:0; }
/* ---------- hr (rootThemes only resets box model, no visual style) ---------- */
hr { border:none; margin:25px 0; height:1px; background:linear-gradient( to right,transparent,var(--bxBdrC,#ccc) 20%,var(--bxBdrC,#ccc) 80%,transparent );}
/* ---------- Tables ---------- */
table { width:100%; border-collapse:collapse; margin:15px 0; }
th,td { text-align:left; padding:.6em .7em; border-bottom:var(--bxBdrSz) solid var(--bxBdrC); color:var(--pTx); }
th { font-weight:700; color:var(--sTx); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; }
tr:hover td { background:var(--bxBg); }
/* ==========================================================================
   Forms
   ========================================================================== */
/* form { display:grid; gap:14px; max-width:480px; } */
label { display:block; font-size:.85rem; font-weight:600; color:var(--sTx); margin-bottom:6px; }
input,textarea,select,button { font-family:inherit; font-size:.95rem; color:var(--pTx); }
/* Text-like inputs, textarea, select share the field look */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),textarea,select { width:100%; padding:10px 12px; background:var(--bxBg); color:var(--bxTx); border:var(--bxBdrSz) solid var(--bxBdrC); border-radius:8px; outline:none; appearance:none; -webkit-appearance:none; transition:border-color .15s,box-shadow .15s; }
input::placeholder,textarea::placeholder { color:var(--sTx); opacity:.8; }
input:hover:not([type="checkbox"]):not([type="radio"]),textarea:hover,select:hover { border-color:var(--bxBdrHC); }
input:focus:not([type="checkbox"]):not([type="radio"]),textarea:focus,select:focus { border-color:var(--sAs); box-shadow:var(--bxShS); }
input:disabled,textarea:disabled,select:disabled { background:var(--g1); color:var(--sTx); cursor:not-allowed; opacity:.75; }
textarea { min-height:6em; resize:vertical; }
/* select chevron drawn with existing grey tokens */
select { padding-right:2.2em; background-image:linear-gradient(45deg,transparent 50%,var(--g3) 50%),linear-gradient(135deg,var(--g3) 50%,transparent 50%); background-position:calc(100% - 1.1em) center,calc(100% - .8em) center; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
/* checkbox / radio */
input[type="checkbox"],input[type="radio"] { width:1.05em; height:1.05em; accent-color:var(--pAs); vertical-align:middle; margin-right:.45em; cursor:pointer; }
/* range */
input[type="range"] { accent-color:var(--pAs); width:100%; cursor:pointer; }
/* file */
input[type="file"] { width:100%; font-size:.85rem; color:var(--sTx); border:1px dashed var(--bxBdrC); border-radius:8px; padding:10px 12px; cursor:pointer; background:var(--bxBg); }
input[type="file"]:hover { border-color:var(--bxBdrHC); }
/* ---------- Buttons ---------- */
button,input[type="submit"],input[type="button"] { font-weight:600; padding:11px 20px; border-radius:8px; border:var(--bxBdrSz) solid transparent; background:var(--pAs); color:#ffffff; cursor:pointer; /*box-shadow:0 3px 10px color-mix(in srgb,var(--pAs) 35%,transparent); transition:box-shadow .15s,transform .1s;*/ }
/* button:hover,input[type="submit"]:hover,input[type="button"]:hover { box-shadow:0 5px 14px color-mix(in srgb,var(--pAs) 45%,transparent); } */
button:active,input[type="submit"]:active,input[type="button"]:active { transform:scale(.97); }
button:disabled,input[type="submit"]:disabled { background:var(--g2); color:var(--sTx); box-shadow:none; cursor:not-allowed !important; }
/* reset looks secondary — outlined, like .addWish */
input[type="reset"] { font-weight:600; padding:11px 20px; border-radius:8px; border:var(--bxBdrSz) solid var(--bxBdrC); background:var(--bxBg); color:var(--pTx); cursor:pointer; transition:border-color .15s,color .15s; }
input[type="reset"]:hover { border-color:var(--pAs); color:var(--pAs); }
/* ---------- fieldset / legend ---------- */
fieldset { border:var(--bxBdrSz) solid var(--bxBdrC); border-radius:8px; padding:14px 16px 16px; margin:0 0 14px; }
legend { padding:0 .4em; font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--sTx); }
/* small helper text under fields */
small { color:var(--sTx); }

/* ── General Css for typography and form End ── */

/* ── Custom pages + policies (page.php) ── */
.tp.pg { padding-bottom:30px; }
.pgTx { min-width:0; line-height:1.7; color:var(--pTx); overflow-wrap:break-word; }
.pgTx img { max-width:100%; height:auto;margin: 25px auto; }
/* a line of 2+ images only (storefrontImageRows): equal columns, row as tall as its tallest image, the rest cover-cropped */
.pgTx p.pgGal { display:flex; flex-wrap:wrap; gap:10px; margin:25px 0; }
.pgTx p.pgGal img { flex:1 1 0; min-width:0; margin:0; object-fit:cover; }
@media (max-width:699px) { .pgTx p.pgGal img { flex:1 1 calc(50% - 5px); } }
.pgTx h2,.pgTx h3,.pgTx h4 { margin:1.2em 0 .5em; line-height:1.3; }
.pgTx > :first-child { margin-top:0; }
.pgTx p { margin:0 0 1em; }
.pgTx ul,.pgTx ol { margin:0 0 1em; padding-left:1.4em; }
.pgTx blockquote { margin:0 0 1em; padding:.4em 1em; border-left:3px solid var(--pAs); color:var(--sTx); }
.pgTx a { color:var(--pAs); }
.pgTx .ql-align-center { text-align:center; }
.pgTx .ql-align-right { text-align:right; }
.pgTx .ql-align-justify { text-align:justify; }
.pgTx .ql-indent-1 { padding-left:3em; } .pgTx .ql-indent-2 { padding-left:6em; } .pgTx .ql-indent-3 { padding-left:9em; }
/* footer row of page + policy links */
.ftL { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin:0 0 10px; }
/* automatic Contact Us page (storefrontRenderPage kind=contact) */
.pgContact dl { display:grid; grid-template-columns:max-content 1fr; gap:10px 20px; margin:0; }
.pgContact dt { font-weight:600; color:var(--sTx); }
.pgContact dd { margin:0; }



/* Top-bar cart count badge; explicit font so it does not inherit the icon font */
.cartLnk { position:relative; }
.cartCnt { position:absolute; top:-7px; right:-9px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; border-radius:8px; background:var(--sAs); color:#fff; font:600 10px/16px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align:center; letter-spacing:0; pointer-events:none; }

/* ==========================================================================
   Search overlay + suggestion list  (markup: store_searchOverlay() in inc.php,
   behaviour: sf/search.js). Ported from the orphaned sf.css, which was written
   against --bg-primary / --border-color / --shadow-lg — none of which exist any
   more. Uses the live tokens from the :root block at the top of this file.
   ========================================================================== */

/* ---- Full-screen overlay ---- */
.srchOv {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--pBg, #efefef);
    overflow-y: auto;
    padding: 16px;
}

.srchOv-inner {
    --srchActW: 78px;                   /* width the in-field buttons reserve in the input */
    max-width: 800px;
    margin: 0 auto;
    /* Suggestion list is absolutely positioned against this, so the dropdown variant
       needs nothing but a smaller container. */
    position: relative;
}

/* Both controls now sit inside the field, so the bar is a single full-width child and
   nothing steals horizontal space from the input any more. */
.srchOv-bar {
    padding: 8px 0 12px;
}

.srchOv-field {
    position: relative;
    width: 100%;
}

.srchOv-ip {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 var(--srchActW, 78px) 0 16px;   /* right pad clears both in-field buttons */
    font-size: 16px;                    /* 16px stops iOS zooming the page on focus */
    color: var(--bxTx, #000);
    background: var(--bxBg, #fff);
    border: 1px solid var(--bxBdrC, #a7a7a745);
    border-radius: 8px;
    outline: none;
}

.srchOv-ip:focus { border-color: var(--sAs, #1380fd); box-shadow: var(--bxShS); }

/* type=search draws a native clear button in Chrome/Safari at the field's right edge, right
   under these two. rootThemes.css suppresses ::-webkit-search-decoration but not this one.
   Scoped here, so .sbarIp keeps its own behaviour. */
.srchOv-ip::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* The pair of in-field controls, anchored to the input's right edge like .sbarIcon in
   sf/style.css. Keep --srchActW in step with 2 buttons + gap + right offset, since it is
   what stops typed text running underneath them. */
.srchOv-actions {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
}

/* .mIcon supplies the font family; these override its inline-block layout and 1.5rem sizing.
   Equal specificity, so this only wins by coming later in the file than .mIcon — keep this
   block at the bottom of style.css. */
.srchOv-icon,
.srchOv-x {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
}

.srchOv-icon { font-size: 20px; color: var(--sTx, #555); }
.srchOv-x    { font-size: 22px; color: var(--sTx, #555); }

.srchOv-icon:hover,
.srchOv-x:hover { background: var(--g1, #eee); color: var(--pTx, #333); }

.srchOv-icon:focus-visible,
.srchOv-x:focus-visible { outline: 2px solid var(--sAs, #1380fd); outline-offset: 1px; }

/* ---- Suggestion list ---- */
.search-results {
    background: var(--bxBg, #fff);
    border: 1px solid var(--bxBdrC, #a7a7a745);
    border-radius: 8px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: var(--bxSw);
    display: none;
}

.search-results.show { display: block; }

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--bxBdrC, #a7a7a745);
    transition: background 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.search-result-item:last-child { border-bottom: none; }

/* .active is the keyboard highlight; it must read the same as hover. */
.search-result-item:hover,
.search-result-item.active { background: var(--g1, #eee); }

.search-result-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--bxImBg, #fff);
    border: 1px solid var(--bxImBdr, #a7a7a712);
}

.search-result-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--g1, #eee);
}

/* .mIcon sets its own 1.5rem, so the size is pinned here rather than inherited from the box. */
.search-result-icon .mIcon {
    font-size: 26px;
    line-height: 1;
    color: var(--sTx, #555);
}

.search-result-content { flex: 1 1 auto; min-width: 0; }

/* Two lines, then ellipsis. Product names carry the variant/alias suffix, so a single
   nowrap line truncated most of them to something unrecognisable. overflow-wrap keeps a
   long unbroken token (an SKU-ish string) inside the row instead of pushing it wide. */
.search-result-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bxTx, #000);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.search-result-type {
    font-size: 12px;
    color: var(--sTx, #555);
    margin-top: 2px;
}

.search-result-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--pRs, #007cc9);
    margin-top: 2px;
}

.search-loading,
.search-no-results {
    padding: 20px 15px;
    text-align: center;
    font-size: 14px;
    color: var(--sTx, #555);
}

@media (max-width: 768px) {
    .srchOv { padding: 12px; }

    .search-results { max-height: 75vh; }

    .search-result-image,
    .search-result-icon { width: 44px; height: 44px; }
}

/* ── Footer (ft2 design) ── */
/* Large wordmark + description left, columns split by hairlines, split bottom bar; markup in store_footer() (inc.php). Sits last so it overrides .ft/.ftc/.ftL above. */
.ft { --ftMut:color-mix(in srgb,var(--ftTx) 68%,transparent); --ftLine:color-mix(in srgb,var(--ftTx) 14%,transparent); color:var(--ftTx); margin-top:30px; }
.ftG { max-width:1400px; margin:0 auto; padding:56px 13px 40px; display:flex; flex-wrap:wrap; gap:36px 0; }
.ftCol { flex:1 1 100%; min-width:0; font-size:14px; line-height:1.7; }
/* .ftBr img { max-height:40px; max-width:130px; filter:drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 4px rgba(255,255,255,.5)); } */
.ftBr img {
  max-height: 70px;
  max-width: 130px;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 4px rgba(255,255,255,.5));
  background-color: white;
  padding: 6px;
}
.ftBr .nm { display:block; font-size:2rem; font-weight:700; line-height:1.1; margin:14px 0 12px; letter-spacing:-.01em; }
.ftBr p { margin:0; max-width:34ch; color:var(--ftMut); }
.ftCol h4 { font-size:15px; font-weight:600; padding:0; margin:0 0 14px; color:var(--ftTx); }
.ftCol ul { list-style:none; margin:0; padding:0; }
.ftCol li { margin:0 0 8px; }
.ftCol a { color:var(--ftMut); text-decoration:none; border-bottom:1px solid transparent; }
.ftCol a:hover { color:var(--ftTx); border-bottom-color:var(--pAs); }
.ftCn li { display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; color:var(--ftMut); }
.ftCn .mIcon { font-size:1.2rem; top:.12rem; color:var(--ftTx); }
.ftCn address { font-style:normal; }
.ftBt { border-top:1px solid var(--ftLine); }
.ftBt .ftc { margin-top:0; padding:16px 13px; font-size:13px; color:var(--ftMut); flex-direction:row; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; text-align:left; }
.ftBt .ftc p { color:inherit; margin:0; }
.ftBt .ftL { margin:0; justify-content:flex-start; }
.ftBt .ftL a { color:var(--ftMut); } .ftBt .ftL a:hover { color:var(--ftTx); }
@media (min-width:600px) { .ftG { padding-left:25px; padding-right:25px; } .ftCol { flex:1 1 50%; padding-right:32px; } .ftCol:nth-child(even) { padding-left:32px; border-left:1px solid var(--ftLine); } .ftBt .ftc { padding:16px 25px; } }
@media (min-width:1000px) { .ftCol,.ftCol:nth-child(even) { flex:1 1 0; padding:0 32px; border-left:1px solid var(--ftLine); } .ftCol:first-child { padding-left:0; border-left:0; } .ftCol:last-child { padding-right:0; } .ftBr { flex:1.5 1 0; } }
@media (min-width:1440px) { .ftG,.ftBt .ftc { padding-left:0; padding-right:0; } }
/* ── Footer end ── */