.announcement-bar{background:var(--color-primary);color:#fff}.announcement-inner{align-items:center;gap:12px;padding:8px 20px;display:flex;overflow:hidden}.announcement-text{text-align:center;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:.78rem;font-weight:500;transition:opacity .3s;overflow:hidden}.announcement-fade-in{opacity:1}.announcement-fade-out{opacity:0}.announcement-close{color:#fff9;cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;display:flex}.announcement-close:hover{color:#fff;background:#ffffff1a}
.search-wrap{width:100%;position:relative}.search-bar{align-items:center;width:100%;display:flex;position:relative}.search-bar-icon{color:var(--color-text-light);pointer-events:none;position:absolute;left:12px}.search-bar-input{border:1.5px solid var(--color-border);background:var(--color-bg-secondary);width:100%;color:var(--color-text);border-radius:8px;outline:none;padding:9px 36px;font-size:.85rem;transition:border-color .15s,background .15s}.search-bar-input::placeholder{color:var(--color-text-light)}.search-bar-input:focus{border-color:var(--color-accent);background:var(--color-bg)}.search-bar-clear{width:24px;height:24px;color:var(--color-text-light);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;display:flex;position:absolute;right:8px}.search-bar-clear:hover{color:var(--color-text);background:var(--color-bg-tertiary)}.search-dropdown{background:var(--color-bg);border:1px solid var(--color-border);z-index:300;border-radius:10px;animation:.12s ease-out searchDropIn;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow:hidden;box-shadow:0 8px 30px #0000001f}@keyframes searchDropIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.search-dropdown-item{text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:8px 12px;font-family:inherit;transition:background .1s;display:flex}.search-dropdown-item:hover,.search-dropdown-item.selected{background:var(--color-bg-secondary)}.search-dropdown-thumb{background:var(--color-bg-secondary);width:40px;height:40px;color:var(--color-text-light);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;font-size:.75rem;font-weight:700;display:flex;overflow:hidden}.search-dropdown-thumb img{object-fit:contain;width:100%;height:100%}.search-dropdown-info{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.search-dropdown-title{color:var(--color-text);white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;font-weight:500;overflow:hidden}.search-dropdown-meta{color:var(--color-text-light);font-size:.72rem}.search-dropdown-price{color:var(--color-text);flex-shrink:0;font-size:.82rem;font-weight:600}.search-dropdown-viewall{color:var(--color-accent-dark);text-align:center;border-top:1px solid var(--color-border-light);padding:10px 12px;font-size:.8rem;font-weight:500;transition:background .1s;display:block}.search-dropdown-viewall:hover,.search-dropdown-viewall.selected{background:var(--color-bg-secondary)}
.mobile-nav-overlay{z-index:300;background:#0006;animation:.2s fadeIn;position:fixed;inset:0}.mobile-nav{background:var(--color-bg);flex-direction:column;width:300px;max-width:85vw;height:100%;animation:.25s ease-out slideIn;display:flex;position:absolute;top:0;right:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.mobile-nav-header{border-bottom:1px solid var(--color-border-light);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.mobile-nav-logo{align-items:center;display:inline-flex}.mobile-nav-logo-img{width:auto;height:28px;display:block}.mobile-nav-close{width:36px;height:36px;color:var(--color-text);border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.mobile-nav-search{padding:16px 20px}.mobile-nav-links{flex-direction:column;padding:8px 12px;display:flex}.mobile-nav-link{color:var(--color-text-muted);border-radius:var(--radius-sm);padding:12px 16px;font-size:.95rem;font-weight:500;transition:all .15s}.mobile-nav-link:hover,.mobile-nav-link.active{color:var(--color-text);background:var(--color-bg-secondary)}.mobile-nav-bottom{flex-direction:column;gap:10px;margin-top:auto;padding:20px;display:flex}.mobile-nav-cart{background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);text-align:center;border:none;padding:14px;font-size:.95rem;font-weight:600;display:block}.mobile-nav-account{border:1.5px solid var(--color-border);border-radius:var(--radius-sm);text-align:center;color:var(--color-text);padding:12px;font-size:.88rem;font-weight:500;display:block}.mobile-nav-currency{border-bottom:1px solid var(--color-border-light);justify-content:space-between;align-items:center;margin-bottom:12px;padding:4px 0 14px;display:flex}.mobile-nav-currency-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.78rem;font-weight:600}.mobile-nav-currency-toggle{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:6px;padding:2px;display:inline-flex}.mobile-nav-currency-btn{min-width:44px;color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:6px 10px;font-family:inherit;font-size:.78rem;font-weight:700;transition:background .15s,color .15s}.mobile-nav-currency-btn.active{background:var(--color-text);color:var(--color-bg)}
.header{z-index:250;background:var(--color-bg);border-bottom:1px solid var(--color-border-light);height:var(--header-height);position:sticky;top:0}.header-inner{align-items:center;gap:20px;height:100%;display:flex}.header-logo{flex-shrink:0;align-items:center;display:flex}.header-logo-img{width:auto;height:38px;display:block}.header-nav{flex-shrink:0;align-items:center;gap:4px;display:flex}.nav-link{color:var(--color-text-muted);border-radius:var(--radius-sm);padding:6px 14px;font-size:.88rem;font-weight:500;transition:all .15s}.nav-link:hover{color:var(--color-text);background:var(--color-bg-secondary)}.nav-link.active{color:var(--color-text);font-weight:600}.nav-link-highlight{color:var(--color-accent-dark);font-weight:600}.nav-link-highlight:hover{color:var(--color-accent-dark);background:#0891b214}.nav-link-highlight.active{color:var(--color-accent-dark);background:#0891b21a}.header-search{flex:1;max-width:520px}.header-actions{flex-shrink:0;align-items:center;gap:6px;margin-left:auto;display:flex}.header-currency-btn{border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);cursor:pointer;padding:4px 10px;font-size:.75rem;font-weight:700;transition:all .15s}.header-search-btn{width:36px;height:36px;color:var(--color-text);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;display:none}.header-search-btn:hover{background:var(--color-bg-secondary)}.header-currency-btn:hover{border-color:var(--color-text);background:var(--color-bg-secondary)}.header-account-link{border:1.5px solid var(--color-border);border-radius:var(--radius-sm);align-items:center;gap:6px;padding:4px 10px 4px 4px;transition:all .15s;display:flex}.header-account-link:hover{border-color:var(--color-text);background:var(--color-bg-secondary)}.header-account-name{color:var(--color-text);font-size:.75rem;font-weight:600}.header-avatar{background:var(--color-primary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:.6rem;font-weight:700;display:flex}.header-avatar-img{object-fit:cover;border-radius:50%;width:24px;height:24px}.header-icon-btn{width:38px;height:38px;color:var(--color-text);border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;transition:background .15s;display:flex;position:relative}.header-icon-btn:hover{background:var(--color-bg-secondary)}.header-badge{background:var(--color-accent-dark);color:#fff;border-radius:10px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 4px;font-size:.65rem;font-weight:700;display:flex;position:absolute;top:1px;right:1px}.header-login-btn{color:var(--color-text);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);padding:6px 16px;font-size:.82rem;font-weight:600;transition:all .15s}.header-login-btn:hover{border-color:var(--color-text)}.header-menu-btn{width:40px;height:40px;color:var(--color-text);border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;display:none}.subnav{z-index:201;background:var(--color-bg);border-bottom:1px solid var(--color-border-light);position:relative}.mega-backdrop{z-index:199;background:0 0;position:fixed;inset:0}.subnav-inner{align-items:center;gap:2px;height:42px;display:flex}.subnav-link{color:var(--color-text-muted);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;padding:6px 16px;font-family:inherit;font-size:.85rem;font-weight:500;transition:all .15s}.subnav-link:hover{color:var(--color-text);background:var(--color-bg-secondary)}.subnav-link.active{color:var(--color-text);font-weight:600}.subnav-link-highlight{color:var(--color-accent-dark);font-weight:600}.subnav-link-highlight:hover{color:var(--color-accent-dark);background:#0891b214}.subnav-link-highlight.active{color:var(--color-accent-dark);background:#0891b21a}.subnav-mega-wrap{position:relative}.subnav-mega-trigger{align-items:center;gap:4px;display:flex}.mega-menu{top:calc(var(--header-height) + 42px);background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);z-index:200;width:100%;animation:.15s ease-out megaFadeIn;position:fixed;left:0;right:0;box-shadow:0 8px 30px #0000001f}@keyframes megaFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.mega-menu-inner{max-width:var(--max-width);margin:0 auto;padding:24px 20px}.mega-menu-header{justify-content:space-between;align-items:center;margin-bottom:16px;padding-top:6px;display:flex}.mega-menu-header h3{color:var(--color-text);font-size:.88rem;font-weight:600}.mega-menu-grid{grid-template-columns:repeat(6,1fr);gap:4px;display:grid}.mega-brand-item{border:1px solid var(--color-border-light);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);align-items:center;gap:8px;padding:8px 10px;font-size:.78rem;font-weight:500;transition:all .15s;display:flex}.mega-brand-item:hover{border-color:var(--color-accent-dark);box-shadow:var(--shadow-sm);color:var(--color-accent-dark)}.mega-brand-icon{background:var(--color-bg);width:28px;height:28px;color:var(--color-text-muted);border-radius:0;flex-shrink:0;justify-content:center;align-items:center;font-size:.7rem;font-weight:700;display:flex;overflow:hidden}@media (max-width:900px){.header-nav,.subnav,.header-search{display:none}.header-menu-btn{display:flex}.header-login-btn,.header-account-name,.header-currency-btn{display:none}.header-search-btn{display:inline-flex}.header-logo-img{height:28px}}.mobile-search-overlay{z-index:400;background:var(--color-bg);animation:.18s fadeIn;position:fixed;inset:0}.mobile-search-bar{border-bottom:1px solid var(--color-border-light);align-items:center;gap:10px;padding:12px 14px;display:flex}.mobile-search-close{width:38px;height:38px;color:var(--color-text);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.mobile-search-close:hover{background:var(--color-bg-secondary)}.mobile-search-input-wrap{flex:1;min-width:0}.mobile-search-input-wrap .search-bar{width:100%}.mobile-search-input-wrap .search-bar-input{font-size:16px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
.footer{background:var(--color-primary);color:#ffffffbf;margin-top:auto;padding:56px 0 24px}.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:40px;display:grid}.footer-brand-col{padding-right:12px}.footer-logo-link{margin-bottom:16px;display:inline-block}.footer-logo{filter:brightness(0)invert();width:auto;height:42px;display:block}.footer-desc{color:#fff9;max-width:320px;font-size:.82rem;line-height:1.7}.footer-col h4{color:#fff;text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px;font-size:.82rem;font-weight:700}.footer-col a,.footer-col span.footer-contact-item{color:#fff9;align-items:center;gap:8px;padding:5px 0;font-size:.82rem;transition:color .15s;display:flex}.footer-col a:hover{color:#fff}.footer-col svg{opacity:.5;flex-shrink:0}.footer-col a:hover svg{opacity:.9}.footer-bottom{color:#fff6;border-top:1px solid #ffffff1a;justify-content:space-between;align-items:center;gap:16px;margin-top:48px;padding-top:20px;font-size:.76rem;display:flex}.footer-bottom-links{gap:16px;display:flex}.footer-bottom-links a{color:#fff6;transition:color .15s}.footer-bottom-links a:hover{color:#fffc}@media (max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr 1fr;gap:32px}.footer-brand-col{grid-column:1/-1;padding-right:0}.footer-desc{max-width:500px}}@media (max-width:640px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer{padding:40px 0 20px}}@media (max-width:480px){.footer-grid{grid-template-columns:1fr;gap:24px}.footer-bottom{text-align:center;flex-direction:column;gap:10px}}
.cart-overlay{z-index:300;background:#0006;animation:.2s fadeIn;position:fixed;inset:0}.cart-drawer{background:var(--color-bg);flex-direction:column;width:380px;max-width:90vw;height:100%;animation:.25s ease-out slideIn;display:flex;position:absolute;top:0;right:0}.cart-drawer-header{border-bottom:1px solid var(--color-border-light);justify-content:space-between;align-items:center;padding:20px;display:flex}.cart-drawer-header h2{font-size:1rem;font-weight:600}.cart-drawer-close{width:32px;height:32px;color:var(--color-text-muted);border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.cart-drawer-close:hover{background:var(--color-bg-secondary)}.cart-empty{color:var(--color-text-light);flex:1;justify-content:center;align-items:center;font-size:.9rem;display:flex}.cart-items{flex:1;padding:12px 20px;overflow-y:auto}.cart-item{border-bottom:1px solid var(--color-border-light);align-items:flex-start;gap:12px;padding:12px 0;display:flex}.cart-item:last-child{border-bottom:none}.cart-item-img{border-radius:var(--radius-sm);background:var(--color-bg-secondary);width:56px;height:56px;color:var(--color-text-light);flex-shrink:0;justify-content:center;align-items:center;font-size:.85rem;font-weight:600;display:flex;overflow:hidden}.cart-item-info{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.cart-item-title{white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;font-weight:500;overflow:hidden}.cart-item-sku{color:var(--color-text-light);font-family:monospace;font-size:.7rem}.cart-item-price{color:var(--color-text);font-size:.82rem;font-weight:600}.cart-item-qty{align-items:center;gap:0;margin-top:4px;display:flex}.cart-item-qty button{border:1px solid var(--color-border);background:var(--color-bg);width:28px;height:28px;color:var(--color-text);justify-content:center;align-items:center;font-size:.88rem;display:flex}.cart-item-qty button:first-child{border-radius:4px 0 0 4px}.cart-item-qty button:last-child{border-radius:0 4px 4px 0}.cart-item-qty span{border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);justify-content:center;align-items:center;width:32px;height:28px;font-size:.82rem;font-weight:600;display:flex}.cart-item-remove{width:28px;height:28px;color:var(--color-text-light);background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.cart-item-remove:hover{color:var(--color-danger);background:#fee2e2}.cart-footer{border-top:1px solid var(--color-border);padding:16px 20px}.cart-total{justify-content:space-between;margin-bottom:12px;font-size:.95rem;font-weight:600;display:flex}.cart-checkout-btn{width:100%}.cart-checkout-btn:disabled{opacity:.6;cursor:not-allowed}
:root{--color-primary:#1a1a2e;--color-primary-light:#2d2d4e;--color-accent:#4cc9f0;--color-accent-dark:#0891b2;--color-accent-hover:#3ab8df;--color-bg:#fff;--color-bg-secondary:#f5f5f7;--color-bg-tertiary:#eeeef0;--color-text:#1a1a2e;--color-text-muted:#666;--color-text-light:#999;--color-border:#e5e5e5;--color-border-light:#f0f0f0;--color-success:#22c55e;--color-warning:#f59e0b;--color-danger:#ef4444;--color-sale:#ef4444;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--max-width:1280px;--header-height:64px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--shadow-sm:0 1px 3px #0000000f;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 24px #0000001f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-gutter:stable}body{flex-direction:column;min-height:100vh;display:flex}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{cursor:pointer;font-family:inherit}input,select,textarea{font-family:inherit}.back-btn{border:1.5px solid var(--color-border);background:var(--color-bg);width:38px;height:38px;color:var(--color-text);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:all .15s;display:flex}.back-btn:hover{border-color:var(--color-text);background:var(--color-bg-secondary)}.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}@media (max-width:768px){.container{padding:0 16px}}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skeleton{border-radius:var(--radius-sm);background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) 0 0/200% 100%;animation:1.5s infinite skeleton-loading}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.badge{border-radius:20px;align-items:center;padding:3px 10px;font-size:.72rem;font-weight:600;line-height:1.4;display:inline-flex}.badge-sale{color:var(--color-sale);background:#fee2e2}.badge-new{color:#2563eb;background:#dbeafe}.badge-out{color:#6b7280;background:#f3f4f6}.btn{border-radius:var(--radius-sm);border:none;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:.88rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background:var(--color-accent);color:#fff}.btn-primary:hover{background:var(--color-accent-hover)}.btn-outline{border:1.5px solid var(--color-border);color:var(--color-text);background:0 0}.btn-outline:hover{border-color:var(--color-text)}.btn-lg{padding:14px 28px;font-size:1rem}.type-chip{border:1.5px solid var(--color-border);background:var(--color-bg);color:var(--color-text-muted);cursor:pointer;border-radius:20px;padding:6px 14px;font-size:.78rem;font-weight:500;transition:all .15s}.type-chip:hover{border-color:var(--color-text);color:var(--color-text)}.type-chip.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.product-grid{grid-template-columns:repeat(5,1fr);gap:20px;display:grid}@media (max-width:1200px){.product-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:1024px){.product-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.product-grid{grid-template-columns:repeat(2,1fr);gap:12px}}