:root {
    --bg-body: #f5f6fa;
    --bg-white: #ffffff;
    --bg-card: #ffffff;
    --bg-elevated: #f8f9fc;
    --bg-soft: #eef0f6;
    --bg-gradient-1: #667eea;
    --bg-gradient-2: #764ba2;
    --border: #e2e5ef;
    --border-light: #eef0f6;
    --border-focus: #667eea;
    --text: #1a1a2e;
    --text-secondary: #5a5f7a;
    --text-muted: #8e94ab;
    --accent: #667eea;
    --accent-hover: #5a6fd6;
    --accent-gradient: linear-gradient(135deg,#667eea,#764ba2);
    --accent-soft: rgba(102,126,234,0.08);
    --success: #22c55e;
    --success-soft: rgba(34,197,94,0.08);
    --warning: #f59e0b;
    --warning-soft: rgba(245,158,11,0.08);
    --danger: #ef4444;
    --danger-soft: rgba(239,68,68,0.08);
    --info: #3b82f6;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --shadow: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-md: 0 8px 30px rgba(0,0,0,0.08);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.10);
    --shadow-glow: 0 4px 20px rgba(102,126,234,0.15);
    --font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);background:var(--bg-body);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:var(--accent);text-decoration:none;transition:all .2s;}
a:hover{color:var(--accent-hover);}
img{max-width:100%;height:auto;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;}
.page-wrapper{min-height:100vh;display:flex;flex-direction:column;}
/* ── CUSTOMER DASHBOARD ── */
.dboard-wrap{padding-top:68px;min-height:100vh;background:var(--bg-body);display:flex;}
.dboard-inner{display:flex;width:100%;max-width:100%;}
/* ── SIDEBAR ── */
.dboard-sidebar{width:270px;flex-shrink:0;background:var(--bg-white);border-right:1px solid var(--border);position:fixed;top:68px;left:0;bottom:0;overflow-y:auto;z-index:5;display:flex;flex-direction:column;}
.dboard-sidebar::-webkit-scrollbar{width:4px;}
.dboard-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.sb-head{padding:28px 24px 20px;text-align:center;border-bottom:1px solid var(--border-light);}
.sb-head .sb-av{width:68px;height:68px;border-radius:18px;margin:0 auto 14px;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#fff;box-shadow:0 4px 15px rgba(102,126,234,0.3);position:relative;}
.sb-head .sb-av .sb-dot{width:12px;height:12px;border-radius:50%;background:var(--success);border:2px solid var(--bg-white);position:absolute;bottom:0;right:0;}
.sb-head .sb-nm{font-size:16px;font-weight:700;color:var(--text);}
.sb-head .sb-em{font-size:12px;color:var(--text-muted);margin-top:2px;word-break:break-all;}
.sb-head .sb-jn{font-size:11px;color:var(--text-muted);margin-top:6px;opacity:.7;}
.sb-nav{padding:16px 12px;flex:1;}
.sb-nav .sb-g{margin-bottom:20px;}
.sb-nav .sb-g:last-child{margin-bottom:0;}
.sb-nav .sb-g .sb-gl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);padding:0 12px;margin-bottom:6px;}
.sb-nav .sb-g .sb-gl i{display:none;}
.sb-nav .sb-g .sb-lk{display:flex;flex-direction:column;gap:2px;}
.sb-nav .sb-g .sb-lk a{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text-secondary);text-decoration:none;transition:all .2s;line-height:1.3;}
.sb-nav .sb-g .sb-lk a:hover{background:var(--accent-soft);color:var(--accent);}
.sb-nav .sb-g .sb-lk a.act{background:var(--accent-soft);color:var(--accent);font-weight:600;}
.sb-nav .sb-g .sb-lk a i{font-size:16px;width:20px;text-align:center;flex-shrink:0;opacity:.7;}
.sb-nav .sb-g .sb-lk a.act i{opacity:1;}
.sb-nav .sb-g .sb-lk a .sb-cnt{margin-left:auto;background:var(--accent);color:#fff;font-size:10px;font-weight:600;padding:2px 8px;border-radius:100px;line-height:1.3;}
.sb-ft{padding:14px 20px;border-top:1px solid var(--border-light);margin-top:auto;}
.sb-ft a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:13px;color:var(--text-secondary);text-decoration:none;transition:all .2s;}
.sb-ft a:hover{background:var(--danger-soft);color:var(--danger);}
/* ── DBOARD CONTENT ── */
.dboard-cnt{flex:1;margin-left:270px;padding:24px 32px 60px;min-height:calc(100vh - 68px);max-width:100%;}
/* ── PAGE HEADER ── */
.pg-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;}
.pg-hd .pgl h1{font-size:26px;font-weight:800;color:var(--text);letter-spacing:-0.03em;line-height:1.2;margin:0;}
.pg-hd .pgl p{font-size:14px;color:var(--text-muted);margin-top:4px;line-height:1.5;}
.pg-hd .pgr{display:flex;gap:8px;flex-shrink:0;}
/* ── WELCOME BANNER ── */
.wb{background:linear-gradient(135deg,var(--bg-gradient-1),var(--bg-gradient-2));border-radius:16px;padding:32px 36px;margin-bottom:28px;position:relative;overflow:hidden;}
.wb::before{content:'';position:absolute;top:-30%;right:-15%;width:350px;height:350px;border-radius:50%;background:rgba(255,255,255,0.05);pointer-events:none;}
.wb::after{content:'';position:absolute;bottom:-25%;left:-8%;width:250px;height:250px;border-radius:50%;background:rgba(255,255,255,0.03);pointer-events:none;}
.wb .wb-in{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:20px;}
.wb .wb-t h2{font-size:24px;font-weight:800;color:#fff;letter-spacing:-0.03em;margin:0 0 4px;}
.wb .wb-t p{font-size:14px;color:rgba(255,255,255,0.8);margin:0;line-height:1.5;}
.wb .wb-a{display:flex;gap:8px;flex-shrink:0;}
.wb .wb-a .btn{background:rgba(255,255,255,0.15);color:#fff;border:1px solid rgba(255,255,255,0.2);padding:8px 18px;font-size:13px;border-radius:10px;}
.wb .wb-a .btn:hover{background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.3);}
.wb .wb-a .btn-p{background:#fff;color:var(--bg-gradient-1);border-color:#fff;}
.wb .wb-a .btn-p:hover{background:rgba(255,255,255,0.9);color:#5a6fd6;}
/* ── STATS ROW ── */
.st-r{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
.st-c{background:var(--bg-white);border:1px solid var(--border);border-radius:14px;padding:20px 22px;transition:all .3s;}
.st-c:hover{box-shadow:0 6px 24px rgba(0,0,0,0.05);border-color:transparent;transform:translateY(-2px);}
.st-c .st-i{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px;}
.st-c .st-n{font-size:26px;font-weight:800;color:var(--text);line-height:1.2;letter-spacing:-0.03em;}
.st-c .st-l{font-size:13px;color:var(--text-muted);font-weight:500;margin-top:3px;}
.st-c .st-s{font-size:11px;font-weight:600;margin-top:6px;display:flex;align-items:center;gap:4px;}
.st-c .st-s.g{color:var(--success);}
.st-c .st-s.r{color:var(--danger);}
/* ── SECTION GRID (2-COL) ── */
.sc-g{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px;}
.sc-c{background:var(--bg-white);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:all .2s;}
.sc-c:hover{box-shadow:0 4px 16px rgba(0,0,0,0.04);}
.sc-c .sc-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 0;}
.sc-c .sc-h h3{font-size:15px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px;margin:0;}
.sc-c .sc-h h3 i{color:var(--accent);font-size:16px;}
.sc-c .sc-h .sc-l{font-size:12px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:3px;text-decoration:none;}
.sc-c .sc-h .sc-l:hover{color:var(--accent-hover);gap:5px;}
.sc-c .sc-b{padding:14px 22px 22px;}
/* ── EMPTY STATE ── */
.emp{text-align:center;padding:36px 16px;}
.emp .emp-i{font-size:40px;color:var(--text-muted);opacity:.3;margin-bottom:14px;display:block;}
.emp h4{font-size:15px;font-weight:600;color:var(--text-secondary);margin:0 0 5px;}
.emp p{font-size:13px;color:var(--text-muted);margin:0 auto 14px;line-height:1.5;max-width:260px;}
.emp .btn{margin-top:2px;}
/* ── LIST ITEMS ── */
.ls-it{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-light);text-decoration:none;transition:all .2s;}
.ls-it:last-child{border-bottom:none;}
.ls-it:hover{background:var(--bg-elevated);margin:0 -6px;padding:10px 6px;border-radius:6px;}
.ls-it .l-l{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ls-it .l-l .l-t{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ls-it .l-l .l-m{font-size:12px;color:var(--text-muted);}
.ls-it .l-r{text-align:right;flex-shrink:0;}
.ls-it .l-r .l-v{font-size:15px;font-weight:700;color:var(--text);}
.ls-it .l-r .l-b{margin-top:2px;display:inline-block;}
/* ── NOTIF ITEMS (compact) ── */
.nf-it{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-light);text-decoration:none;color:var(--text);transition:all .2s;}
.nf-it:last-child{border-bottom:none;}
.nf-it:hover{background:var(--bg-elevated);margin:0 -6px;padding:10px 6px;border-radius:6px;}
.nf-it .nf-i{flex-shrink:0;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--accent);background:var(--accent-soft);}
.nf-it .nf-b{flex:1;min-width:0;}
.nf-it .nf-b .nf-t{font-size:13px;font-weight:600;color:var(--text);}
.nf-it .nf-b .nf-x{font-size:12px;color:var(--text-secondary);margin-top:1px;}
.nf-it .nf-b .nf-n{font-size:11px;color:var(--text-muted);margin-top:3px;}
.nf-it .nf-bdg{flex-shrink:0;background:var(--accent);color:#fff;font-size:10px;font-weight:600;padding:2px 9px;border-radius:100px;align-self:center;}
/* ── QUICK ACTIONS ── */
.qk{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px;}
.qk-a{background:var(--bg-white);border:1px solid var(--border);border-radius:12px;padding:18px;text-align:center;transition:all .3s;text-decoration:none;display:block;}
.qk-a:hover{box-shadow:0 6px 20px rgba(0,0,0,0.05);border-color:transparent;transform:translateY(-2px);}
.qk-a .qk-i{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin:0 auto 10px;color:var(--accent);background:var(--accent-soft);transition:all .3s;}
.qk-a:hover .qk-i{background:var(--accent);color:#fff;}
.qk-a .qk-t{font-size:13px;font-weight:600;color:var(--text);}
/* ── NOTIF PAGE LIST ── */
.nf-pl{background:var(--bg-white);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.nf-pl .nf-pi{display:flex;align-items:flex-start;gap:12px;padding:16px 22px;border-bottom:1px solid var(--border-light);text-decoration:none;transition:background .2s;}
.nf-pl .nf-pi:last-child{border-bottom:none;}
.nf-pl .nf-pi:hover{background:var(--bg-elevated);}
.nf-pl .nf-pi .nfp-i{flex-shrink:0;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--accent);background:var(--accent-soft);}
.nf-pl .nf-pi .nfp-b{flex:1;min-width:0;}
.nf-pl .nf-pi .nfp-b .nfp-t{font-size:14px;font-weight:600;color:var(--text);}
.nf-pl .nf-pi .nfp-b .nfp-x{font-size:13px;color:var(--text-secondary);margin-top:2px;}
.nf-pl .nf-pi .nfp-b .nfp-n{font-size:12px;color:var(--text-muted);margin-top:3px;}
.nf-pl .nf-pi .nfp-bdg{background:var(--accent);color:#fff;font-size:10px;padding:3px 10px;border-radius:100px;flex-shrink:0;align-self:center;}
/* ── FORMS ── */
.fm-c{background:var(--bg-white);border:1px solid var(--border);border-radius:14px;padding:28px;}
.fm-c h3{font-size:16px;font-weight:700;color:var(--text);margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;gap:7px;}
.fm-c h3 i{color:var(--accent);}
.fm-g2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.fm-g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;}
.fm-h{font-size:12px;color:var(--text-muted);margin-top:3px;}
/* ── SESSIONS ── */
.ss-it{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border-light);}
.ss-it:last-child{border-bottom:none;}
.ss-it .ss-d .ss-nm{font-size:14px;font-weight:500;color:var(--text);}
.ss-it .ss-d .ss-ip{font-size:12px;color:var(--text-muted);margin-top:2px;}
.ss-it .ss-r{text-align:right;}
.ss-it .ss-r .ss-tm{font-size:12px;color:var(--text-muted);}
.ss-it .ss-r .badge{margin-top:3px;}
.ss-ac{margin-top:18px;}
/* ── TICKET ── */
.tk-fw{display:none;background:var(--bg-white);border:1px solid var(--border);border-radius:14px;padding:28px;margin-bottom:22px;}
.tk-fw.op{display:block;}
.tk-fw h3{font-size:16px;font-weight:700;color:var(--text);margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--border-light);}
.tk-fa{display:flex;gap:8px;}
.vb{font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px;background:var(--bg-soft);color:var(--text-muted);}
.dh-ac{display:flex;justify-content:space-between;align-items:center;}
/* ── RESPONSIVE ── */
@media(max-width:1100px){.st-r{grid-template-columns:repeat(2,1fr);}.qk{grid-template-columns:repeat(2,1fr);}}
@media(max-width:1024px){
.dboard-sidebar{width:240px;}
.pg-hd{flex-direction:column;align-items:flex-start;gap:10px;}
.wb .wb-in{flex-direction:column;text-align:center;gap:14px;}
.wb .wb-a{justify-content:center;}
}
@media(max-width:900px){
.dboard-sidebar{position:fixed;left:-280px;transition:left .3s;z-index:100;}
.dboard-sidebar.op{left:0;}
.dboard-cnt{margin-left:0;padding:20px;}
.dboard-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99;display:none;}
.dboard-overlay.op{display:block;}
}
@media(max-width:768px){
.st-r{grid-template-columns:repeat(2,1fr);gap:12px;}
.st-c{padding:16px 18px;}
.st-c .st-n{font-size:22px;}
.sc-g{grid-template-columns:1fr;}
.qk{grid-template-columns:repeat(2,1fr);gap:12px;}
.qk-a{padding:14px;}
.qk-a .qk-i{width:38px;height:38px;font-size:18px;}
.dboard-cnt{padding:16px 16px 40px;}
.wb{padding:24px;border-radius:12px;}
.wb .wb-t h2{font-size:22px;}
.sb-nav .sb-g .sb-lk{flex-direction:row;flex-wrap:wrap;}
.sb-nav .sb-g .sb-lk a{flex:1;min-width:calc(50% - 4px);justify-content:center;padding:8px;font-size:12px;}
.sb-nav .sb-g .sb-lk a i{margin:0;}
.sc-c .sc-b{padding:10px 16px 18px;}
.sc-c .sc-h{padding:14px 16px 0;}
.pg-hd .pgl h1{font-size:24px;}
.fm-c{padding:22px;}
.fm-g2,.fm-g3{grid-template-columns:1fr;}
}
@media(max-width:480px){
.st-r{grid-template-columns:1fr;}
.qk{grid-template-columns:1fr;gap:10px;}
.dboard-cnt{padding:12px 12px 40px;}
.wb{padding:20px;border-radius:10px;}
.wb .wb-t h2{font-size:20px;}
.st-c{padding:14px;}
.st-c .st-n{font-size:20px;}
.emp{padding:24px 12px;}
.sb-nav .sb-g .sb-lk a{min-width:100%;}
.fm-c{padding:18px;}
.pg-hd .pgl h1{font-size:20px;}
}

.d-none{display:none!important;}
.d-inline-flex{display:inline-flex!important;}
@media(min-width:901px){.d-md-none{display:none!important;}.d-md-inline-flex{display:inline-flex!important;}}
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:all .3s;}
.navbar.scrolled{background:rgba(255,255,255,0.97);box-shadow:var(--shadow);}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;height:68px;}
.navbar-inner .navbar-brand{margin-right:40px;margin-left:-24px;}
.navbar-brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;color:var(--text);}
.navbar-brand svg{flex-shrink:0;}
.navbar-brand span{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.navbar-links{display:flex;align-items:center;gap:2px;}
.navbar-links a{padding:8px 18px;color:var(--text-secondary);font-size:14px;font-weight:500;border-radius:var(--radius-sm);transition:all .2s;}
.navbar-links a:hover,.navbar-links a.active{color:var(--accent);background:var(--accent-soft);}
.navbar-actions{display:flex;align-items:center;gap:8px;position:relative;}
/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 24px;font-size:14px;font-weight:600;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:all .2s;text-decoration:none;line-height:1.2;font-family:var(--font);}
.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:0 2px 8px rgba(102,126,234,0.2);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 25px rgba(102,126,234,0.3);color:#fff;}
.btn-secondary{background:var(--bg-white);color:var(--text);border:1px solid var(--border);}
.btn-secondary:hover{background:var(--bg-elevated);border-color:var(--border-focus);color:var(--accent);}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border);}
.btn-ghost:hover{background:var(--bg-elevated);color:var(--text);border-color:var(--border-focus);}
.btn-success{background:var(--success);color:#fff;}
.btn-success:hover{background:#16a34a;color:#fff;}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{background:#dc2626;color:#fff;}
.btn-sm{padding:6px 14px;font-size:12px;}
.btn-lg{padding:14px 32px;font-size:16px;border-radius:var(--radius);}
.btn-xl{padding:16px 40px;font-size:17px;border-radius:var(--radius);}
.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-sm);}
.btn-block{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
/* ── HERO ── */
.hero{position:relative;min-height:85vh;display:flex;align-items:center;overflow:hidden;padding:140px 0 80px;background:linear-gradient(160deg,#f0f2ff 0%,#ffffff 40%,#fdf2f8 100%);}
.hero::before{content:'';position:absolute;top:-30%;right:-15%;width:700px;height:700px;background:radial-gradient(circle,rgba(102,126,234,0.08) 0%,transparent 70%);pointer-events:none;}
.hero::after{content:'';position:absolute;bottom:-25%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(118,75,162,0.06) 0%,transparent 70%);pointer-events:none;}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(102,126,234,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(102,126,234,0.03) 1px,transparent 1px);background-size:80px 80px;pointer-events:none;}
.hero-shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.hero-shape{position:absolute;border-radius:50%;opacity:.3;}
.hero-shape-1{top:15%;right:20%;width:300px;height:300px;background:radial-gradient(circle,rgba(102,126,234,0.12),transparent 70%);animation:floatShape 8s ease-in-out infinite;}
.hero-shape-2{bottom:20%;left:15%;width:200px;height:200px;background:radial-gradient(circle,rgba(118,75,162,0.1),transparent 70%);animation:floatShape 10s ease-in-out infinite reverse;}
.hero-shape-3{top:40%;left:50%;width:150px;height:150px;background:radial-gradient(circle,rgba(245,158,11,0.06),transparent 70%);animation:floatShape 6s ease-in-out infinite;}
@keyframes floatShape{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-30px) scale(1.05);}}
.hero-content{position:relative;z-index:1;text-align:center;max-width:850px;margin:0 auto;}
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 18px;background:var(--accent-soft);border:1px solid rgba(102,126,234,0.15);border-radius:100px;font-size:12px;font-weight:600;color:var(--accent);margin-bottom:28px;}
.hero h1{font-size:clamp(38px,6.5vw,68px);font-weight:800;line-height:1.08;margin-bottom:20px;letter-spacing:-0.04em;color:var(--text);}
.hero h1 span{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero p{font-size:18px;color:var(--text-secondary);max-width:640px;margin:0 auto 36px;line-height:1.8;}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
.hero-actions .btn i{font-size:16px;}
.hero-stats{display:flex;justify-content:center;gap:56px;margin-top:64px;}
.hero-stat{text-align:center;}
.hero-stat .num{font-size:32px;font-weight:800;color:var(--text);}
.hero-stat .lbl{font-size:13px;color:var(--text-muted);margin-top:4px;font-weight:500;}
/* ── SECTIONS ── */
.section{padding:80px 0;}
.section-alt{background:var(--bg-elevated);padding:80px 0;}
.section-header{text-align:center;margin-bottom:48px;}
.section-header h2{font-size:32px;font-weight:800;margin-bottom:12px;letter-spacing:-0.03em;}
.section-header p{color:var(--text-secondary);font-size:16px;max-width:540px;margin:0 auto;line-height:1.7;}
/* ── PRODUCT CARDS ── */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;}
.product-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .3s;position:relative;}
.product-card:hover{transform:translateY(-5px);border-color:transparent;box-shadow:var(--shadow-md);}
.product-card-image{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-elevated);}
.product-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.product-card:hover .product-card-image img{transform:scale(1.06);}
.product-card-image .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.4),transparent 60%);opacity:0;transition:opacity .3s;display:flex;align-items:flex-end;padding:16px;gap:8px;}
.product-card:hover .overlay{opacity:1;}
.product-card-image .overlay .btn{font-size:12px;padding:7px 16px;}
.product-card-image .wish-btn{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);border:none;color:var(--text-muted);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.08);}
.product-card-image .wish-btn:hover{color:var(--danger);background:#fff;}
.product-card-image .wish-btn.active{color:var(--danger);}
.product-card-body{padding:20px;}
.product-card-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);margin-bottom:6px;}
.product-card-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s;}
.product-card-title:hover{color:var(--accent);}
.product-card-desc{font-size:13px;color:var(--text-muted);margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.6;}
.product-card-meta{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--text-muted);margin-bottom:14px;}
.product-card-meta i{margin-right:3px;}
.product-card-meta .stars{color:var(--warning);}
.product-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border-light);}
.product-card-price{font-size:20px;font-weight:800;color:var(--text);}
.product-card-price .free{color:var(--success);}
.product-card-price .orig{font-size:13px;color:var(--text-muted);text-decoration:line-through;font-weight:400;margin-left:6px;}
.product-card-price .original{font-size:13px;color:var(--text-muted);text-decoration:line-through;font-weight:400;margin-left:6px;}
.product-card .ver-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px;background:var(--bg-soft);color:var(--text-secondary);}
/* ── CATEGORY CARDS ── */
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;}
.category-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 24px;text-align:center;transition:all .3s;}
.category-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:var(--shadow-md);}
.category-card .icon{font-size:42px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;min-height:64px;}
.category-card .icon img{display:block;}
.category-card h3{font-size:16px;font-weight:700;margin-bottom:4px;}
.category-card p{font-size:13px;color:var(--text-muted);}
/* ── FEATURES GRID ── */
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;}
.feature-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 28px;transition:all .3s;}
.feature-card:hover{border-color:transparent;box-shadow:var(--shadow-md);}
.feature-card .icon{width:52px;height:52px;border-radius:var(--radius);background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--accent);margin-bottom:18px;}
.feature-card h3{font-size:17px;font-weight:700;margin-bottom:8px;}
.feature-card p{font-size:14px;color:var(--text-secondary);line-height:1.7;}
/* ── TESTIMONIALS ── */
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;}
.testimonial-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;}
.testimonial-card .stars{margin-bottom:12px;color:var(--warning);font-size:18px;}
.testimonial-card blockquote{font-size:14px;color:var(--text-secondary);line-height:1.8;margin-bottom:18px;font-style:italic;}
.testimonial-card .author{display:flex;align-items:center;gap:12px;}
.testimonial-card .author .av{width:44px;height:44px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#fff;flex-shrink:0;}
.testimonial-card .author .nm{font-size:14px;font-weight:700;color:var(--text);}
.testimonial-card .author .rl{font-size:12px;color:var(--text-muted);}
/* ── FAQ ── */
.faq-list{max-width:760px;margin:0 auto;}
.faq-item{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;transition:box-shadow .2s;}
.faq-item:hover{box-shadow:var(--shadow-sm);}
.faq-q{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:600;font-size:15px;transition:background .2s;user-select:none;}
.faq-q:hover{background:var(--bg-elevated);}
.faq-q i{transition:transform .35s;color:var(--text-muted);font-size:14px;}
.faq-item.open .faq-q i{transform:rotate(180deg);color:var(--accent);}
.faq-a{padding:0 22px;max-height:0;overflow:hidden;transition:all .35s;}
.faq-item.open .faq-a{padding:0 22px 20px;max-height:600px;}
.faq-a p{color:var(--text-secondary);font-size:14px;line-height:1.8;}
/* ── NEWSLETTER ── */
.newsletter{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-xl);padding:64px;text-align:center;position:relative;overflow:hidden;}
.newsletter::before{content:'';position:absolute;top:-50%;right:-20%;width:400px;height:400px;background:radial-gradient(circle,rgba(102,126,234,0.06),transparent 70%);pointer-events:none;}
.newsletter h2{font-size:30px;font-weight:800;margin-bottom:12px;letter-spacing:-0.03em;}
.newsletter p{color:var(--text-secondary);margin-bottom:28px;font-size:16px;}
.newsletter-form{display:flex;gap:12px;max-width:500px;margin:0 auto;position:relative;z-index:1;}
.newsletter-form input{flex:1;padding:14px 18px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:14px;outline:none;transition:all .2s;font-family:var(--font);}
.newsletter-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(102,126,234,0.1);}
.newsletter-form input::placeholder{color:var(--text-muted);}
.newsletter-form .btn{padding:14px 32px;flex-shrink:0;}
/* ── FOOTER ── */

