/* ============================================================
   Hua．Ye × 學院 — 元件樣式
   頁首 / 頁尾 / 按鈕 / 玻璃卡片 / 商品格子 / 首頁大圖 / 施工中區塊
   ============================================================ */

/* ---------- 頁首 ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  height:var(--header-h);
  background:rgba(251,246,236,.82);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
}
.brand{ display:flex; align-items:baseline; gap:var(--sp-2); font-family:var(--font-en); color:var(--ink); }
.brand:hover{ color:var(--ink); }
.brand__mark{ font-size:var(--fs-lg); font-weight:600; letter-spacing:.02em; }
.brand__sub{ font-size:var(--fs-sm); color:var(--ink-soft); letter-spacing:.08em; }

.site-nav{ display:flex; align-items:center; gap:var(--sp-2); }
.site-nav a{
  color:var(--ink); font-size:var(--fs-sm);
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-full);
  transition:background var(--dur) var(--ease);
}
.site-nav a:hover{ background:var(--glass); }
.site-nav a[aria-current="page"]{ background:var(--cream-deep); font-weight:600; }
/* 「後台」入口 —— 只有管理員看得到(auth-ui.js 加上去的)。
   給一點外框做視覺區別,免得和一般選單混成一片。 */
.site-nav__admin{ border:1px solid var(--glass-border); background:var(--glass); font-weight:600; }

.nav-toggle{
  display:none; background:none; border:0; cursor:pointer;
  font-size:var(--fs-xl); color:var(--ink); padding:var(--sp-2);
}

@media (max-width:768px){
  .nav-toggle{ display:block; }
  .site-nav{
    position:absolute; top:var(--header-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(251,246,236,.97);
    backdrop-filter:var(--glass-blur);
    border-bottom:1px solid var(--line);
    box-shadow:var(--sh-md);
    padding:var(--sp-2);
  }
  .site-nav[hidden]{ display:none; }
  .site-nav a{ padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); }
}

/* ---------- 頁尾 ---------- */
.site-footer{
  flex-shrink:0;
  background:var(--ink); color:var(--cream);
  padding-block:var(--sp-7) var(--sp-5);
  font-size:var(--fs-sm); line-height:1.9;
}
.site-footer a{ color:var(--cream-deep); }
.site-footer a:hover{ color:#fff; }
.site-footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--sp-6);
}
.site-footer__title{
  font-family:var(--font-en); font-size:var(--fs-base); font-weight:600;
  margin-bottom:var(--sp-3); color:#fff;
}
.site-footer__list{ list-style:none; padding:0; }
.site-footer__list li{ margin-bottom:var(--sp-1); }
.site-footer__legal{
  margin-top:var(--sp-6); padding-top:var(--sp-4);
  border-top:1px solid rgba(251,246,236,.18);
  color:rgba(251,246,236,.65); font-size:var(--fs-xs);
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); justify-content:space-between;
}
@media (max-width:768px){
  .site-footer__grid{ grid-template-columns:1fr; gap:var(--sp-5); }
}

/* ---------- 按鈕 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font-zh); font-size:var(--fs-base); font-weight:600;
  padding:var(--sp-3) var(--sp-6);
  border:1px solid transparent; border-radius:var(--r-full);
  cursor:pointer; text-align:center;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn--primary{ background:var(--coral); color:var(--ink); box-shadow:var(--sh-sm); }
.btn--primary:hover{ background:var(--coral-deep); color:var(--ink); box-shadow:var(--sh-md); }
.btn--ghost{ background:var(--glass); color:var(--ink); border-color:var(--glass-border); }
.btn--ghost:hover{ background:var(--glass-strong); color:var(--ink); }
.btn--lg{ font-size:var(--fs-lg); padding:var(--sp-4) var(--sp-7); }
.btn--block{ width:100%; }
/* 停用的按鈕一定要「看起來」也是停用的。
   ⚠️ 這一條原本漏了 —— 按鈕確實按不下去,但畫面上跟能按的長得一模一樣,
      經營者只會覺得「這顆按了沒反應」。
      按不按得下去是程式的事,看不看得出來是使用者的事,兩件都要做。 */
.btn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }
.btn:disabled:hover{ background:var(--glass); box-shadow:none; }
.btn--primary:disabled:hover{ background:var(--coral); }

