/* 卡258-2 商品頁（products/detail.php）：第一屏看到品名價格（電腦連加入購物車鈕）、按鈕點擊區放大、主圖框固定容忍任何比例的圖
   只在 products/detail.php 載入；選擇器全部限定 body.c258-prod（同檔 <body> 加的 class）
   斷點跟 styles.css 一致：≤669 手機、670–1199 平板（站本身也是手機排版）、≥1200 電腦
   不改 DOM、不改 class／id、不動 JS；排序只用 flex order
   回退：還原 products/detail.php 備份、刪本檔 */

/* ===== 全部寬度 ===== */

/* 主圖框：固定大小、白底，圖等比放進框內（不裁切、不變形；點規格換圖也是同一個框） */
body.c258-prod .product-detail #show-box {
  position: relative;
  width: 100%;
  height: 300px;
  background: #fff;
  overflow: hidden;
}
body.c258-prod .product-detail #show-box img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  box-sizing: border-box;
}
/* 縮圖只有 1 張（就是主圖本身）時不顯示；2 張以上照常（不支援 :has 的瀏覽器維持原樣） */
body.c258-prod .product-detail .thumbnail:has(li:only-child) {
  display: none;
}

/* 品名、價格 */
body.c258-prod .product-detail .product-info .title h1 {
  display: block;
  font-size: 24px;
  line-height: 1.3;
}
body.c258-prod .product-detail .product-info #prod-price {
  font-size: 22px;
}

/* 規格鈕、容量鈕：點擊區 ≥44、鈕間距 8 */
body.c258-prod .product-detail .product-info .specs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  vertical-align: middle;
  max-width: calc(100% - 70px);
  margin-bottom: -8px;
}
body.c258-prod .product-detail .product-info a.spec.s1,
body.c258-prod .product-detail .product-info a.spec.s2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  margin: 0 8px 8px 0;
  box-sizing: border-box;
  vertical-align: middle;
}

/* 數量 －／＋ 44×44、輸入框高 44 */
body.c258-prod .product-detail .product-info .count {
  display: inline-flex;
  align-items: stretch;
  width: auto;
  height: 44px;
  vertical-align: middle;
}
body.c258-prod .product-detail .product-info .count .less,
body.c258-prod .product-detail .product-info .count .more {
  position: static;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  line-height: 42px;
  padding: 0;
  text-align: center;
  font-size: 20px;
  border: 1px #ccc solid;
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
body.c258-prod .product-detail .product-info .count .count-content {
  width: 64px;
  height: 44px;
  padding: 0;
  margin: 0 -1px;
  text-align: center;
  font-size: 16px;
  box-sizing: border-box;
}

/* 頁中「我的追蹤清單」「加入購物車」高 44 */
body.c258-prod .product-detail .cart-btn #track,
body.c258-prod .product-detail .cart-btn #buybtn,
body.c258-prod .product-detail .cart-btn .shopbtn > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  box-sizing: border-box;
  vertical-align: middle;
}

/* 頁籤「產品介紹／購物流程」高 44 */
body.c258-prod .product-detail .cus-tab .tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 8px;
  box-sizing: border-box;
}

/* 介紹文（後台內容）：圖片等比、表格可左右滑、嵌入影片不超寬（內容不動） */
body.c258-prod .product-detail .tabs-content img {
  max-width: 100% !important;
  height: auto !important;
}
body.c258-prod .product-detail .tabs-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.c258-prod .product-detail .tabs-content iframe,
body.c258-prod .product-detail .tabs-content video {
  max-width: 100%;
}

