/*
 * custom.css — рефакторинг с использованием CSS-переменных,
 * единообразными единицами и адаптивностью.
 * ВАЖНО: все !important сохранены.
 */

:root {
  /* Цветовые переменные */
  --color-required: #ff0c56;
  --color-text: #333;
  --color-bg-light: #f7f7f7;
  --color-bg-hover: #e0e0e0;
  --color-border-light: rgba(160,160,160,0.25);
  --color-border-default: #ddd;
  --color-footer-link-hover: #fd6282;
  /* Типографика */
  --font-base-size: 1rem;
  --line-base-height: 1.5;
  --heading-h2-size: 1.5em;
  --heading-h3-size: 1.3em;
  /* Пространство и скругления */
  --gap-base: 1.25rem;
  --radius-base: 0.3125rem;
  --transition-base: 0.3s ease;
  /* Тени */
  --shadow-light: 0 8px 16px rgba(0,0,0,0.05);
  --shadow-strong: 0 16px 32px rgba(0,0,0,0.1);
}

/* ===== Общие утилиты ===== */
.id_gender .required::after,
.firstname .required::after,
.lastname .required::after,
.email .required::after,
.password .required::after,
.birthday .required::after {
  color: var(--color-required) !important;
  content: " *" !important;
}

/* ===== Layout категорий: три колонки ===== */
.category-description-blocks {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--gap-base) !important;
  justify-content: space-between !important;
  margin-bottom: 2.5rem !important;
  width: 100% !important;
  padding: 0 !important;
}
.category-description-blocks .category-block {
  flex: 1 1 calc(33.333% - var(--gap-base)) !important;
  background-color: #fff !important;
  border-radius: var(--radius-base) !important;
  box-shadow: var(--shadow-light) !important;
  padding: 1.5rem !important;
  transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
}
.category-description-blocks .category-block:hover {
  box-shadow: var(--shadow-strong) !important;
  transform: translateY(-6px) !important;
}

@media (max-width: 1024px) {
  .category-description-blocks .category-block {
    flex: 1 1 calc(50% - var(--gap-base)) !important;
  }
}
@media (max-width: 768px) {
  .category-description-blocks {
    flex-direction: column !important;
  }
  .category-description-blocks .category-block {
    flex: 1 1 100% !important;
  }
}
@media (max-width: 600px) and (min-width: 480px) {
  /* Средний мобильный: один блок на строку */
  .category-description-blocks .category-block {
    flex: 1 1 100% !important;
  }
}

