/* =============================================================
   LOHAS · 客製文創落地頁 (design.html)
   -------------------------------------------------------------
   命名空間: .dz
   依賴: lohas-tokens.css / lohas-base.css / lohas-components.css
   色彩一律沿用站上 token,不另定義新色
   ============================================================= */

.dz{
  background:var(--bg-warm);
  color:var(--text-main);
}

.dz-main{
  max-width:1240px;
  margin:0 auto;
  padding:96px 24px 80px;
}

/* ---- 載入 / 錯誤 ---- */
.dz-state{ text-align:center; padding:70px 20px }
.dz-state-ico{ font-size:36px; color:var(--lohas-light); margin-bottom:18px }
.dz-state p{
  font-size:15px; line-height:1.85; letter-spacing:.5px;
  color:var(--text-sub); margin:0 auto 24px; max-width:420px;
}

/* ---- 版面 ---- */
.dz-wrap{
  display:grid;
  grid-template-columns:1.25fr .95fr;
  grid-template-areas:
    "head head"
    "left right";
  gap:0 32px;
  align-items:start;
}
.dz-head{ grid-area:head; margin-bottom:28px }
/* sticky 的 top 必須讓開固定 header(.main-header 高 70px),
   設 0 的話捲動時內容會滑到 header 底下 */
.dz-left{ grid-area:left; position:sticky; top:90px }
.dz-right{ grid-area:right }

.dz-title{
  font-size:26px; font-weight:700; letter-spacing:2px;
  color:var(--lohas-brand); margin:0 0 10px;
}
.dz-sub{
  font-size:15px; line-height:1.85; letter-spacing:.5px;
  color:var(--text-sub); margin:0;
}

/* ---- 預覽舞台 ---- */
.dz-stage{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  background:#fff;
  border:1px solid var(--lohas-bd);
  border-radius:var(--r-lg);
  overflow:hidden;
  /* 拖曳時不要選到圖片 */
  user-select:none;
  touch-action:none;
}
.dz-product-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  pointer-events:none;
}
/* 刻圖疊層:left/top 是中心點,所以要往回位移一半 */
.dz-overlay{
  position:absolute;
  transform:translate(-50%, -50%);
  cursor:grab;
  /* 雷刻是黑線,用 multiply 讓它像刻在鏡片上而不是貼上去 */
  mix-blend-mode:multiply;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.15));
}
.dz-overlay.is-dragging{ cursor:grabbing }

/* 預覽下方的商品標示。桌機用右欄的卡片,這裡隱藏。
   刻意不疊在圖上:商品照是淺色底,白字反白讀不清楚。 */
