/* GoziShop port additions. globals.css 一個位元都沒改（原版原檔）；搬移與這次重做新增或覆蓋的規則都在這個檔案，
   頁面在 globals.css 之後載入。 */

/* ── 搬移版（React 版 ef7892a）就有的：大圖在下的間距、兩欄方案、大圖位置按鈕、縮圖、官方 logo ── */

/* Large image below the card (PORTFOLIO_PROFILE): globals.css spaces the large block for
   "image above"; flip the spacing when the core card comes first. */
.digital-card-template-portfolio-profile .digital-card-first-view{padding-top:28px;padding-bottom:18px}
.digital-card-template-portfolio-profile .digital-card-large-image{margin:0 auto 28px}
.card-first-preview .digital-card-template-portfolio-profile .digital-card-first-view{padding-top:18px}
@media (max-width:620px){
  .digital-card-template-portfolio-profile .digital-card-first-view{padding-top:10px;padding-bottom:10px}
  .digital-card-template-portfolio-profile .digital-card-large-image{margin:0 auto 10px}
}

/* Sales page: two plan cards instead of three presets, and the above/below choice. */
@media (min-width:921px){.card-first-templates fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wl02-placement-options{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px}
.wl02-placement-options button{min-height:34px;padding:0 14px;border:1px solid var(--green-200);border-radius:99px;background:white;color:var(--green-800);font-size:13px;font-weight:800;cursor:pointer}
.wl02-placement-options button[aria-pressed="true"]{border-color:var(--green-700);background:var(--green-800);color:white}
.wl02-placement-options button:focus-visible{outline:2px solid var(--green-700);outline-offset:2px}
.card-first-price>small a{color:var(--yellow);font-weight:850;text-decoration:underline}

/* Customization: template thumbnail for "large image below", composer status. */
.card-template-thumbnail-portfolio-profile{grid-template-rows:auto minmax(0,1fr)}
.wl02-large-image-status{color:var(--green-800);font-size:12px;font-weight:800}
/* Official logo (brand/gozishop-logo.svg, light header) in place of the text wordmark. */
.card-first-home{display:inline-flex;align-items:center}
.card-first-home img{display:block;width:auto;height:38px}
@media (max-width:680px){.card-first-home img{height:32px}}


/* ── 2026-11-06 重做時新增（DECISIONS「WL02 重做」優化 1、2、3、5） ── */

/* 3. 商家 logo 放在名片的方形標記裡；沒有 logo 才顯示店名第一個字（原本的樣子） */
.digital-card-mark.has-logo{overflow:hidden;padding:10%;background:#fff;border:1px solid color-mix(in srgb,var(--card-accent) 14%,transparent)}
.digital-card-mark.has-logo img{width:100%;height:100%;display:block;object-fit:contain}

/* 5. 長店名自動縮字：不在詞中間斷行（例如不會斷成「小／林水電」），優先在標點或空白斷；真的放不下才任意斷 */
.digital-card-identity h1{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.digital-card-identity h1[data-name-length="long"]{font-size:clamp(28px,6.2vw,40px)}
.digital-card-identity h1[data-name-length="xlong"]{font-size:clamp(24px,5vw,32px);letter-spacing:-.03em}
@media (max-width:620px){
  .digital-card-identity h1[data-name-length="long"]{font-size:clamp(26px,7.6vw,34px)}
  .digital-card-identity h1[data-name-length="xlong"]{font-size:clamp(22px,6.2vw,28px)}
}

/* 1. 更多聯絡方式（電話、導航、IG、FB、官網）：有填才出現，排在 LINE 按鈕下面，顏色跟著名片風格 */
.digital-card-contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;margin-top:10px}
.digital-card-contact{min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border:1px solid color-mix(in srgb,var(--card-accent) 18%,transparent);border-radius:13px;background:var(--card-soft);color:var(--card-accent);font-size:13px;font-weight:850;letter-spacing:.02em}
.digital-card-contact span{min-width:20px;font-size:14px;font-weight:900;text-align:center}
.digital-card-contact:hover{border-color:color-mix(in srgb,var(--card-accent) 40%,transparent)}
.digital-card-contact:focus-visible{outline:3px solid color-mix(in srgb,var(--card-accent) 30%,white);outline-offset:3px}
/* 營業時間 */
.digital-card-hours{display:flex;flex-wrap:wrap;gap:4px 10px;margin:12px 2px 0;color:var(--card-muted);font-size:13px;font-weight:700;line-height:1.6}
.digital-card-hours b{color:var(--card-accent);font-size:11px;font-weight:900;letter-spacing:.08em;line-height:1.9}

/* 2. 存入通訊錄（vCard）：跟「分享名片」同一種膠囊按鈕，放在它左邊 */
.digital-card-share{gap:8px}
.digital-card-save-contact{display:inline-flex;align-items:center}

/* 名片編輯頁：營業時間 */
.wl02-hours{display:grid;gap:8px;margin:0;padding:14px;border:1px solid var(--line);border-radius:12px}
.wl02-hours legend{padding:0 6px;color:var(--green-700);font-size:12px;font-weight:800}
.wl02-hours-row{display:grid;grid-template-columns:minmax(92px,auto) minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px}
.wl02-hours-row label{display:flex;align-items:center;gap:8px}
.activation-card .wl02-hours-row input[type=checkbox]{width:18px;min-height:18px;padding:0}
.activation-card .wl02-hours-row input[type=time]{min-height:42px;padding:0 10px}
.wl02-hours-row i{color:var(--muted);font-style:normal}
.card-media-control figure img[data-logo-img]{height:120px;object-fit:contain;background:#fff}

/* 年繳（DECISIONS 2026-11-06 09:46）：價格區的月繳／年繳選擇，深綠底上用黃色表示已選 */
.wl02-period-options{margin:0}
.card-first-price .wl02-period-options button{min-height:34px;margin-top:0;border-color:rgba(255,255,255,.35);background:transparent;color:white;font-weight:800}
.card-first-price .wl02-period-options button[aria-pressed="true"]{border-color:var(--yellow);background:var(--yellow);color:var(--green-900)}
.card-first-price .wl02-period-options button:focus-visible{outline-color:var(--yellow)}

/* ── /card/start：已開通 → 頁首主要按鈕（付款完成後直接進下一步） ── */
.activation-go{display:grid;gap:10px;margin-top:26px}
.activation-go .activation-primary{min-height:56px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-size:17px;font-weight:800;text-decoration:none}
.activation-paid{margin:0;padding:10px 14px;border-radius:10px;background:var(--green-100);color:var(--green-800);font-size:14px;font-weight:800}
.activation-actions-single{grid-template-columns:1fr}

/* 窄螢幕＋放大字級：訂單編號很長，允許換行，不撐出水平捲動 */
.activation-purchase, .activation-purchase strong, .activation-purchase span { overflow-wrap: anywhere; min-width: 0; }
.activation-card { min-width: 0; max-width: 100%; }