/* ============================================================================
 * themes/kgtwbeef/pages/product.css — kgtwbeef 主題商品頁完整抽取
 * ============================================================================
 *
 * 用途：
 *   完整承接舊 kgtwbeef.css 的 product 相關段落內容，含商品列表、商品詳情、
 *   側邊欄分類、加入收藏按鈕、商品圖縮放、規格選擇、數量調整、新版商品卡。
 *
 * 抽取策略（按 dgfactor 模式 — 完整段落抽取，非僅差異）：
 *   舊 kgtwbeef.css 已停用（css.blade.php line 24 註解掉），其 product 段落 SHALL
 *   完整抽到本檔。本檔載入順序在 common/pages/product.css 之後。
 *
 * 抽取來源：public/web/css/kgtwbeef.css 8 個區段
 *   - line 2289-2531：.shop-content 商品列表 + .single-product-area 詳情容器 +
 *                     .single-product-main-image + .single-product-image-tag +
 *                     .imgs-zoom-area .img-fluid + .single-product-info + 詳情 tab
 *   - line 2703-2978：.product-cat 側邊欄分類（列表式：.product-cat ul li /
 *                     .product-cat-item / hover / active / 多層展開）+
 *                     .product-item .btnLike-box / .btnLike 加入收藏按鈕（2850-2960）
 *   - line 3497-3651：.product-item 卡片基底 + .product-img + .product-info +
 *                     .product-title + hover transition
 *   - line 3864-3935：.product-item .product-img a + .product-tag 商品標籤
 *                     （絕對定位紅圓徽章 #E8380C）
 *   - line 4065-4126：.imgs-zoom-area + .p-c 縮圖切換 + .single-product-info h3 +
 *                     .reviews-tab 詳情頁 tab 標籤
 *   - line 4127-4185：.cart-plus-minus + .sin-plus-minus + .qtybutton + .cart-qty
 *                     商品詳情頁數量調整按鈕（同時應用於購物車 qty 編輯）
 *   - line 4747-4791：.spec-button 規格選擇按鈕（含 hover / active）
 *   - line 5424-5571：.swiper / .swiper-slide / .video-container 詳情頁多媒體 +
 *                     .productBigBlock / .productBlockTitle / .productBox 新版商品卡
 *                     （含 hover / .productImgBox / .productTag / .productTitle /
 *                     .productContent，**不含 .btnKG 主規則，已遷至 themes/kgtwbeef/
 *                     base.css 跨頁工具按鈕區段）
 *
 * 跳過範圍：
 *   - 2532-2701：早期 widget 系列（在 themes/kgtwbeef/widget.css）
 *   - 3652-3698：owl-carousel-suggest（在 themes/kgtwbeef/widget.css）
 *   - 3700-3819：.blog-item-2 / .blog-image / .blog-title-2（pages/post.css 範圍）
 *   - 3936-4063：後期 widget block（在 themes/kgtwbeef/widget.css）
 *   - 4186-4275：.table-content / .payment-details / .pro-thumbnail-* 等
 *                cross-page 表格（pages/shoppingCart.css 範圍）
 *   - 4277-4495：.product-title-2 / .blog-details-title 等（widget cascade / post 範圍）
 *   - 5573-5666：.btnKG / .btnLike / .btnKG-gold 跨頁工具按鈕（themes/kgtwbeef/base.css）
 *
 * 載入順序：
 *   common/pages/product.css -> themes/kgtwbeef/pages/product.css（本檔）
 *
 * 詳細規格：openspec/specs/web-theme-css/spec.md（Requirement R.FUNC.1 / R.FUNC.8）
 * 變更記錄：openspec/changes/issue518-web-theme-css-modularization/（task 9.6）
 * ============================================================================
 */

/* ============================================================================
 * 區段 1：.shop-content 列表 + .single-product 詳情（line 2289-2531）
 * ============================================================================ */

.shop-content .product-item {
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  border: 1.5px solid #dab782;
}

.shop-content .product-item .product-info .product-title {
  font-size: 18px;
  font-weight: 800;
  margin-top: 14px;
  margin-bottom: 6px;
  color: #553500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-wrap: wrap;
  line-height: 28px;
  /* 保留兩行高度（2 × 28px = 56px），使單行/兩行標題卡片等高 */
  min-height: 56px;
}

.shop-content .product-item .product-info h4 {
  font-size: 16px;
  line-height: 28px;
  margin-top: 12px;
  margin-bottom: 12px;
  color: #553500;
  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;
}

