/* ===== 商城（Catalog）— 業界電商「排版」，色系跟主題 CSS 變數走 =====
   header / footer 沿用站內原本的；中間：搜尋列＋分類列、左分類欄、右商品格、內頁左圖右購買區＋說明頁籤 */
.catalog-page {
  /* 各版主題的變數命名不同（v05+ 用 accent-main；v01–v04 用 accent-pink/blue；另有 gold/teal 版），逐層 fallback */
  --ct-red: var(--accent-main, var(--accent-pink, var(--accent-gold, var(--accent-teal, #6C63FF))));
  --ct-red-dark: var(--accent-main-dark, var(--accent-blue, var(--accent-second, var(--accent-main, var(--accent-pink, #5A52D5)))));
  --ct-grad: linear-gradient(135deg, var(--ct-red-dark), var(--ct-red));
  --ct-text: var(--text-main, #222);
  --ct-sub: var(--text-sub, #777);
  --ct-line: var(--border-soft, #e5e5e5);
  --ct-card: var(--card-bg, #fff);
  --ct-soft: var(--accent-main-soft, var(--accent-secondary-soft, var(--accent-pink-soft, var(--accent-soft, #F5F4FF))));
  --ct-shadow: var(--shadow-soft, 0 14px 36px rgba(0,0,0,.06));
  --ct-w: 1200px;
}
.catalog-page { color: var(--ct-text); font-size: 14px; line-height: 1.5; }
.catalog-page *, .catalog-page *::before, .catalog-page *::after { box-sizing: border-box; }
.catalog-page a { color: inherit; text-decoration: none; }
.catalog-page button { font-family: inherit; }
.ct-wrap { max-width: var(--ct-w); margin: 0 auto; padding: 0 16px; }

/* ---- 搜尋列（在原本 header 之下） ---- */
.ct-topbar { background: var(--ct-card); border-bottom: 1px solid var(--ct-line); }
.ct-topbar-inner { display: flex; align-items: center; gap: 24px; height: 64px; }
.ct-logo { font-size: 18px; font-weight: 800; color: var(--ct-red); white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.ct-search { flex: 1; display: flex; max-width: 640px; border: 2px solid var(--ct-red); border-radius: 999px; overflow: hidden; background: #fff; }
.ct-search input { flex: 1; border: 0; outline: 0; padding: 0 14px; height: 38px; font-size: 14px; }
.ct-search button { border: 0; background: var(--ct-grad); color: #fff; padding: 0 22px; font-size: 14px; font-weight: 700; cursor: pointer; }
.ct-search button:hover { filter: brightness(1.05); }
.ct-topnav { display: none; }
.ct-topnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
.ct-topnav a:hover { color: var(--ct-red); }
.ct-topnav .ico { font-size: 20px; line-height: 1; color: var(--ct-text); }
.ct-badge { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--ct-red); color: #fff; font-size: 11px; line-height: 18px; text-align: center; padding: 0 5px; }
.ct-catbar { background: var(--ct-card); border-bottom: 1px solid var(--ct-line); }
.ct-catbar-inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.ct-catbar-inner::-webkit-scrollbar { display: none; }
.ct-catbar-inner a, .ct-catbar-inner button { border: 0; background: none; padding: 10px 14px; font-size: 14px; white-space: nowrap; cursor: pointer; color: var(--ct-text); }
.ct-catbar-inner a.on, .ct-catbar-inner button.on, .ct-catbar-inner a:hover, .ct-catbar-inner button:hover { color: var(--ct-red); font-weight: 700; }

/* ---- 麵包屑 ---- */
.ct-crumb { font-size: 12px; color: var(--ct-sub); padding: 12px 0; }
.ct-crumb a:hover { color: var(--ct-red); }
.ct-crumb span { margin: 0 6px; }

/* ---- 列表版面 ---- */
.ct-main { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding-bottom: 32px; }
.ct-side { }
.ct-box { border-radius: 12px; overflow: hidden; background: var(--ct-card); border: 1px solid var(--ct-line); margin-bottom: 12px; }
.ct-box-h { background: var(--ct-grad); color: #fff; font-weight: 700; padding: 9px 12px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.ct-box-h a, .ct-box-h button { color: #fff; font-size: 12px; font-weight: 400; background: none; border: 0; cursor: pointer; opacity: .9; }
.ct-box-b { padding: 6px 0; }
.ct-cat { list-style: none; margin: 0; padding: 0; }
.ct-cat li { margin: 0; }
.ct-cat button { display: flex; width: 100%; justify-content: space-between; align-items: center; background: none; border: 0; padding: 7px 12px; font-size: 13px; color: var(--ct-text); cursor: pointer; text-align: left; }
.ct-cat button:hover { color: var(--ct-red); background: var(--ct-soft); }
.ct-cat button.active { color: var(--ct-red); font-weight: 700; background: var(--ct-soft); border-left: 3px solid var(--ct-red); padding-left: 9px; }
.ct-cat button .cnt { font-size: 11px; color: #aaa; }
.ct-cat ul { list-style: none; margin: 0; padding-left: 12px; }
/* 抽屜頭/底/遮罩：桌機不顯示（僅行動版抽屜用） */
.ct-side-head, .ct-side-apply, .ct-side-backdrop { display: none; }
/* 可折疊分類樹：箭頭 + 名稱分開（點箭頭展開子層、點名稱選分類） */
.ct-cat-row { display: flex; align-items: center; }
.ct-cat .ct-cat-caret { width: 26px; flex: 0 0 26px; padding: 7px 0; text-align: center; color: #aaa; font-size: 12px; background: none; border: 0; cursor: pointer; transition: transform .15s; }
.ct-cat .ct-cat-caret.open { transform: rotate(90deg); }
.ct-cat-caret-ph { width: 26px; flex: 0 0 26px; }
.ct-cat .ct-cat-name { flex: 1; }
.ct-subcat[hidden] { display: none; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 10px; }
.ct-chip { border: 1px solid var(--ct-line); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--ct-text); }
.ct-chip:hover { border-color: var(--ct-red); color: var(--ct-red); }
.ct-chip.active { background: var(--ct-grad); border-color: transparent; color: #fff; }

.ct-toolbar { border-radius: 12px; overflow: hidden; background: var(--ct-card); border: 1px solid var(--ct-line); padding: 8px 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
.ct-toolbar .lbl { color: var(--ct-sub); }
.ct-sortbtn { border: 1px solid var(--ct-line); background: #fff; border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 13px; }
.ct-sortbtn.on { background: var(--ct-grad); border-color: transparent; color: #fff; }
.ct-toolbar .ct-summary { margin-left: auto; color: var(--ct-sub); font-size: 12px; }
.ct-active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; font-size: 12px; }
.ct-active .ct-chip { background: #fff; }
.ct-side-toggle { display: none; }

.ct-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ct-card { border-radius: 12px; overflow: hidden; background: var(--ct-card); border: 1px solid var(--ct-line); display: flex; flex-direction: column; transition: box-shadow .15s; }
.ct-card:hover { box-shadow: var(--ct-shadow); transform: translateY(-2px); }
.ct-card-img { aspect-ratio: 1 / 1; background: #fafafa; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 12px; position: relative; overflow: hidden; }
.ct-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ct-card-img .ct-oos { position: absolute; inset: 0; background: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; }
.ct-card-img .ct-oos span { background: rgba(0,0,0,.6); color: #fff; border-radius: 50%; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.ct-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ct-card-title { font-size: 13px; line-height: 1.4; height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ct-text); }
.ct-card-price { margin-top: auto; color: var(--ct-red); font-weight: 700; font-size: 18px; }
.ct-card-price small { font-size: 12px; margin-right: 1px; }
/* 載入骨架屏（條狀閃動）：取代「載入中…」文字 */
.ct-skel { position: relative; overflow: hidden; background: #ececf1; border-radius: 6px; }
.ct-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: ctShimmer 1.2s infinite; }
@keyframes ctShimmer { 100% { transform: translateX(100%); } }
.ct-skel-card { border-radius: 12px; overflow: hidden; background: var(--ct-card); border: 1px solid var(--ct-line); }
.ct-skel-card .ct-skel-img { aspect-ratio: 1/1; border-radius: 0; }
.ct-skel-card .ct-skel-body { padding: 10px; }
.ct-skel-card .ct-skel-line { height: 12px; margin-bottom: 8px; }

/* 促銷：促銷價(正紅、放大) + 原價(灰刪除線) + 左上正紅緞帶標（不吃品牌色，永遠搶眼） */
.ct-price-promo { color: #e4393c; font-weight: 800; font-size: 20px; }
.ct-price-orig { color: #9ca3af; font-weight: 500; font-size: 13px; text-decoration: line-through; margin-left: 6px; }
/* 促銷折角斜標籤（左上角 45° 斜帶，黃底紅字＝特價貼紙高對比配色，顯眼又保留紅字）；
   容器 .ct-card-img 已 overflow:hidden 會把斜帶裁成折角 */
.ct-card-img .ct-promo-ribbon { position: absolute; top: 13px; left: -36px; width: 130px; z-index: 3; transform: rotate(-45deg); background: #ffd400; color: #d4141a; text-align: center; padding: 3px 0; box-shadow: 0 2px 6px rgba(0,0,0,.28); border-top: 1px solid rgba(180,20,20,.35); border-bottom: 1px solid rgba(180,20,20,.35); }
.ct-card-img .ct-promo-ribbon span { font-size: 11px; font-weight: 900; letter-spacing: 2px; white-space: nowrap; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
/* 折角兩端的深紅折痕三角，強化「包著禮盒」的立體感 */
.ct-card-img .ct-promo-ribbon::before, .ct-card-img .ct-promo-ribbon::after { content: ''; position: absolute; top: 100%; border-style: solid; border-color: #9e0f14 transparent transparent transparent; }
.ct-card-img .ct-promo-ribbon::before { left: 30px; border-width: 4px 4px 0 0; }
.ct-card-img .ct-promo-ribbon::after { right: 30px; border-width: 4px 0 0 4px; }
.ct-card-ref { font-size: 11px; color: var(--ct-sub); font-weight: 400; }

/* 內頁促銷中橫幅（正紅搶眼，與卡片緞帶同色系） */
.ct-promo-banner { display: inline-flex; align-items: center; gap: 6px; background: #e4393c; color: #fff; font-weight: 800; font-size: 14px; padding: 6px 14px; border-radius: 999px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(228,57,60,.35); }
.ct-promo-banner i { font-size: 15px; }
/* 內頁促銷價放大顯示（搭 ct-price-promo 正紅） */
.ct-pricebox .price .ct-price-promo { font-size: 26px; }
.ct-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ct-card-tags span { font-size: 11px; color: var(--ct-red); border: 1px solid var(--ct-red); border-radius: 2px; padding: 0 4px; line-height: 16px; }
.ct-card-cat { font-size: 11px; color: var(--ct-sub); }
.ct-empty { grid-column: 1 / -1; background: var(--ct-card); border: 1px solid var(--ct-line); padding: 48px 16px; text-align: center; color: var(--ct-sub); }

.ct-pager { display: flex; justify-content: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.ct-pager button { border: 1px solid var(--ct-line); background: var(--ct-card); min-width: 34px; height: 34px; padding: 0 10px; cursor: pointer; font-size: 13px; }
.ct-pager button.on { background: var(--ct-grad); border-color: transparent; color: #fff; }
.ct-pager button:disabled { color: #bbb; cursor: default; }

/* ---- 內頁 ---- */
.ct-detail-top { border-radius: 22px; overflow: hidden; background: var(--ct-card); border: 0; box-shadow: var(--ct-shadow); padding: 20px; display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 28px; }
.ct-gallery-main { aspect-ratio: 1 / 1; border: 1px solid var(--ct-line); background: #fafafa; display: flex; align-items: center; justify-content: center; color: #bbb; overflow: hidden; }
.ct-gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ct-gallery-thumbs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; }
.ct-gallery-thumbs img { width: 60px; height: 60px; object-fit: cover; border: 2px solid transparent; cursor: pointer; background: #fafafa; }
.ct-gallery-thumbs img.on { border-color: var(--ct-red); }
.ct-info h1 { font-size: 18px; font-weight: 600; margin: 0 0 8px; line-height: 1.5; }
.ct-info .ct-meta { font-size: 12px; color: var(--ct-sub); display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.ct-pricebox { background: var(--ct-soft); padding: 14px 16px; margin-bottom: 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ct-pricebox .lbl { color: var(--ct-sub); font-size: 13px; }
.ct-pricebox .price { color: var(--ct-red); font-size: 28px; font-weight: 800; }
.ct-pricebox .price small { font-size: 16px; }
.ct-pricebox .ref { color: var(--ct-sub); font-size: 12px; }
.ct-row { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
.ct-row .lbl { width: 64px; flex-shrink: 0; color: var(--ct-sub); font-size: 13px; padding-top: 6px; }
.ct-variants { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-variant { border: 1px solid var(--ct-line); background: #fff; padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.ct-variant img { width: 22px; height: 22px; object-fit: cover; border-radius: 2px; }
.ct-variant:hover { border-color: var(--ct-red); }
.ct-variant.on { border-color: var(--ct-red); color: var(--ct-red); box-shadow: inset 0 0 0 1px var(--ct-red); }
.ct-variant.oos { color: #bbb; border-style: dashed; cursor: not-allowed; text-decoration: line-through; }
.ct-qty { display: inline-flex; border: 1px solid var(--ct-line); border-radius: 999px; overflow: hidden; }
.ct-qty button { width: 34px; height: 34px; border: 0; background: #f7f7f7; cursor: pointer; font-size: 16px; }
.ct-qty input { width: 56px; height: 34px; border: 0; border-left: 1px solid var(--ct-line); border-right: 1px solid var(--ct-line); text-align: center; font-size: 14px; outline: 0; }
.ct-qty-hint { font-size: 12px; color: var(--ct-sub); margin-left: 10px; align-self: center; }
.ct-actions { display: flex; gap: 12px; margin: 20px 0 14px; }
.ct-btn { height: 44px; padding: 0 32px; border-radius: 999px; font-size: 15px; font-weight: 700; cursor: pointer; border: 2px solid var(--ct-red); }
.ct-btn-outline { background: #fff; color: var(--ct-red); }
.ct-btn-outline:hover { background: var(--ct-soft); }
.ct-btn-fill { background: var(--ct-grad); color: #fff; border-color: transparent; }
.ct-btn-fill:hover { filter: brightness(1.05); }
.ct-btn:disabled { opacity: .5; cursor: not-allowed; }
.ct-note { font-size: 12px; color: var(--ct-sub); }
.ct-tagline { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-tagline span { font-size: 12px; color: var(--ct-red); border: 1px solid var(--ct-red); border-radius: 2px; padding: 1px 6px; }

.ct-tabs { border-radius: 12px; overflow: hidden; margin-top: 16px; background: var(--ct-card); border: 1px solid var(--ct-line); }
.ct-tabs-h { display: flex; border-bottom: 1px solid var(--ct-line); }
.ct-tabs-h button { border: 0; background: none; padding: 12px 22px; font-size: 14px; cursor: pointer; color: var(--ct-text); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ct-tabs-h button.on { color: var(--ct-red); border-bottom-color: var(--ct-red); font-weight: 700; }
.ct-tabs-b { padding: 20px; }
.ct-tabs-b [data-tab] { display: none; }
.ct-tabs-b [data-tab].on { display: block; }
.ct-desc { white-space: pre-line; font-size: 14px; line-height: 1.8; }
.ct-desc-imgs img { max-width: 100%; display: block; margin: 0 auto 8px; }
.ct-notes dl { display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px; margin: 0; font-size: 13px; }
.ct-notes dt { color: var(--ct-sub); }
.ct-notes dd { margin: 0; }

@media (max-width: 900px) {
  .ct-topbar-inner { height: auto; padding: 10px 0; flex-wrap: wrap; gap: 10px; }
  .ct-logo { display: none; }
  .ct-search { flex-basis: 100%; max-width: none; }
  .ct-main { grid-template-columns: 1fr; }
  /* 篩選改滑出式抽屜（右側）：覆蓋在內容上、自己滾動、X/背景/選分類即關 */
  .ct-side {
    display: block; position: fixed; top: 0; right: 0; bottom: 0; z-index: 1050;
    width: 86%; max-width: 340px; background: var(--ct-bg, #fff);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(100%); transition: transform .25s ease;
    box-shadow: -6px 0 24px rgba(0,0,0,.18); padding: 0 12px 24px;
  }
  .ct-side.open { transform: translateX(0); }
  .ct-side-head {
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 2; background: var(--ct-bg, #fff);
    padding: 14px 2px 12px; border-bottom: 1px solid var(--ct-line); font-weight: 700; font-size: 16px;
  }
  .ct-side-head button { background: none; border: 0; font-size: 20px; color: var(--ct-text); cursor: pointer; line-height: 1; padding: 4px 8px; }
  .ct-side-apply { position: sticky; bottom: 0; background: var(--ct-bg, #fff); padding: 10px 0 2px; margin-top: 8px; border-top: 1px solid var(--ct-line); }
  .ct-side-apply button { width: 100%; padding: 12px; border: 0; border-radius: 10px; background: var(--ct-red); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
  .ct-side-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1040; }
  .ct-side-toggle { display: inline-block; }
  .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ct-detail-top { grid-template-columns: 1fr; padding: 12px; gap: 16px; }
  .ct-actions { position: sticky; bottom: 0; background: #fff; padding: 10px 0; margin: 12px -12px 0; padding-left: 12px; padding-right: 12px; border-top: 1px solid var(--ct-line); }
  .ct-actions .ct-btn { flex: 1; padding: 0; }
}

/* ---- 無圖佔位（列表卡 / 內頁主圖 / 縮圖 / 規格 chip 共用；破圖由 JS onerror 換成這個） ---- */
.ct-noimg { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #b8b8c4; background: linear-gradient(135deg, var(--ct-soft), #fafafa); font-size: 12px; }
.ct-noimg svg { width: 34%; max-width: 64px; height: auto; opacity: .7; }
.ct-noimg.sm { gap: 2px; font-size: 9px; }
.ct-noimg.sm svg { width: 45%; }
.ct-gallery-thumbs .ct-noimg { width: 60px; height: 60px; border: 2px solid transparent; }
.ct-variant .ct-noimg { width: 22px; height: 22px; border-radius: 2px; }
.ct-variant .ct-noimg svg { width: 60%; }
.ct-card-img .ct-lowstock { position: absolute; right: 8px; top: 8px; background: var(--ct-grad); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ct-variant .ct-variant-left { font-size: 10px; color: var(--ct-red); margin-left: 2px; }