/* ===== Описание товара и категории (общие таблицы) ===== */
.product-description table,
.category-description table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 2.4rem !important;
}
.product-description table.datatable th,
.product-description table.datatable td,
.category-description table.datatable th,
.category-description table.datatable td {
  padding: 10px !important;
  border: 2px solid var(--color-border-light) !important;
  font-size: 1.125rem !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
}
.product-description table tr:nth-child(odd),
.category-description table tr:nth-child(odd) {
  background: #fff !important;
}
.product-description table tr:nth-child(even),
.category-description table tr:nth-child(even) {
  background: var(--color-bg-light) !important;
}
.product-description table tr:hover,
.category-description table tr:hover {
  background: var(--color-bg-hover) !important;
}
.category-description table th { background-color: #f2f2f2 !important; }

/* ===== Описание товара ===== */
.product-description {
  font-size: 1.125rem !important;
  line-height: var(--line-base-height) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.product-description p {
  line-height: 1.8 !important;
  margin-bottom: 2.4rem !important;
}

/* ===== Описание категории ===== */
.category-description {
  color: var(--color-text) !important;
}
.category-description p {
  font-size: 1.125rem !important;
  line-height: 1.8 !important;
  margin-bottom: 1.4rem !important;
}

/* ===== Списки ===== */
.category-description ul,
.category-description ol {
  margin-left: var(--gap-base) !important;
  padding-left: var(--gap-base) !important;
  font-size: var(--font-base-size) !important;
  line-height: var(--line-base-height) !important;
}
.category-description ul { list-style: circle !important; }
.category-description ol { list-style: decimal !important; }
.category-description li { margin-bottom: 0.625rem !important; }

/* ===== Карточки категорий (общие) ===== */
.category-layout .category-block,
.category-block,
.category-small-block {
  padding: 1.25rem !important;
  border-radius: var(--radius-base) !important;
  background-color: #fff !important;
  box-shadow: var(--shadow-light) !important;
  flex: 1 1 calc(50% - var(--gap-base)) !important;
}
.category-small-block {
  background-color: #f5f5f5 !important;
  flex: 1 1 calc(30% - var(--gap-base)) !important;
}

/* ===== Заголовки ===== */
h2 { font-size: var(--heading-h2-size) !important; margin-bottom: var(--gap-base) !important; }
h3, h5 { font-size: var(--heading-h3-size) !important; }
.product-description h2, .category-description h2 { font-size: 1.5rem !important; }
.product-description h3, .category-description h3 { font-size: 1.25rem !important; }
.product-description h4, .category-description h4 { font-size: 1.25rem !important; }
.product-description h5, .category-description h5 { font-size: 1.25rem !important; }

/* ===== Прочие элементы ===== */
.md-top, .md-bottom { font-size: 1.125rem !important; }
.md-top { margin-top: 1.875rem !important; }
.mb-15 { margin-bottom: 0.9375rem !important; }
.banners { margin-bottom: 0.3125rem !important; }
#index .breadcrumb-wrapper { margin-bottom: 0 !important; }
#gdpr_consent span { color: #fff !important; }
.zahlungsarten img {
  display: inline-block !important;
  margin: 0 0.625rem 0.625rem 0 !important;
  border-radius: var(--radius-base) !important;
}
#footer .footer-left a { color: #fff !important; }
#footer .footer-left a:hover { color: var(--color-footer-link-hover) !important; }

/* ===== Меню & Подкатегории ===== */
#amegamenu .amenu-link { font-size: 1rem !important; padding: 0.4375rem !important; }
.subcategory-name { font-size: 1.25rem !important; font-weight: bold !important; color: #000 !important; }

/* ===== Тогглы ===== */
.toggle-block { margin-top: var(--gap-base) !important; }
.toggle-button {
  background: #f2f2f2 !important;
  color: var(--color-text) !important;
  border: 1px solid #ccc !important;
  padding: 0.625rem 1.25rem !important;
  font-size: 1.1875rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius-base) !important;
  margin-bottom: 1.875rem !important;
  cursor: pointer !important;
  transition: background var(--transition-base), box-shadow var(--transition-base) !important;
}
.toggle-button:hover {
  background: #eaeaea !important;
  box-shadow: var(--shadow-strong) !important;
}
.toggle-content {
  display: none;
  background: #f9f9f9 !important;
  padding: 0.9375rem !important;
  border: 1px solid var(--color-border-default) !important;
  margin: 0.625rem 0 1.25rem !important;
  border-radius: var(--radius-base) !important;
}

/* ===== Статические страницы ===== */
.static-html.typo h1 { font-size: 1.75rem !important; }
.static-html.typo h2 { font-size: 1.4375rem !important; }
.static-html.typo h3 { font-size: 1.25rem !important; }
.static-html.typo p  { font-size: 1.125rem !important; }

/* ===== FAQ ===== */
.faq-title-large { font-size: 1.7em !important; font-weight: bold !important; text-transform: uppercase !important; margin-bottom: var(--gap-base) !important; }
.faq-question-large { font-size: 1.6em !important; }
.faq-answer-large   { font-size: 1.5em !important; }
.op-faq-item .op-faq-question h4 { font-size: 1.6rem !important; line-height: 1.3 !important; }
.op-faq-item > div:not(.op-faq-question) p { font-size: 1.2rem !important; line-height: 1.5 !important; }

/* ===== Popup extra ===== */
.just-extra-popup .description,
.just-extra-popup .description_short,
.just-extra-popup .product-description,
.just-extra-popup .rte { display: none !important; }
.just-extra-popup .extra-field-content { display: block !important; }

/* ===== Слайды продуктов ===== */
.product-miniature.js-product-miniature.slick-slide {
  display: flex !important;
  align-items: stretch !important;
}
.product-miniature.js-product-miniature.slick-slide .product-container,
.product-miniature.js-product-miniature.slick-slide .first-block {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 !important;
}

/* ===== Отключение <big> ===== */
big, big *, .product-description big, .category-description big {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}

/* === EQUAL HEIGHTS ДЛЯ GRID‑VIEW НА СТРАНИЦЕ КАТЕГОРИИ === */

/* 1) Сделаем тот контейнер, что вокруг всех article, флекс‑контейнером */
#js-product-list .products.js-product-list-view.grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;   /* растягиваем карточки по высоте строки */
}

/* 2) Каждая карточка‑артікль в grid‑режиме — флекс‑колонка */
#js-product-list .products.js-product-list-view.grid > article.product-miniature {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 1 calc(33.333% - 20px) !important; /* 3 в ряд; скорректируйте под ваши кол‑во колонок */
  margin: 10px !important;                   /* отступ между карточками */
}