/* 推薦商品／加購商品：圖框 1:1 白底、同列等高、品名最多兩行 */
body.c258-prod .product-detail .purchase .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
body.c258-prod .product-detail .purchase .row::before,
body.c258-prod .product-detail .purchase .row::after {
  content: none;
  display: none;
}
body.c258-prod .product-detail .purchase .row > .col,
body.c258-prod .product-detail .purchase .row > .col:nth-child(2n) {
  float: none;
  width: auto;
  margin: 0;
  display: flex;
}
body.c258-prod .product-detail .purchase .row > .col > a {
  display: flex;
  flex-direction: column;
  width: 100%;
}
body.c258-prod .product-detail .purchase .row > .col > a > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}
body.c258-prod .product-detail .purchase .row > .col > a > h2,
body.c258-prod .product-detail .purchase .row > .col > a > h3 {
  padding: 0;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.4;
  height: 2.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body.c258-prod .product-detail .purchase .row > .col > a > .price {
  margin-top: auto;
}

/* ===== 手機＋平板（≤1199，站本身是手機排版） ===== */
@media only screen and (max-width: 1199px) {
  /* 分類橫幅：照片不顯示，只留分類名標籤一條（麵包屑 HTML 與 schema 標記都在，外觀照原樣） */
  body.c258-prod .page-banner > img { display: none; }
  body.c258-prod .page-banner .text {
    position: static;
    padding: 6px 0;
  }
  body.c258-prod .container.page .column2 { margin-top: 0; padding-top: 0; }
  body.c258-prod .product-detail { padding-top: 12px; }

  /* 品名 → 售價 → 其他資訊 → 按鈕（只調顯示順序） */
  body.c258-prod .product-detail .product-info {
    display: flex;
    flex-direction: column;
    padding: 12px 0 0;
  }
  body.c258-prod .product-detail .product-info > .title { order: 1; padding-bottom: 4px; }
  body.c258-prod .product-detail .product-info > .spec {
    order: 2;
    display: flex;
    flex-direction: column;
    padding: 0 0 10px;
  }
  body.c258-prod .product-detail .product-info > .spec > div:has(> #prod-price) { order: -1; padding-bottom: 8px; }
  body.c258-prod .product-detail .product-info > .cart-btn { order: 3; padding: 16px 0; }
  body.c258-prod .product-detail .product-info > .fb-like { order: 4; }
}

/* 窄手機（≤669）：底部固定購物列兩顆高 44；頁面底部留白不被購物列蓋住 */
@media only screen and (max-width: 669px) {
  body.c258-prod { padding-bottom: 64px; }
  body.c258-prod #mobile-cart-btn .row .col a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0;
    box-sizing: border-box;
  }
}

/* 平板（670–1199）：主圖框高 360、推薦商品 3 欄 */
@media only screen and (min-width: 670px) and (max-width: 1199px) {
  body.c258-prod .product-detail #show-box { height: 360px; }
  body.c258-prod .product-detail .purchase .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 平板原本麵包屑是白字疊在分類照片上；照片不顯示後改深灰字、放在分類名下面一行（內容與 schema 標記不動） */
  body.c258-prod .page-banner .bread-crumbs {
    position: static;
    padding: 2px 10px 4px;
    text-align: center;
    color: #666;
  }
  body.c258-prod .page-banner .bread-crumbs a { color: #666; }
}

/* ===== 電腦（≥1200） ===== */
@media only screen and (min-width: 1200px) {
  /* 分類橫幅高度上限 160，置中裁切；分類名標籤與麵包屑照原樣疊在下緣 */
  body.c258-prod .page-banner > img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    object-position: center;
  }
  body.c258-prod .container.page { padding-top: 24px; }

  /* 主圖框：寬照原本（約 449）、正方形 */
  body.c258-prod .product-detail #show-box {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  body.c258-prod .product-detail .product-info .title { padding-bottom: 10px; }
  body.c258-prod .product-detail .product-info .title h1 { font-size: 28px; }
  body.c258-prod .product-detail .product-info > .spec { padding: 6px 0; }
  body.c258-prod .product-detail .product-info > .spec > div { padding: 6px 0; }

  /* 規格／數量鈕高 ≥36 */
  body.c258-prod .product-detail .product-info a.spec.s1,
  body.c258-prod .product-detail .product-info a.spec.s2 { min-height: 36px; min-width: 44px; }
  body.c258-prod .product-detail .product-info .count { height: 36px; }
  body.c258-prod .product-detail .product-info .count .less,
  body.c258-prod .product-detail .product-info .count .more {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    line-height: 34px;
  }
  body.c258-prod .product-detail .product-info .count .count-content { height: 36px; }
  body.c258-prod .product-detail .product-info > .cart-btn { padding: 16px 0; }

  body.c258-prod .product-detail .purchase .row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}