/* Styles of /shop/ only (moved out of its <style> block on 2026-11-10).
   Loaded after the shared sheets, at the same place the block was, so the
   cascade is unchanged. Rules shared by several pages go in /css. */

/* Page-specific: Designthecary product grid uses dark cards with the
   Gumroad embed button pinned to the bottom. Everything else is shared. */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--case-gap-x);
  width: 100%;
}
.shop-card {
  position: relative;
  background: #0f1a2e;
  color: #fff;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.shop-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop-card .shop-card__cta {
  position: relative;
  z-index: 1;
  padding: 16px;
  display: flex;
  justify-content: flex-start;
}
.shop-card .gumroad-button {
  font-family: 'Galatea', 'Times New Roman', serif !important;
}
@media (max-width: 1100px) {
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
  .shop-grid { grid-template-columns: 1fr; }
}

/* Desktop: three cards of four columns on the main grid (css/grid.css);
   the button keeps the 32px inset used for text inside a box. */
@media (min-width: 821px) {
  .shop-grid { gap: var(--g-gutter); }
  .shop-card .shop-card__cta { padding: 32px; }
}

/* The hero image fills its cell at its own shape (was inline). */
.shop-hero-img { width: 100%; height: auto; }