/*
 * TRUST MARKETPLACE — THEME 4.0
 * 3D Cinematic Deep Space
 */

@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url('/outfit-300.ttf') format('truetype')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('/outfit-400.ttf') format('truetype')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('/outfit-500.ttf') format('truetype')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('/outfit-600.ttf') format('truetype')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('/outfit-700.ttf') format('truetype')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url('/outfit-700.ttf') format('truetype')}

:root{--accent:#a855f7;--accent-rgb:168,85,247;--accent-light:#d8b4fe;--accent-glow:rgba(168,85,247,0.5);--accent-glow-soft:rgba(168,85,247,0.15);--accent2:#06b6d4;--accent2-rgb:6,182,212;--accent2-glow:rgba(6,182,212,0.4);--bg:#030014;--bg-rgb:3,0,20;--bg-deep:#01000a;--surface:rgba(15,10,40,0.6);--surface-solid:#0f0a28;--surface-hover:rgba(30,20,70,0.7);--glass:rgba(255,255,255,0.03);--glass-border:rgba(255,255,255,0.06);--glass-hover:rgba(255,255,255,0.08);--text:#f0eaff;--text-muted:#8b80a8;--text-dim:#5a5078;--radius:16px;--radius-sm:10px;--radius-lg:24px;--radius-xl:32px;--radius-pill:9999px;--shadow-glow:0 0 40px rgba(var(--accent-rgb),0.3),0 8px 32px rgba(0,0,0,0.5);--shadow-glow-strong:0 0 60px rgba(var(--accent-rgb),0.5),0 12px 48px rgba(0,0,0,0.6);--shadow-card:0 4px 24px rgba(0,0,0,0.4),0 0 0 1px var(--glass-border);--shadow-card-hover:0 8px 40px rgba(0,0,0,0.5),0 0 30px var(--accent-glow-soft),0 0 0 1px var(--glass-hover);--transition:0.3s cubic-bezier(0.4,0,0.2,1);--transition-slow:0.5s cubic-bezier(0.4,0,0.2,1);--nav-height:64px}

@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInScale{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{opacity:0.4;transform:scale(1)}50%{opacity:0.7;transform:scale(1.03)}}
@keyframes orbFloat1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-25px,20px) scale(0.94)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-30px,30px) scale(0.95)}66%{transform:translate(25px,-15px) scale(1.05)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes toastSlideIn{from{transform:translateX(80px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes modalSlideIn{from{opacity:0;transform:translateY(30px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes particleFloat{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100vh) translateX(50px);opacity:0}}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{font-family:'Outfit',system-ui,-apple-system,sans-serif;color:var(--text);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;animation:fadeIn 0.6s ease-out}
/* i18n flash prevention */
html:not(.i18n-ready) [data-i18n]{visibility:hidden}
html.i18n-ready [data-i18n]{visibility:visible}

html[dir="rtl"] body,html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,html[dir="rtl"] h5,html[dir="rtl"] h6{font-family:'Outfit','Segoe UI','Tahoma',system-ui,sans-serif;text-rendering:optimizeLegibility;line-height:1.6}
html[dir="rtl"] .brand-accent,html[dir="rtl"] .gradient-text,html[dir="rtl"] .accent,html[dir="rtl"] .text-gradient{display:inline-block}
a{text-decoration:none;color:inherit;transition:color var(--transition)}
button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit;transition:all var(--transition)}
img{max-width:100%;height:auto;display:block}
input,select,textarea{font-family:inherit;font-size:inherit}
::selection{background:rgba(var(--accent-rgb),0.3);color:#fff}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--accent-glow-soft);border-radius:3px}
*{scrollbar-width:thin;scrollbar-color:var(--accent-glow-soft) transparent}

.bg-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(var(--accent-rgb),0.08) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 100%,rgba(var(--accent2-rgb),0.06) 0%,transparent 50%),linear-gradient(180deg,var(--bg-deep) 0%,var(--bg) 100%)}
.bg-orbs{position:absolute;inset:0;overflow:hidden}
.bg-orbs .orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.15}
.bg-orbs .orb-1{width:600px;height:600px;background:radial-gradient(circle,var(--accent),transparent 70%);top:-15%;right:-10%;animation:orbFloat1 25s ease-in-out infinite}
.bg-orbs .orb-2{width:500px;height:500px;background:radial-gradient(circle,var(--accent2),transparent 70%);bottom:-10%;left:-8%;animation:orbFloat2 30s ease-in-out infinite}
.bg-orbs .orb-3{width:350px;height:350px;background:radial-gradient(circle,rgba(var(--accent-rgb),0.6),transparent 70%);top:40%;left:35%;animation:orbFloat1 20s ease-in-out infinite reverse}
.bg-orbs .orb-4{width:250px;height:250px;background:radial-gradient(circle,rgba(var(--accent2-rgb),0.4),transparent 70%);top:60%;right:20%;animation:orbFloat2 22s ease-in-out infinite}
.particles{position:absolute;inset:0;overflow:hidden}
.particles .particle{position:absolute;width:2px;height:2px;background:var(--accent-light);border-radius:50%;animation:particleFloat linear infinite;opacity:0;box-shadow:0 0 6px var(--accent-glow)}
.grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(var(--accent-rgb),0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent-rgb),0.03) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black 20%,transparent 70%)}