/* 3) Внутренний контейнер .product-container тянем на всю высоту article */
#js-product-list .products.js-product-list-view.grid article .product-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 0 auto !important;
}

/* 4) Блок с названием/описанием «раздвигаем» */
#js-product-list .products.js-product-list-view.grid article .second-third-block {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 0 auto !important;
}

/* 5) Прижимаем цену и кнопки вниз */
#js-product-list .products.js-product-list-view.grid article .third-block {
  margin-top: auto !important;
}

/* Увеличиваем шрифт на CMS-страницах (Zahlung und Versand, AGB и т.д.) */
.page-cms .page-content,
.page-cms .rte {
    font-size: 18px;     /* размер шрифта */
    line-height: 1.6;    /* расстояние между строками для читаемости */
}

.page-cms .page-content p,
.page-cms .rte p {
    margin-bottom: 1em;  /* отступы между абзацами */
}

/* ===== Ähnliche Artikel / Product Accessories ===== */
.product-accessories {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--gap-base) !important;
}

.product-accessories .product-miniature {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 calc(25% - var(--gap-base)) !important; /* 4 в ряд */
  margin: 0 !important;
}

.product-accessories .product-miniature .product-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.product-accessories .product-miniature .second-third-block {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.product-accessories .product-miniature .third-block {
  margin-top: auto !important; /* кнопки и цена прижаты к низу */
}

/* ===== Адаптив ===== */
@media (max-width: 1024px) {
  .product-accessories .product-miniature {
    flex: 1 1 calc(33.333% - var(--gap-base)) !important; /* 3 в ряд */
  }
}
@media (max-width: 768px) {
  .product-accessories .product-miniature {
    flex: 1 1 calc(50% - var(--gap-base)) !important; /* 2 в ряд */
  }
}
@media (max-width: 480px) {
  .product-accessories .product-miniature {
    flex: 1 1 100% !important; /* 1 в ряд */
  }
}

/* Для LCP картинок */
.banner.mb-15 img,
.col-12.slider img {
  display: block;
  width: 100%;
  height: auto;
}

<script>
document.addEventListener("DOMContentLoaded", () => {
  function setEqualHeights(selector) {
    const products = document.querySelectorAll(selector);
    if (!products.length) return;

    // Сбросим высоту
    products.forEach(p => p.style.height = 'auto');

    // Найдём максимальную высоту
    let maxHeight = 0;
    products.forEach(p => {
      const h = p.offsetHeight;
      if (h > maxHeight) maxHeight = h;
    });

    // Применим максимальную высоту ко всем карточкам
    products.forEach(p => p.style.height = maxHeight + 'px');
  }

  // Для списка продуктов на странице категории
  setEqualHeights('#js-product-list .products.js-product-list-view.grid > article.product-miniature');

  // Если есть динамическая подгрузка (например, AJAX) — пересчитываем через MutationObserver
  const container = document.querySelector('#js-product-list .products.js-product-list-view.grid');
  if (container) {
    const observer = new MutationObserver(() => {
      setEqualHeights('#js-product-list .products.js-product-list-view.grid > article.product-miniature');
    });
    observer.observe(container, { childList: true, subtree: true });
  }

  // Также для аксессуаров (если есть блок product-accessories)
  setEqualHeights('.product-accessories .product-miniature');
});

.datatable {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
}

.datatable tr {
    transition: all 0.3s ease;
}

.datatable tr:hover {
    transform: translateY(-2px); /* слегка приподнимает строку */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* легкая тень для строки */
}

/* -------------------------------
   FEATURE-BOX (карточки) 
---------------------------------*/
.feature-box {
    background-color: #e0f7ff;           /* базовый голубой фон */
    border-left: 5px solid #003366;      /* темно-синяя вертикальная скоба */
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 8px;                  /* скругленные углы */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* лёгкая тень */
    transition: all 0.3s ease;           /* плавный переход для всех изменений */
    cursor: pointer;                     /* визуальный намёк на интерактивность */
}

.feature-box h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #003366;
    font-size: 1.2em;
}

