/* ==================================================================
   shared.css — 所有品牌站共用的版面修正
   ------------------------------------------------------------------
   這裡放「每個站都想要」的調整。改了之後複製到各站即可，
   因為它不含任何品牌專屬的值（顏色一律用 brand.css 的變數）。
   ================================================================== */

/* 移除 Flatsome 手機版商品列表左右的多餘留白 */
@media only screen and (max-width: 48em) {
  .row-small > .col,
  .row-small > .flickity-viewport > .flickity-slider > .col {
    padding: 0 8px 8px;
  }
}

/* 結帳頁：欄位間距放大，減少誤觸 */
.woocommerce-checkout .form-row {
  margin-bottom: 14px;
}

/* 商品標題統一兩行截斷，避免卡片高度參差 */
.product-small .name.product-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

/* 缺貨商品淡化 */
.product-small.outofstock .box-image {
  opacity: .55;
}

/* ------------------------------------------------------------------
   商品標籤（NEW / 折扣）
   ------------------------------------------------------------------
   Flatsome 預設把標籤做成 40×40 的正方形色塊（.badge-frame），用 table /
   table-cell 排版，兩個標籤疊起來時各自寬高不一致，看起來像沒對齊。
   這裡改成統一的小標籤語言：等高、緊湊、大寫、貼齊左上角。
   顏色不寫在這裡，一律由 brand.css 的變數決定。
   ------------------------------------------------------------------ */
.badge-container.absolute {
  /* Flatsome 的 .badge-container 有 margin:30px 0 0，會把標籤從圖片頂端推下去 30px。
     只設 top 沒有用，margin 要一起歸零。 */
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
}

/* NEW 永遠排在最上面，不會被折扣標籤擠下去 */
.badge-container .badge:has(.new-bubble-auto),
.badge-container .badge:has(.new-bubble) {
  order: -1;
}

/* display:flex 是必要的，不是偏好。
   .badge-inner 是 inline-flex，放在 display:block 的 .badge 裡會產生行框，
   行高的 leading 會把標籤往下推約 3px —— 看起來就是「沒有真的貼齊角落」。
   父層改成 flex 就不會建立行框，量測結果才會是乾淨的 0。 */
.badge-container .badge,
.badge-container .badge.badge-frame {
  display: flex;
  line-height: 0;
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.badge-container .badge .badge-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 22px;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  border-radius: var(--brand-radius);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 單一商品頁的標籤稍微大一點，比例才跟大圖相稱 */
.product-main .badge-container .badge .badge-inner,
.product-gallery .badge-container .badge .badge-inner {
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

/* 讓 Flatsome 的 sticky header 不會蓋住錨點 */
:target {
  scroll-margin-top: 90px;
}

/* ------------------------------------------------------------------
   按鈕 hover：讓 brand-config 設的顏色所見即所得
   ------------------------------------------------------------------
   Flatsome 在 .button:hover 加了 box-shadow: inset 0 0 0 100px rgba(0,0,0,.2)，
   那是一層 20% 的黑，疊在 background-color 上面。我們在 brand.css 已經把
   hover 換成 --brand-primary-dark，兩層相加會讓實際顏色比設定值暗兩成
   （#D87914 看起來會變成 #AD6110）。關掉遮罩，設定值才可信。

   同時 Flatsome 硬寫了 .button:hover{color:#fff}。淺色主色配白字對比不足
   （#D87914 配白字只有 3.15:1），所以這裡改用 --brand-on-primary。
   ------------------------------------------------------------------ */
.button.primary:hover,
button.primary:hover,
input[type="submit"].primary:hover,
.woocommerce .button.alt:hover,
.single_add_to_cart_button:hover {
  box-shadow: none;
  color: var(--brand-on-primary);
}

.button.secondary:hover,
button.secondary:hover {
  box-shadow: none;
  color: var(--brand-on-secondary);
}

/* 外框按鈕 hover 會填滿主色，Flatsome 同樣寫死白字 —— 一併修正 */
.button.is-outline:hover,
.primary.is-outline:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
  box-shadow: none;
}

/* ------------------------------------------------------------------
   內文連結
   ------------------------------------------------------------------
   連結顏色改成內文色之後，段落裡的連結會失去辨識度。
   內文區塊補上底線，靠形狀而不是顏色來標示，
   選單、商品標題、側欄這些「整塊都是連結」的地方則不加。
   ------------------------------------------------------------------ */
.entry-content a:not(.button):not(.plain):not([class*="ux-"]),
.woocommerce-Tabs-panel a:not(.button),
.page-inner p a:not(.button) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------------
   商品頁的加入購物車列
   ------------------------------------------------------------------
   Flatsome 讓「數量 / 加入購物車 / 立即購買」用一般的行內排列，
   商品欄只有 330px 寬時三個放不下，立即購買就被擠到第二行。
   改成 flex：數量維持原寬，兩顆按鈕平分剩下的空間，所以永遠等寬、同一列。

   flex-basis 給 100px 而不是 0，是留一個安全網 —— 真的窄到放不下時
   （小尺寸手機）才換行，而不是硬擠成看不懂的窄按鈕。

   grouped_form 排除掉：組合商品的 form.cart 裡是一張表格，不能改成 flex。
   ------------------------------------------------------------------ */
form.cart:not(.grouped_form),
.woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}

