/* KnitTestShop · 客戶流程樣式（customize + product-preview 共用，复用 shopify-theme.css 变量） */
:root {
  --bg: var(--color-background);
  --bg-alt: var(--color-background-secondary);
  --serif: var(--font-headings);
  --sans: var(--font-body);
  --ink: var(--color-text);
  --acc: var(--color-accent);
  --acc2: #a9743c;
  --mut: rgba(108, 76, 51, 0.72);
  --line: var(--color-borders);
  --line-strong: var(--color-borders-strong);
  --ok: #1e7a4c;
  --err: #c0392b;
}

.flow-page { background: var(--bg); min-height: 100vh; }
/* 只改上下內距：用 padding 簡寫會把 .wrap 的左右 gutter 覆蓋成 0，
   內容就貼著螢幕邊（舊版一直是這樣）。 */
.flow-main { padding-top: 42px; padding-bottom: 90px; }
.flow-head { margin-bottom: 8px; }
.flow-head h1 { font-family: var(--serif); font-size: 2.3rem; margin: 0 0 6px; letter-spacing: .5px; }
.flow-head .sub { color: var(--mut); font-size: .95rem; }

.flow-card {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 28px; margin-top: 24px; box-shadow: 0 6px 22px rgba(42,28,18,.06);
}
.flow-card h2 { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 6px; }
.flow-card .hint { color: var(--mut); font-size: .85rem; margin: 0 0 18px; }

/* 產品選擇卡片 */
.product-choice { display: flex; gap: 14px; flex-wrap: wrap; }
.product-choice .pc {
  flex: 1; min-width: 140px; border: 2px solid var(--line); border-radius: 10px;
  padding: 14px; text-align: center; cursor: pointer; background: #fff; transition: .15s;
}
.product-choice .pc:hover { border-color: var(--line-strong); }
.product-choice .pc.on { border-color: var(--acc); box-shadow: 0 0 0 2px rgba(200,145,86,.22); }
.product-choice .pc img { width: 100%; border-radius: 6px; display: block; }
.product-choice .pc .lbl { margin-top: 10px; font-weight: 700; font-size: .92rem; }

/* 上傳區 */
.drop-zone {
  border: 2px dashed var(--line-strong); border-radius: 12px; padding: 52px 20px;
  text-align: center; cursor: pointer; background: #fff; position: relative; transition: .15s;
}
.drop-zone.over { border-color: var(--acc); background: var(--bg-alt); }
.drop-zone .big { font-size: 1.15rem; font-weight: 700; display: block; }
.drop-zone .small { color: var(--mut); font-size: .85rem; }
.drop-zone input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }

/* 預覽槽 */
.preview-slot { text-align: center; }
.preview-slot img { max-width: 340px; max-height: 380px; border-radius: 8px; box-shadow: 0 10px 28px rgba(42,28,18,.14); }
.preview-slot .cap { margin-top: 10px; color: var(--mut); font-size: .85rem; }

