/* Shopify — page extras on top of components/kosh-page.css (all prefixed .kp-x-sh-) */

/* 02 — Storefront numbers: four stats (no trust block) and a caption line under them */
.kp-x-sh-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kp-x-sh-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
/* Shopify logo and name left, note right (was a fake storefront URL) */
.kp-x-sh-caption { align-items: center; justify-content: flex-start; gap: 8px 10px; }
.kp-x-sh-caption > span:last-child { margin-left: auto; }
.kp-x-platform-logo { display: inline-flex; flex: none; }
.kp-x-platform-logo svg { width: 22px; height: 22px; }
.kp-x-sh-caption__name { font-size: 13px; letter-spacing: .02em; text-transform: none; color: var(--text-primary); }

/* Uppercase card titles */
.kp-x-sh-caps { font-size: 13px; letter-spacing: .08em; }

/* 05 — Selected work: link under the rows */
.kp-x-sh-work .kp-link { margin-top: 36px; }

/* 06 — Built for what comes next: pills on the dark band */
.kp-x-sh-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: -12px 0 clamp(32px, 4vw, 48px); }
.kp-x-sh-pill {
  padding: 7px 14px;
  border: 1px solid var(--line-on-dark);
  border-radius: 99px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-on-dark-2);
}
.kp-dark .kp-hl em { color: var(--color-tertiary); }

/* 07 — FAQ follows the dark band, so it keeps its top padding */
.kp-x-sh-faq { padding-top: var(--section-y); }

/* 08 — Final CTA: the italic words stay white on the maroon band */

@media (max-width: 860px) {
  .kp-x-sh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-x-sh-caption > span:last-child { flex-basis: 100%; margin-left: 0; }
}