.feature-box p {
    margin: 0;
    color: #333;
    font-size: 1em;
    line-height: 1.4;
}

.feature-box:hover {
    background-color: #d0f0ff;           /* светлее при наведении */
    border-left-color: #0055aa;          /* яркий синий при наведении */
    transform: translateY(-4px);         /* лёгкое поднятие */
    box-shadow: 0 8px 15px rgba(0,0,0,0.15); /* тень становится глубже */
}

/* -------------------------------
   KEY-FEATURES HEADER
---------------------------------*/
.key-features h2 {
    display: block;                       /* блочный элемент */
    margin: 0;                             /* убираем все внешние отступы */
    padding: 0 0 20px 0;                   /* отступ снизу для отделения от первой карточки */
    color: #003366;
    font-size: 1.8em;
    border-bottom: 1px solid #cce6ff;     /* тонкая линия разделения */
}

/* -------------------------------
   KEY-FEATURES SECTION
---------------------------------*/
.key-features {
    margin-top: 40px;                     /* отступ сверху всей секции */
}

/* FIX: неактивные tab-pane не должны занимать место */
.product-extra-block.tab-pane:not(.active) {
  display: none !important;
}

.toggle-buttons-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;          /* адаптив */
  margin-bottom: 20px;
}

.toggle-block {
  display: flex;
  flex-direction: column;
}

.toggle-button {
  white-space: nowrap;
}

.toggle-checkbox:checked + .toggle-button + .toggle-content {
  display: block;
}
.toggle-content {
  display: none;
  margin-top: 10px;
}

/* H-Sätze / P-Sätze — центр, жирно, белый фон */
.datatable tr.clpueberhsaetze td {
    text-align: center !important;
    font-weight: 700;
    background-color: #ffffff !important;
}

/* Полностью отключаем hover ТОЛЬКО для этих строк */
.datatable tr.clpueberhsaetze:hover td,
.datatable tr.clpueberhsaetze td:hover {
    background-color: #ffffff !important;
}

.burton-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 30px;
}

.burton-row img {
  width: 200px;
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .burton-row {
    flex-direction: column;
  }

  .burton-row img {
    width: 100%;
    max-width: 250px;
  }

/* =========================================
   BLOG LIST / CATEGORY — CLEAN FINAL
   PrestaShop 1.7 / YBC Blog
   Только для списка статей и категорий
   ========================================= */

/* общая область блога */
.ybc-blog-wrapper.ybc-blog-wrapper-blog-list {
  background: #fff;
  width: 100%;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 8px 40px !important;
}

/* контейнеры внутри блога */
.ybc-blog-wrapper.ybc-blog-wrapper-blog-list,
.ybc-blog-wrapper.ybc-blog-wrapper-blog-list #content-wrapper,
.ybc-blog-wrapper.ybc-blog-wrapper-blog-list .container {
  width: 100%;
  max-width: 100%;
}

/* скрываем старый список модуля и старый h1 */
.ybc-blog-wrapper.ybc-blog-wrapper-blog-list .ybc-blog-list,
.ybc-blog-wrapper.ybc-blog-wrapper-blog-list .page-heading.product-listing {
  display: none !important;
}

/* скрываем лишние старые элементы модуля */
.ybc-blog-wrapper.ybc-blog-wrapper-blog-list .blog-category,
.ybc-blog-wrapper.ybc-blog-wrapper-blog-list .ybc-block-author,
.ybc-blog-wrapper.ybc-blog-wrapper-blog-list .ybc-blog-sidear-post-meta,
.ybc-blog-wrapper.ybc-blog-wrapper-blog-list .ybc-blog-latest-toolbar,
.ybc-blog-wrapper.ybc-blog-wrapper-blog-list .ets_blog_loading {
  display: none !important;
}

/* =========================
   HERO
   ========================= */

.blog-hero-top {
  margin: 22px auto 28px !important;
}

.blog-hero-top__inner {
  position: relative;
  min-height: 380px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.10) !important;
  background: #7b674f;
}

