/* store.css — the Store page's own parts, in the shell's tokens (site.css).
   The page is the sea at dusk with two things standing on it, no boxes: on
   each the picture is the biggest thing, then the name in the video's
   rimmed type, then the price on the accent and one line. Two columns at
   the window's middle on a wide screen; on a phone each good is a screen
   of its own, read by scrolling. The pop-up is the shell's window, in ink. */

/* the sea's canvas is a few engine px bigger than the window: clip it */
body[data-page="store"] .sea { overflow: hidden; }

main.store {
  position: relative; z-index: 1;
  max-width: 1120px; margin: 0 auto;
  padding: var(--top) var(--gutter) 24px;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; min-height: 100svh;
}
/* on a phone each good is a screen of its own; the page snaps to them */
body[data-page="store"] { scroll-snap-type: y proximity; }

/* ---------------------------------------------------------------- the goods */
.goods { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0; }
.good { height: calc(100vh - var(--top)); height: calc(100svh - var(--top)); display: grid; align-items: center; scroll-snap-align: start; }
.pick {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 8px; row-gap: 10px;
  width: 100%; padding: 0; text-align: center;
  touch-action: pan-y;   /* a sideways drag turns the picture; the page still scrolls */
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.pick:hover .price, .pick:focus-visible .price { background-image: var(--d25); background-size: 4px 4px; }
.pick:focus-visible { outline: none; }
.pick:focus-visible .name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--accent); }
/* the picture: a whole-pixel canvas on the water, in a 4:3 box so the page
   keeps its height before the render lands */
.art { display: grid; place-items: end center; width: 100%; flex-basis: 100%; aspect-ratio: 3 / 2; max-height: 42vh; overflow: hidden; margin-bottom: 10px; }
.art canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.name { font-weight: 900; font-size: 30px; letter-spacing: 2px; line-height: 1; text-transform: uppercase; }
/* the price hangs on the name's line like a sticker */
.price { display: inline-block; font-weight: 700; font-size: 11px; letter-spacing: 2px; line-height: 1; padding: 7px 9px 6px; background: var(--accent); color: var(--ink); align-self: center; }
.line { flex-basis: 100%; width: max-content; max-width: 100%; margin: 0 auto; font-weight: 500; font-size: 11px; letter-spacing: 2px; line-height: 1; text-transform: uppercase; padding: 7px 9px 6px; background: var(--ink); color: var(--paper); }
/* the window over the night sea: the goods behind go to paper grain */
body[data-page="store"] .pop::backdrop { background: var(--d25p) 0 0 / 4px 4px; }

/* ---------------------------------------------------------------- the pop-up */
.pop .win { background: var(--ink); color: var(--paper); border-color: var(--paper); }
.pop .x { background: var(--paper); color: var(--ink); }
.pop .x:hover { background-image: var(--d25); background-size: 4px 4px; }
.popArt { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin: 24px 0 10px; overflow: hidden; }
.popArt canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.pop h2 { font-size: 26px; letter-spacing: 2px; }
.pop .popPrice { margin: 10px 0 14px; font-size: 13px; }
.pop .popWhat { font-weight: 700; font-size: 14px; line-height: 1.5; }
.pop .popMore { font-size: 13px; line-height: 1.5; margin: 4px 0 18px; }
.pop .popCta { display: flex; align-items: center; gap: 16px; }
.pop .popCta .small { font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
/* a browser without <dialog>.showModal(): the window drawn by hand */
.pop.fb { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: var(--gutter); background: rgba(18, 21, 26, 0.55); }

@media (min-width: 700px) {
  body[data-page="store"] { scroll-snap-type: none; }
  .goods { grid-template-columns: 1fr 1fr; gap: 32px; }
  .good { height: auto; }
  .art { max-height: 52vh; }
  .name { font-size: 34px; }
}