/* ============================================================================
 * themes/kgtwbeef/base.css — kgtwbeef 主題 base 層完整抽取
 * ============================================================================
 *
 * 用途：
 *   完整承接舊 kgtwbeef.css 的 base 段落內容，作為 kgtwbeef 主題對
 *   common/base.css 的覆寫與補充層。
 *
 * 抽取策略（按 dgfactor 模式 — 完整段落抽取，非僅差異）：
 *   舊 kgtwbeef.css 已凍結停用（css.blade.php 改用 themeCssUrls 模組化載入，不再直接載入舊單檔），
 *   其 base 段落 SHALL 完整抽到本檔。本檔載入順序在 common/base.css 之後，
 *   重複規則由 kgtwbeef 版本覆寫；不重複的規則為 kgtwbeef 專屬。
 *
 * 抽取來源：public/web/css/kgtwbeef.css line 29-1677 + line 1706-1955
 *   - line 29-1677：body / typography / utility / form / button / 通用元件
 *                   （與 default base 同範圍）
 *   - line 1678-1705：.footer-area .theme-bg / .black-bg 反白覆寫（跳過，
 *                     留給 task 9.4 footer.css 處理）
 *   - line 1706-1955：.bg-opacity-* / .separator 等 utility（與 default 同段）
 *
 * Cascade 提醒（volvo / dgfactor 教訓）：
 *   common/base.css 對應元素的所有屬性都需檢視，kgtwbeef 沒明示的屬性
 *   不等於「不在意」，部分情境需明確覆寫為 unset / 0 / 對應數值，
 *   避免 common 從 default 抽出的 default-specific 屬性滲透。
 *
 * 載入順序：
 *   common/base.css -> themes/kgtwbeef/base.css（本檔）-> 其他 -> custom.css
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 9.1）
 * ============================================================================
 */

body {
  background: #fff;
  font-family: 'Noto Sans TC', 'Raleway', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 14px;
  line-height: 24px;
  background-image: url('../../../img/kgtwbeef/bg/bgTop.png');
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  scroll-behavior: smooth;

}

a:focus,
a:hover {
  color: #ff7f00;
  text-decoration: none;
}

h1 {
  font-size: 36px;
  font-weight: 700;
}

h2 {
  font-size: 30px;
  font-weight: 700;
}

h3 {
  font-size: 26px;
  font-weight: 700;
}

h4 {
  font-size: 20px;
  font-weight: 700;
}

h5 {
  font-size: 16px;
}

p {
  font-size: 16px;
  font-weight: normal;
  line-height: 28px;
  color: #573700;
}

hr.mtb-40 {
  margin: 40px 0;
  border-bottom: 1px solid #eceff8;
  border-top: 0px;
}

.mark,
mark {
  background: #ff7f00 none repeat scroll 0 0;
  color: #fff;
}

span.tooltip-content {
  color: #ff7f00;
  cursor: help;
  font-weight: 600;
}

.progress {
  height: 20px;
  line-height: 20px;
  font-size: 14px;
}

input[type="checkbox"] {
  vertical-align: middle;
  margin-right: 5px;
}

.text-theme {
  color: #ff7f00;
}

/* 註：input[type="text"|"password"|"email"] 基底規則（含 margin-bottom: 20px）已移除 —
 * 與 common/base.css line 771 完全相同，屬冗餘複製。保留會因本檔載入晚於 common/base.css
 * 而以同 specificity (0,1,1) 後勝，反向覆蓋 common 的 .message-box input { margin-bottom: 10px }，
 * 導致 contactUs 等表單輸入欄位間距由 10px 變 20px（cm12 為 10px）。
 * 依 [[feedback_css_shared_rules_in_common]] 刪除冗餘，由 common/base.css 統一提供基底樣式。 */

option {
  background: #ffffff none repeat scroll 0 0;
  border: 0 solid #626262;
  font-size: 14px;
  padding-left: 10px;
}

textarea:focus {
  border-color: #ff7f00;
  outline: none;
}

