@charset "UTF-8";:root{--bg: #0c0d0f;--panel: #111216;--muted: #a1a1aa;--text: #f4f4f5;--ring: rgba(255, 255, 255, .08);--brand: #ea580c;--brand-2: #fb923c;--accent: #10b981;--card: #0b0c10;--shadow: rgba(0, 0, 0, .5);--radius: 16px;--radius-sm: 12px;--radius-lg: 20px;--container: 1120px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Inter,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;justify-content:space-between}.content{flex-grow:1}.container{max-width:var(--container);margin:0 auto;padding:0 16px}.header{position:sticky;top:0;z-index:50;background:#00000073;-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--ring);flex-shrink:0}.header__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}.brand{display:flex;align-items:center;gap:10px}.brand__logo{width:32px;height:32px;border-radius:10px;background:var(--brand);display:grid;place-items:center;box-shadow:0 6px 24px var(--shadow);border:1px solid var(--ring)}.brand__mark{width:12px;height:12px;background:#000;transform:rotate(14deg)}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:14px;padding:10px 14px;font-weight:700;color:#fff;background:#1f2937;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 20px var(--shadow);transition:transform .06s ease,opacity .2s ease,background .2s}.btn:active{transform:scale(.98)}.btn--brand{background:var(--brand)}.btn--brand:hover{background:#f97316}.btn--accent{background:var(--accent)}.btn--accent:hover{filter:saturate(1.1)}.hero{margin:18px 0;border-radius:var(--radius-lg);padding:20px;background:linear-gradient(135deg,#191a1d 40%,#0f0f12);position:relative;overflow:hidden;border:1px solid var(--ring)}.hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><linearGradient id="g" x1="0" x2="1" y1="0" y2="1"><stop offset="0" stop-color="white" stop-opacity=".05"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs><rect width="100" height="100" fill="url(%23g)"/></svg>') center/cover no-repeat;opacity:.2}.hero__row{position:relative;display:flex;gap:16px;align-items:center}.hero__logo{width:64px;height:64px;border-radius:14px;background:var(--brand);border:1px solid var(--ring)}.hero__title{font-size:clamp(22px,4vw,34px);font-weight:900;letter-spacing:.2px}.hero__title span{color:var(--brand)}.hero__sale{color:var(--accent);font-weight:800;font-size:clamp(16px,2.5vw,22px);margin-top:6px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.tab{border:1px solid var(--ring);background:#0f1115;padding:8px 12px;border-radius:12px;font-weight:700;color:#e5e7eb;cursor:pointer}.tab[aria-selected=true]{outline:2px solid rgba(255,255,255,.14)}.grid{display:grid;gap:14px}@media (min-width: 640px){.grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 960px){.grid{grid-template-columns:repeat(4,1fr)}}.card{background:#111216bf;border:1px solid var(--ring);border-radius:18px;padding:14px;box-shadow:0 10px 30px var(--shadow)}.item__image{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1/1;background:radial-gradient(80% 60% at 50% 30%,#1f2937,transparent),linear-gradient(135deg,#0f131a,#0a0c11)}.item__image:after{content:attr(data-alt);position:absolute;inset:auto 8px 8px auto;color:#a1a1aa;font-size:11px}.item__img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .3s ease}.item__image:hover .item__img{transform:scale(1.05)}.badge{position:absolute;top:8px;right:8px;font-size:11px;font-weight:800;padding:4px 6px;border-radius:8px;border:1px solid currentColor}.badge--sale{color:#fb923c;background:#fb923c26}.badge--sale{position:absolute;top:10px;left:10px;z-index:2;max-width:38px}.quantity{position:absolute;bottom:10px;right:10px;z-index:2}.badge--qty{color:#fde68a;background:#fde68a26}.item__title{min-height:3rem;color:#d4d4d8;line-height:1.25;font-size:14px}.item__row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}.price{font-weight:900;font-size:18px}.price__cur{opacity:.7;font-weight:700;font-size:13px;margin-left:4px}.benefits{display:grid;gap:14px;margin-top:14px}@media (min-width: 640px){.benefits{grid-template-columns:repeat(2,1fr)}}.benefit{background:#111216bf;border:1px solid var(--ring);border-radius:18px;padding:14px;display:flex;gap:12px}.ico{width:22px;height:22px;border-radius:8px;background:#0f1115;border:1px solid var(--ring);flex:0 0 auto;display:grid;place-items:center;font-size:12px}.muted{color:var(--muted)}.footer{margin-top:24px;border-top:1px solid var(--ring);background:#00000073;flex-shrink:0}.footer__row{display:flex;gap:16px;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:16px 0}.links{display:flex;gap:16px;color:#e5e7eb}.links a{color:inherit;text-decoration:none}.counter{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#0f1115;border:1px solid var(--ring)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.profile{height:40px;display:flex;flex-direction:column;justify-content:center;background:#4b556355;border-radius:5px;position:relative}.profile-menu{display:none;flex-direction:column;position:absolute;right:0;top:40px;background:#4b5563}.profile-item{height:40px;min-width:100px;cursor:pointer;display:flex;justify-content:center}.profile-item a{text-decoration:none;color:#9f9f9f;height:100%;width:100%;padding:0 5px;display:flex;align-items:center;justify-content:left}.profile-item a:hover{color:#fff}.profile-item a.logout{justify-content:center;background:#ef4444;border-radius:5px;color:#fff;width:90%;height:90%}.profile:hover{background:#4b5563;border-radius:5px 5px 0 0}.profile:hover .profile-menu{display:flex}.profile-name{padding:5px 10px;cursor:pointer}
