/* ============================================================================
 * themes/custom-3ffood/base.css — 3ffood 主題 base 層完整抽取
 * ============================================================================
 *
 * 用途：
 *   承接舊 3ffood.css 的「全站級」樣式，作為 3ffood 主題對 common/base.css
 *   的覆寫與補充層。載入順序在 common/base.css 之後，重複規則由 3ffood 版本
 *   後勝覆寫；不重複者為 3ffood 專屬。
 *
 * 抽取策略（按 kgtwbeef / dgfactor 模式 — 完整段落抽取，非僅差異）：
 *   舊 3ffood.css 過渡期仍由 css.blade.php 載入托底，其 base 段與散落各處的
 *   全站級規則 SHALL 完整收進本檔（task 10.1，user 確認「全站級全收進 base」）。
 *
 * 與其他主題的結構差異（3ffood 特有）：
 *   3ffood 有「兩層」全站樣式 ——
 *     (1) 原始模板 base 段（3ffood.css line 36-2034，與 kgtwbeef 同模板，
 *         僅品牌值不同：主色 #131313、深色按鈕、強化 RWD 字級）。
 *         其中 line 1758-1784 .footer-area .theme-bg/.black-bg 反白覆寫
 *         跳過，留給 task 10.4 footer.css。
 *     (2)「三福」覆寫層（line 7900-14584 內散落的全站級區塊）：
 *         全站字型 Noto Serif JP、全站背景 BG.png、全站標題菱形主題 H1-H4、
 *         :root --cms-sf-color-* 變數（整個三福層大量引用，必須在 base 否則
 *         下游 var() 全失效）、Final Global Overrides 全站最終收斂
 *         （transparent 背景 / #page-content 按鈕系統 / 表單系統 / 通用容器 /
 *         分頁系統 / RWD）。其中 page-scoped 子區塊（購物流程 / 訂單卡片 /
 *         orderFinish / 內容頁 / checkout）留給對應 pages 檔（task 10.6~10.13）。
 *
 * 散落跨頁工具（與 kgtwbeef base.css 對應，從 flat 區抽出）：
 *   .btnSummit/.btnNormal/.gold-sec/.btnCanNotBuy/.delete-btn/.text-primary、
 *   breadcrumbs、.blog-section-title、.badge-* polyfill、.page-wrapper、
 *   .btnKG/.btnLike/.btnKG-gold/.btnKG.btn-soldout、.alertMessage、
 *   .innerpage-edit-box。跨多路由使用故置 base 層確保各頁皆載入。
 *
 * 載入順序：
 *   common/base.css -> themes/custom-3ffood/base.css（本檔）-> 其他 layout -> pages
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 10.1）
 * ============================================================================
 */


/* ============================================================================
 * #863 債二：主題 token 覆寫
 *   本主題覆寫下列 0 個全域 token；common 層引用該 token 的規則即自動
 *   套用品牌色，毋須逐條複製 common 規則再改色碼。
 *   原本硬編、與套用 token 後的 common 結果相同的 60 條宣告已刪除
 *   （其中 13 條規則因宣告全數移除而整條刪去）。
 *   帶 !important 的宣告一律保留（會改變與其他規則的勝負關係）。
 * ==========================================================================*/
:root,
:host {  /* :host 供後台預覽畫布的 Shadow DOM 取得同一組 token（issue #879）；light DOM 不匹配，前台零影響 */
  /* Widget 區塊背景橋接 token（issue #879）
     本主題的品牌色定義在私有 token --cms-sf-*，全域 --cms-color-* 覆寫數為 0，
     若不做這層對映，「主色」底會拿到 common 的淺藍 #4fc1f0 而非三福的酒紅。
     實測對比（WCAG 2.1）：
       主色 --cms-sf-color-primary #6a1d15 ＋ 白字 → 11.67（AA 內文）
       淺灰 --cms-sf-color-surface-soft #f6ece4 ＋ --cms-color-text → 10.85（AA 內文）
     深色維持 common 的 #131313：本主題無專屬深色 token，且沿用 common 才能與
     「主色」（酒紅）在視覺上區分開來。 */
  --cms-widget-bg-brand: var(--cms-sf-color-primary);
  --cms-widget-bg-light: var(--cms-sf-color-surface-soft);
  --cms-widget-fg-on-brand: var(--cms-color-text-inverse);

  /* 統一下拉元件 web-select（issue #1014）：覆寫這組即可讓欄位與展開面板一起換色，
     毋須複製 common/form-select.css 的規則 */
  --cms-select-accent: #6a1d15;
  --cms-select-accent-soft: rgba(106, 29, 21, 0.1);
}
/* ============================================================================
 * 原始模板 base 段 (一) — body / typography / utility / button / form (3ffood.css 36-1757)
 * ============================================================================ */

