/* issue #709：選擇器同步——blade 的 container-fluid 已改語意 class（header-navbar-inner／footer-shell），本檔 hook 已同步、值不變 */
/* ============================================================================
 * themes/custom-kgtwbeef/widget.css — kgtwbeef 對 common/widget/ 的主題覆寫
 * ============================================================================
 *
 * 用途：
 *   對 common/widget/ 19 支模組做 kgtwbeef 品牌覆寫。**本檔只放 widget**——
 *   kgtwbeef 自有的版面區塊（.dutyBox／.timelineBox／.blockTitleBox／.sgsBox 等）
 *   已移至 themes/custom-kgtwbeef/blocks.css；#header RWD 已移至 header.css；
 *   .page-wrapper 留白已併入 base.css。
 *
 * 分區編號＝common/widget/ 的檔名編號（目錄索引見 common/widget/01-shell.css 檔頭）：
 *   01-shell / 02-banner / 03-container / 04-title / 05-text /
 *   06-imgTextA / 07-imgTextB / 08-imgTextC / 09-imgTextD / 10-video /
 *   11-image / 12-productA / 13-productB / 14-productC / 15-oneImage /
 *   16-baseline-override / 17-sidebar-product / 20-swiper / 21-user-side-menu
 *   要改哪個 widget，就找對應編號的分區；本檔未出現的編號＝kgtwbeef 無覆寫、
 *   完全沿用 common 基底。
 *
 * 排列方式（重要）：
 *   2026-08-10 依模組編號重新分區。原檔按「舊 kgtwbeef.css 的抽取來源行號」
 *   排列（區段 A~J），導致同一個 widget 的規則散落 3~4 處、59 個不連續區段。
 *   重排採**穩定分組**：規則歸入模組分區，**同分區內嚴格保持原始先後順序**，
 *   因此檔內既有的覆寫關係（例如 09 分區裡 .owl-carousel-imgTextD 圓點的兩處
 *   重複定義，後者覆寫前者）完全保留。
 *
 * 品牌色速查：
 *   #E8380C 卡吉紅（強調／價格／active）  #C3996B 金棕（框線／圓點）
 *   #573700 深棕（內文標題）              #A06400 琥珀（標籤底）
 *   #faebd7 米白（卡片底）                圓角規範 10px、藥丸 99rem
 *
 * 載入順序：
 *   common/widget/* → 本檔 → themes/custom-kgtwbeef/blocks.css → custom.css
 *
 * 抽取來源（原始）：public/web/css/kgtwbeef.css（已凍結停用）
 *   line 2532-2701 / 3652-3698 / 3936-4063 / 5745-5899 / 7175-7419 / 7885-8071
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（R.FUNC.1 / R.FUNC.8）
 * ============================================================================
 */

/* ============================================================================
 * 01-shell — widget 容器外殼
 * ============================================================================ */

.widget {
  padding: 20px 16px;
}

/* ============================================================================
 * 02-banner — 輪播 A~E
 *   .banner-link 藥丸圓角包裹 + banner 外框／箭頭／圓點差異化
 * ============================================================================ */

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

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

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

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

/* 外框與圓角 */
.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);
}

/* ============================================================================
 * 04-title — 標題 widget
 *   .widget-title 直線前綴 + #page-content scoped 字級 RWD + 品牌深棕字色
 *   註：word-break 那條同時含 .blog-item-2 貼文標題選擇器，因含
 *       .widget-block-title 故留在本分區（貼文標題的字級 RWD 在 blocks.css）
 * ============================================================================ */

@media screen and (max-width: 767.98px) {
  .widget-title-more {
    color: #D1AD4B;
    font-weight: 600;
  }
}

.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%);
}

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

@media (min-width: 992px) and (max-width: 1199.98px) {
  #page-content .widget-block-title .widget-title-size2 {
    font-size: 28px;
    line-height: 1.3;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #page-content .widget-block-title .widget-title-size2 {
    font-size: 26px;
    line-height: 1.3;
  }
}

@media (max-width: 479.98px) {
  #page-content .widget-block-title .widget-title-size2 {
    font-size: 24px;
    line-height: 1.3;
  }
}