form.cart .quantity {
  flex: 0 0 auto;
  margin: 0;
}

.single_add_to_cart_button,
.ux-buy-now-button {
  flex: 1 1 100px;
  min-width: 0;
  margin: 0;
  padding: 0 12px;
}

/* ------------------------------------------------------------------
   按鈕文字垂直置中
   ------------------------------------------------------------------
   Flatsome 的按鈕靠 line-height: 2.4em 撐出高度來置中文字（min-height 2.5em）。
   但它另外有一條工具類別 .uppercase / .is-uppercase { line-height: 1.2 }，
   權重同為 (0,1,0) 且寫在後面，套在按鈕上就會贏 ——
   行高掉到 1.2，min-height 還是 2.5em，文字就卡在按鈕上緣。
   把按鈕上的行高補回去，大小尺寸都通用（2.4em 是相對 font-size）。
   ------------------------------------------------------------------ */
.button.uppercase,
.button.is-uppercase,
button.uppercase,
button.is-uppercase {
  line-height: 2.4em;
}

/* ------------------------------------------------------------------
   信任條
   ------------------------------------------------------------------
   圖示用 CSS mask 而不是把 <svg> 寫進文章內容：
   WP-CLI 執行時沒有登入使用者，current_user_can('unfiltered_html') 為 false，
   WordPress 會掛上 kses 過濾器，<svg> 標籤在寫入 post_content 時會被整段清掉。
   改成 mask + background-color 還有一個好處 —— 圖示顏色跟著品牌變數走，
   換品牌不用重畫圖。

   簡碼那邊只要在 <h5> 上加一個 bk-ico-xxx 類別，不需要空元素，
   也就不會被 wpautop 清掉。
   ------------------------------------------------------------------ */
.bk-trust {
  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.bk-trust h5 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}

.bk-trust h5[class*="bk-ico-"]::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 12px;
  background-color: var(--brand-primary);
  -webkit-mask: var(--bk-ico) center / contain no-repeat;
  mask: var(--bk-ico) center / contain no-repeat;
}

.bk-trust .bk-sub {
  margin: 0;
  font-size: 13px;
  opacity: .55;
}

@media only screen and (max-width: 48em) {
  .bk-trust .col { padding-bottom: 22px; }
}