@media screen and (max-width: 991.98px) {
  h1 {
    font-size: 30px;
  }
}

@media screen and (max-width: 767.98px) {
  h1 {
    font-size: 30px;
  }
}

@media screen and (max-width: 991.98px) {
  h2 {
    font-size: 26px;
  }
}

@media screen and (max-width: 767.98px) {
  h2 {
    font-size: 26px;
  }
}

@media screen and (max-width: 991.98px) {
  h3 {
    font-size: 22px;
  }
}

@media screen and (max-width: 767.98px) {
  h3 {
    font-size: 22px;
  }
}

@media screen and (max-width: 991.98px) {
  h4 {
    font-size: 18px;
  }
}

@media screen and (max-width: 767.98px) {
  h4 {
    font-size: 18px;
  }
}

@media screen and (max-width: 991.98px) {
  h5 {
    font-size: 16px;
  }
}

@media screen and (max-width: 767.98px) {
  h5 {
    font-size: 14px;
  }
}

@media screen and (max-width: 991.98px) {
  h6 {
    font-size: 12px;
  }
}

@media screen and (max-width: 767.98px) {
  h6 {
    font-size: 12px;
  }
}

hr {
  border-top: 1px dashed #c9ac6e
}


/* ============================================================================
 * 原始模板 base 段 (二) — .bg-opacity-* / .bg-N / .separator (3ffood.css 1786-2034)；中間 1758-1784 .footer-area 反白覆寫留給 footer.css(task 10.4)
 * ============================================================================ */

/* ============================================================================
 * 跨頁按鈕：.btnSummit/.btnNormal/.gold-sec/.btnCanNotBuy/.delete-btn/.text-primary (3ffood.css 3379-3503)
 * ============================================================================ */

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

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

/* ③ 加入購物車鈕組（cart-action）3ffood 變體：圓角實心棗紅 #6a1d15（issue #622）
 * 對齊主題既有 #page-content .btnSummit 實心風格；保留 common 圓角 10px、僅覆寫色。 */
.cart-action__btn {
  background: #6a1d15;
  border-color: #6a1d15;
  color: #ffffff;
}

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

.cart-action__btn--selected {
  border-color: #6a1d15;
  color: #6a1d15;
}

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

.cart-action__btn--soldout {
  background: #f1eae8;
  border-color: #e2d4d0;
  color: #b9a39e;
}

.cart-action__stepper {
  border-color: #6a1d15;
}

.cart-action__stepper button {
  color: #6a1d15;
}

.cart-action__stepper button:hover,
.cart-action__stepper button:focus-visible {
  background: #6a1d15;
}

.cart-action__qty {
  color: #6a1d15;
}

/* issue #712：選擇器同步（原 text-primary，訂單金額強調） */
.text-primary,
.order-amount-em {
  color: #333333 !important;
}

/* ============================================================================
 * 跨頁麵包屑：.breadcrumbs-section/.overlay-bg/.breadcrumbs-title/.breadcrumb-list (3ffood.css 5133-5220)
 * ============================================================================ */

.breadcrumbs-section {
  background: #ffffff;
  margin-bottom: 40px;
}

.breadcrumbs-title {
  color: #580E0E;
  padding: 55px 0;
  font-size: 35px;
  letter-spacing: 2px;
}

