/* ============================================================================
 * themes/kgtwbeef/widget.css — kgtwbeef 主題 widget 層完整抽取
 * ============================================================================
 *
 * 用途：
 *   完整承接舊 kgtwbeef.css 的 widget 相關段落內容，含：
 *     A. 早期 widget 系列（widget-search / widget-categories / widget-product）
 *     B. .owl-carousel-suggest + .carousel-btn 箭頭（跨頁面共用：
 *        products/show 相關商品 + posts/show 文章分享都用此結構）
 *     C. 後期 widget block 系列（widget / widget-title / widget-search button /
 *        widget-product block / product-cat treeview）
 *     D. #page-content scoped 跨頁面標題字級 cascade（含 .blog-item-2 .blog-title-2 /
 *        .blog-details-title / .widget-block-title h2）
 *        + 3 段 RWD（#header 同窗 RWD 為重複保留，無害）
 *
 * 抽取策略（按 dgfactor 模式 — 完整段落抽取）：
 *   舊 kgtwbeef.css 已凍結停用（css.blade.php 改用 themeCssUrls 模組化載入，不再直接載入舊單檔），其 widget 段落
 *   SHALL 完整抽到本檔。本檔載入順序在 common/widget.css 之後。
 *
 * 抽取來源：public/web/css/kgtwbeef.css
 *   - line 2532-2701：早期 .widget-search / .widget-categories / .widget-product
 *                     （側邊欄商品分類、搜尋、商品列表 widget）
 *   - line 3652-3698：.owl-carousel-suggest / .owl-carousel-btn-suggestbox /
 *                     .carousel-btn 箭頭（跨頁 owl 輪播按鈕）
 *   - line 3936-4063：.widget / .widget-title / .widget-title::before /
 *                     .widget-search / .product-cat treeview / .widget-product
 *                     block 區塊 layout
 *   - line 5745-5899：#page-content scoped 跨頁面標題字級 cascade + 3 段 RWD
 *
 * 跳過（kgtwbeef view 樹不渲染或 common 已涵蓋）：
 *   - widget-bannerA~E / widget-imgTextA~D / widget-video / widget-image /
 *     widget-text 主要由 common/widget.css + widgets.css 承接
 *   - line 3700+ 的標準 .blog-item-2（pages/post 內容）留給 task 9.7 pages/post.css
 *
 * 載入順序：
 *   common/widget.css -> themes/kgtwbeef/widget.css（本檔）-> 其他
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 9.5）
 * ============================================================================
 */

/* ============================================================================
 * 區段 A：早期 widget 系列（line 2532-2701）
 * ============================================================================ */

.widget-categories {
  background: #eae2d8;
  border-radius: 10px;
}

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

.btn-group-category {
    width: 100%;
    background: #eae2d8;
    border-radius: 10px;
  }

.btn-group-category .product-cat-item a {
    font-size: 16px;
    padding: 12px;
    margin-bottom: 10px;
    display: block;
    background: rgb(243, 243, 243);
    color: #333333;
    border-radius: 8px;
  }

.btn-group-category .product-cat-item ul .product-cat-item a {
    font-size: 16px;
    padding: 12px;
    margin-bottom: 10px;
    display: block;
    background: #4c2020;
    color: #ffffff;
    border-radius: 8px;
  }

  .btn-group-category .product-cat-item ul .product-cat-item ul .product-cat-item a {
    font-size: 16px;
    padding: 12px;
    margin-bottom: 10px;
    display: block;
    background: #2e1313;
    color: #ffffff;
    border-radius: 8px;
  }
}

