/* ===== 全站變數（顏色、邊線等） ===== */
:root{
  --crumb-bg:#fff8d5; --brand-red:#d53838; --ink:#111827; --muted:#6b7280;
  --soft:#f3f4f6; --line:#e5e7eb;
}

/* ===== 區塊 1：商品頁主版面（左圖右資訊） ===== */
.cs-wrap{display:grid;gap: 16px;grid-template-columns: 380px 1fr;align-items:start;} 

  /* 左側：海報 + 按鈕 */
.cs-visual{ display:flex; flex-direction:column; gap:15px; margin:20pt 10pt; }    

 /* 海報框與佔位 */    
.cs-poster{ border:1px solid var(--line); border-radius:10px; background:#fafafa; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; color:#9ca3af; font-size:26px; letter-spacing:.2em; } 

/* 按鈕 */
.cs-actions-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } 
.cs-actions-1{ margin-top:2px }                                     

.btn-block{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border-radius:10px; padding:12px 14px; font-weight:800; letter-spacing:.5px; border:0; text-decoration:none; color:#fff; }
.btn-buy{ background:#e34a4a } .btn-cart{ background:#2fb34c } .btn-consult{ background:#4993d6 }
.btn-block:hover{ 
  filter:brightness(.95);  
  color: #FFF !important;
  cursor: pointer; /* 強制手指 */
} 

  /* 標題 */
.cs-title{ margin:4px 0 6px; }            
.cs-price{ margin:4px 0 16px; font-size:18px; color:#111; text-align: right;} 
.cs-price .strike{ color:#9ca3af; text-decoration:line-through; margin:0 14px 0 8px; } 
.cs-price .sale{ color:var(--brand-red); font-weight:900; font-size:22px; }            

 /* 內卡片容器 */
.cs-card{ background:var(--soft); border-radius:16px; padding:16px; border:1px solid #e9eaef; margin-bottom: 4vh; }
.cs-divider{ height:1px; background:#e5e7eb; margin:8px 0; }
.cs-meta{ display:grid; grid-template-columns:40% 1fr; gap:18px 24px; }
.cs-row{ display:grid; grid-template-columns:64px 1fr; gap:8px 14px; align-items:center; padding:4px 0; } 
.cs-row + .cs-row{ border-top:1px dashed #edeef3; }
.cs-row.noline{ border-top:0; }              

  /* 左側小標 右側控制群 */
.info-label{ font-weight:800; color:#4b5563; }      
.info-ctrl{display:flex;align-items:center;gap:8px;flex-wrap: wrap;flex-direction: row;}

  /* 類型麵包屑 */
.cs-crumb{ color:#6b7280; font-size:14px; }         
.cs-crumb b{ color:#374151; }

/* 膠囊群 */
.toggle{display:flex;flex-wrap:wrap;gap: 4px;margin:0;padding:0;border:0;flex-direction: row;} 
.toggle input{ position:absolute; opacity:0; pointer-events:none; } 

.pill-btn{display:inline-flex;align-items:center;justify-content:center;padding:2px 12px;border-radius:50px;font-weight:800;font-size:14px;letter-spacing:.2px;background:#fff;color:#6b7280;border:1px solid #d9dbe3;cursor:pointer;user-select:none;white-space: nowrap;overflow: hidden;transition: background-color .12s ease, color .12s ease, border-color .12s ease;}
.pill-btn:focus-visible{ outline:3px solid rgba(213,56,56,.28); outline-offset:2px; } 
.toggle input:checked + .pill-btn{ background:#e35b5b; color:#fff; border-color:#e35b5b; box-shadow:0 1px 0 rgba(0,0,0,.02); } 
.pill-btn--sm{font-size: 13.7px;width: 6.1rem;}


.subject-wrap{margin-top:6px;}
.subject-grid{list-style: none;margin: 4px;display: grid;grid-template-columns: 1fr 1fr;gap: 9px 13px;padding-left: 1rem;width: 100%;} 
.subj{ display:flex; align-items:center; gap:10px 8px; flex-wrap:wrap; }
.subj-name{font-weight:800;color:#374151;white-space:nowrap;width: 90%;} 


/* 浮動購物車 */
.cart-fab{ position: fixed; top: 25vh; right: 20px; z-index: 1100; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #cbadff; color: #fff; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); } 


.cart-fab .cart-badge{ position:absolute; right:-4px; bottom:-4px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.18); }


/* 頁內麵包屑樣式 */
.exam-breadcrumb { border-radius: 10px; padding: 10px 14px; font-size: 18px; color: #6b7280; } 

/* ===== 桌機/平板細節斷點 ===== */
@media (min-width: 1031px) {
  .cs-title { font-size: clamp(20px, 2vw, 30px); white-space: nowrap; overflow: hidden; } 
}
@media (min-width: 830px) and (max-width: 1031px) { 
  .cs-wrap {grid-template-columns: 27% 1fr;}
  .cs-actions-2 { grid-template-columns: none; }
  .cs-title { line-height: 1.4; margin: 25px 0; }
  .cs-meta { display:grid; grid-template-columns: none; gap: 6px; }
  .subject-grid {grid-template-columns: repeat(2, minmax(0, 1fr));} 
}

/* ===== 手機 ===== */
@media (max-width: 829px) {
  .cs-wrap {grid-template-columns: 1fr;gap: 16px;} 
  .cs-visual { margin: 8px 0 12px; }
  .cs-actions-2 { grid-template-columns: 1fr; }
  .cs-card { background: transparent; border: 0; padding: 0; } 
  .cs-meta { grid-template-columns: 1fr; gap: 10px 0; }
  .cs-row + .cs-row { border-top: 0; }
  .cs-title { white-space: normal; overflow: visible; }

  .subject-grid {grid-template-columns: 1fr;gap: 8px 12px;} 
  .container { padding-left: 2%; padding-right: 2%; }

  .toggle {gap: 8px;}

  .subj{display:flex;align-items:center;gap: 10px;padding:6px 0;flex-wrap:unset;} 
  .subj-name{flex: 0 0 15rem;width: 15rem;white-space: normal;}
  body.js-mobile .subj .toggle{ display:none !important; }     

  .teacher-ctrl{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
  .teacher-ctrl .label-mini{ font-weight:800; font-size:13px; color:#6b7280; }
  .teacher-select-wrap{ position:relative; }
  .teacher-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:1px solid #d9dbe3;background:#fff;border-radius:10px;padding: 8px 21px 8px 7px;min-height: 36px;font-weight:800;font-size: 14px;line-height:1.2;color:#374151;width: 7rem;}

  .teacher-select-wrap::after{ content:"▸"; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:18px; font-weight:900; color:#6b7280; pointer-events:none; line-height:1; } 
  .teacher-select-wrap.open::after, .teacher-select-wrap:focus-within::after{ content:"▾"; }
}
@media (max-width: 600px) {
    .subj-name {
        flex: 0 0 9rem;
        width: 9rem;
        white-space: normal;
    }
}
@media (max-width: 500px) {
    .subj-name{flex: 1 1 auto;width: 10rem;}
  .subject-grid{
    padding-left:0.2rem;
  }
}
/* ===== 手機底 ===== */
.buybar-mobile{ display:none; }
@media (max-width:768px){
  .cs-actions-2, .cs-actions-1{ display:none !important; } /* 手機改底 */
  .buybar-mobile{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:1200;
    background:rgba(255,255,255,.96); border-top:1px solid #e5e7eb;
    box-shadow:0 -6px 16px rgba(0,0,0,.06); backdrop-filter:saturate(180%) blur(8px);
    padding:8px 10px; padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .buybar-mobile .buybar-inner{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; max-width:1200px; margin:0 auto; } 

  .buybar-btn{ display:flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; padding:12px 8px; font-weight:800; letter-spacing:.5px; color:#fff; text-decoration:none; }
  .buybar-btn.btn-buy{ background:#e34a4a; } .buybar-btn.btn-cart{ background:#2fb34c; } .buybar-btn.btn-consult{ background:#4993d6; }
  .buybar-btn:active{ filter:brightness(.95); }
  body{ padding-bottom:88px; }
  .buybar-btn:hover {
  color: #FFF !important;
  cursor: pointer; /* 強制手指 */
  }
}


/* ===== 區塊 2：試看/Q&A（含右側相關課程） ===== */
:root{
  --z2-red: var(--brand-red, #d53838);
  --z2-ink: var(--ink, #111827);
  --z2-muted: var(--muted, #6b7280);
  --z2-soft: var(--soft, #f3f4f6);
  --z2-line: var(--line, #e5e7eb);
}
.z2{ background: #f5f6f8; padding: 22px 0 36px; }
.z2-head, .z2-card{ width: 90%; margin: 0 auto; }
.z2-tabinput{ position:absolute; opacity:0; pointer-events:none; }
.z2-head{ display: flex; gap: 10px; margin-bottom: -6px; }
.z2-tab{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--z2-line); border-bottom: 0; border-radius: 8px 8px 0 0; background: #fff; color: var(--z2-muted); font-weight: 800; cursor: pointer; box-shadow: 0 1px 0 rgba(0,0,0,.02); user-select: none; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } 
.z2-tab:hover{ filter: brightness(.98); }
#z2t-preview:checked ~ .z2-head label[for="z2t-preview"], #z2t-qa:checked ~ .z2-head label[for="z2t-qa"]{ color: var(--z2-ink); background: #fff; box-shadow: inset 0 -3px 0 0 var(--z2-red); } 
.z2-card{ background: #fff; border: 1px solid var(--z2-line); border-radius: 12px; padding: 18px; }
.z2-panel{ display: none; } 
#z2t-preview:checked ~ .z2-card .z2-panel-preview{ display:block; }
#z2t-qa:checked ~ .z2-card .z2-panel-qa{ display:block; }

.z2-grid {display: grid;grid-template-columns: 43vw 1fr;gap: 18px;align-items: start;} 
.z2-title{ margin: 6px 0 10px; font-weight: 800; color: var(--z2-ink); }
.z2-subttl{ margin: 6px 0 12px; font-weight: 800; color: var(--z2-ink); }
.z2-video{ position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: 8px; overflow: hidden; border: 1px solid var(--z2-line); } 
.z2-video iframe{ position: absolute; inset: 0; width: 100%; height: 100%; }

/* 右側相關課程清單（單欄） */
.z2-rel-list{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.z2-rel-item{ padding: 10px 0; }
.z2-rel-item + .z2-rel-item{ border-top: 1px solid var(--z2-line); }

.z2-rel-name{ font-size: 16px; color: var(--z2-muted); text-decoration:none; }
.z2-rel-name:hover{ text-decoration:underline; }

/* 右欄：（科目 | 老師） */
.rel-row{
  display:grid;
  grid-template-columns: clamp(96px, var(--rel-name-w, 200px), 30%) 10px 1fr; 
  align-items:center;
  gap:6px;
}
.rel-name{
  display:inline-block;      /* 量寬 */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;   
}

/* | */
.rel-sep{ text-align:center; color:#9aa3ad; user-select:none; } 

/* 膠囊容器 */
.rel-pills{ 
  display:flex; flex-wrap:wrap; gap:6px; 
  min-width:0;
}
.rel-pill{white-space:nowrap;}


/* 右欄：當前科目高亮 */
.z2-rel-item.is-active{ background:#fff7f7; border-radius:6px; }
.z2-rel-item.is-active .z2-rel-name{ font-weight:800; color:#z2-ink; }

/* Q&A 文字區 */
.z2-more{ display:inline-block; margin-top:10px; font-size:13px; color:#888; }
.z2-qa{ margin: 8px 0; padding-left: 0; list-style: none; }
.z2-qa-item{ padding: 14px 0; border-bottom: 1px solid var(--z2-line); }
.z2-q{ font-weight: 800; color: var(--z2-red); margin-bottom: 8px; }
.z2-a{ color: var(--z2-ink); line-height: 1.7; }

/* 試看區 RWD：寬度與字級微調 */
@media (max-width: 991.98px){
  .z2-head, .z2-card{width: 90%;}
  .z2-grid{ grid-template-columns: 1fr; } /* 上下 */
  .z2-rel-name{ font-size: 14px; }
  .pill-btn--sm{font-size: 13.8px;}
}
@media (max-width: 575.98px){
  .z2-head, .z2-card{ width: 96%; }
  .z2-tab{ padding: 8px 12px; }
}

/* ===== Banner ===== */
.big, .little { display:block; width:100%; height:auto; }

@media (max-width: 768px){
  .big { display:none; }    /* 手機 little */
}
@media (min-width: 769px){
  .little { display:none; } /* 平板/桌機 big */
}

#content-wrapper {
    max-width: 100% !important;
}