/* Smind — template kit (Store Package) pages.
   Written for the 70 Store Package pages: their markup only carries kitp- classes.
   Uses the theme tokens from style.css (--primary, --ink, --line, --s*, --r*).
   12 column grid like the rest of the site: hero 6/6, groups 6/3/3, cards 4/4/4. */

/* The kit hero carries its own H1, and the design needs the full container. */
.single-head { display: none; }
.prose { max-width: none; padding-bottom: 0; }
.prose > * + * { margin-top: 0; }

.kitp-hero,
.kitp-features,
.kitp-groups,
.kitp-cta {
  padding: var(--s6) 0;
}
/* .prose h2 in style.css is more specific than a single class, hence the paired selector. */
.kitp-h2, .prose .kitp-h2 {
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: var(--s4);
}
/* The "Sections used for ..." heading opens the biggest block, so it is the largest. */
.kitp-groups > .kitp-h2, .prose .kitp-groups > .kitp-h2 {
  font-size: clamp(30px, 3.4vw, 48px);
  margin-bottom: var(--s5);
}

/* .prose in style.css gives every nested h2/h3 a top margin, which pushes these headings
   below the top of their row; the blocks set their own spacing. */
.prose .kitp-h2,
.prose .kitp-group-copy h3,
.prose .kitp-feature-col h3,
.prose .kitp-cta h2 { margin-top: 0; }

/* ---- Buttons ---- */
.kitp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 13px 24px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
  font-weight: 650;
  font-size: 15px;
  text-decoration: none;
  box-shadow: var(--shadow-primary);
  transition: transform .15s ease, background .15s ease;
}
.kitp-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.kitp-btn--ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.kitp-btn--ghost:hover { background: var(--bg-soft); border-color: var(--primary); }
.kitp-btn--sm { padding: 9px 18px; font-size: 14px; }
.kitp-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }

/* ---- Hero: 6 columns of copy beside 6 of video ---- */
.kitp-hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s5);
  align-items: center;
  padding-top: var(--s5);
}
.kitp-hero-copy { grid-column: span 6; }
.kitp-hero-media { grid-column: span 6; }
.kitp-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.kitp-tags span {
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .02em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
}
.kitp-title {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.08;
}
.kitp-intro {
  margin-top: var(--s3);
  font-size: 17px;
  color: var(--muted);
  max-width: 52ch;
}
.kitp-hero-media img, .kitp-video {
  width: 100%;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.kitp-video { aspect-ratio: 16 / 9; height: auto; }

/* ---- Features: four columns of 3 ---- */
.kitp-features { border-top: 1px solid var(--line); }
.kitp-features .kitp-h2 { text-align: center; }
.kitp-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.kitp-feature-col {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s4);
}
.kitp-feature-col h3 {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.01em;
  padding-bottom: var(--s2);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
/* .prose in style.css indents every list; these lists have their own bullets. */
.kitp-feature-col ul, .kitp-group-list ul { padding-left: 0; }
.kitp-feature-col ul { list-style: none; display: grid; gap: 7px; }
.kitp-feature-col li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  color: var(--muted);
}
.kitp-feature-col li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  opacity: .35;
}