.single-product-area,
.message-box {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px 20px;
  height: fit-content;
  min-height: 400px;
}

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

.shop-content .product-item .product-info .product-title {
    font-size: 14px;
    line-height: 22px;
    margin-top: 4px;
    margin-bottom: 4px;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    min-height: 0;
  }

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

.message-box-section {
  position: relative;
}

@media screen and (max-width: 768px) {
  .message-box-section {
    padding: 10px;
  }
}

.message-box {
  padding: 40px 60px;
}

.message-box input {
  margin-bottom: 10px;
}

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

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

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

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

.single-product-info .pro-price {
  font-size: 24px;
  color: #E8380C;
  font-weight: 700 !important;
  padding-bottom: 0;
  margin-bottom: 12px;
  line-height: 43px;
}

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

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

/* ============================================================================
 * 區段 2：.product-cat 側邊欄分類 + .btnLike-box（line 2703-2978）
 * ============================================================================ */

.product-cat ul li {
  list-style: none !important;
  padding: 0;
}

/* .product-cat .product-cat-item 系列為原 kgtwbeef.css line 2703-2741 抽取的舊版
 * 行動 dropdown 樣式（深紅底 #4c2020 / 深棕 #582828 / 白字）。cm12 單檔時靠 source
 * order 被後續 .product-side-menu sidebar 規則覆寫；模組化後 pages/product.css
 * 載入晚於 sidebar.css 反向勝出，導致 .product-side-menu 內的 sub-item span 被
 * 染成白色（DevTools 確認 cm12a #FFFFFF vs cm12 #8A6C3D）。
 *
 * 加 .btn-group-category 前綴 scope 修正：current blade 中 .product-cat <div>
 * 只出現在 .product-side-menu aside 內，從未出現在 .btn-group-category 內，
 * 加前綴後本 cluster 變 no-op；如未來行動 dropdown 改用 .product-cat class，
 * 可移除前綴恢復作用。 */
.btn-group-category .product-cat .product-cat-item a {
  background: #ffffff;
  color: #582828;
  font-weight: 600;
  margin-bottom: 12px;
  border-radius: 8px;
  padding: 10px;
  display: block;
}

.btn-group-category .product-cat .product-cat-item ul {
  padding-left: 16px;
}

.btn-group-category .product-cat .product-cat-item li a {
  background: #4c2020;
  border: 1px solid #582828;
  border-radius: 8px;
}

.btn-group-category .product-cat .product-cat-item .product-cat-item ul li a {
  background: #2e1313;
  border: 1px solid #582828;
  border-radius: 8px;
}

.btn-group-category .product-cat .product-cat-item li span {
  color: #ffffff;
}

.btn-group-category .product-cat .product-cat-item span {
  color: #582828;
  font-weight: 600;
}

.btn-group-category .product-cat .product-cat-item.active {
  background: #582828;
  color: #ffffff;
}

.pagination .page-item {
  width: 35px;
  height: 35px;
  background: #ffffff;
  border: 1px solid #d4d4d4;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -1px;
}

.pagination>.page-item-btn {
  width: fit-content;
  min-width: 100px;
}

.pagination>.page-item-btn>span {
  width: fit-content;
}

.pagination .page-item .page-link:hover {
  background: #91704e;
  color: #ffffff
}

.pagination .page-item.active {
  background: #c3996b;
}

.pagination .page-item .page-link {
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: roboto;
  font-size: 13px;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
}

.pagination .page-item.active .page-link {
  color: #ffffff;
}

@media (max-width: 992px) {
  .pagination>.page-item-btn {
    width: fit-content;
    min-width: fit-content;
  }

  .pagination .page-item .page-link {
    width: 45px;
  }
}

/* ============================================================================
 * 區段 2 補充：購物車/愛心按鈕覆寫 (Quick Add)
 * ============================================================================ */

.shop-content .product-item .card-action-row {
  padding: 0 5px 15px 5px;
  gap: 6px;
}

