@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-color:#f8f9fa;--surface-color:#fff;--text-primary:#111827;--text-secondary:#6b7280;--primary-color:#0f172a;--primary-hover:#334155;--accent-color:#3b82f6;--border-color:#e5e7eb;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--radius-md:.5rem;--radius-lg:1rem;--radius-xl:1.5rem}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,sans-serif}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.app-container{max-width:1400px;min-height:100vh;margin:0 auto;padding:1.5rem 1.5rem 6rem}.page-title{color:var(--primary-color);margin-bottom:2rem;font-size:2rem;font-weight:700}.glass-effect{-webkit-backdrop-filter:blur(12px);background:#ffffffd9;border-top:1px solid #ffffff4d}.btn-primary{background-color:var(--primary-color);color:#fff;cursor:pointer;box-shadow:var(--shadow-md);border:none;border-radius:9999px;justify-content:center;align-items:center;gap:.5rem;padding:1rem 2rem;font-size:1.1rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary:hover{background-color:var(--primary-hover);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.quantity-controls{align-items:center;gap:.5rem;display:flex}.qty-btn{border-radius:var(--radius-sm);border:1px solid var(--border-color);background:var(--bg-color);cursor:pointer;width:28px;height:28px;color:var(--text-primary);justify-content:center;align-items:center;transition:all .1s;display:flex}.qty-btn:not(:disabled):hover{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.qty-btn:disabled{opacity:.5;cursor:not-allowed}.qty-value{text-align:center;width:1.5rem;color:var(--text-primary);padding:0;font-family:inherit;font-weight:500}.qty-value:focus{border-radius:4px;outline:none;background:#0000000d!important}.qty-value::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.qty-value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.qty-value[type=number]{-moz-appearance:textfield}.qty-btn-large{border-radius:var(--radius-md);width:44px;height:44px}.qty-value-large{width:3rem;font-size:1.5rem}.btn-icon{border:1px solid var(--border-color);background:var(--surface-color);cursor:pointer;width:40px;height:40px;color:var(--text-primary);border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.btn-icon:hover{background:var(--bg-color);border-color:var(--text-secondary)}.btn-icon:disabled{opacity:.5;cursor:not-allowed}.product-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;display:grid}.product-card{background:var(--surface-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);cursor:pointer;border:1px solid var(--border-color);transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden}.product-card:hover{box-shadow:var(--shadow-xl);transform:translateY(-5px)}.product-card-image{aspect-ratio:1;object-fit:cover;width:100%;transition:transform .5s}.product-card:hover .product-card-image{transform:scale(1.05)}.product-card-content{padding:1rem}.product-title{margin-bottom:.25rem;font-size:1.25rem;font-weight:600}.product-package{color:var(--text-secondary);font-size:.9rem}.product-categories{flex-wrap:wrap;gap:.4rem;margin-top:-.2rem;margin-bottom:.5rem;display:flex}.category-chip{background:var(--bg-color);color:var(--accent-color);border-radius:var(--radius-sm);border:1px solid var(--border-color);padding:.2rem .5rem;font-size:.75rem;font-weight:500}.category-filters{gap:.5rem;margin-bottom:1.5rem;padding-bottom:1rem;display:flex;overflow-x:auto}.category-filters::-webkit-scrollbar{height:4px}.category-filters::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.filter-btn{background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--radius-full);white-space:nowrap;cursor:pointer;padding:.5rem 1rem;font-size:.9rem;font-weight:500;transition:all .2s}.filter-btn:hover{background:var(--border-color)}.filter-btn.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.search-container{z-index:10}.search-input{border:1px solid var(--border-color);border-radius:var(--radius-full);background:var(--bg-color);width:100%;color:var(--text-primary);box-shadow:var(--shadow-sm);padding:1rem 1.5rem;font-family:inherit;font-size:1rem;transition:all .2s}.search-input:focus{border-color:var(--accent-color);outline:none;box-shadow:0 0 0 3px #3b82f61a}.search-dropdown{background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:20;max-height:300px;margin-top:.5rem;position:absolute;top:100%;left:0;right:0;overflow-y:auto}.suggestion-group{padding:.5rem 0}.suggestion-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;padding:.5rem 1rem;font-size:.8rem;font-weight:600}.suggestion-item{cursor:pointer;align-items:center;gap:1rem;padding:.75rem 1rem;font-weight:500;transition:background .1s;display:flex}.suggestion-item:hover{background:#0000000a}.suggestion-image{border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0;width:40px;height:40px}.product-price{color:var(--text-secondary);font-weight:500}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;background:#00000080;justify-content:center;align-items:flex-end;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}@media (width>=640px){.modal-overlay{align-items:center}}.modal-content{background:var(--surface-color);border-radius:var(--radius-xl) var(--radius-xl) 0 0;flex-direction:column;width:100%;max-width:900px;max-height:90vh;padding:1.5rem;animation:.3s cubic-bezier(.16,1,.3,1) slideUp;display:flex;position:relative;overflow-y:auto}@media (width>=768px){.modal-content{border-radius:var(--radius-xl);padding:2.5rem;overflow-y:visible}}.modal-close-absolute{background:var(--bg-color);cursor:pointer;width:36px;height:36px;color:var(--text-secondary);z-index:10;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:1rem;right:1rem}.modal-body{flex-direction:column;max-height:calc(90vh - 60px);display:flex}.settings-body{flex-direction:column;max-height:calc(90vh - 60px);padding:1.5rem;display:flex;overflow-y:auto}@media (width>=768px){.modal-body{flex-direction:row;gap:3rem}.modal-image-container{flex:1;margin-bottom:0!important}.modal-details{flex-direction:column;flex:1;display:flex}}.modal-details{flex-direction:column;flex:1;display:flex}.modal-header{margin-bottom:1.5rem}.modal-header h2{font-size:1.75rem;font-weight:700;line-height:1.2}.modal-image-container{background:var(--bg-color);border-radius:var(--radius-lg);width:100%;margin-bottom:1.5rem;overflow:hidden}.modal-image-container img{width:100%;height:auto;display:block}.size-list{flex-direction:column;gap:1rem;max-height:40vh;margin-bottom:1.5rem;padding-right:.5rem;display:flex;overflow-y:auto}.size-list::-webkit-scrollbar{width:6px}.size-list::-webkit-scrollbar-track{background:var(--bg-color);border-radius:4px}.size-list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.size-list::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.size-item{background:var(--bg-color);border-radius:var(--radius-lg);justify-content:space-between;align-items:center;padding:1rem;display:flex}.size-name{font-size:1.1rem;font-weight:600}.size-controls{align-items:center;gap:1rem;display:flex}.size-quantity{text-align:center;min-width:20px;font-size:1.1rem;font-weight:600}.modal-footer{margin-top:auto;padding-top:1rem}.modal-footer .btn-primary{width:100%}.floating-cart{z-index:40;animation:.3s ease-out slideUp;position:fixed;bottom:2rem;left:50%;transform:translate(-50%)}.cart-badge{background:var(--accent-color);color:#fff;border:2px solid var(--surface-color);border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:.8rem;font-weight:700;display:flex;position:absolute;top:-8px;right:-8px}.order-header{align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.back-btn{cursor:pointer;color:var(--text-secondary);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.order-items{flex-direction:column;gap:1.5rem;display:flex}.order-item-card{background:var(--surface-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);gap:1.5rem;padding:1rem;display:flex}.order-item-image{object-fit:cover;border-radius:var(--radius-md);width:100px;height:100px}.order-item-details{flex:1}.order-item-title{margin-bottom:.5rem;font-size:1.25rem;font-weight:600}.order-item-sizes{flex-direction:column;gap:.5rem;display:flex}.order-size-row{color:var(--text-secondary);justify-content:space-between;font-size:.95rem;display:flex}.empty-state{text-align:center;color:var(--text-secondary);padding:4rem 2rem}.empty-state svg{color:var(--border-color);margin:0 auto 1rem}.order-input{border:1px solid var(--border-color);border-radius:var(--radius-md);width:100%;margin-bottom:1.5rem;padding:1rem;font-family:inherit;font-size:1rem;transition:all .2s}.order-input:focus{border-color:var(--accent-color);outline:none;box-shadow:0 0 0 3px #3b82f61a}.scroll-top-btn{background-color:var(--primary-color);color:#fff;cursor:pointer;width:48px;height:48px;box-shadow:var(--shadow-md);z-index:40;border:none;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex;position:fixed;bottom:2rem;right:2rem}.scroll-top-btn:hover{background-color:var(--primary-hover);transform:translateY(-2px)}