.submit-btn {
  background: rgb(255, 127, 0) none repeat scroll 0 0;
  border: medium none;
  color: rgb(255, 255, 255);
  font-size: 14px;
  font-weight: 700;
  height: 35px;
  padding: 0 20px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
}

.btn-hover-2::before {
  background: #ff7f00 none repeat scroll 0 0;
}

.m-0 {
  margin: 0;
}

.p-0 {
  padding: 0;
}

.mt-0 {
  margin-top: 0
}

.mt-1 {
  margin-top: 1px
}

.mt-2 {
  margin-top: 2px
}

.mt-3 {
  margin-top: 3px
}

.mt-4 {
  margin-top: 4px
}

.mt-5 {
  margin-top: 5px
}

.mt-10 {
  margin-top: 10px
}

.mt-15 {
  margin-top: 15px
}

.mt-20 {
  margin-top: 20px
}

.mt-30 {
  margin-top: 30px
}

.mt-35 {
  margin-top: 35px
}

.mt-40 {
  margin-top: 40px
}

.mt-50 {
  margin-top: 50px
}

.mt-60 {
  margin-top: 60px
}

.mt-70 {
  margin-top: 70px
}

.mt-80 {
  margin-top: 80px
}

.mt-90 {
  margin-top: 90px
}

.mt-100 {
  margin-top: 100px
}

.mt-110 {
  margin-top: 110px
}

.mt-120 {
  margin-top: 120px
}

.mt-130 {
  margin-top: 130px
}

.mt-140 {
  margin-top: 140px
}

.mt-150 {
  margin-top: 150px
}

.mr-0 {
  margin-right: 0px
}

.mr-1 {
  margin-right: 1px
}

.mr-2 {
  margin-right: 2px
}

.mr-3 {
  margin-right: 3px
}

.mr-4 {
  margin-right: 4px
}

.mr-5 {
  margin-right: 5px
}

.mr-10 {
  margin-right: 10px
}

.mr-15 {
  margin-right: 15px
}

.mr-20 {
  margin-right: 20px
}

.mr-30 {
  margin-right: 30px
}

.mr-40 {
  margin-right: 40px
}

.mr-50 {
  margin-right: 50px
}

.mr-60 {
  margin-right: 60px
}

.mr-70 {
  margin-right: 70px
}

.mr-80 {
  margin-right: 80px
}

.mr-90 {
  margin-right: 90px
}

.mr-100 {
  margin-right: 100px
}

.mr-110 {
  margin-right: 110px
}

.mr-120 {
  margin-right: 120px
}

.mr-130 {
  margin-right: 130px
}

.mr-140 {
  margin-right: 140px
}

.mr-150 {
  margin-right: 150px
}

.mb-0 {
  margin-bottom: 0
}

.mb-1 {
  margin-bottom: 1px
}

.mb-2 {
  margin-bottom: 2px
}

.mb-3 {
  margin-bottom: 3px
}

.mb-4 {
  margin-bottom: 4px
}

.mb-5 {
  margin-bottom: 5px
}

.mb-10 {
  margin-bottom: 10px
}

.mb-15 {
  margin-bottom: 15px
}

.mb-20 {
  margin-bottom: 20px
}

.mb-25 {
  margin-bottom: 25px
}

.mb-30 {
  margin-bottom: 30px
}

.mb-35 {
  margin-bottom: 35px
}

.mb-50 {
  margin-bottom: 50px
}

.mb-60 {
  margin-bottom: 60px
}

.mb-70 {
  margin-bottom: 70px
}

.mb-90 {
  margin-bottom: 90px
}

.mb-100 {
  margin-bottom: 100px
}

.mb-110 {
  margin-bottom: 110px
}

.mb-120 {
  margin-bottom: 120px
}

.mb-130 {
  margin-bottom: 130px
}

.mb-140 {
  margin-bottom: 140px
}

.mb-150 {
  margin-bottom: 150px
}

.ml-0 {
  margin-left: 0
}

.ml-1 {
  margin-left: 1px
}

.ml-2 {
  margin-left: 2px
}

.ml-3 {
  margin-left: 3px
}

.ml-4 {
  margin-left: 4px
}