.shop-content .product-item .card-action-row > .btnLike,
.shop-content .product-item .card-action-row > .btnLike.like {
  border-color: #E8380C;
  color: #E8380C;
  border-radius: 50%;
  transition: all 0.2s ease;
  /* 愛心高度對齊加入購物車鈕(48px)：原 40px 偏小、與加入購物車不等高（issue #622）。 */
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  flex: 0 0 48px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop-content .product-item .card-action-row > .btnLike i {
  font-size: 16px;
  margin: 0;
}

@media (hover: hover) {
  .shop-content .product-item .card-action-row > .btnLike:hover {
    background-color: #E8380C;
    border-color: #E8380C;
    color: #ffffff;
  }
}

.shop-content .product-item .card-action-row > .btnLike:active,
.shop-content .product-item .card-action-row > .btnLike.is-wished,
.shop-content .product-item .card-action-row > .btnLike.like.is-wished {
  background-color: #E8380C;
  border-color: #E8380C;
  color: #ffffff;
}

/* kgtwbeef 加入購物車鈕（cart-action__btn）：沿用主題既有 13px 字級、收緊內距與 icon 間距，
   避免 base 15px／padding 12px／gap 8px 在 iPhone SE 等窄膠囊（愛心補 48px 後按鈕僅 ~96px）溢出（btnKG 已遷移為 cart-action__btn，issue #622） */
.shop-content .product-item .card-cart-action .cart-action__btn,
.shop-content .product-item .card-action-row > .cart-action__btn {
  font-size: 13px;
  padding: 0 8px;
  gap: 4px;
}

/* 手機 2 欄窄卡（膠囊僅 ~96px）：加入購物車鈕改顯示短版「加入」（icon + 加入），桌機仍顯示全文「加入購物車」 */
@media screen and (max-width: 767.98px) {
  .shop-content .product-item .cart-action__btn-label {
    display: none;
  }
  .shop-content .product-item .cart-action__btn-label--min {
    display: inline;
  }
}

.shop-content .product-item .cart-stepper {
  border-radius: 99rem;
  border-color: #E8380C;
  /* 數量器高度對齊加入購物車鈕(48px)：原 40px 偏小（issue #622）。 */
  height: 48px;
  min-height: 48px;
}

.shop-content .product-item .cart-stepper-btn {
  color: #E8380C;
  /* flex-shrink 1：窄卡 ＋／− 等比對稱收縮，避免 overflow 裁掉右側「＋」（同 common 修正） */
  flex: 0 1 32px;
}

.shop-content .product-item .cart-stepper-qty {
  min-width: 32px;
}

@media (hover: hover) {
  .shop-content .product-item .cart-stepper-btn:hover {
    background-color: #E8380C;
    color: #ffffff;
  }
}

/* Modal 內規格按鈕 active 覆寫 — 改用品牌金棕色，提升質感並減輕視覺重量 */
.quick-add-modal .spec-button li a.active {
  background: #B8892E;
  border-color: #B8892E;
  color: #ffffff;
}

/* hover 僅在支援 hover 的裝置生效，避免手機點擊後 sticky hover 殘留 */
@media (hover: hover) {
  .quick-add-modal .spec-button li:hover a {
    background: #B8892E;
    border-color: #B8892E;
    color: #ffffff;
  }
}

/* Modal 內數量增減按鈕 (Stepper) — 覆寫 common 的深黑色 */
.quick-add-modal .quick-add .qtybutton {
  background: #fdfbf6;
  color: #8a6c3d;
  border: 1px solid #efe6d6;
}
@media (hover: hover) {
  .quick-add-modal .quick-add .qtybutton:hover {
    background: #f0e0c8;
    color: #5a4a32;
    border-color: #d8c7a2;
  }
}
.quick-add-modal .quick-add .cart-plus-minus-box {
  border-top: 1px solid #efe6d6;
  border-bottom: 1px solid #efe6d6;
  color: #5a4a32;
}
.quick-add-modal .quick-add .cart-plus-minus-box:focus {
  border-color: #B8892E;
}

/* Modal 底部主要操作按鈕 */
/* 更多內容 (次要按鈕) - 空心金棕色 */
.quick-add-modal .quick-add-actions .quick-add-detail {
  background: #ffffff;
  border-color: #B8892E;
  color: #B8892E;
}
@media (hover: hover) {
  .quick-add-modal .quick-add-actions .quick-add-detail:hover {
    background: #fdfbf6;
    border-color: #A06400;
    color: #A06400;
  }
}

/* ============================================================================
 * 區段 3：.product-item 卡片基底（line 3497-3651）
 * ============================================================================ */

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none;  /* reset common/pages/product.css 從 default 帶入的 border: 1px solid #dddddd，避免商品圖外多一層灰邊（cm12 單檔不載入 common 故無此 border） */
}

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

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

.blog-desc p {
  margin-bottom: 25px;
}

.read-more a {
  color: #E8380C;
  font-size: 16px;
  text-transform: uppercase;
}

/* ============================================================================
 * 區段 4：.product-item .product-img 詳細 + .product-tag（line 3864-3935）
 * ============================================================================ */

