/* Customer-facing index of published box builders.  Theme colours are
   inherited so this page belongs to each shop rather than imposing a second
   storefront identity. */
.boldally-box-catalogue {
  --catalogue-ink: currentColor;
  --catalogue-muted: color-mix(in srgb, currentColor 68%, transparent);
  --catalogue-rule: color-mix(in srgb, currentColor 16%, transparent);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5.5rem) 1.25rem;
}

.boldally-box-catalogue__header {
  max-width: 42rem;
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.boldally-box-catalogue__kicker {
  margin: 0 0 .65rem;
  color: var(--catalogue-muted);
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.boldally-box-catalogue__header h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.boldally-box-catalogue__header > p:last-child {
  margin: 1rem auto 0;
  color: var(--catalogue-muted);
  font-size: 1.05em;
  line-height: 1.5;
}

.boldally-box-catalogue__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.boldally-box-catalogue__card {
  display: block;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--catalogue-rule);
  color: inherit;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1), border-color 220ms ease;
}
.boldally-box-catalogue__card:hover,
.boldally-box-catalogue__card:focus-visible {
  border-color: currentColor;
  transform: translateY(-4px);
}
.boldally-box-catalogue__card:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.boldally-box-catalogue__media { overflow: hidden; background: color-mix(in srgb, currentColor 7%, transparent); }
/* Keep the product artwork complete. A fixed aspect ratio with object-fit:
   cover cropped taller images, including the box artwork shown in the grid. */
.boldally-box-catalogue__image { display: block; width: 100%; height: auto; transition: transform 350ms cubic-bezier(.22, 1, .36, 1); }
.boldally-box-catalogue__card:hover .boldally-box-catalogue__image,
.boldally-box-catalogue__card:focus-visible .boldally-box-catalogue__image { transform: scale(1.035); }
.boldally-box-catalogue__placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--catalogue-muted); font-size: .875em; }
.boldally-box-catalogue__content { display: flex; flex-direction: column; align-items: flex-start; padding: 1.2rem; }
.boldally-box-catalogue__card-title { margin: 0; font-size: 1.2em; line-height: 1.25; text-wrap: balance; }
.boldally-box-catalogue__price { margin: .55rem 0 0; font-size: .95em; line-height: 1.35; }
.boldally-box-catalogue__price span { font-weight: 700; }
.boldally-box-catalogue__price s { margin-left: .35rem; color: var(--catalogue-muted); text-decoration-thickness: 1px; }
.boldally-box-catalogue__description { display: -webkit-box; overflow: hidden; margin: .5rem 0 0; color: var(--catalogue-muted); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.boldally-box-catalogue__cta { margin-top: 1.4rem; font-weight: 700; }
.boldally-box-catalogue__cta span { display: inline-block; margin-left: .25rem; transition: transform 180ms ease; }
.boldally-box-catalogue__card:hover .boldally-box-catalogue__cta span { transform: translateX(3px); }
.boldally-box-catalogue__empty { max-width: 30rem; margin: 0 auto; padding: 2.5rem 1rem; border-block: 1px solid var(--catalogue-rule); text-align: center; }
.boldally-box-catalogue__empty p { margin-top: 0; font-size: 1.1em; }

/* Product-style grid: four boxes across once the storefront reaches desktop. */
@media (min-width: 990px) {
  .boldally-box-catalogue__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 600px) and (max-width: 989px) {
  .boldally-box-catalogue__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .boldally-box-catalogue__card,
  .boldally-box-catalogue__image,
  .boldally-box-catalogue__cta span { transition: none; }
  .boldally-box-catalogue__card:hover,
  .boldally-box-catalogue__card:focus-visible { transform: none; }
}