/* ==========================================================================
   Soothe MUA 全站樣式表 (stylesheet.css)
   基礎色：燕麥米白 #fffcf2
   主要/Hover：深棗紅 #9e2c35
   滾動懸浮導覽列：溫潤暖杏 #f7e8d8
   點綴色：活力暖橘 #f0b385
   內文/連結：深焙暖褐 #3c322c
   ========================================================================== */

/* ==========================================================================
   0. 品牌自訂字體宣告與字元分流設定
   ========================================================================== */

/* 字型已切片（unicode-range），瀏覽器只下載頁面上用到的字。
   依字型授權（SIL OFL 1.1）衍生版本改用中性名稱：
   SmuaTitle = 衍生自貓啃什錦黑（只含漢字）；SmuaBody = 衍生自 Maruko Gothic CJKtc Medium */
/* 字型清單（fonts/maoken/fonts.css、fonts/maruko/fonts.css）改在 header.twig 用不擋畫面的方式載入
   （2026-11-13 第三輪速度）。原本在這裡用 @import，瀏覽器要等字型清單下載完才開始顯示畫面。 */

/* 全站內文、按鈕、導航、輸入框、H4~H6：全面指定 SmuaBody（馬路口圓體） */
html, body, p, a, span, li, button, input, select, textarea, div, h4, h5, h6,
.nav-link, .dropdown-item, .breadcrumb, legend, .product-thumb h4 {
  font-family: 'SmuaBody',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Microsoft JhengHei", sans-serif !important;
}

/* 核心大標題 (聯絡我們、特色商品、商品大標等 H1~H3)：
   中文優先套用 SmuaTitle（貓啃什錦黑），英數字與缺字自然退回 SmuaBody */
h1, h2, h3,
#content h1,
#content h2,
#content h3,
.page-title {
  font-family: 'SmuaTitle', 'SmuaBody',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Microsoft JhengHei", sans-serif !important;
  font-weight: normal !important;
}

/* ==========================================================================
   1. 全站畫布與字級強制設定
   ========================================================================== */
html {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px !important;
  line-height: 1.65 !important;
  background-color: #fffcf2 !important;
  color: #3c322c !important;
}

/* ==========================================================================
   2. 徹底消除任何 Bootstrap 預設藍色超連結與圖示
   ========================================================================== */
a,
a:visited,
.nav-link,
.header-col-actions a,
.clean-action-icon,
footer a {
  color: #3c322c !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

a:hover,
a:focus,
.nav-link:hover,
.header-col-actions a:hover,
.clean-action-icon:hover,
footer a:hover {
  color: #9e2c35 !important;
}

/* ==========================================================================
   3. 標題層級標準規範
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.section-title,
.content-heading {
  color: #9e2c35 !important;
  line-height: 1.4 !important;
}

h1 { font-size: 24px !important; margin-bottom: 14px; }
h2 { font-size: 21px !important; margin-bottom: 12px; }
h3 { font-size: 19px !important; margin-bottom: 10px; }
h4 { font-size: 17px !important; }
h5 { font-size: 16px !important; }

legend {
  padding: 8px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #eadfc9;
  color: #9e2c35 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   4. 表單、門市資訊與輸入欄位文字放大
   ========================================================================== */
label,
.form-label,
.col-form-label {
  display: inline-block;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #3c322c !important;
  margin-bottom: 8px !important;
}

.form-control {
  font-size: 15px !important;
  color: #3c322c !important;
  background-color: #ffffff !important;
  border: 1px solid #e5d8cb !important;
  border-radius: 8px !important; /* 1114 網格：6 → 8 */
  padding: 10px 14px !important;
  box-shadow: none !important;
}

.form-control:focus {
  border-color: #9e2c35 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(158, 44, 53, 0.12) !important;
}

/* 門市地址與輔助說明字級放大 */
address,
.address-info,
.contact-info p {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #3c322c !important;
}

button:focus {
  outline: none !important;
}

/* ==========================================================================
   5. 版面容器
   ========================================================================== */
#container {
  width: 100%;
  min-height: 100%;
  position: relative;
}

