/* Магазин клуба (shop.go, web/magazin.html). Цвета и отступы — из style.css. */
.shop-page { background: var(--bg); }
.shop-page [hidden] { display: none !important; }
.shop-cart-btn { margin-left: auto; }
.shop-page .site-header .btn.shop-cart-btn { margin-left: auto; }
.shop-cart-icon { flex: none; margin-right: var(--s2); vertical-align: -4px; }
.shop-cart-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: var(--s1);
  border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: .8125rem; font-weight: 700;
}
.shop-main { padding-block: var(--s6) var(--s7); }
.shop-main > section { padding: 0; }
.shop-main > .shop-terms { margin-top: var(--s7); padding-top: var(--s5); }
.shop-lede { color: var(--muted); max-width: 60ch; }
.shop-note:empty { display: none; }
.shop-note { color: var(--warn); background: var(--warn-soft); padding: var(--s3) var(--s4); border-radius: var(--r-sm); max-width: none; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s5); margin-top: var(--s5); }
.shop-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.shop-photo { aspect-ratio: 4 / 5; background: #fff; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.shop-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shop-card-body { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); flex: 1; }
.shop-card h2 { font-size: 1.125rem; margin: 0; letter-spacing: -.01em; }
.shop-desc { color: var(--muted); font-size: .9375rem; margin: 0; }
.shop-price { font-size: 1.375rem; font-weight: 700; margin: auto 0 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-card .field { margin: 0; }
.shop-add { width: 100%; min-height: 44px; }

.shop-thumbs { display: flex; flex-wrap: wrap; gap: var(--s2); }
.shop-thumb {
  width: 52px; height: 64px; padding: 2px; background: #fff; cursor: pointer;
  border: 2px solid var(--line); border-radius: var(--r-sm);
}
.shop-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shop-thumb[aria-pressed="true"] { border-color: var(--accent); }

.shop-lines { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s3); }
.shop-lines li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); max-width: none; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.shop-line-name { flex: 1 1 180px; min-width: 0; font-weight: 600; }
.shop-line-name small { display: block; font-weight: 400; color: var(--muted); font-size: .875rem; }
.shop-line-sum { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shop-qty { display: inline-flex; align-items: center; gap: var(--s1); }
.shop-qty .btn { min-width: 44px; min-height: 44px; padding: 0; }
.shop-qty output { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.shop-total { font-size: 1.125rem; margin: 0 0 var(--s4); max-width: none; }
.shop-total b { font-size: 1.375rem; white-space: nowrap; }

.shop-cart { width: min(100% - 2 * var(--s4), 560px); }
.shop-cart-body { padding: var(--s4) var(--s5) var(--s5); overflow: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.shop-submit { width: 100%; min-height: 48px; }
#cart-close { min-width: 44px; min-height: 44px; font-size: 1.25rem; }

.shop-order-status { margin-bottom: var(--s4); }
.shop-order-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (max-width: 800px) { .shop-order-grid { grid-template-columns: minmax(0, 1fr); } }
.shop-pay { display: grid; gap: var(--s4); }
.shop-pay h2, .shop-order-items h2 { font-size: 1.25rem; margin: 0 0 var(--s3); }
.shop-pay h2 { margin: 0; }
.shop-pay .pay-steps { margin: 0; }
.shop-pay #order-paid { min-height: 48px; }
.shop-pay #order-paid-note:empty { display: none; }
.shop-pay .requisites .copy { min-height: 34px; }

.shop-terms { border-top: 1px solid var(--line); }
.shop-terms h2 { font-size: 1.25rem; }
.shop-terms ul { padding-left: 1.25em; margin: 0; display: grid; gap: var(--s2); font-size: .9375rem; }