.ml-5 {
  margin-left: 5px
}

.ml-10 {
  margin-left: 10px
}

.ml-15 {
  margin-left: 15px
}

.ml-20 {
  margin-left: 20px
}

.ml-30 {
  margin-left: 30px
}

.ml-40 {
  margin-left: 40px
}

.ml-50 {
  margin-left: 50px
}

.ml-60 {
  margin-left: 60px
}

.ml-70 {
  margin-left: 70px
}

.ml-80 {
  margin-left: 80px
}

.ml-90 {
  margin-left: 90px
}

.ml-100 {
  margin-left: 100px
}

.ml-110 {
  margin-left: 110px
}

.ml-120 {
  margin-left: 120px
}

.ml-130 {
  margin-left: 130px
}

.ml-140 {
  margin-left: 140px
}

.ml-150 {
  margin-left: 150px
}

.pt-0 {
  padding-top: 0
}

.pt-10 {
  padding-top: 10px
}

.pt-15 {
  padding-top: 15px
}

.pt-20 {
  padding-top: 20px
}

.pt-30 {
  padding-top: 30px
}

.pt-40 {
  padding-top: 40px
}

.pt-50 {
  padding-top: 50px
}

.pt-55 {
  padding-top: 55px
}

.pt-60 {
  padding-top: 60px
}

.pt-70 {
  padding-top: 70px
}

.pt-80 {
  padding-top: 80px
}

.pt-90 {
  padding-top: 90px
}

.pt-100 {
  padding-top: 100px
}

.pt-110 {
  padding-top: 110px
}

.pt-120 {
  padding-top: 120px
}

.pt-130 {
  padding-top: 130px
}

.pt-140 {
  padding-top: 140px
}

.pt-150 {
  padding-top: 150px
}

.pt-160 {
  padding-top: 160px
}

.pr-0 {
  padding-right: 0
}

.pr-10 {
  padding-right: 10px
}

.pr-15 {
  padding-right: 15px
}

.pr-20 {
  padding-right: 20px
}

.pr-30 {
  padding-right: 30px
}

.pr-40 {
  padding-right: 40px
}

.pr-50 {
  padding-right: 50px
}

.pr-60 {
  padding-right: 60px
}

.pr-70 {
  padding-right: 70px
}

.pr-80 {
  padding-right: 80px
}

.pr-90 {
  padding-right: 90px
}

.pr-100 {
  padding-right: 100px
}

.pr-110 {
  padding-right: 110px
}

.pr-120 {
  padding-right: 120px
}

.pr-130 {
  padding-right: 130px
}

.pr-140 {
  padding-right: 140px
}

.pb-0 {
  padding-bottom: 0
}

.pb-10 {
  padding-bottom: 10px
}

.pb-15 {
  padding-bottom: 15px
}

.pb-20 {
  padding-bottom: 20px
}

.pb-25 {
  padding-bottom: 25px
}

.pb-30 {
  padding-bottom: 30px
}

.pb-40 {
  padding-bottom: 40px
}

.pb-50 {
  padding-bottom: 50px
}

.pb-55 {
  padding-bottom: 55px
}

.pb-60 {
  padding-bottom: 60px
}

.pb-70 {
  padding-bottom: 70px
}

.pb-80 {
  padding-bottom: 80px
}

.pb-90 {
  padding-bottom: 90px
}

.pb-100 {
  padding-bottom: 100px
}

.pb-110 {
  padding-bottom: 110px
}

.pb-120 {
  padding-bottom: 120px
}

.pb-130 {
  padding-bottom: 130px
}

.pb-140 {
  padding-bottom: 140px
}

.pb-150 {
  padding-bottom: 150px
}

.pb-160 {
  padding-bottom: 160px
}

.pl-0 {
  padding-left: 0
}

.pl-10 {
  padding-left: 10px
}

.pl-15 {
  padding-left: 15px
}

.pl-20 {
  padding-left: 20px
}

.pl-30 {
  padding-left: 30px
}

.pl-40 {
  padding-left: 40px
}

.pl-50 {
  padding-left: 50px
}

