:root { --bg:#111211; --paper:#eeeee7; --ink:#111211; --muted:#a3a69d; --line:#2a2c29; --lime:#d6ff28; --card:#1b1d1a; font-family: Inter, Arial, sans-serif; color:var(--paper); background:var(--bg); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); min-width:320px; }
button, input { font:inherit; }
button { cursor:pointer; }
.app-shell { max-width:720px; margin:0 auto; padding:22px 16px 44px; }
.hero { display:flex; justify-content:space-between; align-items:flex-start; padding:6px 4px 16px; }
.catalog-note { border-left:2px solid var(--lime); color:var(--muted); font-size:12px; line-height:1.4; margin:0 4px 18px; padding-left:9px; }
.eyebrow { color:var(--lime); font-size:10px; font-weight:800; letter-spacing:.12em; margin:0 0 8px; }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(42px,12vw,78px); letter-spacing:-.09em; line-height:.79; margin:0; text-transform:uppercase; } h1 em { color:var(--lime); font-style:normal; }
.stock-count { background:var(--lime); border-radius:99px; color:var(--ink); font-size:11px; font-weight:800; padding:7px 9px; white-space:nowrap; }
.controls { position:sticky; top:0; z-index:2; background:var(--bg); padding:8px 0 14px; }
.search { background:#222420; display:flex; align-items:center; gap:10px; padding:0 12px; border:1px solid var(--line); border-radius:12px; }
.search span { color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; }
.search input { background:transparent; border:0; color:var(--paper); min-width:0; outline:0; padding:13px 0; width:100%; }
.chips { display:flex; gap:8px; overflow:auto; padding:12px 0 2px; scrollbar-width:none; }.chips::-webkit-scrollbar {display:none;}
.chip,.filter-button { background:#1c1e1b; border:1px solid var(--line); border-radius:99px; color:var(--paper); font-size:12px; padding:9px 12px; white-space:nowrap; }.chip--selected { background:var(--lime); border-color:var(--lime); color:var(--ink); font-weight:800; }.filter-button { width:100%; text-align:left; margin-top:8px; }.filter-button span { color:var(--lime); }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.product-card { min-width:0; }.product-card__open { border:0; padding:0; background:transparent; color:inherit; display:block; text-align:left; width:100%; }.product-image { aspect-ratio:.84; background:#20231f; border-radius:13px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; padding:12px; position:relative; text-transform:uppercase; }.product-image:after { background:linear-gradient(180deg,rgba(0,0,0,.44),transparent 48%,rgba(0,0,0,.56)); content:""; inset:0; position:absolute; }.product-image__photo { height:100%; inset:0; object-fit:cover; position:absolute; width:100%; }.product-image__brand,.product-image__type { color:#fff; font-size:clamp(10px,2.3vw,14px); font-weight:900; letter-spacing:-.06em; line-height:.9; max-width:75%; position:relative; text-shadow:0 1px 7px #000; z-index:1; }.product-image__type { align-self:flex-end; text-align:right; font-size:clamp(19px,6vw,38px); max-width:100%; }
.product-card__details { padding:9px 2px 17px; }.product-card__brand { color:var(--muted); font-size:10px; margin:0 0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.product-card__title { font-size:15px; line-height:1; margin:0 0 10px; }.product-card__meta { display:flex; align-items:center; justify-content:space-between; font-size:12px; }.product-card__size { border:1px solid var(--line); border-radius:5px; color:var(--muted); padding:3px 5px; }.product-card__price { color:var(--lime); font-weight:800; }.empty-state { padding:52px 0; text-align:center; }.empty-state p { color:var(--muted); }.empty-state button,.button-secondary { background:transparent; border:1px solid var(--paper); border-radius:9px; color:var(--paper); padding:10px 14px; }
dialog { border:0; color:var(--paper); max-width:720px; padding:0; width:100%; } dialog::backdrop { background:rgba(0,0,0,.68); }.product-dialog { background:#151714; bottom:0; margin:auto auto 0; max-height:92vh; overflow:auto; border-radius:22px 22px 0 0; }.product-dialog[open] { animation:rise .18s ease-out; }.close-button { background:#2b2e29; border:0; border-radius:50%; color:var(--paper); font-size:27px; height:38px; line-height:1; position:absolute; right:14px; top:14px; width:38px; z-index:2; }.detail-image { background:#20231f; border-radius:22px 22px 0 0; display:block; height:min(64vh,570px); object-fit:contain; width:100%; }.detail-content { padding:22px 18px 28px; }.detail-content h2 { font-size:33px; letter-spacing:-.075em; line-height:.89; margin-bottom:17px; text-transform:uppercase; }.detail-price { color:var(--lime); font-size:24px; font-weight:800; }.detail-content dl { border-top:1px solid var(--line); margin:22px 0; }.detail-content dl div { border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; padding:12px 0; }.detail-content dt { color:var(--muted); }.detail-content dd { margin:0; text-align:right; }.detail-hint { color:var(--muted); font-size:12px; line-height:1.4; }.button-primary { background:var(--lime); border:0; border-radius:10px; color:var(--ink); font-weight:900; padding:14px 16px; }.manager-button { margin-top:10px; width:100%; }.post-button { margin-top:10px; width:100%; }
.filters-dialog { background:#191b18; border-radius:18px; max-width:500px; padding:20px; }.modal-heading { align-items:flex-start; display:flex; justify-content:space-between; }.modal-heading .close-button { position:static; }.filters-dialog fieldset { border:0; border-top:1px solid var(--line); margin:20px 0 0; padding:18px 0 0; }.filters-dialog legend { font-weight:800; padding:0; }.price-row { display:flex; gap:10px; margin-top:14px; }.price-row label { color:var(--muted); display:grid; font-size:11px; gap:5px; width:50%; }.price-row input { background:#242623; border:1px solid var(--line); border-radius:8px; color:var(--paper); outline:0; padding:10px; width:100%; }.modal-actions { display:flex; gap:10px; justify-content:space-between; margin-top:24px; }.modal-actions .button-primary { flex:1; }.button-secondary { border-color:var(--line); }
@keyframes rise { from { transform:translateY(30px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@media (min-width:560px) { .app-shell{padding-left:24px;padding-right:24px}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.hero{padding-bottom:34px}.detail-image{min-height:390px} }