/* ---- Sections used: screenshot 6, copy 3, link list 3 ---- */
.kitp-groups { border-top: 1px solid var(--line); }
.kitp-group {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s4);
  align-items: start;
  padding: var(--s5) 0;
  border-top: 1px solid var(--line);
}
.kitp-group:first-of-type { border-top: 0; padding-top: var(--s2); }
.kitp-group-shot { grid-column: span 3; }
.kitp-group-shot img {
  width: 100%;
  display: block;
  max-height: 340px;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.kitp-group-copy { grid-column: span 6; }
.kitp-group-copy h3, .prose .kitp-group-copy h3 {
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -.015em;
  margin-bottom: var(--s2);
}
.kitp-group-copy p { font-size: 15px; color: var(--muted); }
.kitp-group-copy .kitp-btn { margin-top: var(--s3); }
.kitp-group-list { grid-column: span 3; }
.kitp-group-list-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s2);
}
.kitp-group-list ul { list-style: none; display: grid; gap: 6px; }
.kitp-group-list a {
  display: block;
  padding: 8px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.kitp-group-list a:hover { border-color: var(--primary); color: var(--primary); background: #fff; }

/* ---- Closing band ---- */
.kitp-cta {
  position: relative;
  text-align: center;
  padding: var(--s7) var(--s4);
  margin: var(--s6) 0;
  border-radius: var(--r-xl);
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
.kitp-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 19, 34, .30), rgba(17, 19, 34, .72));
}
.kitp-cta > * { position: relative; }
.kitp-cta h2 {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  max-width: 24ch;
  margin: 0 auto var(--s4);
}
.kitp-cta p { color: rgba(255, 255, 255, .85); }
.kitp-cta .kitp-btn { background: #fff; color: var(--ink); box-shadow: none; }
.kitp-cta .kitp-btn:hover { background: var(--primary-soft); }

/* ---- Narrower screens ---- */
@media (max-width: 1100px) {
  .kitp-group-shot { grid-column: span 6; }
  .kitp-group-copy { grid-column: span 6; }
  .kitp-group-list { grid-column: span 12; }
  .kitp-group-list ul { grid-template-columns: repeat(3, 1fr); }
  .kitp-feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .kitp-hero-copy,
  .kitp-hero-media,
  .kitp-group-shot,
  .kitp-group-copy { grid-column: span 12; }
  .kitp-hero { gap: var(--s4); }
  .kitp-group-shot img { max-height: 320px; }
}
@media (max-width: 560px) {
  .kitp-feature-grid { grid-template-columns: 1fr; }
  .kitp-group-list ul { grid-template-columns: 1fr; }
  .kitp-cta { padding: var(--s6) var(--s3); border-radius: var(--r-lg); }
}

/* ---- Sections listing (/sections/) ---- */
/* The listing gets a wider column than the rest of the site so three cards a row have room. */
.wrap-kit { max-width: 1640px; }
.kit-archive-head { padding: var(--s6) 0 var(--s5); text-align: center; }
.kit-archive-head h1 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.kit-archive-intro {
  margin: var(--s3) auto 0;
  max-width: 72ch;
  font-size: 17px;
  color: var(--muted);
}

/* Sidebar of filters beside the results: 3 columns of 12, then 9. */
.kit-browse { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5); padding-bottom: var(--s7); }
.kit-filters { grid-column: span 3; position: sticky; top: calc(var(--hdr-h) + 16px); align-self: start; }
.kit-results { grid-column: span 9; }
.kit-filter-toggle { display: none; }
.kit-filter-group + .kit-filter-group { margin-top: var(--s4); }
.kit-filter-title {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.01em;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s2);
}
.kit-filters ul { list-style: none; padding-left: 0; display: grid; gap: 2px; }
.kit-filters label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  font-size: 15px;
  cursor: pointer;
}
.kit-filters label:hover { background: var(--bg-soft); }
.kit-filters input { width: 16px; height: 16px; accent-color: var(--primary); }
.kit-filters label span { flex: 1; }
.kit-filters label em { font-style: normal; color: var(--muted); font-size: 13.5px; }
.kit-filter-apply { margin-top: var(--s3); }
/* .kitp-btn sets display, which would beat the hidden attribute the script applies. */
.kit-filter-apply[hidden] { display: none; }
.kit-filter-clear {
  display: inline-block;
  margin-top: var(--s3);
  color: var(--primary);
  font-size: 14px;
  text-decoration: underline;
}

/* Pagination: round buttons, the current page filled in. */
/* style.css makes .pagination a flex row, so .nav-links shrinks and sits left: centre it. */
.kit-results .pagination { margin-top: var(--s6); justify-content: center; }
.kit-results .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.kit-results .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.kit-results .page-numbers:hover { border-color: var(--primary); color: var(--primary); }
.kit-results .page-numbers.current { background: var(--primary); border-color: var(--primary); color: #fff; }
.kit-results .page-numbers.dots { border-color: var(--line); color: var(--muted); }
.kit-results .page-numbers.dots:hover { border-color: var(--line); color: var(--muted); }
.kit-results .page-numbers.prev, .kit-results .page-numbers.next { font-size: 22px; padding-bottom: 3px; }
.kit-results ul.page-numbers { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.kit-results ul.page-numbers li { display: flex; }
.kit-results .screen-reader-text { position: absolute; left: -9999px; }

.kit-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s4);
}
.kit-count { font-size: 15px; color: var(--muted); }
.kit-count strong { color: var(--ink); font-weight: 700; }
.kit-sort { font-size: 15px; color: var(--muted); display: flex; align-items: center; gap: var(--s2); }
.kit-sort select {
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 7px 10px;
}
.kit-empty { padding: var(--s6) 0; text-align: center; color: var(--muted); }

