html{height:auto; overflow:auto; scrollbar-width:thin}
html.modal-open{overflow:hidden}
html::-webkit-scrollbar{display:block; width:8px}
html::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:8px}
html::-webkit-scrollbar-track{background:transparent}
body{
  height:auto;
  min-height:100vh;
  min-height:100dvh;
  display:block;
  overflow:visible;
  padding:24px 16px 40px;
}

.shop{
  width:1040px;
  max-width:100%;
  margin:0 auto;
}

.shop-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  padding:14px 16px;
  margin-bottom:16px;
}
.shop-head-main{min-width:0}
.shop-title{
  margin:0;
  font-size:19px; font-weight:800; color:var(--text-strong);
  line-height:1.1;
  user-select:none;-webkit-user-select:none;-moz-user-select:none;
}
.shop-sub{
  margin:4px 0 0;
  font-size:12.5px; color:var(--text-muted);
}
.shop-head-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

.shop-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#5865f2; color:#fff;
  font:inherit; font-size:12.5px; font-weight:700;
  text-decoration:none; cursor:pointer;
  transition:.16s;
}
.shop-btn:hover{filter:brightness(1.08)}
.shop-btn:active{transform:translateY(1px)}
.shop-btn:focus-visible{outline:2px solid var(--link); outline-offset:2px}
.shop-btn svg{width:14px; height:14px; fill:currentColor}
.shop-btn--ghost{background:var(--bg-pill); color:var(--text-muted)}
.shop-btn--ghost:hover{background:var(--bg-muted); color:var(--text)}
.shop-btn--full{width:100%; justify-content:center; height:38px; font-size:13.5px}
.shop-btn:disabled{opacity:.55; cursor:default; filter:none}

.shop-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  align-items:start;
}
.shop-grid:empty{display:none}

.product{
  display:flex; flex-direction:column;
  width:100%; padding:0;
  font:inherit; color:inherit; text-align:left;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .16s, border-color .16s, box-shadow .16s;
}
.product:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 16px 34px rgba(0,0,0,.45);
}
.product:focus-visible{outline:2px solid var(--link); outline-offset:2px}

.product-media{
  position:relative;
  aspect-ratio:1 / 1;
  background:#1e1f22;
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.product-media img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .25s;
}
.product:hover .product-media img{transform:scale(1.035)}
.product-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.38));
  pointer-events:none;
}

.product-flag{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(17,18,20,.82);
  border:1px solid var(--border);
  color:var(--text-muted);
  font-size:11px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap;
  user-select:none;-webkit-user-select:none;-moz-user-select:none;
}

.product-body{
  flex:1;
  display:flex; flex-direction:column; gap:6px;
  padding:12px;
}
.product-title{
  margin:0;
  font-size:14px; font-weight:800; line-height:1.25;
  color:var(--text-strong);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-desc{
  margin:0;
  font-size:12.5px; line-height:1.4;
  color:var(--text-muted);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-foot{
  margin-top:auto; padding-top:10px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.product-price{
  display:inline-flex; align-items:center;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(35,165,89,.14);
  border:1px solid rgba(35,165,89,.28);
  color:#3ba55d;
  font-size:13px; font-weight:800; white-space:nowrap;
}
.product-price--muted{
  background:var(--bg-pill);
  border-color:var(--border);
  color:var(--text-muted);
}
.product-cta{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:700; color:var(--text-muted);
  white-space:nowrap;
}
.product-cta svg{width:12px; height:12px; fill:currentColor; transition:transform .16s}
.product:hover .product-cta{color:var(--link)}
.product:hover .product-cta svg{transform:translateX(2px)}

.product.is-disabled{cursor:not-allowed}
.product.is-disabled:hover{
  transform:none;
  border-color:var(--border);
  box-shadow:none;
}
.product.is-disabled .product-media img{
  filter:grayscale(1);
  opacity:.5;
}
.product.is-disabled:hover .product-media img{transform:none}
.product.is-disabled .product-title,
.product.is-disabled .product-desc,
.product.is-disabled .product-cta{color:var(--text-muted)}
.product.is-disabled:hover .product-cta{color:var(--text-muted)}
.product.is-disabled:hover .product-cta svg{transform:none}

.product.is-skeleton{cursor:default; pointer-events:none}
.product.is-skeleton:hover{transform:none; box-shadow:none; border-color:var(--border)}
.sk{
  background:linear-gradient(90deg, #2b2d31 25%, #35373c 37%, #2b2d31 63%);
  background-size:300% 100%;
  animation:sk-shimmer 1.3s ease-in-out infinite;
  border-radius:6px;
}
.product.is-skeleton .product-media{border-radius:0}
.sk-line{height:11px}
.sk-line--title{height:14px; width:80%}
.sk-line--short{width:55%}
.sk-pill{height:22px; width:78px; border-radius:999px}
@keyframes sk-shimmer{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}

.modal--product{width:480px}
.modal-foot--product{
  display:flex; align-items:center; gap:8px;
  border-top:1px solid var(--border);
}
.modal-foot--product .shop-btn{flex:1}

.product-view{display:flex; flex-direction:column; gap:10px}
.product-view-media{
  position:relative;
  border-radius:12px; overflow:hidden;
  background:#1e1f22;
  border:1px solid var(--border);
}
.product-view-media img{
  width:100%;
  height:min(46dvh, 320px);
  height:min(46vh, 320px);
  object-fit:cover; display:block;
}
.product-view-meta{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.product-view-label{
  font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-muted);
  user-select:none;-webkit-user-select:none;-moz-user-select:none;
}
.product-view-price{
  font-size:16px; font-weight:800; color:var(--text-strong);
}
.product-view-desc{
  margin:0;
  font-size:13px; line-height:1.5;
  color:var(--text);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.product-view-desc--empty{color:var(--text-muted); font-style:italic}
.product-view-url{
  font-size:12px; color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

@media (max-width:880px){
  .shop-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:520px){
  body{padding:16px 12px 32px}
  .shop-grid{grid-template-columns:minmax(0, 1fr)}
  .shop-head{align-items:flex-start; flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .product, .product-media img, .sk{transition:none; animation:none}
}