.widget-product .product-item .product-tag {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 52px;
  height: 52px;
  background: #E8380C;
  color: #ffffff;
  padding: 8px;
  border-radius: 99rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

.widget-product .product-item .product-info .product-title .product-title-link {
  font-size: 16px;
  color: #553500;
  line-height: 24px;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  text-wrap: wrap;
  min-height: 72px;
}

@media screen and (max-width: 768px) {
  .widget-product .product-item .product-info .product-title .product-title-link {
    font-size: 14px;
    line-height: 24px;
    margin-top: 10px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 24px;
    min-height: 72px;
  }
}

.widget-product .product-item .product-info .pro-price {
  font-size: 18px;
  color: #E8380C;
  font-weight: 600;
}

/* ============================================================================
 * 區段 B：owl-carousel-suggest 跨頁輪播按鈕（line 3652-3698）
 * ============================================================================ */

.owl-carousel-suggest .product-item {
  width: 100%;
  background: #ffffff;
  margin-bottom: 10px !important;
  box-shadow: none;
  border: 1px solid #dddddd;
}

@media screen and (max-width: 767px) {
  .owl-carousel-suggest .product-item {
    width: 100%;
    background: #ffffff;
    margin-bottom: 20px !important;
    box-shadow: none;
    border: 1px solid #dddddd;
  }

  .widget-title-more {
    color: #D1AD4B;
    font-weight: 600;
  }
}

.owl-carousel-btn-suggestbox {
  width: fit-content;
  display: flex;
}

.owl-carousel-btn-suggestbox .carousel-btn {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

.owl-carousel-btn-suggestbox>.carousel-btn.right {
  background-image: url('../../../img/icon/arrow_R.svg');
  float: none;
}

.owl-carousel-btn-suggestbox>.carousel-btn.left {
  background-image: url('../../../img/icon/arrow_L.svg');
  margin-right: 1rem;
}

/* ============================================================================
 * 區段 C：後期 widget block 系列 + product-cat treeview（line 3936-4063）
 * ============================================================================ */

.widget {
  padding: 20px 16px;
}

.widget-title {
  color: #312525;
  font-family: HGPMinchoE;
  font-display: swap;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
  padding-left: 5px;
}

.widget-title::before {
  background: #312525;
  content: "";
  display: block;
  height: 100%;
  width: 2px;
  margin-top: 0px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.widget-search {
  position: relative;
}

.widget-search button:hover {
  color: #ff7f00;
}

.product-cat .treeview .collapsable>a {
  color: #ff7f00;
}

.widget-product .product-item {
  overflow: hidden;
}

.widget-product .pro-price {
  color: #999999;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0;
}

/* ============================================================================
 * 區段 D：#page-content scoped 跨頁面標題字級 cascade + 3 RWD（line 5745-5899）
 * ============================================================================ */

#page-content .blog-item-2 .blog-title-2,
#page-content .blog-item-2 .blog-title-2>a,
#page-content .widget-block-title h2 {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media (min-width: 992px) and (max-width: 1199px) {
  #header #navBar>.container-fluid.plr-185 {
    min-height: 82px;
    padding-left: 36px;
    padding-right: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #header .logo {
    padding: 0;
    display: flex;
    align-items: center;
  }

  #header .navLogo {
    height: 56px;
    margin-right: 0;
  }

  #header .navbar-toggler {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #header .navbar-toggler:focus {
    box-shadow: none;
  }

  #header .lightMenu {
    display: block;
    width: 34px;
    height: 34px;
  }

  #page-content .widget-block-title h2 {
    font-size: 28px;
    line-height: 1.3;
  }

  #page-content .blog-item-2 .blog-title-2 {
    font-size: 22px;
    line-height: 1.35;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #header #navBar>.container-fluid.plr-185 {
    min-height: 78px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #header .logo {
    padding: 0;
    display: flex;
    align-items: center;
  }

  #header .navLogo {
    height: 54px;
    margin-right: 0;
  }

  #header .navbar-toggler {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #header .navbar-toggler:focus {
    box-shadow: none;
  }

  #header .lightMenu {
    display: block;
    width: 32px;
    height: 32px;
  }

  #page-content .widget-block-title h2 {
    font-size: 26px;
    line-height: 1.3;
  }

  #page-content .blog-item-2 .blog-title-2 {
    font-size: 20px;
    line-height: 1.35;
  }
}

@media (max-width: 480px) {
  #header #navBar>.container-fluid.plr-185 {
    min-height: 72px;
    padding-left: 14px;
    padding-right: 14px;
  }

  #header .navLogo {
    height: 52px;
    margin-right: 0;
  }

  #page-content .widget-block-title h2 {
    font-size: 24px;
    line-height: 1.3;
  }

  #page-content .blog-item-2 .blog-title-2 {
    font-size: 18px;
  }

  #page-content .btnSummit,
  #page-content .btnNormal,
  #page-content .submit-btn,
  #page-content .btn-submit,
  #page-content .apply-btn,
  #page-content .check-btn,
  #page-content .btnCanNotBuy {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* ============================================================================
 * 區段 E：.dutyBox kgtwbeef 專屬「責任」widget 卡（line 4861-4938）
 *   4 個 icon 背景圖（dutyBoxbg01~04.png）+ 標題 + 內容；
 *   圖片路徑已從 ../img/ 改為 ../../../img/（新檔位置深度多 2 層修正）
 * ============================================================================ */