.product-item .product-img .product-tag {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 55px;
  height: 55px;
  background: #E8380C;
  color: #ffffff;
  padding: 6px;
  border-radius: 99rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 4 字標籤：文字限 2 字寬 → 2+2 兩行（≤3 字沿用 common 的 nowrap 一行）；卡片與內頁主圖標籤共用 */
.product-item .product-img .product-tag[data-len="4"] .product-tag-text,
.single-product-image-tag[data-len="4"] .product-tag-text {
  white-space: normal;
  width: 2em;
  word-break: break-all;
  line-height: 1.1;
}

.pagination {
  padding: 10px;
}

.pagination>li {
  display: inline-block;
  margin-right: 3px;
}

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

.pagination>li>a {
  border: 1px solid #eee;
  color: #999999;
  display: block;
  font-family: roboto;
  font-size: 13px;
  font-weight: 400;
  height: 30px;
  line-height: 28px;
  text-align: center;
  width: 30px;
}

.pagination>li>a i {
  line-height: 28px;
}

.pagination>li.active a,
.pagination>li:hover a {
  border-color: #ff7f00;
  color: #ff7f00;
}

/* ============================================================================
 * 區段 5：.imgs-zoom-area + .p-c + .reviews-tab（line 4065-4126）
 * ============================================================================ */

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

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

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

.tab-content p {
  font-size: 16px;
  color: #333333;
}

.saparator {
  margin: auto 5px;
}

.color-title {
  color: #575757;
  line-height: 25px;
  margin-bottom: 0;
  text-transform: uppercase;
  width: 70px;
}

/* ============================================================================
 * 區段 6：.cart-plus-minus + .qtybutton 數量按鈕（line 4127-4185）
 * ============================================================================ */

.cart-plus-minus {
  border: 1px solid #cccccc;
  height: 32px;
  text-align: center;
  width: 90px;
  color: #666666;
  border-radius: 3px;
}

.sin-plus-minus p {
  font-size: 16px;
  color: #333333;
}

.qtybutton {
  background: #e6e6e6 none repeat scroll 0 0;
  height: 100%;
  width: 30%;
  line-height: 32px;
  cursor: pointer;
}

.dec.qtybutton {
  float: left;
}

.inc.qtybutton {
  float: right;
}

input.cart-plus-minus-box {
  background: transparent none repeat scroll 0 0;
  box-shadow: none;
  font-family: roboto;
  height: 100%;
  margin-bottom: 0;
  padding: 4px;
  text-align: center;
  width: 40%;
}

/* ============================================================================
 * 區段 7：.spec-button 規格選擇按鈕（line 4747-4791）
 * ============================================================================ */

/* 規格晶片（重新設計，沿用 common 結構，套 kgtwbeef 金棕品牌色） */
.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 #d8c7a2;
  border-radius: 8px;
  background: #ffffff;
  color: #5a4a32;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

@media (hover: hover) {
  .spec-button>li:hover>a {
    background: #faf3e6;
    border-color: #c3996b;
    color: #5a4a32;
  }
}

.spec-button li a.active {
  background-color: #B8892E;
  color: #fff;
  border-color: #B8892E;
  font-weight: 600;
}

/* 規格下拉（選項 >5）：kgtwbeef 金棕色（結構沿用 common） */
.spec-select {
  border-color: #d8c7a2;
  color: #5a4a32;
  accent-color: #B8892E;
}

/* 展開清單選項配色（現代瀏覽器；反白色由上方 accent-color 控制） */
.spec-select option {
  background-color: #ffffff;
  color: #5a4a32;
}

.spec-select:focus-visible {
  outline-color: #B8892E;
}

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

/* 內頁數量 stepper：沿用 common 結構，套 kgtwbeef 金棕（scoped 內頁） */
.single-product-info .cart-plus-minus {
  width: 128px;
  height: 42px;
  border: 1px solid #d8c7a2;
  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: #faf3e6;
  color: #5a4a32;
  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: #B8892E;
    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 #efe6d6;
  border-right: 1px solid #efe6d6;
  background: #ffffff;
  color: #5a4a32;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

/* ============================================================================
 * 區段 8：.swiper / .video-container + .productBigBlock / .productBox 新版卡（line 5424-5571）
 * ============================================================================ */

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.productBlockTitle {
  margin-bottom: 30px;
}

.productBlockTitle h1 {
  font-size: 20px;
  color: #850000;
  font-weight: 600;
}

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

.productBox {
  text-decoration: none;
  display: block;
  margin-bottom: 30px;
  border: 2px solid #ba9b6d;
  background: #ffffff;
  border-radius: 12px;
}

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

.productBox .productImgBox .productTag {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 65px;
  height: 65px;
  background: #E8380C;
  color: #ffffff;
  padding: 10px;
  border-radius: 99rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.productBox .productTitle {
  font-size: 20px;
  line-height: 36px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 12px;
  color: #553500;
  padding: 0 12px;
}

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

.productBox .productContent {
  font-size: 16px;
  color: #553500;
  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;
}

/* 商品清單工具列 — kgtwbeef 主題色（圓角＋金/棕配色，覆寫 common 中性樣式） */
.product-toolbar {
  border-bottom-color: #efe6d6;
}

.product-toolbar-label {
  color: #5a4a32;
}

.product-toolbar-select,
.product-toolbar-search input {
  border-color: #d8c7a2;
  border-radius: 10px;
  color: #5a4a32;
}

.product-toolbar-select:hover,
.product-toolbar-search input:hover {
  border-color: #c3996b;
}

.product-toolbar-select:focus-visible,
.product-toolbar-search input:focus-visible {
  outline-color: #B8892E;
}

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

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

/* 排序／每頁下拉選項：對齊 common 結構，改用 kgtwbeef 工具列一致的金棕色（需 select 套用新式 appearance 才會在原生清單生效） */
/* 排序／每頁 Bootstrap dropdown 選項：kgtwbeef 金棕色 */
.product-toolbar .dropdown-menu .dropdown-item {
  color: #5a4a32;
  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: #5a4a32;
  background-color: #faf3e6;
}

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

/* 手機版搜尋與分類過濾按鈕 — kgtwbeef 主題色 */
.mobile-cat-toolbar-search input,
.mobile-cat-toolbar-filter {
  border-color: #d8c7a2;
  border-radius: 10px;
  color: #5a4a32;
}

.mobile-cat-toolbar-search input:hover,
.mobile-cat-toolbar-filter:hover {
  border-color: #c3996b;
}

.mobile-cat-toolbar-search input:focus-visible {
  outline-color: #B8892E;
}

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

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

.mobile-cat-toolbar-badge {
  background-color: #E8380C;
  color: #ffffff;
}

/* 手機版商品分類側邊抽屜 — kgtwbeef 品牌色 */
.mobile-cat-drawer-header {
  border-bottom-color: #efe6d6;
}

.mobile-cat-drawer-kicker {
  color: #c3996b;
}

.mobile-cat-drawer-title {
  color: #5a4a32;
}

.mobile-cat-drawer-close {
  border-color: #efe6d6;
  color: #8a6c3d;
}

.mobile-cat-drawer-close:hover {
  background-color: #faf3e6;
  color: #B8892E;
  border-color: #c3996b;
}

.mobile-cat-drawer-current {
  background-color: #fdfbf6;
  border-bottom-color: #efe6d6;
}

.mobile-cat-drawer-current-label {
  color: #8a6c3d;
}

.mobile-cat-drawer-current-name {
  background-color: #B8892E;
  color: #ffffff;
}

/* ============================================================================
 * 商品清單卡片購物動作（快速加入 / 收藏狀態）— kgtwbeef 品牌色覆寫
 *   結構（margin / display / 尺寸）沿用 common，僅覆寫品牌色 #E8380C；行為與 common 一致。
 * ============================================================================ */

/* 數量 stepper：品牌色框與 hover */
.cart-stepper {
  border-color: #E8380C;
  border-radius: 99rem;
}

.cart-stepper-btn {
  color: #E8380C;
}

/* hover 僅套用於滑鼠裝置，避免觸控點擊後變色殘留 */
@media (hover: hover) {
  .cart-stepper-btn:hover {
    background-color: #E8380C;
    color: #ffffff;
  }
}

.cart-stepper-qty {
  color: #2c2c2c;
  border-left-color: rgba(232, 56, 12, 0.25);
  border-right-color: rgba(232, 56, 12, 0.25);
}

/* 收藏愛心：已收藏填入品牌色 */
.product-item .btnLike.is-wished {
  background-color: #E8380C;
  border-color: #E8380C;
  color: #ffffff;
}

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

/* 內頁收藏愛心：已收藏填品牌橘底（與清單一致） */
.action-button-box .action-button .btnLike.is-wished {
  background-color: #E8380C;
  border-color: #E8380C;
  color: #ffffff;
}

.action-button-box .action-button .btnLike.is-wished i {
  color: #ffffff;
}