/* ============================================================================
 * themes/3ffood/pages/post.css — 3ffood 主題貼文頁覆寫
 * ============================================================================
 *
 * 用途：
 *   承接舊 3ffood.css 的「三福 /posts」重設計段落（貼文列表 posts/index +
 *   貼文詳情 posts/show），作為 3ffood 主題對 common/pages/post.css 的覆寫層。
 *   載入順序在 common/pages/post.css 之後，3ffood 貼文頁版本後勝覆寫。
 *
 * 抽取策略（差異覆寫 + blade 推導）：
 *   貼文頁基底（新版列表卡 .blog-item-2 / 詳情 .blog-details-area / blog-section-title）
 *   由 common/pages/post.css 承接。post blade 用 .blog-item-2 + .date-box（列表）、
 *   .blog-details-area（詳情）、.owl-carousel-suggest（文章分享，與 .product-item
 *   複用，故 posts.show route = ['product','post'] 同時載 product.css）；舊版
 *   .blog-item（.blog-desc::before/::after 裝飾）blade 未使用，屬 dead rule，不抽。
 *
 * 抽取來源（public/web/css/3ffood.css）：
 *   - line 4910-4915：.read-more a 連結色（#2c2c2c）
 *   - line 5040-5131：新版列表卡基底 .blog-item-2 / .blog-title-2 / .blog-desc /
 *                     .blog-image / .date-box / .date-text / .read-more /
 *                     .blog-title-border + hover（3ffood 品牌值）
 *   - line 5745-5807：貼文詳情 .blog-details-area（含 .blog-description p img / img）
 *                     + RWD + .blog-details-title
 *   - line 10158-10807：★ 三福 /posts 重設計（高 specificity）：清單一列一張日式
 *                       資訊卡（#page-content...>.blog-item-2 + date-box/text）+
 *                       文章內頁文章分享區塊（.widget.widget-product .owl-carousel-suggest
 *                       商品卡 + carousel-btn 箭頭，含「新聞卡片版」覆寫）
 *   - line 12226-12260：Final Global Overrides 內容頁（#page-content .blog-details-area /
 *                       .blog-item-2 .blog-title-2 / .read-more a 收斂色）
 *
 * 跳過範圍：
 *   - 舊版 .blog-item（4890-4985）blade 未用 → dead，不抽
 *   - .blog-section-title（5809）已入 base.css(task 10.1，跨頁)
 *   - .owl-carousel-suggest 基底（4992-5037）：posts.show 由上方 redesign 高 spec
 *     覆寫、products.show 由 product.css 相關商品區處理；如 Playwright 對照發現差異再補
 *
 * 載入順序：
 *   common/pages/post.css -> themes/3ffood/pages/post.css（本檔）
 *   （posts.show 另載 product.css，順序 product → post，post 後勝）
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 10.7）
 * ============================================================================
 */

/* ============================================================================
 * .read-more a 連結色 (3ffood.css 4910-4915)
 * ============================================================================ */

/* ============================================================================
 * 新版列表卡基底 .blog-item-2 / .blog-title-2 / .blog-desc / .blog-image / .date-box / .date-text / .read-more / .blog-title-border (3ffood.css 5040-5131)
 * ============================================================================ */

.date-text {
  margin-bottom: 0 !important;
  /* font-size: 14px; */
  text-align: end;
}

/* .read-more a {
  padding: 10px 16px;
} */

/* ============================================================================
 * 貼文詳情 .blog-details-area + RWD + .blog-details-title (3ffood.css 5745-5807)
 * ============================================================================ */

.blog-details-area .blog-description p img {
  width: auto;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: auto;

}

.blog-details-area .blog-description img {
  width: auto;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: auto;

}

@media screen and (max-width: 768px) {

.blog-details-area .blog-description p img {
    width: auto;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: auto;
  }

  .blog-details-area .blog-descriptio img {
    width: auto;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: auto;
  }
}