.dz-stage-meta{
  display:none;
  align-items:baseline;
  gap:10px;
  padding:10px 2px 0;
  border-bottom:1px solid var(--lohas-bd);
  padding-bottom:9px;
}
.dz-stage-meta-name{
  flex:1; min-width:0;
  font-size:14px; font-weight:600; letter-spacing:.3px;
  color:var(--text-main);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dz-stage-meta-price{
  flex-shrink:0;
  font-size:16px; font-weight:700; letter-spacing:.5px;
  color:var(--lohas-brand);
}

.dz-stage-hint{
  margin:10px 0 0;
  font-size:12.5px; letter-spacing:.3px;
  color:var(--text-muted);
  text-align:center;
}
.dz-stage-hint i{ margin-right:6px }

/* ---- 卡片 ---- */
.dz-card{
  background:#fff;
  border:1px solid var(--lohas-bd);
  border-radius:var(--r-lg);
  padding:20px;
  margin-bottom:16px;
}
.dz-card-h{
  font-size:15px; font-weight:700; letter-spacing:1px;
  color:var(--lohas-brand);
  margin:0 0 14px;
}

/* ---- 商品 ---- */
.dz-product-name{
  font-size:16px; font-weight:600; letter-spacing:.3px;
  color:var(--text-main); margin-bottom:6px;
}
.dz-product-price{
  font-size:14px; color:var(--text-sub);
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.dz-product-price b{ font-size:19px; color:var(--lohas-brand) }
.dz-product-price s{ color:var(--text-muted); font-size:13px }
.dz-price-note{
  width:100%;
  font-size:11.5px; color:var(--text-muted); letter-spacing:.3px;
}

/* ---- 規格 ---- */
.dz-specs{ margin-top:16px }
.dz-spec-label{
  font-size:12.5px; letter-spacing:1px;
  color:var(--text-muted); margin-bottom:8px;
}
.dz-spec-list{ display:flex; flex-wrap:wrap; gap:8px }
.dz-spec{
  padding:8px 15px;
  border:1px solid var(--lohas-bd);
  background:#fff; color:var(--text-sub);
  border-radius:var(--r-pill);
  font-family:inherit; font-size:13px; letter-spacing:.3px;
  cursor:pointer; transition:all .18s;
  display:inline-flex; align-items:center; gap:6px;
}
.dz-spec:hover{ border-color:var(--lohas-light); color:var(--lohas-brand) }
.dz-spec.on{
  background:var(--lohas-brand); border-color:var(--lohas-brand); color:#fff;
}
.dz-spec.is-out{ opacity:.45; cursor:not-allowed }
.dz-spec-out{ font-size:11px; opacity:.8 }

/* ---- 刻圖挑選 ---- */
.dz-design-search{ position:relative; margin-bottom:12px }
.dz-design-search input{
  width:100%; height:40px;
  padding:0 38px 0 14px;
  border:1px solid var(--lohas-bd);
  border-radius:var(--r-sm);
  background:#fff;
  font-family:inherit; font-size:13.5px;
  color:var(--text-main);
  transition:border-color .18s;
}
.dz-design-search input:focus{ outline:none; border-color:var(--lohas-brand) }
.dz-design-search i{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--text-muted); font-size:13px; pointer-events:none;
}

/* 預設只出 8 張,由 JS 控制筆數,所以這裡不再需要 max-height + 捲軸。
   卡在一個小捲動區裡選圖比整片攤開更難用。 */
.dz-design-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(72px, 1fr));
  gap:8px;
}
.dz-design{
  aspect-ratio:1/1;
  padding:6px;
  border:1px solid var(--lohas-bd);
  border-radius:var(--r-sm);
  background:#fff;
  cursor:pointer; transition:all .18s;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted);
}
.dz-design:hover{ border-color:var(--lohas-light) }
.dz-design.on{
  border-color:var(--lohas-brand);
  box-shadow:0 0 0 2px var(--lohas-brand) inset;
}
.dz-design img{ max-width:100%; max-height:100%; object-fit:contain }

.dz-empty{
  grid-column:1/-1;
  margin:0; padding:22px 0;
  text-align:center;
  font-size:13px; color:var(--text-muted);
}

