.main-nav > a.nav-shop,
.main-nav > a.nav-shop[aria-current="page"] {
  color: #fff;
  padding-inline: 15px;
  border: 1px solid rgba(255, 116, 170, .6);
  background: linear-gradient(115deg, #ce1734, #9c23ce);
  box-shadow: 0 0 18px rgba(220, 34, 103, .22);
}
.main-nav > a.nav-shop:hover,
.main-nav > a.nav-shop:focus-visible {
  color: #fff;
  border-color: #ff9ecb;
  background: linear-gradient(115deg, #ed2444, #b635e5);
  box-shadow: 0 0 24px rgba(220, 34, 103, .35);
}
.modes-section .gtp-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 680px;
  margin-inline: auto;
}
.gtp-grid .mode-card { text-align: center; }
.gtp-grid .mode-icon { margin-inline: auto; }

/* Submark proportions in page banners and footers. */
.hero-art .hero-submark { display: block; width: min(460px, 90%); }
.hero-art .hero-submark img { width: 100%; height: auto; object-fit: contain; }
.footer-brand .footer-submark { width: 84px; height: 84px; max-height: none; object-fit: contain; margin-bottom: 14px; }
.shop-logo { max-width: 220px; justify-self: center; object-fit: contain; }
@media (max-width: 600px) {
  .hero-art .hero-submark { width: min(340px, 92%); }
}

/* Square header submark, including the compact scroll state. */
.site-header .brand { width: 64px; }
.site-header .brand img { width: 64px; height: 64px; max-height: none; object-fit: contain; }
.site-header.scrolled .brand { width: 48px; }
.site-header.scrolled .brand img { width: 48px; height: 48px; max-height: none; }
@media (max-width: 850px) {
  .site-header .brand { width: 54px; }
  .site-header .brand img { width: 54px; height: 54px; }
  .site-header.scrolled .brand { width: 44px; }
  .site-header.scrolled .brand img { width: 44px; height: 44px; }
}