.pl-60 {
  padding-left: 60px
}

.pl-70 {
  padding-left: 70px
}

.pl-80 {
  padding-left: 80px
}

.pl-90 {
  padding-left: 90px
}

.pl-100 {
  padding-left: 100px
}

.pl-110 {
  padding-left: 110px
}

.pl-120 {
  padding-left: 120px
}

.pl-130 {
  padding-left: 130px
}

.pl-140 {
  padding-left: 140px
}

.pl-150 {
  padding-left: 150px
}

.ptb-0 {
  padding: 0
}

.ptb-5 {
  padding: 5px 0
}

.ptb-10 {
  padding: 10px 0
}

.ptb-20 {
  padding: 20px 0
}

.ptb-30 {
  padding: 30px 0
}

.ptb-40 {
  padding: 40px 0
}

.ptb-50 {
  padding: 50px 0
}

.ptb-60 {
  padding: 60px 0
}

.ptb-70 {
  padding: 70px 0
}

.ptb-80 {
  padding: 80px 0
}

.ptb-90 {
  padding: 90px 0
}

.ptb-100 {
  padding: 100px 0
}

.ptb-110 {
  padding: 110px 0
}

.ptb-120 {
  padding: 120px 0
}

.ptb-130 {
  padding: 130px 0
}

.ptb-140 {
  padding: 140px 0
}

.ptb-150 {
  padding: 150px 0
}

.ptb-160 {
  padding: 160px 0
}

.mtb-0 {
  margin: 0
}

.mtb-5 {
  margin: 5px 0
}

.mtb-10 {
  margin: 10px 0
}

.mtb-15 {
  margin: 15px 0
}

.mtb-20 {
  margin: 20px 0
}

.mtb-30 {
  margin: 30px 0
}

.mtb-35 {
  margin: 35px 0
}

.mtb-40 {
  margin: 40px 0
}

.mtb-50 {
  margin: 50px 0
}

.mtb-60 {
  margin: 60px 0
}

.mtb-70 {
  margin: 70px 0
}

.mtb-80 {
  margin: 80px 0
}

.mtb-90 {
  margin: 90px 0
}

.mtb-100 {
  margin: 100px 0
}

.mtb-110 {
  margin: 110px 0
}

.mtb-120 {
  margin: 120px 0
}

.mtb-130 {
  margin: 130px 0
}

.mtb-140 {
  margin: 140px 0
}

.mtb-150 {
  margin: 150px 0;
}

.mtb-160 {
  margin: 160px 0;
}



.ptblr-10-30 {
  padding: 10px 30px;
}

.ptblr-20-30 {
  padding: 20px 30px;
}

.p-20 {
  padding: 20px;
}

.p-30 {
  padding: 30px;
}

.mt--50 {
  margin-top: -50px;
}

#scrollUp:hover {
  background: #FF7F00 none repeat scroll 0 0;
  color: #ffffff;
}

.theme-bg {
  background: #ff7f00;
}

/* ============================================================================
 * kgtwbeef 跨頁工具按鈕：.btnKG / .btnLike / .btnKG-gold / .btnKG.btn-soldout
 * ----------------------------------------------------------------------------
 * KG = kgtwbeef 品牌專用命名，跨頁面使用（首頁 contact 區 / contactUs 頁 /
 * product 詳情頁 / shoppingCart 加入購物車按鈕等）。
 *
 * 抽取自舊 kgtwbeef.css line 5573-5666；放於 base 層而非 page 層的原因：
 *   首頁、contactUs、footer 等多種路由皆有使用，page CSS 只對應單一路由
 *   無法跨頁載入；放 base 層確保每頁皆載入。
 *
 * common 層不存在此 class（default 與 dgfactor 雖在歷史 CSS 內含同名規則，
 * 但實際 blade 未使用，已於 common/pages/product.css 與 themes/dgfactor/pages/
 * product.css 清理為雜訊註解）。
 * ============================================================================ */

.btnLike {
  background-color: #ffffff;
  border: 1px solid #E8380C;
  color: #E8380C;
  padding: 10px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  cursor: pointer;
  border-radius: 99rem;
  margin-right: 10px;
}

