/**
 * KB Blog — OpenCart 3.0 front-end styles.
 * Ported from PrestaShop kbblogs-front.css v1.7.0 Premium Editorial.
 * 30-06-2026
 * @author    knowband.com <support@knowband.com>
 * @copyright 2026 Knowband
 */

/* === KB Blog Front-End Styles — v1.7.0 Premium Editorial === */

/* Google Fonts @import is now injected dynamically via the header event based on merchant font settings. */

/*
* Font-family variables intentionally not set here.
* They are injected dynamically by the header event (event.php) as inline <style> root tokens.
* based on the merchant's admin typography settings, so removing them here prevents the static
* file values from overriding the dynamic admin selection.
* 29-07-2026
*/

/* --- Custom Properties (tokens) --- */
:root {
  --kb-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --kb-font-heading: 'Playfair Display', 'Georgia', 'Times New Roman', serif;

  --kb-ink:     #18181B;
  --kb-text:    #27272A;
  --kb-muted:   #71717A;
  --kb-bg:      #FFFFFF;
  --kb-surface: #FAFAFA;
  --kb-border:  #E5E7EB;
  --kb-accent:  var(--kb-accent-custom, #2563EB);

  --kb-white:   #ffffff;

  --kb-measure: 720px;
  --kb-radius:  14px;
  --kb-radius-sm: 8px;
  --kb-gap:     28px;
  --kb-card-min: 280px;

  --kb-shadow:       0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --kb-shadow-hover: 0 12px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);

  --kb-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Font & colour scope --- */
.kb-blog-page,
.kb-home-block,
.kb-home-block-wrap,
.kbblogs-home-block-wrap,
.kb-col-widget,
.kb-footer-block {
  font-family: var(--kb-font-body);
  color: var(--kb-text);
}
/*
* Removed all explicit font-size rules so storefront text inherits the active theme default size.
* 30-07-2026
*/
.kb-blog-page,
.kb-home-block,
.kb-home-block-wrap,
.kbblogs-home-block-wrap,
.kb-col-widget,
.kb-footer-block,
.kbblogs-page,
#kbblogs-blog,
#kbblogs-post-page {
  line-height: 1.65;
  font-family: var(--kb-font-body, inherit);
}

/* --- Page layout --- */
.kb-blog-page { max-width: 1440px; margin: 0 auto; padding: 48px 24px; }

.kb-page-layout {
  display: flex;
  gap: var(--kb-gap);
  align-items: flex-start;
}
.kb-page-layout__main { flex: 1 1 0; min-width: 0; }
.kb-sidebar { flex: 0 0 300px; min-width: 0; }

.kb-sidebar-left  { flex-direction: row-reverse; }
.kb-sidebar-right { flex-direction: row; }
.kb-sidebar-none .kb-sidebar { display: none; }
.kb-sidebar-none .kb-page-layout__main { flex: 1 1 100%; }

/* --- Page header --- */
.kb-page-header {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--kb-border);
}
.kb-page-header__title {
  font-family: var(--kb-font-heading);
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--kb-ink);
  line-height: 1.15;
}
.kb-page-header__count { color: var(--kb-muted); margin: 0; }

/* --- Post card grid --- */
.kb-posts-grid {
  display: grid;
  gap: var(--kb-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kb-card-min, 280px)), 1fr));
}

.kb-layout-list.kb-posts-grid { grid-template-columns: 1fr; }

@media (max-width: 768px) {
  .kb-blog-page { padding: 32px 16px; }
  .kb-page-layout { flex-direction: column; }
  .kb-sidebar { flex: 0 0 auto; width: 100%; }
  .kb-sidebar-left { flex-direction: column; }
  .kb-sidebar-right { flex-direction: column; }
  /*
  * Mobile line-height tweak when a custom body font is active.
  * 30-07-2026
  */
  html[data-kb-font-body="custom"] .kb-blog-page,
  html[data-kb-font-body="custom"] .kb-home-block,
  html[data-kb-font-body="custom"] .kb-home-block-wrap,
  html[data-kb-font-body="custom"] .kbblogs-home-block-wrap,
  html[data-kb-font-body="custom"] .kb-col-widget,
  html[data-kb-font-body="custom"] .kb-footer-block,
  html[data-kb-font-body="custom"] .kbblogs-page,
  html[data-kb-font-body="custom"] #kbblogs-blog,
  html[data-kb-font-body="custom"] #kbblogs-post-page {
    line-height: 1.6;
  }
}
/*
* Applied desktop container sizing to #content (page uses id, not .content class).
* 07-07-2026
*/
@media (min-width: 1200px) {
  #content {
    width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }
}

/* --- Post card entrance animation --- */
@keyframes kb-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Post card --- */
.kb-post-card {
  background: var(--kb-bg);
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--kb-shadow);
  transition: transform var(--kb-transition), box-shadow var(--kb-transition);
  animation: kb-fade-up 0.4s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .kb-post-card { transition: none; animation: none; }
}
.kb-post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--kb-shadow-hover);
}
.kb-post-card__img-wrap { display: block; overflow: hidden; aspect-ratio: 16/9; position: relative; }
.kb-post-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--kb-transition); }
@media (prefers-reduced-motion: reduce) { .kb-post-card__img { transition: none; } }
.kb-post-card:hover .kb-post-card__img { transform: scale(1.04); }
.kb-post-card__ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
}
.kb-post-card__ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 45%);
}
.kb-post-card__ph-mono {
  position: relative;
  font-family: var(--kb-font-heading, 'Playfair Display', Georgia, serif);
  line-height: 1;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  text-transform: uppercase;
}
.kb-posts-grid .kb-post-card:nth-child(6n+2) .kb-post-card__ph { background: linear-gradient(135deg, #0EA5E9 0%, #2563EB 100%); }
.kb-posts-grid .kb-post-card:nth-child(6n+3) .kb-post-card__ph { background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%); }
.kb-posts-grid .kb-post-card:nth-child(6n+4) .kb-post-card__ph { background: linear-gradient(135deg, #10B981 0%, #059669 100%); }
.kb-posts-grid .kb-post-card:nth-child(6n+5) .kb-post-card__ph { background: linear-gradient(135deg, #EC4899 0%, #BE185D 100%); }
.kb-posts-grid .kb-post-card:nth-child(6n+6) .kb-post-card__ph { background: linear-gradient(135deg, #14B8A6 0%, #0E7490 100%); }
.kb-post-card__body { padding: 20px 20px 20px; display: flex; flex-direction: column; flex: 1; gap: 10px; }
.kb-post-card__title { font-family: var(--kb-font-heading); font-weight: 700; margin: 0; line-height: 1.35; }
.kb-post-card__title a { color: var(--kb-ink); text-decoration: none; }
.kb-post-card__title a:hover, .kb-post-card__title a:focus { text-decoration: underline; }
.kb-post-card__title a:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; border-radius: 2px; }
.kb-post-card__excerpt { color: #52525B; line-height: 1.7; margin: 0; flex: 1; }
.kb-post-card__meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--kb-muted); margin-top: auto; }
.kb-post-card__meta i { margin-right: 3px; }

.kb-layout-list .kb-post-card { flex-direction: row; }
.kb-layout-list .kb-post-card__img-wrap { flex: 0 0 200px; aspect-ratio: unset; height: 140px; }
@media (max-width: 768px) {
  .kb-layout-list .kb-post-card { flex-direction: column; }
  .kb-layout-list .kb-post-card__img-wrap { flex: none; height: auto; aspect-ratio: 16/9; }
}

.kb-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
  color: var(--kb-accent);
  margin-top: 8px;
}
.kb-read-more:hover { text-decoration: underline; }
.kb-read-more:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; border-radius: 2px; }

/* --- Meta spans --- */
.kb-meta-author, .kb-meta-date, .kb-meta-readtime, .kb-meta-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --- Category chip --- */
.kb-category-chip {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 100px;
  font-weight: 600;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.2);
  color: var(--kb-accent);
  text-decoration: none;
  transition: background var(--kb-transition);
}
@media (prefers-reduced-motion: reduce) { .kb-category-chip { transition: none; } }
.kb-category-chip:hover { background: rgba(37,99,235,.15); }

/* --- Tag chip --- */
.kb-tag-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--kb-radius-sm);
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  color: var(--kb-text);
  text-decoration: none;
  transition: background var(--kb-transition);
}
@media (prefers-reduced-motion: reduce) { .kb-tag-chip { transition: none; } }
.kb-tag-chip:hover { background: var(--kb-border); }
.kb-tag-chip--hero { padding: 6px 16px; margin-bottom: 8px; }

/* --- Pagination --- */
.kb-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.kb-pagination__pages { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.kb-pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--kb-radius-sm);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--kb-border);
  color: var(--kb-text);
  background: var(--kb-bg);
  transition: background var(--kb-transition), color var(--kb-transition);
}
@media (prefers-reduced-motion: reduce) { .kb-pagination__page { transition: none; } }
.kb-pagination__page:hover { background: var(--kb-surface); color: var(--kb-accent); }
.kb-pagination__page--current { background: var(--kb-accent); color: #fff; border-color: var(--kb-accent); }
.kb-pagination__prev, .kb-pagination__next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 36px;
  border-radius: var(--kb-radius-sm);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--kb-border);
  color: var(--kb-text);
  background: var(--kb-bg);
  transition: background var(--kb-transition);
}
@media (prefers-reduced-motion: reduce) { .kb-pagination__prev, .kb-pagination__next { transition: none; } }
.kb-pagination__prev:hover, .kb-pagination__next:hover { background: var(--kb-surface); }
.kb-pagination__prev:focus-visible, .kb-pagination__next:focus-visible,
.kb-pagination__page:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; }

/* --- Empty state --- */
.kb-empty-state {
  padding: 80px 32px;
  color: var(--kb-muted);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* --- Sidebar widgets --- */
.kb-sidebar { display: flex; flex-direction: column; gap: 24px; }
.kb-widget {
  background: var(--kb-bg);
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
  padding: 24px;
  box-shadow: var(--kb-shadow);
}
.kb-widget__title {
  font-family: var(--kb-font-heading);
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--kb-border);
  color: var(--kb-ink);
}

