/* SHOP.exe — Zivve Merch window (dark terminal-store, Win98 chrome accents) */

/* ── Address bar (white, like a browser bar) ── */
#shop-address-bar {
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  margin: 4px 6px;
  padding: 4px 10px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Scrolling body ── */
#shop-body {
  background: #000;
  height: 440px;
  overflow-y: auto;
  padding: 12px 14px;
}

.shop-view-label {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 4px;
  color: #333;
  margin-bottom: 12px;
}

.shop-empty {
  color: #555;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-align: center;
  padding: 60px 0 40px;
}

/* ── Product grid ── */
.shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.shop-card {
  background: #0a0a0a;
  border: 1px solid #222;
  padding: 12px;
}

.shop-card-img {
  position: relative;
  /* Light tile: product art is transparent-background PNGs of black garments,
     which are invisible on a dark panel. */
  background: #c0c0c0;
  border: 1px solid #222;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.shop-card-img img {
  width: 100%;
  height: 100%;
  /* contain, not cover: the mockups are square and the tile is wide, so cover
     crops the garment. */
  object-fit: contain;
  display: block;
}

/* One per product image: front left, back right on desktop; front only on the
   phone. A single shot spans the whole tile, so one-image products render
   exactly as they did before the split. */
.shop-card-shot {
  flex: 1;
  /* Flex children default to min-width:auto and refuse to shrink below their
     content width, which would push the second shot outside the tile. */
  min-width: 0;
  height: 100%;
}

.shop-glyph {
  width: 44px;
  height: 44px;
  fill: #333;
}

.shop-soldout .shop-card-img { opacity: 0.45; }

.shop-soldout-tag {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  color: #c33;
  border: 1px solid #c33;
  padding: 2px 8px;
  background: rgba(0,0,0,0.7);
}

.shop-card-title {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: #ccc;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-card-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.shop-price {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #fff;
  flex: 1;
}

.shop-size {
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: #111;
  padding: 1px 2px;
  max-width: 52px;
}

.shop-add { white-space: nowrap; }
.shop-add[disabled] { color: #888; cursor: default; }

/* ── Footer row inside the body ── */
.shop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}

.shop-footer-note {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: #444;
}

.shop-viewcart, .shop-checkout { padding: 4px 14px; }
.shop-checkout[disabled] { color: #888; cursor: default; }

/* ── Cart view ── */
.shop-cart-msg {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: #c33;
  margin-bottom: 10px;
}

.shop-cart-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Courier New', monospace;
}

.shop-cart-table th {
  text-align: left;
  font-size: 9px;
  letter-spacing: 2px;
  color: #444;
  font-weight: normal;
  border-bottom: 1px solid #222;
  padding: 4px 6px;
}

.shop-cart-table td {
  border-bottom: 1px solid #181818;
  padding: 7px 6px;
  font-size: 11px;
  color: #ccc;
  vertical-align: middle;
}

.shop-cart-item { letter-spacing: 1px; }

.shop-cart-qty { white-space: nowrap; }
.shop-cart-qty span {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  color: #fff;
}

.shop-qty-btn {
  padding: 0 6px;
  font-size: 10px;
  line-height: 16px;
}

.shop-cart-price { color: #fff; white-space: nowrap; }

.shop-cart-subtotal {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: #888;
  text-align: right;
  margin-top: 12px;
}
.shop-cart-subtotal span { color: #fff; font-size: 13px; }

.shop-cart-shipnote {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  color: #444;
  text-align: right;
  margin-top: 4px;
}

.shop-demo-note {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: #a80;
  text-align: center;
  margin-top: 14px;
}

/* ── Sizes view ── */
.shop-sizes-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Courier New', monospace;
  margin-top: 6px;
}
.shop-sizes-table th, .shop-sizes-table td {
  border: 1px solid #222;
  padding: 6px 8px;
  font-size: 10px;
  letter-spacing: 1px;
  color: #ccc;
  text-align: center;
}
.shop-sizes-table th { color: #555; font-weight: normal; letter-spacing: 2px; }
.shop-sizes-note {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  color: #444;
  margin-top: 10px;
  line-height: 1.6;
}

/* ── Status bar (Win98 sunken cells) ── */
.shop-statusbar {
  display: flex;
  gap: 3px;
  background: #c0c0c0;
  padding: 3px 4px;
}
.shop-statusbar > div {
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  font-size: 10px;
  padding: 2px 8px;
  color: #222;
}
.shop-status-left { width: 36%; }
.shop-status-right { flex: 1; }

/* ── Maximized: grow the store body with the window instead of 440px ── */
/* .win.maximized is already flex-column with .win-inner as flex:1 (index.html);
   this makes the inner a column too so #shop-body takes the slack. */
#win-shop.maximized .win-inner { display: flex; flex-direction: column; }
#win-shop.maximized .menubar,
#win-shop.maximized #shop-address-bar,
#win-shop.maximized .shop-statusbar { flex-shrink: 0; }
#win-shop.maximized #shop-body { height: auto; flex: 1; min-height: 0; }

/* Narrow window fallback */
@media (max-width: 560px) {
  .shop-grid { grid-template-columns: 1fr; }
}

/* ── PREVIEW magnifier window (desktop image zoom) ── */
#win-preview {
  width: 340px;
  z-index: 99999;        /* floats above the shop; stays clear of the zTop (starts 100) counter */
  pointer-events: none;  /* transient: never intercepts clicks or captures its own hover */
}

.shop-preview-viewport {
  width: 100%;
  height: 340px;
  /* Same light tile as .shop-card-img: product art is transparent-bg PNGs of
     black garments, invisible on a dark panel. */
  background-color: #c0c0c0;
  background-repeat: no-repeat;
  background-position: center;   /* overwritten per-pixel by the pan handler (Task 3) */
  background-size: 250%;         /* 2.5x magnification */
  border: 1px solid #222;
}