/* ============================================================================
 * themes/custom-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 提醒（dgfactor 教訓）：
 *   common/base.css 對應元素的所有屬性都需檢視，kgtwbeef 沒明示的屬性
 *   不等於「不在意」，部分情境需明確覆寫為 unset / 0 / 對應數值，
 *   避免 common 從 default 抽出的 default-specific 屬性滲透。
 *
 * 載入順序：
 *   common/base.css -> themes/custom-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）
 * ============================================================================
 */


/* ============================================================================
 * #863 債二：主題 token 覆寫
 *   本主題覆寫下列 3 個全域 token；common 層引用該 token 的規則即自動
 *   套用品牌色，毋須逐條複製 common 規則再改色碼。
 *   原本硬編、與套用 token 後的 common 結果相同的 90 條宣告已刪除
 *   （其中 20 條規則因宣告全數移除而整條刪去）。
 *   帶 !important 的宣告一律保留（會改變與其他規則的勝負關係）。
 * ==========================================================================*/
:root,
:host {  /* :host 供後台預覽畫布的 Shadow DOM 取得同一組 token（issue #879）；light DOM 不匹配，前台零影響 */
  --cms-color-dark: #ff7f00;
  --cms-color-btn-dark: #e8380c;
  --cms-color-text: #573700;

  /* Widget 區塊背景橋接 token（issue #879）
     本主題把 --cms-color-dark 借用為品牌橘 #ff7f00，因此 common 的預設對映
     （深色 → --cms-color-dark）會讓「深色」底變成橘色，MUST 於此改指。
     實測對比（WCAG 2.1）：
       深色改指 --cms-color-text #573700（深咖）＋ 白字 → 10.76（AA 內文）
       主色改指 --cms-color-btn-dark #e8380c（品牌紅）＋ 白字 → 4.20（大字 AA）
     主色刻意不用品牌橘 #ff7f00：白字對比僅 2.53、深字 4.99，兩種前景都達不到
     內文標準，是本主題唯一沒有安全前景色的候選。 */
  --cms-widget-bg-dark: var(--cms-color-text);
  --cms-widget-bg-brand: var(--cms-color-btn-dark);
  --cms-widget-fg-on-brand: var(--cms-color-text-inverse);

  /* 統一下拉元件 web-select（issue #1014）：覆寫這組即可讓欄位與展開面板一起換色，
     毋須複製 common/form-select.css 的規則 */
  --cms-select-accent: #B8892E;
  --cms-select-accent-soft: rgba(184, 137, 46, 0.12);
  --cms-select-text: #553700;
}
body {
  background: #fff;
  background-image: url('../../../img/kgtwbeef/bg/bgTop.png');

}

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

.mark,
mark {
  color: #fff;
}

/* 註：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 {
  font-size: 14px;
}


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

/* ============================================================================
 * 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/internal-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: 1199.98px) {
  .page-wrapper {
    margin-top: 94px;
  }
}

/* 平板／手機兩段留白：2026-08-10 自 themes/custom-kgtwbeef/widget.css 搬入（原寄居於
   「區段 E」.dutyBox 與 .blockTitleBox 之間）。.page-wrapper 是全站版面骨架、
   非 widget，與上方 ≥1200／992~1199 兩段本就是同一組規則，理應同處一地；
   分散在兩檔會讓「調 header 下方留白」要翻兩個檔案才找得齊。
   斷點與上方兩段互斥，搬移不改變任何生效值。

   實高依據：kgtwbeef mobile header 實高——平板(768~991)約 103px、手機(≤767)約
   117px。原單一 max-width:992 的 margin-top:80px 過小，致首頁等 widget 模組頁
   內容陷入 fixed #header（issue #607 期間回報的獨立 bug）。改為對齊 header 實高
   -1px（比照上方 desktop「留 1px 重疊不留空」philosophy），並拆平板/手機兩段、
   改用標準斷點（消除舊 max-width:992 與本檔 min-width:992 的 992px 邊界重疊）。 */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .page-wrapper {
    margin-top: 102px;
  }
}

@media screen and (max-width: 767.98px) {
  .page-wrapper {
    margin-top: 116px;
  }
}

/* ============================================================================
 * 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: 1199.98px) {
  .breadcrumbs-section {
    margin-top: 94px;
  }
}

.overlay-bg::before {
  background: #f6f6f6 none repeat scroll 0 0;
}

.breadcrumbs-title {
  color: #E8380C;
  line-height: 45px;
  padding: 55px 0;
  font-size: 35px;
  font-family: HGPMinchoE;
}

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

/* ============================================================================
 * 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 {
  max-width: 200px;
  margin-right: 10px;
  border-radius: 99rem;
}

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

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

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

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

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

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

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

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

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

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

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

/* issue #712：選擇器同步（原 text-primary，訂單金額強調） */
.text-primary,
.order-amount-em {
  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: 767.98px) {
  .blog-section-title {
    font-size: 16px;
  }
}