.breadcrumbs-title::after,
.breadcrumbs-title::before {
  background: #580E0E;
}

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

.breadcrumb-list>li {
  font-size: 13px;
}

/* ============================================================================
 * 跨頁文字工具 + Bootstrap4 badge polyfill：.blog-section-title/.wrapper/.text-warp/.text-muted/.badge-* (3ffood.css 5809-6021)
 * ============================================================================ */

/* ============================================================================
 * .page-wrapper — 3ffood header 下方留白覆寫 margin-top:85px (3ffood.css 6106-6108)
 * ============================================================================ */

.page-wrapper {
  margin-top: 85px
}

/* ============================================================================
 * 跨頁按鈕/警示/編輯器內容：.btnKG/.btnLike/.btnKG-gold/.btnKG.btn-soldout/.alertMessage/.innerpage-edit-box (3ffood.css 6841-6970)
 * ============================================================================ */

.btnLike {
  background-color: #ffffff;
  border: 1px solid #2c2c2c;
  color: #2c2c2c;
  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: #2c2c2c;
  border: 1px solid #2c2c2c;
  color: #ffffff;
}

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

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

/* ============================================================================
 * 三福全站文字字型 — Noto Serif JP (3ffood.css 8276-8302)
 * ============================================================================ */

/* 三福全站文字字型 */
body,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body span,
body a,
body li,
body dt,
body dd,
body label,
body th,
body td,
body strong,
body em,
body small,
body button,
body input,
body select,
body textarea {
  font-family: "Noto Serif JP", serif !important;
  font-optical-sizing: auto;
}

/* ============================================================================
 * 三福全站背景圖 — BG.png (3ffood.css 8536-8544)
 * ============================================================================ */

/* 三福全站背景圖 */
body {
  background-color: #ffffff;
  background-image: url('../../../img/3ffood/BG.png');
  background-position: center center;
  background-attachment: fixed;
}

/* ============================================================================
 * 三福全站標題主題 — H1-H4 菱形裝飾 + 排除規則 (3ffood.css 8785-8935)
 * ============================================================================ */

/* 三福全站標題主題：H1-H4 */
h1,
h2,
h3,
h4 {
  font-weight: 700;
  color: #6a1d15;
}

h1:not(.pro-price)::before,
h1:not(.pro-price)::after,
h2:not(.pro-price)::before,
h2:not(.pro-price)::after,
h3:not(.pro-price)::before,
h3:not(.pro-price)::after,
h4:not(.pro-price):not(.footer-default-block-title)::before,
h4:not(.pro-price):not(.footer-default-block-title)::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  /* background: #6a1d15; */
  vertical-align: middle;
  transform: translateY(-2px) rotate(45deg);
}

h1:not(.pro-price)::before,
h2:not(.pro-price)::before,
h3:not(.pro-price)::before,
h4:not(.pro-price):not(.footer-default-block-title)::before {
  margin-right: 14px;
}

h1:not(.pro-price)::after,
h2:not(.pro-price)::after,
h3:not(.pro-price)::after,
h4:not(.pro-price):not(.footer-default-block-title)::after {
  margin-left: 14px;
}

.widget-imgTextD .imgTextD-TitleBox .imgTextD-Title::after {
  position: static;
  top: auto;
  right: auto;
}

/* 排除菱形與標題主題：價格 */
h1.pro-price,
h2.pro-price,
h3.pro-price,
h4.pro-price {
  color: inherit;
  font-weight: inherit;
}

h1.pro-price::before,
h1.pro-price::after,
h2.pro-price::before,
h2.pro-price::after,
h3.pro-price::before,
h3.pro-price::after,
h4.pro-price::before,
h4.pro-price::after {
  content: none;
}

/* 排除菱形與標題主題：社群 badge 標題 */
.message-box h2:has(> .badge) {
  color: inherit !important;
  font-weight: inherit;
}

.message-box h2:has(> .badge)::before,
.message-box h2:has(> .badge)::after {
  content: none;
}