/* Search widget */
.kb-search-form { display: flex; }
.kb-search-form__inner { display: flex; gap: 0; border: 1px solid var(--kb-border); border-radius: var(--kb-radius-sm); overflow: hidden; width: 100%; }
.kb-search-form__input { flex: 1; padding: 8px 12px; border: none; outline: none; background: var(--kb-bg); }
.kb-search-form__input:focus { background: var(--kb-surface); }
.kb-search-form__btn { padding: 8px 14px; background: var(--kb-accent); color: #fff; border: none; cursor: pointer; transition: opacity var(--kb-transition); }
@media (prefers-reduced-motion: reduce) { .kb-search-form__btn { transition: none; } }
.kb-search-form__btn:hover { opacity: .85; }
.kb-search-form__btn:focus-visible { outline: 2px solid var(--kb-accent); }

/* Categories list */
.kb-cat-list, .kb-recent-list, .kb-popular-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kb-cat-list__link, .kb-recent-list__link, .kb-popular-list__link { text-decoration: none; color: var(--kb-text); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kb-cat-list__link:hover, .kb-recent-list__link:hover, .kb-popular-list__link:hover { text-decoration: underline; }
.kb-cat-list__name, .kb-archive-list__label { flex: 1; min-width: 0; word-break: break-word; }
.kb-cat-list__count { color: var(--kb-muted); flex-shrink: 0; white-space: nowrap; }
.kb-recent-list__date { color: var(--kb-muted); display: block; margin-top: 4px; }
.kb-popular-list__views { color: var(--kb-muted); display: block; margin-top: 4px; }

/*
* Sidebar recent/popular rows with optional thumbnail — flex layout, no nested boxes.
* 01-07-2026
*/
.kb-recent-list__item--thumb,
.kb-popular-list__item--thumb {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.kb-recent-list__thumb,
.kb-popular-list__thumb {
  flex: 0 0 48px;
  display: block;
  line-height: 0;
  border-radius: var(--kb-radius-sm);
  overflow: hidden;
}
.kb-recent-list__thumb img,
.kb-popular-list__thumb img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--kb-radius-sm);
}
.kb-recent-list__body,
.kb-popular-list__body {
  flex: 1;
  min-width: 0;
}
.kb-recent-list__item--thumb .kb-recent-list__link,
.kb-popular-list__item--thumb .kb-popular-list__link {
  display: block;
  justify-content: flex-start;
}

/* Archives list */
.kb-archive-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kb-archive-list__link { text-decoration: none; color: var(--kb-text); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kb-archive-list__link:hover { text-decoration: underline; }
.kb-archive-list__link.is-active { font-weight: 700; color: var(--kb-accent); }
.kb-archive-list__count { color: var(--kb-muted); flex-shrink: 0; white-space: nowrap; }

/* Tag cloud */
.kb-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Category page header --- */
.kb-category-header { display: flex; gap: 20px; align-items: flex-start; }
.kb-category-header__img-wrap { flex: 0 0 120px; }
.kb-category-header__img { width: 100%; border-radius: var(--kb-radius); display: block; }
.kb-category-header__content { flex: 1; }
.kb-category-header__desc { color: #52525B; margin: 8px 0 0; line-height: 1.6; }

/* --- Author header --- */
.kb-author-header { display: flex; gap: 20px; align-items: flex-start; }
.kb-author-header__avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.kb-author-header__avatar--placeholder { width: 96px; height: 96px; border-radius: 50%; background: var(--kb-surface); border: 1px solid var(--kb-border); display: flex; align-items: center; justify-content: center; color: #A1A1AA; }
.kb-author-header__info { flex: 1; }
.kb-author-header__bio { color: #52525B; margin: 8px 0 0; line-height: 1.6; }

/* --- Social links --- */
.kb-author-social { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.kb-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  color: var(--kb-text);
  text-decoration: none;
  transition: background var(--kb-transition), color var(--kb-transition);
}
@media (prefers-reduced-motion: reduce) { .kb-social-link { transition: none; } }
.kb-social-link:hover { background: var(--kb-ink); color: #fff; }
.kb-social-link:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; }

/* --- Post detail page --- */
.kb-post-detail { max-width: var(--kb-measure); margin: 0 auto; }
.kb-post-detail__hero { border-radius: var(--kb-radius); overflow: hidden; margin-bottom: 48px; aspect-ratio: 21/9; box-shadow: var(--kb-shadow-hover); }
.kb-post-detail__hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-post-detail__header { margin-bottom: 32px; }
.kb-post-detail__cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.kb-post-detail__title { font-family: var(--kb-font-heading); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 24px; color: var(--kb-ink); }
.kb-post-detail__meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--kb-muted); align-items: center; padding: 16px 0; border-top: 1px solid var(--kb-border); border-bottom: 1px solid var(--kb-border); margin-bottom: 40px; }
.kb-meta-author { display: inline-flex; align-items: center; gap: 6px; }
.kb-meta-author__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--kb-border); }

/* Post body typography */
.kb-post-detail__content { font-family: var(--kb-font-body); line-height: 1.8; color: var(--kb-text); }
.kb-post-detail__content h2 { font-family: var(--kb-font-heading); font-weight: 700; margin: 2.5em 0 0.75em; color: var(--kb-ink); line-height: 1.2; }
.kb-post-detail__content h3 { font-family: var(--kb-font-heading); font-weight: 700; margin: 2em 0 0.6em; color: var(--kb-ink); line-height: 1.25; }
.kb-post-detail__content h4 { font-weight: 700; margin: 1.75em 0 0.5em; color: var(--kb-ink); }
.kb-post-detail__content p { margin: 0 0 1.5em; }
.kb-post-detail__content ul, .kb-post-detail__content ol { padding-left: 1.75em; margin: 0 0 1.5em; }
.kb-post-detail__content li { margin-bottom: .6em; line-height: 1.7; }
.kb-post-detail__content img { max-width: 100%; height: auto; border-radius: var(--kb-radius-sm); display: block; margin: 2em auto; box-shadow: var(--kb-shadow); }
.kb-post-detail__content blockquote { border-left: 4px solid var(--kb-accent); padding: 1em 1.5em; margin: 2em 0; color: var(--kb-muted); font-style: italic; background: var(--kb-surface); border-radius: 0 var(--kb-radius-sm) var(--kb-radius-sm) 0; }
.kb-post-detail__content pre { background: #18181B; color: #FAFAFA; padding: 1.5em; border-radius: var(--kb-radius-sm); overflow-x: auto; margin: 2em 0; box-shadow: var(--kb-shadow); }
.kb-post-detail__content code { background: var(--kb-surface); border: 1px solid var(--kb-border); padding: .15em .4em; border-radius: 4px; }
.kb-post-detail__content pre code { background: none; border: none; padding: 0; }
.kb-post-detail__content a { color: var(--kb-accent); text-decoration: underline; text-underline-offset: 2px; }
.kb-post-detail__content a:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; border-radius: 2px; }
.kb-post-detail__content table { width: 100%; border-collapse: collapse; margin: 2em 0; }
.kb-post-detail__content th, .kb-post-detail__content td { border: 1px solid var(--kb-border); padding: .65em 1em; text-align: left; }
.kb-post-detail__content th { background: var(--kb-surface); font-weight: 700; }
.kb-post-detail__tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--kb-border); }
.kb-post-detail__tags-label { color: var(--kb-muted); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }

/* Author bio box */
.kb-author-bio { display: flex; gap: 24px; margin-top: 48px; padding: 28px 32px; background: var(--kb-surface); border: 1px solid var(--kb-border); border-radius: var(--kb-radius); align-items: flex-start; box-shadow: var(--kb-shadow); }
.kb-author-bio__avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid var(--kb-border); box-shadow: var(--kb-shadow); }
.kb-author-bio__avatar--placeholder { width: 88px; height: 88px; border-radius: 50%; background: var(--kb-bg); border: 2px solid var(--kb-border); display: flex; align-items: center; justify-content: center; color: #A1A1AA; flex-shrink: 0; }
.kb-author-bio__info { flex: 1; }
.kb-author-bio__name { font-family: var(--kb-font-heading); font-weight: 700; display: block; margin-bottom: 6px; color: var(--kb-ink); }
.kb-author-bio__text { color: var(--kb-muted); line-height: 1.7; margin: 0; }

/* Prev/Next nav */
.kb-post-prevnext { display: flex; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--kb-border); }
.kb-post-prevnext__prev, .kb-post-prevnext__next { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--kb-border); border-radius: var(--kb-radius); text-decoration: none; color: var(--kb-text); background: var(--kb-bg); transition: background var(--kb-transition), box-shadow var(--kb-transition); }
@media (prefers-reduced-motion: reduce) { .kb-post-prevnext__prev, .kb-post-prevnext__next { transition: none; } }
.kb-post-prevnext__prev { border-left: 3px solid var(--kb-accent); }
.kb-post-prevnext__next { border-right: 3px solid var(--kb-accent); }
.kb-post-prevnext__prev:hover, .kb-post-prevnext__next:hover { background: var(--kb-surface); box-shadow: var(--kb-shadow); }
.kb-post-prevnext__next { text-align: right; align-items: flex-end; }
.kb-post-prevnext__prev:focus-visible, .kb-post-prevnext__next:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; border-radius: var(--kb-radius); }
.kb-post-prevnext__label { color: var(--kb-accent); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.kb-post-prevnext__title { font-weight: 600; }
@media (max-width: 480px) {
  .kb-post-prevnext { flex-direction: column; }
  .kb-post-prevnext__next { text-align: left; align-items: flex-start; }
}
@media (max-width: 768px) {
  .kb-post-detail__hero { aspect-ratio: 16/9; margin-bottom: 32px; }
  .kb-author-bio { flex-direction: column; padding: 20px; }
}

/* --- sr-only --- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- Sticky / featured indicators --- */
.kb-post-sticky .kb-post-card__body::before { content: ''; display: block; width: 100%; height: 3px; background: var(--kb-accent); border-radius: 3px 3px 0 0; margin-bottom: 8px; opacity: .3; }

/* ================================================================
   Comments section
================================================================ */
.kb-comments { margin-top: 48px; padding-top: 32px; border-top: 2px solid var(--kb-border); }
.kb-comments__heading { font-family: var(--kb-font-heading); font-weight: 700; margin: 0 0 28px; display: flex; align-items: center; gap: 8px; }
.kb-comments__count { font-weight: 400; color: var(--kb-muted); }
.kb-comments__empty { color: var(--kb-muted); margin: 0 0 24px; }
.kb-comments__login-prompt { color: #52525B; margin-top: 16px; }
.kb-comment { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--kb-border); align-items: flex-start; }
.kb-comment:last-child { border-bottom: none; }
.kb-comment__avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .04em; user-select: none; }
.kb-comment__body { flex: 1; min-width: 0; }
.kb-comment__header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.kb-comment__author { font-weight: 700; color: var(--kb-ink); }
.kb-comment__date   { color: var(--kb-muted); }
.kb-comment__text   { margin: 0; line-height: 1.7; color: var(--kb-text); word-break: break-word; }
.kb-comments__load-more-wrap { text-align: center; padding: 20px 0 8px; }
.kb-comment-form-wrap { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--kb-border); }
.kb-comment-form__heading { font-weight: 700; margin: 0 0 20px; }
.kb-comment-form__loggedin { color: var(--kb-muted); margin: 0 0 16px; }
.kb-form-row { margin-bottom: 16px; }
.kb-form-row--half { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .kb-form-row--half { grid-template-columns: 1fr; } }
.kb-form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.kb-form-label { font-weight: 600; color: var(--kb-text); }
.kb-form-hint { color: var(--kb-muted); font-weight: 400; margin-left: 4px; }
.kb-required { color: #e53e3e; }
.kb-form-control { padding: 9px 12px; border: 1px solid var(--kb-border); border-radius: var(--kb-radius-sm); background: var(--kb-bg); color: var(--kb-text); width: 100%; box-sizing: border-box; transition: border-color var(--kb-transition), box-shadow var(--kb-transition); }
@media (prefers-reduced-motion: reduce) { .kb-form-control { transition: none; } }
.kb-form-control:focus { outline: none; border-color: var(--kb-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.kb-form-control.kb-input-error { border-color: #e53e3e; }
.kb-comment-form__textarea { resize: vertical; min-height: 120px; }
.kb-field-error { color: #e53e3e; display: none; margin-top: 2px; }
.kb-char-count  { color: var(--kb-muted); text-align: right; margin-top: 3px; }
#kb-comment-response { padding: 10px 14px; border-radius: var(--kb-radius-sm); margin-bottom: 16px; }
.kb-alert--success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.kb-alert--error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.kb-alert--pending { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.kb-hp-field { display: none !important; position: absolute; left: -9999px; visibility: hidden; }
.kb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 20px; border-radius: var(--kb-radius-sm); font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--kb-transition), color var(--kb-transition), border-color var(--kb-transition), opacity var(--kb-transition); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .kb-btn { transition: none; } }
.kb-btn:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; }
.kb-btn--primary { background: var(--kb-accent); color: #fff; border-color: var(--kb-accent); }
.kb-btn--primary:hover { opacity: .9; }
.kb-btn--primary:disabled { opacity: .5; cursor: not-allowed; }
.kb-btn--outline { background: var(--kb-bg); color: var(--kb-text); border-color: var(--kb-border); }
.kb-btn--outline:hover { background: var(--kb-surface); }
.kb-form-actions { margin-top: 8px; }
.kb-comment-form { max-width: 640px; }
.kb-comment-submit { padding: 10px 28px; font-weight: 600; }
.kb-comment-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ================================================================
   Widget / hook blocks
================================================================ */

/* ---- Home block ---- */
.kb-home-block-wrap,
.kbblogs-home-block-wrap {
  width: 100%;
  margin: 48px 0 0;
  padding: 56px 0;
  background: var(--kb-surface);
  border-top: 1px solid var(--kb-border);
  font-family: var(--kb-font-body);
  color: var(--kb-text);
  box-sizing: border-box;
}

.kb-home-block-wrap .container,
.kbblogs-home-block-wrap .container {
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.kb-home-block {
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--kb-font-body);
}
.kb-home-block__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.kb-home-block__heading { font-family: var(--kb-font-heading); font-weight: 800; margin: 0; color: var(--kb-ink); }
.kb-home-block__view-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--kb-text); text-decoration: none; border: 1px solid var(--kb-border); padding: 6px 14px; border-radius: var(--kb-radius-sm); background: var(--kb-bg); transition: background var(--kb-transition), box-shadow var(--kb-transition); }
@media (prefers-reduced-motion: reduce) { .kb-home-block__view-all { transition: none; } }
.kb-home-block__view-all:hover { background: var(--kb-border); }
.kb-home-block__view-all:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; border-radius: var(--kb-radius-sm); }
.kb-home-block__grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kb-home-block__grid--1,
.kbblogs-home-block__grid.kb-home-block__grid--1 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.kb-home-block__grid--2,
.kbblogs-home-block__grid.kb-home-block__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kb-home-block__grid--3,
.kbblogs-home-block__grid.kb-home-block__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kb-home-block__grid--4,
.kbblogs-home-block__grid.kb-home-block__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .kb-home-block__grid,
  .kb-home-block__grid--3,
  .kb-home-block__grid--4,
  .kbblogs-home-block__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-home-block__grid--1 { max-width: none; }
}
@media (max-width: 600px) {
  .kb-home-block__grid,
  .kb-home-block__grid--2,
  .kb-home-block__grid--3,
  .kb-home-block__grid--4,
  .kbblogs-home-block__grid { grid-template-columns: minmax(0, 1fr); }
}
.kb-home-card { background: var(--kb-bg); border: 1px solid var(--kb-border); border-radius: var(--kb-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--kb-transition), box-shadow var(--kb-transition); }
@media (prefers-reduced-motion: reduce) { .kb-home-card { transition: none; } }
.kb-home-card:hover { transform: translateY(-3px); box-shadow: var(--kb-shadow-hover); }
.kb-home-card__img-link { display: block; overflow: hidden; aspect-ratio: 16/9; background: var(--kb-border); }
.kb-home-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--kb-transition); }
@media (prefers-reduced-motion: reduce) { .kb-home-card__img { transition: none; } }
.kb-home-card:hover .kb-home-card__img { transform: scale(1.04); }
.kb-home-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #A1A1AA; }
.kb-home-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.kb-home-card__date { color: var(--kb-muted); }
.kb-home-card__title { font-family: var(--kb-font-heading); font-weight: 700; margin: 0; line-height: 1.35; }
.kb-home-card__title a { color: var(--kb-ink); text-decoration: none; }
.kb-home-card__title a:hover, .kb-home-card__title a:focus { text-decoration: underline; }
.kb-home-card__title a:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; border-radius: 2px; }
.kb-home-card__excerpt { color: #52525B; line-height: 1.6; margin: 0; flex: 1; }
.kb-home-card__readmore { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--kb-accent); text-decoration: none; margin-top: 4px; }
.kb-home-card__readmore:hover { text-decoration: underline; }
.kb-home-card__readmore:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; border-radius: 2px; }

