.shop-page .intro {
  background: #68584f;
}

.intro-brand {
  width: min(360px, 62vw);
  animation: introIn .9s ease both;
}

.intro-brand img {
  width: 100%;
  filter: invert(1);
}

.intro > i {
  margin-top: 230px;
}

#shop {
  scroll-margin-top: 70px;
}

.shop-scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: rgba(255, 255, 255, .82);
  transform: translateX(-50%);
}

.shop-scroll-cue span {
  margin-bottom: 4px;
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.shop-scroll-cue i {
  width: 13px;
  height: 13px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  animation: shopArrow 1.7s ease-in-out infinite;
}

.shop-scroll-cue i + i {
  margin-top: -6px;
  animation-delay: .18s;
}

@keyframes shopArrow {
  0%, 100% { opacity: .28; transform: translateY(-2px) rotate(45deg); }
  50% { opacity: 1; transform: translateY(3px) rotate(45deg); }
}

.shop-card .shop-add {
  z-index: 3;
  display: grid;
  place-items: center;
  color: #181412;
  box-shadow: 0 7px 22px rgba(24, 20, 18, .14);
  transition: transform .25s ease, background .25s ease;
}

.shop-card .shop-add:hover,
.shop-card .shop-add:focus-visible {
  background: #fff;
  transform: scale(1.07);
}

@media (max-width: 900px) {
  .topbar.mobile-open nav a {
    width: 100%;
  }

  .shop-scroll-cue {
    bottom: 18px;
  }

  .shop-page .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 12px;
  }

  .shop-page .shop-card .media {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.06;
  }

  .shop-page .shop-card .meta {
    display: block;
    padding-top: 11px;
  }

  .shop-page .shop-card h3 {
    margin-bottom: 6px;
    font-size: clamp(.98rem, 4.6vw, 1.25rem);
    line-height: 1.12;
  }

  .shop-page .shop-card .meta p {
    display: none;
  }

  .shop-page .shop-card strong {
    display: block;
    font-size: .72rem;
  }

  .shop-page .shop-card .shop-add {
    right: 9px;
    bottom: 9px;
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-scroll-cue i {
    animation: none;
  }
}