@layer theme-custom {
/* 部落格文章內文字級 16px → 18px（只影響部落格文章頁） */
body.b_blog_detail .blog-info-text,
body.b_blog_detail .blog-info-text p,
body.b_blog_detail .blog-info-text li,
body.b_blog_detail .blog-info-text span,
body.b_blog_detail .blog-info-text div {
  font-size: 18px !important;
  line-height: 1.7 !important;
}

/* 部落格文章內文改粗體：蓋掉自訂CSS片段「原站自訂樣式」的 body * { font-weight:200!important }，只限部落格文章頁內文 */
body.b_blog_detail .blog-info-text,
body.b_blog_detail .blog-info-text * {
  font-weight: 700 !important;
}

/* 部落格列表標題：蓋掉自訂CSS片段「原站自訂樣式」的 .article-intro a h2.middle-title { height:2.5em }
   改成固定兩行高度，超過兩行以「…」收尾，避免標題壓到日期 */
body.b_blog_list .article-intro a h2.middle-title {
  line-height: 1.6 !important;
  height: 3.2em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  margin-bottom: 4px !important;
}

/* 部落格列表縮圖一律顯示成正方形（置中裁切，原圖不動） */
body.b_blog_list .col-md-4 picture img {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  object-position: center;
}

/* 手機版橫幅圖高度：「原站自訂樣式」的 .html-info .container .full_w img { height:405px } 已失效
   （頁面結構裡橫幅圖外層不再有 .container），導致手機橫幅只剩約 156px、文字溢出。這裡補回同樣設定。 */
@media (max-width: 767px) {
  .html-info .full_w img {
    height: 405px !important;
    object-fit: cover !important;
    margin: 0 !important;
  }
}

/* 商品列表縮圖統一成正方形：直式的茶葉照與方形的電子報圖高度一致，整張圖完整顯示、兩側留白 */
body.m_product .product-group .img-box {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
}
body.m_product .product-group .img-box picture,
body.m_product .product-group .img-box img {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
body.m_product .product-group .img-box img {
  object-fit: contain !important;
}

/* 首頁「文章精選」卡片：滑鼠移上去時整張卡片微微浮起、加淡陰影（只在有滑鼠的裝置生效，手機不受影響） */
@media (hover: hover) {
  section.index-editor .four_block .col-md-3 {
    transition: transform .35s ease, box-shadow .35s ease, background-color .35s ease;
    border-radius: 8px;
    padding-bottom: 14px;
  }
  section.index-editor .four_block .col-md-3:hover {
    transform: translateY(-6px);
    background-color: #fff;
    box-shadow: 0 10px 24px rgba(30, 43, 91, .12);
  }
}

/* 部落格列表卡片：滑鼠移上去時整張卡片微微浮起、加淡陰影（圖片不放大，比首頁更低調；手機不受影響） */
@media (hover: hover) {
  body.b_blog_list .col-md-4:has(.article-intro) {
    transition: transform .35s ease, box-shadow .35s ease;
    border-radius: 8px;
  }
  body.b_blog_list .col-md-4:has(.article-intro):hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(30, 43, 91, .10);
  }
}

/* 「瞭解更多」：滑鼠移上去時，箭頭往右滑一點 */
@media (hover: hover) {
  .html-info a.readmore:after {
    transition: transform .3s ease;
  }
  .html-info a.readmore:hover:after {
    transform: translateX(8px);
  }
}

/* 系統設定「減少動態效果」的使用者，不播放上述動態 */
@media (prefers-reduced-motion: reduce) {
  section.index-editor .four_block .col-md-3,
  section.index-editor .four_block .col-md-3 img,
  body.b_blog_list .col-md-4:has(.article-intro),
  .html-info a.readmore:after {
    transition: none !important;
  }
  section.index-editor .four_block .col-md-3:hover,
  body.b_blog_list .col-md-4:has(.article-intro):hover,
  .html-info a.readmore:hover:after {
    transform: none !important;
  }
}
}