/*
* kbblogs-home-* aliases mirror kb-home-* for the home recent posts widget.
* 01-07-2026
*/
.kbblogs-home-block-wrap,
.kbblogs-home-block,
.kbblogs-home-card { box-sizing: border-box; }

.kbblogs-home-card__img { max-width: 100%; height: auto; }

/*
* Home recent posts — same card grid as blog listing; scoped for theme overrides.
* Stylesheet is also linked inline from home_recent_block.twig when header already rendered.
* 01-07-2026
*/
#kbblogs-home-recent.kbblogs-home-recent {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 48px;
  margin-bottom: 0;
  padding: 48px 0 56px;
  background: var(--kb-surface, #fafafa);
  border-top: 1px solid var(--kb-border, #e5e7eb);
  box-sizing: border-box;
  clear: both;
}

#kbblogs-home-recent .container {
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

#kbblogs-home-recent .kbblogs-home-recent__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

#kbblogs-home-recent .kbblogs-home-recent__title {
  font-family: var(--kb-font-heading, Georgia, serif);
  font-weight: 800;
  margin: 0;
  color: var(--kb-ink, #18181b);
}

#kbblogs-home-recent .kbblogs-home-recent__view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

#kbblogs-home-recent .kbblogs-home-grid {
  display: grid !important;
  gap: 24px;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(var(--kb-home-cols, 3), minmax(0, 1fr));
}

/*
* Bootstrap .row injects :before/:after table cells that break CSS grid tracks.
* Home grid must not use the row class — guard anyway if a theme adds it.
* 01-07-2026
*/
#kbblogs-home-recent .kbblogs-home-grid::before,
#kbblogs-home-recent .kbblogs-home-grid::after {
  display: none !important;
  content: none !important;
}

#kbblogs-home-recent .kbblogs-home-grid > .kbblogs-grid-col {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  padding: 0 !important;
  min-width: 0;
}

#kbblogs-home-recent .kbblogs-post-card,
#kbblogs-home-recent .kbblogs-card {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  background: var(--kb-bg, #fff);
  border: 1px solid var(--kb-border, #e5e7eb);
  border-radius: var(--kb-radius, 14px);
  overflow: hidden;
  box-shadow: var(--kb-shadow, 0 1px 4px rgba(0,0,0,.06));
}

#kbblogs-home-recent .kbblogs-card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--kb-border, #e5e7eb);
}

#kbblogs-home-recent .kbblogs-card-thumb img,
#kbblogs-home-recent .kbblogs-cover-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: cover;
  display: block;
}

#kbblogs-home-recent .kbblogs-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

#kbblogs-home-recent .kbblogs-card-title {
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}

#kbblogs-home-recent .kbblogs-card-title a {
  color: var(--kb-ink, #18181b);
  text-decoration: none;
}

#kbblogs-home-recent .kbblogs-card-title a:hover {
  text-decoration: underline;
}

#kbblogs-home-recent .kbblogs-card-excerpt {
  color: #52525b;
  line-height: 1.6;
  margin: 0;
}

#kbblogs-home-recent .kbblogs-card-footer {
  margin-top: auto;
  padding-top: 8px;
}

@media (max-width: 1024px) {
  #kbblogs-home-recent .kbblogs-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  #kbblogs-home-recent .kbblogs-home-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---- Column widget ---- */
.kb-col-widget { display: flex; flex-direction: column; gap: 20px; max-width: 280px; width: 100%; }
@media (max-width: 767px) { .kb-col-widget { max-width: 100%; } }

/* ---- Footer block (legacy kb-footer-* — home/widgets only) ---- */
.kb-footer-block { padding: 0; min-width: 180px; }
.kb-footer-block__heading { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; color: inherit; display: flex; align-items: center; gap: 6px; }
.kb-footer-block__list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.kb-footer-block__item { line-height: 1.4; }
.kb-footer-block__link { color: inherit; text-decoration: none; opacity: .85; transition: opacity var(--kb-transition); display: block; }
@media (prefers-reduced-motion: reduce) { .kb-footer-block__link { transition: none; } }
.kb-footer-block__link:hover { opacity: 1; text-decoration: underline; }
.kb-footer-block__link:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; border-radius: 2px; }
.kb-footer-block__visit-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: inherit; text-decoration: none; opacity: .9; }
.kb-footer-block__visit-link:hover { opacity: 1; text-decoration: underline; }
.kb-footer-block__visit-link:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 360px) { .kb-footer-block { display: none; } }
.kb-footer-wrapper { width: 100%; padding: 15px 0; box-sizing: border-box; }

/*
* Store theme footer column — inherit OpenCart footer link colours/spacing; no KB dark bg.
* Injected via footerAfter into common/footer row. 01-07-2026
*/
footer .kbblogs-footer-col {
  margin-bottom: 20px;
}
footer .kbblogs-footer-col h5 {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
}
footer .kbblogs-footer-col .list-unstyled > li {
  margin-bottom: 8px;
  line-height: 1.5;
}
footer .kbblogs-footer-col .list-unstyled > li > a {
  color: #ccc;
  text-decoration: none;
  display: block;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
footer .kbblogs-footer-col .list-unstyled > li > a:hover,
footer .kbblogs-footer-col .list-unstyled > li > a:focus {
  color: #fff;
  text-decoration: underline;
}
footer .kbblogs-footer-col .kbblogs-footer-visit > a {
  font-weight: 600;
  margin-top: 4px;
}
/*
* Fallback footer inject containers (footerAfter / DOM inject).
* 01-07-2026
*/
.kbblogs-footer-fallback,
.kbblogs-footer-inject {
  padding: 15px 0;
  clear: both;
}

/* ================================================================
   Social share bar, related products, related posts
================================================================ */
.kb-share-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--kb-border); }
.kb-share-bar__label { font-weight: 600; color: #52525B; display: inline-flex; align-items: center; gap: 5px; }
.kb-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; text-decoration: none; color: #fff; border: none; transition: opacity var(--kb-transition), transform var(--kb-transition); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .kb-share-btn { transition: none; } }
.kb-share-btn:hover    { opacity: .85; transform: translateY(-2px); }
.kb-share-btn:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 3px; border-radius: 50%; }
.kb-share-btn--facebook { background: #1877F2; }
.kb-share-btn--twitter  { background: #000000; }
.kb-share-btn--linkedin { background: #0A66C2; }
.kb-share-btn--whatsapp { background: #25D366; }
.kb-share-btn--email    { background: #6B7280; }

/* ---- Related products ---- */
.kb-related-products { margin-top: 48px; padding-top: 32px; border-top: 2px solid var(--kb-border); }
.kb-related-products__heading { font-weight: 700; margin: 0 0 24px; display: flex; align-items: center; gap: 8px; color: var(--kb-ink); }
.kb-related-products__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1024px) { .kb-related-products__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kb-related-products__grid { grid-template-columns: 1fr; } }
.kb-product-card { background: var(--kb-bg); border: 1px solid var(--kb-border); border-radius: var(--kb-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--kb-transition), box-shadow var(--kb-transition); }
@media (prefers-reduced-motion: reduce) { .kb-product-card { transition: none; } }
.kb-product-card:hover { transform: translateY(-3px); box-shadow: var(--kb-shadow-hover); }
.kb-product-card__img-link { display: block; overflow: hidden; aspect-ratio: 1 / 1; background: var(--kb-surface); }
.kb-product-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--kb-transition); }
@media (prefers-reduced-motion: reduce) { .kb-product-card__img { transition: none; } }
.kb-product-card:hover .kb-product-card__img { transform: scale(1.04); }
.kb-product-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #A1A1AA; }
.kb-product-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.kb-product-card__name { font-weight: 600; margin: 0; line-height: 1.35; }
.kb-product-card__name a { color: var(--kb-text); text-decoration: none; }
.kb-product-card__name a:hover, .kb-product-card__name a:focus { text-decoration: underline; }
.kb-product-card__name a:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; border-radius: 2px; }
.kb-product-card__price { font-weight: 700; color: var(--kb-text); margin-top: auto; }
.kb-product-card__btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; padding: 7px 14px; border-radius: var(--kb-radius-sm); font-weight: 600; background: var(--kb-accent); color: #fff; text-decoration: none; transition: opacity var(--kb-transition); }
@media (prefers-reduced-motion: reduce) { .kb-product-card__btn { transition: none; } }
.kb-product-card__btn:hover { opacity: .85; }
.kb-product-card__btn:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; border-radius: var(--kb-radius-sm); }

