/* The slot bottom is the support line. Wood extends down from it; covers do not. */
@layer shelves {
  :root {
    --wall: #eae5dc;
    --rack-row-gap: 54px;
    --wood-depth: 6px;
    --wood-face: 20px;
  }

  body {
    background: radial-gradient(ellipse at 48% 25%, #f5f1e9 0%, #ece7dd 45%, #e2dccf 100%);
    background-attachment: fixed;
  }

  .shopify-wordmark svg path:last-child { fill: var(--wall); }

  .shelf-row { align-items: end; }

  /* The rails belong to the row, never to one of its interactive sleeves. */
  .shelf-row::before,
  .shelf-row::after,
  .album-slot::before,
  .album-slot::after {
    content: none;
    display: none;
  }

  .shelf-board {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--wood-face);
    pointer-events: none;
    z-index: 0;
  }

  .shelf-board--middle { display: none; }

  .shelf-board-top {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--wood-depth);
    background:
      linear-gradient(90deg, #56352018, transparent 18%, #e2b37917 50%, transparent 84%, #4c2d2029),
      linear-gradient(#a57a52 0%, #bc936a 55%, #9b704c 100%);
    border-top: 1px solid #805c3f75;
    clip-path: polygon(.35% 0, 99.65% 0, 100% 100%, 0 100%);
  }

  .shelf-board-front {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 1px 1px 3px 3px;
    background-color: #795035;
    background-image:
      radial-gradient(circle at 12px 48%, #d5b888 0 .7px, #4a2e1c 1.1px, transparent 1.7px),
      radial-gradient(circle at calc(100% - 12px) 48%, #d5b888 0 .7px, #4a2e1c 1.1px, transparent 1.7px),
      url('./assets/walnut-grain.svg'),
      linear-gradient(180deg,
        #bb9066 0%, #9c6d48 7%, #67412b 15%,
        #91603f 22%, #805135 57%, #6c432c 78%,
        #8d6040 85%, #54331f 93%, #3d281b 100%);
    background-size: auto, auto, 640px 24px, auto;
    box-shadow:
      inset 0 1px 0 #e1b98559,
      inset 1px 0 1px #422a1f55,
      inset -1px 0 1px #422a1f66,
      0 2px 2px #442d2528,
      0 12px 14px -7px #49352845,
      0 24px 24px -16px #56403538;
  }

  .shelf-row:nth-child(2) .shelf-board-front {
    background-position: 0 0, 0 0, -210px 2px, 0 0;
  }

  .album-slot {
    z-index: 1;
    perspective: none;
    perspective-origin: 50% 100%;
  }

  .shelf-album,
  .album-slot:nth-child(2n) .shelf-album {
    transform-origin: 50% 100%;
    transform: perspective(1200px) rotateX(0deg);
    filter: drop-shadow(2px 2px 2px #39271d45);
    transition: transform .22s var(--ease), filter .22s ease, opacity .16s ease;
  }

  /* Z thickness is for the foreground flip; resting covers meet the rail exactly. */
  .shelf-album .sleeve-front { transform: none; }

  .shelf-album::after {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    height: 3px;
    bottom: -1px;
    z-index: 2;
    background: linear-gradient(#35221866, #35221812);
    filter: blur(.5px);
    pointer-events: none;
  }

  @media (hover: hover) {
    .album-slot:hover .shelf-album {
      transform: perspective(1200px) rotateX(-2deg);
      filter: drop-shadow(2px 2px 2px #39271d4d) brightness(1.025);
    }
  }

  .focus-description,
  .focus-meta .eyebrow,
  .focus-counter,
  .face-indicator,
  .close-selection { color: #786d5d; }

  .search-dialog,
  .reader-dialog { background: #f7f3eb; }

  .search-form { background: #ece6da; border-color: #d6cab7; }

  @media (min-width: 900px) and (max-height: 780px) {
    .catalog-wrap { margin-top: 36px; padding-bottom: 11px; }
  }

  @media (max-width: 899px) {
    .shelf-row { row-gap: var(--rack-row-gap); }
    .shelf-board--middle {
      display: block;
      top: calc((100% - var(--rack-row-gap)) / 2);
    }
    .site-header { background: #ece7dded; }
    .is-selected .focus-layer { background: #e9e3d86b; }
  }

  @media (max-width: 599px) {
    :root { --rack-row-gap: 44px; --wood-depth: 5px; --wood-face: 17px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .album-slot:hover .shelf-album { transform: none; }
  }
}