#content, #column-left, #column-right {
  padding-bottom: 60px;
}

/* 系統提示彈窗 (Alert) */
#alert {
  z-index: 9999;
  position: fixed;
  top: 30%;
  left: 50%;
  width: 90%;
  max-width: 450px;
  transform: translateX(-50%);
}

#alert .alert {
  margin-bottom: 15px;
  border-radius: 8px;
  font-size: 14px;
}

/* ==========================================================================
   6. 徹底隱藏原生預設老舊區塊
   ========================================================================== */
#top,
nav#top,
nav#menu,
.breadcrumb {
  display: none !important;
}

body:not(.common-home) main {
  padding-top: 85px !important;
}

/* ==========================================================================
   7. 導覽列系統 (桌機維持等高，顏色由深焙暖褐鎖定)
   ========================================================================== */
#site-header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
  padding: 14px 28px;
  transition: background-color 0.3s ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

/* 電腦版：標誌靠左、選單在整個畫面正中間、圖示靠右（2026-11-13 首頁改版）
   用三欄格線，選單不會因為左右兩邊寬度不同而偏掉 */
@media (min-width: 992px) {
  .header-inner {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
  }

  .header-col-logo { justify-self: start; }
  .header-col-menu { justify-self: center; flex: none !important; }
  .header-col-actions { justify-self: end; }
}

.header-transparent {
  background-color: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* 下滑時電腦版維持穩定高度 */
.header-scrolled {
  background-color: #f7e8d8 !important;
  box-shadow: none !important;
  border-bottom: none !important;
  padding: 14px 28px !important;
}

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

.header-col-logo #logo img {
  max-height: 42px;
  width: auto;
  display: block;
}

/* 電腦版主選單置中容器 */
.header-col-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

/* 電腦版導覽項目列表 */
.main-nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 40px;
}

/* 核心導覽文字：不寫死字重，順應原生 Medium
   2026-11-13 首頁改版：和右邊圖示同深咖啡、17px，滑過變深紅＋底線（原本深紅字、滑過變橘） */
#site-nav .main-nav-list .nav-link {
  position: relative;
  color: #3c322c !important;
  font-size: 17px !important;
  font-weight: normal !important;
  letter-spacing: 0.8px;
  padding: 6px 4px !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

#site-nav .main-nav-list .nav-link:hover,
#site-nav .main-nav-list .smua-nav-split:hover > .nav-link {
  color: #9e2c35 !important;
}

#site-nav .main-nav-list .nav-link:not(.dropdown-toggle)::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -2px;
  height: 2px;
  background: #9e2c35;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

#site-nav .main-nav-list .nav-link:not(.dropdown-toggle):hover::after {
  transform: scaleX(1);
}

.main-nav-list .dropdown-menu {
  background-color: #fffcf2 !important;
  border: 1px solid #ebd9c8 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(60, 50, 44, 0.08) !important;
}

.main-nav-list .dropdown-item {
  color: #3c322c !important;
  padding: 8px 18px !important;
  font-size: 15px !important;
}

.main-nav-list .dropdown-item:hover {
  background-color: #f7ede2 !important;
  color: #9e2c35 !important;
}

/* 下拉選單：名稱和箭頭分開（2026-11-13，header.twig 的 .smua-nav-split）
   點名稱進頁面；滑鼠移過去自動打開；觸控與鍵盤點箭頭（Bootstrap 原本的下拉功能） */
.main-nav-list .smua-nav-split {
  display: flex;
  align-items: center;
  position: relative;
}

#site-nav .main-nav-list .smua-nav-caret {
  background: transparent;
  border: 0;
  padding: 8px 6px !important;
  margin-left: 0;
  line-height: 1;
  cursor: pointer;
}