/* ============================================================================
 * 三福 /posts 重設計（高 spec）：日式資訊卡列表 + 文章分享區塊(owl-carousel-suggest, 含新聞卡片版) (3ffood.css 10158-10807)
 * ============================================================================ */

/* 三福 /posts 清單：一列一張（日式資訊卡） */
#page-content.section>.blog-section>.container>.row>.col-md-6 {
  flex: 0 0 100%;
  max-width: 100%;
}

#page-content.section>.blog-section>.container>.row>.col-md-6>.blog-item-2 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 26px;
  padding: 0 0 24px;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid rgba(201, 172, 110, 0.56);
  position: relative;
  overflow: visible;
}

#page-content.section>.blog-section>.container>.row>.col-md-6>.blog-item-2>.row {
  margin: 0;
  display: flex;
  align-items: center;
  column-gap: 36px;
}

#page-content.section>.blog-section>.container>.row>.col-md-6>.blog-item-2>.row>[class*="col-lg-6"] {
  padding: 0;
}

#page-content.section>.blog-section>.container>.row>.col-md-6>.blog-item-2>.row>[class*="col-lg-6"]:first-child {
  flex: 0 0 230px;
  max-width: 230px;
}

#page-content.section>.blog-section>.container>.row>.col-md-6>.blog-item-2>.row>[class*="col-lg-6"]:last-child {
  flex: 1 1 auto;
  max-width: none;
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .blog-image {
  width: 230px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 1.5px solid rgba(201, 172, 110, 0.9);
  background: #fffdfa;
  overflow: hidden;
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2:hover img {
  opacity: 1;
  transform: none;
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .blog-desc {
  padding: 0 190px 0 0;
  min-height: 220px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .blog-title-2 {
  margin: 0 0 14px;
  color: #C9AF76;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: none;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .blog-title-2>a {
  color: inherit;
  padding: 0;
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .blog-title-2>a:hover {
  color: #8f6f3a;
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .blog-desc>p {
  margin-bottom: 0;
  color: #755100;
  font-size: 18px;
  line-height: 1.75;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .read-more {
  width: auto;
  margin: 0;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .read-more a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 138px;
  height: 52px;
  padding: 0 20px;
  border-radius: 6px;
  border: 1.5px solid #6a1d15;
  background: #6a1d15;
  color: #fff7ef;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .read-more a::after {
  content: "▶";
  font-size: 10px;
  color: #c9ac6e;
  line-height: 1;
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .read-more a:hover {
  background: #4f130d;
  border-color: #4f130d;
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .date-box {
  position: absolute;
  left: -124px;
  top: -14px;
  margin: 0;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  border: 1.5px dashed rgba(127, 51, 46, 0.7);
  background: rgba(255, 253, 250, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .date-text {
  margin: 0 !important;
  color: #7f332e;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-align: center;
  word-break: normal;
  white-space: normal;
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .date-text .date-year,
#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .date-text .date-md {
  display: block;
}

#page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .date-text .date-year {
  margin-bottom: 4px;
}

@media (max-width: 1199px) {
  #page-content.section>.blog-section>.container>.row>.col-md-6>.blog-item-2>.row {
    column-gap: 24px;
  }

  #page-content.section>.blog-section>.container>.row>.col-md-6>.blog-item-2>.row>[class*="col-lg-6"]:first-child {
    flex-basis: 210px;
    max-width: 210px;
  }

  #page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .blog-image {
    width: 210px;
  }

  #page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .blog-desc {
    padding-right: 170px;
    min-height: 206px;
  }

  #page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .read-more a {
    min-width: 124px;
    height: 48px;
    padding: 0 16px;
  }

  #page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .date-box {
    left: -112px;
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 991px) {
  #page-content.section>.blog-section>.container>.row>.col-md-6>.blog-item-2 {
    padding-bottom: 18px;
  }

  #page-content.section>.blog-section>.container>.row>.col-md-6>.blog-item-2>.row {
    display: block;
  }

  #page-content.section>.blog-section>.container>.row>.col-md-6>.blog-item-2>.row>[class*="col-lg-6"]:first-child,
  #page-content.section>.blog-section>.container>.row>.col-md-6>.blog-item-2>.row>[class*="col-lg-6"]:last-child {
    max-width: 100%;
  }

  #page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .blog-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    margin-bottom: 14px;
  }

  #page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 img {
    aspect-ratio: 16 / 9;
  }

  #page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .blog-desc {
    padding: 0;
    min-height: 0;
  }

  #page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .read-more {
    position: static;
    transform: none;
    margin-top: 12px;
  }

  #page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .date-box {
    position: static;
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    padding: 0;
    margin: 10px 0 0;
    justify-content: flex-start;
  }

  #page-content.section>.blog-section>.container>.row>.col-md-6 .blog-item-2 .date-text {
    color: #8f744b;
    word-break: normal;
    text-align: left;
  }
}