/* 展開全部 / 收合 */
.dz-more{
  width:100%;
  margin-top:10px;
  padding:9px;
  border:1px dashed var(--lohas-bd);
  background:transparent;
  color:var(--text-sub);
  border-radius:var(--r-sm);
  font-family:inherit; font-size:12.5px; letter-spacing:.5px;
  cursor:pointer; transition:all .18s;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.dz-more:hover{ border-color:var(--lohas-light); color:var(--lohas-brand) }
.dz-more i{ font-size:10px }

/* ---- 鏡片切換 ---- */
.dz-lens{ display:flex; gap:8px; margin-bottom:16px }
.dz-lens-btn{
  flex:1;
  padding:9px 14px;
  border:1px solid var(--lohas-bd);
  background:#fff; color:var(--text-sub);
  border-radius:var(--r-pill);
  font-family:inherit; font-size:13px; font-weight:500; letter-spacing:.5px;
  cursor:pointer; transition:all .18s;
}
.dz-lens-btn:hover{ border-color:var(--lohas-light); color:var(--lohas-brand) }
.dz-lens-btn.on{
  background:var(--lohas-brand); border-color:var(--lohas-brand); color:#fff;
}

/* ---- 滑桿 ---- */
.dz-row{ margin-bottom:14px }
.dz-label{
  font-size:13px; color:var(--text-sub);
  letter-spacing:.5px; margin-bottom:7px;
}
.dz-label span{ color:var(--lohas-brand); font-weight:600 }
.dz-slider{ width:100%; accent-color:var(--lohas-brand) }

.dz-reset{
  width:100%; padding:9px;
  border:1px dashed var(--lohas-bd);
  background:transparent; color:var(--text-muted);
  border-radius:var(--r-sm);
  font-family:inherit; font-size:12.5px; letter-spacing:.5px;
  cursor:pointer; transition:all .18s;
}
.dz-reset:hover{ border-color:var(--lohas-light); color:var(--lohas-brand) }

/* ---- 提醒 ---- */
.dz-note{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--warn-bg);
  border-radius:var(--r-sm);
  padding:12px 14px;
  font-size:12.5px; line-height:1.8; letter-spacing:.3px;
  color:var(--warn);
  margin-bottom:16px;
}
.dz-note i{ margin-top:3px; flex-shrink:0 }