.main-nav-list .smua-nav-caret i {
  font-size: 11px;
  transition: transform 0.2s ease;
}

.main-nav-list .smua-nav-caret.show i {
  transform: rotate(180deg);
}

.main-nav-list .smua-nav-split > .dropdown-menu {
  top: 100%;
  left: 0;
  margin-top: 0;
}

@media (hover: hover) and (min-width: 992px) {
  .main-nav-list .smua-nav-split:hover > .dropdown-menu {
    display: block;
  }
}

/* 右側功能按鈕群 */
.header-col-actions {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  position: relative !important;
}

.clean-action-icon,
.header-col-actions a,
.header-col-actions button,
.header-col-actions i,
.header-col-actions svg {
  color: #3c322c !important;
  fill: #3c322c !important;
  font-size: 20px !important;
  line-height: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.clean-action-icon:hover,
.header-col-actions a:hover,
.header-col-actions button:hover,
.header-col-actions i:hover {
  color: #9e2c35 !important;
  fill: #9e2c35 !important;
}

/* 電腦版（992px 以上）頁首中間已有完整選單，隱藏漢堡鈕（2026-11-13）。
   上面的 display: inline-flex !important 會蓋掉模板的 d-lg-none，所以在這裡補 */
@media (min-width: 992px) {
  .header-col-actions .mobile-menu-btn {
    display: none !important;
  }
}

/* 搜尋面版 */
.quick-search-panel {
  position: absolute !important;
  top: calc(100% + 15px) !important;
  right: 0 !important;
  width: 280px !important;
  background-color: #fffcf2 !important;
  border: 1px solid #ebd0ba !important;
  box-shadow: 0 10px 25px rgba(60, 50, 44, 0.12) !important;
  border-radius: 25px !important;
  padding: 4px 6px !important;
  z-index: 9999 !important;
}

.quick-search-inner {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.quick-search-inner input {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 14px !important;
  color: #3c322c !important;
  padding: 6px 12px !important;
  flex: 1 !important;
}

.quick-search-inner input::placeholder {
  color: #a89a90 !important;
  font-size: 13px !important;
}

.quick-search-inner button {
  background-color: #fae2cc !important; /* 同「加入購物車」按鈕（.btn-primary）配色，2026-11-14 改淺杏底＋粉橘細框 */
  border: 1.5px solid #f0b385 !important;
  outline: none !important;
  color: #9e2c35 !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.quick-search-inner button:hover {
  background-color: #9e2c35 !important; /* 同 .btn-primary:hover */
  border-color: #9e2c35 !important;
}

/* 按鈕裡的放大鏡：平常深棗紅、滑過白色（上面「右側功能按鈕群」把頁首所有 <i> 設成深褐色、滑過變紅，會蓋掉），2026-11-13；11-14 配合按鈕改色 */
.quick-search-inner button i,
.quick-search-inner button i:hover {
  color: #9e2c35 !important;
}

.quick-search-inner button:hover i {
  color: #ffffff !important;
}

/* 購物車小紅點 */
.cart-icon-btn {
  position: relative !important;
}

.cart-badge {
  display: none;
  position: absolute;
  top: -6px;
  right: -8px;
  background-color: #9e2c35 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: bold !important;
  border-radius: 10px !important;
  padding: 1px 5px !important;
  min-width: 16px !important;
  text-align: center !important;
}

/* ==========================================================================
   8. 商品內頁規範
   ========================================================================== */
#product h1,
.product-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #9e2c35 !important;
  margin-bottom: 12px !important;
}

#product .list-unstyled li,
.product-info {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #3c322c !important;
}

.rating {
  margin-bottom: 16px;
  font-size: 14px !important;
}

.rating a {
  color: #7a6a5f !important;
  text-decoration: none !important;
}

.price {
  margin-bottom: 20px;
}

.price-new,
.price h2,
.product-price {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #9e2c35 !important;
}

.price-old {
  font-size: 15px !important;
  color: #999999 !important;
  text-decoration: line-through !important;
  margin-left: 8px;
}

/* 按鈕規範 */
.btn-primary,
.btn-custom {
  /* 2026-11-14 使用者定案：淺杏底＋深棗紅字＋粉橘細框（原本粉橘底白字對比只有 1.8，無障礙要 4.5；現在 5.9） */
  background-color: #fae2cc !important;
  border: 1.5px solid #f0b385 !important;
  color: #9e2c35 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  transition: all 0.25s ease-in-out;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-custom:hover {
  background-color: #9e2c35 !important;
  border-color: #9e2c35 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(158, 44, 53, 0.25);
}

/* ==========================================================================
   9. 頁尾區塊規範（深焙暖褐）
   ========================================================================== */
footer {
  width: 100%;
  padding: 40px 0 24px 0;
  background-color: #fffcf2 !important;
  border-top: 1px solid #ebd9c8 !important;
  color: #3c322c !important;
}

footer h5, footer .h5 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #9e2c35 !important;
  margin-bottom: 14px !important;
}

