/*
 * The shelf with nothing on it -- see empty-shelf.mjs for which four places
 * use it and which three deliberately do not.
 *
 * One file for the whole component, base and both sizes, so the feature is one
 * thing rather than a block copied into catalog.css and the search panel's
 * rules. Every page that can render an empty list links it.
 *
 * The rails are drawn rather than photographed. Three <i> elements with a
 * bottom border is all an empty shelf is, and it costs no request.
 *
 * Nothing in here reads var(--line). That token is a border shorthand in
 * catalog.css and a bare colour in styles-core.css, and this component renders
 * on pages that load one, the other, or the search panel's own palette. So the
 * rules are written out, and the two things that must follow the ground --
 * the rails and the type -- use currentColor: ink on the catalog's paper,
 * cream on the search panel's near-black, with no branch to keep in step.
 */
.empty-shelf {
  /*
   * The category page drops this into .catalog-stack, which is a three-column
   * product grid. A message about the list is not a member of it, so it takes
   * the whole row -- without this it renders in one 366px column while the
   * two-column rule below, which reads the viewport rather than the panel,
   * fires anyway and pushes the copy out through the border.
   *
   * Inert everywhere else: the pick page and the search panel append it to a
   * plain block, where grid-column means nothing.
   */
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  /* width, and not stretch. An auto margin outranks a grid item's default
     stretch, so without this the panel sizes to its own content and sits
     centred in a row it was told to fill. The margin still does its job in the
     block contexts -- the pick page, the search panel -- where there is no row
     to fill and the max-width bites. */
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 32px;
  border: 3px solid var(--ink);
  background: #fff;
}
@media (min-width: 720px) {
  .empty-shelf {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: center;
    gap: 34px;
    padding: 40px;
  }
}

/*
 * The art. Boom overlaps the rails rather than sitting beside them: a mascot
 * in front of the shelf is in the shop, one next to it is in a diagram.
 */
.empty-shelf-art {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 160px;
  padding: 12px 0 0;
  overflow: hidden;
}
/* No padding under the last rail: Boom sits at the bottom of the same box, so
   any gap here is the distance between his soles and the plank he is meant to
   be standing on. */
.empty-shelf-rails {
  display: grid;
  gap: clamp(20px, 4.4vw, 34px);
}
.empty-shelf-rails i {
  display: block;
  height: 0;
  /* currentColor, not the accent: the shelf is furniture in every category,
     and a purple rail on a gold page reads as a highlight rather than a plank. */
  border-bottom: 3px solid currentColor;
  opacity: .24;
}
.empty-shelf-boom {
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;
  height: clamp(128px, 27vw, 196px);
  /* A contact shadow, not a glow: the still is a lit render on transparency,
     and without something under the soles he reads as pasted onto the panel
     rather than standing on the plank he is standing on. */
  filter: drop-shadow(0 6px 0 rgba(17, 16, 21, .12));
}

.empty-shelf-copy {
  display: grid;
  justify-items: start;
  gap: 12px;
}
/* The size the plain empty-stack heading had before this replaced it. The
   voice changed; how loud the sentence is did not. */
.empty-shelf-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.66rem, 3.68vw, 2.39rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.empty-shelf-copy p { margin: 0; max-width: 34rem; }
.empty-shelf-action {
  min-height: 44px;
  padding: 10px 18px;
  color: var(--paper);
  border: 3px solid var(--ink);
  background: var(--ink);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.empty-shelf-action:hover { color: var(--ink); background: var(--accent); }

/*
 * The small one, for the search dropdown. Same panel, no border and no ground
 * -- it is already inside a panel that has both -- and the favicon-sized Boom
 * so a miss costs no fetch while somebody is still typing.
 */
.empty-shelf.is-small {
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  max-width: none;
  padding: 18px 20px 22px;
  border: 0;
  background: none;
}
.empty-shelf.is-small .empty-shelf-art {
  min-height: 0;
  padding: 0;
}
/* Cream on the panel's near-black needs a touch more than ink on paper does
   to read as a plank rather than a smudge. */
.empty-shelf.is-small .empty-shelf-rails { gap: 17px; }
.empty-shelf.is-small .empty-shelf-rails i { opacity: .34; }
.empty-shelf.is-small .empty-shelf-boom {
  /* 58px was the first try and he read as a smudge on the near-black panel --
     the character is the whole point of drawing anything here. */
  height: 78px;
  filter: none;
}
.empty-shelf.is-small .empty-shelf-title {
  font-size: 1.1rem;
}
.empty-shelf.is-small .empty-shelf-copy p { font-size: .86rem; }