:root{--bg:#0f1724;--bg-elev:#071126;--card:#0b1220;--muted:#94a3b8;--glass:#ffffff08;--accent:#06b6d4;--accent-2:#7c3aed;--accent-3:#06d6a0;--text:#e6eef6;--muted-2:#e6eef67a;--danger:#ef4444;--success:#10b981;--surface-1:#ffffff05;--surface-2:#ffffff03;--glass-2:#ffffff0f;--shadow-lg:0 20px 50px #020617b3;--shadow-sm:0 6px 18px #02061773;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--container-max:1280px;--ui-base:15px;--fw-regular:400;--fw-medium:500;--fw-bold:700;--dur-fast:.16s;--dur-med:.32s;--ease:cubic-bezier(.2,.9,.3,1)}:root[data-theme=light]{--bg:#f9fafb;--bg-elev:#fff;--card:#fff;--text:#111827;--muted:#4b5563;--muted-2:#4b556399;--surface-1:#0000000d;--surface-2:#00000008;--glass:#ffffff26;--glass-2:#ffffff2e;--accent:#2563eb;--accent-2:#7c3aed;--accent-3:#10b981;--danger:#dc2626;--success:#10b981;--shadow-lg:0 20px 40px #0000001a;--shadow-sm:0 4px 12px #0000000f;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--container-max:1280px;--ui-base:16px;--fw-regular:400;--fw-medium:500;--fw-bold:700;--dur-fast:.18s;--dur-med:.35s;--ease:cubic-bezier(.22,1,.36,1)}.card{background:var(--card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);color:var(--text);transition:transform var(--dur-med)var(--ease),box-shadow var(--dur-med)var(--ease),border-color var(--dur-med);border:1.5px solid #e5e7eb;padding:16px}.card:hover{border-color:var(--accent);transform:translateY(-8px)rotate(-.1deg);box-shadow:0 24px 48px #2563eb26}.title{font-size:16px;font-weight:var(--fw-medium);color:var(--text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.desc{color:var(--muted);overflow-wrap:break-word;height:auto;font-size:14px;line-height:1.5}.input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 6px var(--accent);outline:none}.header{background:var(--bg-elev);box-shadow:var(--shadow-sm);border-radius:var(--radius-lg);transition:all var(--dur-med)var(--ease);border:1.5px solid #e5e7eb;padding:16px 24px}.btn{border-radius:var(--radius-md);cursor:pointer;font-weight:var(--fw-medium);background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;transition:transform var(--dur-fast),box-shadow var(--dur-fast),filter var(--dur-fast);border:none;align-items:center;gap:10px;padding:10px 18px;display:inline-flex;box-shadow:0 10px 30px #2563eb66}.btn:hover{filter:brightness(1.1);transform:translateY(-4px);box-shadow:0 14px 40px #2563eb80}.btn:active{transform:translateY(-1px)scale(.98);box-shadow:0 8px 20px #2563eb4d}.search{color:var(--text);min-width:280px;transition:box-shadow var(--dur-fast),transform var(--dur-fast);background:#f9fafb;border:1.5px solid #d1d5db;border-radius:12px;padding:8px 12px}.search:focus-within{box-shadow:0 0 10px var(--accent);transform:translateY(-2px)}.search input{color:var(--text);font-size:var(--ui-base);background:0 0;border:none;outline:none}@media (max-width:820px){.search{display:none}.search-toggle{display:inline-flex}.nav{gap:8px}}*{box-sizing:border-box}html,body,#__next{height:100%}body{background:linear-gradient(180deg,var(--bg-elev),var(--bg));color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background var(--dur-med)var(--ease),color var(--dur-med)var(--ease);margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;line-height:1.45}.container{max-width:var(--container-max);width:100%;margin:36px auto;padding:0 20px}.header{z-index:60;background:linear-gradient(180deg,var(--glass),var(--surface-2));-webkit-backdrop-filter:blur(8px)saturate(120%);backdrop-filter:blur(8px)saturate(120%);transition:padding var(--dur-med)var(--ease),transform var(--dur-med)var(--ease),box-shadow var(--dur-med);box-shadow:var(--shadow-sm);border:1px solid #ffffff0a;border-radius:14px;align-items:center;gap:14px;padding:16px 18px;display:flex;position:sticky;top:12px}.header.shrink{box-shadow:var(--shadow-lg);padding:10px 14px;transform:translateY(-2px)}.brand{align-items:center;gap:12px;min-width:0;display:flex}.logo{width:56px;height:56px;font-weight:var(--fw-bold);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));transition:transform var(--dur-fast)var(--ease);border-radius:14px;justify-content:center;align-items:center;font-size:18px;display:flex;box-shadow:0 12px 30px #7c3aed1f}.logo:hover{transform:translateY(-4px)rotate(-2deg)}.title{flex-direction:column;gap:2px;min-width:0;display:flex}.title .name{font-size:clamp(16px,1.6vw,20px);font-weight:var(--fw-bold);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.title .tag{color:var(--muted);font-size:13px}.nav{align-items:center;gap:12px;margin-left:auto;display:flex}.search{min-width:260px;transition:transform var(--dur-fast),box-shadow var(--dur-fast);background:linear-gradient(90deg,#ffffff05,#ffffff03);border:1px solid #ffffff08;border-radius:12px;align-items:center;gap:8px;padding:8px 10px;display:flex}.search:focus-within{transform:translateY(-2px);box-shadow:0 8px 30px #06b6d412}.search input{color:inherit;font-size:var(--ui-base);background:0 0;border:0;outline:0;flex:1}.search-toggle{display:none}.icon-btn{cursor:pointer;font-weight:var(--fw-medium);transition:transform var(--dur-fast)var(--ease),box-shadow var(--dur-fast)var(--ease);background:0 0;border:1px solid #ffffff0f;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:9px 12px;display:inline-flex}.icon-btn:hover{box-shadow:var(--shadow-sm);transform:translateY(-4px)}.icon-btn:active{transform:translateY(-1px)scale(.995)}.btn{cursor:pointer;font-weight:var(--fw-medium);background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#071126;transition:transform var(--dur-fast),box-shadow var(--dur-fast),filter var(--dur-fast);border:0;border-radius:12px;align-items:center;gap:10px;padding:10px 16px;display:inline-flex;box-shadow:0 14px 40px #030a1b99}.btn:hover{filter:brightness(1.02);transform:translateY(-6px)scale(1.01)}.btn:active{transform:translateY(-2px)scale(.997)}.btn.ghost{color:inherit;box-shadow:none;background:0 0;border:1px solid #ffffff0f}.btn:focus-visible{outline:none;box-shadow:0 8px 28px #06b6d41f}.grid{transition:all var(--dur-med)var(--ease);grid-template-columns:repeat(4,1fr);align-items:start;gap:20px;margin-top:22px;display:grid}@media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}.search{display:none}.search .search-toggle{display:inline-flex}}@media (max-width:520px){.grid{grid-template-columns:repeat(1,1fr);gap:16px}.logo{width:48px;height:48px}}.card{background:linear-gradient(180deg,var(--surface-1),var(--surface-2));border-radius:var(--radius-md);transition:transform var(--dur-med)var(--ease),box-shadow var(--dur-med)var(--ease);will-change:transform;border:1px solid #ffffff08;flex-direction:column;gap:10px;padding:14px;display:flex;overflow:hidden}.card:hover{box-shadow:var(--shadow-lg);border-color:#ffffff0f;transform:translateY(-12px)rotate(-.2deg)}.media{aspect-ratio:4/3;background:linear-gradient(90deg,#ffffff03,#ffffff05);border-radius:10px;width:100%;position:relative;overflow:hidden}.media img{object-fit:cover;width:100%;height:100%;transition:transform var(--dur-med)var(--ease);display:block}.card:hover .media img{transform:scale(1.06)translateY(-3px)}.body{flex-direction:column;flex:1;gap:8px;display:flex}.title{font-size:15px;font-weight:var(--fw-medium);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.desc{color:var(--muted);text-overflow:ellipsis;height:38px;font-size:13px;line-height:1.35;overflow:hidden}.meta{justify-content:space-between;align-items:center;gap:12px;margin-top:auto;display:flex}.price{font-weight:var(--fw-bold);color:var(--text);font-size:16px}.actions{align-items:center;gap:8px;display:flex}.add-cart{position:relative;overflow:visible}.add-cart .cart-icon{transition:transform var(--dur-fast)var(--ease)}.add-cart.animate .cart-icon{transform:translateY(-6px)scale(1.06)rotate(-8deg)}.badge{color:var(--muted);background:linear-gradient(90deg,#ffffff05,#ffffff03);border:1px solid #ffffff08;border-radius:999px;padding:6px 10px;font-size:13px}.card.featured{border-radius:18px;grid-area:span 1/span 2;padding:18px}@media (max-width:1100px){.card.featured{grid-column:span 1}}.card.compact{align-items:center;gap:12px;padding:12px;display:flex}.card.compact .media{aspect-ratio:auto;border-radius:10px;flex:0 0 96px;width:96px;height:96px}.skeleton{background:linear-gradient(90deg,#ffffff05 0%,#ffffff09 50%,#ffffff05 100%) 0 0/200% 100%;border-radius:8px;animation:1.6s linear infinite shimmer}@keyframes shimmer{0%{background-position:-150% 0}to{background-position:150% 0}}.form{background:linear-gradient(#ffffff01,#ffffff01);border:1px solid #ffffff08;border-radius:14px;flex-direction:column;gap:12px;padding:18px;display:flex}.input,textarea,select{color:inherit;font-size:var(--ui-base);transition:box-shadow var(--dur-fast),border-color var(--dur-fast);background:0 0;border:1px solid #ffffff0a;border-radius:10px;padding:12px 14px}.input::placeholder,textarea::placeholder{color:#e6eef647;font-style:italic}.footer{text-align:center;color:var(--muted);background:linear-gradient(#ffffff03,#ffffff01);border:1px solid #ffffff05;border-radius:12px;margin:48px 0;padding:24px}.cart{display:inline-flex;position:relative}.cart .count{background:var(--danger);color:#fff;border-radius:999px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 6px;font-size:12px;display:inline-flex;position:absolute;top:-8px;right:-8px;box-shadow:0 6px 18px #00000073}@media (max-width:820px){.header{gap:8px;padding:12px}.search{display:none}.search-toggle{display:inline-flex}.nav{gap:8px}}:focus{outline:none}:focus-visible{border-radius:8px;box-shadow:0 0 0 6px #06b6d41a}.row{align-items:center;gap:12px;display:flex}.col{flex-direction:column;gap:8px;display:flex}.center{justify-content:center;align-items:center;display:flex}.small{color:var(--muted);font-size:13px}.modal{z-index:120;opacity:0;pointer-events:none;transition:opacity var(--dur-med)var(--ease);background:#02061799;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal.open{opacity:1;pointer-events:auto}.modal .dialog{background:var(--card);width:clamp(320px,85%,920px);box-shadow:var(--shadow-lg);border:1px solid #ffffff0a;border-radius:16px;padding:18px}.card .title:hover{cursor:pointer;color:var(--accent-3);transition:color var(--dur-fast)var(--ease);text-decoration:underline}