@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100vh;min-width:320px;margin:0;padding:0}#root{width:100%;min-height:100vh}.product-card{position:relative;background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;padding:24px;transition:all .3s ease;overflow:hidden}.wishlisted{position:absolute;top:20px;right:20px;z-index:10;background:var(--wishlist-bg);border:1px solid var(--border);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;transition:all .25s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.wishlisted:hover{background:var(--wishlist-hover-bg);transform:scale(1.15)}.wishlisted.active{background:#ef444426;border-color:#ef44444d;box-shadow:0 0 16px #ef444433}.product-card:before{content:"";position:absolute;inset:0;border-radius:20px;background:radial-gradient(ellipse at 50% 0%,var(--card-glow) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none}.product-card:hover{transform:translateY(-8px);border-color:var(--card-hover-border);box-shadow:var(--card-hover-shadow)}.product-card:hover:before{opacity:1}.discount-badge{position:absolute;top:20px;left:20px;background:linear-gradient(135deg,#0071e3,#00a3ff);color:#fff;padding:8px 14px;border-radius:8px;font-size:.7rem;font-weight:700;letter-spacing:.02em;z-index:2;box-shadow:0 4px 12px #0071e34d}.image-container{background:var(--card-image-bg);border-radius:16px;padding:32px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;min-height:200px;position:relative;overflow:hidden}.image-container:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--card-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--card-grid-line) 1px,transparent 1px);background-size:20px 20px;opacity:0;transition:opacity .3s ease}.product-card:hover .image-container:before{opacity:1}.product-image{width:100%;height:190px;object-fit:contain;transition:transform .4s ease;position:relative;z-index:100}.product-card:hover .product-image{transform:scale(1.1)}.card-content{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}.product-name{font-size:1rem;font-weight:600;line-height:1.45;color:var(--product-name-color);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:46px;transition:color .3s ease}.product-card:hover .product-name{color:var(--product-name-hover)}.rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.stars{color:#fbbf24;font-size:.8rem;letter-spacing:2px}.rating-value{font-size:.85rem;color:var(--rating-color);font-weight:500}.bestseller-tag{background:#22c55e1f;color:#22c55e;padding:5px 10px;border-radius:6px;font-size:.65rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}.price-row{display:flex;align-items:baseline;gap:10px;margin-top:6px}.price{font-size:1.5rem;font-weight:700;color:var(--price-color);letter-spacing:-.02em}.original-price{font-size:.9rem;color:var(--original-price-color);text-decoration:line-through}.add-btn{width:100%;background:linear-gradient(135deg,#0071e3,#0077ed);color:#fff;border:none;padding:14px 20px;border-radius:12px;font-size:.9rem;font-weight:600;cursor:pointer;margin-top:8px;transition:all .25s ease;position:relative;overflow:hidden}.add-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .4s ease}.add-btn:hover{background:linear-gradient(135deg,#0077ed,#008bff);transform:translateY(-2px);box-shadow:0 8px 24px #0071e359}.add-btn:hover:before{left:100%}.add-btn:active{transform:translateY(0)}@media(max-width:768px){.product-card{padding:20px}.image-container{padding:24px;min-height:180px}.product-image{height:130px}.price{font-size:1.35rem}}@media(max-width:480px){.discount-badge{top:16px;left:16px;padding:6px 12px;font-size:.65rem}}:root{--bg-primary: #000000;--bg-secondary: #0a0a0a;--bg-card: #111111;--bg-elevated: #161616;--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .7);--text-muted: rgba(255, 255, 255, .5);--accent: #0071e3;--accent-hover: #0077ed;--accent-glow: rgba(0, 113, 227, .4);--border: rgba(255, 255, 255, .1);--border-hover: rgba(255, 255, 255, .2);--shadow-sm: 0 4px 12px rgba(0, 0, 0, .3);--shadow-md: 0 8px 24px rgba(0, 0, 0, .4);--shadow-lg: 0 16px 48px rgba(0, 0, 0, .5);--shadow-glow: 0 0 60px var(--accent-glow);--max-width: 1200px;--nav-height: 64px;--transition-fast: .15s ease;--transition: .25s ease;--transition-slow: .4s ease;--card-bg: #111111;--card-border: rgba(255, 255, 255, .08);--card-hover-border: rgba(255, 255, 255, .15);--card-hover-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 0 40px rgba(0, 113, 227, .1);--card-glow: rgba(0, 113, 227, .1);--card-image-bg: linear-gradient(180deg, #1a1a1a 0%, #111111 100%);--card-grid-line: rgba(255, 255, 255, .02);--wishlist-bg: rgba(0, 0, 0, .5);--wishlist-hover-bg: rgba(255, 255, 255, .1);--product-name-color: rgba(255, 255, 255, .95);--product-name-hover: #ffffff;--rating-color: rgba(255, 255, 255, .6);--price-color: #ffffff;--original-price-color: rgba(255, 255, 255, .4);--nav-bg: rgba(0, 0, 0, .85);--dropdown-bg: rgba(17, 17, 17, .97);--dropdown-item-hover: rgba(255, 255, 255, .03);--dropdown-img-bg: rgba(255, 255, 255, .04);--scrollbar-thumb: rgba(255, 255, 255, .15);--scrollbar-thumb-hover: rgba(255, 255, 255, .25);--btn-glass: rgba(255, 255, 255, .06);--btn-glass-hover: rgba(255, 255, 255, .1);--input-bg: rgba(255, 255, 255, .06);--toolbar-bg: rgba(255, 255, 255, .03)}[data-theme=light]{--bg-primary: #f5f5f7;--bg-secondary: #ffffff;--bg-card: #ffffff;--bg-elevated: #f0f0f2;--text-primary: #1d1d1f;--text-secondary: rgba(0, 0, 0, .6);--text-muted: rgba(0, 0, 0, .4);--accent: #0071e3;--accent-hover: #005bb5;--accent-glow: rgba(0, 113, 227, .2);--border: rgba(0, 0, 0, .1);--border-hover: rgba(0, 0, 0, .18);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--shadow-md: 0 4px 16px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--shadow-glow: 0 0 40px rgba(0, 113, 227, .15);--card-bg: #ffffff;--card-border: rgba(0, 0, 0, .08);--card-hover-border: rgba(0, 113, 227, .25);--card-hover-shadow: 0 12px 40px rgba(0, 0, 0, .1), 0 0 30px rgba(0, 113, 227, .06);--card-glow: rgba(0, 113, 227, .06);--card-image-bg: linear-gradient(180deg, #f8f8fa 0%, #f0f0f2 100%);--card-grid-line: rgba(0, 0, 0, .03);--wishlist-bg: rgba(255, 255, 255, .8);--wishlist-hover-bg: rgba(0, 0, 0, .06);--product-name-color: #1d1d1f;--product-name-hover: #000000;--rating-color: rgba(0, 0, 0, .5);--price-color: #1d1d1f;--original-price-color: rgba(0, 0, 0, .35);--nav-bg: rgba(255, 255, 255, .85);--dropdown-bg: rgba(255, 255, 255, .97);--dropdown-item-hover: rgba(0, 0, 0, .03);--dropdown-img-bg: rgba(0, 0, 0, .04);--scrollbar-thumb: rgba(0, 0, 0, .15);--scrollbar-thumb-hover: rgba(0, 0, 0, .25);--btn-glass: rgba(0, 0, 0, .06);--btn-glass-hover: rgba(0, 0, 0, .1);--input-bg: rgba(0, 0, 0, .06);--toolbar-bg: rgba(0, 0, 0, .03)}.theme-toggle{position:relative;width:64px;height:36px;background:#ffffff1a;border:1px solid var(--border);border-radius:20px;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:space-between;padding:0 8px;overflow:hidden;flex-shrink:0}[data-theme=light] .theme-toggle{background:#0000000d;border-color:#0000001a}.theme-toggle:hover{border-color:var(--accent)}.theme-toggle-thumb{position:absolute;top:3px;left:3px;width:28px;height:28px;background:#fff;border-radius:50%;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;font-size:1rem;box-shadow:0 2px 4px #0003;z-index:2}[data-theme=light] .theme-toggle-thumb{background:#fff;box-shadow:0 2px 4px #0000001a}[data-theme=light] .theme-toggle-thumb{transform:translate(28px)}.theme-icon-bg{font-size:.85rem;opacity:.5;z-index:1}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;overflow-x:hidden;transition:background .3s ease,color .3s ease}.app{width:100%;min-height:100vh;display:flex;flex-direction:column}.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--nav-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}.nav-container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 32px;height:var(--nav-height);display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:10px;font-size:1.3rem;font-weight:700;color:var(--text-primary);text-decoration:none;transition:opacity var(--transition)}.logo:hover{opacity:.8}.logo-icon{color:var(--accent);font-size:1.5rem}.nav-links{display:flex;list-style:none;gap:40px}.nav-link{color:var(--text-secondary);text-decoration:none;font-size:.9rem;font-weight:500;transition:color var(--transition);position:relative}.nav-link:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent);transition:width var(--transition)}.nav-link:hover{color:var(--text-primary)}.nav-link:hover:after{width:100%}.nav-actions{display:flex;align-items:center;gap:12px}.nav-btn{padding:10px 20px;border-radius:10px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition);border:none;background:transparent;color:var(--text-secondary)}.nav-btn:hover{color:var(--text-primary);background:var(--btn-glass)}.nav-btn.primary{background:var(--accent);color:#fff}.nav-btn.primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-glow)}.hero{min-height:100vh;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:calc(var(--nav-height) + 60px) 32px 80px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:150%;height:100%;background:radial-gradient(ellipse at 50% 0%,rgba(0,113,227,.15) 0%,transparent 60%);pointer-events:none;animation:heroGlow 8s ease-in-out infinite alternate}@keyframes heroGlow{0%{opacity:.5}to{opacity:1}}.hero-content{position:relative;z-index:1;max-width:800px;margin:0 auto 80px}.hero-tag{display:inline-block;padding:10px 20px;background:#0071e31a;border:1px solid rgba(0,113,227,.3);border-radius:50px;color:var(--accent);font-size:.85rem;font-weight:600;margin-bottom:32px;animation:fadeInUp .6s ease forwards}.hero-title{font-size:clamp(2.75rem,7vw,5rem);font-weight:800;line-height:1.05;letter-spacing:-.04em;margin-bottom:28px;animation:fadeInUp .6s ease .1s forwards;opacity:0}.hero-highlight{background:linear-gradient(135deg,#0071e3,#00d4ff,#0071e3);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease infinite}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.hero-description{font-size:1.2rem;color:var(--text-secondary);max-width:560px;margin:0 auto 44px;line-height:1.7;animation:fadeInUp .6s ease .2s forwards;opacity:0}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;animation:fadeInUp .6s ease .3s forwards;opacity:0}.btn-primary{padding:18px 36px;background:var(--accent);color:#fff;border:none;border-radius:14px;font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition);position:relative;overflow:hidden}.btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-3px);box-shadow:var(--shadow-glow)}.btn-primary:hover:before{left:100%}.btn-secondary{padding:18px 36px;background:transparent;color:var(--text-primary);border:1px solid var(--border);border-radius:14px;font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition)}.btn-secondary:hover{background:#ffffff0d;border-color:var(--border-hover);transform:translateY(-3px)}.hero-stats{position:relative;z-index:1;display:flex;gap:80px;justify-content:center;padding-top:48px;border-top:1px solid var(--border);animation:fadeInUp .6s ease .4s forwards;opacity:0}.stat{text-align:center}.stat-number{display:block;font-size:2.5rem;font-weight:800;color:var(--text-primary);margin-bottom:6px;letter-spacing:-.02em}.stat-label{font-size:.9rem;color:var(--text-muted);font-weight:500}.products-section{width:100%;padding:100px 32px 140px;background:var(--bg-secondary)}.products-section>*{max-width:var(--max-width);margin-left:auto;margin-right:auto}.section-header{text-align:center;margin-bottom:56px}.section-title{font-size:2.5rem;font-weight:700;margin-bottom:16px;letter-spacing:-.03em}.section-subtitle{color:var(--text-secondary);font-size:1.1rem}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:var(--max-width)}.cart-btn{position:relative;background:var(--btn-glass);border:1px solid var(--border);color:var(--text-primary);font-size:1.35rem;cursor:pointer;padding:8px 14px;border-radius:12px;transition:all var(--transition);display:flex;align-items:center;justify-content:center}.cart-btn:hover{background:var(--bg-card);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px #0071e326;color:var(--accent)}.cart-badge{position:absolute;top:-6px;right:-6px;background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;font-size:.65rem;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 8px #ef444466;animation:badgePop .3s ease}@keyframes badgePop{0%{transform:scale(0)}60%{transform:scale(1.3)}to{transform:scale(1)}}.wishlist-badge{background:linear-gradient(135deg,#ec4899,#f43f5e);box-shadow:0 2px 8px #ec489966}.dropdown-panel{position:absolute;top:calc(var(--nav-height) - 4px);right:32px;width:380px;max-height:480px;background:var(--dropdown-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px #0009,0 0 40px #0000004d;z-index:1001;display:flex;flex-direction:column;animation:dropdownSlide .25s ease}@keyframes dropdownSlide{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}.dropdown-header h3{font-size:1rem;font-weight:600;color:var(--text-primary)}.dropdown-close{background:var(--btn-glass);border:1px solid var(--border);color:var(--text-secondary);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}.dropdown-close:hover{background:var(--btn-glass-hover);color:var(--text-primary)}.dropdown-empty{text-align:center;padding:40px 20px;color:var(--text-muted)}.dropdown-empty span{font-size:2.5rem;display:block;margin-bottom:12px;opacity:.4}.dropdown-empty p{font-size:.9rem}.dropdown-items{overflow-y:auto;max-height:320px;padding:8px 0}.dropdown-item{display:flex;align-items:center;gap:14px;padding:12px 20px;transition:background var(--transition-fast)}.dropdown-item:hover{background:var(--dropdown-item-hover)}.dropdown-item-img{width:52px;height:52px;object-fit:contain;background:var(--dropdown-img-bg);border-radius:10px;padding:4px;flex-shrink:0}.dropdown-item-info{flex:1;min-width:0}.dropdown-item-name{font-size:.82rem;font-weight:500;color:var(--text-primary);line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.dropdown-item-price{font-size:.8rem;color:var(--accent);font-weight:600;margin-top:2px}.quantity-controls{display:flex;align-items:center;gap:10px;margin-top:6px}.quantity-controls button{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:var(--btn-glass);color:var(--text-primary);cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.quantity-controls button:hover{background:var(--accent);border-color:var(--accent)}.quantity-controls span{font-size:.85rem;font-weight:600;color:var(--text-primary);min-width:18px;text-align:center}.dropdown-item-remove{background:none;border:none;cursor:pointer;font-size:1rem;padding:4px;opacity:.5;transition:all var(--transition-fast);flex-shrink:0}.dropdown-item-remove:hover{opacity:1;transform:scale(1.15)}.dropdown-item-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.dropdown-add-cart{background:var(--accent);color:#fff;border:none;padding:6px 12px;border-radius:8px;font-size:.72rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.dropdown-add-cart:hover{background:var(--accent-hover);box-shadow:0 4px 12px #0071e34d}.dropdown-footer{border-top:1px solid var(--border);padding:16px 20px}.dropdown-total{display:flex;align-items:center;justify-content:space-between;font-size:.95rem;color:var(--text-secondary)}.total-price{font-size:1.15rem;font-weight:700;color:var(--text-primary)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:40px;padding:20px 24px;background:var(--toolbar-bg);border:1px solid var(--border);border-radius:16px;flex-wrap:wrap}.toolbar-left{flex:1;min-width:220px}.toolbar-right{display:flex;gap:12px;flex-wrap:wrap}.search-wrapper{position:relative;width:100%}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:.9rem;pointer-events:none}.search-input{width:100%;padding:12px 16px 12px 42px;background:var(--input-bg);border:1px solid var(--border);border-radius:12px;color:var(--text-primary);font-size:.9rem;font-family:inherit;outline:none;transition:all var(--transition)}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{border-color:var(--accent);background:#0071e30f;box-shadow:0 0 0 3px #0071e31a}.filter-select{padding:12px 36px 12px 16px;background:var(--input-bg);border:1px solid var(--border);border-radius:12px;color:var(--text-primary);font-size:.85rem;font-family:inherit;cursor:pointer;outline:none;transition:all var(--transition);min-width:160px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.5)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}.filter-select:hover{border-color:var(--border-hover);background-color:var(--btn-glass-hover)}.filter-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #0071e31a}.filter-select option{background:var(--bg-card);color:var(--text-primary)}.no-results{text-align:center;padding:80px 20px;color:var(--text-secondary)}.no-results-icon{font-size:3rem;display:block;margin-bottom:16px}.no-results h3{font-size:1.4rem;color:var(--text-primary);margin-bottom:8px}.no-results p{font-size:1rem;color:var(--text-muted)}.footer{width:100%;padding:40px 32px;text-align:center;border-top:1px solid var(--border);background:var(--bg-primary);color:var(--text-muted);font-size:.9rem}@media(max-width:1024px){.product-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.nav-container{padding:0 20px}.nav-links{display:none}.hero{padding:calc(var(--nav-height) + 40px) 20px 60px}.hero-content{margin-bottom:60px}.hero-description{font-size:1.05rem}.hero-stats{flex-direction:column;gap:40px}.hero-cta{flex-direction:column;width:100%}.btn-primary,.btn-secondary{width:100%}.products-section{padding:80px 20px 100px}.section-title{font-size:2rem}.toolbar{flex-direction:column;padding:16px}.toolbar-left,.toolbar-right{width:100%}.filter-select{flex:1;min-width:0}}@media(max-width:640px){.product-grid{grid-template-columns:1fr}.stat-number{font-size:2rem}.toolbar-right{flex-direction:column}.filter-select{width:100%}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}::selection{background:#0071e34d;color:#fff}