/* 排除菱形與標題主題：編輯器輸出內容區 */
#page-content .innerpage-edit-box h1::before,
#page-content .innerpage-edit-box h1::after,
#page-content .innerpage-edit-box h2::before,
#page-content .innerpage-edit-box h2::after,
#page-content .innerpage-edit-box h3::before,
#page-content .innerpage-edit-box h3::after,
#page-content .innerpage-edit-box h4::before,
#page-content .innerpage-edit-box h4::after,
#page-content .blog-description h1::before,
#page-content .blog-description h1::after,
#page-content .blog-description h2::before,
#page-content .blog-description h2::after,
#page-content .blog-description h3::before,
#page-content .blog-description h3::after,
#page-content .blog-description h4::before,
#page-content .blog-description h4::after,
#page-content .features-grids h1::before,
#page-content .features-grids h1::after,
#page-content .features-grids h2::before,
#page-content .features-grids h2::after,
#page-content .features-grids h3::before,
#page-content .features-grids h3::after,
#page-content .features-grids h4::before,
#page-content .features-grids h4::after,
#page-content .ck-content h1::before,
#page-content .ck-content h1::after,
#page-content .ck-content h2::before,
#page-content .ck-content h2::after,
#page-content .ck-content h3::before,
#page-content .ck-content h3::after,
#page-content .ck-content h4::before,
#page-content .ck-content h4::after {
  content: none !important;
}

/* 排除菱形：Widget 文字編輯器輸出（不一定在 #page-content 下） */
.widget-text .widget-text-bg h1::before,
.widget-text .widget-text-bg h1::after,
.widget-text .widget-text-bg h2::before,
.widget-text .widget-text-bg h2::after,
.widget-text .widget-text-bg h3::before,
.widget-text .widget-text-bg h3::after,
.widget-text .widget-text-bg h4::before,
.widget-text .widget-text-bg h4::after,
.widget-text .features-grids h1::before,
.widget-text .features-grids h1::after,
.widget-text .features-grids h2::before,
.widget-text .features-grids h2::after,
.widget-text .features-grids h3::before,
.widget-text .features-grids h3::after,
.widget-text .features-grids h4::before,
.widget-text .features-grids h4::after {
  content: none !important;
}

/* ============================================================================
 * 三福 Final Global Overrides — :root --cms-sf-color-* 變數 / transparent 背景 / 按鈕系統 / 表單系統 / 通用容器 (3ffood.css 11551-11860)；購物流程/訂單卡片留給 pages(task 10.8/10.9)
 * ============================================================================ */

/* ==================================================
   3ffood Final Global Overrides（全站最終收斂）
   僅覆寫樣式，不更動 Blade / JS

   主題私有 token（issue #698 由 --sf-* 收編為 --cms-sf-*）：
   命名遵循統一 --cms-* 前綴、以主題縮寫 sf 區隔，不與
   common/tokens.css 全域 token 撞名；僅供 3ffood 主題層引用。
   ================================================== */
:root,
:host {  /* :host 供後台預覽畫布的 Shadow DOM 取得同一組 token（issue #879）；light DOM 不匹配，前台零影響 */
  --cms-sf-color-primary: #6a1d15;
  --cms-sf-color-primary-hover: #4f130d;
  --cms-sf-color-accent: #c9ac6e;
  --cms-sf-color-surface: #fffdfa;
  --cms-sf-color-surface-soft: #f6ece4;
  --cms-sf-color-text: #5b3a1b;
  --cms-sf-color-text-light: #fff7ef;
  --cms-sf-color-muted: #8f744b;
  --cms-sf-color-border: rgba(201, 172, 110, 0.72);
  --cms-sf-color-border-soft: rgba(201, 172, 110, 0.38);
  --cms-sf-shadow-soft: 0 10px 24px rgba(106, 29, 21, 0.08);
}

/* 保留 3ffood 背景，不讓內頁段落回退成純白底 */
#page-content.section,
#page-content.section>.shop-section,
#page-content.section>.blog-section,
#page-content.section>.message-box-section {
  background: transparent !important;
}

