body.spb-custom-blog-archive #primary.spbBlogArchive,
body.spb-custom-blog-archive main.spbBlogArchive {
  width: 100%;
  max-width: none;
  min-width: 0;
  float: none;
  margin: 0;
  padding: 0;
  color: #111827;
  font-family: inherit;
}

.spbBlogArchive,
.spbBlogArchive * {
  box-sizing: border-box;
}

.spbBlogArchive {
  padding: clamp(34px, 5vw, 72px) 16px;
  background: #fff;
}

.spbBlogArchive__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.spbBlogArchive__head {
  margin: 0 0 24px;
  max-width: 820px;
}

.spbBlogArchive__title {
  margin: 0;
  color: #111827;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.04em;
  font-weight: 900;
}

.spbBlogArchive__description {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 15px;
  line-height: 1.65;
}

.spbBlogArchive__description > :first-child { margin-top: 0; }
.spbBlogArchive__description > :last-child { margin-bottom: 0; }

.spbBlogArchive__grid {
  display: grid;
  grid-template-columns: repeat(var(--spb-blog-cols, 4), minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.spbBlogCards__article {
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
}

.spbBlogCards__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  text-decoration: none;
  color: #111827;
  transition: transform .18s ease, box-shadow .18s ease;
}

.spbBlogCards__card:hover,
.spbBlogCards__card:focus-visible {
  color: #111827;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .12);
}

.spbBlogCards__card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--spb-blog-button) 42%, transparent);
  outline-offset: 3px;
}

.spbBlogCards__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #e5e7eb;
  border-bottom: 1px solid #f1f5f9;
  overflow: hidden;
}

.spbBlogCards__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

.spbBlogCards__card:hover .spbBlogCards__media img,
.spbBlogCards__card:focus-visible .spbBlogCards__media img {
  transform: scale(1.035);
}

.spbBlogCards__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 14px 15px 15px;
}

.spbBlogCards__date {
  font-size: 12px;
  line-height: 1.2;
  color: #64748b;
  font-weight: 700;
}

.spbBlogCards__name {
  margin: 0;
  color: #111827;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}

.spbBlogCards__excerpt {
  margin: 0;
  color: #4b5563;
  font-size: 13.5px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}

.spbBlogCards__read {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  border-radius: 8px;
  background: var(--spb-blog-button);
  color: var(--spb-blog-button-text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  padding: 10px 13px;
  text-decoration: none;
}

.spbBlogCards__card:hover .spbBlogCards__read,
.spbBlogCards__card:focus-visible .spbBlogCards__read {
  filter: brightness(.94);
}

.spbBlogArchive__pagination {
  margin: 30px 0 0;
}

.spbBlogArchive__pagination .page-numbers {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.spbBlogArchive__pagination .page-numbers li {
  margin: 0;
  padding: 0;
}

.spbBlogArchive__pagination a.page-numbers,
.spbBlogArchive__pagination span.page-numbers {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.spbBlogArchive__pagination a.page-numbers:hover,
.spbBlogArchive__pagination a.page-numbers:focus-visible,
.spbBlogArchive__pagination span.page-numbers.current {
  border-color: var(--spb-blog-button);
  background: var(--spb-blog-button);
  color: var(--spb-blog-button-text);
  text-decoration: none;
}

.spbBlogArchive__pagination .prev,
.spbBlogArchive__pagination .next {
  padding-left: 15px;
  padding-right: 15px;
}

.spbBlogArchive__empty {
  padding: 34px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
}

.spbBlogArchive__empty h2 {
  margin: 0 0 8px;
  color: #111827;
}

.spbBlogArchive__empty p {
  margin: 0;
  color: #64748b;
}

@media (max-width: 980px) {
  .spbBlogArchive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .spbBlogArchive {
    padding: 30px 14px 42px;
  }

  .spbBlogArchive__head {
    margin-bottom: 18px;
  }

  .spbBlogArchive__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }

  .spbBlogCards__name,
  .spbBlogCards__excerpt {
    min-height: 0;
  }

  .spbBlogCards__read {
    width: 100%;
  }

  .spbBlogArchive__pagination a.page-numbers,
  .spbBlogArchive__pagination span.page-numbers {
    min-width: 38px;
    min-height: 38px;
  }
}