.bk-ico-shield { --bk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7.2 2.9v5.1c0 4.6-3 8.2-7.2 10.4C7.8 19 4.8 15.4 4.8 10.8V5.7L12 2.8z'/%3E%3Cpath d='M8.9 12.1l2.2 2.2 4-4.4'/%3E%3C/svg%3E"); }

.bk-ico-box { --bk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 7.4L12 3l8.8 4.4v9.2L12 21l-8.8-4.4V7.4z'/%3E%3Cpath d='M3.2 7.4L12 11.8l8.8-4.4M12 11.8V21'/%3E%3C/svg%3E"); }


.bk-ico-truck { --bk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 6.2h10.9v9.1H2.8zM13.7 9.4h3.6l3.9 3.6v2.3h-7.5z'/%3E%3Ccircle cx='7' cy='17.8' r='1.9'/%3E%3Ccircle cx='17.3' cy='17.8' r='1.9'/%3E%3C/svg%3E"); }

/* LINE 標誌（信任條「真人客服」用）。外形是 LINE 官方 logo 的向量路徑（泡泡 + 鏤空 LINE 字），
   做成單色 mask 跟著 --brand-primary 走；其他三顆是線條、這顆是實心，視覺重量略重，
   已用 scale 縮小一點平衡。 */
.bk-ico-line { --bk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314'/%3E%3C/svg%3E"); }
.bk-trust h5.bk-ico-line::before { transform: scale(.88); }

/* 文字 Logo 溢出，壓到選單上
   ------------------------------------------------------------------
   Flatsome 把 Theme Options 的 header_logo_width 印成 wp_head 的
   inline <style> 裡的 #logo{width:126px}。那個數字是「上一個品牌的
   Logo 圖片寬度」—— 從 theme_mods 繼承過來的。

   換成文字 Logo 之後就對不上了：#logo a 是 display:block、
   overflow:visible，字比框寬就直接畫出去，壓在主選單上面。
   實測 IronVapor（32px 字）文字實寬 188px、框只有 126px、
   選單從 171px 開始 —— 疊了 32px，而且不會有任何錯誤。

   權重：inline 的 #logo 是 (1,0,0) 且位置在 enqueue 的 CSS 之後，
   同權重會贏，所以這裡要 (1,1,0) 才蓋得過去。

   :has(img) 讓這條只在「沒有 Logo 圖」時生效 —— 上傳真的 Logo 之後
   那個 width 就是對的，不該被動到。
   ------------------------------------------------------------------ */
.header-inner #logo:not(:has(img)) {
  width: auto;
}

/* 短頁面下方一整片黑，看起來像超大 footer
   ------------------------------------------------------------------
   Flatsome 把 html 的背景設成 Absolute Footer 的底色
   （.absolute-footer, html { background-color: footer_bottom_color }）。
   內容不滿一屏的頁面（404、空購物車、結帳完成、搜尋無結果）#wrapper
   結束後到視窗底部全是 footer 色，實測 404 桌機 #wrapper 只有 414px、
   剩下近 500px 都是黑的。母版有 Footer 2 三欄小工具區把那塊填住，
   brand-kit 關掉 footer_2 之後就整片露出來。

   做法：sticky footer —— #wrapper 至少撐滿一屏，#main 吃掉剩餘高度，
   footer 貼底、上方留白底，footer 本體維持一列細列不變。
   #wrapper 的直接子元素只有 header / main / footer（其餘是 .mfp-hide
   的彈窗），flex column 不影響它們的排版。
   ------------------------------------------------------------------ */
#wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#wrapper > #main {
  flex: 1 0 auto;
}

/* 「回到頂端」被 LINE 浮動鈕（Chaty）擋住
   ------------------------------------------------------------------
   Flatsome 的 #top-link 預設 39×39、right:20 / bottom:20；
   Chaty 的 LINE 鈕是 54×54、right:25 / bottom:25，z-index 又更高，
   兩顆疊在同一個角落，回頂鈕幾乎點不到。

   改法：跟 LINE 鈕同尺寸（54×54）、右緣對齊（right:25），
   疊在它正上方（bottom:25 + 54 + 13 間距 = 92），變成一直排。
   只在桌機生效就好 —— Flatsome 給它 hide-for-medium，手機本來就不顯示。
   ------------------------------------------------------------------ */
#top-link.back-to-top {
  width: 54px;
  height: 54px;
  right: 25px;
  bottom: 92px;
  line-height: 50px;
}
#top-link.back-to-top i {
  font-size: 24px;
}