/* ---------- 玻璃卡片 ---------- */
.card{
  background:var(--glass);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  padding:var(--sp-5);
}

/* ---------- 首頁大圖區 ---------- */
.hero{ padding-block:var(--sp-9) var(--sp-8); text-align:center; }
.hero__eyebrow{
  display:inline-block; font-size:var(--fs-xs); letter-spacing:.18em;
  color:var(--ink-soft); text-transform:uppercase; margin-bottom:var(--sp-4);
}
.hero__title{ font-size:var(--fs-4xl); margin-bottom:var(--sp-4); }
/* 副標:比主標小、比說明文字重一點,做出「主標 → 副標 → 說明」三層 */
.hero__sub{
  font-size:var(--fs-xl); font-weight:500; color:var(--ink);
  max-width:30em; margin:0 auto var(--sp-4); line-height:1.6;
}
.hero__lead{ font-size:var(--fs-lg); color:var(--ink-soft); max-width:34em; margin:0 auto var(--sp-6); }
.hero__actions{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; }
@media (max-width:640px){
  .hero{ padding-block:var(--sp-7) var(--sp-6); }
  .hero__title{ font-size:var(--fs-2xl); }
  .hero__sub{ font-size:var(--fs-lg); }
}
/* 只在手機換行的斷點。電腦上一行放得下,不必硬斷 */
.only-mobile{ display:none; }
@media (max-width:640px){ .only-mobile{ display:inline; } }

/* ---------- 首頁行銷橫幅輪播(批次 2-9) ----------
   批次 0 那個虛線的「版位示範」已經移除,現在是真的讀資料庫的輪播。 */
.carousel{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-md);
}
/* 橫向捲動 + scroll-snap:手機上直接用手指滑就會一張一張停,
   不必自己寫拖曳的程式,而且慣性、回彈都是瀏覽器原生的手感 */
.carousel__track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;              /* 捲軸藏起來,操作靠圓點與箭頭 */
}
.carousel__track::-webkit-scrollbar{ display:none; }

.carousel__slide{ flex:0 0 100%; scroll-snap-align:start; display:block; }

/* ⚠️ 先用 aspect-ratio 把版位的高度佔住,圖載進來時版面才不會突然跳一下
   —— 客戶正要點按鈕時整頁位移,是最容易點錯的情況 */
.carousel__img{
  width:100%; aspect-ratio:8/3; object-fit:cover; display:block;
  background:var(--cream-deep);
}
@media (max-width:640px){
  /* 有另外做手機版圖(1:1)時才換比例;沒做就沿用電腦版那張的 8:3(D-52) */
  .carousel__img--dual{ aspect-ratio:1/1; }
}