.loader-wrapper{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity 0.6s ease,visibility 0.6s ease}
.loader-wrapper.hide{opacity:0;visibility:hidden}
.loader-animated{position:relative;width:80px;height:80px}
.loader-ring-outer{position:absolute;inset:0;border:2px solid rgba(var(--accent-rgb),0.08);border-top-color:var(--accent);border-right-color:rgba(var(--accent-rgb),0.3);border-radius:50%;animation:spin 0.8s linear infinite;box-shadow:0 0 30px var(--accent-glow-soft),inset 0 0 20px rgba(var(--accent-rgb),0.05)}
.loader-ring-inner{position:absolute;inset:12px;border:2px solid rgba(var(--accent2-rgb),0.05);border-bottom-color:var(--accent2);border-left-color:rgba(var(--accent2-rgb),0.2);border-radius:50%;animation:spin 1.2s linear infinite reverse;box-shadow:0 0 20px rgba(var(--accent2-rgb),0.1)}
.loader-pulse{position:absolute;inset:24px;background:radial-gradient(circle,rgba(var(--accent-rgb),0.2),transparent 70%);border-radius:50%;animation:breathe 2s ease-in-out infinite}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
@media(max-width:768px){.container{padding:0 16px}}

.t3-navbar{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100;width:calc(100% - 32px);max-width:1160px;height:var(--nav-height);animation:fadeInDown 0.5s ease-out}
.t3-navbar .navbar-bg{position:absolute;inset:0;background:rgba(15,10,40,0.6);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,0.4),0 0 0 1px rgba(var(--accent-rgb),0.05),inset 0 1px 0 rgba(255,255,255,0.05);transition:all var(--transition)}
.t3-navbar:hover .navbar-bg{border-color:rgba(var(--accent-rgb),0.15);box-shadow:0 8px 40px rgba(0,0,0,0.5),0 0 30px var(--accent-glow-soft),inset 0 1px 0 rgba(255,255,255,0.08)}
.t3-navbar .inner{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem;color:#fff;flex-shrink:0;z-index:2}
.brand img{height:32px;border-radius:var(--radius-sm)}
.brand .brand-accent{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 8px var(--accent-glow))}
.t3-navbar .nav-links-wrapper{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,0.03);border:1px solid var(--glass-border);border-radius:var(--radius-pill);padding:5px 6px;transition:all var(--transition)}
.t3-navbar .nav-links-wrapper:hover{border-color:rgba(var(--accent-rgb),0.12);background:rgba(255,255,255,0.05)}
.t3-navbar .nav-link{color:rgba(240,234,255,0.8);font-size:0.82rem;font-weight:500;padding:8px 18px;border-radius:var(--radius-pill);white-space:nowrap;position:relative;transition:all var(--transition)}
.t3-navbar .nav-link:hover{color:#fff;background:rgba(255,255,255,0.06)}
.t3-navbar .nav-link.active{color:var(--accent-light);background:rgba(var(--accent-rgb),0.1);text-shadow:0 0 10px var(--accent-glow)}
.t3-navbar .nav-actions{display:flex;align-items:center;gap:6px;z-index:2}
.t3-navbar .nav-icon-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:rgba(240,234,255,0.8);font-size:0.9rem;position:relative;transition:all var(--transition)}
.t3-navbar .nav-icon-btn:hover{background:rgba(var(--accent-rgb),0.1);color:var(--accent-light);transform:scale(1.1);box-shadow:0 0 15px var(--accent-glow-soft)}
.t3-navbar .nav-separator{width:1px;height:18px;background:var(--glass-border);margin:0 2px}
.t3-navbar .cart-count{position:absolute;top:0;right:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:0.55rem;font-weight:800;min-width:15px;height:15px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);padding:0 3px;box-shadow:0 0 10px var(--accent-glow)}
html[dir="rtl"] .t3-navbar .cart-count{right:auto;left:0}