footer a {
  color: #3c322c !important;
  text-decoration: none !important;
  font-size: 15px !important;
  line-height: 2.1 !important;
  display: inline-block;
}

footer a:hover {
  color: #9e2c35 !important;
}

footer p {
  font-size: 14px !important;
  color: #7a6a5f !important;
  margin-top: 15px;
}

/* ==========================================================================
   10. 響應式佈局 (Mobile)
   ========================================================================== */
@media (max-width: 767px) {
  body:not(.common-home) main {
    padding-top: 75px !important;
  }

  /* 修正手機頂部兩側擠壓與偏左 */
  #site-header.site-header {
    padding: 10px 16px !important;
  }

  .header-scrolled {
    padding: 8px 16px !important;
  }

  .header-col-logo #logo img {
    max-height: 38px !important;
  }

  .header-col-actions {
    gap: 16px !important;
  }

  /* 手機端標題與文字適度放大 */
  h1 { font-size: 21px !important; }
  #product h1, .product-title { font-size: 21px !important; }
  legend { font-size: 18px !important; }
}

  /* 抽屜選單色彩覆蓋
     2026-11-13 移出上面的手機 @media：漢堡選單鈕在平板、電腦也會出現，原本這些樣式只在 767px 以下生效，
     平板、電腦打開選單時沒有樣式，選單前面出現項目點 */
  .mobile-menu-drawer {
    background-color: #fffcf2 !important;
    width: 285px !important;
  }
  .mobile-menu-drawer .offcanvas-header {
    border-bottom: 1px solid #ebd0ba !important;
  }
  .mobile-menu-drawer .offcanvas-title {
    color: #9e2c35 !important;
    font-weight: 700 !important;
    font-size: 17px !important;
  }
  .mobile-nav-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0;
  }
  /* 只在大項之間畫線（2026-11-13：原本 li 也套到子項目，每個子項目底下都有線） */
  .mobile-nav-list > li {
    padding: 12px 4px;
    border-bottom: 1px solid rgba(60, 50, 44, 0.08);
  }
  .mobile-nav-list a {
    color: #3c322c !important;
    font-size: 16px !important;
    font-weight: normal !important;
    padding: 6px 0 !important;
    display: block;
  }
  .mobile-nav-list a:hover {
    color: #9e2c35 !important;
  }
  .mobile-sub-list {
    list-style: none;
    padding-left: 14px;
    margin-top: 6px;
  }
  .mobile-sub-list a {
    font-size: 14px !important;
    color: #6a5e56 !important;
  }
  .mobile-sub-list li {
    padding: 0;
  }
  /* 漢堡選單最下面的社群圖示（2026-11-13）：暖橘圓底、深棗紅圖示 */
  .smua-drawer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
  }
  .smua-drawer-social a.smua-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #f0b385;
    color: #9e2c35 !important;
    transition: background-color 0.2s ease;
  }
  .smua-drawer-social a.smua-social-link:hover,
  .smua-drawer-social a.smua-social-link:focus {
    background-color: #ebd0ba;
    color: #9e2c35 !important;
  }
  .smua-drawer-social svg {
    display: block;
    width: 22px;
    height: 22px;
  }