.btnLike.like {
  background-color: #E8380C;
  border: 1px solid #E8380C;
  color: #ffffff;
}

.btnLike:hover {
  background-color: #E8380C;
  border: 1px solid #E8380C;
  color: #ffffff;
}

/* ============================================================================
 * .alertMessage 跨頁警示訊息（kgtwbeef.css line 5667-5681）
 *   fixed 定位於畫面頂部中央的浮動 alert（成功 / 失敗訊息），跨頁面共用
 * ============================================================================ */

/* ============================================================================
 * .page-wrapper kgtwbeef header 下方留白覆寫（kgtwbeef.css line 4800-4802）
 *   common/base.css 預設 .page-wrapper { margin-top: 94px }，kgtwbeef 因 .logo
 *   padding 較大（20px 上下，common 為 12px），≥1200 桌機 header 實高 111px，
 *   故覆寫留白。本規則跨頁面共用故置於 base 層；漏抽會導致首頁等所有頁面內容
 *   起始位置貼緊 viewport 頂部、被 fixed #header 蓋住部分顯示。
 *   實測 header 高度：≥1200 為 111px、992~1199 為 93px（該區間 header.css 將
 *   navLogo 縮為 56px、.logo padding 歸零）；舊值固定 120px 在 ≥1200 多撐 9px、
 *   992~1199 多撐 27px，造成 widget 與 header 間出現間距（issue #458 後續修正）。
 *   故 ≥1200 對齊 110px、992~1199 對齊 94px（比照 default 貼合，留 1px 重疊不留空）。
 * ============================================================================ */

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

/* 992~1199：header.css 於此區間縮小 navLogo／歸零 logo padding，header 降為 ~93px，
   留白比照 default 的 94px，避免沿用 ≥1200 的 110px 在此區間多撐出間距 */
@media (min-width: 992px) and (max-width: 1199px) {
  .page-wrapper {
    margin-top: 94px;
  }
}

/* ============================================================================
 * Breadcrumbs kgtwbeef 品牌覆寫（kgtwbeef.css line 3786-3862）
 * ----------------------------------------------------------------------------
 * 跨頁面麵包屑導航 + 頁面標題（.breadcrumbs-title 紅字 #E8380C / 35px /
 * HGPMinchoE 字體）。common/base.css 已含 default 版基底（黑字、小一號），
 * 本檔覆寫為 kgtwbeef 品牌紅字大標題。
 *
 * 包含：
 *   - .breadcrumbs-section { margin-top: 110px } 頁面標題區頂部下移避開 fixed header
 *   - .overlay-bg / .overlay-bg::before 灰半透明 overlay 跨頁通用
 *   - .breadcrumbs-inner position: relative z-index 10
 *   - .breadcrumbs-title 紅字 #E8380C / 35px / HGPMinchoE / padding 55px 0
 *   - 767↓ RWD: .breadcrumbs-title { font-size: 28px; padding: 30px 0 }
 *   - .breadcrumb-list 麵包屑 (Home > Category) 顏色 hover 與 ::before "_" 分隔符
 * ============================================================================ */

/* common/base.css 從 default.css 帶入：
 *   .breadcrumbs-section { padding-top: 100px; margin-bottom: 40px }
 * kgtwbeef.css 原 line 3786 只設 margin-top（舊值 120px），cm12 單檔時不載入 common
 * 所以 padding-top / margin-bottom 為瀏覽器預設 0；模組化後需顯式 reset 避免
 * banner section 多出 100+40=140px 高度造成「banner 過高、標題上下有大塊空白」
 * cascade pathology（user 回報「product 區塊 cascade 先後順序」即此）。
 * margin-top 與 .page-wrapper 同步：≥1200 對齊 header 實高 110px、992~1199 對齊
 * 94px，舊固定 120px 會在 header 下方留出間距（與首頁 widget 間距同一根因）。 */
.breadcrumbs-section {
  margin-top: 110px;
  padding-top: 0;
  margin-bottom: 0;
  background: transparent;  /* reset common 的 #ffffff，讓 body bgTop.png 紋路透出 */
}