.breadcrumbs-section,
.breadcrumbs-section .breadcrumbs,
.breadcrumbs-section .breadcrumbs-inner,
.breadcrumbs-section .breadcrumbs-title {
  background: transparent !important;
}

/* ---------- 按鈕系統 ---------- */
#page-content .btn-hover-1::before,
#page-content .btn-hover-2::before {
  display: none !important;
}

#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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 24px;
  border-radius: 10px !important;
  border: 1.5px solid var(--cms-sf-color-border);
  background: var(--cms-sf-color-surface);
  color: var(--cms-sf-color-primary);
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  box-shadow: 0 6px 14px rgba(106, 29, 21, 0.06);
  width: auto;
  max-width: none;
  margin-right: 10px;
}

#page-content .btnSummit.gold,
#page-content .btnNormal.gold,
#page-content .btnNormal.red,
#page-content .submit-btn.btnSummit.gold,
#page-content .submit-btn.btn.btn-primary,
#page-content .submit-btn.btn-primary,
#page-content .check-btn,
#page-content .apply-btn {
  background: var(--cms-sf-color-primary) !important;
  border-color: var(--cms-sf-color-primary) !important;
  color: var(--cms-sf-color-text-light) !important;
}

#page-content .btnNormal.gold-sec,
#page-content .btn-secondary.btnNormal,
#page-content .btn.btn-secondary.btnNormal {
  background: var(--cms-sf-color-surface) !important;
  color: var(--cms-sf-color-primary) !important;
  border-color: var(--cms-sf-color-border) !important;
}

#page-content .btnCanNotBuy {
  background: #c8c0b4 !important;
  border-color: #c8c0b4 !important;
  color: #7a6a57 !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* ①② 在 3ffood 為內容寬度（上方 #page-content width:auto）會縮成字寬偏窄，
 * 補 min-width 給單顆按鈕（送出／繼續購物／修改 等）視覺份量，對齊其他主題 ~200px（issue #622）。
 * --split 並排鈕為 flex:1，min-width 僅作下限：桌機仍撐滿 50%、行動版過窄時 flex-wrap 自動換行。 */
#page-content .btnSummit.gold,
#page-content .btnNormal.gold,
#page-content .btnSummit.btn-outline-secondary,
#page-content .btnNormal.btn-outline-secondary {
  min-width: 180px;
}

/* auth 頁 --split 並排鈕（登入｜忘記密碼 等 50/50）為 flex:1，
 * 解除上方 min-width 下限，避免窄卡片被逼換行、確保維持 50/50。 */
#page-content .auth-form__actions--split .btnSummit.gold,
#page-content .auth-form__actions--split .btnNormal.gold,
#page-content .auth-form__actions--split .btnSummit.btn-outline-secondary,
#page-content .auth-form__actions--split .btnNormal.btn-outline-secondary {
  min-width: 0;
}

#page-content .btnSummit:hover,
#page-content .btnNormal:hover,
#page-content .submit-btn:hover,
#page-content .btn-submit:hover,
#page-content .apply-btn:hover,
#page-content .check-btn:hover {
  background: var(--cms-sf-color-primary-hover) !important;
  border-color: var(--cms-sf-color-primary-hover) !important;
  color: var(--cms-sf-color-text-light) !important;
  transform: translateY(-1px);
}

#page-content .btnNormal.gold-sec:hover,
#page-content .btn-secondary.btnNormal:hover,
#page-content .btn.btn-secondary.btnNormal:hover {
  background: #f7ecdf !important;
  border-color: var(--cms-sf-color-accent) !important;
  color: var(--cms-sf-color-primary) !important;
}

#page-content .btnSummit:focus-visible,
#page-content .btnNormal:focus-visible,
#page-content .submit-btn:focus-visible,
#page-content .btn-submit:focus-visible,
#page-content .apply-btn:focus-visible,
#page-content .check-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 172, 110, 0.35);
}

#page-content .btnSummit[disabled],
#page-content .btnNormal[disabled],
#page-content .submit-btn[disabled],
#page-content .btn-submit[disabled],
#page-content .apply-btn[disabled],
#page-content .check-btn[disabled] {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------- 表單系統 ---------- */
#page-content label {
  color: var(--cms-sf-color-primary);
  font-weight: 700;
  margin-bottom: 6px;
}