.carousel__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:var(--r-full);
  border:1px solid var(--glass-border);
  background:var(--glass-strong);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  color:var(--ink); font-size:24px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  transition:background var(--dur) var(--ease);
}
.carousel__arrow:hover{ background:#fff; }
.carousel__arrow--prev{ left:var(--sp-3); }
.carousel__arrow--next{ right:var(--sp-3); }
/* 手機上不顯示箭頭 —— 手指滑就好,箭頭只會擋住圖 */
@media (max-width:640px){ .carousel__arrow{ display:none; } }

.carousel__dots{ display:flex; justify-content:center; gap:var(--sp-1); margin-top:var(--sp-3); }
/* 按鈕本身做到 24px,手指才點得準;看得到的圓點只有 10px */
.carousel__dot{
  width:24px; height:24px; padding:0; border:0; background:none;
  cursor:pointer; display:grid; place-items:center;
}
.carousel__dot::before{
  content:''; width:10px; height:10px; border-radius:var(--r-full);
  border:1px solid var(--coral-deep); background:transparent;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* 選中的圓點不只換顏色,也放大 —— 只靠顏色區分,色盲客戶分不出來(同 D-53) */
.carousel__dot.is-on::before{ background:var(--coral-deep); transform:scale(1.3); }

/* ---------- 商品格子 ---------- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-5); flex-wrap:wrap; }
.section-head__title{ font-size:var(--fs-2xl); }

.product-grid{
  display:grid; gap:var(--sp-5);
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
}
.product-card{
  display:flex; flex-direction:column;
  background:var(--glass-strong);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-sm);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.product-card__cover{
  aspect-ratio:4/3; background:linear-gradient(140deg,var(--cream-deep),var(--sky));
  display:grid; place-items:center; color:var(--ink-soft); font-size:var(--fs-sm);
}
.product-card__body{ padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); flex:1; }
.product-card__title{ font-size:var(--fs-lg); font-weight:600; color:var(--ink); line-height:1.45; }
/* 簡介限兩行。經營者可能寫很長,不限行的話一排卡片會高矮不一 */
.product-card__meta{
  font-size:var(--fs-xs); color:var(--ink-soft);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-card__price{ margin-top:auto; display:flex; align-items:baseline; gap:var(--sp-2); }
.price{ font-family:var(--font-en); font-size:var(--fs-xl); font-weight:600; color:var(--coral-deep); }
.price--original{ font-size:var(--fs-sm); color:var(--ink-soft); text-decoration:line-through; font-weight:400; }

/* 商品卡片現在整張都是連結(手機上比較好按),要蓋掉 a 的預設樣式 */
a.product-card{ color:var(--ink); text-decoration:none; }
a.product-card:hover{ color:var(--ink); }
/* 有圖時封面是真的圖片,沒圖時是那段說明文字 */
.product-card__cover img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- 前台的分類篩選(批次 2-7) ---- */
.cat-filter{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin-bottom:var(--sp-5);
}
.cat-filter__item{
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-full);
  background:rgba(255,255,255,.7); border:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--ink);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-filter__item:hover{ background:#fff; color:var(--ink); }
/* 選中的要一眼看得出來。⚠️ 不只換顏色,也加粗字重 ——
   只靠顏色區分,色盲客戶會分不出現在篩的是哪一個 */
.cat-filter__item.is-on{
  background:var(--coral); border-color:var(--coral-deep);
  font-weight:600; color:var(--ink);
}

.badge{
  display:inline-block; font-size:var(--fs-xs); font-weight:600;
  padding:2px var(--sp-2); border-radius:var(--r-full);
  background:var(--sage); color:#fff; letter-spacing:.03em;
}
.badge--soft{ background:var(--cream-deep); color:var(--ink-soft); }

/* ---------- 施工中區塊(骨架階段用,做完該頁就刪掉) ---------- */
.stub{ max-width:720px; margin-inline:auto; }
.stub__batch{
  display:inline-block; font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em;
  background:var(--cream-deep); color:var(--ink-soft);
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full); margin-bottom:var(--sp-3);
}
.stub__list{ margin-top:var(--sp-4); color:var(--ink-soft); font-size:var(--fs-sm); }

/* ---------- 頁尾:官方 LINE 聯絡 ---------- */
.line-contact{ margin-top:var(--sp-4); }
.line-btn{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  background:#06C755; color:#fff !important;
  font-size:var(--fs-sm); font-weight:600;
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-full);
  transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.line-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); color:#fff !important; }
.line-btn svg{ flex-shrink:0; }
.line-contact__id{
  margin-top:var(--sp-2); font-size:var(--fs-xs);
  color:rgba(251,246,236,.7);
}
.line-contact__id strong{
  color:var(--cream); font-family:var(--font-en);
  letter-spacing:.03em; user-select:all;   /* 點一下就整段選取,方便複製 */
}

/* ---------- 表單 ---------- */
.form{ display:flex; flex-direction:column; gap:var(--sp-4); }
.field{ display:flex; flex-direction:column; gap:var(--sp-2); }
.field__label{ font-size:var(--fs-sm); font-weight:600; color:var(--ink); }
.field__hint{ font-size:var(--fs-xs); color:var(--ink-soft); }
.input{
  font-family:var(--font-zh); font-size:var(--fs-base); color:var(--ink);
  background:rgba(255,255,255,.7);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4); width:100%;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.input:focus{ outline:none; border-color:var(--coral-deep); background:#fff; }
.input:disabled{ opacity:.6; cursor:not-allowed; }
.input::placeholder{ color:var(--ink-soft); opacity:.7; }

/* 勾選框(同意條款用) */
.checkbox{ display:flex; gap:var(--sp-3); align-items:flex-start; font-size:var(--fs-sm); line-height:1.6; }
.checkbox input{ margin-top:4px; width:18px; height:18px; flex-shrink:0; accent-color:var(--coral-deep); cursor:pointer; }

/* 訊息框 */
.msg{ padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); font-size:var(--fs-sm); line-height:1.6; }
.msg--error{ background:rgba(192,122,107,.12); color:#8C4A3C; border:1px solid rgba(192,122,107,.3); }
.msg--ok{ background:rgba(122,154,110,.14); color:#4F6B45; border:1px solid rgba(122,154,110,.32); }
.msg--warn{ background:rgba(200,161,90,.14); color:#7A6224; border:1px solid rgba(200,161,90,.35); }
.msg[hidden]{ display:none !important; }

/* 分頁切換(登入 / 註冊) */
.tabs{ display:flex; gap:var(--sp-1); background:rgba(255,255,255,.5); padding:var(--sp-1); border-radius:var(--r-full); margin-bottom:var(--sp-5); }
.tab{
  flex:1; text-align:center; cursor:pointer; border:0; background:none;
  font-family:var(--font-zh); font-size:var(--fs-base); font-weight:600; color:var(--ink-soft);
  padding:var(--sp-3); border-radius:var(--r-full);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tab[aria-selected="true"]{ background:var(--coral); color:var(--ink); box-shadow:var(--sh-sm); }

.auth-card{ max-width:440px; margin-inline:auto; }
.auth-card__foot{ margin-top:var(--sp-5); text-align:center; font-size:var(--fs-sm); color:var(--ink-soft); }

/* 頁首:已登入時的帳號區 */
.site-nav__user{ display:flex; align-items:center; gap:var(--sp-2); }
.btn-link{
  background:none; border:0; cursor:pointer; font-family:var(--font-zh);
  font-size:var(--fs-sm); color:var(--ink-soft); padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-full); transition:background var(--dur) var(--ease);
}
.btn-link:hover{ background:var(--glass); color:var(--ink); }

/* ---------- 密碼欄位的顯示/隱藏切換 ---------- */
.input-wrap{ position:relative; }
.input-wrap .input{ padding-right:52px; }   /* 空出眼睛圖示的位置 */
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  display:grid; place-items:center;
  width:40px; height:40px; padding:0;
  background:none; border:0; cursor:pointer;
  color:var(--ink-soft); border-radius:var(--r-full);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pw-toggle:hover{ color:var(--ink); background:rgba(255,255,255,.7); }
.pw-toggle svg{ width:20px; height:20px; }
.pw-toggle .icon-off{ display:none; }
.pw-toggle[aria-pressed="true"] .icon-on{ display:none; }
.pw-toggle[aria-pressed="true"] .icon-off{ display:block; }

/* 檢查中的提示 */
.msg--checking{ background:rgba(217,231,230,.5); color:var(--ink-soft); border:1px solid var(--line); }

/* ---------- Google 登入按鈕 ---------- */
.btn--google{
  background:#fff; color:#3c4043 !important;
  border:1px solid #dadce0; box-shadow:var(--sh-sm);
  font-weight:600;
}
.btn--google:hover{ background:#f8f9fa; color:#3c4043 !important; box-shadow:var(--sh-md); }
.btn--google svg{ width:20px; height:20px; flex-shrink:0; }

/* 「或」分隔線 */
.divider{
  display:flex; align-items:center; gap:var(--sp-3);
  color:var(--ink-soft); font-size:var(--fs-sm); margin:var(--sp-5) 0;
}
.divider::before, .divider::after{
  content:''; flex:1; height:1px; background:var(--line);
}

/* ---------- 資訊清單(會員資料頁) ---------- */
.info-list{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-2) var(--sp-5); margin:0; }
.info-list dt{ color:var(--ink-soft); font-size:var(--fs-sm); }
.info-list dd{ margin:0; word-break:break-all; }
@media (max-width:480px){
  .info-list{ grid-template-columns:1fr; gap:0; }
  .info-list dd{ margin-bottom:var(--sp-3); }
}

/* ============================================================
   法律文件版面(隱私權政策 / 服務條款 / 退款政策共用)
   ------------------------------------------------------------
   三份文件共用同一組樣式,要調整排版只改這裡。
   ============================================================ */
.legal{ max-width:46rem; margin:0 auto; }
.legal__updated{ font-size:var(--fs-sm); color:var(--ink-soft); margin-bottom:var(--sp-6); }
.legal h2{
  font-size:var(--fs-xl);
  margin:var(--sp-7) 0 var(--sp-3);
  padding-top:var(--sp-5);
  border-top:1px solid var(--line);
}
.legal h2:first-of-type{ border-top:0; padding-top:0; margin-top:var(--sp-5); }
.legal h3{ font-size:var(--fs-lg); margin:var(--sp-5) 0 var(--sp-2); }
.legal p{ margin:0 0 var(--sp-3); line-height:1.85; }
.legal ul, .legal ol{ margin:0 0 var(--sp-4); padding-left:1.4em; line-height:1.85; }
.legal li{ margin-bottom:var(--sp-2); }
.legal li:last-child{ margin-bottom:0; }

/* 需要客戶特別注意的段落(例如排除猶豫期) */
.legal__note{
  background:rgba(0,0,0,.04);
  border-left:3px solid var(--brand, #C89F7B);
  border-radius:var(--radius-sm, 8px);
  padding:var(--sp-4);
  margin:0 0 var(--sp-4);
}
.legal__note p:last-child{ margin-bottom:0; }

/* 退款期限等對照表。窄螢幕可橫向捲動,不會擠壓內容 */
.legal__tablewrap{ overflow-x:auto; margin:0 0 var(--sp-4); }
.legal table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:22rem; }
.legal th, .legal td{
  text-align:left; padding:var(--sp-3);
  border-bottom:1px solid var(--line); vertical-align:top;
}
.legal th{ font-weight:600; white-space:nowrap; }
.legal tbody tr:last-child td{ border-bottom:0; }

/* ============================================================
   後台版面(批次 2-4)
   ------------------------------------------------------------
   只有管理員看得到的頁面。刻意做得樸素、資訊清楚,
   不追求視覺效果 —— 這裡是工作用的,不是給客戶看的。
   ============================================================ */

/* 後台首頁的功能入口 */
.admin-menu{
  display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}
.admin-menu__item{
  display:flex; flex-direction:column; gap:var(--sp-1);
  padding:var(--sp-5); border-radius:var(--r-lg);
  background:var(--glass-strong); border:1px solid var(--glass-border);
  color:var(--ink); box-shadow:var(--sh-sm);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.admin-menu__item:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); color:var(--ink); }
/* 還沒做好的功能:看得到但點不下去,讓經營者知道東西在路上 */
.admin-menu__item--soon{ opacity:.5; }

/* 商品清單:一列一個商品 */
.admin-rows{ display:flex; flex-direction:column; gap:var(--sp-3); }
.admin-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5); border-radius:var(--r-lg);
  background:var(--glass-strong); border:1px solid var(--glass-border);
}
.admin-row__main{ display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; flex:1; }
.admin-row__title{ font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.admin-row__actions{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.admin-row__actions .btn{ padding:var(--sp-2) var(--sp-4); font-size:var(--fs-sm); }

/* 已上架的狀態標記,一眼看得出哪些商品客戶正在看 */
.badge--live{ background:rgba(122,154,110,.18); color:#4F6B45; }

/* 危險操作(刪除)刻意做得低調,避免手滑 */
.btn-link--danger{ color:#8C4A3C; }
.btn-link--danger:hover{ background:rgba(192,122,107,.12); color:#8C4A3C; }

.form__actions{ display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; }

/* 下拉選單與多行輸入沿用 .input 的外觀 */
select.input{ appearance:none; background-image:none; cursor:pointer; }
textarea.input{ resize:vertical; min-height:5em; line-height:1.6; }

@media (max-width:560px){
  .admin-row{ align-items:flex-start; }
  .admin-row__actions{ width:100%; }
}

/* ---- 後台的圖片管理(批次 2-4b) ---- */
.img-slots{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.img-slot{
  position:relative; width:120px; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--glass-border); background:var(--cream-deep);
}
.img-slot img{ display:block; width:100%; aspect-ratio:9/16; object-fit:cover; }
/* 封面是 4:3 橫式,預覽也要照真實比例,才看得出裁切後長怎樣 */
.img-slot--cover{ width:180px; }
.img-slot--cover img{ aspect-ratio:4/3; }
.img-slot__bar{
  display:flex; align-items:center; gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-2); background:var(--glass-strong);
  border-top:1px solid var(--glass-border);
}
.img-slot__num{ font-size:var(--fs-xs); color:var(--ink-soft); margin-right:auto; }
.img-slot__btn{
  border:0; background:transparent; cursor:pointer; color:var(--ink-soft);
  font-size:var(--fs-sm); line-height:1; padding:var(--sp-1) var(--sp-2);
  border-radius:var(--r-sm);
}
.img-slot__btn:hover:not(:disabled){ background:var(--glass); color:var(--ink); }
.img-slot__btn:disabled{ opacity:.3; cursor:not-allowed; }
.img-slot__btn--danger{ color:#8C4A3C; margin-left:auto; }

/* 用 <label> 包住隱藏的檔案選擇欄位,外觀才能跟其他按鈕一致 */
.btn--file{ cursor:pointer; align-self:flex-start; }
.btn--file.is-disabled{ opacity:.4; pointer-events:none; }

/* 上傳結果的說明可能有多行(每張圖一行),要保留換行 */
#msg-upload{ white-space:pre-line; }

/* ---- 後台的分類管理(批次 2-5) ---- */
/* 訊息裡會列出「還掛著這個分類的商品」,一行一個,換行必須留著 */
.msg--lines{ white-space:pre-line; }
/* 分類列比商品列單純(沒有縮圖),↑↓ 兩顆按鈕做窄一點,才不會佔掉名稱的空間 */
.admin-row__actions .btn--arrow{ padding:var(--sp-2) var(--sp-3); min-width:40px; }

/* ---- 商品編輯頁的分類勾選(批次 2-5b) ---- */
.cat-picker{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-block:var(--sp-2); }
.cat-chip{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-full);
  background:rgba(255,255,255,.7); border:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--ink); cursor:pointer;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-chip:hover{ background:#fff; }
.cat-chip input{ width:16px; height:16px; accent-color:var(--coral-deep); cursor:pointer; }
/* 勾起來的要一眼看得出來 —— 只靠小小的勾勾,一排十幾個分類會看不出選了哪些。
   ⚠️ 不能只用顏色區分,勾選框本身仍在,色盲或單色列印時也分辨得出來。 */
.cat-chip.is-on{ background:var(--coral); border-color:var(--coral-deep); font-weight:600; }
/* 商品掛著、但分類清單裡已經沒有的(正常情況不會出現) */
.cat-chip--missing{ border-style:dashed; color:#8C4A3C; }

/* ---- 首頁行銷橫幅(批次 2-6) ---- */
/* 預覽要照真實比例,才看得出裁切後長什麼樣 */
.img-slot--banner{ width:320px; }
.img-slot--banner img{ aspect-ratio:8/3; }
.img-slot--square{ width:180px; }
.img-slot--square img{ aspect-ratio:1/1; }
/* 橫幅列表的縮圖是寬的,跟商品的 4:3 不同 */
.admin-row__thumb--wide{ width:120px; height:45px; }
/* <a> 沒有 disabled 屬性,忙碌中要靠這個 class 擋住點擊 */
a.btn.is-disabled{ opacity:.35; pointer-events:none; }

/* 商品列表的縮圖 */
.admin-row__thumb{
  width:72px; height:54px; flex-shrink:0; border-radius:var(--r-sm);
  overflow:hidden; background:var(--cream-deep);
}
.admin-row__thumb img{ width:100%; height:100%; object-fit:cover; }
.admin-row__thumb--empty{
  display:grid; place-items:center;
  font-size:var(--fs-xs); color:var(--ink-soft);
}

/* ---------- 商品詳情頁(批次 2-8) ---------- */

/* 回上一層的連結。放在最上面,手機上比瀏覽器的返回鍵好按 */
.back-link{
  display:inline-block;
  margin-bottom:var(--sp-5);
  font-size:var(--fs-sm);
  color:var(--ink-soft);
}
.back-link:hover{ color:var(--ink); }

.product-detail__title{ font-size:var(--fs-3xl); margin-bottom:var(--sp-3); }
/* ⚠️ pre-line:經營者在後台按 Enter 換行,前台要跟著換行。
   用 CSS 而不是把換行轉成 <br> —— 內容仍然以 textContent 放進畫面,
   不必為了換行改用 innerHTML,跳脫的防線一點都不用讓(計畫書 5-4)。 */
.product-detail__summary{
  font-size:var(--fs-lg);
  color:var(--ink-soft);
  margin-bottom:var(--sp-4);
  white-space:pre-line;
}
.product-detail__cats{ margin-bottom:var(--sp-4); }

.product-detail__price{
  display:flex; align-items:baseline; gap:var(--sp-3);
  margin-bottom:var(--sp-5);
}
/* 詳情頁的價格要比列表大一級 —— 這是客戶決定要不要買的那個數字 */
.product-detail__price .price{ font-size:var(--fs-3xl); }
.product-detail__price .price--original{ font-size:var(--fs-base); }

.product-detail__buy{ display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center; }
.product-detail__buy .btn{ flex:1 1 200px; }
.product-detail__buy--bottom{ margin-top:var(--sp-6); }
/* 說明文字自己佔滿一整列(flex-basis 100%),不要跟按鈕擠在同一行 */
.product-detail__note{
  flex:1 0 100%;
  margin:0;
  font-size:var(--fs-sm);
  color:var(--ink-soft);
}

/* 詳情長圖:9:16 直式,最大寬 500px 置中(D-44)。
   直接滿版會讓直式圖在電腦上拉得非常長,一張圖就佔掉三四個螢幕。 */
.product-detail__images{
  display:flex; flex-direction:column; align-items:center;
  gap:var(--sp-2);
  margin-block:var(--sp-6);
}
.product-detail__images img{
  width:100%; max-width:500px;
  border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
}

/* ---------- 手機:商品卡片改成兩欄(經營者實測後要求) ---------- */
/* 原本 auto-fill + minmax(260px) 在手機上只排得下一欄,
   一個畫面幾乎只看得到一件商品,商品一多就要滑很久。
   改成固定兩欄,並把字級與間距縮小,免得 170px 寬的卡片塞不下。 */
@media (max-width:640px){
  .product-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:var(--sp-3);
  }
  .product-card__body{ padding:var(--sp-3); gap:var(--sp-1); }
  .product-card__title{ font-size:var(--fs-base); }
  /* 價格在窄卡片上放不下同一行時要換行,不可以被切掉 */
  .product-card__price{ flex-wrap:wrap; gap:var(--sp-1); }
  .product-card__price .price{ font-size:var(--fs-lg); }
}

/* ---------- 後台:商店概況(批次 2-10) ---------- */
.stat-grid{
  display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
}
.stat{
  background:var(--glass-strong);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg); padding:var(--sp-5);
  box-shadow:var(--sh-sm);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.stat{ color:var(--ink); text-decoration:none; display:block; }
a.stat:hover{ color:var(--ink); transform:translateY(-3px); box-shadow:var(--sh-md); }
.stat__num{ font-family:var(--font-en); font-size:var(--fs-3xl); font-weight:600; color:var(--coral-deep); line-height:1.1; }
.stat__label{ font-size:var(--fs-sm); font-weight:600; margin-top:var(--sp-2); }
.stat__hint{ font-size:var(--fs-xs); color:var(--ink-soft); margin-top:var(--sp-1); }

/* 「需要注意的事」清單 */
.checklist{ list-style:none; padding:0; margin:var(--sp-4) 0 0; }
.checklist__item{
  display:flex; align-items:flex-start; gap:var(--sp-3); flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
  font-size:var(--fs-sm); line-height:1.7;
  margin-bottom:var(--sp-2);
}
/* ⚠️ 不只用顏色區分輕重 —— 左邊那條粗邊也是一個訊號,色盲的人分得出來 */
.checklist__item--warn{
  background:rgba(200,161,90,.12); border-left:4px solid var(--warn); color:#7A6224;
}
.checklist__item--info{
  background:rgba(122,154,110,.10); border-left:4px solid var(--sage); color:var(--ink);
}
.checklist__action{ font-weight:600; white-space:nowrap; }