/* Product cards shortcode */
:root {
  --bd-color-bg: #f6f8f2;
  --bd-color-surface: #ffffff;
  --bd-color-surface-soft: #eef4ea;
  --bd-color-text: #1f2a1f;
  --bd-color-text-muted: #5f6b5f;
  --bd-color-heading: #16351f;
  --bd-color-primary: #2f6b3b;
  --bd-color-primary-hover: #25552f;
  --bd-color-accent: #7aa43a;
  --bd-color-border: #d9e2d4;
  --bd-color-border-strong: #bfd0b8;
  --bd-color-danger: #b42318;
  --bd-color-warning-bg: #fff7e6;
  --bd-color-warning-text: #8a5a00;
  --bd-radius-sm: 8px;
  --bd-radius-md: 14px;
  --bd-radius-lg: 20px;
  --bd-radius-pill: 999px;
  --bd-shadow-sm: 0 4px 12px rgba(18, 43, 24, 0.06);
  --bd-shadow-md: 0 10px 24px rgba(18, 43, 24, 0.08);
  --bd-shadow-lg: 0 16px 36px rgba(18, 43, 24, 0.12);
  --bd-space-xs: 8px;
  --bd-space-sm: 12px;
  --bd-space-md: 16px;
  --bd-space-lg: 24px;
  --bd-space-xl: 32px;
  --bd-space-2xl: 48px;
  --bd-font-body: "Segoe UI", Arial, sans-serif;
  --bd-font-heading: Georgia, "Times New Roman", serif;
  --bd-font-size-sm: 14px;
  --bd-font-size-md: 16px;
  --bd-font-size-lg: 20px;
  --bd-font-size-xl: 28px;
  --theme-palette-color-1: var(--bd-color-primary);
  --theme-palette-color-2: var(--bd-color-primary-hover);
  --theme-palette-color-3: var(--bd-color-text-muted);
  --theme-palette-color-4: var(--bd-color-heading);
  --theme-palette-color-5: var(--bd-color-surface-soft);
  --theme-palette-color-6: var(--bd-color-bg);
  --theme-palette-color-7: #fbfcf8;
  --theme-palette-color-8: var(--bd-color-surface);
  --theme-text-color: var(--bd-color-text);
  --theme-link-initial-color: var(--bd-color-primary);
  --theme-link-hover-color: var(--bd-color-primary-hover);
  --theme-selection-text-color: var(--bd-color-surface);
  --theme-selection-background-color: var(--bd-color-primary);
  --theme-border-color: var(--bd-color-border);
  --theme-headings-color: var(--bd-color-heading);
  --theme-heading-1-color: var(--bd-color-heading);
  --theme-heading-2-color: var(--bd-color-heading);
  --theme-heading-3-color: var(--bd-color-heading);
  --theme-heading-4-color: var(--bd-color-heading);
  --theme-heading-5-color: var(--bd-color-heading);
  --theme-heading-6-color: var(--bd-color-heading);
  --theme-button-text-initial-color: var(--bd-color-surface);
  --theme-button-text-hover-color: var(--bd-color-surface);
  --theme-button-background-initial-color: var(--bd-color-primary);
  --theme-button-background-hover-color: var(--bd-color-primary-hover);
  --theme-button-border: 1px solid var(--bd-color-primary);
  --theme-button-border-radius: var(--bd-radius-pill);
  --theme-form-field-background-initial-color: var(--bd-color-surface);
  --theme-form-field-background-focus-color: var(--bd-color-surface);
  --theme-form-field-border-initial-color: var(--bd-color-border);
  --theme-form-field-border-focus-color: var(--bd-color-primary);
  --theme-form-selection-field-initial-color: var(--bd-color-border);
  --theme-form-selection-field-active-color: var(--bd-color-primary);
  --theme-form-field-border-radius: var(--bd-radius-sm);
  --bd-post-card-height: 220px;
  --bd-post-card-padding: var(--bd-space-md);
  --bd-post-card-radius: var(--bd-radius-md);
  --bd-post-card-bg: var(--bd-color-surface);
  --bd-post-card-text: var(--bd-color-text);
  --bd-post-card-accent: var(--bd-color-primary);
  --bd-post-card-font: var(--bd-font-heading);
  --bd-sidebar-width: 260px;
  --bd-blog-gap: 32px;
  --bd-blog-radius: var(--bd-radius-lg);
  --bd-blog-container-max-width: 1400px;
  --bd-blog-posts-font-family: var(--bd-font-heading);
  --bd-blog-menu-font-family: var(--bd-font-body);
  --bd-blog-post-title-color: var(--bd-color-heading);
  --bd-blog-menu-accent: var(--bd-color-primary);
}

html,
body {
  background: var(--bd-color-bg);
  color: var(--bd-color-text);
  font-family: var(--bd-font-body);
}

body {
  font-size: var(--bd-font-size-md);
  line-height: 1.65;
  --theme-palette-color-1: var(--bd-color-primary) !important;
  --theme-palette-color-2: var(--bd-color-primary-hover) !important;
  --theme-button-text-initial-color: var(--bd-color-surface) !important;
  --theme-button-text-hover-color: var(--bd-color-surface) !important;
  --theme-button-background-initial-color: var(--bd-color-primary) !important;
  --theme-button-background-hover-color: var(--bd-color-primary-hover) !important;
  --badge-text-color: var(--bd-color-surface) !important;
  --badge-background-color: var(--bd-color-primary) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.page-title,
.woocommerce-loop-product__title {
  color: var(--bd-color-heading);
  font-family: var(--bd-font-heading);
}

a {
  color: var(--bd-color-primary);
}

a:hover,
a:focus-visible {
  color: var(--bd-color-primary-hover);
}

button,
.button,
.wp-element-button,
.ct-button,
.added_to_cart,
.checkout-button,
.single_add_to_cart_button {
  border-radius: var(--bd-radius-pill);
}

.posts-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  align-items: stretch;
  box-sizing: border-box;
}

.posts-card {
  height: var(--bd-post-card-height);
  padding: var(--bd-post-card-padding);
  box-sizing: border-box;
  border-radius: var(--bd-post-card-radius);
  background: var(--bd-post-card-bg);
  border: 1px solid var(--bd-color-border);
  box-shadow: var(--bd-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  color: var(--bd-post-card-text);
  font-family: var(--bd-post-card-font);
}

.posts-card a {
  display: block;
  text-decoration: none;
  color: var(--bd-post-card-accent);
  width: 100%;
  flex-shrink: 0;
}

.posts-card .thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
  flex: 0 0 48px;
}

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

.posts-card h3 {
  margin: 0 0 6px 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--bd-post-card-accent);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--bd-post-card-font);
}

.post-meta-description {
  margin: 0;
  color: var(--bd-color-text-muted);
  font-size: var(--bd-font-size-sm);
  line-height: 1.4;
  flex: 1 1 auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  font-family: var(--bd-post-card-font);
}

@media (max-width: 720px) {
  .posts-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
}