.dutyBox {
  padding: 30px 40px;
  border-right: 2px solid #D1AD4B;
  min-height: 500px;
}

.dutyBox:last-child {
  border-right: none;
}

@media screen and (max-width: 992px) {
  .dutyBox:nth-child(even) {
    border-right: none;
  }

  .page-wrapper {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .dutyBox {
    padding: 60px 40px;
    min-height: -moz-fit-content;
    min-height: fit-content;
    border-right: none;
    border-bottom: 1px solid #D1AD4B;
  }

  .blockTitleBox {
    margin-top: 20px;
    padding-top: 50px;
  }
}

.dutyBox .dutyBoxbg {
  width: 171px;
  height: 134px;
  aspect-ratio: 171/134;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.dutyBox .dutyBoxbg.dutyBoxbg01 {
  background-image: url("../../../img/kgtwbeef/iconBg/dutyBoxbg01.png");
}

.dutyBox .dutyBoxbg.dutyBoxbg02 {
  background-image: url("../../../img/kgtwbeef/iconBg/dutyBoxbg02.png");
}

.dutyBox .dutyBoxbg.dutyBoxbg03 {
  background-image: url("../../../img/kgtwbeef/iconBg/dutyBoxbg03.png");
}

.dutyBox .dutyBoxbg.dutyBoxbg04 {
  background-image: url("../../../img/kgtwbeef/iconBg/dutyBoxbg04.png");
}

.dutyBox .dutyBoxTitle {
  font-size: 24px;
  color: #A06400;
  font-family: HGPMinchoE;
  font-display: swap;
  margin-bottom: 0px;
}

.dutyBox .dutyBoxContent {
  line-height: 30px;
  margin-top: 50px;
  font-size: 16px;
  color: #333333;
}

/* ============================================================================
 * 區段 F：.banner-link 99rem 圓角包裹 + RWD（line 5705-5729）
 * ============================================================================ */

.banner-link {
  display: block;
  position: relative;
  overflow: hidden;
}

.banner-link {
  border-radius: 99rem;
  overflow: hidden;
}

@media screen and (max-width: 992px) {
  .banner-link {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

.banner-link img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* ============================================================================
 * 區段 G：imgText A/C/D + productB/C 商品卡 + widget-block-title + widget-text 文字色（line 7175-7419）
 *   首頁主要 imgText widget 卡片視覺基礎，含 kgtwbeef 紅 #E8380C 與金棕 #c3996b 品牌色 +
 *   widget 標題文字色（#553500 deep brown / #850000 deep red）+ 圓角規範（10px）
 * ============================================================================ */

.imgTextA-Box {
  background: #faebd7;
}

/* 覆蓋 widgets.css 圖文A 按鈕為卡吉牛羊風格 */
.imgTextA-Box .imgTextA-BtnBox .btnA {
  background-color: #ffffff;
  border: 1px solid #E8380C;
  color: #E8380C;
  border-radius: 99rem;
}

.imgTextA-Box .imgTextA-BtnBox .btnA:hover {
  background-color: #E8380C;
  border: 1px solid #E8380C;
  color: #ffffff;
}

/* 覆蓋 widgets.css 各元件文字顏色為卡吉牛羊深棕色 */

/* 標題 Widget */
.widget-block-title h1,
.widget-block-title h2,
.widget-block-title h3,
.widget-block-title h4 {
  color: #573700;
}

/* 內文 Widget */
.widget-text p {
  color: #573700;
}

/* 圖文A */
.imgTextA-Box .imgTextA-TextBox .title {
  color: #ffffff;
  background: #A06400;
  padding: 8px 24px;
  border-radius: 99rem;
  width: fit-content;
  margin: 0 auto 20px auto;
}

.imgTextA-Box .imgTextA-TextBox .text {
  color: #573700;
}

/* 圖文C */
.imgTextC-textBox .imgTextC-Title {
  color: #573700;
}

.imgTextC-textBox .imgTextC-Content {
  color: #573700;
}

/* 圖文D */
.imgTextD-TextBox-Light .title {
  color: #573700;
}

.imgTextD-TextBox-Light .text {
  color: #573700;
}

/* ==========================================================================
   覆蓋 widgets.css — 卡吉牛羊版型 Widget 客製化
   ========================================================================== */

/* --- 1. 圖文C 按鈕 --- */
.imgTextC-textBox .imgTextC-BtnBox .btnC {
  background-color: #ffffff;
  border: 1px solid #E8380C;
  color: #E8380C;
  border-radius: 99rem;
}

.imgTextC-textBox .imgTextC-BtnBox .btnC:hover {
  background-color: #E8380C;
  border: 1px solid #E8380C;
  color: #ffffff;
}

/* --- 2. 圖文D Owl Carousel 圓點 --- */
.owl-carousel-imgTextD.owl-theme .owl-dots .owl-dot span {
  background: #C3996B;
}

.owl-carousel-imgTextD.owl-theme .owl-dots .owl-dot.active span {
  outline: 2px solid #E8380C;
  background: #C3996B;
}

@media screen and (max-width: 992px) {
  .owl-carousel-imgTextD.owl-theme .owl-dots .owl-dot.active span {
    outline: 1.5px solid #E8380C;
  }
}

/* --- 3. Swiper 分頁圓點 --- */
.swiper-pagination-bullet {
  background: #C3996B !important;
}

.swiper-pagination-bullet-active {
  outline: 2px solid #E8380C !important;
  background: #C3996B !important;
}

@media screen and (max-width: 992px) {
  .swiper-pagination-bullet-active {
    outline: 1.5px solid #E8380C !important;
  }
}

/* --- 4. 圖文D 卡片背景 --- */
.imgTextD-Box {
  background: #faebd7;
}

/* --- 5. 商品A 卡片 --- */
.productA-item {
  border-radius: 10px;
  overflow: hidden;
}

.productA-item:hover {
  background: #faebd7;
}

.productA-title {
  color: #573700;
}

.productA-price {
  color: #E8380C;
}

.size-item {
  border: 1px solid #C3996B;
  color: #573700;
  border-radius: 6px;
}

.size-item:hover {
  background: #C3996B;
  color: #ffffff;
}

/* --- 6. 商品C 背景與文字 --- */
.productC-ImgBox {
  background: #faebd7;
}

.productC-TextBox {
  background: #faebd7;
}

.productC-TextBox .title {
  color: #573700;
}

.productC-TextBox .text {
  color: #573700;
}

.productC-TextBox .price {
  color: #E8380C;
}

/* --- 7. 圖文D 標題裝飾線 --- */
.imgTextD-TitleBox ::after {
  background: #C3996B;
}

.imgTextD-TitleBox .imgTextD-Title {
  color: #573700;
}

/* --- 8. 商品B 標題裝飾線 --- */
.productB-TitleBox ::after {
  background: #C3996B;
}

.productB-TitleBox .productB-Title {
  color: #573700;
}

/* --- 9. Widget 圖片圓角 --- */

/* 影片嵌入 */
.video-Box,
.img-Box {
  border-radius: 10px;
  overflow: hidden;
}

/* 內文 Widget 圖片 */
.widget-text .img-box {
  border-radius: 10px;
  overflow: hidden;
}

/* 圖文B 圖片 */
.imgTextB-imgBox {
  border-radius: 10px;
  overflow: hidden;
}

/* 圖文C 圖片 */
.imgTextC-imgBox {
  border-radius: 10px;
  overflow: hidden;
}

/* 圖文D 圖片卡片 */
.imgTextD-Box {
  border-radius: 10px;
  overflow: hidden;
}

/* 商品A 圖片 */
.productA-img {
  border-radius: 10px;
  overflow: hidden;
}

/* 商品B 圖片 */
.productB-Box {
  border-radius: 10px;
  overflow: hidden;
}

/* 商品C 圖片 */
.productC-ImgBox {
  border-radius: 10px;
  overflow: hidden;
}

/* 單圖 */
.oneImageBox {
  border-radius: 10px;
  overflow: hidden;
}

/* ============================================================================
 * 區段 H：「11. Banner 差異化樣式」section + video + imgTextB/C/D 細節（line 7885-8071）
 *   含 .widget-bannerA~E 圓角與 #C3996B 內陰影 / owl-carousel-banner 箭頭與圓點 /
 *   .widget-video .video-Box / .widget-imgTextB/C/D 細節（注意 .owl-carousel-imgTextD
 *   .owl-dots 規則於 line 7259 與 8064 兩處重複，依原檔保留後者覆寫前者的 cascade 行為）
 * ============================================================================ */

/* ============================================================
   11. Banner 差異化樣式（卡吉牛羊）
   ============================================================ */

/* 外框與圓角 */
.widget-bannerA .owl-stage-outer,
.widget-bannerC .owl-stage-outer,
.widget-bannerD .owl-stage-outer,
.widget-bannerE .owl-stage-outer {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px #C3996B inset;
}

.widget-bannerB .owl-stage-outer {
  border-radius: 99rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px #C3996B inset;
}

/* 導航箭頭（A / B / D 共用） */
.owl-carousel-bannerA .owl-nav button.owl-prev,
.owl-carousel-bannerA .owl-nav button.owl-next,
.owl-carousel-bannerB .owl-nav button.owl-prev,
.owl-carousel-bannerB .owl-nav button.owl-next,
.owl-carousel-bannerD .owl-nav button.owl-prev,
.owl-carousel-bannerD .owl-nav button.owl-next {
  background: #fff !important;
  color: #573700 !important;
  border: 1px solid #C3996B;
  border-radius: 99rem;
  box-shadow: none;
}

.owl-carousel-bannerA .owl-nav button.owl-prev:hover,
.owl-carousel-bannerA .owl-nav button.owl-next:hover,
.owl-carousel-bannerB .owl-nav button.owl-prev:hover,
.owl-carousel-bannerB .owl-nav button.owl-next:hover,
.owl-carousel-bannerD .owl-nav button.owl-prev:hover,
.owl-carousel-bannerD .owl-nav button.owl-next:hover {
  background: #E8380C !important;
  color: #fff !important;
  border-color: #E8380C;
  box-shadow: none;
}

/* 導航點（A / B / C / D / E 共用） */
.owl-carousel-bannerA .owl-dots .owl-dot span,
.owl-carousel-bannerB .owl-dots .owl-dot span,
.owl-carousel-bannerC .owl-dots .owl-dot span,
.owl-carousel-bannerD .owl-dots .owl-dot span,
.owl-carousel-bannerE .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 0 4px;
  background: rgba(195, 153, 107, 0.35);
  border: 1px solid #C3996B;
  border-radius: 99rem;
  transition: all 0.3s;
}

.owl-carousel-bannerA .owl-dots .owl-dot.active span,
.owl-carousel-bannerB .owl-dots .owl-dot.active span,
.owl-carousel-bannerC .owl-dots .owl-dot.active span,
.owl-carousel-bannerD .owl-dots .owl-dot.active span,
.owl-carousel-bannerE .owl-dots .owl-dot.active span {
  background: #E8380C;
  border-color: #E8380C;
  box-shadow: 0 0 0 2px rgba(232, 56, 12, 0.2);
}

/* ============================================================
   12. 影片區塊差異化樣式（卡吉牛羊）
   ============================================================ */

.widget-video .video-Box {
  background: #faebd7;
  border: 1px solid #C3996B;
  border-radius: 12px;
  padding: 6px;
  overflow: hidden;
}

.widget-video .video-Box .video-Video,
.widget-video .video-Box iframe {
  border-radius: 10px;
}

/* HTML5 影片控制列配色（Chrome / Safari） */
.widget-video .video-Box .video-Video::-webkit-media-controls-panel {
  background: rgba(250, 235, 215, 0.95);
}

.widget-video .video-Box .video-Video::-webkit-media-controls-play-button {
  filter: hue-rotate(340deg) saturate(1.6);
}

/* ============================================================
   13. 圖文B/C/D 差異化樣式（卡吉牛羊）
   ============================================================ */

/* 圖文B */
.widget-imgTextB .imgTextB-Box {
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 16px;
}

.widget-imgTextB .imgTextB-BoxTitle {
  background: #fff7ee;
  border: 1px solid #C3996B;
}

.widget-imgTextB .imgTextB-BoxTitle .triangle-down {
  border-top-color: #C3996B;
}

.widget-imgTextB .imgTextB-Title {
  color: #573700;
}

.widget-imgTextB .imgTextB-imgBox {
  border-radius: 10px;
  border: none;
}

/* 圖文C */
.widget-imgTextC .imgTextC-textBox {
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 24px;
}

.widget-imgTextC .imgTextC-imgBox,
.widget-imgTextC .imgTextC3-imgBox,
.widget-imgTextC .imgTextC4-imgBox {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #C3996B;
  background: transparent;
}

.widget-imgTextC .imgTextC-textBox .imgTextC-BtnBox .btnC {
  background-color: #C3996B;
  border: 1px solid #C3996B;
  color: #ffffff;
  border-radius: 99rem;
}

.widget-imgTextC .imgTextC-textBox .imgTextC-BtnBox .btnC:hover {
  background-color: #E8380C;
  border-color: #E8380C;
  color: #ffffff;
}

/* 圖文D */
.widget-imgTextD .imgTextD-TitleBox ::after {
  background: #C3996B;
}

.widget-imgTextD .imgTextD-Box {
  background: transparent;
  border: 1px solid #C3996B;
  border-radius: 12px;
  overflow: hidden;
}

.widget-imgTextD .imgTextD-TextBox {
  background: linear-gradient(to top, rgba(87, 55, 0, 0.55) 0%, rgba(87, 55, 0, 0) 100%);
}

.widget-imgTextD .imgTextD-TextBox-Light {
  background: linear-gradient(to top, rgba(250, 235, 215, 1) 0%, rgba(250, 235, 215, 0) 100%);
}

.owl-carousel-imgTextD.owl-theme .owl-dots .owl-dot span {
  background: rgba(195, 153, 107, 0.4);
}

.owl-carousel-imgTextD.owl-theme .owl-dots .owl-dot.active span {
  outline: 2px solid #E8380C;
  background: #faebd7;
}

/* ============================================================================
 * 區段 I：kgtwbeef block widget 容器群（line 4945-5158）
 *   首頁主要 widget 容器與裝飾元素，含：
 *     - .blockMSpacing / .blockMSpacingXL / .blockPSpacing 區塊間距 utility
 *     - .sgsBox 系列（含 .sgsBoxTitle / .triangle-down / .sgsTitle）
 *     - .secSwiper .swiper-wrapper / .swiper-scrollbar / .swiper-scrollbar-drag
 *     - .timelineBox 系列（時間軸 widget，含 .timelineImgBox / .timelineTextBox /
 *       .timelineTextBox::after 裝飾線 / .year 年份標籤 / .text / RWD）
 *     - .blockTitleBox + .blockTitle (.orange / 各狀態) 區塊標題
 *     - .blockLine-wrappe + .blockLine 分隔線
 *     - .containerText + .containerText p 內容文字
 *     - .blockLineText 大字裝飾文字（#E8380C 紅 60px / 768↓ 40px）
 *   許多元素影響首頁 widget 整體高度與顏色，原 task 9.5 widget.css 漏抽
 * ============================================================================ */

.blockMSpacing {
  margin-top: 60px;
}

.sgsBox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.sgsBox .sgsBoxTitle {
  width: -moz-fit-content;
  width: fit-content;
  background: #F8F8F8;
  padding: 10px 20px;
  border-radius: 99rem;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sgsBox .sgsBoxTitle .triangle-down {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #DD8C06;
}

.sgsBox .sgsBoxTitle .sgsTitle {
  font-size: 16px;
  color: #A06400;
  font-family: HGPMinchoE;
  font-display: swap;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 10px;
}

.blockMSpacingXL {
  margin-top: 100px;
}

.secSwiper .swiper-wrapper {
  margin-bottom: 60px;
}

.secSwiper .swiper-scrollbar {
  margin-top: 50px;
}

.timelineBox {
  width: 100%;
  height: 100%;
  background: antiquewhite;
  aspect-ratio: 1/1;
  border-radius: 99rem;
}

.timelineBox .timelineImgBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 99rem;
}

.timelineBox .timelineImgBox .timelineImg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.timelineBox .timelineTextBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 99rem;
  padding: 50px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .timelineBox .timelineTextBox {
    padding: 30px 20px 20px;
  }
}

.timelineBox .timelineTextBox::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 20%;
  background: #ffffff;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.timelineBox .timelineTextBox .year {
  font-size: 20px;
  color: #ffffff;
  background: #A06400;
  width: -moz-fit-content;
  width: fit-content;
  padding: 8px 20px;
  border-radius: 99rem;
  font-family: HGPMinchoE;
  font-display: swap;
  margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .timelineBox .timelineTextBox .year {
    font-size: 16px;
    margin-bottom: 16px;
  }
}

.timelineBox .timelineTextBox .text {
  font-size: 16px;
  line-height: 32px;
  color: #653F00;
}

@media screen and (max-width: 768px) {
  .timelineBox .timelineTextBox .text {
    font-size: 12px;
  }
}

.secSwiper .swiper-scrollbar-drag {
  background: #A06400;
}

.blockPSpacing {
  padding-top: 60px;
}

.blockTitleBox {
  margin-top: 20px;
  padding-top: 120px;
}

.blockTitleBox .blockTitle.orange {
  color: #E8380C;
}

.blockTitleBox .blockTitle {
  font-size: 35px;
  font-family: HGPMinchoE;
  font-display: swap;
}

@media screen and (max-width: 768px) {
  .blockTitleBox {
    margin-top: 10px;
    padding-top: 120px;
  }

  .blockTitleBox .blockTitle {
    font-size: 24px;
  }
}

.blockLine-wrappe {
  display: flex;
  justify-content: center;
}

.blockLine {
  width: 2px;
  height: 80px;
  background: #E8380C;
  margin: 25px auto;
}

.containerText {
  max-width: 800px;
  margin: 0 auto;
}

.containerText p {
  color: #333333;
  font-size: 16px;
  line-height: 28px;
}

.blockLineText {
  font-size: 60px;
  color: #E8380C;
  font-family: HGPMinchoE;
  font-display: swap;
}

@media screen and (max-width: 768px) {
  .blockLineText {
    font-size: 40px;
  }
}

/* ============================================================================
 * 區段 J：.swiperPaginationBox + .blockTitleBox 大字標題裝飾（line 4804-4858）
 *   原 task 9.5 widget.css E2 範圍（4945-5158）與 E（4861-4938）之間的橋接段：
 *     - .swiperPaginationBox（swiper 分頁器外框 padding）
 *     - .blockTitleBox .blockTitle.gold（金色 #D2AD4B 區塊標題變體）
 *     - .blockTitleBox .blockTitle font-size 35px / RWD 24px（HGPMinchoE 字體）
 *     - .blockTitleBox .blockTitleBgBox .blockTitleBg（大字背景文字 150px / 80px / 40px，
 *       rgba(112,112,112,0.09) 灰半透明，Sitka 字體）含 992 / 768 RWD
 *     - .blockTitleBgHtml（115px !important 區塊背景大字 HTML 版本）
 * ============================================================================ */

.swiperPaginationBox {
  padding: 30px 0;
  margin-bottom: 10px;
}

.blockTitleBox .blockTitle.gold {
  color: #D2AD4B;
}

.blockTitleBox .blockTitle {
  font-size: 35px;
  font-family: HGPMinchoE;
  font-display: swap;
}

@media screen and (max-width: 768px) {
  .blockTitleBox .blockTitle {
    font-size: 24px;
  }
}

.blockTitleBox .blockTitleBgBox .blockTitleBg {
  color: rgba(112, 112, 112, 0.0901960784);
  font-size: 150px;
  font-family: Sitka;
  margin-top: -60px;
}

@media screen and (max-width: 992px) {
  .blockTitleBox .blockTitleBgBox {
    margin-top: -40px;
  }
}

@media screen and (max-width: 768px) {
  .blockTitleBox .blockTitleBgBox {
    margin-top: -30px;
  }
}

@media screen and (max-width: 992px) {
  .blockTitleBox .blockTitleBgBox .blockTitleBg {
    font-size: 80px;
  }
}

@media screen and (max-width: 768px) {
  .blockTitleBox .blockTitleBgBox .blockTitleBg {
    font-size: 40px;
  }
}

.blockTitleBgHtml {
  font-size: 115px !important;
  margin-top: -40px !important;
}

/* 註：.user-side-menu 會員中心側邊選單 cluster 已自本檔（widget.css）搬移至
 * themes/kgtwbeef/pages/user.css（task 9.10 修補）。原因：會員中心 sidebar 屬
 * 「user 會員」範疇而非 widget 模組，且僅出現於會員頁面（orders / shoppingCarts /
 * wishList / profile），以 page CSS 按路由載入較精準。對應路由已於 route_page_map
 * 補上 'user' pageKey（array 形式）。 */