/* ------------------------------------------------------------------
   FAQ 頁（.bk-faq-page）
   ------------------------------------------------------------------
   版型：頂部標題區 → 分組的編號手風琴（單欄置中）。顏色全部走 brand.css 變數，不含品牌專屬值。
   頁面內容用 Flatsome 簡碼組成，類別名稱對照：
     .bk-page-hero   標題區（共用元件）
     .bk-faq-group   一組問題（h2 + [accordion class="bk-faq"]）
   ------------------------------------------------------------------ */
.bk-faq-page { padding: 0 0 72px; } /* 上方留白由 .bk-page-hero 統一 */

/* ==================================================================
   內頁標頭元件 .bk-page-hero —— 所有內頁（FAQ、部落格、關於…）共用
   ------------------------------------------------------------------
   結構固定三行：<p class="bk-eyebrow">小字</p> <h1>標題</h1> <p class="bk-lead">導言</p>
   位置固定：放在 Flatsome 置中的 large-10 欄裡（頁面用 [row h_align="center"][col span="10"]，
   模板用 layout-no-sidebar 的 large-10）。左緣就會跟內容對齊。
   間距只在這裡定義一次，各頁不要自己加 padding。
   ================================================================== */
.bk-page-hero { padding: 18px 0 0; margin-bottom: 40px; }
.bk-page-hero .bk-eyebrow {
  margin: 0 0 8px;
  font-size: var(--brand-fs-label);
  font-weight: var(--brand-fw-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.bk-page-hero h1 { margin: 0 0 12px; }
.bk-page-hero .bk-lead {
  margin: 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--brand-text-muted);
}
@media only screen and (max-width: 849px) {
  .bk-page-hero { padding-top: 6px; margin-bottom: 24px; }
}

/* 問題分組 */
.bk-faq-group { scroll-margin-top: 96px; }
.bk-faq-group + .bk-faq-group { margin-top: 44px; }
.bk-faq-group h2 {
  margin: 0 0 6px; /* 字級／字重走 brand.css 的 html h2 節奏 */
}
.bk-faq-group .bk-group-sub {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--brand-text-muted);
}

/* 編號手風琴：覆蓋 Flatsome 預設的 .accordion-title */
.bk-faq { counter-reset: faq; border-top: 1px solid var(--brand-border); }
.bk-faq .accordion-item { border-bottom: 1px solid var(--brand-border); }
.bk-faq .accordion-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 64px 20px 20px;
  border: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--brand-text);
  transition: color .15s;
}
.bk-faq .accordion-title::before {
  counter-increment: faq;
  content: counter(faq, decimal-leading-zero);
  flex: 0 0 auto;
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  line-height: 1;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--brand-primary);
}
.bk-faq .accordion-title:hover,
.bk-faq .accordion-title.active { color: var(--brand-primary-dark); background: none; }
.bk-faq .accordion-title button.toggle {
  position: absolute;
  left: auto;   /* Flatsome 預設 left:0，不清掉會壓在編號上 */
  right: 20px;
  top: 50%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Flatsome 的 .toggle 有 height:100%，button 又有 min-height，會被撐成直立橢圓；鎖死正方形 */
  width: 28px !important;
  height: 28px !important;
  min-width: 0;
  min-height: 0;
  max-height: none;
  line-height: 26px;
  text-align: center;
  background: none;
  transform: translateY(-50%);
  border: 1px solid var(--brand-border);
  border-radius: 50%;
  color: var(--brand-text);
  opacity: 1;
  transition: transform .2s, background .15s;
}
.bk-faq .accordion-title button.toggle i { font-size: 13px; }
.bk-faq .accordion-title.active button.toggle {
  transform: translateY(-50%) rotate(180deg);
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
}
.bk-faq .accordion-inner {
  padding: 0 64px 22px 51px; /* 左邊對齊題目文字：標題左 padding 20 + 編號寬 ~15 + gap 16 */
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--brand-text-muted);
}
.bk-faq .accordion-inner p { margin: 0 0 10px; }
.bk-faq .accordion-inner p:last-child { margin-bottom: 0; }

