:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#000;background-color:#f5f5f5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;min-width:320px;min-height:100vh;background-color:#f5f5f5}#root{width:100%}.app{width:100%;max-width:600px;margin:0 auto;background-color:#fff;color:#000;min-height:100vh;box-shadow:0 0 20px #0000000d}.header{display:flex;align-items:center;padding:12px 16px;background-color:#fff;position:sticky;top:0;z-index:10;box-shadow:0 1px 3px #0000000d;gap:12px;border-bottom:1px solid #f0f0f0}.back-button{background:none;border:none;padding:0;color:#3390ec;cursor:pointer;display:flex;align-items:center}.header-logo{flex-shrink:0;display:flex;align-items:center}.header-title{font-size:18px;font-weight:600;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#000}.container{padding:16px}.categories-list{display:flex;flex-direction:column;gap:8px}.category-item{display:flex;align-items:center;width:100%;padding:12px;background-color:#fff;border:1px solid #f0f0f0;border-radius:12px;cursor:pointer;transition:transform .1s;box-shadow:0 2px 4px #0000000d}.category-item:active{transform:scale(.98)}.category-icon{margin-right:12px}.category-name{flex:1;text-align:left;font-size:16px;font-weight:500;color:#000}.category-arrow{color:#999}.subcategories-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}.subcategory-card{background-color:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;align-items:center;border:1px solid #f0f0f0;cursor:pointer;box-shadow:0 2px 5px #0000000d;transition:transform .1s;padding-bottom:8px}.subcategory-card:active{transform:scale(.98)}.subcategory-image-wrapper{width:100%;aspect-ratio:1;background:#f8f8f8;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:8px}.subcategory-image{width:100%;height:100%;object-fit:cover}.subcategory-placeholder{color:#999}.subcategory-title{font-size:14px;font-weight:500;text-align:center;padding:0 8px;color:#000;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.card{background-color:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 8px #0000000d;border:1px solid #f0f0f0}.card-image-wrapper{width:100%;aspect-ratio:1;background-color:#fff;position:relative;display:flex;align-items:center;justify-content:center}.card-image{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;padding:8px;box-sizing:border-box}.card-content{padding:10px;display:flex;flex-direction:column;flex:1;background:#fff}.card-title{font-size:14px;font-weight:500;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:40px;color:#000}.card-price{font-size:16px;font-weight:700;margin-bottom:12px;color:#000}.card-button{margin-top:auto;background-color:#3390ec;color:#fff;border:none;padding:8px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:opacity .2s}.card-button:active{opacity:.8}.loading-container,.error-container,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 0;color:#999;text-align:center}.spinner{animation:spin 1s linear infinite;margin-bottom:16px;color:#3390ec}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.retry-button{margin-top:16px;display:flex;align-items:center;gap:8px;padding:8px 16px;background-color:#3390ec;color:#fff;border:none;border-radius:8px;cursor:pointer}.load-more-container{display:flex;justify-content:center;margin-top:24px;padding-bottom:24px}.load-more-button{background-color:transparent;border:1px solid #3390ec;color:#3390ec;padding:10px 24px;border-radius:20px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s}.load-more-button:active{background-color:#3390ec1a}.load-more-button:disabled{opacity:.6;cursor:not-allowed}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-content{background:#fff;color:#000;border-radius:16px;padding:24px;width:100%;max-width:320px;box-shadow:0 4px 12px #00000026;animation:modalSlideUp .3s ease-out}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-title{margin:0 0 8px;font-size:18px;font-weight:600;text-align:center;color:#000}.modal-price{text-align:center;color:#888;margin-bottom:16px}.quantity-control{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px}.quantity-control button{width:36px;height:36px;border-radius:50%;border:1px solid #3390ec;background:none;color:#3390ec;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}.quantity-control span{font-size:20px;font-weight:600;min-width:24px;text-align:center;color:#000}.modal-total{text-align:center;font-size:20px;font-weight:700;margin-bottom:24px;color:#3390ec}.modal-inputs{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.modal-inputs input{padding:12px;border-radius:8px;border:1px solid #cccccc;background:#f5f5f5;color:#000;font-size:16px}.modal-inputs input:focus{outline:none;border-color:#3390ec;background:#fff}.modal-actions{display:flex;gap:12px}.modal-submit,.modal-cancel{flex:1;padding:12px;border-radius:8px;font-size:16px;font-weight:500;border:none;cursor:pointer}.modal-submit{background:#3390ec;color:#fff}.modal-cancel{background:#f0f0f0;color:#333}