/* ==========================================================================
   11. 商品分類頁:工具列、商品卡片、加入購物車按鈕
   ========================================================================== */

/* ---- 頂部工具列:僅保留排序,靠右 ---- */
.category-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.category-toolbar .sort-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-toolbar .sort-box label {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #7a6a5f !important;
  white-space: nowrap;
}

.category-toolbar .form-select {
  min-width: 170px;
  font-size: 15px !important;
  color: #3c322c !important;
  background-color: #ffffff !important;
  border: 1px solid #e5d8cb !important;
  border-radius: 8px !important;
  padding: 8px 36px 8px 14px !important;
  box-shadow: none !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239e2c35' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.category-toolbar .form-select:hover {
  border-color: #ebd0ba !important;
}

.category-toolbar .form-select:focus {
  border-color: #9e2c35 !important;
  box-shadow: 0 0 0 2px rgba(158, 44, 53, 0.12) !important;
  outline: none !important;
}

/* ---- 卡片本體 ---- */
.product-layout {
  height: 100%;
}

.product-thumb {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #ffffff;
  border: none !important;
  border-radius: 16px; /* 1114 網格：卡片 12 → 16 */
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(60, 50, 44, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ---- 圖片區塊 ---- */
.product-thumb .image-wrapper {
  position: relative;
  overflow: hidden;
}

.product-thumb .image-wrapper a {
  display: block;
}

.product-thumb .image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s ease;
}

/* 僅支援滑鼠懸浮的裝置:上浮 + 圖片中心放大(手機/觸控不觸發) */
@media (hover: hover) {
  .product-thumb:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(60, 50, 44, 0.13);
    will-change: transform;
  }

  .product-thumb:hover .image-wrapper img {
    transform: scale(1.06);
  }
}

/* ---- 文字區 ---- */
.product-thumb .content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 16px 18px;
}

