/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{--bg:#f4f6fa;--card:#ffffff;--text:#101828;--muted:#44526c;--accent:#16a34a;--danger:#ff3b30;--line:#c8d3e3;}
*{box-sizing:border-box}

/* Scrollbar styling (avoid "Windows XP" look) */
*{scrollbar-width:thin;scrollbar-color:#2c3046 #0f1118}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#0f1118}
*::-webkit-scrollbar-thumb{background:#2c3046;border-radius:999px;border:2px solid #0f1118}
*::-webkit-scrollbar-thumb:hover{background:#3a3f58}

html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text);font-weight:400}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(20,24,34,.92);z-index:9000}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none}
.brand{color:var(--text);text-decoration:none;font-weight:900;font-size:225%;letter-spacing:.4px;position:relative;display:inline-block;transform:translateZ(0);background:linear-gradient(110deg,#2f8f5b 0%,#2d6fcb 28%,#d63a3a 52%,#2f8f5b 74%,#2d6fcb 100%);background-size:180% 180%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px #000;text-shadow:0 1px 0 rgba(0,0,0,.34),0 10px 22px rgba(0,0,0,.30);filter:saturate(1.08) contrast(1.08);transition:transform .16s ease,text-shadow .16s ease,filter .16s ease}
.brand:hover{transform:none;text-shadow:0 2px 0 rgba(0,0,0,.32),0 14px 26px rgba(0,0,0,.32);filter:saturate(1.15) contrast(1.12)}
.brand:active{transform:none}
.brand:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(110,168,255,.18);border-radius:10px}
.brand::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(45,111,203,.58),rgba(214,58,58,.58),transparent);opacity:.75}
.lang a{color:var(--muted);text-decoration:none}
.lang a.on{color:var(--text);font-weight:700}
.switches{display:flex;flex-direction:row;gap:6px;align-items:flex-start}
.switches .opt-live-badge{align-self:flex-start;margin:0 2px 0 0}
.lang.vert{display:flex;flex-direction:column;gap:5px}
.lang.vert a{position:relative;display:flex;align-items:center;justify-content:center;min-width:38px;height:30px;text-align:center;padding:0 6px;border-radius:10px;border:0;background:linear-gradient(180deg,#1a253d 0%,#131b2d 100%);font-weight:800;font-size:12px;color:#d9e6ff;box-shadow:0 6px 14px rgba(8,18,40,.34),inset 0 1px 0 rgba(170,198,255,.12);transition:transform .14s ease,box-shadow .18s ease,background .18s ease}
.lang.vert a::after{content:"";position:absolute;left:8px;right:8px;bottom:5px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(118,160,238,.6),transparent);opacity:0;transform:scaleX(.75);transition:opacity .18s ease,transform .18s ease}
.lang.vert a:hover{transform:translateY(-1px);background:linear-gradient(180deg,#1d2b48 0%,#15213a 100%);box-shadow:0 10px 18px rgba(20,52,116,.28),inset 0 1px 0 rgba(188,213,255,.15)}
.lang.vert a:hover::after{opacity:.85;transform:scaleX(1)}
.themebtn{position:relative;display:flex;align-items:center;justify-content:center;min-width:38px;height:30px;border-radius:10px;border:0;background:linear-gradient(180deg,#1a253d 0%,#131b2d 100%);color:#d9e6ff;cursor:pointer;font-size:14px;line-height:1;padding:0;box-shadow:0 6px 14px rgba(8,18,40,.34),inset 0 1px 0 rgba(170,198,255,.12);transition:transform .14s ease,box-shadow .18s ease,background .18s ease}
.themebtn::after{content:"";position:absolute;left:8px;right:8px;bottom:5px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(118,160,238,.6),transparent);opacity:0;transform:scaleX(.75);transition:opacity .18s ease,transform .18s ease}
.themebtn:hover{transform:translateY(-1px);background:linear-gradient(180deg,#1d2b48 0%,#15213a 100%);box-shadow:0 10px 18px rgba(20,52,116,.28),inset 0 1px 0 rgba(188,213,255,.15)}
.themebtn:hover::after{opacity:.85;transform:scaleX(1)}
.themebtns{display:flex;flex-direction:column;gap:5px}
#themeLight,#themeDark{position:relative;font-size:0}
#themeLight::before,#themeDark::before{display:block;font-size:16px;line-height:1}
#themeLight::before{content:'☀';color:#f7c948}
#themeDark::before{content:'🌙'}
.themebtn.on{background:linear-gradient(180deg,#223357 0%,#192845 100%);color:#fff;box-shadow:0 10px 20px rgba(28,72,160,.34),0 0 14px rgba(76,130,236,.18),inset 0 1px 0 rgba(208,225,255,.2)}
html[data-theme='light'] .themebtn.on{background:linear-gradient(180deg,#ffffff 0%,#e8f1ff 100%);color:#0f172a;box-shadow:0 10px 18px rgba(56,112,198,.22),0 0 12px rgba(76,150,234,.16),inset 0 1px 0 rgba(255,255,255,.98)}
.wrap{max-width:none;margin:0 auto;padding:16px}
.list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;padding:0;list-style:none}
.list a{display:block;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:260px}
.card img{width:100%;height:160px;object-fit:contain;background:#fff;border-radius:10px;padding:10px;border:1px solid rgba(255,255,255,.10)}
.card .title{color:var(--text);text-decoration:none;font-weight:800;line-height:1.2;padding:0;border-radius:0;background:transparent;border:0}
.price{display:flex;gap:8px;align-items:baseline;margin:2px 0 4px 0}
.price .old{text-decoration:line-through;color:var(--danger);opacity:.6}
.price .new{color:var(--accent);font-weight:700}
.price.big .new{font-size:22px}
.sku{color:var(--muted);font-size:13px}
.desc{color:var(--text);opacity:.95;line-height:1.5}
.seo-mini{margin:8px 0 12px}
.seo-mini details{display:inline-block;max-width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px 10px}
.seo-mini summary{cursor:pointer;color:var(--muted);font-size:12px;list-style:none}
.seo-mini summary::-webkit-details-marker{display:none}
.seo-mini details[open]{display:block;padding:10px 12px}
.seo-mini details[open] summary{margin-bottom:6px;color:var(--text)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:12px 0}
.gallery img{width:100%;height:200px;object-fit:contain;background:#fff;border-radius:12px;border:1px solid var(--line);padding:10px}

/* Product page (Dewalt-ish) */
.pdp{display:grid;grid-template-columns:210px 1fr 420px;gap:16px;align-items:start}
@media (max-width:1100px){.pdp{grid-template-columns:180px 1fr}.pbuy{grid-column:1/-1}}
@media (max-width:700px){.pdp{grid-template-columns:1fr}.pthumbs{display:flex;flex-direction:row;gap:8px;overflow:auto}.pthumb{flex:0 0 auto;width:72px}}
.pthumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.pthumb{width:100%;aspect-ratio:1/1;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:5px;cursor:pointer}
.pthumb img{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:10px;padding:6px}
.pmain{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:8px;display:flex;align-items:center;justify-content:center}
.pmain img{width:min(100%,440px);max-width:100%;max-height:560px;height:auto;margin:0 auto;display:block;object-fit:contain;object-position:center;background:#fff;border-radius:14px;padding:8px;border:1px solid rgba(0,0,0,.08)}
@media (max-width:1100px){.pmain img{width:min(100%,520px);max-height:none}}
.pbuy{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:14px;position:sticky;top:88px}
.pbuy h1{margin:0 0 10px 0;font-size:22px;line-height:1.2}
.pmeta{color:var(--muted);font-size:13px;margin:6px 0}
.pact{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;margin:14px 0}
.qbox{display:flex;gap:0;align-items:center;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0f1118;flex:0 0 auto}
.qbox button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;line-height:1;border:0;background:transparent;color:var(--text);font-weight:900;font-size:18px;cursor:pointer}
.qbox input{width:56px;height:44px;line-height:44px;padding:0;border:0;text-align:center;background:transparent;color:var(--text);font-weight:800}
.pbuy .buy{flex:1;height:44px;padding:0 14px}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 10px 0}
.tab{padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:#0f1118;color:var(--text);text-decoration:none;font-weight:700}
.tab.on{background:var(--card)}
.tpanel{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:14px}

.chars{width:100%;border-collapse:collapse;margin-top:12px}
.chars td{border-bottom:1px solid var(--line);padding:10px 8px;vertical-align:top}
.footer{padding:10px 16px;color:var(--muted);border-top:1px solid var(--line);margin-top:24px}
.footer-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.copy{color:var(--muted)}
.warehouse{opacity:.82}
.faq-mini-btn{margin-left:auto;border:1px solid var(--line);background:transparent;color:var(--muted);padding:4px 10px;border-radius:999px;font-size:12px;cursor:pointer}
.faq-mini-btn:hover{color:var(--text);border-color:#456090}
.faq-mini-modal{position:fixed;inset:0;background:rgba(3,8,16,.45);display:flex;align-items:flex-end;justify-content:flex-end;padding:14px;z-index:80}
.faq-mini-card{width:min(420px,96vw);max-height:50vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.faq-mini-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.faq-mini-head button{border:0;background:transparent;color:var(--muted);font-size:18px;cursor:pointer}
.faq-mini-card details{margin:4px 0}
.faq-mini-card summary{font-size:13px;cursor:pointer}
.faq-mini-card p{font-size:12px;color:var(--muted);margin:4px 0 6px 14px}
.catbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;border:0;background:linear-gradient(180deg,#1d2a45 0%,#172137 100%);color:#eaf2ff;font-weight:850;text-decoration:none;letter-spacing:.01em;flex:0 0 auto;min-width:98px;text-align:center;transition:transform .15s ease,box-shadow .2s ease,filter .2s ease,background .2s ease;box-shadow:0 8px 20px rgba(14,33,72,.35),0 2px 6px rgba(3,8,18,.45),inset 0 1px 0 rgba(185,210,255,.16)}
.catbtn::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(88,132,255,.5),rgba(60,220,255,.22),rgba(154,92,255,.35));opacity:.35;filter:blur(.2px)}
.catbtn::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(120,176,255,.9),transparent);opacity:0;transform:scaleX(.65);transition:opacity .2s ease,transform .2s ease}
.catbtn:hover{transform:translateY(-1px);background:linear-gradient(180deg,#223357 0%,#1a2845 100%);box-shadow:0 14px 30px rgba(36,96,220,.35),0 4px 10px rgba(8,16,32,.45),0 0 24px rgba(75,132,255,.28),inset 0 1px 0 rgba(196,221,255,.22);filter:saturate(1.08)}
.catbtn:hover::after{opacity:1;transform:scaleX(1)}
.catbtn:active{transform:translateY(0) scale(.985)}
.top-contacts{display:flex;flex-direction:column;gap:2px;min-width:190px;max-width:220px;margin-left:6px}
.top-contacts a{color:var(--text);text-decoration:none;font-size:12px;font-weight:700;line-height:1.15;white-space:nowrap}
.top-contacts span{color:var(--muted);font-size:11px;line-height:1.1;white-space:nowrap}

.aibtn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;border:0;background:linear-gradient(180deg,#1b283f 0%,#141f33 100%);color:#deebff;font-weight:800;text-decoration:none;letter-spacing:.01em;min-width:98px;box-shadow:0 6px 14px rgba(10,22,45,.3),inset 0 1px 0 rgba(178,207,255,.14);transition:transform .14s ease,box-shadow .18s ease,background .18s ease}
.aibtn::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(120,176,255,.72),transparent);opacity:0;transform:scaleX(.7);transition:opacity .18s ease,transform .18s ease}
.aibtn:hover{transform:translateY(-1px);background:linear-gradient(180deg,#213251 0%,#182642 100%);box-shadow:0 10px 20px rgba(26,64,132,.25),inset 0 1px 0 rgba(199,221,255,.18)}
.aibtn:hover::after{opacity:.9;transform:scaleX(1)}

.right{display:flex;gap:12px;align-items:flex-start}
.searchcol{display:flex;flex-direction:column;gap:4px;min-width:min(420px,50vw)}
.search{position:relative;z-index:930}
.q{width:min(420px,50vw);padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#0f1118;color:var(--text)}
.shipnote{font-size:11px;color:var(--muted);padding:0 2px;line-height:1.15;white-space:nowrap;opacity:.95}

/* Desktop/tablet: keep OPT discount badge under search line */
@media (min-width:701px){
  .right{flex-wrap:wrap;align-content:flex-start}
  .searchcol{order:1;position:relative;padding-bottom:24px}
  .cartlink{order:2}
  .switches{order:3}
  /* reserve badge slot to avoid header jump on page refresh */
  header.top .searchcol > .opt-live-badge{
    position:absolute;left:0;bottom:0;
    display:inline-flex;flex:0 0 auto;width:max-content;max-width:min(420px,50vw);margin:0;
  }
  header.top .right > .opt-live-badge{order:4;display:inline-flex;flex:0 0 auto;width:max-content;max-width:min(420px,50vw);margin-top:2px}
}

.results{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  z-index:5000;
  max-height:60vh;
  overflow:auto;
}
.r{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.r:last-child{border-bottom:none}
.r img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:8px;border:1px solid var(--line);padding:6px}
.r .t{font-weight:600;line-height:1.2}
.r .m{color:var(--muted);font-size:12px;margin-top:3px}
.cartlink{color:var(--text);text-decoration:none;border:1px solid var(--line);background:#0f1118;border-radius:12px;padding:8px 10px;display:flex;gap:8px;align-items:center;justify-content:flex-start;white-space:nowrap;min-width:190px}
.badge{display:inline-block;min-width:28px;height:20px;line-height:20px;text-align:center;border-radius:999px;background:var(--accent);color:white;font-size:12px;padding:0 6px;flex:0 0 28px}
.badge.bump{animation:badgeBump .34s ease}
@keyframes badgeBump{0%{transform:scale(1)}50%{transform:scale(1.22)}100%{transform:scale(1)}}
.cs{color:var(--muted);font-size:12px;display:inline-block;min-width:78px;text-align:right;flex:0 0 78px}
.cart-checkout-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;align-items:start}
.receipt-card,.checkout-card{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:14px;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.receipt-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.receipt-title{font-weight:900;letter-spacing:.02em}
.receipt-sub{color:var(--muted);font-size:12px}
.cart{display:flex;flex-direction:column;gap:10px;margin:8px 0}
.citem{display:grid;grid-template-columns:72px 1fr 132px 36px;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));padding:10px}
.citem img{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:10px;border:1px solid var(--line);padding:6px}
.ci .t{font-weight:800;line-height:1.2;margin-bottom:4px}
.ci .m{color:var(--muted);font-size:13px;line-height:1.22}
.ci .line-total{margin-top:4px;color:var(--text)}
.qty{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.qty button{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:#0f1118;color:var(--text);font-weight:900}
.qty input{width:50px;padding:6px 7px;border-radius:10px;border:1px solid var(--line);background:#0f1118;color:var(--text);text-align:center;font-weight:700}
.del{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#0f1118;color:var(--muted)}
.sum{margin-top:10px;font-size:18px}
.receipt-total{padding-top:8px;border-top:1px dashed var(--line)}
.go-checkout{display:none}
.checkout-card h2{margin:2px 0 10px 0}
.checkout-form .frow{margin:8px 0}
.frow{margin:10px 0}
.frow input,.frow textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#0f1118;color:var(--text)}
.checkout-submit{width:100%;margin-top:6px}
#checkoutCard{scroll-margin-top:76px}

@media (max-width:980px){.cart-checkout-shell{grid-template-columns:1fr}}
@media (max-width:700px){
  .receipt-card,.checkout-card{padding:12px;border-radius:14px}
  .citem{grid-template-columns:72px 1fr 34px;grid-template-areas:'img info del' 'img info del' 'qty qty qty';gap:8px}
  .citem img{grid-area:img}
  .citem .ci{grid-area:info;min-width:0}
  .citem .del{grid-area:del;align-self:start}
  .citem .qty{grid-area:qty;justify-content:flex-start;padding-top:4px;border-top:1px dashed var(--line)}
  .citem .qty input{width:56px}
  .go-checkout{display:block;margin-top:10px;padding:11px 12px;text-align:center;text-decoration:none;border-radius:12px;border:1px solid #2f6ed3;background:linear-gradient(180deg,#2b78ea,#1f5fbf);color:#fff;font-weight:900;letter-spacing:.02em}
  .checkout-submit{padding:13px 14px;font-size:15px}
}
@media (max-width:390px){
  .citem{grid-template-columns:64px 1fr 32px;padding:9px}
  .citem img{width:64px;height:64px}
  .ci .t{font-size:13px}
  .ci .m{font-size:12px}
}
html[data-theme='light'] .citem{background:linear-gradient(180deg,#ffffff,#f7faff)}
html[data-theme='light'] .receipt-card,html[data-theme='light'] .checkout-card{box-shadow:0 10px 22px rgba(16,24,40,.10)}
html[data-theme='light'] .go-checkout{border-color:#2f6ed3;background:linear-gradient(180deg,#4f94f8,#2c6ed8)}
.buy{padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--accent);color:white;font-weight:700}
button[data-add-to-cart].buy{display:inline-flex;align-items:center;justify-content:center;gap:8px}
button[data-add-to-cart].buy::before{content:"🛒"}
.pcard .buy::before{content:none}
.status{margin-top:10px;color:var(--muted)}
.vs-toast{position:fixed;right:16px;top:72px;z-index:2000;padding:10px 12px;border-radius:12px;background:#101826;color:#fff;border:1px solid #2d3a55;box-shadow:0 10px 28px rgba(0,0,0,.28);font-size:13px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.vs-toast.show{opacity:1;transform:translateY(0)}
.vs-center-toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.95);z-index:2300;padding:14px 18px;border-radius:14px;background:linear-gradient(180deg,#0f9f5f,#0e8a53);color:#fff;border:1px solid #12b76a;box-shadow:0 16px 34px rgba(0,0,0,.32);font-size:18px;font-weight:800;letter-spacing:.01em;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.vs-center-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
html[data-theme='light'] .vs-toast{background:#f7fbff;color:#0f172a;border-color:#b8c7dd;box-shadow:0 10px 24px rgba(16,24,40,.14)}
html[data-theme='light'] .vs-center-toast{background:linear-gradient(180deg,#16a34a,#15803d);border-color:#22c55e;color:#fff;box-shadow:0 12px 26px rgba(16,24,40,.22)}
@media (max-width:1180px){.top-contacts{display:none}.aibtn{min-width:86px;padding:10px 12px}.searchcol{min-width:min(340px,42vw)}.q{width:min(340px,42vw)}}
@media (max-width:700px){.aibtn{display:none}.shipnote{display:none}.q{width:min(200px,46vw)}.citem{grid-template-columns:70px 1fr;grid-template-rows:auto auto;}.qty{justify-content:flex-start}.del{justify-self:end}}
.gblock{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--card);margin:10px 0}
.gblock h2{margin:0 0 10px 0;font-size:18px}
.gblock h2 a{color:var(--text);text-decoration:none}
.crumbs{font-size:13px;color:var(--muted);margin:6px 0 12px 0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs .sep{margin:0 6px;color:#61657a}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:#0f1118;color:var(--text);text-decoration:none;font-size:13px}

/* Group tiles (subcategories) */
.gtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:10px 0 18px 0}
.gtile{display:block;border:1px solid var(--line);border-radius:16px;background:var(--card);text-decoration:none;color:var(--text);overflow:hidden;transition:transform .08s ease,border-color .08s ease}
.gtile:hover{transform:translateY(-1px);border-color:#3a3f58}
.phsq{width:100%;aspect-ratio:1/1;background:#fff;border-bottom:1px solid rgba(0,0,0,.08)}
.gtile img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;display:block;padding:8px}
.gtile .n{padding:8px 9px;font-weight:700;line-height:1.15;font-size:12px}
.csec{margin:18px 0 22px 0}
.h2l{color:var(--text);text-decoration:none}

/* Catalog hover hint (small) + expanded popup (big) */
.cathint{position:fixed;border:1px solid var(--line);border-radius:14px;background:var(--card);z-index:860;box-shadow:0 20px 60px rgba(0,0,0,.45);padding:10px;max-width:520px;max-height:calc(100vh - 90px);overflow:auto}
/* Dark scrollbar */
.cathint::-webkit-scrollbar,.catpop::-webkit-scrollbar,.sidepop::-webkit-scrollbar{width:10px}
.cathint::-webkit-scrollbar-track,.catpop::-webkit-scrollbar-track,.sidepop::-webkit-scrollbar-track{background:#0f1118}
.cathint::-webkit-scrollbar-thumb,.catpop::-webkit-scrollbar-thumb,.sidepop::-webkit-scrollbar-thumb{background:#2c3046;border-radius:999px;border:2px solid #0f1118}
.cathint{scrollbar-color:#2c3046 #0f1118;scrollbar-width:thin}
.catpop{scrollbar-color:#2c3046 #0f1118;scrollbar-width:thin}
.sidepop{scrollbar-color:#2c3046 #0f1118;scrollbar-width:thin}
.cathint .head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.cathint .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;position:sticky;bottom:0;background:var(--card);padding-top:10px}
.cathint .go{color:var(--text);text-decoration:none;border:1px solid var(--line);background:#0f1118;border-radius:12px;padding:8px 10px;font-weight:800}
.cathint .more{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:12px;padding:8px 10px;font-weight:800;cursor:pointer}

/* Hint tiles are extra-compact */
#catHint .stile img{padding:4px}
#catHint .stile .n{font-size:12px;line-height:1.2;padding:5px 7px;font-weight:700;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* Brands (tiles like categories: square image + label) */
.bsec{margin:10px 0 18px 0}
.btiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.btiles.all{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.btile{display:block;border:1px solid var(--line);border-radius:16px;background:var(--card);text-decoration:none;color:var(--text);overflow:hidden;transition:transform .08s ease,border-color .08s ease}
.btile:hover{transform:translateY(-1px);border-color:#3a3f58}
.btile img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;display:block;padding:10px;border-bottom:1px solid rgba(0,0,0,.08)}
.btile .bph{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#1a2438,#121a2a);color:#d9e6ff;font-size:34px;font-weight:900;border-bottom:1px solid rgba(255,255,255,.08)}
.btile .bn{padding:8px 9px 0 9px;font-weight:700;line-height:1.15;font-size:12px}
.btile .bm{padding:2px 9px 9px 9px;color:var(--muted);font-size:12px}
.allb{color:var(--muted);text-decoration:none;font-weight:600}

/* group selection bar removed */

/* Compact product card used inside catalog popups + sidebar hover */
.pcmini{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:100%}
.pcmini a{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;text-decoration:none;color:var(--text)}
.pcmini img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;display:block;padding:8px}
.pcmini .t{padding:7px 8px 0 8px;font-weight:700;font-size:13px;line-height:1.15}
.pcmini .meta{padding:4px 8px 6px 8px;color:var(--muted);font-size:12px}
.pcmini .meta .av{margin-top:4px}
.pcmini .m{margin-top:auto;padding:0 8px 6px 8px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.pcmini .m .old{color:var(--danger);text-decoration:line-through;opacity:.6}
.pcmini .m .pr{color:var(--accent);font-weight:900}
.pcmini .b{padding:0 8px 10px 8px;margin-top:0}
.pcmini .b button{width:100%;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:#0f1118;color:var(--text);font-weight:800}

.catpop{position:fixed;top:100px;left:16px;right:16px;margin:0 auto;width:min(980px,calc(100vw - 32px));border:1px solid var(--line);border-radius:16px;background:var(--card);z-index:850;box-shadow:0 20px 60px rgba(0,0,0,.45);max-height:72vh;overflow:auto;padding:12px}
.catpop .head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.catpop .x{border:1px solid var(--line);background:#0f1118;color:var(--text);border-radius:12px;padding:8px 10px;font-weight:800;cursor:pointer}

/* De-bold titles a bit */
.pt{font-weight:750}

.homecats{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:10px 2px;margin:8px 0 14px 0;scroll-snap-type:x mandatory}
.hcat{flex:0 0 auto;scroll-snap-align:start;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:#0f1118;color:var(--text);text-decoration:none;font-weight:700}
.layout{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:16px;align-items:start;min-width:0}
.sidebar{position:sticky;top:84px;align-self:start;z-index:2;transition:top .2s ease;min-width:0}
.content{min-width:0}
@media (max-width:1180px){.layout{grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:12px}}
@media (max-width:1024px){.layout{grid-template-columns:1fr}.sidebar{display:none !important;position:static;order:2}}
.sframe{border:1px solid var(--line);border-radius:18px;background:var(--card);padding:10px;backdrop-filter:blur(5px)}

/* Desktop: full-height glass sidebar, dynamic + inner smooth scroll */
@media (min-width:951px){
  .sidebar{
    top:96px;
    max-height:calc(100dvh - 108px);
    overflow:visible;
  }
  .sidebar .sframe{
    position:relative;
    height:calc(100dvh - 108px);
    min-height:480px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    isolation:isolate;
  }
  .sidebar .sframe::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(120% 60% at 0% 0%, rgba(120,170,255,.20), transparent 55%),
      radial-gradient(100% 55% at 100% 100%, rgba(190,120,255,.16), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    z-index:-1;
  }
  .sidebar .sframe::after{
    content:"";
    position:absolute;
    left:10px;
    right:14px;
    bottom:10px;
    height:18px;
    pointer-events:none;
    border-radius:12px;
    background:linear-gradient(180deg,rgba(19,30,53,0),rgba(19,30,53,.92));
  }
  .sidebar .slist{
    overflow:auto;
    max-height:none;
    flex:1 1 auto;
    display:block;
    scroll-behavior:smooth;
    overscroll-behavior:contain;
    padding:0 6px 10px 0;
    scrollbar-width:thin;
  }
  .sidebar .slist::-webkit-scrollbar{width:9px}
  .sidebar .slist::-webkit-scrollbar-track{background:transparent}
  .sidebar .slist::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#4b5f88,#2f3f61);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
  .sidebar .slist::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#6280b8,#3b5383)}
}
/* Sidebar category icon/thumb (Dnipro‑M-ish: a bit larger + clearer) */
.thumb{width:34px;height:34px;border-radius:10px;object-fit:cover;background:#0f1118;border:1px solid var(--line);flex:0 0 auto}
.thumb.ph{display:inline-flex;align-items:center;justify-content:center;color:#a0a3ad;font-weight:900;font-size:16px}
.thumb.ph::before{content:"•"}
.toprow{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}

/* Sidebar hover popup (Dnipro‑M-like) */
.sidepop{position:fixed;top:100px;left:360px;width:min(720px,calc(100vw - 380px));border:1px solid var(--line);border-radius:16px;background:var(--card);z-index:800;box-shadow:0 20px 60px rgba(0,0,0,.45);max-height:72vh;overflow:auto;padding:12px}
.spt{font-weight:800;margin-bottom:10px;position:sticky;top:0;background:var(--card);padding:2px 0 10px 0}
.stiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
/* Hard override (some builds were cached with 2 cols) */
#sidePop #sideTiles.stiles{grid-template-columns:repeat(4,minmax(0,1fr))!important}
#catHint .stiles,#catPop .stiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.stile{display:block;border:1px solid var(--line);border-radius:12px;background:#0f1118;color:var(--text);text-decoration:none;overflow:hidden;transition:transform .08s ease,border-color .08s ease}
.stile:hover{transform:translateY(-1px);border-color:#3a3f58}
.stile img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;display:block;padding:6px}
.stile .n{padding:6px 7px;font-weight:700;line-height:1.1;font-size:11px}
/* removed redundant mobile override (.toprow/.sidepanel) */
.st{font-weight:1000;letter-spacing:.08em;font-size:12px;color:var(--muted);margin:6px 8px 10px 8px}
.slist{max-height:72vh;overflow:auto;padding-right:4px;transition:max-height .25s ease}
@media (min-width:951px){.slist{max-height:none}}

html[data-theme='light'] .sframe{background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(236,243,252,.66));border-color:rgba(148,171,206,.55);box-shadow:0 14px 28px rgba(33,63,110,.14), inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(10px) saturate(1.15)}
html[data-theme='dark'] .sframe{background:linear-gradient(180deg,rgba(20,32,58,.62),rgba(12,22,42,.72));border-color:rgba(90,124,176,.50);box-shadow:0 16px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(174,205,255,.10);backdrop-filter:blur(10px) saturate(1.12)}
html[data-theme='light'] .sidebar .slist::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c3d4ec,#9bb6dc);border:2px solid transparent;background-clip:padding-box}
html[data-theme='light'] .sidebar .slist::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#aec6e6,#88a9d8)}
@keyframes sidebarBreath{0%,100%{box-shadow:0 14px 28px rgba(33,63,110,.14), inset 0 1px 0 rgba(255,255,255,.95)}50%{box-shadow:0 18px 34px rgba(48,88,156,.20), inset 0 1px 0 rgba(255,255,255,.98)}}
html[data-theme='light'] .sidebar .sframe{animation:sidebarBreath 7.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html[data-theme='light'] .sidebar .sframe{animation:none}}

/* Sidebar categories: smaller text + visual separators so it doesn't look like a monolithic text block */
.slink{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--text);border:1px solid transparent;transition:transform .14s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease}
.slink:first-child{margin-top:2px}
.slink + .slink{margin-top:6px}
.slink:hover{transform:translateX(2px);background:linear-gradient(90deg,rgba(122,169,255,.14),rgba(182,120,255,.08));border-color:rgba(130,165,230,.35);box-shadow:0 8px 18px rgba(20,45,90,.22)}
.slink.on{background:linear-gradient(90deg,rgba(122,169,255,.18),rgba(182,120,255,.12));border-color:rgba(130,165,230,.42)}
.ico{width:18px;display:inline-flex;justify-content:center;opacity:.9}
.sn{font-weight:600;font-size:13px;line-height:1.15}
.content{min-width:0}
.carouselWrap{margin:10px 0 18px 0}
.carouselTitle{font-weight:900;margin:0 0 10px 0}
.carousel{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 10px 2px;scroll-snap-type:x mandatory}
.ccard{flex:0 0 auto;scroll-snap-align:start;width:240px;border:1px solid var(--line);border-radius:18px;background:var(--card);text-decoration:none;color:var(--text);overflow:hidden}

/* Horizontal product scroller (1 row) */
.hscroll{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:6px 2px 10px 2px;scroll-snap-type:x mandatory;align-items:stretch}
/* Force the same visual size as grid cards */
.hscroll .pcard{flex:0 0 220px;width:220px;max-width:220px;scroll-snap-align:start}

/* 2-row loop rail for home blocks (popular/sale) */
.hscroll2{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:176px;
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 2px 12px 2px;
  scroll-snap-type:x proximity;
}
.hscroll2 .pcard{
  width:176px;
  max-width:176px;
  min-height:288px;
  padding:8px;
}
.hscroll2 .pcard img{height:116px;padding:6px}
.hscroll2 .pt{font-size:13px;line-height:1.18;min-height:44px}
.hscroll2 .sku,.hscroll2 .av{font-size:11px}
.hscroll2 .price .new{font-size:18px !important}
.hscroll2 .pact{grid-template-columns:minmax(76px,1fr) 34px;gap:6px}
.hscroll2 .pact .qbox{height:34px;min-width:76px}
.hscroll2 .pact .qbox button{width:24px;height:34px;font-size:14px}
.hscroll2 .pact .qbox input{width:24px;height:34px;line-height:34px;font-size:12px}
.hscroll2 .pact .buy{width:34px;min-width:34px;height:34px;border-radius:10px}

/* themed rail scrollbar */
.hscroll2::-webkit-scrollbar{height:9px}
html[data-theme='light'] .hscroll2::-webkit-scrollbar-thumb{background:#9fb7da;border-radius:999px;border:2px solid #d8e2f0}
html[data-theme='dark'] .hscroll2::-webkit-scrollbar-thumb{background:#45659a;border-radius:999px;border:2px solid #121a2a}

.ccard img{width:100%;height:150px;object-fit:contain;background:#fff;display:block;padding:10px}
.ct{padding:12px 12px;font-weight:900;line-height:1.2}
.section{margin:18px 0}
.hrow{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px 0}

/* Home quick UX links (OPT/info/delivery/payment/special) */
.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:2px 0 14px 0}
.hero-mainline{display:flex;align-items:center;gap:10px}
.hero-top h1{margin:0;flex:0 0 auto}
.uxdrop{display:none;position:relative}
.uxdrop summary{list-style:none;cursor:pointer;user-select:none;display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:11px;border:1px solid var(--line);background:linear-gradient(180deg,#1f2e4d 0%,#18243d 100%);color:var(--text);font-weight:800;font-size:12px}
.uxdrop summary::-webkit-details-marker{display:none}
.uxdrop-menu{position:absolute;right:0;left:auto;top:calc(100% + 8px);z-index:30;min-width:220px;max-width:min(88vw,320px);padding:8px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 90%, #0b1430 10%);box-shadow:0 16px 36px rgba(0,0,0,.28);display:none;gap:8px}
.uxdrop .uxbtn{width:100%;justify-content:flex-start;white-space:normal;line-height:1.2;padding:10px 12px}
.uxdrop[open] .uxdrop-menu{display:grid}
.uxmenu{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;align-content:flex-start;max-width:68%;margin:0}
.uxbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;border:0;background:linear-gradient(180deg,#1d2a45 0%,#172137 100%);color:#eaf2ff;text-decoration:none;font-weight:850;font-size:13px;line-height:1;letter-spacing:.01em;transition:transform .15s ease,box-shadow .2s ease,filter .2s ease,background .2s ease;box-shadow:0 8px 20px rgba(14,33,72,.35),0 2px 6px rgba(3,8,18,.45),inset 0 1px 0 rgba(185,210,255,.16)}
.uxbtn::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(88,132,255,.5),rgba(60,220,255,.22),rgba(154,92,255,.35));opacity:.35;filter:blur(.2px)}
.uxbtn::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(120,176,255,.9),transparent);opacity:0;transform:scaleX(.65);transition:opacity .2s ease,transform .2s ease}
.uxbtn:hover{transform:translateY(-1px);background:linear-gradient(180deg,#223357 0%,#1a2845 100%);box-shadow:0 14px 30px rgba(36,96,220,.35),0 4px 10px rgba(8,16,32,.45),0 0 24px rgba(75,132,255,.28),inset 0 1px 0 rgba(196,221,255,.22);filter:saturate(1.08)}
.uxbtn:hover::after{opacity:1;transform:scaleX(1)}
.uxbtn:active{transform:translateY(0) scale(.985)}
@media (max-width:1150px){.hero-top{flex-direction:column;align-items:flex-start}.uxmenu{max-width:100%;justify-content:flex-start}}
.info-card{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:14px}
.info-card ul{margin:8px 0 0 18px;padding:0}
.info-card li{margin:6px 0}

/* OPT cabinet */
.opt-shell{max-width:1240px;margin:16px auto}
.opt-card{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 94%,#2f6fed 6%),var(--card));padding:18px;box-shadow:0 14px 30px rgba(0,0,0,.18)}
[hidden]{display:none !important}
.opt-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.opt-tab{padding:8px 12px;border-radius:11px;border:1px solid var(--line);background:#0f1118;color:var(--text);font-weight:700;cursor:pointer}
.opt-tab.on{background:var(--accent);color:#fff;border-color:transparent}
.opt-pane[hidden]{display:none !important}
.opt-id{display:grid;gap:6px;margin:8px 0 12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#0f1118}
.opt-id b{font-size:16px}
.opt-id .ok{color:#2ee58b;font-weight:700}
.opt-id .wait{color:#f0b429;font-weight:700}
.frow select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#0f1118;color:var(--text)}
.opt-actions{display:flex;gap:8px;flex-wrap:wrap}
.opt-ghost{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--text);font-weight:700;cursor:pointer}

.opt-cabinet-shell{margin-top:12px}
.opt-cabinet-grid{display:grid;gap:12px;grid-template-columns:minmax(260px,330px) minmax(420px,1fr) minmax(320px,1fr);align-items:start}
.opt-panel{margin:0;border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,#2f6fed 8%),color-mix(in srgb,var(--card) 97%,#000 3%));box-shadow:0 10px 22px rgba(0,0,0,.2)}
.opt-toolbar .opt-ghost{border-radius:999px;padding:8px 12px}
.opt-orders-list{min-height:220px}
.opt-chat-list{min-height:220px;max-height:420px}
.opt-chat-form textarea{min-height:76px}

@media (max-width:1140px){
  .opt-cabinet-grid{grid-template-columns:minmax(260px,340px) minmax(0,1fr)}
  #optChatWrap{grid-column:1 / -1}
}
@media (max-width:820px){
  .opt-shell{max-width:100%}
  .opt-card{padding:14px}
  .opt-cabinet-grid{grid-template-columns:1fr}
  #optChatWrap{grid-column:auto}
}

/* OPT visual badges */
.opt-live-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;border:1px solid #2aa86a;background:linear-gradient(180deg,#123826,#0f2f1f);color:#c9ffe4;font-size:11px;font-weight:800;line-height:1;white-space:nowrap;box-shadow:0 0 0 0 rgba(46,229,139,.35);animation:optPulse 1.8s ease-in-out infinite;max-width:100%;overflow:hidden}
header.top .opt-live-badge{animation:none}
.opt-live-badge .main{font-weight:900;letter-spacing:.01em}
.opt-live-badge .meta{font-weight:700;opacity:.92;max-width:36ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){
  header.top .searchcol > .opt-live-badge,
  header.top .right > .opt-live-badge{
    grid-area:opt;
    justify-self:start;
    margin:0 0 2px 0;
    max-width:100%;
  }
  .opt-live-badge .meta{max-width:16ch}
}
.opt-live-badge .dot{width:7px;height:7px;border-radius:999px;background:#31e889;box-shadow:0 0 0 5px rgba(49,232,137,.14)}
@keyframes optPulse{0%{box-shadow:0 0 0 0 rgba(46,229,139,.30)}70%{box-shadow:0 0 0 10px rgba(46,229,139,0)}100%{box-shadow:0 0 0 0 rgba(46,229,139,0)}}
.opt-price-badge{position:absolute;right:10px;top:10px;z-index:3;padding:5px 8px;border-radius:999px;border:1px solid #32b270;background:linear-gradient(180deg,#113623,#0f2d1d);color:#c9ffe4;font-size:11px;font-weight:900;letter-spacing:.02em;box-shadow:0 0 0 0 rgba(49,232,137,.25);animation:optPulse 1.8s ease-in-out infinite}
.pbuy .opt-price-badge{position:static;display:inline-flex;margin:6px 0 8px 0}

html[data-theme='light'] .opt-live-badge{border-color:#6ccf9a;background:linear-gradient(180deg,#f3fff8,#e8fff2);color:#0f5130;box-shadow:0 6px 14px rgba(37,120,78,.14)}
html[data-theme='light'] .opt-live-badge .dot{background:#1dbf6b;box-shadow:0 0 0 6px rgba(29,191,107,.18)}
html[data-theme='light'] .opt-price-badge{border-color:#77cfa2;background:linear-gradient(180deg,#f3fff8,#e8fff2);color:#0f5130}

/* Light theme fixes for OPT cabinet controls */
html[data-theme='light'] .opt-tab{background:#f5f9ff;border-color:#b8c7dd;color:#0f172a}
html[data-theme='light'] .opt-tab.on{background:linear-gradient(180deg,#16a34a,#0e8f3f);color:#fff;border-color:#16924a}
html[data-theme='light'] .opt-ghost{background:#f5f9ff;border-color:#b8c7dd;color:#0f172a}
html[data-theme='light'] .opt-id{background:#f7fbff;border-color:#b8c7dd;color:#0f172a}
html[data-theme='light'] .frow select{background:#f6f9ff;border-color:#b8c7dd;color:#0f172a}
html[data-theme='light'] .opt-card{background:linear-gradient(180deg,#ffffff 0%,#f3f8ff 100%);border-color:#b8c7dd;box-shadow:0 14px 26px rgba(16,24,40,.12)}
html[data-theme='light'] .opt-panel{background:linear-gradient(180deg,#ffffff 0%,#f6faff 100%);box-shadow:0 10px 18px rgba(16,24,40,.09)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
@media (max-width:700px){
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  html.mob-grid-2 .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.mob-grid-1 .pgrid{grid-template-columns:repeat(1,minmax(0,1fr))}
}

/* phones: default 2 columns to protect price/title from clipping */
@media (max-width:430px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px}
  html.mob-grid-3 .pgrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  html.mob-grid-2 .pgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  html.mob-grid-1 .pgrid{grid-template-columns:repeat(1,minmax(0,1fr)) !important}
}

/* ultra small phones */
@media (max-width:340px){
  .pgrid{grid-template-columns:repeat(1,minmax(0,1fr)) !important}
  html.mob-grid-3 .pgrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  html.mob-grid-2 .pgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  html.mob-grid-1 .pgrid{grid-template-columns:repeat(1,minmax(0,1fr)) !important}
}
.pcard{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:10px;display:flex;flex-direction:column;gap:10px;position:relative}
.pcard .pact,
.card .pact{margin-top:6px;display:grid;grid-template-columns:minmax(98px,116px) 42px;align-items:center;justify-content:center;gap:8px;width:100%;max-width:100%;margin-left:0;margin-right:0}
.pcard .pact .qbox,
.card .pact .qbox{height:40px;border-radius:12px;width:100%;min-width:98px}
.pcard .pact .qbox button,
.card .pact .qbox button{width:34px;height:40px;font-size:17px}
.pcard .pact .qbox input,
.card .pact .qbox input{width:42px;height:40px;line-height:40px;font-size:14px}
/* Unified cart icon button for product cards */
.pcard .pact .buy,
.card .pact .buy{height:40px;width:42px;min-width:42px;padding:0;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:0;line-height:1;background:linear-gradient(180deg,#1d2435 0%,#141a28 100%);border:1px solid #2d3a55;box-shadow:0 2px 8px rgba(7,10,18,.35);transition:all .14s ease}
.pcard .pact .buy::before,
.card .pact .buy::before{content:"";width:18px;height:18px;display:block;background-repeat:no-repeat;background-position:center;background-size:18px 18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='18' cy='20' r='1.6'/%3E%3Cpath d='M2 3h2.2l2.2 10.2a2 2 0 0 0 2 1.6h8.8a2 2 0 0 0 2-1.6L21 7H6.2'/%3E%3C/svg%3E")}
.pcard .pact .buy:hover,
.card .pact .buy:hover{transform:translateY(-1px);background:linear-gradient(180deg,#25314a 0%,#19253c 100%);border-color:#3a4c70;box-shadow:0 6px 16px rgba(16,24,40,.35)}
.pcard .pact .buy:active,
.card .pact .buy:active{transform:translateY(0) scale(.97)}
.pcard .pact .buy.is-added,
.card .pact .buy.is-added{background:linear-gradient(180deg,#0f9f5f 0%,#0e8a53 100%);border-color:#12b76a;box-shadow:0 0 0 4px rgba(18,183,106,.2)}

html[data-theme='light'] .pcard .pact .buy,
html[data-theme='light'] .card .pact .buy{background:linear-gradient(180deg,#eef4ff 0%,#e3ecfb 100%);border-color:#b9c8df;box-shadow:0 2px 8px rgba(16,24,40,.08)}
html[data-theme='light'] .pcard .pact .buy::before,
html[data-theme='light'] .card .pact .buy::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319243a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='18' cy='20' r='1.6'/%3E%3Cpath d='M2 3h2.2l2.2 10.2a2 2 0 0 0 2 1.6h8.8a2 2 0 0 0 2-1.6L21 7H6.2'/%3E%3C/svg%3E")}
html[data-theme='light'] .pcard .pact .buy:hover,
html[data-theme='light'] .card .pact .buy:hover{background:linear-gradient(180deg,#f5f9ff 0%,#eaf2ff 100%);border-color:#9fb3d1}
.plink{text-decoration:none;color:var(--text);display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.disc{position:absolute;top:10px;left:10px;background:var(--danger);color:#fff;font-weight:800;font-size:12px;padding:6px 8px;border-radius:999px}
.pcmini .disc{top:8px;left:8px;z-index:3;font-size:11px;padding:5px 7px;box-shadow:0 4px 10px rgba(0,0,0,.22)}
.av{display:flex;align-items:center;gap:8px;color:#7fe3a7;font-size:12px;font-weight:800;margin:2px 0}
.pcard .av,.card .av{margin-top:auto}
.pcard .price,.card .price{margin:2px 0 0 0}
/* Keep SKU under title, and bottom stack: availability -> price -> qty/cart */
.pcard .sku,.card .sku{margin-bottom:0}
.av .dot{width:9px;height:9px;border-radius:999px;background:#2ee58b;box-shadow:0 0 0 3px rgba(46,229,139,.12)}
/* Slightly bigger image like Dewalt, but safe (no overflow) */
.pcard img{width:100%;height:170px;object-fit:contain;background:#fff;border-radius:12px;border:1px solid rgba(255,255,255,.10);padding:10px}
@media (max-width:520px){.pcard img{height:155px}}
/* Title block: make it visually separated like a label */
.pt{font-weight:750;line-height:1.2;margin-top:6px;min-height:56px;padding:0;border-radius:0;background:transparent;border:0}
@media (max-width:950px){.layout{grid-template-columns:1fr}.sidebar{position:static;order:2}}

/* Light theme */
html[data-theme='light']{--bg:#f4f6fa;--card:#ffffff;--text:#101828;--muted:#44526c;--line:#c8d3e3;--accent:#16a34a;--danger:#ff3b30}
html[data-theme='light'] body{background:#f4f6fa;color:var(--text)}

/* Dark theme readability boost (less eye strain) */
html[data-theme='dark'] .q,
html[data-theme='dark'] .cartlink,
html[data-theme='dark'] .catbtn,
html[data-theme='dark'] .lang.vert a,
html[data-theme='dark'] .themebtn,
html[data-theme='dark'] .qbox,
html[data-theme='dark'] .tab,
html[data-theme='dark'] .stile,
html[data-theme='dark'] .slink:hover,
html[data-theme='dark'] .slink.on,
html[data-theme='dark'] .pt,
html[data-theme='dark'] .pcmini .b button,
html[data-theme='dark'] .qty button,
html[data-theme='dark'] .qty input,
html[data-theme='dark'] .del,
html[data-theme='dark'] .frow input,
html[data-theme='dark'] .frow textarea{background:#20293a}
html[data-theme='dark'] .lang.vert a{color:#d9e6ff}
html[data-theme='dark'] .themebtn{color:#d9e6ff}
html[data-theme='dark'] #themeLight::before{color:#ffd45c}
html[data-theme='dark'] .lang.vert a.on,
html[data-theme='dark'] .themebtn.on{background:linear-gradient(180deg,#223357 0%,#192845 100%);color:#ffffff;box-shadow:0 10px 20px rgba(28,72,160,.34),0 0 14px rgba(76,130,236,.18),inset 0 1px 0 rgba(208,225,255,.2)}

html[data-theme='dark'] .top{
  background:linear-gradient(180deg,rgba(10,10,12,.96),rgba(8,8,10,.94));
  border-bottom-color:rgba(90,125,255,.28);
  box-shadow:0 6px 22px rgba(0,0,0,.42), inset 0 -1px 0 rgba(120,160,255,.10);
}
html[data-theme='dark'] .top::after{
  background:linear-gradient(90deg,transparent,rgba(96,142,255,.70),rgba(70,220,255,.55),transparent);
  box-shadow:0 0 10px rgba(96,142,255,.45),0 0 22px rgba(70,220,255,.24);
}
html[data-theme='light'] .top{
  position:sticky;
  background:
    linear-gradient(180deg,rgba(255,255,255,.76),rgba(229,236,246,.78)),
    linear-gradient(135deg,#d7dee8 0%,#bcc7d6 28%,#e5ebf3 52%,#b8c2d2 76%,#dfe6f0 100%);
  border-bottom:1px solid #aebbcf;
  box-shadow:0 2px 12px rgba(67,84,110,.18), inset 0 1px 0 rgba(255,255,255,.65);
  
  overflow:visible;
}
html[data-theme='light'] .top::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 220' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-40 58 C 120 18, 230 122, 390 66 C 560 6, 710 130, 880 72 C 1040 16, 1180 126, 1360 68 C 1480 30, 1570 96, 1660 64' stroke='rgba(86,106,132,.36)' stroke-width='2.7'/%3E%3Cpath d='M-70 108 C 100 54, 250 170, 420 110 C 590 48, 740 170, 920 114 C 1080 62, 1240 170, 1420 110 C 1510 80, 1600 136, 1680 112' stroke='rgba(255,255,255,.34)' stroke-width='1.9'/%3E%3Cpath d='M-30 168 C 130 122, 260 230, 440 166 C 620 102, 760 228, 930 168 C 1110 106, 1260 228, 1430 170 C 1530 136, 1610 194, 1700 166' stroke='rgba(98,116,140,.30)' stroke-width='2.2'/%3E%3Cpath d='M1640 44 C 1490 8, 1370 124, 1200 70 C 1030 18, 900 130, 730 76 C 560 22, 430 132, 260 80 C 120 40, 20 110, -60 82' stroke='rgba(255,255,255,.26)' stroke-width='1.6'/%3E%3Cpath d='M1660 146 C 1490 92, 1350 216, 1170 150 C 990 84, 840 214, 670 152 C 500 92, 350 216, 170 154 C 60 118,-10 182,-80 150' stroke='rgba(83,100,126,.28)' stroke-width='2'/%3E%3Cpath d='M200 -14 C 260 30, 260 84, 320 122 C 376 158, 362 190, 420 232' stroke='rgba(255,255,255,.22)' stroke-width='1.3'/%3E%3Cpath d='M520 232 C 585 196, 575 160, 636 124 C 694 90, 694 44, 752 -8' stroke='rgba(88,108,132,.22)' stroke-width='1.3'/%3E%3Cpath d='M930 -14 C 988 24, 988 84, 1048 124 C 1108 164, 1100 194, 1160 232' stroke='rgba(255,255,255,.20)' stroke-width='1.2'/%3E%3Cpath d='M1240 232 C 1300 186, 1290 148, 1350 110 C 1412 70, 1412 26, 1478 -10' stroke='rgba(93,112,136,.20)' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
html[data-theme='light'] .top::after{
  content:"";
  position:absolute;
  inset:-20% -10%;
  pointer-events:none;
  background:radial-gradient(800px 140px at 12% 50%,rgba(255,255,255,.20),transparent 60%),radial-gradient(700px 130px at 84% 50%,rgba(130,148,173,.16),transparent 62%);
  mix-blend-mode:screen;
}
html[data-theme='light'] .top > *{position:relative;z-index:1}
html[data-theme='light'] .footer{border-top:1px solid #e2e8f2;color:#6b778c}
html[data-theme='light'] .warehouse{color:#7f8ba1}
html[data-theme='light'] .faq-mini-btn{border-color:#d0dced;color:#5d6b84;background:#f7faff}
html[data-theme='light'] .faq-mini-btn:hover{color:#253148;border-color:#9db3d6}
html[data-theme='light'] .faq-mini-modal{background:rgba(30,52,84,.2)}
html[data-theme='light'] .faq-mini-card{background:#ffffff;border-color:#dce6f4}
html[data-theme='light'] .faq-mini-head button{color:#7f8ba1}
html[data-theme='light'] .faq-mini-card p{color:#5d6b84}
html[data-theme='light'] .crumbs,
html[data-theme='light'] .crumbs a,
html[data-theme='light'] .sku,
html[data-theme='light'] .m,
html[data-theme='light'] .cs{color:#46556f}

html[data-theme='light'] .q,
html[data-theme='light'] .cartlink,
html[data-theme='light'] .catbtn,
html[data-theme='light'] .lang.vert a,
html[data-theme='light'] .themebtn,
html[data-theme='light'] .qbox,
html[data-theme='light'] .tab,
html[data-theme='light'] .slink:hover,
html[data-theme='light'] .slink.on{background:#f6f9ff}
html[data-theme='light'] .top-contacts a{color:#10203b}
html[data-theme='light'] .top-contacts span{color:#5e6f8c}
html[data-theme='light'] .shipnote{color:#5e6f8c}

html[data-theme='light'] .results,
html[data-theme='light'] .cathint,
html[data-theme='light'] .catpop,
html[data-theme='light'] .sidepop{background:#fff;border-color:#d3dceb}
html[data-theme='light'] .cathint{box-shadow:0 16px 36px rgba(18,34,60,.16)}
html[data-theme='light'] .cathint .go,
html[data-theme='light'] .cathint .more,
html[data-theme='light'] #catHint .stile,
html[data-theme='light'] .catpop .stile,
html[data-theme='light'] .sidepop .stile{background:#f1f4f8;border-color:#c8d2e1;color:#0f172a}
html[data-theme='light'] #catHint .stile:hover,
html[data-theme='light'] .catpop .stile:hover,
html[data-theme='light'] .sidepop .stile:hover{background:#eaf0f8}
/* Home redesign: warehouse + brand market */
.home-hero-pro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:18px;margin:2px 0 22px 0;padding:22px;border:1px solid color-mix(in srgb,var(--line) 78%,#2f6fed 22%);border-radius:18px;background:linear-gradient(135deg,#142033 0%,#1d3354 42%,#f3f7fb 42.2%,#ffffff 100%);box-shadow:0 18px 42px rgba(17,36,72,.16);overflow:hidden;position:relative}
.home-hero-pro::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,12,24,.22),transparent 48%),repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 1px,transparent 1px 16px);pointer-events:none}
.home-hero-copy,.home-hero-visual{position:relative;z-index:1}
.home-hero-copy{display:flex;flex-direction:column;justify-content:center;min-height:350px;color:#fff;max-width:760px}
.home-hero-kicker{display:inline-flex;width:max-content;max-width:100%;padding:7px 11px;border-radius:999px;background:#e7fff1;color:#096336;border:1px solid #7bd8a5;font-weight:900;font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.home-hero-copy h1{margin:14px 0 10px 0;font-size:clamp(30px,4.2vw,58px);line-height:.96;letter-spacing:0;color:#fff;text-wrap:balance}
.home-hero-copy p{margin:0;color:#d7e6fa;font-size:18px;line-height:1.45;max-width:620px}
.home-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.home-hero-actions .vh-btn{min-height:44px;border-radius:12px}
.home-hero-actions .vh-btn.ghost{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.26);box-shadow:none}
.home-hero-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:22px;max-width:650px}
.home-hero-proof span{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.09);backdrop-filter:blur(4px);font-size:23px;line-height:1;font-weight:950;color:#fff}
.home-hero-proof small{font-size:11px;line-height:1.15;color:#cbdcf1;font-weight:800}
.home-hero-visual{align-self:stretch;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:16px;background:rgba(255,255,255,.80);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 32px rgba(20,41,76,.14)}
.home-hero-visual-title{font-weight:950;color:#16243a;text-transform:uppercase;letter-spacing:.03em;font-size:13px}
.home-hero-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1}
.home-hero-shot{min-height:142px;display:flex;flex-direction:column;text-decoration:none;color:#142033;border:1px solid #d4dfed;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 10px 20px rgba(16,36,70,.10)}
.home-hero-shot img,.home-hero-shot .hc-ph{width:100%;height:116px;object-fit:contain;background:#f7fafc;padding:8px;display:block}
.home-hero-shot span{padding:8px 9px;font-size:12px;font-weight:850;line-height:1.12;min-height:42px}
.home-categories-pro{margin:0 0 24px 0}
.home-cat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.home-cat-tile{display:flex;flex-direction:column;min-height:178px;text-decoration:none;color:var(--text);border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;box-shadow:0 10px 24px rgba(16,36,70,.08);transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.home-cat-tile:hover{transform:translateY(-2px);border-color:#7fa9e8;box-shadow:0 18px 34px rgba(29,73,139,.15)}
.home-cat-img{height:118px;display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:1px solid rgba(16,24,40,.08)}
.home-cat-img img{width:100%;height:100%;object-fit:contain;padding:8px}
.home-cat-name{font-weight:900;font-size:13px;line-height:1.16;padding:9px 10px 0 10px}
.home-cat-meta{font-size:11px;color:var(--muted);font-weight:800;padding:3px 10px 10px 10px;margin-top:auto;line-height:1.15;white-space:normal}
.hc-ph{background:linear-gradient(135deg,#eaf0f8,#ffffff)}
.bsec{margin:2px 0 26px 0}
.btiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.btile{border-radius:14px;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);border-color:#b9c9df;box-shadow:0 10px 24px rgba(20,41,76,.09)}
.btile:hover{border-color:#7fa9e8;box-shadow:0 16px 32px rgba(29,73,139,.15)}
.btile img{aspect-ratio:1.22/1;height:auto;padding:18px;background:#fff}
.btile .bn{padding:8px 10px 0 10px;font-size:13px;font-weight:900}
.btile .bm{padding:3px 10px 10px 10px;font-size:11px;font-weight:750}
html[data-theme='dark'] .home-hero-pro{background:linear-gradient(135deg,#0d1525 0%,#152844 48%,#111827 48.2%,#151d2c 100%);box-shadow:0 18px 42px rgba(0,0,0,.26)}
html[data-theme='dark'] .home-hero-visual{background:rgba(20,31,48,.86)}
html[data-theme='dark'] .home-hero-visual-title{color:#edf5ff}
html[data-theme='dark'] .home-hero-shot{background:#111827;color:#edf5ff;border-color:#2b3950}
html[data-theme='dark'] .home-hero-shot img,html[data-theme='dark'] .home-cat-img{background:#fff}
html[data-theme='dark'] .btile{background:linear-gradient(180deg,#151d2c,#111827);border-color:#2b3950}
@media (max-width:1280px){.home-cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.home-hero-pro{grid-template-columns:1fr}.home-hero-copy{min-height:300px;max-width:none}.home-hero-visual{max-width:none}.home-hero-shots{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.home-hero-pro{padding:16px;border-radius:14px}.home-hero-copy{min-height:auto}.home-hero-copy h1{font-size:34px}.home-hero-copy p{font-size:15px}.home-hero-proof{grid-template-columns:repeat(2,minmax(0,1fr))}.home-hero-shots{grid-template-columns:repeat(2,minmax(0,1fr))}.home-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.home-cat-tile{min-height:158px}.home-cat-img{height:100px}.btiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
html[data-theme='light'] #catHint .stile img,
html[data-theme='light'] .catpop .stile img,
html[data-theme='light'] .sidepop .stile img{background:#f6f7f9}
html[data-theme='light'] .catpop .stile .n,
html[data-theme='light'] .sidepop .stile .n{color:#0f172a}

html[data-theme='dark'] .cathint{background:#161d29;border-color:#2f3b50;box-shadow:0 18px 40px rgba(0,0,0,.45)}
html[data-theme='dark'] .cathint .go,
html[data-theme='dark'] .cathint .more{background:#202a3b;border-color:#33445f;color:#eaf1ff}
html[data-theme='dark'] #catHint .stile{background:#1b2433;border-color:#33445f;color:#eaf1ff}
html[data-theme='dark'] #catHint .stile:hover{background:#222e42}
html[data-theme='dark'] #catHint .stile img{background:#eef2f7}

html[data-theme='light'] .sframe,
html[data-theme='light'] .pcard,
html[data-theme='light'] .pbuy,
html[data-theme='light'] .pmain,
html[data-theme='light'] .tpanel,
html[data-theme='light'] .citem,
html[data-theme='light'] .list a,
html[data-theme='light'] .card,
html[data-theme='light'] .gtile,
html[data-theme='light'] .btile,
html[data-theme='light'] .pcmini{background:#fff;border-color:#d3dceb;box-shadow:0 1px 3px rgba(16,24,40,.05)}

html[data-theme='light'] .brand,
html[data-theme='light'] .h2l,
html[data-theme='light'] .title,
html[data-theme='light'] .pt,
html[data-theme='light'] .t,
html[data-theme='light'] .bn,
html[data-theme='light'] .sn,
html[data-theme='light'] h1,
html[data-theme='light'] h2,
html[data-theme='light'] h3{color:#0f172a}

html[data-theme='light'] .brand{
  background:linear-gradient(115deg,#1f9b62 0%,#2877d4 30%,#d23b3b 55%,#2c8e66 78%,#2d73ca 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:1px #000;
  text-shadow:0 1px 0 rgba(255,255,255,.75),0 7px 16px rgba(28,44,68,.24);
}
html[data-theme='light'] .brand::after{background:linear-gradient(90deg,transparent,rgba(40,119,212,.55),rgba(210,59,59,.52),transparent)}

html[data-theme='light'] .av{color:#0f9f5f}
html[data-theme='light'] .av .dot{background:#12b76a;box-shadow:0 0 0 3px rgba(18,183,106,.16)}
html[data-theme='light'] .price .old{color:var(--danger);opacity:.6}
html[data-theme='light'] .price .new{color:var(--accent)}

html[data-theme='light'] .thumb{background:#eef3fb;border-color:#d3dceb}
html[data-theme='light'] .btile .bph{background:linear-gradient(160deg,#f4f8ff,#e9f1ff);color:#1c355a;border-bottom:1px solid #d3dceb}
html[data-theme='light'] .slink{border-bottom:1px solid rgba(15,23,42,.08)}
html[data-theme='light'] .slink:first-child{border-top:1px solid rgba(15,23,42,.08)}
html[data-theme='light'] .lang.vert a{color:#10203b;background:linear-gradient(180deg,#ffffff 0%,#edf4ff 100%);box-shadow:0 6px 14px rgba(46,94,176,.14),inset 0 1px 0 rgba(255,255,255,.95)}
html[data-theme='light'] .lang.vert a::after{background:linear-gradient(90deg,transparent,rgba(45,119,212,.55),transparent)}
html[data-theme='light'] .lang.vert a.on{color:#0f172a;background:linear-gradient(180deg,#ffffff 0%,#e8f1ff 100%);box-shadow:0 10px 18px rgba(56,112,198,.22),0 0 12px rgba(76,150,234,.16),inset 0 1px 0 rgba(255,255,255,.98)}
html[data-theme='light'] .pcard:hover,
html[data-theme='light'] .card:hover,
html[data-theme='light'] .gtile:hover,
html[data-theme='light'] .btile:hover{border-color:#90a7c8;box-shadow:0 6px 18px rgba(15,23,42,.10);transform:translateY(-2px)}

/* Light theme: top UX buttons */
html[data-theme='light'] .uxbtn{border:0;background:linear-gradient(180deg,#ffffff 0%,#edf4ff 100%);color:#10203b;box-shadow:0 8px 18px rgba(46,94,176,.16),0 2px 6px rgba(16,24,40,.1),inset 0 1px 0 rgba(255,255,255,.95)}
html[data-theme='light'] .uxbtn::before{background:linear-gradient(120deg,rgba(62,129,232,.34),rgba(77,196,255,.2),rgba(114,93,233,.2));opacity:.42}
html[data-theme='light'] .uxbtn::after{background:linear-gradient(90deg,transparent,rgba(45,119,212,.62),transparent)}
html[data-theme='light'] .uxbtn:hover{background:linear-gradient(180deg,#ffffff 0%,#e8f1ff 100%);box-shadow:0 14px 28px rgba(45,119,212,.24),0 0 22px rgba(72,150,255,.2),inset 0 1px 0 rgba(255,255,255,.98);transform:translateY(-1px)}
html[data-theme='light'] .uxdrop summary{background:linear-gradient(180deg,#ffffff 0%,#edf4ff 100%);border-color:#b8c6db;color:#17345f;box-shadow:0 6px 14px rgba(56,92,148,.16), inset 0 1px 0 rgba(255,255,255,.98)}
html[data-theme='light'] .uxdrop-menu{background:color-mix(in srgb,var(--bg) 93%, #d7e7ff 7%);border-color:#bfd0e8}

/* Light theme: catalog button same premium style */
html[data-theme='light'] .catbtn{border:0;background:linear-gradient(180deg,#ffffff 0%,#edf4ff 100%);color:#10203b;box-shadow:0 8px 18px rgba(46,94,176,.16),0 2px 6px rgba(16,24,40,.1),inset 0 1px 0 rgba(255,255,255,.95)}
html[data-theme='light'] .catbtn::before{background:linear-gradient(120deg,rgba(62,129,232,.34),rgba(77,196,255,.2),rgba(114,93,233,.2));opacity:.42}
html[data-theme='light'] .catbtn::after{background:linear-gradient(90deg,transparent,rgba(45,119,212,.62),transparent)}
html[data-theme='light'] .catbtn:hover{background:linear-gradient(180deg,#ffffff 0%,#e8f1ff 100%);box-shadow:0 14px 28px rgba(45,119,212,.24),0 0 22px rgba(72,150,255,.2),inset 0 1px 0 rgba(255,255,255,.98);transform:translateY(-1px)}
html[data-theme='light'] .aibtn{background:linear-gradient(180deg,#ffffff 0%,#eff5ff 100%);color:#10203b;box-shadow:0 8px 16px rgba(46,94,176,.14),0 2px 6px rgba(16,24,40,.09),inset 0 1px 0 rgba(255,255,255,.95)}
html[data-theme='light'] .aibtn::after{background:linear-gradient(90deg,transparent,rgba(45,119,212,.54),transparent)}
html[data-theme='light'] .aibtn:hover{background:linear-gradient(180deg,#ffffff 0%,#e9f2ff 100%);box-shadow:0 12px 24px rgba(45,119,212,.2),inset 0 1px 0 rgba(255,255,255,.98)}

/* Light theme polish: brighter cart/add buttons, white scrollbars, stronger card borders */
html[data-theme='light'] *{scrollbar-color:#c4d2e6 #f4f7fc}
html[data-theme='light'] *::-webkit-scrollbar-track{background:#f4f7fc}
html[data-theme='light'] *::-webkit-scrollbar-thumb{background:#c4d2e6;border:2px solid #f4f7fc}
html[data-theme='light'] *::-webkit-scrollbar-thumb:hover{background:#aebfd9}

html[data-theme='light'] .pcmini .b button,
html[data-theme='light'] .qty button,
html[data-theme='light'] .qty input,
html[data-theme='light'] .del,
html[data-theme='light'] .frow input,
html[data-theme='light'] .frow textarea{background:#f6f9ff;border-color:#b8c7dd;color:#0f172a}

html[data-theme='light'] .pcmini .b button:hover,
html[data-theme='light'] .qty button:hover,
html[data-theme='light'] .del:hover{background:#edf3fd}

html[data-theme='light'] .sframe,
html[data-theme='light'] .pcard,
html[data-theme='light'] .pbuy,
html[data-theme='light'] .pmain,
html[data-theme='light'] .tpanel,
html[data-theme='light'] .citem,
html[data-theme='light'] .list a,
html[data-theme='light'] .card,
html[data-theme='light'] .gtile,
html[data-theme='light'] .btile,
html[data-theme='light'] .pcmini,
html[data-theme='light'] .gblock,
html[data-theme='light'] .stile{border-color:#b8c7dd}

/* Mobile stabilization patch (safe) */
@media (max-width: 900px){
  .layout{grid-template-columns:1fr;gap:12px}
  .sidebar{display:none !important}
  .sidepop,.cathint,.catpop{display:none !important}
  .wrap{padding:10px}
}
@media (max-width: 700px){
  .top{gap:8px;flex-wrap:wrap;align-items:center}
  .right{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "search search"
      "cart switches"
      "opt opt";
    gap:6px;
    align-items:center;
  }
  .searchcol{grid-area:search;min-width:0}
  .search{min-width:0}
  .q{width:100% !important;min-width:0}
  .cartlink{grid-area:cart;white-space:nowrap;min-width:0;padding:8px}
  .switches{grid-area:switches;flex-direction:row;gap:6px;align-items:center;justify-self:end}
  .lang.vert{flex-direction:row;gap:6px}

  .opt-live-badge{font-size:10px;padding:4px 8px;max-width:100%;line-height:1.05}
  .opt-live-badge .meta{max-width:16ch}

  /* Mobile: 3 cards in row for categories/brands/groups */
  .gtiles,
  .btiles,
  .btiles.all,
  .stiles,
  #sidePop #sideTiles.stiles,
  #catHint .stiles,
  #catPop .stiles{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px;
  }

  /* tighter cards for mobile readability */
  .gtile,.btile,.stile{border-radius:12px}
  .gname,.bname,.sname{font-size:12px;line-height:1.2}
}

/* wide phones (431+): keep controls visible and comfy */
@media (min-width: 431px) and (max-width: 700px){
  .right{grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
  .lang.vert a{min-width:40px;height:30px;padding:0 8px}
  .cartlink{padding:8px 10px}
}

/* regular phones (361-430) */
@media (min-width: 361px) and (max-width: 430px){
  .right{grid-template-columns:minmax(0,1fr) auto auto;gap:6px}
  .lang.vert a{min-width:36px;height:30px;padding:0 6px}
  .cartlink{font-size:12px}
  .gtiles,.btiles,.btiles.all,.stiles,#sidePop #sideTiles.stiles,#catHint .stiles,#catPop .stiles{gap:8px}
}

/* small phones (<=360): still 3 columns, but compact */
@media (max-width: 360px){
  .top{padding:10px 10px}
  .wrap{padding:8px}
  .right{grid-template-columns:minmax(0,1fr) auto;gap:4px}
  .catbtn{min-width:84px;padding:8px 10px;font-size:12px}
  .cartlink{padding:7px 8px;font-size:11px}
  .lang.vert a{min-width:32px;height:28px;padding:0 4px;font-size:11px}
  .themebtn{min-width:32px;height:28px}
  .opt-live-badge .meta{display:none}
  .gtiles,.btiles,.btiles.all,.stiles,#sidePop #sideTiles.stiles,#catHint .stiles,#catPop .stiles{gap:6px}
  .gname,.bname,.sname{font-size:11px}
}

/* compact product cards for mobile catalog/group lists */
@media (max-width:700px){
  .pgrid .pcard{padding:6px;gap:6px;border-radius:12px;min-width:0}
  .pgrid .pcard img{height:94px;padding:6px;border-radius:10px}
  .pgrid .pcard .pt{font-size:12px;line-height:1.2;min-height:0;margin-top:2px}
  .pgrid .pcard .sku,.pgrid .pcard .av,.pgrid .pcard .price{font-size:11px}

  /* mobile price anti-overflow */
  .pgrid .pcard .price{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline;min-width:0}
  .pgrid .pcard .price .old{font-size:11px}
  .pgrid .pcard .price .new{font-size:clamp(16px,5vw,19px) !important;line-height:1.05;max-width:100%}

  .pgrid .pcard .pact{grid-template-columns:minmax(68px,1fr) 34px;gap:6px}
  .pgrid .pcard .pact .qbox{height:34px;min-width:68px}
  .pgrid .pcard .pact .qbox button{width:24px;height:34px;font-size:14px}
  .pgrid .pcard .pact .qbox input{width:22px;height:34px;line-height:34px;font-size:12px}
  .pgrid .pcard .pact .buy{width:34px;min-width:34px;height:34px;border-radius:10px}
  .pgrid .pcard .pact .buy::before{width:15px;height:15px;background-size:15px 15px}
  .pgrid .pcard .opt-price-badge{top:6px;right:6px;padding:4px 6px;font-size:10px}
  .pgrid .pcard .disc{top:6px;left:6px;font-size:10px;padding:4px 6px}
}
@media (max-width:700px){html.mob-grid-2 .pgrid .pcard img{height:118px}}

/* ===========================
   HOME VH PANEL (FINAL, SINGLE SOURCE OF TRUTH)
   (единственное место для .vh-*)
   =========================== */

.vh-panel{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:16px;
  margin:12px 0 18px;
  align-items:stretch;
  max-width:100%;
}
@media (max-width:1280px){ .vh-panel{max-width:100%; margin:12px 0 16px;} }
@media (max-width:900px){ .vh-panel{grid-template-columns:1fr} }

/* Mobile collapse for the two homepage info panels */
.vh-mobile-shell{position:relative}
.vh-mobile-shortcuts{display:none}
.vh-pane-toggle{display:none}

@media (max-width:700px){
  .vh-mobile-shell .vh-panel{padding-top:0;gap:12px}

  .vh-pane-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    position:absolute;right:8px;top:8px;z-index:8;
    width:34px;height:34px;border-radius:999px;border:1px solid var(--line);
    background:linear-gradient(180deg,#1f2f54,#162544);color:#edf4ff;
    font-weight:900;line-height:1;cursor:pointer;
    box-shadow:0 8px 18px rgba(8,18,40,.35), inset 0 1px 0 rgba(255,255,255,.18);
    transition:transform .16s ease, box-shadow .2s ease, filter .2s ease;
  }
  .vh-pane-toggle:active{transform:scale(.97)}
  .vh-pane-toggle:hover{filter:brightness(1.05)}

  .vh-mobile-shell.is-main-collapsed [data-vh-pane='main']{display:none}
  .vh-mobile-shell.is-metrics-collapsed [data-vh-pane='metrics']{display:none}

  .vh-mobile-shortcuts{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
    margin:6px 0 12px;
  }

  .vh-shortcut{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:2px;
    min-height:54px;
    border-radius:12px;
    padding:8px 10px;
    text-decoration:none;
    border:1px solid var(--line);
    overflow:hidden;
    box-shadow:0 10px 24px rgba(8,18,40,.28), inset 0 1px 0 rgba(255,255,255,.12);
  }
  .vh-shortcut::before{
    content:'';
    position:absolute;inset:0;
    background:radial-gradient(130px 60px at 15% 0%, rgba(255,255,255,.16), transparent 70%);
    pointer-events:none;
  }
  .vh-shortcut::after{
    content:'';
    position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:999px;
    opacity:.95;
  }
  .vh-shortcut-kicker{font-size:9px;opacity:.86;text-transform:uppercase;letter-spacing:.4px}
  .vh-shortcut-title{font-size:14px;font-weight:900;line-height:1.05;letter-spacing:.15px}

  .vh-shortcut-catalog{
    background:linear-gradient(160deg,#1f3f7e 0%, #1a2f5e 58%, #122245 100%);
    color:#f4f8ff;
  }
  .vh-shortcut-catalog::after{background:linear-gradient(90deg,transparent,#79b7ff,transparent)}

  .vh-shortcut-opt{
    background:linear-gradient(160deg,#3a2754 0%, #2e2247 56%, #201938 100%);
    color:#f8f2ff;
  }
  .vh-shortcut-opt::after{background:linear-gradient(90deg,transparent,#c7a0ff,transparent)}

  .vh-shortcut-chat{
    background:linear-gradient(160deg,#1c5a56 0%, #184946 56%, #133a38 100%);
    color:#eefcf9;
  }
  .vh-shortcut-chat::after{background:linear-gradient(90deg,transparent,#4de1c8,transparent)}
}

html[data-theme='light'] .vh-pane-toggle{
  background:linear-gradient(180deg,#ffffff,#e6f0ff);
  border-color:#b8c9e4;
  color:#123460;
  box-shadow:0 8px 16px rgba(18,52,96,.18), inset 0 1px 0 rgba(255,255,255,.95);
}
html[data-theme='light'] .vh-shortcut{
  border-color:#b9cae2;
  box-shadow:0 12px 24px rgba(18,52,96,.14), inset 0 1px 0 rgba(255,255,255,.92);
}
html[data-theme='light'] .vh-shortcut-catalog{
  color:#0f294a;
  background:linear-gradient(165deg,#eaf3ff 0%, #dbeaff 55%, #d2e4ff 100%);
}
html[data-theme='light'] .vh-shortcut-catalog::after{background:linear-gradient(90deg,transparent,#2e7de1,transparent)}
html[data-theme='light'] .vh-shortcut-opt{
  color:#311a4e;
  background:linear-gradient(165deg,#f4ebff 0%, #eadcff 56%, #dfceff 100%);
}
html[data-theme='light'] .vh-shortcut-opt::after{background:linear-gradient(90deg,transparent,#8b5fe0,transparent)}
html[data-theme='light'] .vh-shortcut-chat{
  color:#0d3a36;
  background:linear-gradient(165deg,#e8fffb 0%, #d6f8f1 56%, #c9f3ea 100%);
}
html[data-theme='light'] .vh-shortcut-chat::after{background:linear-gradient(90deg,transparent,#1ca089,transparent)}

.vh-main,.vh-metrics{
  position:relative;
  border-radius:20px;
  padding:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
}

/* Заголовки и подзаголовки */
.vh-main h2{
  margin:0 0 6px;
  font-size:clamp(18px,1.42vw,28px);
  line-height:1.08;
  font-weight:840;
  letter-spacing:.2px;
}
.vh-main p{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.24;
  font-weight:600;
}

.vh-metrics h3{
  margin:0 0 12px;
  font-size:clamp(18px,1.3vw,24px);
  line-height:1.1;
  font-weight:840;
  letter-spacing:.2px;
}

/* Сетка метрик */
.vh-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){ .vh-grid{grid-template-columns:1fr} }

/* Текст внутри метрик */
.vh-grid b,.vh-grid .vh-metric-title{
  display:block;font-weight:900;line-height:1.02;margin:0 0 2px;
  font-size:clamp(20px,1.5vw,30px);
}
.vh-grid small{display:block;font-size:12.5px;line-height:1.18;margin-bottom:4px}
.vh-sub{display:block;font-size:13px;line-height:1.25}

/* ---------------------------
   LIGHT THEME (эталон: clean premium)
   --------------------------- */
html[data-theme='light'] .vh-main{
  border:1px solid rgba(158,176,206,.45);
  background:
    radial-gradient(760px 320px at 5% 5%, rgba(79,145,245,.14), transparent 60%),
    radial-gradient(760px 320px at 95% 10%, rgba(236,72,153,.11), transparent 62%),
    linear-gradient(180deg,#f4f8ff 0%,#edf2fb 100%);
  box-shadow:0 16px 34px rgba(32,58,96,.13), inset 0 1px 0 rgba(255,255,255,.95);
}
html[data-theme='light'] .vh-metrics{
  border:1px solid rgba(158,176,206,.45);
  background:
    radial-gradient(760px 320px at 10% 10%, rgba(236,72,153,.10), transparent 62%),
    radial-gradient(760px 320px at 88% 12%, rgba(79,145,245,.12), transparent 62%),
    linear-gradient(180deg,#f2f8ff 0%,#eaf3f5 100%);
  box-shadow:0 16px 34px rgba(32,58,96,.13), inset 0 1px 0 rgba(255,255,255,.95);
}
html[data-theme='light'] .vh-main h2,
html[data-theme='light'] .vh-metrics h3{color:#0b1f3f}
html[data-theme='light'] .vh-main p{color:#2a3f63}

html[data-theme='light'] .vh-grid > div{
  border-radius:18px;
  padding:12px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,250,255,.72));
  border:1px solid rgba(153,174,205,.42);
  box-shadow:0 10px 24px rgba(32,58,96,.10), inset 0 1px 0 rgba(255,255,255,.95);
}
html[data-theme='light'] .vh-grid b,
html[data-theme='light'] .vh-grid .vh-metric-title{color:#081a38;text-shadow:none}
html[data-theme='light'] .vh-grid small,
html[data-theme='light'] .vh-sub{color:rgba(13,32,64,.72)}
html[data-theme='light'] .vh-grid > div:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(32,58,96,.14), inset 0 1px 0 rgba(255,255,255,.98)}

/* ---------------------------
   DARK THEME (rich premium)
   --------------------------- */
html[data-theme='dark'] .vh-main,
html[data-theme='dark'] .vh-metrics{
  border:1px solid rgba(136,172,228,.32);
  background:
    radial-gradient(760px 300px at 8% 0%, rgba(64,120,235,.30), transparent 62%),
    radial-gradient(760px 300px at 92% 100%, rgba(196,72,168,.22), transparent 62%),
    linear-gradient(180deg,#0d1730 0%,#070f23 100%);
  box-shadow:0 20px 44px rgba(0,0,0,.40), inset 0 1px 0 rgba(192,216,255,.13);
}
html[data-theme='dark'] .vh-main h2,
html[data-theme='dark'] .vh-metrics h3{color:#f3f8ff}
html[data-theme='dark'] .vh-main p{color:rgba(228,238,255,.86)}

html[data-theme='dark'] .vh-grid > div{
  border-radius:18px;
  padding:12px 14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 56%),
    linear-gradient(180deg,rgba(58,115,228,.42),rgba(11,21,42,.62));
  border:1px solid rgba(166,202,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 28px rgba(0,0,0,.28);
}
html[data-theme='dark'] .vh-grid b,
html[data-theme='dark'] .vh-grid .vh-metric-title{color:#f8fbff;text-shadow:0 1px 0 rgba(0,0,0,.25)}
html[data-theme='dark'] .vh-grid small,
html[data-theme='dark'] .vh-sub{color:rgba(235,245,255,.88)}
html[data-theme='dark'] .vh-grid > div:hover{transform:translateY(-1px);border-color:rgba(196,223,255,.44)}
/* ===== VH LEFT LIST: разделители + аккуратные иконки ===== */

/* строки преимуществ */
/* строки преимуществ — компактно, иконка слева, заголовок рядом */
.vh-tags.vh-rows .vh-row{
  position:relative;
  display:flex;          /* важно */
  align-items:center;
  gap:10px;
  padding:9px 12px;      /* чуть компактнее */
}

/* заголовок рядом с иконкой */
.vh-tags.vh-rows .vh-row b{
  display:inline;
  font-size:16px;
  line-height:1.15;
}

/* описание ниже, не распирает высоту */
.vh-tags.vh-rows .vh-row small{
  display:block;
  margin-left:0;
  margin-top:2px;
  font-size:13px;
  line-height:1.2;
}

/* тонкая разделительная линия между строками */
.vh-tags.vh-rows .vh-row + .vh-row{
  border-top:1px solid rgba(15,23,42,.10);
}

/* в тёмной теме линия чуть светлее */
html[data-theme='dark'] .vh-tags.vh-rows .vh-row + .vh-row{
  border-top:1px solid rgba(255,255,255,.10);
}

/* иконка слева — делаем “культурный бейдж” */
.vh-ico{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:16px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 8px 18px rgba(15,23,42,.10);
}

/* dark */
html[data-theme='dark'] .vh-ico{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}

/* ===== VH ACTIONS: CTA кнопки (primary/secondary + hover/active/focus) ===== */
.vh-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(15,23,42,.10);
}
html[data-theme='dark'] .vh-actions{
  border-top:1px solid rgba(255,255,255,.10);
}

/* базовая кнопка */
.vh-actions .vh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  font-weight:850;
  font-size:14px;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;

  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.70);
  color:#0f172a;

  box-shadow:0 10px 22px rgba(15,23,42,.10);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease;
}

/* PRIMARY */
.vh-actions .vh-btn.primary{
  background:linear-gradient(180deg,#e8f1ff 0%, #cfe2ff 100%);
  border-color:rgba(59,130,246,.35);
  box-shadow:
    0 12px 26px rgba(15,23,42,.12),
    0 0 0 0 rgba(59,130,246,0);
}

/* hover */
.vh-actions .vh-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(15,23,42,.14);
}
.vh-actions .vh-btn.primary:hover{
  border-color:rgba(59,130,246,.55);
  filter:saturate(1.03);
  box-shadow:
    0 18px 36px rgba(15,23,42,.16),
    0 0 0 3px rgba(59,130,246,.14);
}

/* active (ощущение “нажатия”) */
.vh-actions .vh-btn:active{
  transform:translateY(0px) scale(.99);
  box-shadow:0 10px 22px rgba(15,23,42,.10);
}

/* focus (клавиатура/доступность) */
.vh-actions .vh-btn:focus-visible{
  outline:none;
  box-shadow:
    0 16px 32px rgba(15,23,42,.14),
    0 0 0 3px rgba(59,130,246,.18);
}

/* DARK tweaks */
html[data-theme='dark'] .vh-actions .vh-btn{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.16);
  color:#eef4ff;
  box-shadow:0 14px 34px rgba(0,0,0,.30);
}
html[data-theme='dark'] .vh-actions .vh-btn.primary{
  background:linear-gradient(180deg, rgba(59,130,246,.28), rgba(59,130,246,.12));
  border-color:rgba(147,197,253,.35);
}
html[data-theme='dark'] .vh-actions .vh-btn.primary:hover{
  border-color:rgba(190,220,255,.45);
  box-shadow:
    0 18px 40px rgba(0,0,0,.34),
    0 0 0 3px rgba(147,197,253,.14);
}


/* ===== FIX: левую панель обратно сделать компактной (не трогая правую) ===== */

/* общий паддинг левой панели меньше */
.vh-main{
  padding:14px 16px !important;
}

/* строки преимуществ — компактнее */
.vh-tags.vh-rows{
  gap:8px !important;
  margin:0 0 10px !important;
}

/* каждая строка — меньше вертикальных отступов */
.vh-tags.vh-rows .vh-row{
  padding:9px 12px !important;
  min-height:44px; /* держит “как раньше”, но без раздувания */
}

/* чтобы текст не распирал строку */
.vh-tags.vh-rows .vh-row b{
  font-size:16px !important;
  line-height:1.15 !important;
}

.vh-tags.vh-rows .vh-row small{
  font-size:13px !important;
  line-height:1.2 !important;
}

/* кнопки снизу — не раздуваем */
.vh-actions{
  margin-top:auto !important;   /* уводит вниз */
  padding-top:10px !important;
}
/* ===== FINAL TIGHTEN: убрать последний лишний сантим ===== */

/* 1. Чуть меньше низа у левой панели */
.vh-main{
  padding-bottom:10px;   /* было визуально больше */
}

/* 2. У последней строки преимуществ убрать лишний низ */
.vh-tags.vh-rows .vh-row:last-child{
  margin-bottom:0;
}

/* 3. Кнопки — плотнее к контенту */
.vh-actions{
  margin-top:8px;        /* было ~12–14 */
  padding-top:8px;
}


/* ===== MOBILE PASS (global site polish) ===== */
@media (max-width:700px){
  .wrap{padding:10px}
  h1{font-size:24px;line-height:1.12;margin:6px 0 10px}
  h2{font-size:20px;line-height:1.15}
  .top{padding:10px 10px}
  .catbtn,.aibtn,.uxbtn,.cartlink{min-height:40px}

  /* Catalog/product cards */
  .hscroll{gap:10px;padding:6px 0 10px}
  .hscroll .pcard{flex:0 0 188px;width:188px;max-width:188px}
  .hscroll2{grid-auto-columns:156px;gap:8px;padding:4px 0 10px}
  .hscroll2 .pcard{width:156px;max-width:156px;min-height:262px;padding:7px}
  .hscroll2 .pcard img{height:98px}
  .hscroll2 .pt{font-size:12px;min-height:38px}
  .pcard .pt{font-size:12px;line-height:1.2;min-height:42px}

  /* Forms */
  .frow input,.frow textarea{font-size:16px} /* prevent iOS zoom */

  /* Cart mobile readability */
  .cart-checkout-shell{gap:12px}
  .receipt-card,.checkout-card{padding:12px;border-radius:14px}
  .receipt-title{font-size:16px}
  .sum{font-size:20px}
  .go-checkout{display:none !important;} /* keep only one CTA button */
  .checkout-submit{padding:13px 14px;font-size:16px;border-radius:13px}
}

@media (max-width:430px){
  .brand{font-size:175%}
  .hscroll .pcard{flex:0 0 172px;width:172px;max-width:172px}
  .hscroll2{grid-auto-columns:146px;gap:7px}
  .hscroll2 .pcard{width:146px;max-width:146px;min-height:248px}
  .hscroll2 .pcard img{height:88px}
  .citem{grid-template-columns:62px 1fr 32px;padding:9px}
  .citem img{width:62px;height:62px}
  .ci .t{font-size:13px}
  .ci .m{font-size:12px}
  .qty button{width:34px;height:34px}
  .qty input{width:58px;height:34px}
}


/* ===== OPT redesign pass: hierarchy + orders + chat + mobile nav ===== */
.opt-card{padding:16px}
.opt-panel{padding:14px}
.opt-ghost{background:color-mix(in srgb,var(--card) 92%, #203355 8%)}
.buy{font-weight:800}

.opt-cab-nav{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.opt-cab-btn{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#0f1118;color:var(--text);font-weight:700}
.opt-cab-btn.on{background:linear-gradient(180deg,#2b78ea,#1f5fbf);border-color:#2f6ed3;color:#fff}

.opt-order-row{padding:10px 0;border-bottom:1px dashed var(--line)}
.opt-order-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.opt-status{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid var(--line)}
.st-new{background:rgba(59,130,246,.16);border-color:rgba(59,130,246,.45);color:#9ec5ff}
.st-accepted{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.45);color:#8de4bf}
.st-shipped{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.44);color:#f6cf81}
.st-done{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.44);color:#90e9b1}
.st-canceled{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.44);color:#ffabab}
.opt-open{padding:7px 10px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);font-weight:700}

.opt-chat-list{display:flex;flex-direction:column;gap:8px}
.opt-msg{border-radius:12px;padding:10px;border:1px solid var(--line)}
.opt-msg .meta{font-size:11px;color:var(--muted);margin-bottom:4px}
.opt-msg .text{font-size:15px;line-height:1.35;color:var(--text)}
.opt-msg.mine{background:linear-gradient(180deg,rgba(44,111,214,.18),rgba(44,111,214,.08))}
.opt-msg.mgr{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
.opt-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.opt-quick .opt-ghost{padding:8px 10px;border-radius:999px;font-size:12px}

@media (max-width:700px){
  .opt-cab-nav{position:fixed;left:8px;right:8px;bottom:8px;z-index:90;justify-content:space-between;background:color-mix(in srgb,var(--bg) 88%, #1f2c47 12%);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 10px 24px rgba(0,0,0,.26)}
  .opt-cab-btn{flex:1;min-height:40px}
  .opt-card{padding-bottom:82px}
  .opt-orders-list,.opt-chat-list,#optOrdersList,#optChatList{max-height:none !important}
  .opt-chat-form{position:sticky;bottom:74px;background:var(--card);padding-top:8px}
}

html[data-theme='light'] .opt-cab-btn{background:#f5f9ff;border-color:#b8c7dd;color:#0f172a}
html[data-theme='light'] .opt-cab-btn.on{background:linear-gradient(180deg,#4f94f8,#2c6ed8);border-color:#2f6ed3;color:#fff}
html[data-theme='light'] .opt-status{border-color:#b8c7dd}
html[data-theme='light'] .opt-msg.mgr{background:linear-gradient(180deg,#ffffff,#f4f8ff)}
html[data-theme='light'] .opt-msg.mine{background:linear-gradient(180deg,#e8f2ff,#daeaff)}


/* ===== OPT polish pass (safe CSS-only) ===== */
.opt-card{box-shadow:0 10px 28px rgba(0,0,0,.16)}
.opt-panel{box-shadow:0 8px 20px rgba(0,0,0,.12);border-color:color-mix(in srgb,var(--line) 78%, #6b86b8 22%)}
.opt-id b{letter-spacing:.01em}

/* Visual hierarchy: primary / secondary */
.opt-card .buy{
  background:linear-gradient(180deg,#ff4e45 0%,#ff3b30 100%);
  border:1px solid #ff6b62;
  box-shadow:0 10px 22px rgba(255,59,48,.28), inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .14s ease, box-shadow .2s ease, filter .2s ease;
}
.opt-card .buy:hover{transform:translateY(-1px);filter:brightness(1.03)}
.opt-card .buy:active{transform:translateY(0) scale(.99)}

.opt-card .opt-ghost{
  background:linear-gradient(180deg,#1b2944 0%,#16233a 100%);
  border-color:#3a4f76;
  color:#e9f2ff;
  box-shadow:0 6px 14px rgba(7,16,33,.22);
}
.opt-card .opt-ghost:hover{background:linear-gradient(180deg,#223357 0%,#1a2a46 100%)}

/* Orders list readability */
#optOrdersList{max-height:460px;overflow:auto;padding-right:4px}
#optOrdersList > div{padding:10px 0;border-bottom:1px dashed color-mix(in srgb,var(--line) 86%, transparent)}
#optOrdersList b{font-weight:800}
#optOrdersList [data-order-open]{padding:7px 10px;border-radius:10px}

/* Chat bubbles (no markup changes) */
#optChatList{max-height:460px !important;overflow:auto !important;padding-right:4px}
#optChatList > div{
  border-radius:12px !important;
  padding:10px !important;
  border:1px solid var(--line) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
}
#optChatList > div:nth-child(odd){
  background:linear-gradient(180deg,rgba(47,111,237,.18),rgba(47,111,237,.08));
  border-color:color-mix(in srgb,var(--line) 70%, #4a78d9 30%) !important;
}
#optChatList .muted{font-size:11px !important;opacity:.9}
#optChatList div{line-height:1.32}
#optChatList .text, #optChatList > div > div:last-child{overflow-wrap:anywhere;word-break:break-word}

/* Inputs/buttons consistency */
#optCabinet .frow input,
#optCabinet .frow textarea,
#optCabinet .frow select{
  min-height:42px;
  border-radius:12px;
}
#optCabinet textarea{min-height:84px}

/* Mobile: more air */
@media (max-width:700px){
  .opt-card{padding:12px;border-radius:16px}
  .opt-panel{padding:12px;border-radius:14px}
  #optOrdersList > div{padding:12px 0}
  .opt-card .buy,.opt-card .opt-ghost{min-height:42px}
}

/* Light theme polish */
html[data-theme='light'] .opt-card{box-shadow:0 10px 22px rgba(16,24,40,.10)}
html[data-theme='light'] .opt-panel{box-shadow:0 8px 18px rgba(16,24,40,.08);border-color:#bfd0e6}
html[data-theme='light'] .opt-card .opt-ghost{
  background:linear-gradient(180deg,#ffffff 0%,#eef4ff 100%);
  border-color:#b8c7dd;
  color:#10203b;
}
html[data-theme='light'] #optChatList > div{background:linear-gradient(180deg,#ffffff,#f6faff)}
html[data-theme='light'] #optChatList > div:nth-child(odd){background:linear-gradient(180deg,#eaf2ff,#dce9ff)}


/* ===== Premium top header background (dark+light) ===== */
.top{isolation:isolate;overflow:visible}
.top::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.top > *{position:relative;z-index:1}

html[data-theme='dark'] .top{
  background:
    linear-gradient(180deg,rgba(3,5,10,.42),rgba(3,5,10,.28)),
    linear-gradient(180deg,rgba(8,12,22,.95),rgba(10,14,24,.92)),
    radial-gradient(120% 140% at 12% -30%,rgba(70,138,255,.22),transparent 58%),
    radial-gradient(95% 120% at 88% -35%,rgba(188,92,255,.22),transparent 60%),
    linear-gradient(135deg,#0a1020 0%,#0f1730 42%,#10162a 100%);
  border-bottom:1px solid rgba(110,148,255,.33);
  box-shadow:0 10px 28px rgba(0,0,0,.46), inset 0 -1px 0 rgba(150,190,255,.10);
}
html[data-theme='dark'] .top::before{
  background:
    radial-gradient(140% 180% at 18% -80%,rgba(78,163,255,.30),transparent 62%),
    radial-gradient(130% 170% at 84% -75%,rgba(193,118,255,.24),transparent 66%),
    repeating-linear-gradient(118deg,rgba(122,170,255,.05) 0 1px,transparent 1px 17px),
    repeating-linear-gradient(72deg,rgba(78,130,230,.035) 0 1px,transparent 1px 31px),
    radial-gradient(circle at 14% 36%, rgba(140,190,255,.12) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 63% 22%, rgba(160,130,255,.10) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 82% 58%, rgba(120,185,255,.09) 0 1px, transparent 1.6px);
  background-size:auto,auto,auto,auto,220px 120px,260px 140px,240px 130px;
  mix-blend-mode:screen;
  opacity:.62;
}

/* Light theme: make it a bit darker/premium ("as a face") */
html[data-theme='light'] .top{
  background:
    linear-gradient(180deg,rgba(228,234,243,.92),rgba(214,223,236,.90)),
    linear-gradient(135deg,#d8e0ec 0%,#c8d2e2 42%,#dde5f0 100%);
  border-bottom:1px solid #b6c4d8;
  box-shadow:0 3px 14px rgba(61,83,116,.16), inset 0 1px 0 rgba(255,255,255,.72);
}
html[data-theme='light'] .top::before{
  background:
    repeating-linear-gradient(108deg,rgba(124,148,184,.14) 0 1px,transparent 1px 16px),
    repeating-linear-gradient(162deg,rgba(154,176,208,.10) 0 1px,transparent 1px 26px),
    radial-gradient(130% 120% at 14% -45%,rgba(122,164,225,.14),transparent 62%),
    radial-gradient(120% 140% at 88% -52%,rgba(189,156,219,.12),transparent 66%);
  mix-blend-mode:multiply;
  opacity:.55;
}
html[data-theme='light'] .top::after{
  background:linear-gradient(90deg,transparent,rgba(96,147,223,.72),rgba(136,183,244,.58),transparent);
  box-shadow:0 0 8px rgba(96,147,223,.28),0 0 16px rgba(96,147,223,.18);
}

html[data-theme='light'] .brand{
  -webkit-text-stroke:.8px rgba(12,28,54,.78);
  text-shadow:0 1px 0 rgba(255,255,255,.46),0 0 7px rgba(130,162,206,.18);
}

html[data-theme='light'] .top-contacts a,
html[data-theme='light'] .top-contacts span,
html[data-theme='light'] .shipnote{color:#415676}

html[data-theme='light'] .catbtn,
html[data-theme='light'] .aibtn,
html[data-theme='light'] .cartlink,
html[data-theme='light'] .lang.vert a,
html[data-theme='light'] .themebtn{
  color:#1a3155;
  border-color:#b8c6db;
  background:linear-gradient(180deg,#f8fbff 0%,#e9f0fb 100%);
  box-shadow:0 3px 10px rgba(64,95,140,.12), inset 0 1px 0 rgba(255,255,255,.95);
}

/* Light theme cart hover: make gloss more noticeable */
html[data-theme='light'] .cartlink{position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .2s ease,filter .2s ease}
html[data-theme='light'] .cartlink::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-36%;
  width:34%;
  pointer-events:none;
  background:linear-gradient(110deg,rgba(255,255,255,0),rgba(255,255,255,.46),rgba(255,255,255,0));
  opacity:0;
}
html[data-theme='light'] .cartlink:hover{
  transform:translateY(-1px);
  filter:saturate(1.06) brightness(1.03);
  box-shadow:0 8px 18px rgba(56,112,198,.26), inset 0 1px 0 rgba(255,255,255,.98);
}
html[data-theme='light'] .cartlink:hover::after{opacity:1;animation:cartShine .9s ease-out}

html[data-theme='dark'] .cartlink{position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .2s ease,filter .2s ease}
html[data-theme='dark'] .cartlink::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-34%;
  width:32%;
  pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,0),rgba(200,228,255,.42),rgba(255,255,255,0));
  opacity:0;
}
html[data-theme='dark'] .cartlink:hover{
  transform:translateY(-1px);
  filter:saturate(1.08) brightness(1.04);
  box-shadow:0 10px 20px rgba(28,72,160,.34),0 0 0 2px rgba(116,170,255,.18),inset 0 1px 0 rgba(208,225,255,.22);
}
html[data-theme='dark'] .cartlink:hover::after{opacity:1;animation:cartShine .9s ease-out}

@keyframes cartShine{from{left:-36%}to{left:112%}}

/* ===== PREMIUM SYSTEM (dark + light, RU + UA) ===== */
:root{
  --pm-radius:12px;
  --pm-shadow-dark:0 10px 24px rgba(7,16,36,.34), 0 2px 8px rgba(0,0,0,.32), inset 0 1px 0 rgba(180,208,255,.14);
  --pm-shadow-light:0 10px 22px rgba(37,84,148,.18), 0 2px 8px rgba(16,24,40,.10), inset 0 1px 0 rgba(255,255,255,.96);
}

/* Unified premium buttons */
.catbtn,.aibtn,.uxbtn,
.vh-btn,
.opt-ghost,
.opt-tab,
.opt-cab-btn,
.checkout-submit,
button.buy{
  border-radius:var(--pm-radius);
  font-weight:850;
  letter-spacing:.01em;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}

html[data-theme='dark'] .catbtn,
html[data-theme='dark'] .aibtn,
html[data-theme='dark'] .uxbtn,
html[data-theme='dark'] .vh-btn,
html[data-theme='dark'] .opt-ghost,
html[data-theme='dark'] .opt-tab,
html[data-theme='dark'] .opt-cab-btn,
html[data-theme='dark'] .checkout-submit,
html[data-theme='dark'] button.buy{
  background:linear-gradient(180deg,#22365a 0%,#162646 100%);
  border:1px solid #324f7a;
  color:#edf4ff;
  box-shadow:var(--pm-shadow-dark);
}

html[data-theme='light'] .catbtn,
html[data-theme='light'] .aibtn,
html[data-theme='light'] .uxbtn,
html[data-theme='light'] .vh-btn,
html[data-theme='light'] .opt-ghost,
html[data-theme='light'] .opt-tab,
html[data-theme='light'] .opt-cab-btn,
html[data-theme='light'] .checkout-submit,
html[data-theme='light'] button.buy{
  background:linear-gradient(180deg,#ffffff 0%,#e8f0ff 100%);
  border:1px solid #b7c8e2;
  color:#13294a;
  box-shadow:var(--pm-shadow-light);
}

.catbtn:hover,.aibtn:hover,.uxbtn:hover,.vh-btn:hover,.opt-ghost:hover,.opt-tab:hover,.opt-cab-btn:hover,.checkout-submit:hover,button.buy:hover{
  transform:translateY(-1px);
  filter:saturate(1.06);
}

/* Unified premium panels/cards */
.vh-main,.vh-metrics,.pcard,.card,.opt-card,.opt-panel,.receipt-card,.checkout-card,.sframe{
  border-radius:16px;
}
html[data-theme='dark'] .vh-main,
html[data-theme='dark'] .vh-metrics,
html[data-theme='dark'] .opt-card,
html[data-theme='dark'] .opt-panel{
  border:1px solid #324767;
  box-shadow:0 16px 32px rgba(6,16,36,.28), inset 0 1px 0 rgba(168,198,255,.10);
}
html[data-theme='light'] .vh-main,
html[data-theme='light'] .vh-metrics,
html[data-theme='light'] .opt-card,
html[data-theme='light'] .opt-panel{
  border:1px solid #bfd0e8;
  box-shadow:0 14px 28px rgba(42,86,146,.14), inset 0 1px 0 rgba(255,255,255,.95);
}

/* ===== PACKAGE A (contrast + CTA + cards + unified rhythm) ===== */
:root{
  --u-radius-sm:12px;
  --u-radius-md:16px;
  --u-shadow-light:0 10px 24px rgba(26,54,96,.12), 0 2px 8px rgba(16,24,40,.08);
}

/* Light theme contrast */
html[data-theme='light'] body{background:#e9edf3;color:#0f213f}
html[data-theme='light'] .wrap{background:transparent}
html[data-theme='light'] .sidebar .sframe,
html[data-theme='light'] .pcard,
html[data-theme='light'] .card,
html[data-theme='light'] .btile,
html[data-theme='light'] .gtile,
html[data-theme='light'] .slink,
html[data-theme='light'] .vh-main,
html[data-theme='light'] .vh-metrics{
  border-color:#b8c8df !important;
}

/* CTA stronger */
html[data-theme='light'] .catbtn,
html[data-theme='light'] .aibtn,
html[data-theme='light'] .vh-btn.primary{
  background:linear-gradient(180deg,#ffffff 0%,#dce9ff 100%) !important;
  border:1px solid #9fb7da !important;
  color:#102a4f !important;
  box-shadow:0 12px 24px rgba(34,78,142,.16), inset 0 1px 0 rgba(255,255,255,.98) !important;
}
html[data-theme='dark'] .catbtn,
html[data-theme='dark'] .aibtn,
html[data-theme='dark'] .vh-btn.primary{
  background:linear-gradient(180deg,#29467a 0%,#1a2f57 100%) !important;
  border-color:#45659a !important;
}

/* product cards readability */
.pcard,.card{border-radius:var(--u-radius-md);}
.pt,.card .title{font-size:14px;line-height:1.25;font-weight:780}
.price .new{font-size:20px;font-weight:900;color:var(--accent)}
html[data-theme='dark'] .price .new{color:#2ecc71}
.sku{font-size:12px;opacity:.9}
.pcard,.card,.btile,.gtile,.vh-main,.vh-metrics{box-shadow:var(--u-shadow-light)}

/* Unified radius scale */
.sframe,.pcard,.card,.btile,.gtile,.vh-main,.vh-metrics,.cartlink,.q,.search,.results{border-radius:var(--u-radius-md)}
.uxbtn,.catbtn,.aibtn,.vh-btn,.buy,.opt-ghost,.opt-tab,.opt-cab-btn{border-radius:var(--u-radius-sm)}

/* ===== PACKAGE B (header grid + hero depth + mobile spacing) ===== */
@media (min-width:701px){
  .top{display:grid;grid-template-columns:auto auto auto auto minmax(360px,1fr);gap:12px;align-items:start}
  .brand{align-self:center}
  .top-contacts{align-self:center}
  .catbtn,.aibtn{align-self:center}
  .right{display:grid;grid-template-columns:minmax(320px,1fr) auto auto;grid-template-areas:"search cart switches" "opt opt opt";gap:8px;align-items:center;width:100%}
  .searchcol{grid-area:search}
  .cartlink{grid-area:cart}
  .switches{grid-area:switches;justify-self:end}
  header.top .searchcol > .opt-live-badge,
  header.top .right > .opt-live-badge{
    grid-area:opt;
    justify-self:start;
    align-self:start;
    display:inline-flex;
    width:max-content;
    max-width:min(420px,50vw);
    margin-top:2px;
  }
}

/* Hero depth */
.vh-panel{gap:18px}
.vh-main,.vh-metrics{position:relative;overflow:hidden}
.vh-main::before,.vh-metrics::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55}
html[data-theme='light'] .vh-main::before,
html[data-theme='light'] .vh-metrics::before{
  background:radial-gradient(700px 220px at 15% -10%,rgba(85,145,238,.18),transparent 60%),radial-gradient(600px 200px at 85% 110%,rgba(196,112,232,.14),transparent 62%);
}
html[data-theme='dark'] .vh-main::before,
html[data-theme='dark'] .vh-metrics::before{
  background:radial-gradient(760px 240px at 12% -10%,rgba(78,143,255,.22),transparent 60%),radial-gradient(640px 220px at 88% 110%,rgba(202,98,255,.20),transparent 62%);
}

/* Mobile spacing stabilization */
@media (max-width:700px){
  .top{padding:9px 9px;gap:7px}
  .wrap{padding:9px}
  .hero-top{margin:0 0 10px 0;gap:10px}
  .uxmenu{gap:8px}
  .uxbtn{padding:9px 12px}
  .vh-panel{display:none !important}
  .vh-main,.vh-metrics{padding:12px}
  .vh-main h2,.vh-metrics h3{margin-bottom:8px}
  .section{margin-top:12px}
}

/* ===== PACKAGE B VISUAL BOOST (strong, clearly visible) ===== */
html[data-theme='light'] body{background:#e3e9f2 !important}
html[data-theme='light'] .top{
  background:linear-gradient(180deg,#d7e0ed 0%,#c9d5e6 100%) !important;
  border-bottom:1px solid #9db0ca !important;
}
html[data-theme='light'] .top::before{opacity:.35 !important}

html[data-theme='light'] .catbtn,
html[data-theme='light'] .aibtn,
html[data-theme='light'] .uxbtn,
html[data-theme='light'] .vh-btn.primary{
  background:linear-gradient(180deg,#ffffff 0%,#d6e5ff 100%) !important;
  border:1px solid #8eaad1 !important;
  color:#0f2d57 !important;
  box-shadow:0 10px 22px rgba(30,68,126,.22), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

html[data-theme='light'] .vh-main,
html[data-theme='light'] .vh-metrics{
  border:1px solid #a9bddc !important;
  box-shadow:0 16px 32px rgba(28,62,114,.18), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

html[data-theme='light'] .pcard,
html[data-theme='light'] .card,
html[data-theme='light'] .btile,
html[data-theme='light'] .gtile,
html[data-theme='light'] .sframe{
  border:1px solid #b1c3dd !important;
  box-shadow:0 10px 20px rgba(32,64,112,.14) !important;
}

.pcard .pt,.card .title{font-size:15px !important;line-height:1.28 !important;font-weight:800 !important}
.price .new{font-size:22px !important;font-weight:900 !important}

/* ===== 4-row mini rotators (2 in Popular + 2 in Sale) ===== */
.mrails{display:grid;grid-template-rows:1fr 1fr;gap:10px}
/* prevent first-paint jump while home rails are shuffled */
.mrails,.mrail{opacity:0;transition:opacity .12s ease}
html.home-rails-ready .mrails,html.home-rails-ready .mrail{opacity:1}
.mrail{
  display:flex;gap:10px;
  overflow-x:auto;overflow-y:hidden;
  padding:2px 2px 8px;
  scroll-snap-type:x proximity;
}
.mcard{
  flex:0 0 170px;
  width:170px;
  min-width:170px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  padding:6px;
  display:flex;flex-direction:column;gap:6px;
}
.mcard img{width:100%;height:112px;object-fit:contain;background:#fff;border-radius:12px;border:1px solid rgba(0,0,0,.08);padding:6px}
.mcard .mt{font-size:10px;line-height:1.15;font-weight:700;min-height:34px;max-height:34px;overflow:hidden}
.mcard .buy.mini{width:100%;min-width:0;height:28px;padding:0 6px;font-size:10px;border-radius:10px}
.mcard{transition:transform .16s ease, box-shadow .2s ease, border-color .16s ease}
.mcard:hover{transform:translateY(-2px) scale(1.01);border-color:#5b78ad;box-shadow:0 10px 22px rgba(24,56,106,.25)}
.mcard:hover img{transform:scale(1.03);transition:transform .2s ease}

.mrail::-webkit-scrollbar{height:8px}
html[data-theme='light'] .mrail::-webkit-scrollbar-thumb{background:#9fb7da;border-radius:999px;border:2px solid #d8e2f0}
html[data-theme='dark'] .mrail::-webkit-scrollbar-thumb{background:#45659a;border-radius:999px;border:2px solid #121a2a}

@media (max-width:700px){
  .mcard{flex-basis:148px;width:148px;min-width:148px}
  .mcard img{height:92px}
  .mcard .mt{font-size:9px;min-height:30px;max-height:30px}
  .mcard .buy.mini{height:26px;font-size:9px}
}

/* ===== LOGO 3D + BACKLIGHT (dark & light) ===== */
.brand{
  isolation:isolate;
  position:relative;
  transform-style:preserve-3d;
}
.brand::before,
.brand::after{content:"";position:absolute;pointer-events:none}

/* soft wall backlight */
.brand::before{
  left:-14px; right:-14px; top:-10px; bottom:-10px;
  border-radius:16px;
  z-index:-2;
  opacity:.78;
  filter:blur(12px);
}

/* inner glossy sweep on letters */
.brand::after{
  left:2px; right:2px; top:2px; bottom:2px;
  z-index:2;
  mix-blend-mode:screen;
  opacity:.35;
  background:linear-gradient(120deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 38%,rgba(255,255,255,0) 62%);
  clip-path:polygon(0 0,64% 0,42% 100%,0 100%);
  transform:translateX(-2%);
  transition:transform .55s ease, opacity .35s ease, filter .35s ease;
}

html[data-theme='dark'] .brand{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 52%,#eaf3ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.7px rgba(226,238,255,.28);
  text-shadow:
    0 1px 0 rgba(8,16,32,.58),
    0 2px 0 rgba(8,16,32,.44),
    0 7px 12px rgba(0,0,0,.40),
    0 0 18px rgba(124,205,255,.72),
    0 0 34px rgba(228,136,255,.54);
  filter:brightness(1.18) saturate(1.12);
}
html[data-theme='dark'] .brand::before{
  background:
    radial-gradient(62% 92% at 16% 52%, rgba(82,198,255,.55), transparent 78%),
    radial-gradient(58% 90% at 84% 50%, rgba(220,118,255,.45), transparent 80%),
    conic-gradient(from 210deg at 48% 52%, transparent 0 35%, rgba(113,182,255,.22) 42%, transparent 52% 74%, rgba(210,124,255,.20) 82%, transparent 100%);
  opacity:.92;
  filter:blur(13px);
}

html[data-theme='light'] .brand{
  background:linear-gradient(180deg,#0e0e10 0%,#000000 64%,#090909 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px rgba(8,10,14,.72);
  text-shadow:
    0 1px 0 rgba(255,255,255,.32),
    0 2px 0 rgba(182,194,210,.56),
    0 4px 0 rgba(132,146,170,.52),
    0 8px 14px rgba(24,38,64,.24);
  filter:brightness(.84) saturate(1.08);
}
html[data-theme='light'] .brand::before{
  background:
    radial-gradient(58% 88% at 14% 52%, rgba(255,64,64,.36), transparent 78%),
    radial-gradient(54% 86% at 50% 50%, rgba(60,132,255,.32), transparent 80%),
    radial-gradient(54% 86% at 86% 50%, rgba(38,214,108,.30), transparent 78%);
  opacity:.82;
  filter:blur(12px);
}

/* Logo hover: premium living effect (dark + light) */
@keyframes logoShimmerSweep{0%{transform:translateX(-18%)}100%{transform:translateX(28%)}}
@keyframes logoGlowPulse{0%,100%{opacity:.82;filter:blur(12px)}50%{opacity:1;filter:blur(15px)}}

.brand:hover{
  transform:translateY(-1px) scale(1.012);
}

.brand:hover::before{
  animation:logoGlowPulse 1.9s ease-in-out infinite;
}

.brand:hover::after{
  opacity:.62;
  filter:brightness(1.18);
  animation:logoShimmerSweep 1.05s ease-out infinite;
}

/* ===== Anti-clipping hardening (final) ===== */
html,body{width:100%;max-width:100%;overflow-x:clip !important}
body{position:relative}
.wrap,.layout,.content,main,section{max-width:100%;min-width:0}
.layout{grid-template-columns:minmax(250px,320px) minmax(0,1fr) !important}
.layout > *{min-width:0}

/* If viewport is not wide enough for clean 2-column, collapse to 1-column */
@media (max-width:1280px){
  .layout{grid-template-columns:1fr !important;gap:12px !important}
  .sidebar{display:none !important;position:static !important;top:auto !important}
}

/* ===== UNIVERSAL DEVICE HARDENING (2026-03-03) ===== */
/* Goal: survive odd screens/zoom/long text/embedded webviews without horizontal breaks */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* Never allow media to push layout wider than viewport */
img,svg,video,canvas,iframe,table{
  max-width:100%;
}

/* Long SKU / URLs / words should wrap, not break layout */
.title,.pt,.t,.n,.bn,.sn,.sku,.desc,.m,.ci,.ci .t,.ci .m,
.opt-msg .text,#optChatList > div > div:last-child{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Forms/selects must stay inside cards on any phone */
input,select,textarea,button{
  max-width:100%;
}

/* Prevent accidental 100vw overflow from fixed layers */
.top,.results,.catpop,.cathint,.sidepop,.vs-toast,.vs-center-toast{
  max-width:100vw;
}

/* Wide desktop/tv: keep content readable and centered */
@media (min-width:1921px){
  .wrap{max-width:1760px;margin-inline:auto;padding-inline:24px}
  .top{padding-inline:24px}
}

/* Tiny phones & broken Android webviews */
@media (max-width:340px){
  .brand{font-size:150%}
  .top{padding:8px}
  .wrap{padding:8px}
  .q{font-size:16px}
  .cartlink{min-width:0}
  .badge{min-width:24px;flex-basis:24px}
  .cs{min-width:64px;flex-basis:64px}

  .pgrid{grid-template-columns:repeat(1,minmax(0,1fr)) !important}
  .pgrid .pcard img{height:132px}
  .gtiles,.btiles,.btiles.all,.stiles,#sidePop #sideTiles.stiles,#catHint .stiles,#catPop .stiles{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Landscape phones/tablets with short height */
@media (max-height:520px) and (orientation:landscape){
  .top{position:sticky;top:0}
  .results{max-height:48vh}
  .catpop,.cathint,.sidepop{max-height:58vh}
}

/* Safer PDP on edge resolutions */
@media (max-width:1200px){
  .pbuy{position:static}
}

/* ===== UI LIVENESS PASS: cards + side hover tiles + cart button ===== */
.pcard,
.card,
.pcmini,
.stile,
.gtile,
.btile{
  transition:transform .18s ease, box-shadow .24s ease, border-color .2s ease, filter .2s ease;
  will-change:transform;
}

.pcard:hover,
.card:hover,
.pcmini:hover,
.gtile:hover,
.btile:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--line) 62%, #5a84c9 38%);
  box-shadow:0 14px 30px rgba(8,20,42,.28), 0 0 0 1px rgba(102,149,232,.18) inset;
}

/* Side hover pop cards (left panel flyout) */
.sidepop .stile,
.catpop .stile,
#catHint .stile{
  position:relative;
  overflow:hidden;
}
.sidepop .stile::before,
.catpop .stile::before,
#catHint .stile::before{
  content:"";
  position:absolute;
  inset:-120% -40%;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.14) 48%,transparent 66%);
  transform:translateX(-80%);
  transition:transform .55s ease;
  pointer-events:none;
}
.sidepop .stile:hover::before,
.catpop .stile:hover::before,
#catHint .stile:hover::before{transform:translateX(65%)}

.sidepop .stile:hover,
.catpop .stile:hover,
#catHint .stile:hover{
  transform:translateY(-2px) scale(1.015);
  border-color:#5e7fb8;
  box-shadow:0 12px 26px rgba(14,34,70,.30);
}

/* Product image slight zoom for "alive" feel */
.pcard img,
.card img,
.stile img{
  transition:transform .26s ease, filter .22s ease;
}
.pcard:hover img,
.card:hover img,
.stile:hover img{
  transform:scale(1.035);
  filter:saturate(1.05) contrast(1.02);
}

/* Cart button: stronger feedback */
.pcard .pact .buy,
.card .pact .buy{
  transition:transform .14s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.pcard .pact .buy:hover,
.card .pact .buy:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 10px 18px rgba(26,74,160,.30), 0 0 0 3px rgba(110,168,255,.18);
}
.pcard .pact .buy:active,
.card .pact .buy:active{transform:translateY(0) scale(.97)}

/* Full "В корзину" button animation across the whole site */
button[data-add-to-cart].buy,
.pcmini .b button[data-add-to-cart],
.pcard .pact .buy,
.card .pact .buy{
  position:relative;
  overflow:hidden;
  transition:transform .16s ease, box-shadow .22s ease, filter .2s ease, border-color .2s ease, background .2s ease;
}
button[data-add-to-cart].buy::after,
.pcmini .b button[data-add-to-cart]::after,
.pcard .pact .buy::after,
.card .pact .buy::after{
  content:"";
  position:absolute;
  inset:-140% -35%;
  background:linear-gradient(120deg,transparent 34%,rgba(255,255,255,.26) 50%,transparent 66%);
  transform:translateX(-90%);
  transition:transform .58s ease;
  pointer-events:none;
}
button[data-add-to-cart].buy:hover,
.pcmini .b button[data-add-to-cart]:hover,
.pcard .pact .buy:hover,
.card .pact .buy:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(23,66,146,.32), 0 0 0 3px rgba(115,170,255,.18);
  filter:saturate(1.07);
}
button[data-add-to-cart].buy:hover::after,
.pcmini .b button[data-add-to-cart]:hover::after,
.pcard .pact .buy:hover::after,
.card .pact .buy:hover::after{transform:translateX(72%)}
button[data-add-to-cart].buy:active,
.pcmini .b button[data-add-to-cart]:active,
.pcard .pact .buy:active,
.card .pact .buy:active{transform:translateY(0) scale(.98)}

/* Theme-specific add-to-cart hover polish (make shine readable in light, rich in dark) */
html[data-theme='light'] button[data-add-to-cart].buy::after,
html[data-theme='light'] .pcmini .b button[data-add-to-cart]::after,
html[data-theme='light'] .pcard .pact .buy::after,
html[data-theme='light'] .card .pact .buy::after{
  background:linear-gradient(118deg,transparent 28%,rgba(255,255,255,.78) 48%,rgba(210,230,255,.44) 56%,transparent 72%);
}

html[data-theme='light'] button[data-add-to-cart].buy:hover,
html[data-theme='light'] .pcmini .b button[data-add-to-cart]:hover,
html[data-theme='light'] .pcard .pact .buy:hover,
html[data-theme='light'] .card .pact .buy:hover{
  box-shadow:0 12px 24px rgba(56,112,198,.34), 0 0 0 3px rgba(130,182,255,.24);
  filter:saturate(1.1) brightness(1.04);
}

html[data-theme='dark'] button[data-add-to-cart].buy::after,
html[data-theme='dark'] .pcmini .b button[data-add-to-cart]::after,
html[data-theme='dark'] .pcard .pact .buy::after,
html[data-theme='dark'] .card .pact .buy::after{
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.34) 50%,rgba(148,198,255,.20) 58%,transparent 70%);
}

html[data-theme='dark'] button[data-add-to-cart].buy:hover,
html[data-theme='dark'] .pcmini .b button[data-add-to-cart]:hover,
html[data-theme='dark'] .pcard .pact .buy:hover,
html[data-theme='dark'] .card .pact .buy:hover{
  box-shadow:0 12px 24px rgba(20,62,140,.40), 0 0 0 3px rgba(116,172,255,.22);
  filter:saturate(1.09) brightness(1.03);
}

/* ===== Badge logic: retail sees -25%, authorized OPT sees only OPT ===== */
html.opt-auth .disc{display:none !important}

/* Home mini-rails: stable badge via CSS pseudo-element (no JS flicker) */
.mcard{position:relative}
.mcard::before{
  content:'-25%';
  position:absolute;
  top:8px;
  left:8px;
  z-index:4;
  background:linear-gradient(180deg,#ff5b52,#f04438);
  color:#fff;
  font-weight:800;
  font-size:11px;
  line-height:1;
  padding:5px 7px;
  border-radius:999px;
  box-shadow:0 4px 10px rgba(0,0,0,.22);
}
html.opt-auth .mcard::before{
  content:'OPT';
  background:linear-gradient(180deg,#dbfff0,#b9f4d8);
  color:#0f5a3a;
  border:1px solid #77cfa2;
}
.mcard .disc,.mcard .opt-price-badge{display:none !important}

/* ===== CART LIVENESS PASS ===== */
.citem,.receipt-card,.checkout-card,.checkout-submit,.qty button,.del,.qty input,.checkout-form input,.checkout-form textarea{
  transition:transform .18s ease, box-shadow .22s ease, border-color .2s ease, background .2s ease, filter .2s ease;
}

.citem:hover{
  transform:translateY(-1px);
  border-color:#4c6fa8;
  box-shadow:0 10px 22px rgba(18,44,92,.26);
}

.qty button:hover,.del:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 8px 14px rgba(26,74,160,.26),0 0 0 3px rgba(110,168,255,.14);
}
.qty button:active,.del:active{transform:translateY(0) scale(.96)}

.checkout-form input:focus,.checkout-form textarea:focus,.qty input:focus{
  outline:none;
  border-color:#6ca0e8;
  box-shadow:0 0 0 3px rgba(108,160,232,.18);
}

.checkout-submit{
  position:relative;
  overflow:hidden;
}
.checkout-submit::after{
  content:'';
  position:absolute;
  inset:-140% -35%;
  background:linear-gradient(120deg,transparent 34%,rgba(255,255,255,.23) 50%,transparent 66%);
  transform:translateX(-90%);
  transition:transform .6s ease;
  pointer-events:none;
}
.checkout-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(18,66,148,.34),0 0 0 3px rgba(118,173,255,.18);
  filter:saturate(1.06);
}
.checkout-submit:hover::after{transform:translateX(70%)}
.checkout-submit:active{transform:translateY(0) scale(.98)}

.pcard .disc,
.card .disc{
  background:linear-gradient(180deg,#ff5b52,#f04438);
  box-shadow:0 6px 12px rgba(240,68,56,.26);
}

.pcard .opt-price-badge,
.card .opt-price-badge{
  box-shadow:0 8px 16px rgba(16,140,86,.24);
}

/* If card has OPT badge too, discount badge becomes softer (no visual scandal) */
.pcard:has(.opt-price-badge) .disc,
.card:has(.opt-price-badge) .disc{
  opacity:.62;
  transform:scale(.9);
  transform-origin:left top;
  filter:saturate(.82);
}

@media (max-width:700px){
  .pcard:has(.opt-price-badge) .disc,
  .card:has(.opt-price-badge) .disc{
    opacity:.5;
    transform:scale(.84);
  }
}

/* ===== LIVE HOTFIX: mobile card typography + dynamic prices ===== */
/* mirrored in generator source so changes survive next build */
.pgrid .pcard .pt,
.card .title{
  font-weight:700 !important;
  letter-spacing:0;
  text-wrap:balance;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.pgrid .pcard .price,
.card .price{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 8px;
  min-width:0;
}

.pgrid .pcard .price .new,
.card .price .new{
  display:inline-block;
  font-variant-numeric:tabular-nums;
  line-height:1;
  max-width:100%;
  font-size:clamp(16px,4.7vw,26px) !important;
}

@media (max-width:700px){
  /* mobile product title: dynamic, always inside card */
  .pgrid .pcard .pt,
  .card .title{
    font-size:clamp(11px,3.35vw,14px) !important;
    line-height:1.18;
    min-height:0 !important;
    display:-webkit-box;
    -webkit-line-clamp:6;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .pgrid .pcard .price .old,
  .card .price .old{font-size:11px}

  .pgrid .pcard .price .new,
  .card .price .new{font-size:clamp(15px,5vw,19px) !important}
}

/* ===== Dark theme background softening (less black, more deep-blue) ===== */
html[data-theme='dark']{
  --bg:#182131;
  --card:#223047;
  --line:#3a4b66;
  --muted:#c3cde0;
}

html[data-theme='dark'] body{
  background:
    radial-gradient(1200px 560px at 12% -8%, rgba(87,133,220,.18), transparent 62%),
    radial-gradient(1100px 500px at 88% -14%, rgba(114,86,181,.14), transparent 66%),
    linear-gradient(180deg,#182131 0%,#1a2436 100%) !important;
}

html[data-theme='dark'] .wrap{background:transparent}

html[data-theme='dark'] .sidebar .sframe,
html[data-theme='dark'] .pcard,
html[data-theme='dark'] .card,
html[data-theme='dark'] .btile,
html[data-theme='dark'] .gtile,
html[data-theme='dark'] .vh-main,
html[data-theme='dark'] .vh-metrics,
html[data-theme='dark'] .opt-card,
html[data-theme='dark'] .opt-panel,
html[data-theme='dark'] .tpanel,
html[data-theme='dark'] .pbuy,
html[data-theme='dark'] .pmain{
  background:linear-gradient(180deg,rgba(33,46,69,.94),rgba(28,40,61,.94)) !important;
  border-color:#3a4b66 !important;
}

/* Glassy left sidebar tablet */
html[data-theme='dark'] .sidebar .sframe{
  background:
    linear-gradient(180deg, rgba(56,74,110,.38) 0%, rgba(36,52,84,.34) 100%) !important;
  border:1px solid rgba(140,170,225,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(8,18,34,.35),
    0 12px 28px rgba(6,14,28,.30) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
}

html[data-theme='dark'] .sidebar .sframe::before{
  opacity:.8 !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 36%, rgba(255,255,255,0) 62%),
    radial-gradient(70% 46% at 20% 0%, rgba(170,205,255,.18), rgba(170,205,255,0) 68%) !important;
}

html[data-theme='dark'] .top{
  background:
    linear-gradient(180deg,rgba(22,31,49,.94),rgba(18,27,43,.94)) !important;
}

/* ===== Dark theme: keep original vivid UI, soften only far background ===== */
html[data-theme='dark']{
  --bg:#162236;
  --card:#1b2230;
  --text:#eef2f8;
  --muted:#b7c0d0;
  --line:#344155;
}

html[data-theme='dark'] body{
  background:
    radial-gradient(900px 420px at 10% -6%, rgba(96,150,235,.09), transparent 62%),
    radial-gradient(860px 420px at 90% -12%, rgba(136,92,218,.07), transparent 66%),
    radial-gradient(1200px 700px at 52% 118%, rgba(24,62,140,.10), transparent 64%),
    repeating-linear-gradient(0deg, rgba(72,112,188,.022) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(72,112,188,.02) 0 1px, transparent 1px 44px),
    linear-gradient(145deg, rgba(26,50,102,.07) 0%, rgba(10,22,48,.07) 36%, rgba(6,14,30,.05) 72%, rgba(14,32,70,.07) 100%),
    linear-gradient(180deg,#111d34 0%,#122137 54%,#13243b 100%) !important;
  background-attachment: fixed;
}

/* ===== Dark premium gloss for hero "tiles" ===== */
html[data-theme='dark'] .vh-main,
html[data-theme='dark'] .vh-metrics{
  position:relative;
  overflow:hidden;
}

html[data-theme='dark'] .vh-main::after,
html[data-theme='dark'] .vh-metrics::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 24%, rgba(255,255,255,0) 46%),
    radial-gradient(120% 90% at 100% 100%, rgba(126,91,201,.16) 0%, rgba(126,91,201,0) 62%);
  opacity:.55;
}

html[data-theme='dark'] .vh-grid > div{
  position:relative;
  overflow:hidden;
  border-color:rgba(123,164,235,.46) !important;
  background:
    linear-gradient(180deg,rgba(108,146,220,.28),rgba(18,34,64,.80)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(10,20,40,.36),
    0 7px 16px rgba(6,14,28,.28);
}

html[data-theme='dark'] .vh-grid > div::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:0;
  height:40%;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 55%, rgba(255,255,255,0) 100%);
  border-radius:12px 12px 18px 18px;
  opacity:.62;
}

html[data-theme='dark'] .vh-grid > div:hover{
  border-color:rgba(162,197,255,.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(10,20,40,.42),
    0 12px 28px rgba(8,18,34,.42);
}

/* Left tablet (vh-main): add visible premium gradient + gloss */
html[data-theme='dark'] .vh-main{
  border-color:rgba(98,138,210,.44) !important;
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(136,95,212,.13) 0%, rgba(136,95,212,0) 58%),
    linear-gradient(180deg, rgba(35,56,96,.88) 0%, rgba(22,36,66,.90) 58%, rgba(26,37,67,.92) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(8,18,34,.38),
    0 10px 24px rgba(7,15,30,.28) !important;
}

html[data-theme='dark'] .vh-main::before{
  opacity:.5 !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 24%, rgba(255,255,255,0) 46%),
    radial-gradient(80% 52% at 20% 0%, rgba(150,194,255,.14), rgba(150,194,255,0) 70%) !important;
}

/* Right tablet shell a bit richer too */
html[data-theme='dark'] .vh-metrics{
  border-color:rgba(96,134,201,.42) !important;
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(136,95,212,.10) 0%, rgba(136,95,212,0) 62%),
    linear-gradient(180deg, rgba(29,49,86,.88) 0%, rgba(19,33,60,.90) 60%, rgba(20,32,58,.92) 100%) !important;
}

/* Two CTA buttons: 3D premium */
html[data-theme='dark'] .vh-actions .vh-btn{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(123,160,228,.54) !important;
  background:linear-gradient(180deg,#4d6da5 0%, #304a79 54%, #273f6b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(11,23,43,.48),
    0 7px 14px rgba(5,13,28,.34) !important;
  text-shadow:0 1px 0 rgba(7,15,29,.5);
}

html[data-theme='dark'] .vh-actions .vh-btn::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:0;
  height:46%;
  pointer-events:none;
  border-radius:12px 12px 16px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.06) 62%, rgba(255,255,255,0) 100%);
  opacity:.9;
}

html[data-theme='dark'] .vh-actions .vh-btn.primary{
  border-color:rgba(133,177,255,.76) !important;
  background:linear-gradient(180deg,#6f8fca 0%, #3f619d 55%, #2e4d84 100%) !important;
}

html[data-theme='dark'] .vh-actions .vh-btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.05) brightness(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(11,23,43,.52),
    0 10px 20px rgba(7,16,31,.42) !important;
}

/* ===== Final balance: more clarity + crisp premium shine (no fog) ===== */
html[data-theme='dark'] .vh-main,
html[data-theme='dark'] .vh-metrics{
  border-color:rgba(108,150,226,.56) !important;
}

html[data-theme='dark'] .vh-main::after,
html[data-theme='dark'] .vh-metrics::after{
  opacity:.34 !important;
}

html[data-theme='dark'] .vh-main::before{
  opacity:.38 !important;
}

html[data-theme='dark'] .vh-main h2,
html[data-theme='dark'] .vh-metrics h3{
  color:#f3f8ff !important;
  text-shadow:0 1px 0 rgba(8,18,35,.45);
}

html[data-theme='dark'] .vh-main p,
html[data-theme='dark'] .vh-sub{
  color:rgba(228,238,255,.94) !important;
}

html[data-theme='dark'] .vh-grid > div{
  border-color:rgba(128,172,245,.64) !important;
  background:
    linear-gradient(180deg,rgba(118,156,232,.34) 0%, rgba(20,38,70,.84) 72%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(9,20,40,.42),
    0 8px 18px rgba(6,14,30,.30) !important;
}

html[data-theme='dark'] .vh-grid > div::before{
  opacity:.76 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.06) 54%, rgba(255,255,255,0) 100%);
}

/* ===== FINAL LOCAL TWEAKS (light): stronger cart shine + hero gloss ===== */
html[data-theme='light'] .cartlink{
  position:relative;
  overflow:hidden;
}
html[data-theme='light'] .cartlink::after{
  content:"";
  position:absolute;
  top:-10%;
  bottom:-10%;
  left:-42%;
  width:40%;
  pointer-events:none;
  background:linear-gradient(112deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.90) 48%, rgba(196,223,255,.62) 58%, rgba(255,255,255,0) 100%);
  opacity:0;
}
html[data-theme='light'] .cartlink:hover{
  transform:translateY(-1px);
  filter:saturate(1.12) brightness(1.05) !important;
  box-shadow:0 12px 24px rgba(56,112,198,.30), 0 0 0 2px rgba(142,190,255,.24), inset 0 1px 0 rgba(255,255,255,.98) !important;
}
html[data-theme='light'] .cartlink:hover::after{
  opacity:1;
  animation:cartShineStrong .95s ease-out;
}
@keyframes cartShineStrong{from{left:-42%}to{left:118%}}

html[data-theme='light'] .vh-main,
html[data-theme='light'] .vh-metrics{
  position:relative;
  overflow:hidden;
  border-color:#b7cbed !important;
}
html[data-theme='light'] .vh-main::before,
html[data-theme='light'] .vh-metrics::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(136deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 48%),
    radial-gradient(90% 60% at 86% 100%, rgba(186,160,232,.18) 0%, rgba(186,160,232,0) 62%);
  opacity:.72;
}

/* ===== Mobile cleanup + premium touch ===== */
@media (max-width: 760px){
  /* move utility links into compact "Разделы/Розділи" button near H1 */
  .hero-top{align-items:center;overflow:visible}
  .hero-mainline{width:100%;justify-content:space-between;position:relative;overflow:visible}
  .hero-top .uxmenu{display:none !important}
  .uxdrop{display:block;position:relative;z-index:40}
  .uxdrop summary{min-height:36px;padding:8px 11px;font-size:12px}
  .uxdrop[open] .uxdrop-menu{display:grid}
  .uxdrop-menu{right:0;left:auto;top:calc(100% + 6px);max-width:min(92vw,300px)}

  /* a bit more premium gloss on key blocks */
  .vh-main,.vh-metrics,.pcard,.card{position:relative;overflow:hidden}
  .vh-main::after,.vh-metrics::after,.pcard::after,.card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(140deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 52%);
    opacity:.55;
  }

  /* stronger cart button feel on product cards */
  button[data-add-to-cart].buy,
  .pcmini .b button[data-add-to-cart],
  .pcard .pact .buy,
  .card .pact .buy{
    box-shadow:0 10px 18px rgba(24,72,156,.28), inset 0 1px 0 rgba(255,255,255,.22);
  }
}

/* ===== UNIVERSAL HEADER HARDENING (all screens, incl. PWA window) ===== */
.top,.right,.searchcol,.search,.q,.cartlink,.brand{min-width:0}
.top,.right{max-width:100%}

/* Tablet / narrow desktop / PWA window on PC */
@media (min-width:701px) and (max-width:1180px){
  .top{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:
      "brand cat ai"
      "right right right";
    gap:10px;
    align-items:center;
    padding:10px 12px;
  }

  .brand{grid-area:brand;font-size:clamp(30px,3.2vw,42px)}
  .catbtn{grid-area:cat}
  .aibtn{grid-area:ai}
  .top-contacts{display:none !important}

  .right{
    grid-area:right;
    width:100%;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"search cart switches";
    gap:8px;
    align-items:center;
    min-width:0;
  }

  .searchcol{grid-area:search;min-width:0 !important}
  .search{min-width:0}
  .q{width:100% !important;max-width:none !important;min-width:0}
  .shipnote{white-space:normal}

  .cartlink{grid-area:cart;min-width:0 !important;max-width:100%;padding:8px 10px}
  .switches{grid-area:switches;justify-self:end}

  header.top .searchcol > .opt-live-badge,
  header.top .right > .opt-live-badge{
    grid-column:1 / -1;
    max-width:100%;
  }
}
/* Search: empty state */
.sno-results{padding:18px 16px;text-align:center;color:var(--muted);font-size:14px;font-style:italic}

/* ===== 2026-04-24: Header + Hero uplift (light theme) ===== */
html[data-theme='light'] .top{
  border-bottom:1px solid #9bb2d1 !important;
  box-shadow:0 6px 20px rgba(30,58,102,.18), inset 0 1px 0 rgba(255,255,255,.7) !important;
}

html[data-theme='light'] .brand{
  filter:none !important;
  text-shadow:0 1px 0 rgba(255,255,255,.55),0 8px 18px rgba(24,46,84,.26) !important;
}

html[data-theme='light'] .q{
  border:1px solid #a8bddb !important;
  background:linear-gradient(180deg,#ffffff 0%,#f2f7ff 100%) !important;
  box-shadow:0 4px 14px rgba(40,78,138,.12) !important;
}

html[data-theme='light'] .catbtn,
html[data-theme='light'] .aibtn,
html[data-theme='light'] .cartlink,
html[data-theme='light'] .uxbtn{
  border:1px solid #8eaad1 !important;
  background:linear-gradient(180deg,#ffffff 0%,#dce9ff 100%) !important;
  box-shadow:0 10px 20px rgba(39,82,150,.2), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html[data-theme='light'] .catbtn:hover,
html[data-theme='light'] .aibtn:hover,
html[data-theme='light'] .cartlink:hover,
html[data-theme='light'] .uxbtn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(39,82,150,.28), 0 0 0 2px rgba(124,172,245,.22) !important;
}

html[data-theme='light'] .hero-top h1{
  font-size:56px;
  line-height:1;
  letter-spacing:-.6px;
  margin:2px 0 10px 0;
  color:#132544 !important;
  text-shadow:0 2px 0 rgba(255,255,255,.55);
}

html[data-theme='light'] .vh-main,
html[data-theme='light'] .vh-metrics{
  border:1px solid #9fb6d8 !important;
  border-radius:24px !important;
  box-shadow:0 18px 34px rgba(31,62,112,.18), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

html[data-theme='light'] .vh-main{
  background:
    radial-gradient(780px 260px at 0% 0%, rgba(110,156,236,.18), transparent 58%),
    radial-gradient(700px 240px at 100% 100%, rgba(192,133,230,.14), transparent 60%),
    linear-gradient(180deg,#eef4ff 0%,#e5edf9 100%) !important;
}

html[data-theme='light'] .vh-metrics{
  background:
    radial-gradient(760px 250px at 100% 0%, rgba(126,165,235,.18), transparent 60%),
    linear-gradient(180deg,#edf4ff 0%,#e3ebf7 100%) !important;
}

html[data-theme='light'] .vh-grid > div{
  border:1px solid #b2c5df !important;
  border-radius:22px !important;
  background:linear-gradient(180deg,#ffffff 0%,#f3f7ff 100%) !important;
  box-shadow:0 8px 18px rgba(22,52,99,.12), inset 0 1px 0 rgba(255,255,255,.95);
}

html[data-theme='light'] .vh-grid b,
html[data-theme='light'] .vh-grid .vh-metric-title{
  font-size:44px;
  line-height:.95;
  color:#0f274a !important;
}

html[data-theme='light'] .vh-grid small{font-size:14px;color:#44587a !important}
html[data-theme='light'] .vh-sub{font-size:13px;color:#536989 !important}

@media (max-width:700px){
  html[data-theme='light'] .hero-top h1{font-size:40px}
}

/* Final home polish overrides */
.home-hero-pro{background:linear-gradient(135deg,#111d31 0%,#1a3153 55%,#203b63 100%) !important;border-color:#9fb7d8}
.home-hero-pro::before{background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 1px,transparent 1px 18px),linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.02) 58%) !important}
.home-hero-copy{max-width:820px}
.home-hero-copy h1{color:#fff !important;text-shadow:0 3px 18px rgba(0,0,0,.34)}
.home-hero-copy p{color:#dbeafe !important;font-weight:650}
.home-hero-actions .vh-btn.primary{background:linear-gradient(180deg,#eaf3ff,#cfe2ff);color:#10203b;border-color:#b7ccea}
.home-hero-actions .vh-btn:not(.primary){background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28)}
.home-hero-proof span{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.24)}
.home-hero-visual{background:rgba(255,255,255,.93)}
html[data-theme='dark'] .home-hero-pro{background:linear-gradient(135deg,#0b1220 0%,#152844 58%,#1d3354 100%) !important}
html[data-theme='dark'] .home-hero-copy h1{color:#fff !important}
html[data-theme='dark'] .home-hero-copy p{color:#dbeafe !important}

/* Generated warehouse hero image + real brand marks */
.home-hero-pro{
  min-height:430px;
  grid-template-columns:minmax(0,1fr) minmax(300px,.52fr);
  align-items:stretch;
  background:
    linear-gradient(90deg,rgba(7,15,29,.90) 0%,rgba(14,28,51,.72) 42%,rgba(14,28,51,.24) 68%,rgba(14,28,51,.58) 100%),
    url('/assets/home-warehouse-hero.png') center/cover no-repeat !important;
  border-color:#adc3df;
}
.home-hero-pro::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 38%),
    radial-gradient(90% 120% at 78% 20%,rgba(255,255,255,.20),transparent 58%) !important;
}
.home-hero-copy{min-height:386px}
.home-hero-visual{
  min-height:386px;
  position:relative;
  overflow:hidden;
  padding:18px;
  border:1px solid rgba(255,255,255,.40);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(240,246,255,.76)) !important;
  backdrop-filter:blur(8px);
}
.home-hero-visual-title{font-size:0}
.home-hero-visual-title::after{
  content:"Бренди-партнери";
  font-size:15px;
  color:#14243e;
}
.home-hero-shots{display:none}
.home-hero-visual::after{
  content:"";
  flex:1;
  min-height:286px;
  display:block;
  border-radius:14px;
  border:1px solid rgba(166,188,219,.70);
  background:
    url('/assets/brands/apro.png') 8% 16%/23% auto no-repeat,
    url('/assets/brands/sila.png') 50% 16%/24% auto no-repeat,
    url('/assets/brands/alloid.png') 91% 16%/23% auto no-repeat,
    url('/assets/brands/vektor.png') 8% 49%/23% auto no-repeat,
    url('/assets/brands/unifix.png') 50% 49%/24% auto no-repeat,
    url('/assets/brands/rapide.png') 91% 49%/23% auto no-repeat,
    url('/assets/brands/ataman.png') 28% 80%/25% auto no-repeat,
    url('/assets/brands/sprut.png') 72% 80%/24% auto no-repeat,
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(233,241,252,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.80),0 18px 34px rgba(15,35,68,.18);
}

/* Older two-card hero fallback: replace the pair of tablets with the same visual. */
.vh-panel{
  min-height:410px;
  background:
    linear-gradient(90deg,rgba(8,18,34,.82),rgba(8,18,34,.18) 58%,rgba(8,18,34,.48)),
    url('/assets/home-warehouse-hero.png') center/cover no-repeat !important;
}
.vh-panel > .vh-main,
.vh-panel > .vh-metrics{display:none !important}

@media (max-width:1280px){
  .home-hero-pro{grid-template-columns:1fr;min-height:0}
  .home-hero-copy{min-height:300px}
  .home-hero-visual{min-height:250px}
  .home-hero-visual::after{min-height:210px;background-size:18% auto,19% auto,18% auto,18% auto,19% auto,18% auto,20% auto,19% auto,auto}
}
@media (max-width:760px){
  .home-hero-pro{
    background:
      linear-gradient(180deg,rgba(7,15,29,.90),rgba(11,24,45,.56) 52%,rgba(11,24,45,.82)),
      url('/assets/home-warehouse-hero.png') center/cover no-repeat !important;
  }
  .home-hero-copy{min-height:260px}
  .home-hero-visual{padding:12px;min-height:188px}
  .home-hero-visual::after{min-height:140px;background-size:25% auto,26% auto,25% auto,25% auto,26% auto,25% auto,0,0,auto}
}

/* Hero cleanup: keep the warehouse visual, remove duplicate brand tablet and chat CTA. */
.home-hero-pro{
  min-height:390px;
  grid-template-columns:1fr !important;
  padding:30px !important;
  background:
    linear-gradient(90deg,rgba(5,12,24,.92) 0%,rgba(9,20,39,.76) 42%,rgba(9,20,39,.30) 72%,rgba(9,20,39,.44) 100%),
    url('/assets/home-warehouse-hero.png') center/cover no-repeat !important;
}
.home-hero-copy{
  min-height:330px !important;
  max-width:940px !important;
}
.home-hero-visual{display:none !important}
.home-hero-actions a[href*="/ai-chat/"]{display:none !important}

.home-hero-actions{
  gap:12px;
  margin-top:26px;
}
.home-hero-actions .vh-btn{
  position:relative;
  overflow:hidden;
  min-height:52px;
  padding:0 20px;
  border-radius:14px !important;
  border:1px solid rgba(219,232,255,.66) !important;
  text-decoration:none;
  font-size:17px;
  font-weight:950;
  letter-spacing:0;
  color:#fff !important;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.06)) !important;
  box-shadow:
    0 18px 34px rgba(4,12,25,.34),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter:blur(8px);
}
.home-hero-actions .vh-btn::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:13px;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.42),rgba(255,255,255,0) 38%);
  opacity:.78;
}
.home-hero-actions .vh-btn.primary{
  color:#11203b !important;
  border-color:#cfe2ff !important;
  background:linear-gradient(180deg,#ffffff 0%,#d9e9ff 48%,#b9d4ff 100%) !important;
  box-shadow:
    0 18px 34px rgba(31,83,166,.34),
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(63,109,181,.30) !important;
}
.home-hero-actions .vh-btn:hover{
  transform:translateY(-2px);
  filter:saturate(1.08) brightness(1.04);
}
.home-hero-actions .vh-btn:active{transform:translateY(0) scale(.99)}

.home-hero-proof{
  max-width:760px;
  gap:10px;
}
.home-hero-proof span{
  border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.09)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 14px 24px rgba(4,12,25,.18);
}

@media (min-width:1181px){
  .home-cat-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:clamp(214px,15.8vw,248px);
    grid-template-rows:repeat(2,minmax(0,1fr));
    grid-template-columns:none !important;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    padding:2px 2px 12px 2px;
    scrollbar-width:thin;
  }
  .home-cat-tile{scroll-snap-align:start}
}
@media (max-width:1180px) and (min-width:761px){
  .home-cat-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(210px,34%);
    grid-template-rows:repeat(2,minmax(0,1fr));
    grid-template-columns:none !important;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    padding-bottom:10px;
  }
  .home-cat-tile{scroll-snap-align:start}
}
@media (max-width:760px){
  .home-cat-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(156px,46vw);
    grid-template-rows:repeat(2,minmax(0,1fr));
    grid-template-columns:none !important;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    padding:2px 2px 12px 2px;
  }
  .home-cat-tile{min-height:158px;scroll-snap-align:start}
  .home-cat-img{height:96px}
  .home-cat-name{font-size:12px}
}
@media (max-width:760px){
  .home-hero-pro{min-height:0;padding:18px 138px 18px 18px !important}
  .home-hero-copy{min-height:430px !important}
  .home-hero-copy h1{font-size:32px}
  .home-hero-copy p{max-width:136px}
  .home-hero-actions{align-items:flex-start}
  .home-hero-actions .vh-btn{min-width:132px;max-width:132px;min-height:48px;font-size:14px;padding:0 10px}
  .home-hero-proof{
    position:absolute;
    z-index:2;
    right:8px;
    top:250px;
    width:122px;
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:0;
    pointer-events:none;
  }
  .home-hero-proof span{
    min-height:58px;
    justify-content:center;
    padding:9px 10px;
    border-radius:11px;
    font-size:24px;
    cursor:default;
    user-select:none;
    background:linear-gradient(180deg,rgba(8,16,30,.68),rgba(8,16,30,.42)) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
  .home-hero-proof small{font-size:10px}
}

.home-cat-grid::-webkit-scrollbar{height:10px}
.home-cat-grid::-webkit-scrollbar-track{background:rgba(15,23,42,.08);border-radius:999px}
.home-cat-grid::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#9fb7da,#78a8ee);border-radius:999px;border:2px solid rgba(231,238,248,.95)}
.home-cat-grid::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#87a8d7,#5f96ec)}
html[data-theme='dark'] .home-cat-grid::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
html[data-theme='dark'] .home-cat-grid::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#45659a,#68a2ef);border-color:#111b2d}

.home-cat-split{
  display:flex !important;
  flex-direction:column;
  gap:14px;
  overflow:visible !important;
  padding:2px 0 4px 0 !important;
}
.home-cat-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:clamp(214px,15.8vw,248px);
  grid-template-columns:none;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:0 2px 12px 2px;
  scrollbar-width:thin;
}
.home-cat-row .home-cat-tile{scroll-snap-align:start}
.home-cat-row::-webkit-scrollbar{height:10px}
.home-cat-row::-webkit-scrollbar-track{background:rgba(15,23,42,.08);border-radius:999px}
.home-cat-row::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#9fb7da,#78a8ee);border-radius:999px;border:2px solid rgba(231,238,248,.95)}
.home-cat-row::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#87a8d7,#5f96ec)}
html[data-theme='dark'] .home-cat-row::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
html[data-theme='dark'] .home-cat-row::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#45659a,#68a2ef);border-color:#111b2d}
@media (max-width:1180px) and (min-width:761px){
  .home-cat-row{grid-auto-columns:minmax(210px,34%)}
}
@media (max-width:760px){
  .home-cat-split{gap:10px}
  .home-cat-row{grid-auto-columns:minmax(156px,46vw);gap:10px;padding-bottom:12px}
}

/* Make proof facts read as passive information, and make CTAs the clear action targets. */
@media (min-width:900px){
  .home-hero-pro{padding-right:270px !important}
  .home-hero-copy{max-width:820px !important}
  .home-hero-proof{
    position:absolute;
    z-index:2;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    width:220px;
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0;
    pointer-events:none;
  }
  .home-hero-proof span{
    min-height:74px;
    justify-content:center;
    padding:13px 16px;
    border-radius:12px;
    cursor:default;
    user-select:none;
    background:linear-gradient(180deg,rgba(8,16,30,.66),rgba(8,16,30,.40)) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important;
    backdrop-filter:blur(5px);
  }
}
.home-hero-proof span:hover{transform:none !important;filter:none !important}

.home-hero-actions .vh-btn{
  justify-content:center;
  min-width:184px;
  text-shadow:none;
}
.home-hero-actions .vh-btn.primary{
  color:#072b17 !important;
  border-color:#b9f5cf !important;
  background:linear-gradient(180deg,#ffffff 0%,#dcffe9 42%,#9df2be 100%) !important;
  box-shadow:
    0 20px 38px rgba(12,118,60,.36),
    0 0 0 3px rgba(157,242,190,.18),
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(29,125,70,.30) !important;
}
.home-hero-actions .vh-btn:not(.primary){
  color:#ffffff !important;
  border-color:rgba(255,255,255,.82) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.10)) !important;
  box-shadow:
    0 18px 34px rgba(4,12,25,.38),
    0 0 0 2px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
}
.home-hero-actions .vh-btn::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:8px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  opacity:.34;
}

/* Premium hero CTAs: make them read as real buttons, not passive glass labels. */
.home-hero-actions .vh-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:188px !important;
  min-height:54px !important;
  padding:0 24px !important;
  border-radius:15px !important;
  line-height:1 !important;
  text-align:center;
  transform:translateZ(0);
}
.home-hero-actions .vh-btn.primary{
  color:#082716 !important;
  border:1px solid rgba(201,255,221,.92) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(221,255,234,.98) 46%,rgba(112,226,155,.98) 100%) !important;
  box-shadow:
    0 18px 30px rgba(10,100,48,.36),
    0 0 0 1px rgba(255,255,255,.36),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(20,120,62,.28) !important;
}
.home-hero-actions .vh-btn:not(.primary){
  color:#ffffff !important;
  border:1px solid rgba(236,245,255,.76) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.13) 48%,rgba(255,255,255,.07) 100%) !important;
  box-shadow:
    0 16px 28px rgba(3,10,22,.40),
    0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.18) !important;
}
.home-hero-actions .vh-btn::before{
  inset:2px !important;
  border-radius:13px !important;
  background:linear-gradient(120deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.10) 42%,rgba(255,255,255,0) 68%) !important;
  opacity:.86 !important;
}
.home-hero-actions .vh-btn::after{
  left:22px !important;
  right:22px !important;
  bottom:9px !important;
  height:4px !important;
  opacity:1 !important;
  overflow:hidden;
  background:
    linear-gradient(90deg,transparent 0%,rgba(255,255,255,1) 30%,#4dff9b 50%,rgba(255,255,255,1) 70%,transparent 100%) -120% 0/55% 100% no-repeat,
    currentColor !important;
  box-shadow:0 0 14px rgba(77,255,155,.55);
  animation:heroCtaSliderA 6s linear infinite;
}
.home-hero-actions .vh-btn:nth-child(2)::after{
  animation:heroCtaSliderB 6s linear infinite;
}
.home-hero-actions .vh-btn:hover{
  transform:translateY(-2px) translateZ(0);
  filter:saturate(1.08) brightness(1.04);
}
/* One firefly across two strips: A handles outbound on btn1 + return on btn1; B handles middle pass on btn2. */
@keyframes heroCtaSliderA{
  0%   {background-position:-120% 0,0 0;opacity:1}
  25%  {background-position:220% 0,0 0;opacity:1}
  25.01%{opacity:0}
  75%  {background-position:220% 0,0 0;opacity:0}
  75.01%{background-position:220% 0,0 0;opacity:1}
  100% {background-position:-120% 0,0 0;opacity:1}
}
@keyframes heroCtaSliderB{
  0%   {background-position:-120% 0,0 0;opacity:0}
  25%  {background-position:-120% 0,0 0;opacity:0}
  25.01%{background-position:-120% 0,0 0;opacity:1}
  50%  {background-position:220% 0,0 0;opacity:1}
  75%  {background-position:-120% 0,0 0;opacity:1}
  75.01%{opacity:0}
  100% {background-position:-120% 0,0 0;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .home-hero-actions .vh-btn,
  .home-hero-actions .vh-btn::after{animation:none}
}

/* Final dark-mode sync for the current warehouse hero and CTA treatment. */
html[data-theme='dark'] .home-hero-pro{
  background:
    linear-gradient(90deg,rgba(5,12,24,.94) 0%,rgba(9,20,39,.78) 42%,rgba(9,20,39,.34) 72%,rgba(9,20,39,.50) 100%),
    url('/assets/home-warehouse-hero.png') center/cover no-repeat !important;
  border-color:rgba(173,195,223,.72) !important;
}
html[data-theme='dark'] .home-hero-actions .vh-btn.primary{
  color:#062314 !important;
  border-color:rgba(201,255,221,.92) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(218,255,233,.98) 44%,rgba(102,232,153,.98) 100%) !important;
  box-shadow:
    0 18px 32px rgba(19,151,75,.34),
    0 0 0 1px rgba(255,255,255,.22),
    inset 0 1px 0 #fff,
    inset 0 -2px 0 rgba(19,126,61,.28) !important;
}
html[data-theme='dark'] .home-hero-actions .vh-btn:not(.primary){
  color:#fff !important;
  border-color:rgba(236,245,255,.76) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.14) 48%,rgba(255,255,255,.07) 100%) !important;
  box-shadow:
    0 16px 28px rgba(3,10,22,.42),
    0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.18) !important;
}

.home-hero-proof em{
  display:block;
  max-width:100%;
  margin-top:3px;
  color:rgba(236,245,255,.78);
  font-style:normal;
  font-size:10.5px;
  line-height:1.1;
  font-weight:750;
  white-space:normal;
}

/* Proof cards belong to the full warehouse hero, not the text column. */
@media (min-width:900px){
  .home-hero-copy{position:static !important}
  .home-hero-proof{
    right:clamp(14px,1.4vw,24px) !important;
    left:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:clamp(200px,17vw,240px) !important;
  }
  .home-hero-proof span{
    height:clamp(70px,5.8vw,78px);
    overflow:hidden;
  }
}

@media (max-width:1180px){
  .home-hero-pro{padding-right:18px !important}
  .home-hero-proof{display:none !important}
}

/* === CTA shimmer for hero buttons (catalog/opt) === */
.vh-actions .vh-btn{
  position:relative;
  overflow:hidden;
}
.vh-actions .vh-btn::before{
  content:"";
  position:absolute;
  top:-120%;
  left:-45%;
  width:38%;
  height:260%;
  transform:rotate(22deg) translateX(-160%);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.62),rgba(255,255,255,0));
  pointer-events:none;
  opacity:.9;
  animation:vhBtnShineLoop 6s linear infinite;
}
.vh-actions .vh-btn:hover::before{
  animation-duration:1.2s;
}
@keyframes vhBtnShineLoop{
  0%,84%{transform:rotate(22deg) translateX(-170%);opacity:0}
  86%{opacity:.95}
  100%{transform:rotate(22deg) translateX(370%);opacity:0}
}

/* === Force-visible 6s polish shine for hero CTA buttons === */
.home-hero-actions .vh-btn{
  overflow:hidden !important;
  position:relative !important;
}
.home-hero-actions .vh-btn::after{
  content:"" !important;
  position:absolute !important;
  top:-130% !important;
  left:-50% !important;
  width:42% !important;
  height:300% !important;
  transform:rotate(22deg) translateX(-180%) !important;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92),rgba(255,255,255,0)) !important;
  opacity:.95 !important;
  pointer-events:none !important;
  animation:heroBtnPolish6s 6s linear infinite !important;
  box-shadow:0 0 18px rgba(255,255,255,.55) !important;
}
@keyframes heroBtnPolish6s{
  0%,82%{transform:rotate(22deg) translateX(-190%);opacity:0}
  84%{opacity:.98}
  100%{transform:rotate(22deg) translateX(390%);opacity:0}
}