.lang-toggle{display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius:var(--radius-pill);background:rgba(var(--accent-rgb),0.08);border:1px solid rgba(var(--accent-rgb),0.12);color:var(--accent-light);font-size:0.75rem;font-weight:600;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.lang-toggle:hover{background:rgba(var(--accent-rgb),0.15);border-color:rgba(var(--accent-rgb),0.25);box-shadow:0 0 15px var(--accent-glow-soft);transform:scale(1.05)}
.lang-toggle .lang-icon{font-size:0.85rem}
.lang-toggle .lang-label{display:none}
@media(min-width:600px){.lang-toggle .lang-label{display:inline}}

.t3-navbar .mobile-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.2rem;padding:8px;cursor:pointer;z-index:2;border-radius:var(--radius-sm);transition:all var(--transition)}
.t3-navbar .mobile-toggle:hover{background:rgba(var(--accent-rgb),0.1);color:var(--accent)}
@media(max-width:900px){
  .t3-navbar .nav-links-wrapper{display:none}
  .t3-navbar .nav-links-wrapper.open{display:flex;flex-direction:column;position:fixed;top:86px;left:16px;right:16px;width:auto;border-radius:var(--radius-lg);background:rgba(15,10,40,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);padding:12px;gap:4px;box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 40px var(--accent-glow-soft);animation:fadeInDown 0.3s ease-out;z-index:99}
  .t3-navbar .nav-link{width:100%;text-align:center;padding:12px 16px;font-size:0.9rem}
  .t3-navbar .mobile-toggle{display:flex}
  .t3-navbar .nav-separator{display:none}
}