@media only screen and (max-width: 849px) {
  .bk-faq .accordion-title { font-size: 16px; padding: 16px 48px 16px 12px; }
  .bk-faq .accordion-title button.toggle { right: 12px; }
  .bk-faq .accordion-inner { padding: 0 12px 18px 12px; }
}

/* 深色區塊（Flatsome .dark）內的 .bk-faq：邊線／文字改走 currentColor，
   不吃 brand-text 這種淺底專用色。首頁 FAQ 區塊用。 */
.dark .bk-faq,
.dark .bk-faq .accordion-item { border-color: color-mix(in srgb, currentColor 18%, transparent); }
.dark .bk-faq .accordion-title { color: inherit; }
.dark .bk-faq .accordion-title:hover,
.dark .bk-faq .accordion-title.active { color: var(--brand-primary); }
.dark .bk-faq .accordion-title button.toggle { color: inherit; border-color: color-mix(in srgb, currentColor 30%, transparent); }
.dark .bk-faq .accordion-inner { color: inherit; opacity: .75; }
.dark .bk-faq-lead { opacity: .7; margin: 0; }

/* 展開態修正：
   1) 滑鼠點擊後不顯示 focus 外框（鍵盤操作的 :focus-visible 保留）
   2) 深色區塊裡展開時，箭頭要用 on-primary 色，否則跟橘色圓鈕同色看不見 */
.bk-faq .accordion-title:focus { outline: none; }
.bk-faq .accordion-title:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.dark .bk-faq .accordion-title.active button.toggle {
  color: var(--brand-on-primary);
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* ------------------------------------------------------------------
   部落格卡片（.bk-blog-grid，配 template-parts/posts/archive-3-col.php）
   ------------------------------------------------------------------
   Flatsome [blog_posts] 的卡片：.box-image（圖）→ .box-text（分類/標題/日期/摘要）。
   這裡拿掉它的分隔線與圖片 hover 縮放，改成：圓角圖、分類小標籤（品牌色）、
   標題兩行截斷、日期灰字、摘要三行截斷。沒有特色圖的文章給一塊淡底當佔位。 */

.bk-blog-grid .post-item .box { display: flex; flex-direction: column; height: 100%; }
.bk-blog-grid .post-item .box-image { border-radius: var(--brand-radius-lg); overflow: hidden; background: var(--brand-bg-alt); }
.bk-blog-grid .post-item .box-image img { transition: transform .35s ease; }
.bk-blog-grid .post-item .box:hover .box-image img { transform: scale(1.03); }
/* 沒有特色圖：補一塊固定比例的淡底，讓卡片高度一致 */
.bk-blog-grid .post-item .box:not(:has(.box-image))::before {
  content: "";
  display: block;
  padding-top: 62%;
  border-radius: var(--brand-radius-lg);
  background: linear-gradient(135deg, var(--brand-bg-alt), color-mix(in srgb, var(--brand-primary) 12%, var(--brand-bg-alt)));
}
.bk-blog-grid .post-item .box-text { padding: 16px 2px 8px; }
.bk-blog-grid .post-item .box-text .is-divider { display: none; }
.bk-blog-grid .post-item .cat-label {
  margin: 0 0 8px;
  font-size: var(--brand-fs-label);
  font-weight: var(--brand-fw-label);
  letter-spacing: .08em;
  opacity: 1;
}
.bk-blog-grid .post-item .cat-label a { color: var(--brand-primary); }
.bk-blog-grid .post-item .post-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bk-blog-grid .post-item .post-title a { color: var(--brand-text); }
.bk-blog-grid .post-item .box:hover .post-title a { color: var(--brand-primary-dark); }
.bk-blog-grid .post-item .post-meta { margin: 0 0 8px; font-size: 12px; color: var(--brand-text-muted); opacity: 1; }
.bk-blog-grid .post-item .from_the_blog_excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--brand-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bk-blog-grid .row { row-gap: 8px; }