/* The main-site catalog uses the same staggered product grid as the B2B catalog. */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--catalog-gap, 14px);
}
.showcase-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: var(--catalog-gap, 14px);
  min-width: 0;
}
.showcase-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: .8;
  border-radius: 18px;
  background: var(--showcase-tone, #ecebdb);
}
.showcase-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 18%, rgb(255 255 255 / 65%), transparent 45%);
  pointer-events: none;
}
.showcase-card--large { grid-column: span 2; aspect-ratio: .827; }
.showcase-card--wide { grid-column: span 2; aspect-ratio: 2.12; }
.showcase-link { position: absolute; inset: 0; display: block; }
.showcase-link:focus-visible { outline: 3px solid var(--sage); outline-offset: -4px; border-radius: inherit; }
.showcase-image {
  position: absolute;
  top: 4%;
  left: 0;
  width: 100%;
  height: 79%;
  object-fit: contain;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.showcase-card--scene .showcase-image { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase-card--wide .showcase-image { object-position: 50% 46%; }
.showcase-link:hover .showcase-image { transform: scale(1.04); }
.showcase-caption {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 50px;
  padding: 9px 9px 9px 12px;
  border: 1px solid rgb(255 255 255 / 37%);
  border-radius: 13px;
  background: rgb(247 246 241 / 52%);
  box-shadow: 0 14px 36px rgb(40 43 33 / 10%);
  color: #374b3b;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.showcase-caption h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(12px, 1.05vw, 16px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.showcase-card--large .showcase-caption { min-height: 60px; padding: 12px 14px; }
.showcase-card--large .showcase-caption h3 { font-size: clamp(18px, 1.6vw, 25px); }
.showcase-arrow {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eaf1d5;
  color: #456246;
}
.showcase-arrow .icon-arrow { width: 18px; height: 18px; }
.showcase-link:hover .icon-arrow { transform: rotate(-90deg) translate(1px, 1px); }
.showcase-tone-apple { --showcase-tone: #e8ecdf; }
.showcase-tone-cranberry { --showcase-tone: #f4e5e5; }
.showcase-tone-apple-meringue { --showcase-tone: #e9ebd5; }
.showcase-tone-raspberry { --showcase-tone: #f5e5e8; }
.showcase-tone-blueberry { --showcase-tone: #eee8f0; }
.showcase-tone-hero { --showcase-tone: #ecebdb; }
.showcase-tone-sugarfree { --showcase-tone: #e9ecde; }
.showcase-tone-cherry { --showcase-tone: #f4e4e2; }
.showcase-tone-gift { --showcase-tone: #f0e8da; }
.showcase-tone-rusks { --showcase-tone: #f3e9dd; }
.showcase-tone-chocolate { --showcase-tone: #ede5e1; }
.showcase-tone-marmalade { --showcase-tone: #f6e9dc; }
.showcase-tone-strawberry { --showcase-tone: #f4e2e5; }
.showcase-tone-berry-rusks { --showcase-tone: #efe6ee; }
.showcase-tone-zephyr { --showcase-tone: #efeee5; }
.page-section--catalog {
  --catalog-gap: clamp(8px, 1vw, 15px);
  padding-block: clamp(50px, 7vh, 88px);
  background: #f7f5f0;
}
.product-showcase {
  display: flex;
  flex-direction: column;
}
.product-showcase__heading {
  display: flex;
  flex: 0 0 auto;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(16px, 2.4vh, 28px);
}
.product-showcase__heading .eyebrow { margin-bottom: 10px; }
.product-showcase__heading h2 {
  margin: 0;
  color: #292922;
  font-family: var(--heading);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .98;
}
.product-showcase__heading h2 em { color: var(--sage); font-weight: 400; }
.product-showcase__all {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
  border: 1px solid rgb(72 106 70 / 24%);
  border-radius: 999px;
  color: var(--sage-dark);
  font-size: 12px;
  font-weight: 600;
  transition: background .2s, color .2s;
}
.product-showcase__all:hover { background: var(--sage-dark); color: white; }
.product-showcase__all .icon-arrow { width: 17px; height: 17px; }
.product-showcase__tiles { padding: 2px 2px 0; }
.showcase-grid { align-items: start; }
.product-showcase__note {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 23px;
  padding-top: 17px;
  border-top: 1px solid rgb(72 106 70 / 18%);
  color: #77796f;
}
.product-showcase__note-mark { color: #8eaa61; font-size: 19px; line-height: 1; }
.product-showcase__note p { margin: 0; font-size: 11px; line-height: 1.6; letter-spacing: .015em; }
.product-showcase__note-index { color: #9a9a8c; font-size: 8px; font-weight: 600; letter-spacing: .16em; white-space: nowrap; }
.catalog-orbits {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.catalog-orbits__lines {
  stroke: rgb(76 92 75 / 13%);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}
.catalog-orbits__diamond {
  fill: #f7f5f0;
  stroke: rgb(76 92 75 / 48%);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.catalog-orbits__diamond--accent {
  fill: #b4775e;
  stroke: #b4775e;
  stroke-width: 1;
}
.showcase-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; }
.showcase-footer .catalog-note { margin: 0; text-align: left; }
.showcase-footer .button { flex-shrink: 0; }
@media (max-width: 1000px) {
  .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .page-section--catalog { padding-block: 42px; }
  .product-showcase__heading { align-items: end; gap: 12px; }
  .product-showcase__heading h2 { font-size: clamp(30px, 8vw, 42px); }
  .product-showcase__all { padding: 10px 12px; font-size: 11px; }
  .product-showcase__note { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; margin-top: 18px; padding-top: 14px; }
  .product-showcase__note-index { grid-column: 2; }
  .catalog-orbits { display: none; }
  .showcase-grid { grid-template-columns: minmax(0, 1fr); }
  .showcase-caption h3 {font-size: 14px;}
  .showcase-card--large .showcase-caption h3 {font-size: 18px;}
  .showcase-footer { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-image { transition: none; }
}