:root{--primary-color:#2563eb;--primary-hover:#1d4ed8;--primary-light:#dbeafe;--secondary-color:#16a34a;--secondary-hover:#15803d;--accent-color:#f59e0b;--danger-color:#dc2626;--danger-hover:#b91c1c;--white:#ffffff;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--bg-primary:#ffffff;--bg-secondary:#f9fafb;--bg-tertiary:#f3f4f6;--text-primary:#111827;--text-secondary:#6b7280;--text-tertiary:#9ca3af;--shadow-sm:0 1px 2px 0 rgb(0 0 0/0.05);--shadow-md:0 4px 6px -1px rgb(0 0 0/0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0/0.1);--shadow-xl:0 20px 25px -5px rgb(0 0 0/0.1);--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-full:9999px;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:300ms cubic-bezier(0.4,0,0.2,1);--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell",sans-serif;--z-dropdown:1000;--z-sticky:1020;--z-modal:1050;--z-tooltip:1070}.dark-mode,.dark-mode:root,:root.dark-mode{--bg-primary:#1f2937;--bg-secondary:#111827;--bg-tertiary:#374151;--text-primary:#f9fafb;--text-secondary:#d1d5db;--text-tertiary:#9ca3af;--gray-50:#374151;--gray-100:#4b5563;--gray-200:#6b7280;--gray-300:#9ca3af;--primary-color:#3b82f6;--primary-hover:#2563eb;--primary-light:rgb(59 130 246/0.1);--secondary-color:#34d399;--secondary-hover:#10b981;--accent-color:#fbbf24;--shadow-sm:0 1px 2px 0 rgb(0 0 0/0.3);--shadow-md:0 4px 6px -1px rgb(0 0 0/0.3);--shadow-lg:0 10px 15px -3px rgb(0 0 0/0.4);--shadow-xl:0 20px 25px -5px rgb(0 0 0/0.5)}*,:after,:before{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-sans);color:var(--text-primary);background-color:var(--bg-secondary);line-height:1.6;overflow-x:hidden;transition:background-color .3s ease,color .3s ease}.kit-main-content{min-height:100vh;display:flex;flex-direction:column;transition:background-color .3s ease}.kit-content-wrapper{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:var(--spacing-xl) var(--spacing-md)}.kit-header-section{text-align:center;padding:var(--spacing-3xl) var(--spacing-md);margin-bottom:var(--spacing-2xl);background:linear-gradient(135deg,#667eea,#764ba2);border-radius:var(--radius-2xl);color:var(--white);position:relative;overflow:hidden;isolation:isolate;transition:all .3s ease}.dark-mode .kit-header-section{background:linear-gradient(135deg,#4c1d95,#5b21b6)}.kit-header-section:before{content:"";position:absolute;inset:-50%;background:radial-gradient(circle,rgb(255 255 255/.1) 0,transparent 70%);animation:rotate-gradient 20s linear infinite;will-change:transform}.dark-mode .kit-header-section:before{background:radial-gradient(circle,rgb(255 255 255/.05) 0,transparent 70%)}@keyframes rotate-gradient{to{transform:rotate(1turn)}}.kit-header-badge{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:rgb(255 255 255/.2);backdrop-filter:blur(10px);border-radius:var(--radius-full);font-size:.875rem;font-weight:500;margin-bottom:var(--spacing-lg);border:1px solid rgb(255 255 255/.3);position:relative;z-index:1;transition:all .3s ease}.dark-mode .kit-header-badge{background:rgb(255 255 255/.15);border-color:rgb(255 255 255/.25)}.kit-title{font-size:clamp(2rem,5vw,3rem);font-weight:800;margin-bottom:var(--spacing-md);line-height:1.2;position:relative;z-index:1}.gradient-text{background:linear-gradient(90deg,#fbbf24,#f59e0b,#fbbf24);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 3s ease infinite}@keyframes gradient-shift{0%,to{background-position:0}50%{background-position:100%}}.kit-subtitle{font-size:clamp(1rem,2.5vw,1.25rem);opacity:.95;margin-bottom:var(--spacing-2xl)}.kit-subtitle,.stats-bar{position:relative;z-index:1}.stats-bar{display:flex;justify-content:center;align-items:center;gap:var(--spacing-xl);padding:var(--spacing-lg);background:rgb(255 255 255/.15);backdrop-filter:blur(10px);border-radius:var(--radius-xl);border:1px solid rgb(255 255 255/.2);max-width:600px;margin:0 auto;transition:all .3s ease}.dark-mode .stats-bar{background:rgb(255 255 255/.1);border-color:rgb(255 255 255/.15)}.stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.stat-number{font-size:1.5rem;font-weight:700}.stat-label{font-size:.875rem;opacity:.9}.stat-divider{width:1px;height:40px;background:rgb(255 255 255/.3)}.kit-filter-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-lg);background:var(--bg-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-2xl);flex-wrap:wrap;transition:all .3s ease;border:1px solid var(--gray-200)}.filter-info{flex:0 0 auto}.filter-info p{font-size:1rem;color:var(--text-secondary);transition:color .3s ease}.filter-info strong{color:var(--primary-color);font-weight:600;transition:color .3s ease}.search-result{color:var(--text-primary);font-weight:500;transition:color .3s ease}.kit-filter-controls{display:flex;gap:var(--spacing-md);flex-wrap:wrap;align-items:center}.filter-group{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-tertiary);border-radius:var(--radius-lg);border:1px solid var(--gray-200);transition:all .3s ease}.filter-group svg{color:var(--gray-500);flex-shrink:0;transition:color .3s ease}.kit-select{border:none;background:transparent;font-size:.875rem;color:var(--text-primary);cursor:pointer;outline:none;font-weight:500;padding:var(--spacing-xs);transition:color .3s ease}.dark-mode .kit-select option{background:var(--bg-tertiary);color:var(--text-primary)}.kit-select:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px;border-radius:var(--radius-sm)}.search-group{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-tertiary);border-radius:var(--radius-lg);border:1px solid var(--gray-200);min-width:280px;transition:all .3s ease}.search-group:focus-within{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-light)}.search-group svg{color:var(--gray-500);flex-shrink:0;transition:color .3s ease}.kit-search{border:none;background:transparent;font-size:.875rem;color:var(--text-primary);outline:none;flex:1;min-width:0;transition:color .3s ease}.kit-search::placeholder{color:var(--text-tertiary)}.clear-search{background:var(--gray-300);border:none;border-radius:var(--radius-full);width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gray-600);font-size:1rem;font-weight:600;transition:all .3s ease;flex-shrink:0}.clear-search:hover{background:var(--gray-400);transform:scale(1.1)}.dark-mode .clear-search{background:var(--gray-200);color:var(--text-secondary)}.kit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:var(--spacing-xl);margin-bottom:var(--spacing-2xl)}.kit-card{background:var(--bg-primary);border-radius:var(--radius-xl);padding:var(--spacing-lg);box-shadow:var(--shadow-md);transition:all .3s ease;display:flex;flex-direction:column;gap:var(--spacing-md);position:relative;border:1px solid var(--gray-200);overflow:hidden;contain:layout style paint}.kit-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl);border-color:var(--primary-color)}.kit-card:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));opacity:0;transition:opacity var(--transition-base)}.kit-card:hover:before{opacity:1}.animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .6s ease-out,transform .6s ease-out}.animate-on-scroll.visible{opacity:1;transform:translateY(0)}.kit-badge{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:linear-gradient(135deg,#667eea,#764ba2);color:var(--white);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-size:.75rem;font-weight:600;display:flex;align-items:center;gap:var(--spacing-xs);box-shadow:var(--shadow-md);z-index:10;transition:all .3s ease}.dark-mode .kit-badge{background:linear-gradient(135deg,#5b21b6,#6d28d9)}.kit-badge svg{width:14px;height:14px}.kit-card-header{display:flex;align-items:flex-start;gap:var(--spacing-md)}.kit-icon-wrapper{width:48px;height:48px;background:linear-gradient(135deg,var(--primary-light),var(--gray-100));border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s ease}.dark-mode .kit-icon-wrapper{background:linear-gradient(135deg,rgb(59 130 246/.2),var(--bg-tertiary))}.kit-card:hover .kit-icon-wrapper{background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));transform:rotate(5deg) scale(1.1)}.kit-icon-wrapper svg{width:24px;height:24px;color:var(--primary-color);transition:color var(--transition-base)}.kit-card:hover .kit-icon-wrapper svg{color:var(--white)}.kit-header-text{flex:1;min-width:0}.kit-header{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;transition:color .3s ease}.kit-rating{display:flex;align-items:center;gap:var(--spacing-xs);font-size:.875rem}.stars{color:var(--accent-color);letter-spacing:1px}.rating-count{color:var(--text-secondary);transition:color .3s ease}.kit-image-container{position:relative;width:100%;height:200px;background:var(--gray-50);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--gray-200);transition:all .3s ease}.dark-mode .kit-image-container{background:var(--bg-tertiary)}.kit-image{width:100%;height:100%;object-fit:contain;transition:transform var(--transition-base)}.kit-card:hover .kit-image{transform:scale(1.05)}.kit-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gray-100),var(--gray-200));transition:background .3s ease}.dark-mode .kit-image-placeholder{background:linear-gradient(135deg,var(--bg-tertiary),var(--gray-200))}.kit-image-placeholder svg{width:64px;height:64px;color:var(--gray-400);opacity:.5}.in-cart-badge{position:absolute;bottom:var(--spacing-sm);left:var(--spacing-sm);background:var(--secondary-color);color:var(--white);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-size:.75rem;font-weight:600;box-shadow:var(--shadow-md)}.kit-description{color:var(--text-secondary);font-size:.875rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s ease}.kit-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.kit-tag{background:var(--gray-100);color:var(--text-secondary);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-size:.75rem;font-weight:500;transition:all .3s ease;border:1px solid var(--gray-200)}.dark-mode .kit-tag{background:var(--bg-tertiary)}.kit-tag:hover{background:var(--primary-light);color:var(--primary-color);border-color:var(--primary-color)}.dark-mode .kit-tag:hover{background:rgb(59 130 246/.1);color:#60a5fa;border-color:#60a5fa}.kit-tag-more{background:var(--primary-color);color:var(--white);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-size:.75rem;font-weight:600}.kit-footer{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:auto;padding-top:var(--spacing-md);border-top:1px solid var(--gray-200);transition:border-color .3s ease}.kit-price-section{font-weight:700;font-size:1.5rem;color:var(--primary-color);transition:color .3s ease}.kit-cart-section,.kit-price-section{align-self:flex-end}.kit-feature{align-self:flex-start;margin-top:var(--spacing-sm);font-weight:600;font-size:.875rem;color:var(--secondary-color);display:flex;align-items:center;gap:var(--spacing-xs);transition:color .3s ease}.kit-feature svg{width:16px;height:16px}.kit-quantity{display:flex;align-items:center;gap:var(--spacing-md);background:var(--gray-50);padding:var(--spacing-sm);border-radius:var(--radius-lg);border:1px solid var(--gray-200);transition:all .3s ease}.dark-mode .kit-quantity{background:var(--bg-tertiary)}.qty-btn{width:32px;height:32px;background:var(--white);border:1px solid var(--gray-300);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--primary-color);font-size:1.25rem;font-weight:600;transition:all .3s ease}.dark-mode .qty-btn{background:var(--bg-primary);border-color:var(--gray-200)}.qty-btn:hover:not(:disabled){background:var(--primary-color);color:var(--white);border-color:var(--primary-color);transform:scale(1.1)}.qty-btn:active:not(:disabled){transform:scale(.95)}.qty-btn:disabled{opacity:.5;cursor:not-allowed}.qty-display{font-weight:600;font-size:1rem;color:var(--text-primary);min-width:30px;text-align:center;transition:color .3s ease}.kit-button{background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));color:var(--white);border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-lg);font-size:.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:var(--spacing-sm);transition:all .3s ease;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.dark-mode .kit-button{background:linear-gradient(135deg,#5b21b6,#6d28d9)}.kit-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgb(255 255 255/.3);transform:translate(-50%,-50%);transition:width .6s,height .6s}.kit-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.kit-button:hover:before{width:300px;height:300px}.kit-button:active{transform:translateY(0)}.kit-button svg{width:16px;height:16px;transition:transform var(--transition-fast)}.kit-button:hover svg{transform:translateX(4px)}.pagination-container{display:flex;justify-content:center;align-items:center;gap:var(--spacing-md);padding:var(--spacing-xl) 0;flex-wrap:wrap}.pagination-btn{background:var(--bg-primary);border:1px solid var(--gray-300);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);cursor:pointer;transition:all .3s ease;font-weight:500;color:var(--text-primary);display:flex;align-items:center;gap:var(--spacing-sm);font-size:.875rem}.dark-mode .pagination-btn{border-color:var(--gray-200)}.pagination-btn:hover:not(:disabled){background:var(--primary-color);color:var(--white);border-color:var(--primary-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.pagination-btn:disabled{opacity:.4;cursor:not-allowed}.pagination-nav{font-weight:600}.pagination-numbers{display:flex;gap:var(--spacing-sm);align-items:center}.pagination-number{min-width:40px;height:40px;padding:0;justify-content:center}.pagination-number.active{background:var(--primary-color);color:var(--white);border-color:var(--primary-color);box-shadow:var(--shadow-md)}.pagination-ellipsis{padding:var(--spacing-sm);color:var(--text-tertiary);font-weight:600}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-3xl);gap:var(--spacing-lg)}.loading-spinner{width:60px;height:60px;border:4px solid var(--gray-200);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.loading-container p{color:var(--text-secondary);font-size:1rem;font-weight:500;transition:color .3s ease}.no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-3xl);gap:var(--spacing-lg);text-align:center}.no-results svg{color:var(--gray-300);opacity:.5}.no-results h3{font-size:1.5rem;font-weight:700;color:var(--text-primary);transition:color .3s ease}.no-results p{color:var(--text-secondary);font-size:1rem;transition:color .3s ease}.reset-filters-btn{background:var(--primary-color);color:var(--white);border:none;padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-lg);font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-sm)}.reset-filters-btn:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.reset-filters-btn:active{transform:translateY(0)}@media (max-width:1024px){.kit-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--spacing-lg)}}@media (max-width:768px){.kit-content-wrapper{padding:var(--spacing-md)}.kit-header-section{padding:var(--spacing-2xl) var(--spacing-md)}.stats-bar{flex-direction:column;gap:var(--spacing-md)}.stat-divider{width:100%;height:1px}.kit-filter-bar{flex-direction:column;align-items:stretch}.filter-info{text-align:center}.kit-filter-controls{flex-direction:column;width:100%}.filter-group,.search-group{width:100%}.kit-grid{grid-template-columns:1fr;gap:var(--spacing-md)}.pagination-container{gap:var(--spacing-sm)}.pagination-nav{padding:var(--spacing-sm);font-size:.75rem}.pagination-number{min-width:36px;height:36px;font-size:.875rem}}@media (max-width:480px){.kit-header-section{padding:var(--spacing-xl) var(--spacing-sm)}.kit-header-badge{font-size:.75rem;padding:var(--spacing-xs) var(--spacing-md)}.stats-bar{padding:var(--spacing-md)}.stat-number{font-size:1.25rem}.stat-label{font-size:.75rem}.kit-card{padding:var(--spacing-md)}.kit-header{font-size:1.125rem}.kit-image-container{height:160px}.kit-price-section{font-size:1.25rem}.search-group{min-width:auto}.pagination-numbers{overflow-x:auto;padding:var(--spacing-sm) 0}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px;border-radius:var(--radius-sm)}@media print{.kit-button,.kit-filter-bar,.kit-header-section,.pagination-container,.qty-btn{display:none}.kit-card{break-inside:avoid;box-shadow:none;border:1px solid var(--gray-300)}.kit-grid{display:block}.kit-card{margin-bottom:var(--spacing-lg)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.animate-on-scroll{opacity:1;transform:none}}*{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}