.blog-hero-top__media {
  position: absolute;
  inset: 0;
}

.blog-hero-top__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.blog-hero-top__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.28) 40%,
    rgba(0,0,0,.08) 100%
  );
  z-index: 1;
}

.blog-hero-top__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 40px 42px !important;
}

.blog-hero-top__label {
  display: inline-block;
  margin-bottom: 16px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.blog-hero-top h1 {
  margin: 0 0 14px !important;
  font-size: 46px !important;
  line-height: 1.05 !important;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 10px rgba(0,0,0,.18);
}

.blog-hero-top p {
  margin: 0;
  max-width: 610px;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,.95) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.12);
}

/* =========================
   HEADER CENTER
   ========================= */

.blog-header-center {
  text-align: center;
  margin: 0 0 24px;
}

.blog-header-center h2 {
  margin: 0 0 10px;
  font-size: 36px;
  line-height: 1.12;
  font-weight: 700;
  color: #171717;
  letter-spacing: -0.02em;
}

.blog-header-center p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #737373;
}

/* =========================
   CATEGORY CHIPS
   ========================= */

.ybc-blog-wrapper-blog-list .blog-top-categories {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 30px !important;
  padding: 0 !important;
  width: 100% !important;
}

/* сбрасываем старые обёртки именно в зоне chips */
.ybc-blog-wrapper-blog-list .blog-top-categories .block,
.ybc-blog-wrapper-blog-list .blog-top-categories .block_content,
.ybc-blog-wrapper-blog-list .blog-top-categories ul,
.ybc-blog-wrapper-blog-list .blog-top-categories .row,
.ybc-blog-wrapper-blog-list .blog-top-categories .ybc-blog-categories-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
}

.ybc-blog-wrapper-blog-list .blog-top-categories li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  display: inline-flex !important;
}

.ybc-blog-wrapper-blog-list .blog-top-categories h4,
.ybc-blog-wrapper-blog-list .blog-top-categories .title_block,
.ybc-blog-wrapper-blog-list .blog-top-categories .block-title,
.ybc-blog-wrapper-blog-list .blog-top-categories .view_all_link,
.ybc-blog-wrapper-blog-list .blog-top-categories .blog_view_all_button,
.ybc-blog-wrapper-blog-list .blog-top-categories .view-all-categories,
.ybc-blog-wrapper-blog-list .blog-top-categories br {
  display: none !important;
}

.ybc-blog-wrapper-blog-list .blog-top-categories a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: unset !important;
  padding: 10px 16px !important;
  border: 1px solid #dfdfdf !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #1f1f1f !important;
  text-decoration: none !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  transition: all .25s ease !important;
  box-shadow: none !important;
}

.ybc-blog-wrapper-blog-list .blog-top-categories a:hover {
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}

/* =========================
   FEATURED POST
   ========================= */

.blog-featured-card {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #fafafa !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.06) !important;
  margin-bottom: 36px !important;
}

.blog-featured-image {
  display: block !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #f3f3f3 !important;
  text-decoration: none !important;
  border: none !important;
  color: inherit !important;
}

.blog-featured-image::before,
.blog-featured-image::after {
  content: none !important;
}

.blog-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .45s ease !important;
}

.blog-featured-card:hover .blog-featured-image img {
  transform: scale(1.04) !important;
}

