:root{--bg: #f6f1ea;--surface: #ffffff;--brown-900: #2e1f14;--brown-700: #4a3423;--brown-500: #7a5c3e;--accent: #c98a3d;--accent-dark: #a86f2b;--muted: #9b8a78;--border: #e8ddd0;--shadow: 0 2px 12px rgba(46, 31, 20, .08);--radius: 14px}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--brown-900);font-family:Cairo,Poppins,system-ui,sans-serif;min-height:100vh}[dir=ltr] body,[dir=ltr] .app{font-family:Poppins,Cairo,system-ui,sans-serif}.app{max-width:760px;margin:0 auto;padding:0 16px 40px}.header{position:sticky;top:0;z-index:10;background:var(--bg);padding:16px 0 12px;border-bottom:1px solid var(--border)}.header-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.brand{display:flex;align-items:center;gap:12px}.brand-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--brown-900);color:var(--accent);flex-shrink:0}.brand h1{font-size:1.35rem;font-weight:800;line-height:1.2}.brand p{font-size:.8rem;color:var(--muted)}.lang-toggle{border:1.5px solid var(--brown-900);background:transparent;color:var(--brown-900);font-family:inherit;font-weight:700;font-size:.85rem;padding:8px 16px;border-radius:999px;cursor:pointer;transition:all .15s ease}.lang-toggle:hover{background:var(--brown-900);color:#fff}.search-box{position:relative;display:flex;align-items:center;margin-bottom:12px}.search-icon{position:absolute;inset-inline-start:14px;color:var(--muted);pointer-events:none}.search-box input{width:100%;padding:12px 42px;border:1.5px solid var(--border);border-radius:999px;background:var(--surface);font-family:inherit;font-size:1rem;color:var(--brown-900);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.search-box input::placeholder{color:var(--muted)}.search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #c98a3d26}.search-box input::-webkit-search-cancel-button{display:none}.clear-search{position:absolute;inset-inline-end:10px;border:none;background:var(--border);color:var(--brown-700);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:.75rem;display:grid;place-items:center}.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{flex-shrink:0;border:1.5px solid var(--border);background:var(--surface);color:var(--brown-700);font-family:inherit;font-size:.92rem;font-weight:600;padding:8px 18px;border-radius:999px;cursor:pointer;transition:all .15s ease;white-space:nowrap}.tab:hover{border-color:var(--accent)}.tab.active{background:var(--brown-900);border-color:var(--brown-900);color:#fff}.content{padding-top:20px}.category{margin-bottom:28px}.category-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;padding:0 4px}.category-header h2{font-size:1.15rem;font-weight:800;color:var(--brown-900);position:relative;padding-inline-start:14px}.category-header h2:before{content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:5px;height:1.1em;border-radius:3px;background:var(--accent)}.count{font-size:.78rem;color:var(--muted);font-weight:600}.items{list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.item{display:flex;align-items:center;gap:10px;padding:14px 18px}.item+.item{border-top:1px solid var(--border)}.item-name{font-weight:600;font-size:1rem}.dots{flex:1;border-bottom:2px dotted var(--border);transform:translateY(4px);min-width:20px}.item-price{font-weight:800;color:var(--accent-dark);font-size:1.02rem;white-space:nowrap}.item-price small{font-size:.7rem;font-weight:600;color:var(--muted)}.state{text-align:center;padding:70px 20px;color:var(--brown-500);font-weight:600}.spinner{width:38px;height:38px;margin:0 auto 16px;border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.retry{margin-top:16px;border:none;background:var(--brown-900);color:#fff;font-family:inherit;font-weight:700;font-size:.95rem;padding:10px 28px;border-radius:999px;cursor:pointer}.retry:hover{background:var(--brown-700)}.footer{text-align:center;margin-top:30px;color:var(--muted);font-size:.8rem}@media(max-width:480px){.brand h1{font-size:1.15rem}.item{padding:12px 14px}}