/* ---- 按鈕 ---- */
.dz-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%;
  padding:14px 24px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:2px;
  cursor:pointer; transition:all .2s;
  text-decoration:none;
}
.dz-btn--pri{ background:var(--lohas-brand); color:#fff }
.dz-btn--pri:hover:not(:disabled){ background:var(--lohas-hover) }
.dz-btn--pri:disabled{ opacity:.45; cursor:not-allowed }
.dz-btn--ghost{
  background:transparent; color:var(--text-sub);
  border-color:var(--lohas-bd);
}
.dz-btn--ghost:hover{ border-color:var(--lohas-brand); color:var(--lohas-brand) }

.dz-submit-hint{
  margin:9px 0 0;
  text-align:center;
  font-size:12px; color:var(--text-muted); letter-spacing:.3px;
}

/* =============================================================
   送禮模式(design.html?design=<id>&gift=1)
   ============================================================= */

/* ---- 選眼鏡 ---- */
.dz-frames{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));
  gap:10px;
}
.dz-frame{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 8px;
  border:1px solid var(--lohas-bd);
  border-radius:var(--r-sm);
  background:#fff;
  cursor:pointer; transition:all .18s;
  font-family:inherit;
}
.dz-frame:hover{ border-color:var(--lohas-light) }
.dz-frame.on{
  border-color:var(--lohas-brand);
  box-shadow:0 0 0 2px var(--lohas-brand) inset;
}
.dz-frame img{ width:100%; aspect-ratio:4/3; object-fit:contain }
.dz-frame-noimg{
  width:100%; aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); background:var(--bg-soft);
  border-radius:var(--r-sm);
}
.dz-frame-name{
  width:100%;
  font-size:11.5px; letter-spacing:.2px; color:var(--text-sub);
  text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dz-frame-price{
  font-size:13px; font-weight:700; letter-spacing:.3px;
  color:var(--lohas-brand);
}

/* ---- 二選一切換 ---- */
.dz-seg{ display:flex; gap:8px; margin:0 0 10px }
.dz-seg-btn{
  flex:1;
  padding:10px 12px;
  border:1px solid var(--lohas-bd);
  background:#fff; color:var(--text-sub);
  border-radius:var(--r-pill);
  font-family:inherit; font-size:13px; font-weight:500; letter-spacing:.5px;
  cursor:pointer; transition:all .18s;
}
.dz-seg-btn:hover{ border-color:var(--lohas-light); color:var(--lohas-brand) }
.dz-seg-btn.on{
  background:var(--lohas-brand); border-color:var(--lohas-brand); color:#fff;
}
.dz-seg-note{
  margin:0 0 18px;
  font-size:12.5px; line-height:1.8; letter-spacing:.3px;
  color:var(--text-muted);
}

/* ---- 輸入 ---- */
.dz-input{
  width:100%;
  height:42px;
  padding:0 14px;
  border:1px solid var(--lohas-bd);
  border-radius:var(--r-sm);
  background:#fff;
  font-family:inherit; font-size:14px;
  color:var(--text-main);
  transition:border-color .18s;
}
.dz-input:focus{ outline:none; border-color:var(--lohas-brand) }
.dz-textarea{
  height:auto;
  padding:11px 14px;
  line-height:1.7;
  resize:vertical;
}

/* 欄位底下的說明與提醒 */
.dz-field-hint{
  margin:7px 0 0;
  font-size:12px; line-height:1.7; letter-spacing:.2px;
  color:var(--text-muted);
}
.dz-field-warn{
  margin:7px 0 0;
  padding:8px 11px;
  background:var(--warn-bg);
  color:var(--warn);
  border-radius:var(--r-sm);
  font-size:12px; line-height:1.7; letter-spacing:.2px;
}
.dz-field-warn i{ margin-right:5px }

.dz-form-err{
  margin:0 0 12px;
  padding:11px 14px;
  background:var(--status-rejected-bg);
  color:var(--status-rejected);
  border-radius:var(--r-sm);
  font-size:13px; line-height:1.7; letter-spacing:.3px;
}

/* ---- 建立完成 ---- */
.dz-result{ text-align:center }
.dz-result-ico{
  font-size:32px; color:var(--status-approved); margin-bottom:12px;
}
.dz-result-text{
  margin:0 0 18px;
  font-size:13.5px; line-height:1.85; letter-spacing:.3px;
  color:var(--text-sub);
  text-align:left;
}
.dz-link-row{
  display:flex; gap:8px; margin-bottom:14px;
}
.dz-link-row .dz-input{ flex:1; min-width:0; font-size:12.5px }
.dz-link-row .dz-btn{ width:auto; flex-shrink:0; padding:0 20px; letter-spacing:1px }

/* ---- 滑到底浮鈕(規格比照刻圖市集的 .scroll-to-join) ---- */
.dz-scroll{
  position:fixed;
  right:24px;
  bottom:32px;
  z-index:150;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--lohas-brand);
  color:#fff;
  padding:12px 18px 12px 16px;
  border:0;
  border-radius:var(--r-pill);
  font-family:inherit;
  font-size:12px;
  letter-spacing:1px;
  font-weight:600;
  box-shadow:0 8px 24px rgba(80,66,45,0.25);
  cursor:pointer;
  opacity:0;
  transform:translateY(20px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .2s ease;
}
.dz-scroll.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.dz-scroll:hover{
  background:var(--lohas-hover);
  transform:translateY(-2px);
}
.dz-scroll i{
  font-size:11px;
  animation:dzScrollHint 1.8s ease-in-out infinite;   /* 上下擺動,引導下捲 */
}
.dz-scroll-label{ white-space:nowrap }

/* 到底之後翻轉成「回到頂部」 */
.dz-scroll.at-bottom i{
  transform:rotate(180deg);
  animation:none;
}

@keyframes dzScrollHint{
  0%, 100%{ transform:translateY(0) }
  50%{ transform:translateY(3px) }
}

/* ---- RWD ---- */
@media (max-width:900px){
  .dz-main{ padding:90px 16px 60px }

  /* 手機改單欄,並把 .dz-right 拆開(display:contents)讓它的卡片
     變成 .dz-wrap 的直接子元素,才能用 order 重排。
     目標順序:標題 → 商品 → 預覽 → 選刻圖 → 位置 → 提醒 → 按鈕
     這樣「選一張刻圖」就緊貼在模擬圖下方。
     .dz-right 本身只有 grid-area,沒有視覺樣式,拆開不影響外觀。 */
  .dz-wrap{
    display:flex;
    flex-direction:column;
    gap:0;
    /* 桌機那組是 align-items:start。換成 column flex 之後,
       start 會變成「橫向靠左 + 寬度縮到內容大小」,整欄只剩一半寬。
       這裡必須明確蓋回 stretch。 */
    align-items:stretch;
  }
  .dz-right{ display:contents }

  /* ⚠ 手機不顯示標題與副標。
     -----------------------------------------------------------------
     這一頁是從商城或刻圖市集點進來的【工作頁】,不是入口 ——
     客人是帶著目的進來的,標題只是重複他已經知道的事,
     而手機的第一屏很貴:那兩行字加起來會把預覽整個推到摺線以下。

     元素留著不刪(js 的 setGiftMode 會寫進去),只是不顯示;
     桌機照舊 —— 那邊有橫向空間,標題有它的作用。 */
  .dz-head          { display:none }
  .dz-card--product { order:2 }
  .dz-left          { order:3 }
  .dz-card--frames  { order:4 }   /* 送禮模式才有 */
  .dz-card--design  { order:5 }
  #dzPlaceCard      { order:6 }
  #dzGiftCard       { order:7 }   /* 送禮模式才有 */
  .dz-note          { order:8 }
  .dz-form-err      { order:9 }
  #dzSubmit         { order:10 }
  .dz-submit-hint   { order:11 }
  #dzResult         { order:12 }

  /* 商品標示改用預覽上的說明條 */
  .dz-stage-meta{ display:flex }

  /* 只有品名價格的話,那張卡整張收掉 —— 資訊已經在預覽上了。
     有規格時才留著,並壓成精簡樣式。 */
  .dz-card--product:not(.has-specs){ display:none }
  .dz-card--product{
    padding:14px 16px;
    margin-bottom:14px;
  }
  .dz-card--product .dz-card-h{ margin-bottom:10px }
  .dz-card--product .dz-product{ display:none }   /* 品名價格看預覽上的就好 */
  .dz-card--product .dz-specs{ margin-top:0 }
  /* 手機把預覽釘在上方,調整時看得到變化。
     top 是 header 高度(70px),不能設 0,否則會被 header 蓋住。 */
  .dz-left{
    position:sticky; top:70px; z-index:5;
    background:var(--bg-warm);
    padding-bottom:10px;
    margin-bottom:16px;
  }
  /* 捲過「刻在哪裡」之後由 JS 加上,讓預覽跟著捲走,
     否則它會一路釘到底、蓋住「加入購物車」。 */
  .dz-left.is-unstuck{ position:static }
  /* 預覽滿版:用負 margin 把 .dz-main 的 16px padding 吃回來,
     其餘內容維持原本邊界。手機畫面本來就窄,左右各留 16px
     等於預覽白白少掉一截。 */
  .dz-stage{
    /* ⚠ 比桌機扁。預覽在手機上是【釘在上方】的,它多高,
       底下能操作的區域就少多少。

       代價要知道:商品圖是 object-fit:contain,框變扁之後
       眼鏡會跟著變小,拖曳刻圖的精準度會降低。
       16/10 是取捨後的值 —— 要更扁就把這個數字調大
       (4/3≈1.33 → 16/10=1.6 → 16/9≈1.78),但別過頭。 */
    aspect-ratio:16/10;
    margin-left:-16px;
    margin-right:-16px;
    width:calc(100% + 32px);
    border-left:0;
    border-right:0;
    border-radius:0;
  }

  /* 手機縮成圓鈕,跟刻圖市集一致 */
  .dz-scroll{
    right:16px;
    bottom:20px;
    width:44px;
    height:44px;
    padding:0;
    border-radius:50%;
    justify-content:center;
  }
  .dz-scroll-label{ display:none }
  .dz-scroll i{ font-size:14px }
}

@media (max-width:480px){
  /* padding-top 不可低於 header 的 70px,否則標題會鑽到 header 底下 */
  .dz-main{ padding:86px 16px 48px }
  .dz-title{ font-size:22px }
  .dz-head{ margin-bottom:18px }
  .dz-card{ padding:18px }
}