/* 992~1199：比照 .page-wrapper，header 於此區間降為 ~93px，留白對齊 94px */
@media (min-width: 992px) and (max-width: 1199px) {
  .breadcrumbs-section {
    margin-top: 94px;
  }
}

.overlay-bg::before {
  background: #f6f6f6 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.6;
  position: absolute;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 100%;
}

.breadcrumbs-title {
  color: #E8380C;
  line-height: 45px;
  margin-bottom: 0;
  padding: 55px 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 35px;
  font-family: HGPMinchoE;
  font-display: swap;
}

@media (max-width: 767px) {
  .breadcrumbs-title {
    font-size: 28px;
    line-height: 40px;
    padding: 30px 0;
  }
}

.breadcrumb-list>li:hover::before {
  color: #ff7f00;
}

.breadcrumb-list>li:hover>a {
  color: #ff7f00;
}

/* ============================================================================
 * Bootstrap 4 badge polyfills（kgtwbeef.css line 4558-4715）
 * ----------------------------------------------------------------------------
 * 跨頁 badge utility 樣式（.badge-pill / .badge-primary / -secondary /
 * -success / -info / -warning / -danger / -light / -dark / -purple）。
 * 本專案前台使用 Bootstrap 5，BS5 已移除 .badge-* 顏色 class（改為
 * .text-bg-*），但既有 blade 仍使用 BS4 命名（products / orders / user 等
 * 多處），kgtwbeef.css 內保留此 polyfill。模組化後需置於 base.css 確保跨
 * 頁可用。各 badge 採 Bootstrap 4 原始色票（#007bff / #28a745 等）。
 * ============================================================================ */

/* ============================================================================
 * .innerpage-edit-box 內頁編輯器內容區（kgtwbeef.css line 5683-5703）
 * ----------------------------------------------------------------------------
 * company/* 系列頁（shipping / member / privacy / terms / payReturn）的
 * 編輯器渲染內容區域。h2 標題 22px、p / li 內文 16px、img max-width
 * min(100%, 1335px) !important（避免大圖溢出）。
 * 跨多個 company 頁面共用，故置於 base 層。
 * ============================================================================ */

.innerpage-edit-box h2 {
  font-size: 22px;
  line-height: 42px;
  margin-bottom: 16px;
  color: #333333;
  font-weight: 800;
}

.innerpage-edit-box p,
.innerpage-edit-box li {
  font-size: 16px;
  line-height: 28px;
  color: #333333;
}

/* 公司資訊頁編輯器內容圖：超過 1335px 縮小，未超過維持原尺寸 */
.innerpage-edit-box img {
  max-width: 100% !important;
  max-width: min(100%, 1335px) !important;
  height: auto !important;
}

/* ============================================================================
 * kgtwbeef 跨頁工具按鈕：.btnSummit / .btnNormal 系列 + .gold-sec / .delete-btn
 * ----------------------------------------------------------------------------
 * blade 使用範圍：404 / user.{login,register,forgetPassword,resetPassword,profile} /
 * shoppingCarts.{index,confirm,finish} / wishList / orders.show / oldShoppingCarts.*
 *
 * 抽取自舊 kgtwbeef.css line 2877-2965，原 task 9.6 product.css 抽取時誤帶入；
 * 因跨多 page 使用，應放 base 層確保各路由皆載入。
 * 注意：.btnSummit / .btnNormal 的 .red 變體背景為 #e8380c，但購物車「送出訂單」
 * 按鈕另有 #page-content .dev-checkout-submit-btn { background: #d1ad4b } 以
 * 高 specificity 覆寫為金色（位於 pages/shoppingCart.css）。
 * ============================================================================ */

.btnSummit,
.btnNormal {
  width: 100%;
  max-width: 200px;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px auto;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 99rem;
  height: fit-content;
  transition: all 0.3s ease 0s;
}

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

  .btnSummit,
  .btnNormal {
    max-width: 100%;
    margin-right: 0;
  }
}