/* 品名:最多兩行,超出以省略號截斷 */
.product-thumb .product-name {
  margin: 0 0 10px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  min-height: calc(1.4em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-thumb .product-name a {
  color: #3c322c !important;
}

.product-thumb .product-name a:hover {
  color: #9e2c35 !important;
}

/* 價格:金額加粗,貨幣符號縮小 */
.product-thumb .price {
  margin-bottom: 16px;
  line-height: 1.3;
}

.product-thumb .price-new {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #9e2c35 !important;
  letter-spacing: 0.3px;
}

.product-thumb .price-old {
  font-size: 14px !important;
  margin-left: 8px;
}

.product-thumb .price-currency {
  font-size: 0.62em;
  font-weight: 600;
  margin-right: 3px;
  letter-spacing: 0;
}

/* ---- 單顆全寬加入購物車按鈕(沿用全站 .btn-primary 規範) ---- */
.product-thumb .content > form {
  margin-top: auto;
}

.product-thumb .button-group .btn {
  display: block;
  width: 100%;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: center;
  cursor: pointer;
}

.product-thumb .button-group .btn:active {
  transform: scale(0.98);
}

.product-thumb .button-group .btn i {
  margin-right: 6px;
}

/* ---- 分頁 ---- */
.category-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .category-toolbar .form-select {
    min-width: 150px;
  }

  .product-thumb .content {
    padding: 12px 12px 14px;
  }

  .product-thumb .price-new {
    font-size: 19px !important;
  }
}
/* ==========================================================================
   10. Soothe MUA 購物車／庫存改版：已售完、LINE 洽詢、選項按鈕
   ========================================================================== */

/* 購物袋外層（維持導覽列 flex 排列） */
.cart-action-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* ---- 已售完按鈕（灰色停用） ---- */
.btn-soldout,
.btn-soldout:disabled,
.btn-soldout.disabled {
  background-color: #d9d4cf !important;
  border-color: #d9d4cf !important;
  color: #8a817b !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* ---- LINE 洽詢訂製（白底、深棗紅外框、LINE 圖示） ---- */
.btn-line {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #ffffff !important;
  border: 1.5px solid #9e2c35 !important;
  color: #9e2c35 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  text-decoration: none !important;
  transition: all 0.25s ease-in-out;
}

.btn-line i {
  font-size: 18px;
  margin-right: 0 !important;
}

.btn-line:hover,
.btn-line:focus {
  background-color: #9e2c35 !important;
  border-color: #9e2c35 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(158, 44, 53, 0.25);
}

/* 商品頁的按鈕佔滿整列 */
#product .btn-soldout,
#product .btn-line {
  width: 100%;
}

/* 商品卡片上的按鈕與「加入購物車」同尺寸 */
.product-thumb .button-group .btn-line,
.product-thumb .button-group .btn-soldout {
  display: flex !important;
  width: 100%;
}

/* ---- 選項按鈕（規格＋口味合併選項） ---- */
.smua-opt-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.smua-opt {
  /* 2026-11-13 改版：白底淺框，選中時暖杏底＋深棗紅框（原本選中是實心深紅、字看不清楚） */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 14px 6px 6px;
  background-color: #ffffff;
  border: 1.5px solid #e6d5c4;
  border-radius: 8px; /* 1114 網格：選項 12 → 8 */
  color: #3c322c;
  font-size: 14px !important;   /* 選項按鈕是 <label>，要蓋過第 4 節 label 的 !important */
  font-weight: 500 !important;
  margin-bottom: 0 !important;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.smua-opt:not(:has(.smua-opt-img)) {
  padding-left: 14px;
}

.smua-opt:hover {
  border-color: #f0b385;
  background-color: #fffaf4;
}

.smua-opt-img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.smua-opt-price {
  font-size: 12px;
  opacity: 0.85;
}

/* 選中：暖杏底＋深棗紅框（用內陰影加粗框線，按鈕大小不會跳動） */
.smua-opt-input:checked + .smua-opt {
  background-color: #fdf1e6;
  border-color: #9e2c35;
  color: #9e2c35;
  box-shadow: inset 0 0 0 1px #9e2c35, 0 3px 8px rgba(158, 44, 53, 0.12);
}

.smua-opt-input:checked + .smua-opt .smua-opt-name {
  color: #9e2c35;
  font-weight: 600;
}

/* 鍵盤操作時的焦點框 */
.smua-opt-input:focus-visible + .smua-opt {
  outline: 2px solid #f0b385;
  outline-offset: 2px;
}

/* 已售完：灰色、停用 */
.smua-opt.is-soldout,
.smua-opt-input:disabled + .smua-opt {
  background-color: #f1eeeb;
  border-color: #d9d4cf;
  color: #a39b95;
  cursor: not-allowed;
  box-shadow: none;
}

.smua-opt.is-soldout .smua-opt-name {
  text-decoration: line-through;
}

.smua-opt-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 50px;
  background-color: #d9d4cf;
  color: #6f6660;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

/* 選項必填錯誤時的外框 */
.smua-opt-group.is-invalid .smua-opt:not(.is-soldout) {
  border-color: #dc3545;
}

@media (max-width: 575px) {
  .smua-opt {
    padding: 6px 12px 6px 6px;
    font-size: 13px !important;
  }
}

/* ==========================================================================
   11. 商品列表：手機一排 2 個（2026-11-12 使用者同意）
   分類、搜尋、特價、品牌頁的模板都是 row-cols-1（手機一排 1 個），這裡統一改成 2 個
   ========================================================================== */
/* 「已售完」「LINE 洽詢訂製」按鈕的文字置中（按鈕是 flex，原本靠左） */
.product-thumb .button-group .btn-soldout,
.product-thumb .button-group .btn-line {
  justify-content: center;
}

@media (max-width: 575.98px) {
  #product-list.row-cols-1 {
    --bs-gutter-x: 16px; /* 2026-11-14 網格：12 → 16（1114網格排版規格.md） */
  }

  #product-list.row-cols-1 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  #product-list .product-thumb .content {
    padding: 10px 10px 12px;
  }

  #product-list .product-thumb .product-name {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  #product-list .product-thumb .price {
    margin-bottom: 10px;
  }

  #product-list .product-thumb .price-new {
    font-size: 17px !important;
  }

  #product-list .product-thumb .price-old {
    display: block;
    margin-left: 0;
    font-size: 12px !important;
  }

  #product-list .product-thumb .button-group .btn {
    padding: 8px 4px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  #product-list .product-thumb .button-group .btn i {
    margin-right: 4px;
  }
}

