/* shop.css — the shop: things cut out on white, in a grid that goes on as long as there are things. One font,
   black on white, as on the wine site. */
@font-face { font-family: "ABC Areal"; src: url("fonts/ABCAreal-Regular.woff2") format("woff2"); font-display: swap; }
html, body { margin: 0; background: #fff; }
body { font-family: "ABC Areal", sans-serif; font-size: 15px; line-height: 20px; color: #000; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; }

.top { position: fixed; top: 32px; left: 32px; z-index: 2; }
.top h1 { margin: 0; font: inherit; }
.top p { margin: 0; color: #9a9a9a; }

/* The grid is a shelf: things stand on a line, each as big as its size says (--u is a size of 1, a small toy),
   in its photo's proportions; name and price under it on hover. */
.grid { --u: 150px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 88px 56px; padding: 32px 48px 120px 264px; }
.cell { position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer;
        width: calc(var(--u) * var(--s) * var(--fw)); }
.cell .pic { position: relative; width: 100%; height: calc(var(--u) * var(--s) * var(--fh)); display: flex; align-items: flex-end; justify-content: center; }
.cell img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; transform: translateY(calc(var(--pb) * 100%)); }
.three .cell img { transform: none; }
.cell .label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 12px; width: max-content; max-width: 220px; text-align: center; visibility: hidden; }
.cell .label span { display: block; color: #9a9a9a; }
.cell:hover .label { visibility: visible; }
.cell.sold img { opacity: .3; }
.cell.sold .label { visibility: visible; color: #9a9a9a; }
.more { height: 1px; }
/* The 3D version: a little roomier, for the shadow. */
.three .cell { width: calc(var(--u) * var(--s) * var(--fw)); }
.three .cell .pic { height: calc(var(--u) * var(--s) * var(--fh)); }

/* An item, over the grid. */
.item { position: fixed; inset: 0; z-index: 3; background: #fff; display: none; overflow-y: auto; }
.item.on { display: grid; grid-template-columns: 1fr 360px; gap: 32px; }
.item .stage { position: relative; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; }
.item .stage img { max-width: 78%; max-height: 78%; }
.item .thumbs { position: absolute; left: 32px; bottom: 32px; display: flex; gap: 8px; }
.item .thumbs img { width: 56px; height: 56px; object-fit: contain; opacity: .35; cursor: pointer; }
.item .thumbs img.on { opacity: 1; }
.item .info { padding: 32px 32px 32px 0; align-self: center; }
.item .info h2 { margin: 0; font: inherit; }
.item .info .price { color: #9a9a9a; margin-bottom: 20px; }
.item .info p { margin: 0 0 20px; white-space: pre-line; }
.item .close { position: fixed; top: 32px; right: 32px; z-index: 4; }

/* The 3D version: one live canvas takes the place of the photo under the pointer; on a thing's page the solid
   fills the stage and turns by dragging. */
.cell .live { position: absolute; pointer-events: none; z-index: 1; }
.cell.live-on .pic img { visibility: hidden; }
.item .solid-box { position: absolute; inset: 0; cursor: grab; }
.item .solid-box:active { cursor: grabbing; }
.item .solid-box canvas { display: block; touch-action: pan-y; }
.item .thumbs span { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; opacity: .35; cursor: pointer; }
.item .thumbs span.on { opacity: 1; }
.item .thumbs { z-index: 1; }

/* Chaos (the home page): things dropped on the floor, as big as the screen allows. */
.chaos .grid { --u: clamp(64px, 11vw, 190px); display: block; position: relative; overflow-x: clip; box-sizing: border-box; }
.chaos .cell { position: absolute; }
.chaos .cell .label { visibility: hidden; }
.chaos .cell:hover { z-index: 2; }
.chaos .cell:hover .label { visibility: visible; }
/* One per screen (one/, kept aside): a column of things, one screen each. */
.one .grid { display: block; padding: 0 48px 0 34vw; }
.one .cell { width: auto; height: 100vh; height: 100svh; justify-content: center; }
.one .cell .pic { width: min(50vw, calc(64vh * var(--fw) / var(--fh))); height: auto; aspect-ratio: calc(var(--fw) / var(--fh)); }
.one .cell .label { position: static; transform: none; margin-top: 28px; visibility: visible; }
.one .top { top: 33.3333vh; }

@media (max-width: 1023px) {
  .grid { --u: 110px; gap: 48px 40px; padding: 104px 32px 96px; }
  .top { position: absolute; top: 24px; left: 24px; }
  .item.on { display: block; }
  .item .stage { height: 70vh; height: 70svh; }
  .item .thumbs { left: 24px; right: 24px; bottom: 8px; overflow-x: auto; scrollbar-width: none; }
  .item .thumbs img, .item .thumbs span { flex: none; }
  .item .info { padding: 24px; }
  .item .close { top: 24px; right: 24px; }
}
@media (max-width: 599px) {
  /* One per screen (one/, kept aside): a column of things, one screen each. */
.one .grid { padding: 0 16px; }
  .one .cell .pic { width: min(84vw, calc(56svh * var(--fw) / var(--fh))); }
  .one .top { position: absolute; top: 24px; }
  .grid { --u: 70px; gap: 32px 24px; padding: 96px 16px 64px; justify-content: center; }
  .top { left: 16px; }
  .cell .label { display: none; }
  .cell.sold .label { display: block; font-size: 12px; }
}