/* ============================================================================
 * common/pages/product.css — 跨主題共用商品頁面（列表 + 詳情 + 側欄分類）
 * ============================================================================
 *
 * 用途：
 *   提供 6 個前台主題共用的商品頁面樣式：商品列表頁（products/index）
 *   的網格與卡片、商品詳情頁（products/show）的主圖、圖片放大、規格選擇、
 *   評論分頁、商品分類側邊欄與多層樹狀展開、wishlist 收藏按鈕等。
 *
 * 內容索引：
 *   1. 商品列表 grid       .shop-content / .shop-content .product-item /
 *                          .product-info / .product-title （含 @media RWD）
 *   2. 商品詳情主圖區      .single-product-main-image / .single-product-image-tag /
 *                          .imgs-zoom-area .img-fluid
 *   3. 商品詳情資訊區      .single-product-info / .main-title / .pro-price /
 *                          .badge / h6 / .single-product-tab .tab-pane（含內嵌圖）
 *   4. 商品分類側欄基本    .product-cat / .product-cat-item（含 hover、active、深巢狀）
 *   5. 商品分類側欄選單    .product-side-menu / .product-side-menu .product-cat
 *                          多層展開（hover、active、has-children、is-active）
 *   6. 收藏按鈕            .product-item .btnLike-box / .product-item .btnLike
 *                          （獨立按鈕在區段 10）
 *   7. 商品卡片基底        .product-item / .product-img img / .product-info /
 *                          .product-title / .pro-price / .product-item:hover
 *   8. 商品卡片圖層        .product-item .product-img (含 a / img / .product-tag 標籤)
 *   9. 商品分類 treeview   .product-cat .treeview > li > a / .hitarea / .collapsable
 *  10. 詳情頁圖片放大區    .imgs-zoom-area / .p-c（含 .active img）
 *  11. 詳情頁副標 h3       .single-product-info h3
 *  12. 評論分頁            .reviews-tab li / li a / li a.active
 *  13. 規格選擇按鈕        .spec-button > li / li > a / li:hover / li a.active
 *  14. 新版商品卡          .productBigBlock / .productBlockTitle (含 h1/p) /
 *                          .productBox (含 hover) / .productImgBox / .productImg /
 *                          .productTag / .productTagText / .productTitle / .productContent
 *  15. 商品操作按鈕        .btnKG（加入購物車）/ .btnLike（收藏，獨立） /
 *                          .btnKG-gold（金色變體）/ .btnKG.btn-soldout（售完）
 *
 * 使用頁面：
 *   - resources/views/web/products/index.blade.php（商品列表）
 *   - resources/views/web/products/show.blade.php（商品詳情）
 *   - 部分樣式也在首頁 widget 內的商品卡使用
 *
 * 相依 vendor：無（圖片放大功能 .imgs-zoom-area 由各主題的 JS 自訂處理）
 *
 * 載入順序：
 *   common/{base,header,sidebar,footer,widget}.css → themes/default/{同} →
 *   common/pages/product.css（本檔）→ themes/default/pages/product.css →
 *   custom.css
 *
 * 抽取來源：public/web/css/default.css 10 個區段：
 *   - line 2548~2632：.shop-content + .single-product-area 共用 + @media
 *   - line 2700~2787：.single-product-* 詳情區
 *   - line 3072~3260：.product-cat / .product-side-menu 側欄分類
 *   - line 3364~3389：.product-item .btnLike-box / .btnLike
 *   - line 4893~4948：.product-item 卡片基底（含 hover）
 *   - line 5272~5304：.product-item .product-img（含 tag）
 *   - line 5391~5427：.product-cat .treeview 樹狀展開
 *   - line 5464~5510：.imgs-zoom-area / .p-c / 詳情 h3 / .reviews-tab
 *   - line 6144~6178：.spec-button 規格選擇
 *   - line 6791~7024：.productBigBlock / .productBox 新版卡 + .btnKG / .btnLike / .btnKG-gold
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 6.1）
 * ============================================================================
 */


/* ============================================================================
 * 區段 1：商品列表 grid 與單頁主容器
 *   抽取自 default.css line 2548~2632
 *   註：.single-product-area / .message-box 為 product / user 共用容器，
 *        本檔保留與商品有關的部分；message-box 細部樣式留給 task 6.5 user
 * ============================================================================
 */

.shop-content {
  border-radius: 10px;
  padding: 15px 15px;
}

.shop-content .product-item {
  background: #ffffff;
  border-radius: 0px;
  overflow: hidden;
}

.shop-content .product-item .product-info {
  background: #ffffff;
  padding: 15px;
}

.shop-content .product-item .product-info .product-title {
  /* font-size: 15px;
  font-weight: 400; */
  margin-top: 2px;
  margin-bottom: 6px;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-wrap: wrap;
  line-height: 24px;
  /* 保留兩行高度（2 × 24px = 48px），讓單行與兩行標題的卡片等高；比原 60px 緊湊、間距較小 */
  min-height: 48px;
}