/* ==========================================================================
   12. 商品列表：平板一排 3 個（2026-11-13 第三輪）
   分類頁模板在 768～991px 是 row-cols-md-2（一排 2 個），約 830px 的平板卡片太大
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
  #product-list.row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
}

/* ==========================================================================
   13. 全站網格（2026-11-14 使用者同意，規格見 1114網格排版規格.md）
   內容最寬 1200，左右留白 手機 16／平板 24／電腦 32；頁首標誌與圖示對齊內容邊線。
   取代 Bootstrap 隨螢幕跳階的容器寬度（540／720／960／1140／1320，左右 12）
   ========================================================================== */
.container {
  --smua-side: 16px;
  max-width: none;
  padding-left: var(--smua-side);
  padding-right: var(--smua-side);
}

@media (min-width: 768px) {
  .container {
    --smua-side: 24px;
  }

  #site-header.site-header,
  #site-header.header-scrolled {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (min-width: 992px) {
  .container {
    --smua-side: 32px;
    max-width: 1264px;
  }

  #site-header.site-header,
  #site-header.header-scrolled {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

.header-inner {
  max-width: 1200px;
  padding-left: 0;  /* header.twig 的 container-fluid 自帶左右 12，拿掉才會和內容邊線對齊 */
  padding-right: 0;
}

/* ==========================================================================
   14. 網格補齊（2026-11-14 全站巡檢後補，規格見 1114網格排版規格.md）
   ========================================================================== */
/* Bootstrap 預設圓角 4px（下拉選單、數量欄前面的「數量」、搜尋頁按鈕等）→ 8；卡片 → 16 */
:root {
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 8px;
}

.card {
  --bs-card-border-radius: 16px;
  --bs-card-inner-border-radius: 15px;
}

/* 標題和頁首之間留白：手機 24、平板以上 32（搜尋、特價、聯絡我們、網站地圖、部落格、會員、購物車、結帳等；
   分類、商品、資訊頁外掛本來就是這個數字） */
#content {
  padding-top: 24px;
}

@media (min-width: 768px) {
  #content {
    padding-top: 32px;
  }
}

/* 商品列表（搜尋、特價、品牌等頁）：卡片上下、左右間距一樣，手機 16、平板以上 24 */
#product-list {
  --bs-gutter-x: 24px;
}

#product-list > .col {
  margin-bottom: 24px !important;
}

@media (max-width: 767.98px) {
  #product-list,
  #product-list.row-cols-1 {
    --bs-gutter-x: 16px;
  }

  #product-list > .col {
    margin-bottom: 16px !important;
  }
}

/* 聯絡我們：閱讀版 720 置中；門市資訊卡不放商店 Logo 大圖（頁首已有 Logo） */
#information-contact #content {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

#information-contact .card .img-thumbnail {
  display: none;
}