/*
 * Shop catalogue grid.
 * Auto-loaded by Kirby's css([..., '@auto']) helper when the shop template is rendered.
 */

/*
 * The book-grid component (.shop-grid) and .shop-section-title now live in
 * assets/css/index.css — they are shared by the shop AND publisher templates,
 * so they belong in the global stylesheet, not this template-scoped file
 * (which Kirby's @auto only loads for the shop template).
 */

/* The two section headings together form a sentence: "Books we publish, alongside a small curated selection…" */

.shop-section {
  margin-top: 3.5rem;
}

.shop-section:first-of-type {
  margin-top: 2rem;
}

.shop-section-link {
  color: inherit;
  border-bottom: 1px solid currentColor;   /* always underlined — reads clearly as a link */
  transition: opacity .2s;
}
.shop-section-link:hover {
  opacity: .6;
}

/* The "alongside…" heading reads as a sentence continuation: italic, lighter, narrower line. */
.shop-section-title-curated {
  font-size: 1.05rem;
  font-weight: 400;
  font-style: normal;       /* the <em> inside provides italic */
  color: #555;
  max-width: 50ch;
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.shop-section .shop-grid {
  margin-top: 1rem;
}

/* Featured publishers section — sub-headings within the middle section
   give each publisher their own band of books. */
.shop-publisher-group {
  margin-top: 1.75rem;
}
.shop-publisher-group:first-child {
  margin-top: 0;
}
.shop-publisher-name {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 .5rem;
  letter-spacing: .01em;
}
.shop-publisher-name a {
  color: inherit;
  border-bottom: 1px solid transparent;
}
.shop-publisher-name a:hover {
  border-bottom-color: currentColor;
}

/* "See all N titles →" link below a featured publisher's single cover.
   Sits subtly under the cover and routes to the publisher's detail page,
   which holds the complete catalogue from that publisher. Only renders
   when a publisher has more than one title. */
.shop-publisher-more {
  margin-top: .75rem;
  font-size: .95rem;
}
.shop-publisher-more a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.shop-publisher-more a:hover {
  border-bottom-color: currentColor;
}