#page-content .form-control,
#page-content .custom-textarea,
#page-content textarea,
#page-content input[type="text"],
#page-content input[type="email"],
#page-content input[type="password"],
#page-content input[type="number"],
#page-content select {
  background: var(--cms-sf-color-surface);
  border: 1.5px solid var(--cms-sf-color-border-soft);
  color: var(--cms-sf-color-text);
  border-radius: 10px;
  min-height: 44px;
  box-shadow: none;
}

#page-content textarea,
#page-content .custom-textarea {
  min-height: 160px;
  padding: 12px 14px;
}

#page-content .form-control::placeholder,
#page-content textarea::placeholder {
  color: #b09779;
}

#page-content .form-control:focus,
#page-content textarea:focus,
#page-content input[type="text"]:focus,
#page-content input[type="email"]:focus,
#page-content input[type="password"]:focus,
#page-content select:focus {
  border-color: var(--cms-sf-color-primary) !important;
  box-shadow: 0 0 0 3px rgba(201, 172, 110, 0.26);
  outline: none;
}

#page-content .input-group .form-control {
  border-right: 0;
}

#page-content .input-group .input-group-text {
  background: var(--cms-sf-color-surface-soft);
  border: 1.5px solid var(--cms-sf-color-border-soft);
  border-left: 0;
  color: var(--cms-sf-color-muted);
  border-radius: 0 10px 10px 0;
}

#page-content .invalid-feedback {
  color: #8d2e24;
  font-size: 13px;
  font-weight: 600;
}

#page-content .is-invalid,
#page-content .form-control.is-invalid,
#page-content textarea.is-invalid {
  border-color: #b54f45 !important;
}

#page-content input[type="file"] {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px dashed var(--cms-sf-color-border);
  border-radius: 10px;
  background: #fff9f1;
  color: var(--cms-sf-color-muted);
  margin-bottom: 10px;
}

/* ---------- 會員/聯絡我們與通用容器 ---------- */
#page-content .message-box,
#page-content .contactBox,
#page-content .order-content-box,
#page-content .payment-details,
#page-content .user-side-menu,
#page-content .blog-details-area,
#page-content .innerpage-edit-box {
  background: var(--cms-sf-color-surface);
  border: 1px solid var(--cms-sf-color-border-soft);
  border-radius: 14px;
  box-shadow: var(--cms-sf-shadow-soft);
}

/* issue #562：補回 payment-details 卡片桌機內距。原設計桌機卡片無 padding、僅 @media ≤991
 * 給 14px；payment-details 還原為全寬表格後桌機內容貼邊，故桌機補 24px（≤991 的 14px !important 仍覆蓋小螢幕） */
#page-content .payment-details {
  padding: 24px;
}

#page-content .widget-categories {
  background: none;
  box-shadow: none;
  border: none;
}

#page-content .message-box {
  min-height: 0;
}

#page-content .blog-section-title,
#page-content .widget-title,
#page-content .user-side-menu__title {
  color: var(--cms-sf-color-primary);
  font-weight: 700;
  text-transform: none;
}

#page-content .blog-section-title.border-left,
#page-content .user-side-menu {
  border-left-color: var(--cms-sf-color-accent);
}

#page-content .user-side-menu__subtitle {
  color: #af9779;
}

#page-content .user-side-menu__item a {
  color: var(--cms-sf-color-text);
  border-color: transparent;
  border-radius: 10px;
}

#page-content .user-side-menu__item a:hover {
  background: #f7ecdf;
  border-color: rgba(201, 172, 110, 0.5);
}

#page-content .user-side-menu__item.is-active a,
#page-content .user-side-menu__item.is-active a:hover {
  background: var(--cms-sf-color-primary);
  border-color: var(--cms-sf-color-primary);
  color: var(--cms-sf-color-text-light);
}