.t3-hero{padding:calc(var(--nav-height) + 80px) 24px 80px;text-align:center;position:relative;overflow:hidden}
.t3-hero::before{content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:1000px;height:700px;background:radial-gradient(ellipse,rgba(var(--accent-rgb),0.1) 0%,transparent 65%);pointer-events:none;animation:breathe 8s ease-in-out infinite}
.t3-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:150px;background:linear-gradient(to top,var(--bg),transparent);pointer-events:none}
.t3-hero h1{font-size:clamp(2.2rem,6vw,4.5rem);font-weight:800;line-height:1.1;margin-bottom:20px;position:relative;animation:fadeInUp 0.8s ease-out 0.2s both;letter-spacing:-0.03em}
.t3-hero h1 .accent,.t3-hero h1 .gradient-text,.text-gradient{background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 50%,var(--accent) 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 5s ease infinite;filter:drop-shadow(0 0 30px var(--accent-glow))}
.t3-hero p{color:var(--text-muted);font-size:clamp(0.95rem,2vw,1.15rem);max-width:600px;margin:0 auto 36px;position:relative;animation:fadeInUp 0.8s ease-out 0.4s both;line-height:1.8}
.t3-hero .hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;animation:fadeInUp 0.8s ease-out 0.6s both}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border-radius:var(--radius-pill);font-weight:600;font-size:0.875rem;transition:all var(--transition);white-space:nowrap;position:relative;overflow:hidden;border:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(0.97)}
.btn-primary{background:linear-gradient(135deg,var(--accent),#7c3aed);color:#fff;box-shadow:0 4px 20px var(--accent-glow),0 0 0 1px rgba(var(--accent-rgb),0.1)}
.btn-primary:hover{background:linear-gradient(135deg,#c084fc,var(--accent));box-shadow:0 6px 30px var(--accent-glow),0 0 20px var(--accent-glow-soft)}
.btn-outline{background:transparent;color:rgba(240,234,255,0.9);border:1px solid rgba(var(--accent-rgb),0.2)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-light);background:rgba(var(--accent-rgb),0.05);box-shadow:0 0 20px var(--accent-glow-soft)}
.btn-success{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 4px 15px rgba(34,197,94,0.3)}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 15px rgba(239,68,68,0.3)}
.btn:disabled{opacity:0.3;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-sm{padding:6px 16px;font-size:0.8rem}
.btn-lg{padding:16px 36px;font-size:1.05rem}
.btn-block{width:100%;justify-content:center}

.t3-section{padding:80px 24px;position:relative}
.t3-section-dark{background:linear-gradient(180deg,transparent,rgba(var(--accent-rgb),0.02),transparent)}
@media(max-width:768px){.t3-section{padding:50px 16px}}

/* Hero Stats — cinematic stat cards inside hero */
.hero-stats{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:40px;position:relative;z-index:2}
.hero-stat{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:20px 28px;text-align:center;min-width:140px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all var(--transition)}
.hero-stat:hover{border-color:rgba(var(--accent-rgb),0.2);transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.hero-stat .value{font-size:1.6rem;font-weight:800;background:linear-gradient(135deg,var(--accent-light),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2;margin-bottom:4px}
.hero-stat .label{font-size:0.72rem;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.06em}
@media(max-width:768px){.hero-stats{gap:10px}.hero-stat{padding:14px 18px;min-width:100px}.hero-stat .value{font-size:1.3rem}}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:48px}
.stat-box{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:24px 16px;text-align:center;transition:all var(--transition);position:relative;overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.stat-box:hover{border-color:rgba(var(--accent-rgb),0.2);transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.stat-box .stat-value{font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,var(--accent-light),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2;margin-bottom:4px}
.stat-box .stat-label{font-size:0.72rem;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.06em}
@media(max-width:768px){.stats-row{grid-template-columns:repeat(2,1fr);gap:10px}.stat-box{padding:18px 10px}.stat-box .stat-value{font-size:1.4rem}}

.t3-section .section-header{text-align:center;margin-bottom:48px}
.t3-section .section-header h2{font-size:clamp(1.6rem,4vw,2.5rem);font-weight:800;margin-bottom:12px;letter-spacing:-0.02em}
.t3-section .section-header h2 .accent{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.t3-section .section-header p{color:var(--text-muted);font-size:0.95rem;max-width:500px;margin:0 auto}

.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.product-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition);position:relative;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.product-card:hover{border-color:rgba(var(--accent-rgb),0.2);transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,0.4),0 0 30px var(--accent-glow-soft)}
.product-card .img-wrap{position:relative;overflow:hidden;aspect-ratio:16/10;background:linear-gradient(135deg,rgba(var(--accent-rgb),0.05),rgba(var(--accent2-rgb),0.03));display:flex;align-items:center;justify-content:center}
.product-card .img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease}
.product-card:hover .img-wrap img{transform:scale(1.05)}
.img-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:2.5rem}
.stock-badge{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:var(--radius-pill);font-size:0.65rem;font-weight:700;z-index:2}
html[dir="rtl"] .stock-badge{right:auto;left:10px}
.stock-badge.in{background:rgba(34,197,94,0.15);color:#4ade80;border:1px solid rgba(34,197,94,0.2)}
.stock-badge.out{background:rgba(239,68,68,0.1);color:#f87171;border:1px solid rgba(239,68,68,0.15)}
.product-card .body{padding:16px 18px 20px}
.product-card .cat{font-size:0.65rem;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px}
.product-card .name{font-size:0.95rem;font-weight:700;color:var(--text);display:block;margin-bottom:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card .desc{font-size:0.78rem;color:var(--text-muted);line-height:1.5;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card .footer{display:flex;align-items:center;justify-content:space-between;gap:10px}
.product-card .price{font-size:1.15rem;font-weight:800;color:var(--accent-light)}
.product-card .price small{font-size:0.65rem;color:var(--text-dim);font-weight:500}
.product-card .add-btn{padding:8px 18px;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--accent),#7c3aed);color:#fff;font-size:0.75rem;font-weight:600;transition:all var(--transition)}
.product-card .add-btn:hover{transform:scale(1.05);box-shadow:0 4px 15px var(--accent-glow)}
.product-card .add-btn:disabled{opacity:0.3;cursor:not-allowed;transform:none;box-shadow:none}
@media(max-width:640px){.products-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}}

.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.feature-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:32px 28px;text-align:center;transition:all var(--transition);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.feature-card:hover{border-color:rgba(var(--accent-rgb),0.15);transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.feature-card .f-icon{width:56px;height:56px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;background:rgba(var(--accent-rgb),0.08);color:var(--accent-light);font-size:1.4rem}
.feature-card h5{font-size:1.05rem;font-weight:700;margin-bottom:10px}
.feature-card p{color:var(--text-muted);font-size:0.85rem;line-height:1.7}

.payment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.payment-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:24px 16px;text-align:center;transition:all var(--transition);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.payment-card:hover{border-color:rgba(var(--accent-rgb),0.15);transform:translateY(-3px)}
.payment-card i,.payment-card img{margin:0 auto 10px}
.payment-card div{font-size:0.85rem;font-weight:600}

.t3-footer{position:relative;z-index:1;padding:48px 24px 32px;border-top:1px solid var(--glass-border);background:linear-gradient(180deg,transparent,rgba(var(--accent-rgb),0.01))}
.t3-footer .footer-links{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.t3-footer .footer-links a{color:var(--text-muted);font-size:0.82rem;transition:color var(--transition);display:flex;align-items:center;gap:6px}
.t3-footer .footer-links a:hover{color:var(--accent-light)}
.t3-footer .footer-copy{text-align:center;color:var(--text-dim);font-size:0.75rem}

.search-bar{display:flex;gap:8px;max-width:720px;width:100%;margin:0 auto 32px;padding:6px;border-radius:18px;background:linear-gradient(135deg,rgba(var(--accent-rgb),0.08),rgba(var(--accent-rgb),0.02));border:1px solid var(--glass-border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 0 40px rgba(var(--accent-rgb),0.05),inset 0 1px 0 rgba(255,255,255,0.04)}
.search-bar:focus-within{border-color:rgba(var(--accent-rgb),0.3);box-shadow:0 0 50px rgba(var(--accent-rgb),0.1),inset 0 1px 0 rgba(255,255,255,0.06)}
.search-bar .search-icon-wrap{display:flex;align-items:center;justify-content:center;width:44px;flex-shrink:0;color:var(--accent-light);font-size:0.95rem}
.search-bar input[type="text"]{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:0.9rem;font-weight:500;padding:10px 4px;min-width:0}
.search-bar input[type="text"]::placeholder{color:var(--text-dim);font-weight:400}
.search-bar .search-divider{width:1px;background:var(--glass-border);flex-shrink:0;margin:8px 0;align-self:stretch}

.sort-dropdown{position:relative;flex-shrink:0;min-width:170px}
.sort-dropdown .sort-trigger{display:flex;align-items:center;gap:8px;padding:10px 16px;width:100%;background:rgba(var(--accent-rgb),0.06);border:1px solid var(--glass-border);border-radius:14px;color:var(--text-muted);font-size:0.82rem;font-weight:500;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;height:44px}
.sort-dropdown .sort-trigger:hover{background:rgba(var(--accent-rgb),0.1);color:var(--text);border-color:rgba(var(--accent-rgb),0.15)}
.sort-dropdown .sort-trigger .sort-arrow{font-size:0.7rem;color:var(--accent-light);transition:transform 0.2s;margin-left:auto}
.sort-dropdown.open .sort-trigger .sort-arrow{transform:rotate(180deg)}
.sort-dropdown .sort-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:rgba(10,5,30,0.96);border:1px solid var(--glass-border);border-radius:14px;padding:6px;list-style:none;margin:0;z-index:9999;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 20px 60px rgba(0,0,0,0.6),0 0 30px rgba(var(--accent-rgb),0.06);display:none}
.sort-dropdown.open .sort-menu{display:block;animation:fadeInDown 0.2s ease}
.sort-dropdown .sort-menu li{padding:10px 14px;border-radius:10px;cursor:pointer;font-size:0.82rem;color:var(--text-muted);transition:all 0.2s ease;display:flex;align-items:center;gap:8px}
.sort-dropdown .sort-menu li:hover{background:rgba(var(--accent-rgb),0.08);color:var(--text)}
.sort-dropdown .sort-menu li.active{color:var(--accent-light);background:rgba(var(--accent-rgb),0.06)}
.sort-dropdown .sort-menu li .si{width:16px;text-align:center;font-size:0.75rem}

.cat-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cat-pill{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:var(--radius-pill);background:var(--glass);border:1px solid var(--glass-border);color:var(--text-muted);font-size:0.82rem;font-weight:500;transition:all var(--transition)}
.cat-pill:hover{border-color:rgba(var(--accent-rgb),0.2);color:var(--accent-light);background:rgba(var(--accent-rgb),0.05);transform:translateY(-2px);box-shadow:0 4px 15px var(--accent-glow-soft)}
.cat-pill .pill-count{background:rgba(var(--accent-rgb),0.1);color:var(--accent-light);font-size:0.65rem;font-weight:700;padding:2px 7px;border-radius:var(--radius-pill)}

.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:0.8rem;font-weight:600;color:var(--text-muted);margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border-radius:var(--radius-sm);background:rgba(255,255,255,0.03);border:1px solid var(--glass-border);color:var(--text);font-size:0.9rem;transition:all var(--transition);outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:rgba(var(--accent-rgb),0.3);box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.08);background:rgba(255,255,255,0.04)}
.form-group input::placeholder{color:var(--text-dim)}
.error-msg{color:#f87171;font-size:0.8rem;display:none;margin-top:8px}
.error-msg.show{display:block}
.save-msg{font-size:0.8rem;margin-top:10px;display:none}
.save-msg.show{display:block}
.save-msg.success{color:#4ade80}
.save-msg.error{color:#f87171}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--text-dim);font-size:0.8rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--glass-border)}

.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:calc(var(--nav-height) + 60px) 24px 60px;position:relative;z-index:1}
.auth-box{width:100%;max-width:440px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:40px 36px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 60px rgba(0,0,0,0.4),0 0 40px rgba(var(--accent-rgb),0.04);animation:modalSlideIn 0.5s ease-out}
.auth-icon{width:64px;height:64px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;background:rgba(var(--accent-rgb),0.08);color:var(--accent-light);font-size:1.6rem}
.auth-box h1{font-size:1.6rem;font-weight:800;text-align:center;margin-bottom:8px}
.auth-box .auth-sub{color:var(--text-muted);text-align:center;font-size:0.88rem;margin-bottom:28px}
.auth-alt{text-align:center;color:var(--text-muted);font-size:0.82rem}
.auth-alt a{color:var(--accent-light);font-weight:600}

.login-required-overlay{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.9);backdrop-filter:blur(10px);align-items:center;justify-content:center;padding:24px}
.login-required-overlay.show{display:flex}
.login-required-overlay ~ .checkout-page{display:none}

.checkout-page{position:relative;z-index:1;padding:calc(var(--nav-height) + 40px) 24px 60px;max-width:1000px;margin:0 auto}
.checkout-page h1{font-size:1.6rem;font-weight:800;margin-bottom:32px}
.checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.checkout-box{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:24px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.checkout-box h3{font-size:0.95rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.checkout-box h3 i{color:var(--accent)}
.checkout-box .row{display:flex;justify-content:space-between;padding:6px 0;font-size:0.85rem;color:var(--text-muted)}
.checkout-box .row.total{border-top:1px solid var(--glass-border);margin-top:8px;padding-top:12px;font-weight:700;font-size:1rem}
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.pay-method{display:flex;align-items:center;gap:10px;padding:14px;background:rgba(0,0,0,0.15);border:1px solid var(--glass-border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition)}
.pay-method:hover{border-color:rgba(var(--accent-rgb),0.15);background:rgba(var(--accent-rgb),0.03)}
.pay-method.selected{border-color:var(--accent);background:rgba(var(--accent-rgb),0.06);box-shadow:0 0 15px var(--accent-glow-soft)}
.pay-method .info .n{font-size:0.85rem;font-weight:600;color:var(--text)}
.pay-method .info .d{font-size:0.7rem;color:var(--text-dim)}
.wallet-box{margin-top:16px;padding:16px;background:rgba(var(--accent-rgb),0.04);border:1px solid rgba(var(--accent-rgb),0.12);border-radius:var(--radius-sm);font-size:0.85rem;color:var(--text-muted)}
.wallet-box strong{color:var(--text)}
.upload-area{border:2px dashed var(--glass-border);border-radius:var(--radius);padding:32px 20px;text-align:center;cursor:pointer;transition:all var(--transition);position:relative}
.upload-area:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),0.03)}
.upload-area i{font-size:2rem;color:var(--text-dim);margin-bottom:8px;display:block}
.upload-area p{color:var(--text-muted);font-size:0.85rem}
.upload-area input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload-preview{display:none;margin-top:12px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--glass-border)}
.upload-preview.show{display:block}
.upload-preview img{max-width:100%;max-height:200px;object-fit:contain;display:block;margin:auto;background:#000}
@media(max-width:768px){.checkout-grid{grid-template-columns:1fr}.pay-methods{grid-template-columns:1fr}}

.t3-toast{position:fixed;bottom:24px;right:24px;z-index:9999;padding:14px 24px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(15,10,40,0.95),rgba(10,5,25,0.98));border:1px solid var(--glass-border);color:var(--text);font-size:0.85rem;font-weight:500;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 8px 30px rgba(0,0,0,0.4),0 0 20px rgba(var(--accent-rgb),0.1);animation:toastSlideIn 0.4s ease;display:flex;align-items:center;gap:8px}
.t3-toast.error{border-color:rgba(239,68,68,0.2)}
@media(max-width:480px){.t3-toast{left:16px;right:16px;bottom:16px}}

.account-page{position:relative;z-index:1;padding:calc(var(--nav-height) + 40px) 24px 60px;max-width:900px;margin:0 auto}
.account-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px}
.account-header h1{font-size:1.5rem;font-weight:800}
.account-tabs{display:flex;gap:4px;margin-bottom:24px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:4px;overflow-x:auto}
.account-tab{padding:10px 20px;border-radius:var(--radius-sm);font-size:0.82rem;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all var(--transition);white-space:nowrap;background:transparent;border:none}
.account-tab:hover{color:var(--text);background:rgba(255,255,255,0.03)}
.account-tab.active{background:rgba(var(--accent-rgb),0.08);color:var(--accent-light)}
.account-section{display:none}
.account-section.active{display:block;animation:fadeIn 0.3s ease}
.account-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:28px;margin-bottom:20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.account-card h3{font-size:1rem;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.account-card.danger-zone{border-color:rgba(239,68,68,0.15)}
.orders-empty{text-align:center;padding:60px 20px}
.orders-empty i{font-size:3rem;color:var(--text-dim);margin-bottom:16px}
.order-item{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;transition:all var(--transition)}
.order-item-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;cursor:pointer}
.oid{font-family:monospace;font-size:0.85rem;font-weight:700;color:var(--accent-light)}
.odate{font-size:0.72rem;color:var(--text-dim);margin-top:2px}
.status-badge{display:inline-block;padding:3px 10px;border-radius:var(--radius-pill);font-size:0.65rem;font-weight:700}
.order-item-body{display:none;padding:0 20px 20px}
.order-item.open .order-item-body{display:block}
.oi-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.02)}
.oi-name{flex:1;font-size:0.85rem;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oi-price{font-size:0.85rem;font-weight:700;color:var(--accent-light);flex-shrink:0}

.confirm-page{position:relative;z-index:1;padding:calc(var(--nav-height) + 60px) 24px 60px;max-width:700px;margin:0 auto}
.confirm-success{text-align:center;margin-bottom:40px}
.confirm-success .success-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.2);font-size:1.8rem;color:#4ade80}
.confirm-box{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:28px;backdrop-filter:blur(10px);margin-bottom:20px}
.confirm-box h3{font-size:1rem;font-weight:700;margin-bottom:16px}
.confirm-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.confirm-row .ck-icon{width:40px;height:40px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:rgba(var(--accent-rgb),0.05);display:flex;align-items:center;justify-content:center}
.confirm-row .ck-icon img{width:100%;height:100%;object-fit:cover}
.confirm-row .ck-info{flex:1;min-width:0}
.confirm-row .ck-name{font-size:0.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.confirm-row .ck-price{font-size:0.9rem;font-weight:700;color:var(--accent-light);flex-shrink:0}
.confirm-total{display:flex;align-items:center;justify-content:space-between;padding-top:16px;margin-top:8px;border-top:1px solid var(--glass-border)}
.confirm-total .label{font-size:1rem;font-weight:600;color:var(--text-muted)}
.confirm-total .value{font-size:1.4rem;font-weight:800;color:(--accent-light)}
.confirm-notice{background:rgba(var(--accent-rgb),0.03);border:1px solid rgba(var(--accent-rgb),0.08);border-radius:var(--radius);padding:20px;margin-bottom:24px;font-size:0.85rem;color:var(--text-muted);line-height:1.7}
.confirm-notice a{color:var(--accent-light);font-weight:600}
.invoice-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--glass-border)}
.invoice-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:0.95rem}
.invoice-logo img{height:24px;border-radius:4px}
.invoice-id{text-align:right;font-size:0.8rem}
.meta-row{display:flex;justify-content:space-between;padding:6px 0;font-size:0.82rem}
.meta-row .ml{color:var(--text-dim)}
.meta-row .mv{color:var(--text);font-weight:500}
.done-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.product-page{position:relative;z-index:1;padding:calc(var(--nav-height) + 40px) 24px 60px;max-width:1100px;margin:0 auto}
.product-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.product-gallery{border-radius:var(--radius-lg);overflow:hidden;background:var(--glass);border:1px solid var(--glass-border);position:relative;display:flex;align-items:center;justify-content:center;min-height:300px}
.product-gallery img{width:100%;max-height:400px;object-fit:contain;background:#000}
.product-info h1{font-size:clamp(1.4rem,3vw,1.8rem);font-weight:800;margin-bottom:12px;line-height:1.2}
.product-info .product-price{font-size:1.6rem;font-weight:800;color:var(--accent-light);margin-bottom:16px}
.product-info .product-desc{color:var(--text-muted);font-size:0.9rem;line-height:1.8;margin-bottom:24px}
.product-meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.product-meta span{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-pill);background:var(--glass);border:1px solid var(--glass-border);font-size:0.78rem;color:var(--text-muted)}
.product-actions{display:flex;gap:12px;flex-wrap:wrap}
.qty-selector{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.qty-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:0.8rem;transition:all var(--transition)}
.qty-btn:hover{background:rgba(var(--accent-rgb),0.1);color:var(--accent-light)}
@media(max-width:768px){.product-layout{grid-template-columns:1fr;gap:24px}}