/* Cards follow the Shopify collection: a framed screenshot with the text below it on the
   page background — no white box, no shadow. Measured from the original: image border
   1.6px rgba(78,80,251,.5), radius 16px, buttons radius 16px. */
/* Stretching the cards puts the buttons of a row on one line whatever the text length. */
.kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; align-items: stretch; }
.kit-card { display: flex; flex-direction: column; gap: var(--s3); }
.kit-card-body { flex: 1; }
.kit-card[hidden] { display: none; }
.kit-card-shot { display: block; border-radius: 16px; overflow: hidden; }
.kit-card-shot img {
  width: 100%;
  display: block;
  aspect-ratio: 335 / 445;
  object-fit: cover;
  object-position: top center;
  border: 1.6px solid rgba(77, 79, 251, .5);
  border-radius: 16px;
  transition: transform .25s ease;
}
.kit-card:hover .kit-card-shot img { transform: scale(1.015); }
.kit-card-body { display: flex; flex-direction: column; gap: var(--s2); }
.kit-card-body h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.kit-card-body h2 a { color: var(--ink); text-decoration: none; }
.kit-card-body h2 a:hover { color: var(--primary); }
.kit-card-body p { font-size: 15.5px; color: var(--muted); }
/* The original splits the row in two: both buttons share the width, 10px apart. */
.kit-card-actions { display: flex; gap: 10px; margin-top: auto; padding-top: var(--s2); }
.kit-card-actions .kitp-btn {
  flex: 1;
  justify-content: center;
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: none;
}
.kit-card-actions .kitp-btn--ghost {
  background: rgba(77, 79, 251, .12);
  color: var(--ink);
  border: 0;
}
.kit-card-actions .kitp-btn--ghost:hover { background: rgba(77, 79, 251, .2); }

@media (max-width: 1100px) {
  .kit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .kit-browse { grid-template-columns: 1fr; gap: var(--s4); }
  .kit-filters, .kit-results { grid-column: auto; position: static; }
  .kit-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: #fff;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
  }
  .kit-filter-panel { display: none; padding-top: var(--s3); }
  .filters-open .kit-filter-panel { display: block; }
}
@media (max-width: 560px) {
  .kit-grid { grid-template-columns: 1fr; }
  .kit-toolbar { flex-direction: column; align-items: flex-start; }
}

/* Search box, built like the reference widget: a white pill holding the field and a round
   button. Measured there: radius 80px, shadow 0 1px 2px rgba(0,0,0,.08), button 50px. */
.kit-search {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: 0 1px 2px rgba(17, 19, 34, .08);
  padding: 6px 6px 6px 22px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kit-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(77, 79, 251, .15); }
.kit-search input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 11px 0;
}
.kit-search input:focus { outline: none; }
.kit-search input::placeholder { color: var(--muted); opacity: 1; }
.kit-search input::-webkit-search-cancel-button { cursor: pointer; }
.kit-search-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.kit-search-go:hover { background: var(--primary-dark); transform: scale(1.04); }
.kit-browse.is-loading .kit-grid { opacity: .5; transition: opacity .15s ease; }

/* Placeholder picture when a package has no screenshot yet. */
.kit-card-placeholder { width: 100%; height: auto; display: block; }

/* Three more packages from the same industry, under a package page. */
.kit-related { padding: var(--s6) 0 var(--s7); border-top: 1px solid var(--line); margin-top: var(--s6); }
.kit-related .kitp-h2 { text-align: center; }
.kit-related .kit-grid { align-items: stretch; }