/* ---- Related posts ---- */
.kb-related-posts { margin-top: 48px; padding-top: 32px; border-top: 2px solid var(--kb-border); }
.kb-related-posts__heading { font-weight: 700; margin: 0 0 24px; display: flex; align-items: center; gap: 8px; color: var(--kb-ink); }
.kb-related-posts__grid { display: grid; grid-template-columns: repeat(var(--kb-rp-per-row, 3), 1fr); gap: var(--kb-gap); }
@media (max-width: 991px) { .kb-related-posts__grid { grid-template-columns: repeat(min(var(--kb-rp-per-row, 3), 2), 1fr); } }
@media (max-width: 575px) { .kb-related-posts__grid { grid-template-columns: 1fr; } }

/* ---- Related posts carousel ---- */
.kb-rp-carousel-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.kb-rp-carousel { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--kb-gap); padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--kb-border) transparent; }
.kb-rp-carousel::-webkit-scrollbar { height: 4px; }
.kb-rp-carousel::-webkit-scrollbar-track { background: transparent; }
.kb-rp-carousel::-webkit-scrollbar-thumb { background: var(--kb-border); border-radius: 2px; }
.kb-rp-carousel:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; }
.kb-rp-carousel__item { flex: 0 0 calc((100% - var(--kb-gap) * 2) / 3); min-width: 220px; scroll-snap-align: start; }
@media (max-width: 767px) { .kb-rp-carousel__item { flex: 0 0 calc(100% - 24px); } }
@media (prefers-reduced-motion: reduce) { .kb-rp-carousel { scroll-snap-type: none; } }
.kb-rp-carousel__prev, .kb-rp-carousel__next { background: var(--kb-bg); border: 1px solid var(--kb-border); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; color: var(--kb-text); transition: background var(--kb-transition), color var(--kb-transition); box-shadow: var(--kb-shadow); }
.kb-rp-carousel__prev:hover, .kb-rp-carousel__next:hover { background: var(--kb-accent); color: #fff; border-color: var(--kb-accent); }
.kb-rp-carousel__prev:focus-visible, .kb-rp-carousel__next:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; }
.kb-rp-carousel__prev[disabled], .kb-rp-carousel__next[disabled] { opacity: .35; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .kb-rp-carousel__prev, .kb-rp-carousel__next { transition: none; } }

/* ---- Product-page blog block ---- */
.kb-product-posts-block { margin-top: 16px; padding: 20px; background: var(--kb-surface); border: 1px solid var(--kb-border); border-radius: var(--kb-radius); }
.kb-product-posts-block__heading { font-weight: 700; margin: 0 0 16px; display: flex; align-items: center; gap: 6px; color: var(--kb-ink); padding-bottom: 10px; border-bottom: 1px solid var(--kb-border); }
.kb-product-posts-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.kb-product-posts-list__item { display: flex; gap: 12px; align-items: flex-start; }
.kb-product-posts-list__thumb-link { flex-shrink: 0; display: block; border-radius: 4px; overflow: hidden; line-height: 0; }
.kb-product-posts-list__thumb { width: 72px; height: 54px; object-fit: cover; display: block; border-radius: 4px; transition: transform var(--kb-transition); }
@media (prefers-reduced-motion: reduce) { .kb-product-posts-list__thumb { transition: none; } }
.kb-product-posts-list__thumb-link:hover .kb-product-posts-list__thumb { transform: scale(1.04); }
.kb-product-posts-list__info { flex: 1; min-width: 0; }
.kb-product-posts-list__title { font-weight: 600; color: var(--kb-text); text-decoration: none; display: block; line-height: 1.4; margin-bottom: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kb-product-posts-list__title:hover { text-decoration: underline; }
.kb-product-posts-list__title:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; border-radius: 2px; }
.kb-product-posts-list__date { color: var(--kb-muted); display: block; }

/* ================================================================
   Gallery
================================================================ */
.kb-post-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.kb-gallery-thumb { border: none; padding: 0; cursor: pointer; border-radius: var(--kb-radius-sm); overflow: hidden; background: var(--kb-surface); transition: transform var(--kb-transition), box-shadow var(--kb-transition); }
@media (prefers-reduced-motion: reduce) { .kb-gallery-thumb { transition: none; } }
.kb-gallery-thumb:hover { transform: scale(1.04); box-shadow: var(--kb-shadow-hover); }
.kb-gallery-thumb:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; }
.kb-gallery-thumb__img { display: block; width: 120px; height: 90px; object-fit: cover; }