.cart-page{position:relative;z-index:1;padding:calc(var(--nav-height) + 40px) 24px 60px;max-width:900px;margin:0 auto}
.cart-page h1{font-size:1.8rem;font-weight:800;margin-bottom:32px;display:flex;align-items:center;gap:12px}
.cart-item{display:flex;align-items:center;gap:16px;padding:16px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);margin-bottom:12px;transition:all var(--transition)}
.cart-item:hover{border-color:rgba(var(--accent-rgb),0.12)}
.cart-item .img-wrap{width:64px;height:64px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:rgba(var(--accent-rgb),0.05)}
.cart-item .img-wrap img{width:100%;height:100%;object-fit:cover}
.cart-item .info{flex:1;min-width:0}
.cart-item .name{font-size:0.9rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item .price{font-size:0.8rem;color:var(--accent-light);font-weight:600}
.cart-item .qty-controls{display:flex;align-items:center;gap:8px}
.cart-item .qty-val{font-size:0.85rem;font-weight:700;min-width:20px;text-align:center}
.cart-item .remove-btn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:0.8rem;transition:all var(--transition);flex-shrink:0}
.cart-item .remove-btn:hover{background:rgba(239,68,68,0.1);color:#f87171}
.cart-total{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;margin-top:24px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-lg)}
.cart-total .label{font-size:1rem;font-weight:600;color:var(--text-muted)}
.cart-total .value{font-size:1.6rem;font-weight:800;color:var(--accent-light)}
.cart-empty{text-align:center;padding:60px 20px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-lg)}
.cart-empty i{font-size:3rem;color:var(--text-dim);margin-bottom:16px}

.text-gradient{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hidden{display:none}
.always-pill .navbar-bg{border-radius:var(--radius-lg)!important}
.always-pill .nav-links-wrapper{border-radius:var(--radius-pill)!important}
#checkoutContent{display:none}
#checkoutContent.show{display:block}

/* Nav login button mobile */
@media(max-width:768px){
  #accountNavSlot .btn-sm{padding:4px 10px;font-size:0.7rem}
  #accountNavSlot .btn-sm i{margin-right:2px}
  .nav-login-label{display:none}
}
@media(min-width:769px){
  .nav-login-label{display:inline}
}

html[dir="rtl"] .cart-count{left:0;right:auto}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}