/* AI 詢問區 */
.ai-ask { text-align: center; }
.ai-ask .q { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 6px; }
.ai-ask .qsub { color: var(--mut); margin: 0 0 20px; }
.btnrow { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.btn {
  border: none; border-radius: 4px; padding: 13px 20px; font-size: .9rem; font-weight: 700;
  cursor: pointer; letter-spacing: .5px; font-family: var(--sans); transition: .15s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: #fff; border: 1.5px solid var(--ink); color: var(--ink); flex: 1; }
.btn.ghost:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.btn.acc { background: var(--acc); color: #fff; flex: 1; }
.btn.acc:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(200,145,86,.35); }
.btn.acc2 { background: var(--acc2); color: #fff; flex: 1; }
.btn.ink { background: var(--ink); color: var(--bg); width: 100%; }
.btn.full { width: 100%; }
.btn.small { padding: 7px 14px; font-size: .75rem; font-weight: 600; background: #fff; border: 1.5px solid var(--line); color: var(--mut); width: auto; }

.status { margin-top: 14px; font-size: .85rem; min-height: 1.2em; }
.status.busy { color: var(--acc2); }
.status.ok { color: var(--ok); }
.status.err { color: var(--err); font-weight: 600; }

/* 產品預覽頁（模仿 lawsknitters make-your-own 產品頁） */
.pp-grid { display: grid; grid-template-columns: minmax(340px, 520px) 1fr; gap: 40px; align-items: start; margin-top: 30px; }
.pp-media { position: sticky; top: 96px; }
.pp-media .frame { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 12px 34px rgba(42,28,18,.12); }
.pp-media .frame img { display: block; width: 100%; }
.pp-switcher { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pp-switcher button { flex: 1; min-width: 96px; border: 1.5px solid var(--line); background: #fff; border-radius: 6px; padding: 9px 8px; cursor: pointer; font-family: var(--sans); font-weight: 700; color: var(--ink); }
.pp-switcher button.on { border-color: var(--acc); background: var(--bg-alt); }
.pp-info h1 { font-family: var(--serif); font-size: 1.9rem; margin: 0 0 6px; }
.pp-info .vendor { color: var(--mut); font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; }
.pp-info .price { font-size: 1.5rem; font-weight: 700; margin: 14px 0; }
.pp-info .price .sale { color: var(--color-sales); }
.pp-info .desc { color: var(--mut); line-height: 1.7; }
.pp-zakeke { margin-top: 24px; padding: 20px; border: 1px dashed var(--acc); border-radius: 8px; background: var(--bg-alt); }
.pp-zakeke strong { font-family: var(--serif); }
.pp-zakeke .zurl { display: block; margin-top: 8px; font-size: .78rem; color: var(--mut); word-break: break-all; }
.divider { height: 1px; background: var(--line); margin: 24px 0; }
.badge { display: inline-block; font-size: .72rem; letter-spacing: .5px; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--line); color: var(--mut); }

/* 客戶提交面板（studio 後台） */
.subs-panel { margin-top: 16px; }
.subs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.subs-item { border: 1.5px solid var(--line); border-radius: 8px; padding: 8px; text-align: center; cursor: pointer; background: #fff; transition: .12s; }
.subs-item:hover { border-color: var(--acc); }
.subs-item img { width: 100%; border-radius: 4px; display: block; }
.subs-item .tag { display: block; font-size: .68rem; margin-top: 6px; color: var(--mut); }
.subs-item .tag.ai { color: var(--acc2); font-weight: 700; }
.subs-empty { color: var(--mut); font-size: .85rem; }

/* 平板 / 小筆電：產品預覽頁改單欄，預覽不再吸頂（高度不夠，會蓋住資訊） */
@media (max-width: 860px) {
  .pp-grid { grid-template-columns: 1fr; }
  .pp-media { position: static; }
  .pp-info h1 { font-size: 1.7rem; }
  .preview-slot img { max-width: min(340px, 78vw); max-height: 52vh; }
}

/* 手機：單欄、放大觸控目標、按鈕改為整行（兩個並排會擠到看不清） */
@media (max-width: 640px) {
  .flow-main { padding-top: 22px; padding-bottom: 52px; }
  .flow-head { margin-bottom: 4px; }
  .flow-head h1 { font-size: 1.65rem; }
  .flow-head .sub { font-size: .9rem; line-height: 1.6; }

  .flow-card { padding: 18px; margin-top: 16px; border-radius: 10px; }
  .flow-card h2 { font-size: 1.08rem; }
  .flow-card .hint { font-size: .82rem; margin-bottom: 14px; }

  /* 產品選擇：改 grid 兩欄。flex-grow 會把奇數行的最後一張拉成滿寬，很醜 */
  .product-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-choice .pc { min-width: 0; padding: 10px; }
  .product-choice .pc .lbl { font-size: .82rem; margin-top: 8px; }

  /* 上傳區：降低高度但仍易點 */
  .drop-zone { padding: 34px 16px; border-radius: 10px; }
  .drop-zone .big { font-size: 1rem; }
  .drop-zone .small { font-size: .8rem; }

  .ai-ask .q { font-size: 1.1rem; line-height: 1.4; }
  .ai-ask .qsub { font-size: .87rem; line-height: 1.65; margin-bottom: 16px; }

  /* 按鈕：整行、≥48px，不再左右分欄 */
  .btnrow { gap: 10px; }
  .btn { min-height: 48px; padding: 13px 16px; font-size: .95rem; }
  .btn.ghost, .btn.acc, .btn.acc2 { flex: 1 1 100%; }
  .btn.small { min-height: 40px; font-size: .8rem; }

  .preview-slot img { max-width: 100%; max-height: 46vh; }
  .pp-info h1 { font-size: 1.5rem; }
  .pp-switcher button { min-height: 44px; }
}