body{background:#f7f8fa;font-family:Segoe UI,PingFang SC,Hiragino Sans,Arial,sans-serif;margin:0;min-height:100vh;display:flex;flex-direction:column;padding-top:60px}.container{max-width:1200px;width:100%;margin:0 auto 60px;padding:1rem;flex:1;box-sizing:border-box}:root{--primary-color: #e91e63;--primary-hover: #d81557;--text-primary: #333;--text-secondary: #666;--bg-light: #f8f8f8;--bg-white: #fff;--border-color: #e0e0e0;--shadow-sm: 0 2px 10px rgba(0,0,0,.05);--shadow-md: 0 4px 12px rgba(0,0,0,.1);--radius-sm: 6px;--radius-md: 12px;--radius-lg: 25px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px}.search-switch-bar{position:fixed;top:0;left:0;right:0;background:var(--bg-white);padding:var(--spacing-md);z-index:100;display:flex;align-items:center;gap:var(--spacing-md)}.search-bar{flex:1}.search-form{position:relative;margin:0 auto}.search-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text-secondary)}.search-input{width:100%;padding:10px 0;text-indent:45px;border:1px solid var(--border-color);border-radius:var(--radius-lg);font-size:1rem;outline:none;transition:all .2s;background-color:var(--bg-light)}.search-input:focus{box-shadow:0 0 0 3px #0000001a;background-color:var(--bg-white)}.view-mode-switch{background:none;border:none;padding:var(--spacing-sm);cursor:pointer;color:var(--text-secondary);border-radius:var(--radius-sm);transition:all .2s}.view-mode-switch:hover{background:var(--bg-light);color:var(--primary-color)}.sort-filter-bar{position:fixed;top:75px;left:0;right:0;background:var(--bg-white);padding:10px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-sm);z-index:99}.sort-section{display:flex;flex:1;justify-content:space-between;align-items:center;max-width:800px;margin:0 auto}.sort-btn{padding:var(--spacing-sm) var(--spacing-md);background:none;border:none;font-size:.9rem;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;gap:var(--spacing-xs);position:relative}.sort-btn.active{color:var(--primary-color);font-weight:700}.sort-arrow{font-size:.8rem;color:#999;display:inline-block;transition:transform .2s,color .2s}.sort-btn.active .sort-arrow{color:var(--primary-color)}.sort-arrow.up{transform:rotate(180deg)}.category-dropdown{position:absolute;top:100%;right:20px;background:var(--bg-white);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:var(--spacing-sm) 0;min-width:150px}.category-item{display:block;width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:none;text-align:left;font-size:.9rem;color:var(--text-primary);cursor:pointer;transition:background-color .2s}.category-item:hover{background:var(--bg-light)}.category-item.active{color:var(--primary-color);font-weight:700;background:#e91e631a}.product-list{margin-top:4.5rem}.product-list.grid-mode{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}@media (min-width: 768px){.product-list.grid-mode{grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg)}}@media (min-width: 1024px){.product-list.grid-mode{grid-template-columns:repeat(4,1fr);gap:var(--spacing-xl)}}.product-list.list-mode{display:flex;flex-direction:column;gap:var(--spacing-md)}.product-card{background:var(--bg-white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--spacing-md);transition:box-shadow .2s;display:flex;flex-direction:column}@media (min-width: 768px){.product-card{padding:var(--spacing-lg)}}.list-mode .product-card{flex-direction:row;align-items:center;gap:var(--spacing-xl);padding:var(--spacing-md)}.list-mode .product-image{width:150px;height:150px;flex-shrink:0}.list-mode .product-info{flex:1;text-align:left}.grid-mode .product-card{text-align:center;flex-direction:column;align-items:center}.product-card:hover{box-shadow:var(--shadow-md)}.grid-mode .product-image{width:120px;height:120px;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:var(--spacing-sm)}.product-image{width:100px;height:100px;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:var(--spacing-md)}@media (min-width: 768px){.product-image{width:120px;height:120px}}@media (min-width: 1024px){.product-image{width:140px;height:140px}}.product-name{font-size:1rem;color:var(--text-primary);margin:var(--spacing-xs) 0}@media (min-width: 768px){.product-name{font-size:1.1rem}}@media (min-width: 1024px){.product-name{font-size:1.2rem}}.product-category{color:var(--text-secondary);font-size:.8rem}@media (min-width: 768px){.product-category{font-size:.85rem}}@media (min-width: 1024px){.product-category{font-size:.9rem}}.product-desc{color:var(--text-secondary);font-size:.9rem;margin-bottom:var(--spacing-md)}@media (min-width: 768px){.product-desc{font-size:.95rem}}@media (min-width: 1024px){.product-desc{font-size:1rem}}.product-meta{display:flex;align-items:center;justify-content:space-between;margin-top:var(--spacing-md)}.grid-mode .product-meta{justify-content:center;gap:var(--spacing-md)}.product-price{font-size:1.1rem;color:var(--primary-color);font-weight:700}.product-sales{color:var(--text-secondary);font-size:.9rem}.product-detail{padding:var(--spacing-xl);background:var(--bg-white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin:20px auto;max-width:800px}.product-info-detailed{padding:var(--spacing-lg)}.product-info-detailed h1{font-size:1.8rem;color:var(--text-primary);margin-bottom:var(--spacing-md)}.product-info-detailed .category{font-size:1.2rem;color:var(--text-secondary)}.product-info-detailed .price{font-size:1.5rem;color:var(--primary-color);font-weight:700;margin-bottom:var(--spacing-sm)}.product-info-detailed .sales{color:var(--text-secondary);font-size:1rem}.product-info-detailed img{max-width:100%;height:auto;border-radius:var(--radius-sm);margin:var(--spacing-md) 0;display:block;margin-bottom:var(--spacing-lg)}.product-info-detailed .description{color:var(--text-primary);font-size:1.1rem;line-height:1.6;margin-bottom:var(--spacing-xl)}.product-info-detailed .details{color:var(--text-secondary);font-size:1rem;line-height:1.5;padding:var(--spacing-lg);background:var(--bg-light);border-radius:var(--radius-md)}@media (max-width: 768px){.product-detail{padding:var(--spacing-md)}.product-image-large img{width:300px;height:300px}.product-info-detailed{padding:var(--spacing-md)}.product-info-detailed h1{font-size:1.5rem}}@media (max-width: 480px){.product-image-large img{width:250px;height:250px}}.top-button{position:fixed;bottom:30px;right:30px;background:var(--primary-color);color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-size:20px;box-shadow:var(--shadow-md);transition:all .3s ease;z-index:1000}.top-button:hover{background:var(--primary-hover);transform:translateY(-2px)}.top-button:active{transform:translateY(0)}.back-button{position:fixed;top:20px;left:20px;font-size:30px;cursor:pointer;z-index:1000}.product-images-carousel{width:100%;overflow:hidden;position:relative;margin-bottom:var(--spacing-xl)}.images-container{display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth}.images-container::-webkit-scrollbar{display:none}.carousel-item{flex:0 0 100%;scroll-snap-align:start;display:flex;justify-content:center;align-items:center;padding:0 var(--spacing-md)}.carousel-item img{max-width:100%;width:auto;height:auto;max-height:400px;object-fit:contain;border-radius:var(--radius-md);box-shadow:var(--shadow-md)}.carousel-controls{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.carousel-control{width:40px;height:40px;border:none;background:#0000004d;color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;margin:0 var(--spacing-md);pointer-events:auto;transition:background-color .3s}.carousel-control:hover{background:#00000080}.carousel-dots{position:absolute;bottom:var(--spacing-md);left:50%;transform:translate(-50%);display:flex;gap:var(--spacing-sm);pointer-events:auto}.carousel-dot{width:8px;height:8px;border-radius:50%;border:none;background:#ffffff80;cursor:pointer;padding:0;transition:background-color .3s}.carousel-dot.active{background:#fff}@media (max-width: 768px){.carousel-item{padding:0}.carousel-item img{max-height:300px}.carousel-control{width:32px;height:32px;font-size:20px;margin:0 var(--spacing-sm)}}