/* 覆蓋 common 各元件文字顏色為卡吉牛羊深棕色 */
.widget-block-title .widget-title-size1,
.widget-block-title .widget-title-size2,
.widget-block-title .widget-title-size3,
.widget-block-title .widget-title-size4 {
  color: #573700;
}

/* ============================================================================
 * 05-text — 內文 widget
 * ============================================================================ */

.widget-text p {
  color: #573700;
}

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

/* ============================================================================
 * 06-imgTextA — 圖文 A
 *   米白卡片底 + 藥丸外框按鈕（hover 反相）+ 琥珀藥丸標題
 * ============================================================================ */

.imgTextA-Box {
  background: #faebd7;
}

/* 覆蓋 common 圖文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;
}

.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;
}

/* ============================================================================
 * 07-imgTextB — 圖文 B
 * ============================================================================ */

.imgTextB-imgBox {
  border-radius: 10px;
  overflow: hidden;
}

.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;
}

/* ============================================================================
 * 08-imgTextC — 圖文 C
 * ============================================================================ */

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

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

.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;
}

.imgTextC-imgBox {
  border-radius: 10px;
  overflow: hidden;
}

.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;
}

/* ============================================================================
 * 09-imgTextD — 圖文 D
 *   ⚠ .owl-carousel-imgTextD 的圓點在本分區內出現兩次（原檔 line 7259 與 8064），
 *     後者覆寫前者的 background；重排時已保留此先後順序，勿對調。
 * ============================================================================ */

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

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

/* 圓點（第一處，稍後被本分區末端的規則覆寫 background） */
.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: 991.98px) {
  .owl-carousel-imgTextD.owl-theme .owl-dots .owl-dot.active span {
    outline: 1.5px solid #E8380C;
  }
}

.imgTextD-Box {
  background: #faebd7;
}

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

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

.imgTextD-Box {
  border-radius: 10px;
  overflow: hidden;
}

.widget-imgTextD .imgTextD-TitleBox ::after {
  background: #C3996B;
}

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

/* 深色 .imgTextD-TextBox 覆寫已隨 issue #962 刪除：該變體原僅 Volvo 輸出，現無 markup 產生 */
.widget-imgTextD .imgTextD-TextBox-Light {
  background: linear-gradient(to top, rgba(250, 235, 215, 1) 0%, rgba(250, 235, 215, 0) 100%);
}

/* 圓點（第二處：覆寫上方第一處的 background，依原檔保留） */
.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;
}

/* ============================================================================
 * 10-video ＋ 11-image — 影片與圖片 widget
 *   首條 .video-Box, .img-Box 同時涵蓋兩個模組（原檔即為單一多選擇器規則，
 *   拆開反而會改變 cascade，故整條置於此並同時代表 11-image 的圓角覆寫）
 * ============================================================================ */

.video-Box,
.img-Box {
  border-radius: 10px;
  overflow: hidden;
}

.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);
}

/* ============================================================================
 * 12-productA — 商品 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;
}

.productA-img {
  border-radius: 10px;
  overflow: hidden;
}

/* ============================================================================
 * 13-productB — 商品 B
 * ============================================================================ */

.productB-TitleBox ::after {
  background: #C3996B;
}

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

.productB-Box {
  border-radius: 10px;
  overflow: hidden;
}

/* ============================================================================
 * 14-productC — 商品 C
 * ============================================================================ */

.productC-ImgBox {
  background: #faebd7;
}

.productC-TextBox {
  background: #faebd7;
}

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

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

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

.productC-ImgBox {
  border-radius: 10px;
  overflow: hidden;
}

/* ============================================================================
 * 15-oneImage — 單圖 widget
 * ============================================================================ */

.oneImageBox {
  border-radius: 10px;
  overflow: hidden;
}

/* ============================================================================
 * 17-sidebar-product — 側欄商品／分類 widget
 *   .btn-group-category 為 ≤991 的手機版分類按鈕變體，與 .widget-categories
 *   同屬本模組，故留在本檔而未移入 blocks.css
 * ============================================================================ */

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

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

.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: 767.98px) {
  .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;
}

.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;
}

/* ============================================================================
 * 20-swiper — Swiper 套件全域覆寫
 * ============================================================================ */

.swiper-pagination-bullet {
  background: #C3996B !important;
}

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

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

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