/* ── FORMS ── */
.form-group{margin-bottom:20px;}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;}
.form-input{width:100%;padding:11px 16px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:14px;outline:none;transition:all .2s;font-family:var(--font);}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(102,126,234,0.1);}
.form-input::placeholder{color:var(--text-muted);}
textarea.form-input{resize:vertical;min-height:100px;}
/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:600;}
.badge-success{background:var(--success-soft);color:var(--success);}
.badge-warning{background:var(--warning-soft);color:var(--warning);}
.badge-danger{background:var(--danger-soft);color:var(--danger);}
.badge-info{background:rgba(59,130,246,0.1);color:var(--info);}
.badge-muted{background:var(--bg-soft);color:var(--text-muted);}
/* ── ALERTS ── */
.alert{padding:14px 20px;border-radius:var(--radius);font-size:14px;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.alert-success{background:var(--success-soft);color:var(--success);border:1px solid rgba(34,197,94,0.15);}
.alert-danger{background:var(--danger-soft);color:var(--danger);border:1px solid rgba(239,68,68,0.15);}
.alert-warning{background:var(--warning-soft);color:var(--warning);border:1px solid rgba(245,158,11,0.15);}
.alert-info{background:rgba(59,130,246,0.1);color:var(--info);border:1px solid rgba(59,130,246,0.15);}
/* ── TABLE ── */
.table-wrap{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.table-wrap table{width:100%;border-collapse:collapse;}
.table-wrap th{padding:12px 18px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;text-align:left;border-bottom:1px solid var(--border);background:var(--bg-elevated);}
.table-wrap td{padding:12px 18px;font-size:13px;border-bottom:1px solid var(--border);color:var(--text-secondary);}
.table-wrap tr:last-child td{border-bottom:none;}
.table-wrap tr:hover td{background:var(--bg-elevated);}
.table-wrap .cell-title{color:var(--text);font-weight:500;}
/* ── PAGINATION ── */
.pagination{display:flex;justify-content:center;gap:4px;margin-top:32px;}
.pagination a,.pagination span{padding:8px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;transition:all .2s;}
.pagination a{color:var(--text-secondary);background:var(--bg-white);border:1px solid var(--border);}
.pagination a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.pagination .active{background:var(--accent-gradient);color:#fff;border-color:transparent;}
/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);z-index:2000;display:none;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--bg-white);border-radius:var(--radius-xl);padding:32px;max-width:500px;width:90%;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-lg);}
/* ── BREADCRUMBS ── */
.breadcrumbs{display:flex;align-items:center;gap:8px;padding:88px 0 20px;font-size:13px;}
.breadcrumbs a{color:var(--text-muted);}
.breadcrumbs a:hover{color:var(--accent);}
.breadcrumbs span{color:var(--text-secondary);}
.breadcrumbs .sep{color:var(--border);}
/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:60px 20px;}
.empty-state .icon{font-size:48px;color:var(--text-muted);margin-bottom:16px;}
.empty-state h3{font-size:18px;font-weight:600;margin-bottom:8px;}
.empty-state p{color:var(--text-secondary);font-size:14px;margin-bottom:20px;}
/* ── SPINNER ── */
.spinner{display:inline-block;width:20px;height:20px;border:2px solid rgba(0,0,0,0.08);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
/* ── TOAST ── */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:3000;display:flex;flex-direction:column;gap:8px;}
.toast{padding:14px 20px;border-radius:var(--radius);font-size:14px;font-weight:500;box-shadow:var(--shadow-md);animation:slideUp .3s ease;display:flex;align-items:center;gap:10px;min-width:280px;}
.toast-success{background:#f0fdf4;border:1px solid rgba(34,197,94,0.2);color:var(--success);}
.toast-error{background:#fef2f2;border:1px solid rgba(239,68,68,0.2);color:var(--danger);}
.toast-info{background:#eff6ff;border:1px solid rgba(59,130,246,0.2);color:var(--info);}
@keyframes slideUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
/* ── SEARCH ── */
.search-wrap{position:relative;display:flex;align-items:center;width:40px;transition:width .3s;cursor:pointer;}
.search-wrap.search-open{width:320px;}
.search-wrap .search-icon{position:absolute;left:12px;color:var(--text-muted);font-size:16px;transition:color .2s;z-index:2;}
.search-wrap:focus-within .search-icon,.search-wrap.search-open .search-icon{color:var(--accent);}
.search-wrap .search-input{width:100%;padding:8px 36px 8px 40px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:13px;outline:none;transition:all .25s;font-family:var(--font);display:none;}
.search-wrap.search-open .search-input{display:block;}
.search-wrap .search-input::placeholder{color:var(--text-muted);}
.search-wrap .search-input:focus{border-color:var(--accent);background:var(--bg-white);box-shadow:0 0 0 3px rgba(102,126,234,0.08);}
.search-wrap .search-clear{position:absolute;right:8px;width:22px;height:22px;border-radius:50%;border:none;background:var(--bg-soft);color:var(--text-muted);font-size:9px;cursor:pointer;display:none;align-items:center;justify-content:center;transition:all .2s;z-index:2;}
.search-wrap.search-open .search-clear{display:none;}
.search-wrap.search-open .search-input:not(:placeholder-shown)~.search-clear{display:flex;}
.search-wrap .search-clear:hover{background:var(--danger-soft);color:var(--danger);}
/* ── SEARCH DROPDOWN ── */
.search-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:540px;background:rgba(30,30,50,0.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-lg);box-shadow:0 20px 60px rgba(0,0,0,0.35);max-height:600px;overflow:hidden;display:none;z-index:9999;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s;}
.search-dropdown.open{display:flex;flex-direction:column;opacity:1;transform:translateY(0);}
.sd-loading{display:none;align-items:center;justify-content:center;padding:40px;}
.sd-loading.active{display:flex;}
.sd-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;max-height:480px;}
.sd-body::-webkit-scrollbar{width:4px;}
.sd-body::-webkit-scrollbar-track{background:transparent;}
.sd-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:2px;}
.sd-body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2);}
.sd-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,0.06);display:none;}
.sd-footer.show{display:block;}
.sd-view-all{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:var(--radius-sm);background:rgba(102,126,234,0.15);color:#fff;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s;width:100%;}
.sd-view-all:hover{background:rgba(102,126,234,0.25);color:#fff;}
.sd-empty{display:none;flex-direction:column;align-items:center;padding:48px 24px;}
.sd-empty.show{display:flex;}
.sd-empty-icon{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;font-size:28px;color:rgba(255,255,255,0.2);margin-bottom:16px;}
.sd-empty-title{font-size:16px;font-weight:600;color:rgba(255,255,255,0.7);margin-bottom:8px;}
.sd-empty-sub{font-size:13px;color:rgba(255,255,255,0.35);}
/* ── SEARCH RESULT CARDS (HORIZONTAL) ── */
.sr-card{display:flex;gap:12px;padding:10px 16px;cursor:pointer;transition:all .2s;text-decoration:none;border-radius:0;}
.sr-card:hover{background:rgba(255,255,255,0.06);}
.sr-card:hover .sr-thumb img{transform:scale(1.08);}
.sr-thumb{flex-shrink:0;width:120px;height:80px;border-radius:var(--radius-sm);overflow:hidden;background:rgba(255,255,255,0.05);box-shadow:0 2px 8px rgba(0,0,0,0.15);position:relative;}
.sr-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.sr-thumb .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.15);font-size:24px;}
.sr-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;}
.sr-name{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sr-name:hover{color:rgba(102,126,234,0.8);}
.sr-category{font-size:11px;color:rgba(255,255,255,0.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sr-meta{display:flex;gap:12px;font-size:11px;color:rgba(255,255,255,0.3);margin-top:1px;}
.sr-meta span{display:flex;align-items:center;gap:3px;}
.sr-meta i{font-size:10px;}
.sr-right{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;min-width:80px;padding-left:8px;}
.sr-price{font-size:16px;font-weight:700;color:#fff;}
.sr-price .free{color:var(--success);font-size:13px;}
.sr-price-old{font-size:11px;color:rgba(255,255,255,0.35);text-decoration:line-through;}
.sr-sale-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;background:rgba(239,68,68,0.25);color:#ef4444;}
/* ── PRODUCT LABELS (badge row) ── */
.sr-labels{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap;}
.sr-label{display:inline-flex;align-items:center;padding:1px 7px;border-radius:4px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;}
.sr-label-sale{background:rgba(239,68,68,0.2);color:#ef4444;}
.sr-label-featured{background:rgba(102,126,234,0.2);color:#818cf8;}
.sr-label-trending{background:rgba(245,158,11,0.2);color:#f59e0b;}
.sr-label-popular{background:rgba(34,197,94,0.2);color:#22c55e;}
.sr-label-bestseller{background:rgba(249,115,22,0.2);color:#f97316;}
.sr-label-new{background:rgba(59,130,246,0.2);color:#60a5fa;}
.sr-label-updated{background:rgba(139,92,246,0.2);color:#a78bfa;}
.sr-label-verified{background:rgba(34,197,94,0.15);color:#4ade80;border:1px solid rgba(34,197,94,0.15);}
/* ── SEARCH FULL RESULTS PAGE ── */
.sr-page-wrap{padding-top:88px;max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px;}
.sr-page-header{padding:24px 0 32px;}
.sr-page-header h1{font-size:28px;font-weight:800;letter-spacing:-.03em;margin-bottom:4px;}
.sr-page-header p{color:var(--text-muted);font-size:15px;}
.sr-page-search{margin-bottom:32px;}
.sr-page-search form{display:flex;gap:12px;max-width:640px;}
.sr-page-search input{flex:1;padding:14px 18px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:15px;outline:none;transition:all .2s;font-family:var(--font);}
.sr-page-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(102,126,234,0.1);}
.sr-page-search .btn{padding:14px 28px;flex-shrink:0;}
.sr-page-list{display:flex;flex-direction:column;gap:16px;}
.sr-page-card{display:flex;gap:20px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .3s;text-decoration:none;padding:16px;}
.sr-page-card:hover{border-color:transparent;box-shadow:var(--shadow-md);}
.sr-page-card:hover .sr-page-thumb img{transform:scale(1.06);}
.sr-page-thumb{flex-shrink:0;width:200px;min-height:130px;border-radius:var(--radius);overflow:hidden;background:var(--bg-elevated);}
.sr-page-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.sr-page-thumb .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:36px;}
.sr-page-body{flex:1;display:flex;flex-direction:column;justify-content:center;}
.sr-page-body .sr-name{font-size:18px;color:var(--text);margin-bottom:2px;}
.sr-page-body .sr-name:hover{color:var(--accent);}
.sr-page-body .sr-category{font-size:12px;color:var(--text-muted);margin-bottom:6px;}
.sr-page-body .desc{font-size:13px;color:var(--text-secondary);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px;}
.sr-page-body .sr-meta{color:var(--text-muted);font-size:12px;}
.sr-page-body .sr-labels{margin-top:4px;}
.sr-page-right{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;min-width:100px;padding-left:16px;border-left:1px solid var(--border-light);}
.sr-page-right .sr-price{font-size:24px;color:var(--text);}
.sr-page-right .sr-price .free{color:var(--success);font-size:16px;}
.sr-page-right .sr-price-old{font-size:13px;}
.sr-page-right .sr-sale-badge{padding:3px 10px;font-size:11px;border-radius:6px;background:var(--danger-soft);color:var(--danger);font-weight:700;}
/* Mobile search overlay */
@media(max-width:768px){
    .search-wrap.search-open{width:40px;}
    .search-wrap .search-input{position:fixed;top:0;left:0;right:0;z-index:9998;padding:20px 48px 20px 48px;border-radius:0;border:none;font-size:16px;height:68px;display:none;box-shadow:var(--shadow-lg);}
    .search-wrap.search-open .search-input{display:block;}
    .search-wrap .search-icon{left:14px;z-index:9999;font-size:16px;cursor:pointer;pointer-events:auto;}
    .search-wrap .search-clear{right:14px;z-index:9999;}
    .search-dropdown{position:fixed;top:68px;left:0;right:0;min-width:100%;max-height:calc(100vh - 68px);border-radius:0;border-top:1px solid rgba(255,255,255,0.08);}
    .sr-card{padding:12px 16px;}
    .sr-thumb{width:90px;height:64px;}
    .sr-page-card{flex-direction:column;padding:14px;}
    .sr-page-thumb{width:100%;min-height:120px;}
    .sr-page-right{border-left:none;padding-left:0;padding-top:12px;border-top:1px solid var(--border-light);flex-direction:row;align-items:center;gap:12px;min-width:auto;width:100%;justify-content:flex-start;}
}
@media(max-width:480px){
    .sr-thumb{width:76px;height:56px;}
    .sr-name{font-size:13px;}
    .sr-right{min-width:60px;}
    .sr-price{font-size:14px;}
}



/* ── RTL SUPPORT ── */
html[dir="rtl"] .navbar-links{margin-right:auto;margin-left:0;}
html[dir="rtl"] .navbar-actions{gap:8px;}
html[dir="rtl"] .search-wrap .search-icon{right:14px;left:auto;}
html[dir="rtl"] .search-wrap .search-clear{left:14px;right:auto;}
html[dir="rtl"] .search-input{padding:8px 40px 8px 12px;}
html[dir="rtl"] .search-dropdown{left:0;right:auto;}
html[dir="rtl"] .sd-footer a i{transform:rotate(180deg);display:inline-block;}
html[dir="rtl"] .breadcrumbs .sep{margin:0 2px;}
html[dir="rtl"] .cart-item-total{text-align:left;}
html[dir="rtl"] .summary-row .val{text-align:left;}
html[dir="rtl"] .coupon-applied a{margin-right:auto;margin-left:0;}
html[dir="rtl"] .checkout-layout .form-label{text-align:right;}
html[dir="rtl"] .product-card-category{text-align:right;}
html[dir="rtl"] .product-card-footer{direction:ltr;}
html[dir="rtl"] .pagination a i{transform:rotate(180deg);display:inline-block;}
html[dir="rtl"] .pp-specs .spec-value{text-align:left;}
html[dir="rtl"] .pp-bread .sep{margin:0 2px;}
html[dir="rtl"] .st-c .st-i{margin-left:0;margin-right:0;}
html[dir="rtl"] .pg-hd .pgr{margin-right:auto;margin-left:0;}
html[dir="rtl"] .dboard-sidebar{left:auto;right:0;border-right:none;border-left:1px solid var(--border);}
html[dir="rtl"] .dboard-cnt{margin-left:0;margin-right:270px;}
html[dir="rtl"] .sb-nav .sb-g .sb-lk a i{margin-left:10px;margin-right:0;}
html[dir="rtl"] .sb-nav .sb-g .sb-lk a .sb-cnt{margin-left:0;margin-right:auto;}

html[dir="rtl"] .cart-item-controls .remove-btn{margin-left:0;margin-right:4px;}
html[dir="rtl"] .sr-right{padding-left:0;padding-right:8px;align-items:flex-start;}
html[dir="rtl"] .sr-page-right{border-left:none;border-right:1px solid var(--border-light);padding-left:0;padding-right:16px;align-items:flex-start;}