.products-hero{background:linear-gradient(135deg,#4facfe,#00f2fe);padding:calc(80px + var(--space-16)) 0 var(--space-16);text-align:center;color:var(--white);position:relative;overflow:hidden}.products-hero:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="150" cy="150" r="80" fill="url(%23a)"/><circle cx="850" cy="200" r="120" fill="url(%23a)"/><circle cx="300" cy="800" r="100" fill="url(%23a)"/></svg>');opacity:.3}.products-hero-content{position:relative;z-index:2}.products-hero-title{font-size:clamp(2.5rem,4vw,3.5rem);font-weight:800;margin-bottom:var(--space-4);line-height:1.1}.products-hero-subtitle{font-size:var(--text-xl);opacity:.9;max-width:600px;margin:0 auto}.filters-section{background:var(--white);padding:var(--space-8) 0;border-bottom:1px solid var(--gray-200);position:relative;z-index:var(--z-sticky)}.filters-container{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}.search-box{position:relative;flex:1;min-width:300px}.search-box svg{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--gray-400)}.search-input{width:100%;padding:var(--space-3) var(--space-4) var(--space-3) var(--space-12);border:2px solid var(--gray-200);border-radius:var(--radius-full);font-size:var(--text-base);transition:all var(--transition-base);background:var(--white)}.search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea1a}.filter-buttons{display:flex;gap:var(--space-2);flex-wrap:wrap}.filter-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border:2px solid var(--gray-200);background:var(--white);color:var(--gray-600);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all var(--transition-base)}.filter-btn:hover{border-color:var(--primary-color);color:var(--primary-color);transform:translateY(-2px)}.filter-btn.active{background:var(--primary-gradient);border-color:transparent;color:var(--white);box-shadow:var(--shadow-md)}.sort-dropdown{position:relative}.sort-select{padding:var(--space-3) var(--space-6) var(--space-3) var(--space-4);border:2px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--white);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-base);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236b7280"><path d="M7 10l5 5 5-5z"/></svg>');background-repeat:no-repeat;background-position:right var(--space-3) center;background-size:20px}.sort-select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea1a}.products-main{padding:var(--space-12) 0}.products-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-8)}.products-title{font-size:var(--text-3xl);margin:0}.products-count{color:var(--gray-600);font-size:var(--text-lg)}.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--space-8)}.products-loading{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-16);color:var(--gray-600)}.product-card{background:var(--white);border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-lg);transition:all var(--transition-base);border:1px solid var(--gray-100);position:relative}.product-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-2xl)}.product-image-container{position:relative;height:250px;overflow:hidden;background:var(--gray-50)}.product-image{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}.product-card:hover .product-image{transform:scale(1.1)}.product-badge{position:absolute;top:var(--space-4);right:var(--space-4);padding:var(--space-1) var(--space-3);background:var(--primary-gradient);color:var(--white);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;text-transform:uppercase}.product-quick-view{position:absolute;top:var(--space-4);left:var(--space-4);width:40px;height:40px;background:#ffffffe6;border:none;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(-10px);transition:all var(--transition-base);color:var(--gray-700)}.product-card:hover .product-quick-view{opacity:1;transform:translateY(0)}.product-quick-view:hover{background:var(--white);color:var(--primary-color);transform:scale(1.1)}.product-content{padding:var(--space-6)}.product-category{display:inline-block;padding:var(--space-1) var(--space-3);background:var(--gray-100);color:var(--gray-600);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:500;margin-bottom:var(--space-3);text-transform:uppercase}.product-name{font-size:var(--text-xl);font-weight:600;margin-bottom:var(--space-3);color:var(--gray-900);line-height:1.3}.product-description{color:var(--gray-600);margin-bottom:var(--space-4);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.product-specs{margin-bottom:var(--space-4)}.product-spec{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) 0;border-bottom:1px solid var(--gray-100);font-size:var(--text-sm)}.product-spec:last-child{border-bottom:none}.product-spec-label{color:var(--gray-600);font-weight:500}.product-spec-value{color:var(--gray-900);font-weight:600}.product-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-4)}.product-price{font-size:var(--text-2xl);font-weight:700;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.product-actions{display:flex;gap:var(--space-2)}.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}.product-detail{background:var(--white);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);overflow:hidden;margin-bottom:var(--space-12)}.product-detail-header{background:var(--primary-gradient);color:var(--white);padding:var(--space-8);text-align:center}.product-detail-title{font-size:var(--text-4xl);margin-bottom:var(--space-4)}.product-detail-subtitle{font-size:var(--text-lg);opacity:.9}.product-detail-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);padding:var(--space-8)}.product-detail-image{width:100%;border-radius:var(--radius-lg)}.product-detail-info h3{margin-bottom:var(--space-4);color:var(--gray-900)}.product-detail-specs{background:var(--gray-50);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-6)}.product-detail-price{font-size:var(--text-3xl);font-weight:800;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-6)}.comparison-section{padding:var(--space-20) 0}.comparison-table-container{overflow-x:auto;background:var(--white);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg)}.comparison-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.comparison-table th,.comparison-table td{padding:var(--space-4);text-align:left;border-bottom:1px solid var(--gray-200)}.comparison-table th{background:var(--gray-50);font-weight:600;color:var(--gray-900);position:sticky;top:0}.comparison-table tr:hover{background:var(--gray-50)}.price-cell{font-weight:700;color:var(--primary-color)}.cta-section{background:var(--dark-gradient);color:var(--white);padding:var(--space-20) 0;text-align:center}.cta-title{font-size:var(--text-4xl);margin-bottom:var(--space-4);color:var(--white)}.cta-subtitle{font-size:var(--text-lg);opacity:.9;margin-bottom:var(--space-8);max-width:600px;margin-left:auto;margin-right:auto}.cta-buttons{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap}.pagination{display:flex;justify-content:center;align-items:center;gap:var(--space-2);margin-top:var(--space-12)}.pagination-btn{padding:var(--space-2) var(--space-4);border:2px solid var(--gray-200);background:var(--white);color:var(--gray-600);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);text-decoration:none}.pagination-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.pagination-btn.active{background:var(--primary-gradient);border-color:transparent;color:var(--white)}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;z-index:var(--z-modal);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.modal.active{display:flex;align-items:center;justify-content:center;animation:fadeInUp .3s ease-out}.modal-content{background:var(--white);border-radius:var(--radius-2xl);max-width:90vw;max-height:90vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-2xl)}.modal-close{position:absolute;top:var(--space-4);right:var(--space-4);width:40px;height:40px;background:#0000001a;border:none;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:all var(--transition-base)}.modal-close:hover{background:#0003;transform:scale(1.1)}@media (max-width: 768px){.products-hero-title{font-size:var(--text-3xl)}.filters-container{flex-direction:column;align-items:stretch}.search-box{min-width:auto}.filter-buttons{justify-content:center}.products-grid{grid-template-columns:1fr}.products-header{flex-direction:column;gap:var(--space-4);text-align:center}.product-detail-content{grid-template-columns:1fr}.comparison-table-container{font-size:var(--text-xs)}.cta-buttons{flex-direction:column;align-items:center}.modal-content{margin:var(--space-4);max-width:calc(100vw - var(--space-8))}}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}.skeleton{background:linear-gradient(90deg,var(--gray-200) 25%,var(--gray-100) 50%,var(--gray-200) 75%);background-size:200px 100%;animation:shimmer 1.5s infinite}.product-card.skeleton{pointer-events:none}.product-card.skeleton .product-image{background:var(--gray-200)}.product-card.skeleton .product-name,.product-card.skeleton .product-description,.product-card.skeleton .product-price{background:var(--gray-200);color:transparent;border-radius:var(--radius-sm)}