/* ============================================================================
 * 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: 12px;
  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;
  min-height: 48px; */
  line-height: 30px;
  min-height: 60px;
}

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

@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: 24px;
    margin-top: 12px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* font-size: 14px;
    line-height: 24px; */
    min-height: 72px;
  }

  .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: 28px; */
  font-display: swap;
  color: #373737;
  font-weight: 700;
  padding-bottom: 20px;
  margin-bottom: 12px;
  /* line-height: 50px; */
}

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

  /* .single-product-info .main-title {
    font-size: 20px;
    line-height: 32px;
  } */
}

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

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


/* ============================================================================
 * 區段 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;
}


/* ============================================================================
 * 區段 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>li {
  display: inline-block;
  margin-right: 10px;
}

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

.spec-button>li>a {
  background: transparent;
  border: 1px solid #666666;
  border-radius: 10%;
  color: #666666;
  display: block;
  font-size: 13px;
  height: 30px;
  text-align: center;
  padding: 3px 5px;
}

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

.spec-button>li:hover>a {
  background: #131313;
  border-color: #131313;
  color: #fff;
}

.spec-button li a.active {
  background-color: #131313;
  color: #fff;
  border-color: #131313;
}


/* ============================================================================
 * 區段 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;
  }

  .widget-title-more {
    color: #D1AD4B;
    font-weight: 600;
  }
}

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


/* ============================================================================
 * 補充區段：.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;
}

.btnKG:hover {
  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;
}

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

.btnKG-gold:hover {
  background-color: #000000;
  color: #ffffff;
}

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