/* Little Yesterday Vintage — the showroom (Slice B): the shelves, in Explorer's
   Thumbnails view, and the image viewer. Its own file, loaded after styles.css,
   so the feature is one module with one <link> in index.html. It uses the
   variables styles.css defines. The viewer's window width is the one rule left
   in styles.css (see there): it must come before the phone rule that maximises
   every window. */

/* A shelf is Explorer's Thumbnails view: each photo framed on white and never
   cropped, its title and price underneath, and a status bar with the count. */
.thumbs {
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .9rem .75rem;
}
.thumb[hidden] { display: none; }
.thumb a { display: grid; gap: .3rem; color: var(--ink); text-decoration: none; }
.thumb a:focus-visible { outline: 2px dotted var(--ink); outline-offset: 2px; }
.thumb__frame {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: .3rem;
  background: var(--paper);
  border: 2px solid;
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  box-shadow: inset 1px 1px 0 var(--bevel-deep), inset -1px -1px 0 var(--chrome-lit);
}
.thumb__frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.thumb__title { font-family: var(--ui); font-size: .78rem; line-height: 1.25; }
.thumb a:hover .thumb__title { text-decoration: underline; }
.thumb__price { font-family: var(--ui); font-size: .8rem; font-weight: 700; }
.thumb__held { font-family: var(--ui); font-size: .72rem; color: var(--ink-soft); }

.statusbar {
  margin: 0 0 .75rem;
  padding: .2rem .5rem;
  background: var(--chrome);
  border: 1px solid;
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  font-family: var(--ui);
  font-size: .76rem;
}

/* Apparel's size chips. Navy when chosen, never the drop's colour (pumpkin):
   that is the drop's call to action, and a filter is not one. */
.chips--filter { margin: 0 0 .75rem; }
.chips--filter .chip {
  padding: .4rem .7rem;
  background: var(--chrome);
  color: var(--ink);
  border: 2px solid;
  border-color: var(--chrome-lit) var(--bevel-deep) var(--bevel-deep) var(--chrome-lit);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo);
  font-family: var(--ui);
  font-size: .76rem;
  cursor: pointer;
}
.chips--filter .chip[aria-pressed="true"] {
  background: var(--titlebar);
  color: var(--paper);
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  box-shadow: inset 1px 1px 0 var(--bevel-deep), inset -1px -1px 0 var(--chrome-lit);
}
.chips--filter .chip:focus-visible { outline: 2px dotted var(--ink); outline-offset: -6px; }

/* The image viewer: the photo in a chrome well, a filmstrip, Properties. */
.viewer__well { margin: 0 0 .5rem; }
.viewer__well img { max-height: 60vh; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
.viewer__count { margin: 0 0 .4rem; font-family: var(--ui); font-size: .76rem; }
.filmstrip { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; gap: .4rem; overflow-x: auto; }
.filmstrip__btn {
  display: block;
  padding: .2rem;
  background: var(--paper);
  border: 2px solid;
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  cursor: pointer;
}
.filmstrip__btn[aria-pressed="true"] { outline: 2px solid var(--titlebar); outline-offset: 1px; }
.filmstrip__btn:focus-visible { outline: 2px dotted var(--ink); outline-offset: 1px; }
.filmstrip__btn img { display: block; width: 3.5rem; height: 3.5rem; object-fit: contain; }
.props {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .25rem 1rem;
  margin: 0 0 .9rem;
  padding: .5rem .75rem;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
}
.props div { display: contents; }
.props dt { font-family: var(--ui); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); align-self: center; }
.props dd { margin: 0; font-family: var(--ui); font-size: .84rem; font-weight: 700; }
.viewer__buy { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.viewer__sold, .viewer__held { font-family: var(--ui); }