.shop-content .product-item .product-info h4 {
  /* font-size: 16px;
  line-height: 28px; */
  margin-top: 12px;
  margin-bottom: 12px;
  color: #303030;
  min-height: 56px;
  max-height: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* 註：原本與 .message-box 共用同一規則（default.css line 2599~2606），
   .message-box 已遷至 common/base.css 統一管理（含跨頁 cascade）；
   .single-product-area 保留於 product.css，padding 沿用 20px 20px（product 詳情頁專屬 baseline）。 */

.single-product-area {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px 20px;
  height: fit-content;
  min-height: 400px;
  /* 覆寫 base.css 的 overflow-x:auto —— 手機版卡片內距(5px) < Bootstrap .row 負邊距(12px) 會冒出水平卷軸灰線。
     商品詳情卡片不需橫向捲動（分頁內寬表格已用 table-layout:fixed 處理）；order/user 頁不載 product.css，仍保留 base 的 auto */
  overflow-x: hidden;
}

@media screen and (max-width: 768px) {
  .shop-content {
    padding: 8px;
  }

  .shop-content .product-item .product-info {
    padding: 5px;
  }

  .shop-content .product-item .product-info .product-title {
    line-height: 22px;
    margin-top: 4px;
    margin-bottom: 4px;
    /* 手機版商品名最多一行，超出以 … 截斷；不保留多行 min-height，縮小與價格間距 */
    -webkit-line-clamp: 1;
    line-clamp: 1;
    min-height: 0;
  }

  .single-product-area {
    padding: 5px;
    margin-bottom: 30px;
  }
}


/* ============================================================================
 * 區段 2：商品詳情頁主圖 / 圖片放大 / 詳情資訊
 *   抽取自 default.css line 2700~2787
 * ============================================================================
 */

.single-product-main-image {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

.single-product-image-tag {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 65px;
  height: 65px;
  background: #2c2c2c;
  color: #ffffff;
  padding: 10px;
  border-radius: 99rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.single-product-image-tag.tag2 {
  position: absolute;
  top: 10px;
  left: 85px;
}

.imgs-zoom-area .img-fluid {
  border-radius: 12px;
}

.single-product-info {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px 20px;
  height: 100%;
}

.single-product-info .main-title {
  font-size: 36px;
  line-height: 1.3;
  font-display: swap;
  color: #373737;
  font-weight: 700;
  padding-bottom: 0;
  margin-bottom: 18px;
}

@media screen and (max-width: 768px) {
  .single-product-info {
    padding: 5px;
  }

  .single-product-info .main-title {
    font-size: 24px;
    margin-bottom: 14px;
  }
}

.single-product-info .pro-price {
  /* font-size: 24px; */
  color: #2c2c2c;
  font-weight: 700;
  padding-bottom: 0;
  margin-bottom: 12px;
  line-height: 1;
}

.single-product-info .badge {
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 6px;
}

/* 價格區塊：建議售價／優惠價／溫層 badge 緊湊垂直排列，移除各元素零散 margin */
.single-product-price-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.single-product-price-box .pro-price,
.single-product-price-box .badge {
  margin: 0;
}

/* 優惠價列：溫層 badge 置於價格左側、同一行垂直置中 */
.single-product-price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* 內頁數量 stepper：乾淨中性灰白晶片化（scoped 內頁，不影響購物車頁） */
.single-product-info .cart-plus-minus {
  width: 128px;
  height: 42px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
}

.single-product-info .qtybutton {
  width: 40px;
  min-width: 40px;
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: #374151;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  height: 100%;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, color .15s ease;
}

@media (hover: hover) {
  .single-product-info .qtybutton:hover {
    background: #2c2c2c;
    color: #ffffff;
  }
}

.single-product-info .dec.qtybutton,
.single-product-info .inc.qtybutton {
  float: none;
}

.single-product-info input.cart-plus-minus-box {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  background: #ffffff;
  color: #1f2937;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

/* 建議售價（原價）：灰色小字加刪除線 */
.product-original-price {
  margin: 0;
  color: #9ca3af;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: line-through;
}

.single-product-info h6 {
  /* font-size: 16px; */
  color: #515151;
}

.single-product-tab .tab-content .tab-pane p {
  font-size: 16px;
  line-height: 28px;
}

.single-product-tab .tab-content .tab-pane img {
  max-width: 100%;
  max-width: min(100%, 1040px);
  height: auto;
}

/* 手機版：商品介紹/規格/配送/注意事項內容禁止橫向捲動（CKEditor 寬表格等一律收進寬度內，不左右滑） */
@media screen and (max-width: 768px) {
  .single-product-tab .tab-content,
  .single-product-tab .tab-pane {
    overflow-x: hidden;
  }

  .single-product-tab .tab-pane table {
    max-width: 100%;
    table-layout: fixed;
  }

  .single-product-tab .tab-pane img,
  .single-product-tab .tab-pane video,
  .single-product-tab .tab-pane iframe {
    max-width: 100% !important;
    height: auto;
  }

  /* 商品頁容器禁止橫向溢出：plr-185 手機 padding:0，Bootstrap .row 負邊距會超出視窗造成橫向卷軸灰線 */
  .shop-section {
    overflow-x: hidden;
  }
}


/* ============================================================================
 * 區段 3：.product-cat / .product-side-menu 側邊欄分類（已遷移至 common/sidebar.css）
 *   原規則因 posts.show 等其他頁面亦使用此 class，限縮於 product.css 無法跨頁套用；
 *   2026-05 遷出至 sidebar.css（所有頁面皆載入）。詳見 sidebar.css 末段。
 *   原抽自 default.css line 3072~3260
 * ============================================================================
 */

/* ============================================================================
 * 區段 4：商品卡片 wishlist 收藏按鈕
 *   抽取自 default.css line 3364~3389
 * ============================================================================
 */

.product-item .btnLike-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  height: 100%;
  aspect-ratio: 1 / 1;
  padding: 4px;
}

.product-item .btnLike {
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  border: 1px solid #2c2c2c;
  color: #2c2c2c;
  /* padding: 5px 16px; */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  line-height: 14px;
  /* margin: 4px 5px 0 4px; */
  cursor: pointer;
  border-radius: 0rem;
  height: fit-content;
}


/* ============================================================================
 * 區段 5：商品卡片基底（.product-item / -img / -info / -title / pro-price / hover）
 *   抽取自 default.css line 4893~4948
 * ============================================================================
 */

.product-item {
  margin-bottom: 30px;
  transition: all 0.3s ease 0s;
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 1px solid #dddddd;
}

.product-info {
  background: #f6f6f6 none repeat scroll 0 0;
  padding: 20px 0;
  text-align: center;
}

.product-title {
  color: #434343;
  /* font-size: 16px;
  font-weight: 700; */
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.pro-price {
  color: #666666;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  /* line-height: 20px; */
  margin-bottom: 20px;
  z-index: 9;
}

.action-button {
  font-size: 13px;
}

.action-button>li {
  display: inline-block;
  margin-right: 10px;
}

.action-button>li:last-child {
  margin-right: 0;
}

.product-item:hover {
  box-shadow: 0px 8px 13px rgba(0, 0, 0, 0.15);
}


/* ============================================================================
 * 區段 6：商品卡片 .product-item .product-img 圖層含 tag
 *   抽取自 default.css line 5272~5304
 * ============================================================================
 */

.product-item .product-img a {
  width: 100%;
  height: 100%;
  display: block;
}

.product-item .product-img a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-item .product-img {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  background: #ffffff;
}

.product-item .product-img .product-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 80px;
  height: fit-content;
  background: #2c2c2c;
  color: #ffffff;
  padding: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 標籤文字（卡片 .product-tag 與內頁主圖 .single-product-image-tag 共用）：
   ≤3 字維持一行（nowrap）；4 字的 2+2 換行由各圓章主題（kgtwbeef／3ffood）覆寫 */
.product-item .product-img .product-tag .product-tag-text,
.single-product-image-tag .product-tag-text {
  display: inline-block;
  white-space: nowrap;
  text-align: center;
}

/* 內頁主圖為圓形標籤：4 字需 2+2（卡片矩形標籤 .product-tag 維持一行，故 common 的 len4 只套圓形主圖標籤；
   圓形卡片標籤的 4 字 2+2 由各主題 kgtwbeef／3ffood 覆寫） */
.single-product-image-tag[data-len="4"] .product-tag-text {
  white-space: normal;
  width: 2em;
  word-break: break-all;
  line-height: 1.1;
}


/* ============================================================================
 * 區段 7：.product-cat .treeview 樹狀展開
 *   抽取自 default.css line 5391~5427
 * ============================================================================
 */

.product-cat>ul>li>ul {
  padding-left: 20px;
}

.product-cat .treeview>li>a,
.product-cat .treeview>li>ul>li>a {
  color: #999999;
  display: inline-block;
  text-transform: capitalize;
}

.product-cat .treeview>li>a {
  font-size: 14px;
  line-height: 30px;
}

.product-cat .treeview>li>ul>li>a {
  font-size: 13px;
  line-height: 25px;
}

.product-cat .treeview li {
  position: relative;
}

.product-cat .hitarea {
  cursor: pointer;
  height: 30px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.product-cat .treeview .collapsable>a {
  color: #131313;
}


/* ============================================================================
 * 區段 8：詳情頁圖片放大 + reviews-tab
 *   抽取自 default.css line 5464~5510
 * ============================================================================
 */

.imgs-zoom-area {
  width: 100%;
}

.imgs-zoom-area img {
  width: 100%;
}

.p-c {
  border: 1px solid #fff;
  padding: 0 5px;
  width: 105px;
}

.p-c a.active img {
  border: 1px solid #131313;
}

.single-product-info h3 {
  font-weight: 500;
  margin-bottom: 5px;
}

.reviews-tab li {
  display: inline-block;
  margin-right: 35px;
  font-size: 16px;
}

.reviews-tab li:last-child {
  margin-right: 0;
}

.reviews-tab li a {
  display: block;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
}

.reviews-tab li a.active {
  border-bottom: 1px solid #313131;
  color: #313131;
}

.tab-content {
  color: #333333;
}


/* ============================================================================
 * 區段 9：規格選擇 .spec-button
 *   抽取自 default.css line 6144~6178
 * ============================================================================
 */

/* 選規格列：標籤 + 晶片 垂直置中並排（僅含 .spec-button 的列；:has 不支援時自動退回原浮動排版） */
.single-product-info .plus-minus-pro-action:has(.spec-button, .spec-select),
.single-product-info .plus-minus-pro-action:has(.spec-button, .spec-select) .sin-plus-minus {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  float: none;
  width: 100%;
}

.single-product-info .plus-minus-pro-action:has(.spec-button, .spec-select) .color-title,
.single-product-info .plus-minus-pro-action:has(.spec-button, .spec-select) .f-left {
  float: none;
  margin: 0;
}

.single-product-info .plus-minus-pro-action:has(.spec-button, .spec-select) .color-title {
  min-width: 48px;
  width: auto;
  color: #4b5563;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
}

/* 數量列標籤對齊選規格列：同寬（min-width 48）＋同樣式，配合 me-3(12px) 讓 stepper 左緣與規格控制項對齊 */
.single-product-info .plus-minus-pro-action:has(.cart-plus-minus) .color-title {
  min-width: 48px;
  width: auto;
  color: #4b5563;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
}

/* 晶片容器 */
.spec-button {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spec-button>li {
  margin: 0;
}

/* 晶片：白底、細灰框、圓角，清楚可讀（中性灰白） */
.spec-button>li>a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 38px;
  height: auto;
  padding: 6px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.spec-button>li>a i {
  line-height: 1;
}

/* hover 僅滑鼠裝置（避免觸控點擊後殘留） */
@media (hover: hover) {
  .spec-button>li:hover>a {
    border-color: #9ca3af;
    background: #f9fafb;
    color: #1f2937;
  }
}

/* 已選：深灰實心、清楚標示 */
.spec-button li a.active {
  background: #2c2c2c;
  border-color: #2c2c2c;
  color: #ffffff;
  font-weight: 600;
}

/* 規格下拉（單一維度選項 > 5 時改用）：乾淨中性下拉，附自繪箭頭 */
.spec-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-width: 140px;
  max-width: 100%;
  height: 40px;
  padding: 0 36px 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease;
}

.spec-select:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 1px;
}

@media (hover: hover) {
  .spec-select:hover {
    border-color: #9ca3af;
  }
}


/* ============================================================================
 * 區段 10：新版商品卡（.productBigBlock / .productBox / .productImg / .productTag）
 *           + 商品操作按鈕（.btnKG / .btnLike / .btnKG-gold / .btn-soldout）
 *   抽取自 default.css line 6791~7024
 * ============================================================================
 */

.productBigBlock {
  margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
  .productBigBlock {
    margin-bottom: 20px;
  }
}

.productBlockTitle {
  margin-bottom: 14px;
}

.productBlockTitle h1 {
  font-size: 20px;
  line-height: 1.6;
  color: #333333;
  font-weight: 600;
}

.productBlockTitle p {
  line-height: 20px;
  margin-left: 10px;
  border-left: 1px solid #1e1e1e;
  font-weight: 600;
  padding-left: 10px;
}

.productBox {
  text-decoration: none;
  display: block;
  margin-bottom: 30px;
  border: 1px solid #c6c6c6;
  background: #ffffff;
  border-radius: 0px;
}

.productBox:hover .productImgBox .productImg {
  transform: scale(1.08);

}

.productBox:hover .btnKG {
  background-color: #2c2c2c;
  color: #ffffff;
}

.productBox .productImgBox {
  width: 100%;
  height: auto;
  /* aspect-ratio: 16/9; */
  aspect-ratio: 1/1;
  border-radius: 0px;
  overflow: hidden;
  position: relative;
  overflow: hidden;
}

.productBox .productImgBox .productImg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: .5s;
}

.productBox .productImgBox .productTag {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 80px;
  height: fit-content;
  background: #2c2c2c;
  color: #ffffff;
  padding: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.productBox .productImgBox .productTag .productTagText {
  font-size: 14px;
  font-family: HGPMinchoE;
  font-display: swap;
  margin: 0px;
}

.productBox .productTitle {
  font-size: 20px;
  line-height: 36px;
  min-height: 72px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 12px;
  color: #333333;
  padding: 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media screen and (max-width: 768px) {
  .productBox .productTitle {
    font-size: 16px;
    min-height: 60px;
    line-height: 28px;
    margin-top: 12px;
    margin-bottom: 8px;
  }
}

.productBox .productContent {
  font-size: 16px;
  color: #333333;
  min-height: 48px;
  padding: 0 12px;
  line-height: 24px;
  height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
  .productBox .productContent {
    font-size: 16px;
    min-height: 60px;
    line-height: 28px;
    margin-top: 12px;
    margin-bottom: 8px;
  }
}

/* .btnKG / .btnLike / .btnKG-gold / .btnKG.btn-soldout 已從 common 層移除：
 * 此組 class 為 kgtwbeef 主題專用命名（KG = kgtwbeef），default.css 與 dgfactor.css
 * 雖含同名規則但屬歷史複製貼上殘留（兩主題實際 blade 未使用），不應留於跨主題的
 * common 層。完整版本見 themes/kgtwbeef/base.css；其他主題若未來需要 CTA 按鈕，
 * 應改採各自命名（避免 KG 前綴混淆）。 */

/* === Phase B Batch 2: .brand-name / .owl-carousel-suggest（抽自 default.css 5044-5097）=== */
.brand-name {
  color: #999999;
  font-style: italic;
  text-transform: capitalize;
}

.owl-carousel-suggest .product-item {
  width: 100%;
  background: #ffffff;
  margin-bottom: 10px;
  box-shadow: none;
  border: 1px solid #dddddd;
}

@media screen and (max-width: 767px) {
  .owl-carousel-suggest .product-item {
    width: 100%;
    background: #ffffff;
    margin-bottom: 20px;
    box-shadow: none;
    border: 1px solid #dddddd;
  }

  /* 移除自 default.css 沿用而來的金色「更多內容」（#D1AD4B）：common 為中性托底，
     桌機 .widget-title-more 採 base 連結色 #666666，手機不應另變金色。
     需要金色的主題（3ffood／kgtwbeef／shopLinerp）各自於主題檔覆寫，不在 common。 */
}

.owl-carousel-btn-suggestbox {
  width: fit-content;
  display: flex;
}

.owl-carousel-btn-suggestbox .carousel-btn {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

.owl-carousel-btn-suggestbox>.carousel-btn.right {
  background-image: url('../img/icon/arrow_R.svg');
  float: none;
}

.owl-carousel-btn-suggestbox>.carousel-btn.left {
  background-image: url('../img/icon/arrow_L.svg');
  margin-right: 1rem;
}

/* 相關商品輪播卡標題（.owl-carousel-suggest，貼文／文章詳情頁亦共用）：桌機 2 行、手機 1 行，與價格間距 6px。
   兩種 markup：商品卡＝h6.product-title > a.product-title-link；貼文卡＝h6.product-title > 純 a。
   ★ 關鍵：商品卡的截斷與高度其實由 common/widget.css 的
     .widget-product .product-item .product-info .product-title .product-title-link 控制
     （display:-webkit-box; -webkit-line-clamp:3; min-height:72px; margin-top:8/10px；權重 0,5,0），
     先前我加在 .product-title / .product-title a（權重 0,3,x）的規則被它壓過，故無效。
     其中 min-height:72px（預留三行）正是「標題與價格之間大留白」的來源、line-clamp:3 是「桌機可三行」的來源。
     ↓ 下方以權重 0,6,0 覆寫該 link（清掉 min-height 與 margin-top，桌機改 2 行、手機改單行 nowrap）。
   ★ 貼文卡的純 a 為 inline，由 h6 直接截斷，故 h6 同時保留 clamp 規則。
   手機單行一律用 nowrap + ellipsis（水平截斷），不用垂直 max-height 裁切，避免 serif 行框被切到字。 */
.owl-carousel-suggest .product-info .product-title {
  margin: 0 0 6px;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  word-break: break-word;
  text-transform: none;
}

.owl-carousel-suggest .product-info .product-title a {
  color: inherit;
  text-decoration: none;
  line-height: inherit;
}

.widget-product .owl-carousel-suggest .product-item .product-info .product-title .product-title-link {
  margin-top: 0;
  min-height: 0;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media screen and (max-width: 767px) {
  .owl-carousel-suggest .product-info .product-title {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .widget-product .owl-carousel-suggest .product-item .product-info .product-title .product-title-link {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-height: 0;
    margin-top: 0;
  }
}


/* ============================================================================
 * 補充區段：.product-item .btnLike 手機版 cascade 修復
 * ============================================================================
 *
 * 原因：
 *   舊 default.css 內 cascade（同 specificity 規則由線性掃描順序決勝）：
 *     - line 3374 .product-item .btnLike { aspect-ratio: 1/1; ... }（桌機）
 *     - line 3416 @media (max-width:767px) .product-item .btnLike
 *                 { aspect-ratio: auto; width: auto; padding: 15px 15px; ... }（手機，後勝）
 *   最終手機版 aspect-ratio = auto（按鈕為正常 ~46px 高度長條）
 *
 *   抽到新檔後 cascade 順序反轉：
 *     - common/base.css line 2076-2095（抽自舊 line 3416 RWD）.product-item .btnLike
 *       { aspect-ratio: auto; ... }（先載，被 product.css 覆蓋）
 *     - common/pages/product.css line 284-298（抽自舊 line 3374 桌機）.product-item .btnLike
 *       { aspect-ratio: 1/1; ... }（後載勝，無 media query 全 viewport 套用）
 *   最終手機版 aspect-ratio = 1/1（按鈕強制 145.5×145.5 大方塊）
 *
 *   影響範圍：商品列表頁手機版 .product-item .btnLike「加入商品追蹤」按鈕。
 *
 * 修法：
 *   本檔末段（cascade 順序最末）再次宣告 @media (max-width: 767px)
 *   .product-item .btnLike 覆寫，仿舊 default.css line 3416-3435 內容
 *   還原 aspect-ratio: auto + width: auto + padding: 15px 15px 等手機樣式。
 *   仿 common/base.css line 2162 .message-box input 補丁同模式。
 *
 * 抽取自：default.css line 3416-3435
 * ============================================================================
 */

@media (max-width: 767px) {
  .product-item .btnLike {
    background-color: #ffffff;
    border: 1px solid #2c2c2c;
    color: #2c2c2c;
    padding: 15px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px;
    cursor: pointer;
    border-radius: 0rem;
    width: auto;
    height: fit-content;
    aspect-ratio: auto;
  }

  .product-item .btnLike i {
    margin-right: 5px;
  }
}



/* ============================================================================
   按鈕基底還原（issue518 task 13 修正）：.btnKG / .btnLike / .btnKG-gold 等商品卡片/詳情
   按鈕的「基底樣式」原存於 default.css（top-level），階段 5-6 拆 common 時遺漏，導致 default
   主題（僅靠 common）按鈕破版（無邊框/寬高、display:inline 擠成一團）。其他主題因自有
   KEEP-ALL 按鈕規則（載於 common 之後）覆寫故未顯現。此處還原至 common，主題可續覆寫。
   來源：public/web/css/default.css L6932~7024
   ============================================================================ */
.btnKG {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #cdcdcd;
  color: #2c2c2c;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  border-radius: 0rem;
}

@media screen and (max-width: 768px) {
  .btnKG {
    width: auto;
    margin: 4px;
    padding: 10px;
  }

  .btnKG.btn-w100-mobile {
    width: 100%;
  }
}

.btnKG p {
  color: #2c2c2c !important;
}

.btnKG i {
  font-size: 16px;
  margin-right: 5px;
}

/* 反黑只在「真的有滑鼠」的裝置 hover 時生效；觸控裝置完全不套深色互動狀態，
   避免 tap 後狀態黏住（按下變黑、要點別處才變白）。
   不設 :active —— 觸控的 :active 在點擊觸發 JS 後常會殘留不消，反而造成卡黑；
   比照收藏愛心（無 :active、純狀態色驅動），加入購物車在觸控時維持白底即可。 */
@media (hover: hover) {
  .btnKG:hover {
    background-color: #2c2c2c;
    color: #ffffff;
  }

  .btnKG:active {
    background-color: #2c2c2c;
    color: #ffffff;
  }
}

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

/* 反黑只在有滑鼠的裝置 hover 生效；觸控不套 :hover，避免 tap 後黑底黏住、
   蓋掉收藏的 is-wished 狀態色（讓內頁收藏比照清單頁：色彩純由點擊切換的 is-wished 驅動）。 */
@media (hover: hover) {
  .btnLike:hover {
    background-color: #2c2c2c;
    border: 1px solid #2c2c2c;
    color: #ffffff;
  }
}

.btnKG-gold {
  width: 100%;
  background-color: #313131;
  border: 1px solid #313131;
  color: #ffffff;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px auto;
  cursor: pointer;
  border-radius: 0rem;
  height: fit-content;
}

@media (hover: hover) {
  .btnKG-gold:hover {
    background-color: #000000;
    color: #ffffff;
  }
}

.btnKG.btn-soldout {
  background: #dddddd;
  color: #666666;
  border: 1px solid #666666;
}

/* ============================================================================
 * 商品清單工具列（/products）：排序 / 每頁筆數（左）＋ 商品搜尋（右）
 *   搜尋由側欄移至此；手機（<992）隱藏工具列搜尋、沿用上方既有搜尋避免重複。
 *   配套：products/index.blade.php（.product-toolbar）、main.js（select 變更即送出）。
 * ============================================================================ */
.product-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.product-toolbar-sortform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0;
}

.product-toolbar-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.product-toolbar-label {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
}

.product-toolbar-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-color: #ffffff;
  height: 40px;
  padding: 0 32px 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #1f2937;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 每頁筆數的下拉鈕較窄（取代 blade inline min-width: 80px） */
.product-toolbar-select--narrow {
  min-width: 80px;
}

/* 排序／每頁的下拉選單寬度與圓角（取代 blade inline style） */
.product-toolbar-menu {
  min-width: 100px;
  border-radius: 8px;
}

.product-toolbar-menu--narrow {
  min-width: 80px;
}

/* 排序／每頁為 Bootstrap dropdown（button + .dropdown-menu + .dropdown-item），非原生 select；
   選項 hover / 選中色於此控制（公版中性灰，避免落回預設品牌橘） */
.product-toolbar .dropdown-menu .dropdown-item {
  color: #1f2937;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.product-toolbar .dropdown-menu .dropdown-item:hover,
.product-toolbar .dropdown-menu .dropdown-item:focus {
  color: #1f2937;
  background-color: #f3f4f6;
}

.product-toolbar .dropdown-menu .dropdown-item:active,
.product-toolbar .dropdown-menu .dropdown-item.active {
  color: #ffffff;
  background-color: #374151;
}

.product-toolbar-select:hover {
  border-color: #9ca3af;
  background-color: #f9fafb;
}

.product-toolbar-select:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 1px;
}

.product-toolbar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 240px;
  min-width: 220px;
  max-width: 340px;
  margin: 0;
}

.product-toolbar-search input {
  width: 100%;
  height: 40px;
  padding: 0 44px 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  font-size: 14px;
  color: #1f2937;
}

.product-toolbar-search input:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 1px;
}

.product-toolbar-search button {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.2s ease;
}

.product-toolbar-search button:hover {
  color: #111827;
}

@media (max-width: 991px) {
  .product-toolbar {
    margin-bottom: 18px;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* 手機沿用上方既有搜尋，隱藏工具列搜尋避免重複 */
  .product-toolbar-search {
    display: none;
  }
}

/* AJAX 即時搜尋載入中：商品格淡化並暫停互動，避免閃動與誤點 */
#product-results {
  transition: opacity 0.15s ease;
}

#product-results.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* 桌機：商品分類側欄頂部下移對齊商品卡片頂端（工具列凸於上方）。
   值＝.shop-content padding-top(15px) + 工具列內容(40px) + padding-bottom(16px)
       + border(1px) + margin-bottom(24px) = 商品格起始位置。
   側欄不在 .shop-content 內，故需含那 15px。僅商品清單頁套用（class 限定，不影響貼文/文章側欄）。 */
@media (min-width: 992px) {
  .product-side-menu--below-toolbar {
    margin-top: 96px;
  }
}

/* ============================================================================
 * 商品清單卡片購物動作（快速加入購物車 / 收藏狀態）
 *   單規格數量 stepper、多規格快速加入 modal、收藏愛心已收藏狀態色。
 *   配套：partials/grid.blade.php、partials/quick-add-*.blade.php、index.blade.php（JS）。
 *   common 為基準（中性色），主題僅在 themes/<theme>/pages/product.css 覆寫品牌色。
 * ============================================================================ */

/* 卡片動作列：愛心 + 加入購物車（／stepper／售罄）並排，桌機與手機皆橫向 */
.card-action-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: nowrap;
}

.card-action-row > .btnLike {
  flex: 0 0 48px;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0;
  line-height: 1;
  aspect-ratio: auto;
  box-sizing: border-box;
}

.card-action-row > .btnLike i {
  margin-right: 0;
}

.card-action-row > .btnLike span {
  display: none !important;
}

.card-action-row > .btnLike:not(.is-wished),
.card-action-row > .btnLike.like:not(.is-wished),
.card-action-row > .btnLike:not(.is-wished):hover,
.card-action-row > .btnLike:not(.is-wished):focus,
.card-action-row > .btnLike:not(.is-wished):focus-visible,
.card-action-row > .btnLike:not(.is-wished):active,
.card-action-row > .btnLike.like:not(.is-wished):hover,
.card-action-row > .btnLike.like:not(.is-wished):focus,
.card-action-row > .btnLike.like:not(.is-wished):focus-visible,
.card-action-row > .btnLike.like:not(.is-wished):active {
  background-color: #ffffff;
  border-color: #2c2c2c;
  color: #2c2c2c;
  box-shadow: none;
}

/* 單規格：「加入購物車」與數量 stepper 共用同一版位，佔滿愛心以外的寬度 */
.card-cart-action {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
}

.card-action-row > .btnKG {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  margin: 0;
}

.card-cart-action .addToCart,
.card-cart-action .btnKG,
.card-action-row > .btnKG {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  white-space: nowrap;
}

.quickAddTrigger.quick-add-selected {
  border-color: #d1d5db;
  background: #f3f4f6;
  color: #111827;
}

@media (hover: hover) {
  .quickAddTrigger.quick-add-selected:hover {
    border-color: #9ca3af;
    background: #e5e7eb;
    color: #111827;
  }
}

@media screen and (max-width: 768px) {
  /* 手機版改為「愛心 | 加入購物車」並排：愛心維持 icon 寬度、購物車動作佔滿剩餘寬度，避免上下堆疊與寬度不一 */
  .card-action-row > .btnLike {
    flex-basis: 48px;
  }
  .card-action-row > .card-cart-action,
  .card-action-row > .btnKG {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .card-cart-action .addToCart,
  .card-cart-action .btnKG {
    width: 100%;
  }
}

/* 數量 stepper：沿用 btnKG 中性語彙（白底、細框、直角） */
.cart-stepper {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 48px;
  margin: 0;
  border: 1px solid #cdcdcd;
  border-radius: 0;
  overflow: hidden;
  background-color: #ffffff;
}

.cart-stepper-btn {
  flex: 0 0 38px;
  border: none;
  background-color: #ffffff;
  color: #2c2c2c;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 8px 0;
  transition: background-color .15s ease, color .15s ease;
}

/* hover 僅套用於可真正 hover 的裝置（滑鼠），避免觸控裝置點擊後 hover 狀態殘留（按完變色不還原） */
@media (hover: hover) {
  .cart-stepper-btn:hover {
    background-color: #2c2c2c;
    color: #ffffff;
  }
}

.cart-stepper-qty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  font-size: 14px;
  color: #2c2c2c;
  border-left: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;
  user-select: none;
}
/* 收藏愛心：已收藏狀態色（明顯區別於未收藏的白底外框） */
.btnLike.is-wished {
  background-color: #e3342f;
  border-color: #e3342f;
  color: #ffffff;
}

@media (hover: hover) {
  .btnLike.is-wished:hover {
    background-color: #c5221d;
    border-color: #c5221d;
    color: #ffffff;
  }
}

/* 多規格快速加入 modal 內容 */
.quick-add-modal .modal-dialog {
  max-width: 760px;
}

.quick-add-modal .modal-content {
  border: 1px solid #d4d4d8;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.quick-add-modal .modal-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.quick-add-modal-grip {
  width: 48px;
  height: 5px;
  margin: 0 auto;
  border-radius: 999px;
  background: #d1d5db;
}

.quick-add-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.quick-add-modal-heading {
  min-width: 0;
}

.quick-add-modal-kicker {
  display: block;
  margin: 0 0 4px;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.quick-add-modal .modal-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.quick-add-modal .btn-close,
.quick-add-close {
  opacity: 1;
  flex: 0 0 auto;
}

.quick-add-close {
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background-color: #ffffff;
  background-position: center;
  background-size: 14px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.quick-add-modal .modal-body {
  padding: 28px 24px 24px;
  background: #f3f4f6;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

.quick-add {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quick-add-panel,
.quick-add-purchase {
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.quick-add-panel {
  padding: 18px 18px 2px;
}

.quick-add .plus-minus-pro-action {
  margin-bottom: 16px;
}

.quick-add .sin-plus-minus,
.quick-add .sin-plus-minus.f-left,
.quick-add .plus-minus-pro-action .f-left {
  float: none !important;
  display: block;
  width: 100%;
}

.quick-add .color-title {
  display: block;
  margin: 0 0 10px;
  color: #111827;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.quick-add .spec-button {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.quick-add .spec-button > li {
  margin-right: 0;
}

.quick-add .spec-button > li > a {
  min-width: 74px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #ffffff;
  color: #374151;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.quick-add .spec-button > li > a:focus,
.quick-add .spec-button > li > a:focus-visible {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #111827;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06);
}

/* hover 僅在支援 hover 的裝置生效，避免手機點擊後 sticky hover 殘留 */
@media (hover: hover) {
  .quick-add .spec-button > li:hover > a {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06);
  }
}

.quick-add .spec-button li a.active {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
  box-shadow: none;
}

.quick-add-purchase {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 18px;
}

.quick-add-qty-block {
  display: flex;
  align-items: stretch;
}

.quick-add-qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  width: 100%;
}

.quick-add-label {
  color: #111827;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
  min-width: 42px;
}

.quick-add .quick-add-qty .cart-plus-minus {
  display: inline-flex;
  align-items: center;
}

.quick-add .cart-plus-minus {
  width: 100%;
  max-width: 220px;
  height: 56px;
  min-height: 56px;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  background: #f9fafb;
  overflow: hidden;
}

.quick-add .qtybutton {
  width: 52px;
  min-width: 52px;
  background: transparent;
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .quick-add .qtybutton:hover {
    background: #111827;
    color: #ffffff;
  }
}

.quick-add .cart-plus-minus-box {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #111827;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  box-shadow: none;
}

.quick-add .cart-plus-minus-box:focus {
  outline: none;
}

.quick-add-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
  min-height: 0;
}

.quick-add-actions .btnKG,
.quick-add-actions .btnKG.btn-soldout {
  width: 100%;
  height: 56px;
  min-height: 56px;
  border-radius: 16px;
  border: 1px solid #111827;
  background: #111827;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.quick-add-actions .quick-add-detail {
  border-color: #d1d5db;
  background: #ffffff;
  color: #111827;
}

@media (hover: hover) {
  .quick-add-actions .quick-add-detail:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #111827;
  }
}

.quick-add-actions .btnKG i,
.quick-add-actions .btnKG.btn-soldout i {
  margin-right: 8px;
}

@media (hover: hover) {
  .quick-add-actions .btnKG:hover {
    background: #000000;
    border-color: #000000;
  }
}

.quick-add-actions .btnKG.btn-soldout,
.quick-add-actions .btnKG.btn-soldout:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
  color: #6b7280;
}

@media screen and (max-width: 767px) {
  .quick-add-modal .modal-dialog {
    margin: 0;
    min-height: 100dvh;
    align-items: flex-end;
  }

  .quick-add-modal .modal-content {
    border-radius: 22px 22px 0 0;
    max-height: 92dvh;
    min-height: 0;
  }

  .quick-add-modal .modal-header {
    gap: 10px;
    padding: 12px 16px 14px;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .quick-add-modal-grip {
    width: 44px;
    height: 4px;
  }

  .quick-add-modal-bar {
    gap: 12px;
  }

  .quick-add-modal-kicker {
    margin-bottom: 3px;
    font-size: 10px;
  }

  .quick-add-modal .modal-title {
    font-size: 18px;
  }

  .quick-add-close {
    width: 36px;
    height: 36px;
    background-size: 12px;
  }

  .quick-add-modal .modal-body {
    padding: 18px;
    max-height: calc(92dvh - 72px);
  }

  .quick-add-summary {
    display: none;
  }

  .quick-add-panel,
  .quick-add-purchase {
    padding: 14px;
    border-radius: 18px;
  }

  .quick-add-purchase {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .quick-add-qty-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-height: 0;
  }

  .quick-add-label {
    min-width: 0;
  }

  .quick-add-actions {
    flex-direction: column;
    min-height: 0;
  }

  .quick-add .cart-plus-minus,
  .quick-add-actions .btnKG,
  .quick-add-actions .btnKG.btn-soldout {
    max-width: none;
    height: 52px;
    min-height: 52px;
  }

  .quick-add-stock-pill {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  .quick-add .spec-button {
    gap: 8px;
  }

  .quick-add .spec-button > li > a {
    min-width: 0;
    min-height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }
}

/* 手機商品分類：觸發列（搜尋 + 篩選按鈕） */
.mobile-cat-toolbar {
  display: flex;
  gap: 10px;
  align-items: stretch;
  padding: 0 15px;
}

.mobile-cat-toolbar-search {
  flex: 1 1 0%;
  position: relative;
}

.mobile-cat-toolbar-search input {
  width: 100%;
  height: 40px;
  padding: 0 44px 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  font-size: 14px;
  color: #1f2937;
  box-shadow: none;
}

.mobile-cat-toolbar-search input::placeholder {
  color: #999999;
}

.mobile-cat-toolbar-search input:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 1px;
  border-color: #111827;
}

.mobile-cat-toolbar-search button {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: transparent;
  color: #6b7280;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.mobile-cat-toolbar-search button:hover {
  color: #111827;
}

.mobile-cat-toolbar-filter {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2937;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.mobile-cat-toolbar-filter:hover,
.mobile-cat-toolbar-filter:active {
  border-color: #111827;
  color: #111827;
}

.mobile-cat-toolbar-filter i {
  font-size: 18px;
}

/* 無搜尋的分類列（商品內頁）：篩選鈕填滿整列、置中，避免單一按鈕孤懸左側 */
.mobile-cat-toolbar--nosearch .mobile-cat-toolbar-filter {
  flex: 1 1 auto;
  width: 100%;
  justify-content: center;
}

.mobile-cat-toolbar-badge {
  display: inline-block;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: #222222;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}

/* 手機商品分類：側邊抽屜（slide-in drawer） */
.mobile-cat-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 3040;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-cat-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-cat-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3050;
  width: 88vw;
  max-width: 380px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.15);
  transform: translateX(-101%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}

.mobile-cat-drawer.is-open {
  transform: translateX(0);
}

.mobile-cat-drawer-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: #ffffff;
}

.mobile-cat-drawer-header::after {
  display: none;
}

.mobile-cat-drawer-title-group {
  flex: 1;
}

.mobile-cat-drawer-kicker {
  margin: 0 0 4px;
  color: #666666;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mobile-cat-drawer-title {
  margin: 0;
  color: #333333;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.mobile-cat-drawer-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  color: #333333;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-cat-drawer-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #222222;
  border-color: rgba(0, 0, 0, 0.1);
}

.mobile-cat-drawer-current {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-cat-drawer-current-label {
  color: #666666;
  font-size: 12px;
  font-weight: 600;
}

.mobile-cat-drawer-current-name {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: #222222;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.mobile-cat-drawer-body {
  flex: 1 1 0%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px;
}

/* 桌機隱藏抽屜與觸發列 */
@media (min-width: 992px) {
  .mobile-cat-drawer,
  .mobile-cat-drawer-overlay {
    display: none !important;
  }
}

@media screen and (max-width: 991px) {
  .shop-section .widget-search {
    margin-bottom: 10px;
  }

  .shop-section .product-side-menu {
    padding: 14px 10px;
  }

  .shop-section .product-side-menu .widget-title {
    font-size: 20px;
  }
}


/* 移除抽屜內選單的外框與陰影，使其融入抽屜 */
.mobile-cat-drawer-body.product-side-menu {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 16px;
}