#page-content .user-side-menu__item.is-active .user-side-menu__icon,
#page-content .user-side-menu__item.is-active .user-side-menu__arrow {
  color: var(--cms-sf-color-text-light);
}

/* 非 active icon 改 3ffood 棗紅（對齊品牌；active 由上方 1,2,0 規則維持白色） */
#page-content .user-side-menu__icon {
  color: var(--cms-sf-color-primary);
}

/* ============================================================================
 * 三福 Final Global Overrides — 分頁系統 .pagination (3ffood.css 12152-12224)
 * ============================================================================ */

/* ---------- 分頁系統 ---------- */
#page-content ul.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0 !important;
  list-style: none;
  background: transparent !important;
  box-shadow: none !important;
}

#page-content ul.pagination>.page-item {
  margin: 0 !important;
  padding: 0;
  border: 0;
  background: transparent;
  float: none;
}

#page-content ul.pagination>.page-item>.page-link,
#page-content ul.pagination>.page-item>span.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--cms-sf-color-border);
  border-radius: 999px;
  background: var(--cms-sf-color-surface);
  color: var(--cms-sf-color-muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  word-break: keep-all;
  box-shadow: none;
}

#page-content ul.pagination>.page-item:not(.page-item-btn)>.page-link,
#page-content ul.pagination>.page-item:not(.page-item-btn)>span.page-link {
  min-width: 44px;
  padding: 0 10px;
}

#page-content ul.pagination>.page-item.active>.page-link,
#page-content ul.pagination>.page-item.active>span.page-link {
  background: var(--cms-sf-color-primary) !important;
  border-color: var(--cms-sf-color-primary) !important;
  color: var(--cms-sf-color-text-light) !important;
  font-weight: 700;
}

#page-content ul.pagination>.page-item:not(.active):not(.disabled)>.page-link:hover {
  background: #f8eee2;
  border-color: var(--cms-sf-color-accent);
  color: var(--cms-sf-color-primary);
}

#page-content ul.pagination>.page-item.disabled>.page-link,
#page-content ul.pagination>.page-item.disabled>span.page-link {
  opacity: 0.45;
  background: #f7f2ea;
  color: #b9a88f;
}

#page-content ul.pagination>.page-item>.page-link i,
#page-content ul.pagination>.page-item>span.page-link i {
  font-size: 16px;
  line-height: 1;
}

/* ============================================================================
 * 三福 Final Global Overrides — RWD 手機/平板 (3ffood.css 12262-12329)
 * ============================================================================ */

/* ---------- 手機/平板 ---------- */
@media (max-width: 991.98px) {

  #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: 42px;
    padding: 9px 16px;
    font-size: 14px;
    margin-right: 6px;
  }

  #page-content .message-box,
  #page-content .order-content-box,
  #page-content .payment-details,
  #page-content .widget-categories,
  #page-content .user-side-menu,
  #page-content .blog-details-area,
  #page-content .innerpage-edit-box {
    border-radius: 12px;
    padding: 14px !important;
  }

  #page-content ul.pagination {
    gap: 8px;
  }

  #page-content ul.pagination>.page-item>.page-link,
  #page-content ul.pagination>.page-item>span.page-link {
    min-height: 38px;
    padding: 0 12px;
    font-size: 14px;
  }

  #page-content ul.pagination>.page-item:not(.page-item-btn)>.page-link,
  #page-content ul.pagination>.page-item:not(.page-item-btn)>span.page-link {
    min-width: 38px;
  }
}

/* ============================================================================
 * 三福 Final Global Overrides — 跨頁資料表格 / 縮圖 / 狀態·溫層 badge（自 shoppingCart.css 遷入）
 * ----------------------------------------------------------------------------
 * .table-content table（cart/orders/wishList 共用資料表）、.pro-/.cart-/.wish-thumbnail-img、
 * .product-title-2 / .pro-thumbnail-info>p（cart/wishList）、.badge.badge-success/info/purple
 * （狀態/溫層 badge 三福米金色，orders/cart 共用）。置於 base.css 全站載入，避免各 page 重複
 * 並修復 orders 頁缺表格樣式 / badge 退回 polyfill 綠色 (task 10.9)。 (3ffood.css 11866-11933)
 * ============================================================================ */

