:root{
  --bg:#080b09;
  --panel:#101711;
  --line:#26332a;
  --text:#eef5ef;
  --muted:#98a79b;
  --green:#71d58b;
  --gold:#d6c68e;
  --card-radius:18px;
  --columns:3;
  --catalog-bg-image:none;
}
*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0;
  color:var(--text);
  font:15px/1.6 system-ui,sans-serif;
  min-height:100vh;
  background:var(--bg);
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:var(--catalog-bg-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 80% 0,rgba(24,58,35,.58),transparent 35%),
    linear-gradient(rgba(8,11,9,.62),rgba(8,11,9,.76));
  pointer-events:none;
}
header{
  height:72px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 7vw;
  background:#080b09e8;
  backdrop-filter:blur(12px)
}
.header-actions{display:flex;align-items:center;gap:12px}
.member-name{color:var(--muted);font-size:12px}
.brand{letter-spacing:.16em;font-size:12px;display:flex;gap:10px;align-items:center}
.brand b{color:var(--green)}
.mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid #42684c;border-radius:9px;color:var(--green);background:#0e1811;font-weight:800}
main{max-width:1180px;margin:auto;padding:80px 6vw}
.login{
  max-width:650px;
  margin:90px auto;
  text-align:center;
  padding:24px;
  border-radius:20px;
  background:#080b09bb;
  backdrop-filter:blur(10px)
}
.login h1{font-size:clamp(42px,7vw,72px);line-height:.98;letter-spacing:-.05em}
.muted,.login p{color:var(--muted)}
input{width:100%;padding:15px;border:1px solid var(--line);border-radius:11px;background:#0d130f;color:var(--text);margin:10px 0}
button{padding:12px 16px;border:0;border-radius:10px;background:var(--green);font-weight:800;cursor:pointer}
.ghost{background:none;border:1px solid var(--line);color:var(--text)}
.secondary-action{display:block;margin:10px auto 0}
small{color:var(--green);letter-spacing:.18em;font-weight:800}
.head{display:flex;justify-content:space-between;align-items:end;gap:25px}
.head input{width:250px}
.category-filters{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 6px}
.category-filter{background:#111812dd;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:8px 12px;cursor:pointer}
.category-filter.active{background:#1b2a20;color:var(--green);border-color:var(--green)}
.empty-state{margin-top:24px;padding:22px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);text-align:center;background:#0d120edd}
.grid{display:grid;grid-template-columns:repeat(var(--columns),1fr);gap:18px;margin-top:22px}
.product{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:var(--card-radius);
  overflow:hidden;
  cursor:pointer;
  transition:.16s;
}
.product:hover,.product:focus-visible{transform:translateY(-3px);border-color:var(--green);box-shadow:0 16px 32px #0005;outline:none}
.art{width:100%;aspect-ratio:1/1;background:radial-gradient(circle,#315d3d,transparent 42%),#0b100c;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:16px}
.art img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.jar{height:95px;width:78px;border:1px solid #5a7a60;border-radius:16px 16px 22px 22px;background:#18271b}
.info{padding:18px}
.tag{font-size:10px;color:#a8c9ae;border:1px solid #304936;border-radius:20px;padding:3px 7px;display:inline-block}
.price{color:var(--gold);font-weight:800}
.available{color:var(--green)}
.unavailable{color:#d18e8e}
#accessMsg,#memberMsg{color:#e58d8d;margin-top:12px}
.product-dialog{width:min(980px,96vw);height:min(680px,90vh);padding:0;border:1px solid var(--line);border-radius:20px;background:#0d130f;color:var(--text);overflow:hidden}
.product-dialog::backdrop{background:#000b;backdrop-filter:blur(3px)}
.product-dialog[open]{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)}
.dialog-close{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:999px;border:1px solid #ffffff22;background:#090d0ae8;color:var(--text);font-size:24px;cursor:pointer;z-index:3}
.dialog-art{height:100%;min-height:0;background:#090d0a;display:grid;place-items:center;overflow:hidden;padding:24px}
.dialog-art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.dialog-content{min-height:0;overflow-y:auto;padding:36px 30px 30px;border-left:1px solid var(--line)}
.dialog-content h2{font-size:clamp(30px,4vw,42px);line-height:1.05;margin:14px 0 12px}
.dialog-content .muted{font-size:16px;line-height:1.7;white-space:pre-wrap}
.dialog-price{font-size:28px;color:var(--gold);font-weight:800;margin-top:24px}
.availability{font-weight:800;margin-top:10px;font-size:16px}
.display-note{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
@media(max-width:850px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .head{flex-direction:column;align-items:start}
  .head input{width:100%}
  .product-dialog{width:min(720px,96vw);height:min(88vh,760px)}
  .product-dialog[open]{display:flex;flex-direction:column}
  .dialog-art{flex:0 0 42%;min-height:260px;padding:16px}
  .dialog-content{flex:1 1 auto;overflow-y:auto;border-left:0;border-top:1px solid var(--line);padding:24px}
}
@media(max-width:540px){
  .grid{grid-template-columns:1fr}
  .product-dialog{width:96vw;height:90vh}
  .dialog-art{flex-basis:38%;min-height:220px;padding:12px}
  .dialog-content{padding:20px}
}