.btnSummit.sm,
.btnNormal.sm {
  width: fit-content;
  padding: 5px 25px;
  font-size: 12px;
  border-radius: 99rem;
  height: fit-content;
}

.btnSummit.gold,
.btnNormal.gold {
  background-color: #c3996b;
  border: 1px solid #c3996b;
  color: #ffffff;
}

.btnSummit.gold:hover,
.btnNormal.gold:hover {
  background-color: #9c7b57;
  color: #ffffff;
}

/* ② 導覽鈕（外框）kgtwbeef 變體：品牌紅橙 #E8380C 外框，取代 Bootstrap 預設灰（issue #622）
 * ②＝btnNormal + btn-outline-secondary（忘記密碼／會員登入／繼續購物 等導覽鈕）；hover 填滿。 */
.btnSummit.btn-outline-secondary,
.btnNormal.btn-outline-secondary {
  background-color: transparent;
  border: 1px solid #E8380C;
  color: #E8380C;
}

.btnSummit.btn-outline-secondary:hover,
.btnNormal.btn-outline-secondary:hover,
.btnSummit.btn-outline-secondary:focus-visible,
.btnNormal.btn-outline-secondary:focus-visible {
  background-color: #E8380C;
  border-color: #E8380C;
  color: #ffffff;
  outline: none;
}

.gold-sec {
  background-color: #5f4830;
  border: 1px solid #5f4830;
  color: #ffffff;
}

.gold-sec:hover {
  background-color: #56422d;
  color: #ffffff;
}

.btnSummit.red,
.btnNormal.red {
  background-color: #e8380c;
  border: 1px solid #e8380c;
  color: #ffffff;
}

.btnSummit.red:hover,
.btnNormal.red:hover {
  background-color: #a72808;
  color: #ffffff;
}

/* ③ 加入購物車鈕組（cart-action）kgtwbeef 變體：膠囊 pill ＋ 紅橙 #E8380C（issue #622）
 * 對齊主題既有 .card-cart-action .btnKG 膠囊風格；common 托底結構不重述、僅覆寫色與圓角。 */
.cart-action__btn {
  border-radius: 99rem;
  border-color: #E8380C;
  color: #E8380C;
}

.cart-action__btn:hover,
.cart-action__btn:focus-visible {
  background: #E8380C;
  border-color: #E8380C;
  color: #ffffff;
  outline: none;
}

.cart-action__btn--selected {
  background: #ffffff;
  border-color: #E8380C;
  color: #E8380C;
}

.cart-action__btn--selected:hover,
.cart-action__btn--selected:focus-visible {
  background: #E8380C;
  border-color: #E8380C;
  color: #ffffff;
  outline: none;
}

.cart-action__btn--soldout {
  background: transparent;
  border-color: #e6cdc6;
  color: #d6b5ac;
}

.cart-action__stepper {
  border-radius: 99rem;
  border-color: #E8380C;
}

.cart-action__stepper button {
  color: #E8380C;
}

.cart-action__stepper button:hover,
.cart-action__stepper button:focus-visible {
  background: #E8380C;
  color: #ffffff;
  outline: none;
}

.cart-action__qty {
  color: #E8380C;
}

.text-primary {
  color: #333333 !important;
}

/* .blog-section-title — kgtwbeef 啟用 font-size 18px / line-height 32px（跨頁區段標題）。
 * default.css line 5900 將此兩值註解，故 common/base.css 僅提供 color #575757 / weight 700 /
 * uppercase；kgtwbeef.css line 4503 為啟用版。此 class 用於 post.show / contactUs /
 * orders.cancelForm / orders.returnForm 多路由，置於跨頁 base.css 統一提供，避免各 page 重複。
 * 註：common/base.css @media (max-width:768px) 已有 font-size 16px，但本檔桌機 18px（無 media）
 * 載入較後會蓋掉該 mobile 值，故此處重述 @media 16px 維持行動版字級。 */
.blog-section-title {
  font-size: 18px;
  line-height: 32px;
}

@media (max-width: 768px) {
  .blog-section-title {
    font-size: 16px;
  }
}