/* ================================================================
   Image zoom
================================================================ */
.kb-zoom-wrap { position: relative; display: inline-block; }
.kb-zoom-enabled { transition: transform 0.3s ease; cursor: zoom-in; }
.kb-zoom-enabled:hover { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { .kb-zoom-enabled { transition: none; } .kb-zoom-enabled:hover { transform: none; } }

/* ================================================================
   Table of Contents
================================================================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.kb-toc--top { background: var(--kb-surface); border: 1px solid var(--kb-border); border-radius: var(--kb-radius-sm); padding: 20px 24px; margin-bottom: 32px; }
.kb-toc-body-wrap { display: flex; gap: 32px; align-items: flex-start; }
.kb-toc-body-wrap--left { flex-direction: row; }
.kb-toc-body-wrap--right { flex-direction: row-reverse; }
.kb-toc-body-wrap .kb-toc--side { flex: 0 0 240px; min-width: 200px; max-width: 280px; background: var(--kb-surface); border: 1px solid var(--kb-border); border-radius: var(--kb-radius-sm); padding: 18px 20px; }
.kb-toc--fixed { position: sticky; top: 80px; max-height: calc(100vh - 120px); overflow-y: auto; }
.kb-toc-body-wrap__content { flex: 1; min-width: 0; }
.kb-toc-body-wrap__content img { max-width: 100%; height: auto; box-sizing: border-box; }
@media (max-width: 767px) { .kb-toc-body-wrap { flex-direction: column !important; } .kb-toc-body-wrap .kb-toc--side { flex: none; max-width: 100%; width: 100%; position: static !important; } }
.kb-toc__title { font-weight: 700; margin-bottom: 10px; color: var(--kb-ink); font-family: var(--kb-font-heading); }
.kb-toc__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.kb-toc__item { padding: 0; }
.kb-toc__item--h3 { padding-left: 16px; }
.kb-toc__link { color: var(--kb-muted); text-decoration: none; line-height: 1.5; display: block; padding: 2px 0; transition: color var(--kb-transition); }
.kb-toc__link:hover, .kb-toc__link:focus-visible { color: var(--kb-accent); text-decoration: underline; }
.kb-toc__link:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .kb-toc__link { transition: none; } }

/* ================================================================
   Phase 1F: Advanced Comments
================================================================ */
.kb-comment__replies { margin-left: 2.5rem; border-left: 3px solid #e5e7eb; padding-left: 1rem; }
.kb-comment--reply { margin-bottom: 1rem; }
.kb-comment--admin { background: #fffbeb; border-left: 3px solid #f59e0b; padding-left: .75rem; }
.kb-comment__admin-label { display: inline-block; background: #f59e0b; color: #fff; padding: .1em .4em; border-radius: 3px; margin: 0 .3rem; vertical-align: middle; font-weight: 600; }
.kb-comment__admin-badge { color: #f59e0b; }
.kb-star-rating-widget { display: flex; flex-direction: row; justify-content: flex-start; gap: .1rem; }
.kb-star-radio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.kb-star-label { color: #d1d5db; cursor: pointer; line-height: 1; transition: color .1s; }
.kb-star-label--active, .kb-star-label:hover { color: #f59e0b; }
.kb-star--full { color: #f59e0b; }
.kb-star--empty { color: #d1d5db; }
.kb-comments__rating-summary { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding: .75rem 1rem; background: #fffbeb; border-radius: 6px; border: 1px solid #fde68a; }
.kb-rating-text { color: #92400e; }
.kb-reply-form-wrap { margin: .5rem 0 1rem 2.5rem; padding: 1rem; background: #f9fafb; border-radius: 8px; border: 1px solid #e5e7eb; }
.kb-reply-form__heading { margin-bottom: .75rem; display: flex; align-items: center; gap: .75rem; }
.kb-comment__reply-btn { padding: .2rem .5rem; margin-top: .5rem; color: #6366f1; background: none; border: none; cursor: pointer; text-decoration: underline; }
.kb-comment__reply-btn:hover { color: #4338ca; }

/* ================================================================
   Widget device-visibility rules
================================================================ */
/* Hide on desktop (>=1025px) */
@media (min-width: 1025px) { .kb-w-hide-desktop { display: none !important; } }
/* Hide on tablet (768px-1024px) */
@media (min-width: 768px) and (max-width: 1024px) { .kb-w-hide-tablet { display: none !important; } }
/* Hide on mobile (<768px) */
@media (max-width: 767px) { .kb-w-hide-mobile { display: none !important; } }

/* Aliases for OC port (used in devicesClass() helper) */
@media (min-width: 1025px) { .kb-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .kb-hide-tablet { display: none !important; } }
@media (max-width: 767px) { .kb-hide-mobile { display: none !important; } }

/* ================================================================
   Phase 2A - Engagement bar
================================================================ */
.kb-engage-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 16px 0; padding: 12px 0; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }
.kb-engage-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border: 1px solid #ccc; border-radius: 20px; background: #fff; color: #555; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.kb-engage-btn:hover, .kb-engage-btn:focus { border-color: #e74c3c; color: #e74c3c; outline: 2px solid #e74c3c; outline-offset: 2px; }
.kb-engage-btn--like.is-active { background: #e74c3c; color: #fff; border-color: #e74c3c; }
.kb-engage-btn--bookmark.is-active { background: #2980b9; color: #fff; border-color: #2980b9; }
.kb-engage-btn--bookmark:hover, .kb-engage-btn--bookmark:focus { border-color: #2980b9; color: #2980b9; outline-color: #2980b9; }
.kb-engage-emoji, .kb-reaction-emoji { line-height: 1; font-style: normal; }
.kb-engage-btn--hover-reveal { opacity: 0; pointer-events: none; transition: opacity .2s; }
.kb-engage-bar:hover .kb-engage-btn--hover-reveal, .kb-engage-btn--hover-reveal:focus, .kb-engage-btn--hover-reveal.is-active { opacity: 1; pointer-events: auto; }
.kb-reaction-bar { display: inline-flex; align-items: center; gap: 4px; }
.kb-reaction-btn { display: inline-flex; align-items: center; gap: 2px; padding: 4px 8px; border: 1px solid transparent; border-radius: 16px; background: transparent; cursor: pointer; transition: background .12s, border-color .12s; }
.kb-reaction-btn:hover, .kb-reaction-btn:focus { background: #f5f5f5; border-color: #ccc; outline: 2px solid #aaa; outline-offset: 1px; }
.kb-reaction-btn.is-active { background: #fef3cd; border-color: #f0ad4e; }
.kb-reaction-count { color: #666; min-width: 1em; text-align: center; }
.kb-meta-likes { display: inline-flex; align-items: center; gap: 3px; color: #e74c3c; }
@media (prefers-reduced-motion: reduce) { .kb-engage-btn, .kb-engage-btn--hover-reveal, .kb-reaction-btn { transition: none; } }
@media (max-width: 480px) { .kb-engage-bar { gap: 6px; } .kb-reaction-bar { flex-wrap: wrap; } }

/* ================================================================
   Phase 2B — Third-party comment embed containers
================================================================ */
.kb-comment-embed { margin-top: 48px; padding-top: 32px; border-top: 2px solid var(--kb-border); }
.kb-comment-embed--disqus #disqus_thread { min-height: 100px; }
.kb-comment-embed--facebook .fb-comments { display: block; }

/* ================================================================
   Phase 2C - Media post types
================================================================ */
.kb-video-wrap { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; background: #000; border-radius: var(--kb-radius, 14px); margin-bottom: var(--kb-gap, 28px); }
.kb-video-wrap iframe.kb-video-frame, .kb-video-wrap video.kb-video-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.kb-post-media--audio { margin-bottom: var(--kb-gap, 28px); }
.kb-audio-player { width: 100%; border-radius: var(--kb-radius-sm, 8px); background: var(--kb-surface, #fafafa); }
.kb-post-card__type-badge { display: inline-flex; align-items: center; gap: 4px; position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.6); color: #fff; font-weight: 600; padding: 3px 8px; border-radius: 4px; text-transform: capitalize; pointer-events: none; }
.kb-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--kb-gap, 28px); margin-bottom: var(--kb-gap, 28px); }
.kb-gallery-grid__item { display: block; position: relative; overflow: hidden; border-radius: var(--kb-radius, 14px); background: var(--kb-surface, #fafafa); text-decoration: none; box-shadow: var(--kb-shadow); transition: box-shadow var(--kb-transition), transform var(--kb-transition); }
.kb-gallery-grid__item:hover, .kb-gallery-grid__item:focus-visible { box-shadow: var(--kb-shadow-hover); transform: translateY(-2px); }
.kb-gallery-grid__img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform var(--kb-transition, 220ms ease); }
.kb-gallery-grid__item:hover .kb-gallery-grid__img { transform: scale(1.04); }
.kb-gallery-grid__overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); padding: 16px 12px 10px; color: #fff; }
.kb-gallery-grid__title { display: block; font-weight: 600; line-height: 1.3; }
.kb-gallery-grid__date { display: block; opacity: 0.8; margin-top: 2px; }
.kb-gallery-page__heading { font-weight: 700; margin-bottom: var(--kb-gap, 28px); }
.kb-gallery-page__empty { color: var(--kb-muted, #71717a); font-style: italic; }

/* ================================================================
   KB Blog Slider — Phase 2D
================================================================ */
.kb-slider { position: relative; overflow: hidden; width: 100%; background: var(--kb-surface, #fafafa); border-radius: var(--kb-radius, 14px); margin-bottom: 28px; user-select: none; -webkit-user-select: none; }
.kb-slider-track { display: flex; transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .kb-slider-track { transition: none; } }
.kb-slide { flex: 0 0 100%; max-width: 100%; position: relative; overflow: hidden; }
.kb-slide-img { display: block; width: 100%; height: clamp(220px, 38vw, 500px); object-fit: cover; }
.kb-slide-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 32px; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%); color: #fff; }
.kb-slide-title { font-family: var(--kb-font-heading, serif); font-weight: 700; margin: 0 0 8px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.kb-slide-subtitle { margin: 0 0 12px; color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.kb-slide-btn { display: inline-block; padding: 10px 24px; background: var(--kb-accent, #2563EB); color: #fff; border-radius: 6px; font-weight: 600; text-decoration: none; transition: opacity 180ms ease; }
.kb-slide-btn:hover, .kb-slide-btn:focus { opacity: .85; color: #fff; text-decoration: none; outline: 3px solid rgba(255,255,255,.6); outline-offset: 2px; }
.kb-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.45); border: 0; border-radius: 50%; width: 44px; height: 44px; color: #fff; line-height: 1; cursor: pointer; z-index: 10; transition: background 180ms ease; display: flex; align-items: center; justify-content: center; }
.kb-slider-arrow:hover, .kb-slider-arrow:focus { background: rgba(0,0,0,.7); outline: 3px solid rgba(255,255,255,.5); outline-offset: 2px; }
.kb-slider-prev { left: 12px; }
.kb-slider-next { right: 12px; }
.kb-slider-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.kb-slider-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.5); border: 0; cursor: pointer; padding: 0; transition: background 200ms ease, transform 200ms ease; }
.kb-slider-dot--active, .kb-slider-dot:hover, .kb-slider-dot:focus { background: #fff; transform: scale(1.3); outline: 2px solid rgba(255,255,255,.8); outline-offset: 2px; }
@media (max-width: 767px) { .kb-slide-caption { padding: 16px; } .kb-slider-arrow { width: 36px; height: 36px; } }

/* Fade transition mode */
.kb-slider[data-transition="fade"] .kb-slider-track { transform: none !important; position: relative; }
.kb-slider[data-transition="fade"] .kb-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms ease; z-index: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .kb-slider[data-transition="fade"] .kb-slide { transition: none; } }
.kb-slider[data-transition="fade"] .kb-slide--active, .kb-slider[data-transition="fade"] .kb-slide--fade-active { opacity: 1; z-index: 1; pointer-events: auto; position: relative; }

/* Thumbnail navigation */
.kb-slider-thumbs { display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; scrollbar-width: thin; background: var(--kb-surface, #fafafa); border-top: 1px solid rgba(0,0,0,.08); }
.kb-slider-thumb { flex: 0 0 auto; width: 72px; height: 48px; border: 2px solid transparent; border-radius: 4px; overflow: hidden; padding: 0; cursor: pointer; background: var(--kb-muted, #e5e7eb); transition: border-color 200ms ease; }
.kb-slider-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-slider-thumb-placeholder { display: block; width: 100%; height: 100%; background: var(--kb-muted, #e5e7eb); }
.kb-slider-thumb--active, .kb-slider-thumb:hover, .kb-slider-thumb:focus { border-color: var(--kb-accent, #2563EB); outline: none; }
.kb-slider-thumb:focus-visible { outline: 2px solid var(--kb-accent, #2563EB); outline-offset: 2px; }

/* Slider themes */
.kb-slider--theme-dark { background: #111; color: #f9fafb; }
.kb-slider--theme-dark .kb-slider-thumbs { background: #1a1a1a; border-top-color: rgba(255,255,255,.1); }
.kb-slider--theme-dark .kb-slider-thumb { background: #333; }
.kb-slider--theme-dark .kb-slider-arrow { background: rgba(255,255,255,.2); }
.kb-slider--theme-dark .kb-slider-dot { background: rgba(255,255,255,.4); }
.kb-slider--theme-dark .kb-slider-dot--active { background: #fff; }
.kb-slider--theme-boxed { max-width: 960px; margin-inline: auto; box-shadow: 0 4px 24px rgba(0,0,0,.15); }

/* ================================================================
   Phase 2E — Banner zones
================================================================ */
.kb-banner-zone { margin: 16px 0; }
.kb-banner { display: block; margin-bottom: 12px; }
.kb-banner:last-child { margin-bottom: 0; }
.kb-banner__link { display: block; text-decoration: none; }
.kb-banner__img { display: block; width: 100%; height: auto; border-radius: 4px; object-fit: cover; transition: opacity 0.2s ease; }
.kb-banner__link:hover .kb-banner__img, .kb-banner__link:focus .kb-banner__img { opacity: 0.9; }
.kb-banner-zone--sidebar .kb-banner__img { max-width: 100%; }
.kb-banner-zone--blog_top, .kb-banner-zone--blog_bottom, .kb-banner-zone--post_top, .kb-banner-zone--post_bottom { width: 100%; }
/* Banner template classes */
.kb-banner-item { margin-bottom: 12px; }
.kb-banner-img { display: block; width: 100%; height: auto; border-radius: 4px; }
.kb-banner-link { display: block; text-decoration: none; }
.kb-banner-caption { padding: 8px 0; color: var(--kb-muted); }
@media (max-width: 767px) { .kb-banner-zone { margin: 10px 0; } }

/* ================================================================
   Phase 2F — Dark mode
================================================================ */
[data-kb-theme="dark"] .kb-blog-page,
[data-kb-theme="dark"] .kb-home-block-wrap,
[data-kb-theme="dark"] .kb-home-block,
[data-kb-theme="dark"] .kbblogs-home-block-wrap,
[data-kb-theme="dark"] .kb-col-widget,
[data-kb-theme="dark"] .kb-footer-block,
[data-kb-theme="dark"] .kb-widget,
[data-kb-theme="dark"] .kb-post-card,
[data-kb-theme="dark"] .kb-home-card {
  --kb-bg:      #18181B;
  --kb-surface: #27272A;
  --kb-border:  #3F3F46;
  --kb-ink:     #FAFAFA;
  --kb-text:    #E4E4E7;
  --kb-muted:   #A1A1AA;
  color: var(--kb-text);
  background-color: var(--kb-bg);
}
[data-kb-theme="dark"] .kb-post-card { border-color: var(--kb-border); }
[data-kb-theme="dark"] .kb-post-card__title a { color: var(--kb-ink); }
[data-kb-theme="dark"] .kb-post-card__excerpt { color: #A1A1AA; }
[data-kb-theme="dark"] .kb-widget__title { border-bottom-color: var(--kb-border); color: var(--kb-ink); }

@media (prefers-color-scheme: dark) {
  [data-kb-theme="auto"] .kb-blog-page,
  [data-kb-theme="auto"] .kb-home-block-wrap,
  [data-kb-theme="auto"] .kb-home-block,
  [data-kb-theme="auto"] .kbblogs-home-block-wrap,
  [data-kb-theme="auto"] .kb-col-widget,
  [data-kb-theme="auto"] .kb-widget,
  [data-kb-theme="auto"] .kb-post-card {
    --kb-bg:      #18181B;
    --kb-surface: #27272A;
    --kb-border:  #3F3F46;
    --kb-ink:     #FAFAFA;
    --kb-text:    #E4E4E7;
    --kb-muted:   #A1A1AA;
    color: var(--kb-text);
    background-color: var(--kb-bg);
  }
}
.kb-dark-toggle { position: fixed; bottom: 24px; right: 24px; z-index: 9000; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--kb-border); background: var(--kb-surface); color: var(--kb-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--kb-shadow); transition: background var(--kb-transition), color var(--kb-transition); }
.kb-dark-toggle:hover { background: var(--kb-accent); color: #fff; }

/* ================================================================
   Phase 2F — Layout themes
================================================================ */
.kb-blog-page.kb-theme-magazine .kb-posts-grid .kb-post-card:first-child { grid-column: 1 / -1; }
.kb-blog-page.kb-theme-magazine .kb-posts-grid .kb-post-card:first-child .kb-post-card__img { max-height: 480px; object-fit: cover; }
.kb-blog-page.kb-theme-minimal .kb-post-card { box-shadow: none; border: 1px solid var(--kb-border); border-radius: 4px; }
.kb-blog-page.kb-theme-minimal .kb-post-card:hover { box-shadow: none; border-color: var(--kb-accent); }
.kb-blog-page.kb-theme-minimal .kb-posts-grid { gap: 32px; }
.kb-blog-page.kb-theme-fullwidth .kb-sidebar { display: none; }
.kb-blog-page.kb-theme-fullwidth .kb-page-layout__main { flex: 1 1 100%; max-width: 100%; }
.kb-blog-page.kb-theme-fullwidth .kb-posts-grid { max-width: none; }

/* ================================================================
   Phase 2F — Series block
================================================================ */
.kb-series-block { background: var(--kb-surface, #f9fafb); border: 1px solid var(--kb-border, #e5e7eb); border-radius: 6px; padding: 16px 20px; margin: 20px 0; }
.kb-series-block__title { font-weight: 700; margin: 0 0 10px; color: var(--kb-muted, #6b7280); text-transform: uppercase; letter-spacing: .05em; }
.kb-series-list { margin: 0; padding-left: 20px; }
.kb-series-list__item { padding: 3px 0; }
.kb-series-list__item--current { color: var(--kb-ink, #111827); }

/* ================================================================
   Phase 2F — Social feed + Newsletter widgets
================================================================ */
.kb-widget--social-feed .kb-social-feed__fb, .kb-widget--social-feed .kb-social-feed__twitter { margin-top: 10px; }
.kb-newsletter-form__inner { display: flex; }
.kb-newsletter-form__input { flex: 1; width: 50%; border: 1px solid var(--kb-border, #d1d5db); border-radius: 4px; }
.kb-newsletter-form__btn { padding: 8px 14px; width: 40%; background: var(--kb-accent, #3b82f6); color: #fff; border: none; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.kb-newsletter-form__btn:hover { opacity: .9; }
.kb-newsletter__notice { color: var(--kb-muted, #6b7280); font-style: italic; }

/* ================================================================
   Breadcrumb
================================================================ */
.kb-breadcrumb { margin-block-end: 1rem; }
.kb-breadcrumb__list { display: flex; flex-wrap: wrap; gap: .25rem .125rem; list-style: none; margin: 0; padding: 0; color: var(--kb-muted, #6b7280); }
.kb-breadcrumb__item { display: flex; align-items: center; }
.kb-breadcrumb__item a { color: var(--kb-accent, #2563eb); text-decoration: none; }
.kb-breadcrumb__item a:hover { text-decoration: underline; }
.kb-breadcrumb__item:not(:last-child)::after { content: '/'; margin-inline-start: .25rem; margin-inline-end: .25rem; color: var(--kb-muted, #6b7280); pointer-events: none; }

/* ================================================================
   Listing toolbar
================================================================ */
.kb-listing-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-block-end: 20px; padding: 12px 0; border-bottom: 1px solid var(--kb-border, #d1d5db); }
.kb-listing-toolbar__group { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.kb-listing-toolbar__group--submit { flex-direction: row; align-items: center; gap: 8px; min-width: auto; }
.kb-listing-toolbar__label { font-weight: 600; color: var(--kb-muted, #6b7280); text-transform: uppercase; letter-spacing: .04em; }
.kb-listing-toolbar__select { padding: 6px 10px; border: 1px solid var(--kb-border, #d1d5db); border-radius: 6px; background: var(--kb-surface, #fafafa); color: var(--kb-ink, #111827); cursor: pointer; }
.kb-listing-toolbar__select:focus { outline: 2px solid var(--kb-accent, #2563eb); outline-offset: 1px; }
.kb-listing-toolbar__apply { padding: 7px 16px; background: var(--kb-accent, #2563eb); color: #fff; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; }
.kb-listing-toolbar__apply:hover { opacity: .9; }
.kb-listing-toolbar__reset { color: var(--kb-muted, #6b7280); text-decoration: underline; padding: 4px 0; }
.kb-listing-toolbar__reset:hover { color: var(--kb-ink, #111827); }
@media (max-width: 480px) { .kb-listing-toolbar__group { min-width: 100%; } }

/* ================================================================
   RTL overrides
================================================================ */
[dir="rtl"] .kb-blog-page { text-align: right; }
[dir="rtl"] .kb-page-layout.kb-sidebar-left  { flex-direction: row; }
[dir="rtl"] .kb-page-layout.kb-sidebar-right { flex-direction: row-reverse; }
[dir="rtl"] .kb-breadcrumb__item:not(:last-child)::after { content: '\\'; }
[dir="rtl"] .kb-engage-bar { flex-direction: row-reverse; }
[dir="rtl"] .kb-slider-prev { left: auto; right: 12px; }
[dir="rtl"] .kb-slider-next { right: auto; left: 12px; }
[dir="rtl"] .kb-slide-caption { left: auto; right: 0; text-align: right; }
[dir="rtl"] .kb-post-card__meta, [dir="rtl"] .kb-post-card__title, [dir="rtl"] .kb-post-card__excerpt { text-align: right; }
[dir="rtl"] .kb-listing-toolbar { flex-direction: row-reverse; }
[dir="rtl"] .kb-pagination { flex-direction: row-reverse; }

/* ================================================================
   Batch 5 — Star rating widget
================================================================ */
.kb-star-rating { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kb-star-rating__label { color: var(--kb-muted, #6b7280); font-weight: 500; }
.kb-star-rating__stars { display: flex; gap: 3px; align-items: center; }
.kb-rate-star { background: none; border: none; padding: 2px; cursor: pointer; line-height: 1; color: var(--kb-muted, #9ca3af); transition: color 150ms ease, transform 120ms ease; }
.kb-rate-star:hover, .kb-rate-star.is-hover, .kb-rate-star.is-selected { color: #f59e0b; transform: scale(1.15); }
.kb-rate-star:focus-visible { outline: 2px solid var(--kb-accent, #2563eb); outline-offset: 2px; border-radius: 3px; }
.kb-star-rating__avg { color: var(--kb-muted, #6b7280); }
.kb-star-rating__avg strong { color: var(--kb-ink, #111827); }

/* ================================================================
   kbblogs-* template alias layer (Bootstrap-era twig class names)
   Storefront twigs use kbblogs- prefix; core tokens above use kb-.
   01-07-2026
================================================================ */
.kbblogs-page,
#kbblogs-blog,
#kbblogs-post-page {
  font-family: var(--kb-font-body);
  color: var(--kb-text);
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 15px;
  box-sizing: border-box;
}

.kbblogs-breadcrumb,
.kbblogs-breadcrumb ul {
  margin-bottom: 16px;
  /* padding: 0; */
  list-style: none;
  color: var(--kb-muted);
}

.kbblogs-page-header,
.kbblogs-category-header,
.kbblogs-author-profile {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--kb-border);
}

.kbblogs-heading {
  font-family: var(--kb-font-heading);
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--kb-ink);
}

.kbblogs-content-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

#kbblogs-main {
  flex: 1 1 0;
  min-width: 0;
}

#kbblogs-sidebar,
.kbblogs-sidebar {
  flex: 0 0 280px;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 767px) {
  .kbblogs-content-row { flex-direction: column; }
  #kbblogs-sidebar { flex: 1 1 100%; width: 100%; }
}

/*
* Switched from auto-fill to auto-fit so empty grid tracks collapse: when only 2 posts are
* shown per page the two cards stretch to fill the full row width instead of leaving blank slots.
* 29-07-2026
*/
.kbblogs-grid {
  display: grid;
  gap: var(--kb-gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 0;
}

/*
* Bootstrap .row adds :before/:after table cells that become extra grid items (blank slot).
* Listing grid must not use .row; neutralize if a theme re-adds it. 01-07-2026
*/
.kbblogs-grid::before,
.kbblogs-grid::after {
  display: none !important;
  content: none !important;
}

.kbblogs-grid-col { min-width: 0; }

/* The listing wrapper is a CSS grid, but its children still carry Bootstrap
   col-* classes (col-sm-6/col-md-4/col-lg-3) whose percentage widths would
   resolve against each grid TRACK and collapse the card to ~1/3 of its cell
   (the "one word per line" distortion). Neutralize the Bootstrap box model so
   the grid tracks fully control card sizing. 01-07-2026 */
.kbblogs-grid > .kbblogs-grid-col {
  width: auto;
  max-width: none;
  float: none;
  padding: 0;
}

.kbblogs-post-card,
.kbblogs-card {
  background: var(--kb-bg);
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--kb-shadow);
  transition: transform var(--kb-transition), box-shadow var(--kb-transition);
}

.kbblogs-post-card:hover,
.kbblogs-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--kb-shadow-hover);
}

.kbblogs-card-thumb,
.kbblogs-cover-img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.kbblogs-card-thumb { aspect-ratio: 16/9; overflow: hidden; }
.kbblogs-card-thumb img { width: 100%; height: 100%; object-fit: cover; }

.kbblogs-card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.kbblogs-card-title {
  font-family: var(--kb-font-heading);
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}

.kbblogs-card-title a { color: var(--kb-ink); text-decoration: none; }
.kbblogs-card-title a:hover { text-decoration: underline; }

.kbblogs-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--kb-muted);
}

.kbblogs-card-excerpt { color: #52525B; line-height: 1.6; margin: 0; flex: 1; }

.kbblogs-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.kbblogs-read-more,
.kbblogs-card-footer .btn {
  font-weight: 600;
}

/*
* Tags container: flex-wrap so chips flow onto multiple lines instead of overlapping.
* 29-07-2026
*/
.kbblogs-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.kbblogs-cat-chip,
.kbblogs-tag-chip {
  display: inline-block;
  margin: 0 2px 2px 0;
  text-decoration: none;
  white-space: nowrap;
}

.kbblogs-list { display: flex; flex-direction: column; gap: 20px; }

.kbblogs-list-item.media {
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
  padding: 16px;
  background: var(--kb-bg);
}

.kbblogs-list-thumb { object-fit: cover; border-radius: var(--kb-radius-sm); }

.kbblogs-toolbar { margin-bottom: 16px; }

/* Keep the sort options on one aligned row. Bootstrap's .btn-group floats its
   buttons, so when the column is a few pixels too narrow the last option
   ("Title (Z-A)") drops to a second line and looks misaligned. A non-wrapping
   flex row keeps them flush; overflow-x lets it scroll on very narrow screens
   instead of wrapping or overflowing the page. */
.kbblogs-sort-group {
  display: flex;
  flex-wrap: nowrap;
  max-width: 100%;
}
.kbblogs-sort-group > .btn {
  white-space: nowrap;
  float: none;
}

.kbblogs-pagination-row {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--kb-border);
}

.kbblogs-results { margin: 0; color: var(--kb-muted); }

.kbblogs-empty { padding: 40px 16px; text-align: center; color: var(--kb-muted); }

.kbblogs-widget { margin-bottom: 0; }
.kbblogs-widget .panel-heading h4 { margin: 0; font-weight: 700; }
.kbblogs-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.kbblogs-search-form .input-group { width: 100%; }

/*
* Post detail page — maps kbblogs-* twig classes to the kb-* design system.
* Fixes engage bar, reaction picker popup, sidebar overflow, and hero layout.
* 01-07-2026
*/
#kbblogs-post-page .container > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.kbblogs-main { min-width: 0; }

/*
* Legacy Bootstrap list-group rules removed — sidebar uses kb-widget markup.
* 01-07-2026
*/

.kbblogs-post-detail {
  max-width: var(--kb-measure);
  margin: 0 auto;
}

.kbblogs-post-hero {
  border-radius: var(--kb-radius);
  overflow: hidden;
  margin-bottom: 32px;
}

.kbblogs-post-hero .kbblogs-cover-img,
.kbblogs-cover-figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--kb-radius);
}

.kbblogs-post-detail .kb-banner-zone {
  margin: 0 0 20px;
  max-width: 100%;
}

.kbblogs-post-detail .kb-banner-img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--kb-radius-sm);
}

.kbblogs-post-detail .kb-banner-caption {
  margin-top: 6px;
  color: var(--kb-muted);
}

.kbblogs-post-header { margin-bottom: 28px; }

.kbblogs-post-title {
  font-family: var(--kb-font-heading);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 20px;
  color: var(--kb-ink);
}

.kbblogs-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--kb-muted);
  padding: 14px 0;
  border-top: 1px solid var(--kb-border);
  border-bottom: 1px solid var(--kb-border);
  margin-bottom: 32px;
}

.kbblogs-post-content {
  line-height: 1.8;
  color: var(--kb-text);
}

.kbblogs-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--kb-radius-sm);
}

.kbblogs-post-rating-wrap {
  margin: 20px 0;
  padding: 14px 0;
  border-top: 1px solid var(--kb-border);
}

.kbblogs-post-rating-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--kb-ink);
}

.kbblogs-post-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.kbblogs-rate-star {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  line-height: 1;
  color: #d1d5db;
  transition: color .15s, transform .12s;
}

.kbblogs-rate-star.kbblogs-active,
.kbblogs-rate-star:hover {
  color: #f59e0b;
}

.kbblogs-rating-average,
.kbblogs-rating-sep,
.kbblogs-rating-count {
  color: var(--kb-muted);
  margin-left: 6px;
}

.kbblogs-engage-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
  padding: 14px 0;
  border-top: 1px solid var(--kb-border);
  border-bottom: 1px solid var(--kb-border);
}

.kbblogs-like-btn,
.kbblogs-bookmark-btn,
.kbblogs-reaction-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--kb-border);
  border-radius: 20px;
  background: var(--kb-bg);
  color: var(--kb-text);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.kbblogs-like-btn:hover,
.kbblogs-bookmark-btn:hover,
.kbblogs-reaction-trigger:hover {
  border-color: var(--kb-accent);
  color: var(--kb-accent);
}

.kbblogs-like-btn.kbblogs-active {
  background: #e74c3c;
  border-color: #e74c3c;
  color: #fff;
}

.kbblogs-bookmark-btn.kbblogs-active {
  background: #2980b9;
  border-color: #2980b9;
  color: #fff;
}

.kbblogs-reaction-wrap {
  position: relative;
  display: inline-block;
}

.kbblogs-reaction-picker {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 200;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: var(--kb-bg);
  border: 1px solid var(--kb-border);
  border-radius: 28px;
  box-shadow: var(--kb-shadow-hover);
  min-width: 200px;
  max-width: min(320px, 90vw);
}

.kbblogs-reaction-picker.kbblogs-open {
  display: flex;
}

.kbblogs-reaction-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  min-width: 44px;
  transition: background .12s, border-color .12s;
}

.kbblogs-reaction-btn:hover {
  background: var(--kb-surface);
  border-color: var(--kb-border);
}

.kbblogs-reaction-key,
.kbblogs-reaction-cnt {
  color: var(--kb-muted);
  line-height: 1.2;
}

.kbblogs-share-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 24px 0;
  padding-top: 20px;
  border-top: 1px solid var(--kb-border);
}

.kbblogs-share-label {
  font-weight: 600;
  color: #52525B;
}

.kbblogs-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  border: none;
  padding: 0;
}

.kbblogs-share-btn--facebook { background: #1877F2; }
.kbblogs-share-btn--twitter  { background: #000; }
.kbblogs-share-btn--linkedin { background: #0A66C2; }
.kbblogs-share-btn--whatsapp { background: #25D366; }
.kbblogs-share-btn--email    { background: #6B7280; }
.kbblogs-share-btn--copy     { background: #6B7280; }

.kbblogs-share-btn:hover { opacity: .85; }

/*
* Comments block — kbblogs-* twig/JS classes (card layout, avatars, threaded replies).
* 01-07-2026
*/
.kbblogs-comments-section {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid var(--kb-border);
}

.kbblogs-comments-section .kbblogs-section-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.kbblogs-comment-count.kbblogs-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--kb-accent);
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

.kbblogs-comment-rating-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--kb-radius-sm);
}

.kbblogs-comment-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kbblogs-comment {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--kb-bg);
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-shadow);
}

.kbblogs-comment--admin {
  background: #fffbeb;
  border-color: #fde68a;
  border-left: 3px solid #f59e0b;
}

.kbblogs-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  user-select: none;
}

.kbblogs-comment__body {
  flex: 1;
  min-width: 0;
}

.kbblogs-comment__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.kbblogs-comment__author {
  font-weight: 700;
  color: var(--kb-ink);
}

.kbblogs-comment__date {
  color: var(--kb-muted);
}

.kbblogs-badge-admin {
  display: inline-block;
  background: #f59e0b;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 4px;
  vertical-align: middle;
}

.kbblogs-stars,
.kbblogs-stars-display {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #f59e0b;
}

.kbblogs-stars .fa-star-o,
.kbblogs-stars-display .fa-star-o {
  color: #d1d5db;
}

.kbblogs-comment__content {
  margin: 0 0 10px;
  line-height: 1.7;
  color: var(--kb-text);
  word-break: break-word;
}

.kbblogs-comment__actions {
  margin-top: 4px;
}

.kbblogs-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 16px;
  color: var(--kb-accent);
  background: var(--kb-bg);
  border: 1px solid var(--kb-border);
  cursor: pointer;
  transition: background var(--kb-transition), border-color var(--kb-transition), color var(--kb-transition);
}

.kbblogs-reply-btn:hover,
.kbblogs-reply-btn:focus {
  border-color: var(--kb-accent);
  background: var(--kb-surface);
  color: var(--kb-accent);
  text-decoration: none;
}

.kbblogs-replies {
  margin-top: 14px;
  padding-left: 16px;
  border-left: 3px solid var(--kb-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kbblogs-comment--reply {
  padding: 14px 16px;
  background: var(--kb-surface);
  border-radius: var(--kb-radius-sm);
  box-shadow: none;
}

.kbblogs-load-more-wrap {
  margin: 20px 0 8px;
  text-align: center;
}

.kbblogs-comment-form-wrap {
  margin-top: 32px;
  padding: 24px;
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
}

.kbblogs-form-heading {
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--kb-ink);
}

.kbblogs-comment-form {
  max-width: 640px;
}

.kbblogs-comment-textarea {
  resize: vertical;
  min-height: 120px;
}

.kbblogs-comment-submit {
  padding: 10px 28px;
  font-weight: 600;
}

.kbblogs-reply-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.kbblogs-reply-indicator .kbblogs-cancel-reply {
  float: none;
  line-height: 1;
  opacity: .6;
}

@media (max-width: 600px) {
  .kbblogs-comment {
    padding: 14px;
    gap: 10px;
  }

  .kbblogs-avatar {
    width: 36px;
    height: 36px;
  }

  .kbblogs-replies {
    padding-left: 12px;
  }
}

[data-kb-theme="dark"] .kbblogs-comment {
  background: var(--kb-bg);
  border-color: var(--kb-border);
}

[data-kb-theme="dark"] .kbblogs-comment--admin {
  background: #422006;
  border-color: #92400e;
}

[data-kb-theme="dark"] .kbblogs-comment--reply {
  background: var(--kb-surface);
}

[data-kb-theme="dark"] .kbblogs-comment-form-wrap {
  background: var(--kb-surface);
  border-color: var(--kb-border);
}

[data-kb-theme="dark"] .kbblogs-comment-rating-summary {
  background: #422006;
  border-color: #92400e;
  color: var(--kb-text);
}

/*
* Table of Contents — kbblogs-* twig aliases + active scroll-spy link state.
* 01-07-2026
*/
.kbblogs-toc.kb-toc--top,
.kbblogs-toc {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius-sm);
  padding: 20px 24px;
  margin-bottom: 32px;
}

.kbblogs-toc--fixed,
.kbblogs-toc.kb-toc--fixed {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.kbblogs-toc__title,
.kbblogs-toc .kb-toc__title {
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--kb-ink);
  font-family: var(--kb-font-heading);
}

.kbblogs-toc .kb-toc__list,
.kbblogs-toc ul.kb-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kbblogs-toc .kb-toc__link,
.kbblogs-toc ul.kb-toc-list a {
  color: var(--kb-muted);
  text-decoration: none;
  line-height: 1.5;
  display: block;
  padding: 2px 0;
  transition: color var(--kb-transition);
}

.kbblogs-toc .kb-toc__link:hover,
.kbblogs-toc .kb-toc__link:focus-visible,
.kbblogs-toc ul.kb-toc-list a:hover {
  color: var(--kb-accent);
  text-decoration: underline;
}

.kbblogs-toc .kb-toc__item--h3 {
  padding-left: 16px;
}

.kbblogs-toc .kb-toc__link.kbblogs-toc-active,
.kbblogs-toc a.kbblogs-toc-active {
  color: var(--kb-accent);
  font-weight: 600;
  text-decoration: none;
}

.kbblogs-post-content .kbblogs-toc {
  margin-top: 8px;
  margin-bottom: 24px;
}

@media (max-width: 767px) {
  .kbblogs-toc--fixed,
  .kbblogs-toc.kb-toc--fixed {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kbblogs-toc .kb-toc__link { transition: none; }
}

/*
* Prev/next navigation and related posts carousel — kbblogs-* twig aliases.
* Honors admin per-row setting via --kb-rp-per-row on the carousel wrap.
* 01-07-2026
*/
.kbblogs-prev-next {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--kb-border);
}

.kbblogs-prev-next__prev,
.kbblogs-prev-next__next {
  margin-bottom: 12px;
}

.kbblogs-nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius);
  text-decoration: none;
  color: var(--kb-text);
  background: var(--kb-bg);
  height: 100%;
  transition: background var(--kb-transition), box-shadow var(--kb-transition);
}

.kbblogs-nav-link--prev { border-left: 3px solid var(--kb-accent); }
.kbblogs-nav-link--next { border-right: 3px solid var(--kb-accent); text-align: right; align-items: flex-end; }

.kbblogs-nav-link:hover {
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow);
  color: var(--kb-text);
  text-decoration: none;
}

.kbblogs-nav-link:focus-visible {
  outline: 2px solid var(--kb-accent);
  outline-offset: 2px;
}

.kbblogs-nav-dir {
  color: var(--kb-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.kbblogs-nav-title {
  font-weight: 600;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: var(--kb-ink);
}

.kbblogs-section-title {
  font-family: var(--kb-font-heading);
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--kb-ink);
}

.kbblogs-related-posts {
  margin-top: 40px;
  padding-top: 8px;
}

.kbblogs-related-posts .kbblogs-post-card.thumbnail {
  margin: 0;
  padding: 0;
  border: 1px solid var(--kb-border);
  background: var(--kb-bg);
}

.kbblogs-related-posts .kbblogs-post-card .caption {
  padding: 16px;
}

.kbblogs-related-posts .kbblogs-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.kbblogs-related-posts .kbblogs-card-excerpt {
  color: var(--kb-muted);
  margin: 0;
  line-height: 1.5;
}

.kbblogs-rp-carousel-wrap {
  --kb-rp-per-row: 3;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kbblogs-rp-carousel {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--kb-gap);
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--kb-border) transparent;
}

.kbblogs-rp-carousel::-webkit-scrollbar { height: 4px; }
.kbblogs-rp-carousel::-webkit-scrollbar-track { background: transparent; }
.kbblogs-rp-carousel::-webkit-scrollbar-thumb { background: var(--kb-border); border-radius: 2px; }

.kbblogs-rp-carousel__item {
  flex: 0 0 calc((100% - var(--kb-gap) * (var(--kb-rp-per-row, 3) - 1)) / var(--kb-rp-per-row, 3));
  min-width: 200px;
  scroll-snap-align: start;
}

.kbblogs-rp-carousel__prev,
.kbblogs-rp-carousel__next {
  background: var(--kb-bg);
  border: 1px solid var(--kb-border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--kb-text);
  padding: 0;
  line-height: 1;
  box-shadow: var(--kb-shadow);
  transition: background var(--kb-transition), color var(--kb-transition);
}

.kbblogs-rp-carousel-wrap > .btn {
  float: none;
}

.kbblogs-rp-carousel__prev:hover,
.kbblogs-rp-carousel__next:hover {
  background: var(--kb-accent);
  color: #fff;
  border-color: var(--kb-accent);
}

.kbblogs-rp-carousel__prev[disabled],
.kbblogs-rp-carousel__next[disabled] {
  opacity: .35;
  cursor: not-allowed;
}

@media (max-width: 767px) {
  .kbblogs-prev-next__next { text-align: left; }
  .kbblogs-nav-link--next { text-align: left; align-items: flex-start; }
  .kbblogs-rp-carousel__item {
    flex: 0 0 calc(100% - 24px);
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kbblogs-nav-link,
  .kbblogs-rp-carousel__prev,
  .kbblogs-rp-carousel__next { transition: none; }
  .kbblogs-rp-carousel { scroll-snap-type: none; }
}

.kbblogs-tag-cloud .kbblogs-tag,
.kbblogs-tag-cloud .label {
  display: inline-block;
  margin: 0 4px 6px 0;
  white-space: normal;
  word-break: break-word;
}

@media (max-width: 767px) {
  .kbblogs-reaction-picker {
    left: auto;
    right: 0;
  }
}

/* ================================================================
   Dark mode + blog layout themes — storefront (kbblogs-*) layer
   The Phase 2F dark/theme rules above target the legacy kb-* class
   names; the storefront twigs actually render kbblogs-* markup, so
   these rules re-point them. data-kb-theme / data-kb-blog-theme are
   set on <html> by event.php. Tokens on <html> cascade to home widget
   and all KB Blog blocks outside .kbblogs-page wrappers.
   01-07-2026
================================================================ */
html[data-kb-theme="dark"],
[data-kb-theme="dark"] .kbblogs-page,
[data-kb-theme="dark"] #kbblogs-blog,
[data-kb-theme="dark"] #kbblogs-post-page,
[data-kb-theme="dark"] #kbblogs-home-recent,
[data-kb-theme="dark"] .kbblogs-home-recent {
  --kb-bg:      #18181B;
  --kb-surface: #27272A;
  --kb-border:  #3F3F46;
  --kb-ink:     #FAFAFA;
  --kb-text:    #E4E4E7;
  --kb-muted:   #A1A1AA;
  color: var(--kb-text);
  background-color: var(--kb-bg);
}
@media (prefers-color-scheme: dark) {
  html[data-kb-theme="auto"],
  [data-kb-theme="auto"] .kbblogs-page,
  [data-kb-theme="auto"] #kbblogs-blog,
  [data-kb-theme="auto"] #kbblogs-post-page,
  [data-kb-theme="auto"] #kbblogs-home-recent,
  [data-kb-theme="auto"] .kbblogs-home-recent {
    --kb-bg:      #18181B;
    --kb-surface: #27272A;
    --kb-border:  #3F3F46;
    --kb-ink:     #FAFAFA;
    --kb-text:    #E4E4E7;
    --kb-muted:   #A1A1AA;
    color: var(--kb-text);
    background-color: var(--kb-bg);
  }
}
/* Hard-coded (non-token) colours that need explicit dark overrides */
[data-kb-theme="dark"] .kbblogs-card-excerpt { color: #A1A1AA; }
[data-kb-theme="dark"] .kbblogs-page .text-muted { color: var(--kb-muted); }
[data-kb-theme="dark"] .kbblogs-heading,
[data-kb-theme="dark"] .kbblogs-card-title a { color: var(--kb-ink); }
/* Sidebar kb-widgets in dark mode */
[data-kb-theme="dark"] #kbblogs-sidebar .kb-widget,
[data-kb-theme="dark"] .kbblogs-sidebar .kb-widget,
[data-kb-theme="dark"] #kbblogs-sidebar .kbblogs-widget {
  background-color: var(--kb-bg);
  border-color: var(--kb-border);
  color: var(--kb-text);
}
[data-kb-theme="dark"] #kbblogs-sidebar .kb-widget__title,
[data-kb-theme="dark"] .kbblogs-sidebar .kb-widget__title,
[data-kb-theme="dark"] #kbblogs-sidebar a,
[data-kb-theme="dark"] .kbblogs-sidebar a { color: var(--kb-ink); }
[data-kb-theme="dark"] #kbblogs-sidebar .kb-search-form__input {
  background: var(--kb-bg);
  color: var(--kb-text);
}

/* ---- Blog layout themes (data-kb-blog-theme on <html>) ----
   classic = base (no overrides).
   store = inherit active OpenCart theme fonts/colours. 06-07-2026 */

html[data-kb-blog-theme="store"] .kbblogs-page,
html[data-kb-blog-theme="store"] .kb-blog-page,
html[data-kb-blog-theme="store"] .kb-home-block,
html[data-kb-blog-theme="store"] .kb-home-block-wrap,
html[data-kb-blog-theme="store"] .kbblogs-home-block-wrap,
html[data-kb-blog-theme="store"] .kb-col-widget,
html[data-kb-blog-theme="store"] .kb-footer-block,
html[data-kb-blog-theme="store"] #kbblogs-blog,
html[data-kb-blog-theme="store"] #kbblogs-post-page {
  font-family: inherit;
  color: inherit;
  background: transparent;
}

html[data-kb-blog-theme="store"] .kbblogs-heading,
html[data-kb-blog-theme="store"] .kbblogs-card-title,
html[data-kb-blog-theme="store"] .kbblogs-card-title a,
html[data-kb-blog-theme="store"] .kb-widget__title {
  font-family: inherit;
  color: inherit;
}

html[data-kb-blog-theme="store"] .kbblogs-card,
html[data-kb-blog-theme="store"] .kbblogs-post-card {
  background: transparent;
  box-shadow: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

html[data-kb-blog-theme="store"] .kbblogs-card:hover,
html[data-kb-blog-theme="store"] .kbblogs-post-card:hover {
  box-shadow: none;
  transform: none;
}

html[data-kb-blog-theme="store"] .kbblogs-card-excerpt,
html[data-kb-blog-theme="store"] .kbblogs-meta,
html[data-kb-blog-theme="store"] .text-muted {
  color: inherit;
  opacity: 0.85;
}

html[data-kb-blog-theme="store"] .kbblogs-read-more,
html[data-kb-blog-theme="store"] .kbblogs-tag,
html[data-kb-blog-theme="store"] .kbblogs-category a {
  color: inherit;
}

/* Modern — larger radius + pronounced hover lift */
[data-kb-blog-theme="modern"] .kbblogs-card,
[data-kb-blog-theme="modern"] .kbblogs-post-card { border-radius: 18px; }
[data-kb-blog-theme="modern"] .kbblogs-card:hover,
[data-kb-blog-theme="modern"] .kbblogs-post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--kb-shadow-hover);
}

/* Minimal — flat cards: no shadow, thin square borders */
[data-kb-blog-theme="minimal"] .kbblogs-card,
[data-kb-blog-theme="minimal"] .kbblogs-post-card {
  box-shadow: none;
  border: 1px solid var(--kb-border);
  border-radius: 4px;
}
[data-kb-blog-theme="minimal"] .kbblogs-card:hover,
[data-kb-blog-theme="minimal"] .kbblogs-post-card:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--kb-accent);
}
[data-kb-blog-theme="minimal"] .kbblogs-grid { gap: 32px; }

/* Magazine — first card spans the full grid width as a feature row */
[data-kb-blog-theme="magazine"] .kbblogs-grid > .kbblogs-grid-col:first-child {
  grid-column: 1 / -1;
}
[data-kb-blog-theme="magazine"] .kbblogs-grid > .kbblogs-grid-col:first-child .kbblogs-card,
[data-kb-blog-theme="magazine"] .kbblogs-grid > .kbblogs-grid-col:first-child .kbblogs-post-card {
  flex-direction: row;
}
[data-kb-blog-theme="magazine"] .kbblogs-grid > .kbblogs-grid-col:first-child .kbblogs-card-thumb {
  flex: 0 0 45%;
  aspect-ratio: 16/9;
}
@media (max-width: 767px) {
  [data-kb-blog-theme="magazine"] .kbblogs-grid > .kbblogs-grid-col:first-child .kbblogs-card,
  [data-kb-blog-theme="magazine"] .kbblogs-grid > .kbblogs-grid-col:first-child .kbblogs-post-card {
    flex-direction: column;
  }
  [data-kb-blog-theme="magazine"] .kbblogs-grid > .kbblogs-grid-col:first-child .kbblogs-card-thumb {
    flex: none;
  }
}