.blog-featured-content {
  padding: 34px 34px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.blog-featured-label {
  display: inline-block !important;
  margin-bottom: 12px !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #8a8a8a !important;
}

.blog-featured-content h3 {
  margin: 0 0 14px !important;
  font-size: 30px !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
}

.blog-featured-content h3 a {
  color: #171717 !important;
  text-decoration: none !important;
  border: none !important;
}

.blog-featured-content p {
  margin: 0 0 18px !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #666 !important;
}

/* =========================
   GRID
   ========================= */

.blog-grid {
  margin-left: -14px !important;
  margin-right: -14px !important;
}

.blog-grid > [class*="col-"] {
  padding-left: 14px !important;
  padding-right: 14px !important;
  margin-bottom: 30px !important;
}

/* =========================
   POST CARDS
   ========================= */

.blog-card {
  background: #fff !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.05) !important;
  transition: transform .28s ease, box-shadow .28s ease !important;
  height: 100% !important;
}

.blog-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.10) !important;
}

.blog-image {
  display: block !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  background: #f3f3f3 !important;
  text-decoration: none !important;
  border: none !important;
}

.blog-image::before,
.blog-image::after {
  content: none !important;
}

.blog-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .45s ease !important;
}

.blog-card:hover .blog-image img {
  transform: scale(1.05) !important;
}

.blog-content {
  padding: 20px 20px 18px !important;
}

.blog-content h3 {
  margin: 0 0 10px !important;
  font-size: 22px !important;
  line-height: 1.28 !important;
  font-weight: 700 !important;
}

.blog-content h3 a {
  color: #171717 !important;
  text-decoration: none !important;
  border: none !important;
}

.blog-content h3 a:hover {
  opacity: .82;
}

.blog-content p {
  margin: 0 0 16px !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
  color: #6a6a6a !important;
}

/* =========================
   READ MORE
   ========================= */

.read_more {
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #171717 !important;
  text-decoration: none !important;
  border: none !important;
  position: relative;
  letter-spacing: .01em;
}

.read_more::after {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: currentColor !important;
  opacity: .32 !important;
  margin-top: 4px !important;
  transition: opacity .25s ease !important;
}

.read_more:hover::after {
  opacity: 1 !important;
}

/* =========================
   PAGINATION
   ========================= */

.blog-paggination {
  margin-top: 24px;
  padding-top: 6px;
  text-align: center;
}

.blog-paggination .pagination,
.blog-paggination nav,
.blog-paggination ul {
  justify-content: center !important;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 991px) {
  .blog-hero-top__inner {
    min-height: 300px !important;
  }

  .blog-hero-top__content {
    padding: 30px 28px !important;
  }

  .blog-hero-top h1 {
    font-size: 34px !important;
  }

  .blog-hero-top p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .blog-featured-card {
    grid-template-columns: 1fr !important;
  }

  .blog-featured-content {
    padding: 30px !important;
  }

  .blog-featured-content h3 {
    font-size: 26px !important;
  }

  .blog-content h3 {
    font-size: 20px !important;
  }
}

@media (max-width: 767px) {
  .blog-hero-top__inner {
    min-height: 280px !important;
    border-radius: 20px !important;
  }

  .blog-hero-top__content {
    padding: 24px 22px !important;
  }

  .blog-hero-top h1 {
    font-size: 28px !important;
    line-height: 1.1 !important;
    margin-bottom: 12px !important;
  }

  .blog-hero-top p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .ybc-blog-wrapper-blog-list .blog-top-categories {
    margin-bottom: 24px !important;
  }

  .ybc-blog-wrapper-blog-list .blog-top-categories a {
    font-size: 13px !important;
    padding: 9px 14px !important;
  }

  .blog-grid {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }

  .blog-grid > [class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-bottom: 22px !important;
  }

  .blog-card {
    border-radius: 16px !important;
  }

  .blog-content {
    padding: 18px 18px 16px !important;
  }

  .blog-content h3 {
    font-size: 18px !important;
  }

  .blog-content p {
    font-size: 14px !important;
    line-height: 1.68 !important;
  }

  .blog-featured-content h3 {
    font-size: 24px !important;
  }

  .blog-featured-content p {
    font-size: 15px !important;
  }
}