@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";
:root{--primary:#e67e22;--primary-dark:#d35400;--primary-light:#fdf2e9;--bg-page:#f8f9fa;--bg-surface:#fff;--text-main:#1f2937;--text-secondary:#6b7280;--text-light:#9ca3af;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--radius-sm:.5rem;--radius-md:.75rem;--radius-lg:1rem;--radius-full:9999px;--transition:all .3s cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-page);color:var(--text-main);-webkit-font-smoothing:antialiased;font-family:Outfit,sans-serif;line-height:1.5;overflow-x:hidden}button{cursor:pointer;background:0 0;border:none;font-family:inherit}a{color:inherit;text-decoration:none}.container{width:100%;max-width:1600px;margin:0 auto;padding:0 1rem}.hidden-scrollbar::-webkit-scrollbar{display:none}.hidden-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.app-layout{flex-direction:column;width:100%;min-height:100vh;display:flex}header{z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffe6;border-bottom:1px solid #0000000d;position:sticky;top:0}.header-content{justify-content:space-between;align-items:center;height:60px;display:flex}.logo-area{align-items:center;gap:10px;display:flex}.logo-img{object-fit:contain;width:auto;height:36px}.brand-name{color:var(--text-main);letter-spacing:-.025em;font-size:1.1rem;font-weight:700}.category-nav{z-index:40;background:var(--bg-page);padding:.75rem 0;position:sticky;top:60px}.category-list{scroll-behavior:smooth;gap:.5rem;padding:.25rem .25rem .5rem;display:flex;overflow-x:auto}.cat-btn{white-space:nowrap;border-radius:var(--radius-full);background:var(--bg-surface);color:var(--text-secondary);box-shadow:var(--shadow-sm);transition:var(--transition);border:1px solid #0000;align-items:center;gap:6px;padding:.5rem 1rem;font-size:.9rem;font-weight:500;display:flex}.cat-btn:hover{background:var(--bg-surface);color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-1px)}.cat-btn.active{background:var(--primary);color:#fff;box-shadow:0 4px 10px #e67e2240}.products-area{padding:.5rem 0 4rem}.grid{grid-template-columns:repeat(2,1fr);gap:.75rem;display:grid}@media (min-width:640px){.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}}@media (min-width:1280px){.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem}}.desktop-only{display:none}.mobile-only{display:block}.mobile-category-dropdown{z-index:45;background:var(--bg-page);padding:.75rem 0;position:sticky;top:60px}.dropdown-trigger{background:var(--bg-surface);width:100%;color:var(--text-main);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid #0000000d;justify-content:space-between;align-items:center;padding:.75rem 1rem;font-size:.95rem;font-weight:600;display:flex}.dropdown-menu{background:var(--bg-surface);border-radius:var(--radius-lg);max-height:400px;box-shadow:var(--shadow-lg);border:1px solid #0000000d;flex-direction:column;gap:.25rem;margin-top:.5rem;padding:.5rem;display:flex;position:absolute;top:100%;left:0;right:0;overflow-y:auto}.dropdown-item{text-align:left;border-radius:var(--radius-md);color:var(--text-secondary);transition:var(--transition);padding:.6rem 1rem;font-size:.95rem;font-weight:500}.dropdown-item.active{background:var(--primary-light);color:var(--primary)}.product-card{background:var(--bg-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:var(--transition);flex-direction:column;height:100%;display:flex;position:relative;overflow:hidden}.product-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.card-image-wrapper{aspect-ratio:16/10;background:#f1f5f9;position:relative;overflow:hidden}.card-img{object-fit:cover;width:100%;height:100%;transition:transform .5s}.product-card:hover .card-img{transform:scale(1.05)}.card-content{flex-direction:column;flex:1;padding:.75rem;display:flex}.product-title{color:var(--text-main);margin-bottom:.25rem;font-size:.95rem;font-weight:600;line-height:1.3}.product-desc{color:var(--text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:1;margin-bottom:.5rem;font-size:.8rem;line-height:1.3;display:-webkit-box;overflow:hidden}.product-footer{justify-content:space-between;align-items:center;margin-top:auto;display:flex}.price-tag{color:var(--primary);font-size:.9rem;font-weight:700}.add-btn{background:var(--primary-light);width:26px;height:26px;color:var(--primary);transition:var(--transition);border-radius:50%;justify-content:center;align-items:center;font-size:14px;display:flex}.add-btn:hover{background:var(--primary);color:#fff}.empty-state{text-align:center;color:var(--text-secondary);grid-column:1/-1;padding:3rem 0}.section-title{color:var(--primary);border-bottom:2px solid var(--primary-light);grid-column:1/-1;align-items:center;gap:.5rem;margin:1.5rem 0 .75rem;padding-bottom:.25rem;font-size:1.25rem;font-weight:700;display:flex}.section-title svg{color:var(--primary);width:20px;height:20px}@media (min-width:1024px){.desktop-only{display:block}.mobile-only{display:none}.layout-grid{grid-template-columns:240px 1fr;align-items:start;gap:1.5rem;display:grid}.category-nav{background:0 0;height:calc(100vh - 90px);padding:0;display:block;position:sticky;top:80px;overflow-y:auto}.category-list{flex-direction:column;gap:.25rem;padding:0;display:flex;overflow:visible}.cat-btn{width:100%;box-shadow:none;border-radius:var(--radius-md);background:0 0;justify-content:flex-start;padding:.75rem 1rem;font-size:.95rem}.cat-btn:hover{box-shadow:none;background:#00000008}.cat-btn.active{background:var(--primary);color:#fff;box-shadow:var(--shadow-md)}.card-content{padding:1rem}.product-title,.price-tag{font-size:1rem}.add-btn{width:30px;height:30px}.sub-category-nav{display:none!important}}.sub-category-nav{white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:.5rem;margin-bottom:1.5rem;padding-bottom:.5rem;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 90%,#0000 100%);mask-image:linear-gradient(90deg,#000 90%,#0000 100%)}.sub-category-nav::-webkit-scrollbar{display:none}.sub-cat-btn{border-radius:var(--radius-full);background:var(--bg-surface);color:var(--text-secondary);transition:var(--transition);cursor:pointer;border:1px solid #e5e7eb;flex-shrink:0;padding:.4rem 1rem;font-size:.85rem;font-weight:500}.sub-cat-btn:hover{border-color:var(--primary);color:var(--primary)}.pl-4{padding-left:1rem}.mt-2{margin-top:.5rem}.ml-4{margin-left:1rem}.flex-col{flex-direction:column}.gap-1{gap:.25rem}.border-l-2{border-left-width:2px}.border-gray-100{border-color:#f3f4f6}.text-left{text-align:left}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-sm{font-size:.875rem}.rounded-md{border-radius:.375rem}.transition-colors{transition:background-color .2s,color .2s}.text-orange-600{color:var(--primary)!important}.font-semibold{font-weight:600}.bg-orange-50{background-color:var(--primary-light)!important}.text-gray-500{color:var(--text-secondary)}.hover\:text-gray-800:hover{color:var(--text-main)}.hover\:bg-gray-50:hover{background-color:#00000005}.sub-cat-sidebar-btn{cursor:pointer;background:0 0;border:none;width:100%;display:block}