/* 三福 /posts 文章內頁：文章分享區塊 */
#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block {
  padding-left: 0;
  padding-right: 0;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product {
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 30px !important;
  padding: 24px 24px 28px;
  background: rgba(255, 253, 250, 0.95) !important;
  border: 1.5px solid rgba(201, 172, 110, 0.45);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(40, 3, 0, 0.06);
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product>.d-flex {
  margin-bottom: 16px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(201, 172, 110, 0.48);
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .widget-title {
  margin: 0;
  padding-left: 0;
  color: #6a1d15;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: none;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .widget-title::before {
  display: none;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .widget-title-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8f744b;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .widget-title-more i {
  color: #c9ac6e;
  font-size: 13px;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .widget-title-more:hover {
  color: #6a1d15;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-item {
  margin-right: 0;
  margin-bottom: 0 !important;
  padding: 10px;
  background: #fcf8f0;
  border: 1px solid rgba(201, 172, 110, 0.5);
  border-radius: 10px;
  border-top-left-radius: 44px;
  box-shadow: none;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-img {
  float: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  border-top-left-radius: 34px;
  background: #ffffff;
  overflow: hidden;
  position: relative;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-right: 1.5px solid rgba(201, 172, 110, 0.92);
  border-bottom: 1.5px solid rgba(201, 172, 110, 0.92);
  pointer-events: none;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-img a {
  display: block;
  width: 100%;
  height: 100%;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-img .desktopImg {
  display: none !important;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-img .mobileImg {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-info {
  float: none;
  width: 100%;
  background: transparent;
  padding: 12px 2px 2px;
  text-align: left;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-title {
  margin: 0;
  color: #6a1d15;
  font-weight: 700;
  line-height: 1.45;
  text-transform: none;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-height: 2.9em;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-title a {
  color: inherit;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox {
  gap: 10px;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox .carousel-btn {
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1.5px solid #c9ac6e;
  border-radius: 999px;
  background: #fffdfa;
  background-image: none !important;
  position: relative;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox>.carousel-btn.left::before,
#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox>.carousel-btn.right::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  color: #8f744b;
  font-size: 22px;
  line-height: 1;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox>.carousel-btn.left::before {
  content: "‹";
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox>.carousel-btn.right::before {
  content: "›";
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox .carousel-btn:hover {
  background: #6a1d15;
  border-color: #6a1d15;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox .carousel-btn:hover::before {
  color: #fff7ef;
}

@media (max-width: 991px) {
  #page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product {
    padding: 16px 12px 20px;
    border-radius: 10px;
  }

  #page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .widget-title {
    font-size: 24px;
  }

  #page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-item {
    border-top-left-radius: 34px;
  }

  #page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-img {
    border-top-left-radius: 26px;
  }
}

/* 三福 /posts 文章內頁：文章分享區塊（新聞卡片版） */
#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product {
  width: 100%;
  max-width: 1200px;
  margin: 24px auto 30px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product>.d-flex {
  margin-bottom: 16px !important;
  padding: 0 2px 12px;
  border-bottom: 1px solid rgba(201, 172, 110, 0.48);
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .widget-title {
  margin: 0;
  padding-left: 0;
  color: #6a1d15;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: none;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .widget-title::before {
  display: none;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .widget-title-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(201, 172, 110, 0.55);
  border-radius: 999px;
  color: #8f744b;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  background: rgba(255, 253, 250, 0.65);
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .widget-title-more i {
  color: #c9ac6e;
  font-size: 12px;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .widget-title-more:hover {
  color: #6a1d15;
  background: #fff8ef;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-item {
  margin: 0;
  padding: 0;
  background: #fffdfa;
  border: 1px solid rgba(201, 172, 110, 0.46);
  border-radius: 10px;
  box-shadow: none;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-item:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 172, 110, 0.8);
  box-shadow: 0 10px 20px rgba(40, 3, 0, 0.08);
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-img {
  float: none;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 0;
  border: 0;
  overflow: hidden;
  background: #ffffff;
  position: relative;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-img::after {
  display: none;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-img a {
  display: block;
  width: 100%;
  height: 100%;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-img .desktopImg {
  display: none !important;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-img .mobileImg {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-info {
  float: none;
  width: 100%;
  padding: 12px 14px 14px;
  background: transparent;
  text-align: left;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-title {
  margin: 0;
  color: #6a1d15;
  font-weight: 700;
  line-height: 1.55;
  text-transform: none;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-height: 3.1em;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-suggest .product-title a {
  color: inherit;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox {
  gap: 8px;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox .carousel-btn {
  width: 42px;
  height: 42px;
  margin: 0;
  border: 1px solid rgba(201, 172, 110, 0.72);
  border-radius: 999px;
  background: #fffdfa;
  background-image: none !important;
  position: relative;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox>.carousel-btn.left::before,
#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox>.carousel-btn.right::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  color: #8f744b;
  font-size: 22px;
  line-height: 1;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox>.carousel-btn.left::before {
  content: "‹";
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox>.carousel-btn.right::before {
  content: "›";
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox .carousel-btn:hover {
  border-color: #6a1d15;
  background: #6a1d15;
}

#page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .owl-carousel-btn-suggestbox .carousel-btn:hover::before {
  color: #fff7ef;
}

@media (max-width: 991px) {
  #page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .widget-title {
    font-size: 24px;
  }

  #page-content.section .blog-section .col-lg-12.col-12.order-2.d-block>.widget.widget-product .widget-title-more {
    padding: 6px 10px;
    font-size: 13px;
  }
}

/* ============================================================================
 * Final Global Overrides 內容頁：#page-content .blog-* 收斂色 (3ffood.css 12226-12260)
 * ============================================================================ */

/* ---------- 內容頁（posts/articles/company 等） ---------- */
#page-content .blog-details-area {
  min-height: 0;
}

#page-content .blog-details-area .blog-details-title {
  color: var(--sf-color-primary);
  font-weight: 700;
}

#page-content .blog-details-area .blog-description,
#page-content .innerpage-edit-box p,
#page-content .innerpage-edit-box li {
  color: var(--sf-color-text);
}

#page-content .blog-item-2 .blog-title-2>a {
  color: var(--sf-color-primary);
  font-weight: 700;
}

#page-content .blog-item-2 .blog-title-2>a:hover {
  color: var(--sf-color-primary-hover);
}

#page-content .blog-item-2 .read-more a {
  border-color: var(--sf-color-primary);
  background: var(--sf-color-primary);
  color: var(--sf-color-text-light);
}

#page-content .blog-item-2 .read-more a:hover {
  border-color: var(--sf-color-primary-hover);
  background: var(--sf-color-primary-hover);
}