*{margin:0;padding:0;box-sizing:border-box}:root{--bg-color: #f9f9f9;--text-color: #222;--card-bg: #fff;--accent-color: #28a745;--border-color: #ddd;--box-shadow: 0 4px 16px rgba(0, 0, 0, .2)}[data-theme=dark]{--bg-color: #1e1e1e;--text-color: #f1f1f1;--card-bg: #2a2a2a;--accent-color: #13802d;--border-color: #333;--box-shadow: 0 4px 16px rgba(255, 255, 255, .2)}body{background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s,color .3s}.card-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;padding:8px;background-color:var(--bg-color)}.theme-toggle{display:flex;align-items:center;gap:8px;background:var(--card-bg);color:var(--text-color);border:1px solid var(--border-color);padding:8px 14px;border-radius:6px;cursor:pointer;font-size:.95rem;transition:background .3s,color .3s}.theme-toggle:hover{background:var(--text-color);color:var(--bg-color)}.theme-toggle i{font-size:1.1rem;transition:transform .3s ease}.theme-toggle:hover i{transform:rotate(20deg)}@media(max-width:769px){.theme-toggle{font-size:.85rem;padding:6px 10px}.theme-toggle i{font-size:1rem}}.header{display:flex;justify-content:space-between;background-color:var(--accent-color);color:snow;padding:15px 50px;text-align:center;font-size:.9rem;font-weight:700}@media(max-width:769px){.header{font-size:.7rem;padding:10px}}.searchbar-container{display:flex;justify-content:space-between;padding:15px;background-color:var(--bg-color)}.search-input{color:var(--text-color);background-color:var(--bg-color);place-self:center;width:60%;padding:10px 16px;border:1px solid var(--border-color);border-radius:4px;font-size:1rem}.search-input:focus{outline:none;caret-color:var(--text-color);background-color:var(--bg-color);border-color:var(--accent-color);box-shadow:0 0 1px #414141}.filter-sort-container{display:flex;align-items:center;gap:10px;margin-left:10px}.filter-select,.sort-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bg-color);border:1px solid var(--border-color);padding:10px 30px 10px 15px;font-size:1rem;cursor:pointer;border-radius:4px;color:var(--text-color);min-width:35%;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27292.4%27 height=%27292.4%27%3E%3Cpath fill=%27%23AAAAAA%27 d=%27M287 69.4a17.6 17.6 0 0 0-13 5.1L146.2 205.9 18 74.5a17.6 17.6 0 0 0-25.3 0 17.6 17.6 0 0 0 0 25.3l134.4 134.4a17.6 17.6 0 0 0 25.3 0l134.4-134.4a17.6 17.6 0 0 0 0-25.3 17.6 17.6 0 0 0-12.9-5.1z%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px}.filter-select:focus,.sort-select:focus{outline:none;border-color:var(--accent-color)}.filter-select option,.sort-select option{background-color:var(--bg-color);color:var(--text-color)}@media(max-width:769px){.searchbar-container{flex-direction:column}.search-input{width:100%;margin-bottom:10px;padding:6px 12px;font-size:.8rem}.filter-sort-container{justify-content:space-between;margin-left:0;width:100%}.filter-select,.sort-select{min-width:40%;font-size:.8rem;padding:6px 12px}}.product-card{border:1px solid var(--border-color);padding:16px;text-align:left;transition:box-shadow .3s ease-in-out}.product-card:hover{box-shadow:var(--box-shadow)}.product-image{width:100%;height:200px;padding:20px 10px;object-fit:contain;margin-bottom:12px;background-color:var(--bg-color);transition:transform .5s ease}.product-image:hover{transform:scale(1.08)}.product-title{font-size:1.1rem;margin-bottom:0;height:48px;overflow:hidden}.product-price{font-size:1.2rem;font-weight:700;margin-bottom:8px}.product-rating{display:flex;align-items:center}.product-rating p{margin-left:8px;font-size:.9rem;color:#888}.cart-button{margin-top:12px;padding:10px 16px;background-color:#28a745;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .5s ease}.cart-button:hover{background-color:#218838}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:85vh;color:#555}.loader-container p{font-size:1.2rem;color:#28a745}.spinner{width:64px;height:64px;border:8px solid #ccecd6;border-top:8px solid #28a745;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:12px}@keyframes spin{to{transform:rotate(360deg)}}.error-message{padding:20px;margin:20px auto;max-width:500px;text-align:center;border:1px solid #ff4d4f;border-radius:8px;background-color:#fff1f0;color:#ff4d4f;font-weight:700}