#page-content .badge.badge-success,
#page-content .badge.badge-info,
#page-content .badge.badge-purple {
  border-radius: 999px;
  border: 1px solid rgba(201, 172, 110, 0.6);
  background: #fff8ef;
  color: #8f744b;
  font-weight: 700;
  font-size: 12px;
}

/* ============================================================================
 * 三福 Final Global / 編輯器內容跨頁規則（company + posts + widget-text 共用，遷入 base.css 全站載入）
 * ----------------------------------------------------------------------------
 * (1) .innerpage-edit-box p/li 內文色 var(--cms-sf-color-text)：原 Final Global 內容頁(12236)
 *     與 .blog-description 同一條，誤入 post.css(10.7) 致 company 頁缺（內文色退回 #333）；
 *     company 頁僅用 .innerpage-edit-box，此處單獨補 company 部分 (task 10.11 修正)。
 * (2) .features-grids:has(.partner_item) 合作品牌/產品牆：CKEditor 內容，跨 company/post/
 *     widget-text，blade 未寫死、編輯器插入；置 base.css 全站涵蓋 (3ffood.css 6974-7064)。
 * ============================================================================ */

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

#page-content .blog-description .features-grids:has(.partner_item),
#page-content .innerpage-edit-box .features-grids:has(.partner_item),
.widget-text .widget-text-bg .features-grids:has(.partner_item) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  margin: 22px 0;
  align-items: stretch;
}

#page-content .blog-description .features-grids .partner_item,
#page-content .innerpage-edit-box .features-grids .partner_item,
.widget-text .widget-text-bg .features-grids .partner_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(201, 172, 110, 0.36);
  border-radius: 12px;
  background: #fffdfa;
}

#page-content .blog-description .features-grids .partner_image,
#page-content .innerpage-edit-box .features-grids .partner_image,
.widget-text .widget-text-bg .features-grids .partner_image {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(201, 172, 110, 0.28);
  border-radius: 10px;
  overflow: hidden;
}

#page-content .blog-description .features-grids .partner_image img,
#page-content .innerpage-edit-box .features-grids .partner_image img,
.widget-text .widget-text-bg .features-grids .partner_image img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

#page-content .blog-description .features-grids .partner_name,
#page-content .innerpage-edit-box .features-grids .partner_name,
.widget-text .widget-text-bg .features-grids .partner_name {
  margin: 0;
  color: #6a1d15;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
  word-break: break-word;
}

@media (max-width: 991.98px) {

  #page-content .blog-description .features-grids:has(.partner_item),
  #page-content .innerpage-edit-box .features-grids:has(.partner_item),
  .widget-text .widget-text-bg .features-grids:has(.partner_item) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 575.98px) {

  #page-content .blog-description .features-grids:has(.partner_item),
  #page-content .innerpage-edit-box .features-grids:has(.partner_item),
  .widget-text .widget-text-bg .features-grids:has(.partner_item) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #page-content .blog-description .features-grids .partner_item,
  #page-content .innerpage-edit-box .features-grids .partner_item,
  .widget-text .widget-text-bg .features-grids .partner_item {
    padding: 10px;
  }

  #page-content .blog-description .features-grids .partner_name,
  #page-content .innerpage-edit-box .features-grids .partner_name,
  .widget-text .widget-text-bg .features-grids .partner_name {
    font-size: 13px;
    line-height: 1.4;
  }
}

/* ============================================================================
 * 三福 #page-content 內容 手機 RWD（@media max-width:480px，自混合 @media 區塊 14452 抽出）
 * widget-block-title/blog-details-title/blog-item-2/product-title-2 字級 + btnSummit 系列按鈕尺寸；
 * 跨 widget/post/product/全站按鈕、選擇器交織故整批置 base.css(全站 #page-content scoped) (3ffood.css 14496-14524)
 * ============================================================================ */

@media (max-width: 479.98px) {
  #page-content .widget-block-title {
    padding-top: 14px;
  }

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