/* =========================================================
   客人端設計語言：沿用後台設計系統（DESIGN.md）——白底、髮絲線、系統無襯線、8 級字體、Lucide 圖示
   只作用在 html[data-surface="client"]。版面結構不變，只統一色彩、字級、按鈕、彈窗、圖示與點擊區。
   按鈕層級：每個畫面唯一的主要動作（加入購物車、送出訂單、去送出、通知已匯款）＝珊瑚紅實心；其他＝白底細框
   ========================================================= */
html[data-surface="client"]{
  --a-accent:#ff385c;--a-accent-fill:#e00b41;--a-accent-fill-press:#c1063a;--a-accent-text:#d10a3c;--a-accent-soft:#fff0f3;
  --a-ink:#222222;--a-muted:#6a6a6a;--a-faint-ink:#b0b0b0;
  --a-line:#ebebeb;--a-line-strong:#dddddd;--a-canvas:#f7f7f7;--a-card:#ffffff;
  --a-success:#008a05;--a-success-soft:#eaf6ea;--a-warn:#c13515;--a-warn-soft:#fdf0ec;
  --a-radius:12px;--a-radius-sm:8px;--a-overlay:0 8px 28px rgba(0,0,0,.18);
  --a-font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --text-caption:500 12px/1.4 var(--a-font-family);
  --text-small:400 13px/1.5 var(--a-font-family);
  --text-body:400 14px/1.55 var(--a-font-family);
  --text-ui:500 15px/1.4 var(--a-font-family);
  --text-title:600 16px/1.4 var(--a-font-family);
  --text-subheading:600 18px/1.35 var(--a-font-family);
  --text-heading:700 28px/1.25 var(--a-font-family);
  /* 舊變數落到新色票 */
  --ink:var(--a-ink);--muted:var(--a-muted);--green:var(--a-ink);--green2:var(--a-ink);
  --mint:var(--a-canvas);--cream:var(--a-canvas);--paper:#fff;--line:var(--a-line);
  --orange:var(--a-accent);--red:var(--a-warn);--shadow:none;
  font-family:var(--a-font-family);color:var(--a-ink);background:#fff;-webkit-font-smoothing:antialiased;
}
html[data-surface="client"] body,html[data-surface="client"] .shell,html[data-surface="client"] .phone-wrap,html[data-surface="client"] .phone-page{background:#fff;color:var(--a-ink)}
html[data-surface="client"] ::selection{background:#ffdde3;color:var(--a-ink)}
html[data-surface="client"] :focus-visible{outline:2px solid var(--a-ink);outline-offset:2px}
html[data-surface="client"] :is(h1,h2,h3){font-family:inherit;color:var(--a-ink)}
html[data-surface="client"] :is(b,strong){font-weight:600}
html[data-surface="client"] .eyebrow{font:var(--text-caption);letter-spacing:0;color:var(--a-muted);text-transform:none}

/* 頂列與店家標誌（客人端只顯示店家品牌） */
html[data-surface="client"] .topbar{background:#fff;border-bottom:1px solid var(--a-line);box-shadow:none}
html[data-surface="client"] :is(.brand-mark,.store-logo){background:var(--a-ink);color:#fff;border-radius:50%;font-weight:600}
html[data-surface="client"] .shop-name{color:var(--a-ink);font:var(--text-title)}
html[data-surface="client"] :is(.icon-btn,.my-account-button){background:#fff;color:var(--a-ink);border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);min-height:44px;box-shadow:none}
@media(hover:hover) and (pointer:fine){html[data-surface="client"] :is(.icon-btn,.my-account-button):hover{border-color:var(--a-ink);background:var(--a-canvas)}
}

/* 店家首頁：深綠主視覺改為白底，標題 heading、說明 body 灰字 */
html[data-surface="client"] .store-home-head{background:#fff;color:var(--a-ink);border-bottom:1px solid var(--a-line);box-shadow:none}
html[data-surface="client"] .store-home-head :is(h1,h2){font:var(--text-heading);letter-spacing:-.02em;color:var(--a-ink)}
html[data-surface="client"] .store-home-head p{font:var(--text-body);color:var(--a-muted)}
html[data-surface="client"] .store-home-head .eyebrow{color:var(--a-muted)}
html[data-surface="client"] .store-home-head :is(button,a){background:#fff;color:var(--a-ink);border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);min-height:44px;box-shadow:none}
html[data-surface="client"] .section-title :is(h2,h3){font:var(--text-subheading);letter-spacing:-.01em}
html[data-surface="client"] .section-title :is(small,span:not(.eyebrow)){font:var(--text-small);color:var(--a-muted)}
html[data-surface="client"] .collecting-list-card{background:#fff;border:1px solid var(--a-line);border-radius:var(--a-radius);box-shadow:none;padding:16px 18px;color:var(--a-ink)}
@media(hover:hover) and (pointer:fine){html[data-surface="client"] .collecting-list-card:hover{border-color:var(--a-ink)}
}
html[data-surface="client"] .collecting-list-card h3{font:var(--text-title)}
html[data-surface="client"] .collecting-list-card p{font:var(--text-small);color:var(--a-muted)}
html[data-surface="client"] .collecting-list-card strong{font:var(--text-ui);font-weight:600;font-variant-numeric:tabular-nums}
html[data-surface="client"] .collecting-list-card span:not(.badge){font:var(--text-ui);font-weight:600;display:inline-flex;align-items:center;gap:4px}

/* 狀態標籤：與後台同款圓點膠囊 */
html[data-surface="client"] .badge{background:var(--a-canvas);color:var(--a-ink);border-radius:999px;font:var(--text-caption);font-weight:600;padding:4px 10px;display:inline-flex;align-items:center;gap:6px;border:0}
html[data-surface="client"] .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a-faint-ink);flex:none}
html[data-surface="client"] .badge.orange{color:var(--a-accent-text)}
html[data-surface="client"] .badge.orange::before{background:var(--a-accent)}
html[data-surface="client"] .badge.green::before{background:var(--a-success)}

/* 清單頁：主視覺改白底，截止時間用灰底膠囊 */
html[data-surface="client"] .hero,html[data-surface="client"] .list-campaign-hero{background:#fff;color:var(--a-ink);border-bottom:1px solid var(--a-line);box-shadow:none}
html[data-surface="client"] .list-campaign-hero::before,html[data-surface="client"] .list-campaign-hero::after{display:none}
html[data-surface="client"] .hero h1{font:var(--text-heading);letter-spacing:-.02em;color:var(--a-ink)}
html[data-surface="client"] .hero p{font:var(--text-body);color:var(--a-muted)}
html[data-surface="client"] :is(.list-deadline-pill,.countdown){background:var(--a-canvas);color:var(--a-ink);border:0;border-radius:999px;font:var(--text-small);font-weight:600}

/* 商品卡：髮絲線、12px 圓角、無陰影；「加入購物車」為一般按鈕（主要動作在底部購物車列） */
html[data-surface="client"] .product{background:#fff;border:1px solid var(--a-line);border-radius:var(--a-radius);box-shadow:none;overflow:hidden}
html[data-surface="client"] .product .flag{background:#fff;color:var(--a-ink);font:var(--text-caption);font-weight:600;border-radius:999px;box-shadow:0 2px 4px rgba(0,0,0,.18)}
html[data-surface="client"] .product .image-count{background:rgba(34,34,34,.72);color:#fff;font:var(--text-caption)}
html[data-surface="client"] .product-thumb{border-radius:var(--a-radius-sm);border:1px solid var(--a-line)}
html[data-surface="client"] .product-thumb.active{border:2px solid var(--a-ink)}
html[data-surface="client"] .product .sku{font:var(--text-small);color:var(--a-muted)}
html[data-surface="client"] .product-card-copy h3,html[data-surface="client"] .product-body h3{font:var(--text-title)}
html[data-surface="client"] .product .price{font:var(--text-ui);font-weight:600;font-variant-numeric:tabular-nums}
html[data-surface="client"] .product-card-add{background:#fff;color:var(--a-ink);border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);min-height:44px;padding:0 16px;font:var(--text-ui);font-size:14px;box-shadow:none}
@media(hover:hover) and (pointer:fine){html[data-surface="client"] .product-card-add:hover{border-color:var(--a-ink);background:var(--a-canvas)}
}

/* 底部購物車列：白底髮絲線，「去送出」是這個畫面的主要動作 */
html[data-surface="client"] .cartbar{background:#fff;color:var(--a-ink);border:1px solid var(--a-line);border-radius:var(--a-radius);box-shadow:var(--a-overlay)}
html[data-surface="client"] .cartbar b{font:var(--text-ui);font-weight:600;font-variant-numeric:tabular-nums}
html[data-surface="client"] .cartbar small{font:var(--text-small);color:var(--a-muted)}
html[data-surface="client"] .cartbar button{background:var(--a-accent-fill);color:#fff;border:0;border-radius:var(--a-radius-sm);min-height:44px;padding:0 20px;font:var(--text-ui);font-weight:600}

/* 商品筆記頁 */
html[data-surface="client"] .note-reference-top{background:#fff}
html[data-surface="client"] :is(.note-back,.note-cart,.note-share){color:var(--a-ink)}
html[data-surface="client"] .note-reference-meta,html[data-surface="client"] .note-content .sku{font:var(--text-small);color:var(--a-muted)}
html[data-surface="client"] .note-content h1,html[data-surface="client"] .note-reference-content h1{font:var(--text-heading);font-size:24px;letter-spacing:-.02em}
html[data-surface="client"] .note-reference-copy{font:var(--text-body);font-size:15px;line-height:1.7;color:var(--a-ink)}
html[data-surface="client"] .note-tag-chips>*{background:var(--a-canvas);color:var(--a-ink);border:0;border-radius:999px;font:var(--text-small)}
html[data-surface="client"] :is(.note-dots,.note-reference-dots) .active{background:var(--a-ink)}
html[data-surface="client"] .note-image-counter{background:rgba(34,34,34,.72);color:#fff;font:var(--text-caption)}
html[data-surface="client"] .note-transaction-bar{background:#fff;border:1px solid var(--a-line);border-radius:16px;box-shadow:0 -6px 20px rgba(0,0,0,.08)}
html[data-surface="client"] .note-transaction-bar :is(b,strong){font:var(--text-subheading);font-variant-numeric:tabular-nums}
html[data-surface="client"] .note-transaction-bar small{font:var(--text-small);color:var(--a-muted)}
html[data-surface="client"] .qty{border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);background:#fff;min-height:44px}
html[data-surface="client"] .qty button{min-width:44px;min-height:44px;background:transparent;border:0;color:var(--a-ink)}

/* 主要動作（每個畫面一顆）：珊瑚紅實心；其他按鈕白底細框 */
html[data-surface="client"] :is(.primary,.add){background:var(--a-accent-fill);color:#fff;border:1px solid var(--a-accent-fill);border-radius:var(--a-radius-sm);min-height:44px;font:var(--text-ui);font-weight:600;box-shadow:none}
@media(hover:hover) and (pointer:fine){html[data-surface="client"] :is(.primary,.add):hover:not(:disabled){background:var(--a-accent-fill-press);border-color:var(--a-accent-fill-press)}
}
html[data-surface="client"] :is(.primary,.add):disabled{background:var(--a-canvas);color:var(--a-muted);border-color:var(--a-canvas);opacity:1}
html[data-surface="client"] :is(.variant,.ghost-btn,.small-btn,.secondary){background:#fff;color:var(--a-ink);border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);min-height:44px;font:var(--text-ui);font-size:14px;box-shadow:none}
@media(hover:hover) and (pointer:fine){html[data-surface="client"] :is(.variant,.ghost-btn,.small-btn,.secondary):hover{border-color:var(--a-ink);background:var(--a-canvas)}
}

/* 彈窗：與後台相同規範；手機為底部抽屜 */
html[data-surface="client"] .modal-back{background:rgba(0,0,0,.45)}
html[data-surface="client"] .modal{background:#fff;border-radius:16px;box-shadow:var(--a-overlay);padding:0;overflow:auto;max-height:calc(100dvh - 48px)}
html[data-surface="client"] .modal>.modal-head{position:sticky;top:0;z-index:2;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--a-line)}
html[data-surface="client"] .modal-head h2{font:var(--text-subheading);letter-spacing:-.01em;margin:0}
html[data-surface="client"] .modal-head small{display:block;margin-top:4px;font:var(--text-small);color:var(--a-muted)}
html[data-surface="client"] .modal-head>button.close{width:44px;height:44px;border-radius:50%;background:var(--a-canvas);border:0;display:grid;place-items:center;color:var(--a-ink)}
html[data-surface="client"] .modal-head>button.close .lucide{width:18px;height:18px}
html[data-surface="client"] .modal>.modal-body{padding:20px}
html[data-surface="client"] .modal-body .notice,html[data-surface="client"] .notice{background:var(--a-canvas);color:var(--a-ink);border:0;border-radius:var(--a-radius-sm);font:var(--text-body)}
html[data-surface="client"] .summary{border-top:1px solid var(--a-line);font-variant-numeric:tabular-nums}
html[data-surface="client"] .summary .total{border-top:1px solid var(--a-ink);font:var(--text-title)}
html[data-surface="client"] .summary .total :is(b,strong){font:var(--text-subheading)}
html[data-surface="client"] .cart-variant-line,html[data-surface="client"] .cart-edit-line{background:var(--a-canvas);border-radius:var(--a-radius-sm)}
html[data-surface="client"] .cart-remove{color:var(--a-warn);background:#fff;border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);min-height:44px}
html[data-surface="client"] .cart-variant-line button:not(.cart-remove){min-width:44px;min-height:44px;background:#fff;border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);color:var(--a-ink)}
@media(max-width:560px){
  html[data-surface="client"] .modal-back:has(>.modal){align-items:flex-end;padding:0}
  html[data-surface="client"] .modal{width:100%;max-height:92dvh;border-radius:16px 16px 0 0}
  html[data-surface="client"] .modal>.modal-head{padding:16px}
  html[data-surface="client"] .modal>.modal-body{padding:16px}
}

/* 送出成功 */
html[data-surface="client"] .success-check{background:var(--a-success-soft);color:var(--a-success);border-radius:50%}
html[data-surface="client"] .success-totals{background:var(--a-canvas);border-radius:var(--a-radius);border:0}

/* 我的：摘要卡由深綠改白底髮絲線；匯款提示灰底；底部分頁與後台手機版同款 */
html[data-surface="client"] :is(.my-account-page,.my-account-view,.my-account-body){background:#fff}
html[data-surface="client"] .my-account-head{background:#fff;border-bottom:1px solid var(--a-line)}
html[data-surface="client"] .my-account-head h1,html[data-surface="client"] .my-account-head h2{font:var(--text-subheading);font-size:20px}
html[data-surface="client"] .my-account-back{background:var(--a-canvas);border:0;border-radius:50%;min-width:44px;min-height:44px;color:var(--a-ink)}
html[data-surface="client"] .my-account-body .detail-title :is(h2,h3),html[data-surface="client"] .my-order-management>:is(h2,h3){font:var(--text-subheading)}
html[data-surface="client"] .my-summary-card{background:#fff;color:var(--a-ink);border:1px solid var(--a-line);border-radius:var(--a-radius);box-shadow:none;overflow:hidden}
html[data-surface="client"] .my-summary-card>:first-child{background:#fff;color:var(--a-ink);border-bottom:1px solid var(--a-line)}
html[data-surface="client"] .my-summary-card :is(h2,h3,strong){color:var(--a-ink)}
html[data-surface="client"] .my-summary-card .eyebrow,html[data-surface="client"] .my-summary-card span{color:var(--a-muted)}
html[data-surface="client"] .my-order-row{border-bottom:1px solid var(--a-line)}
html[data-surface="client"] .my-order-row :is(b,strong){font:var(--text-ui);font-weight:600;font-variant-numeric:tabular-nums}
html[data-surface="client"] .my-order-row small{font:var(--text-small);color:var(--a-muted)}
html[data-surface="client"] .remittance-notice{background:var(--a-canvas);color:var(--a-ink);border-top:1px solid var(--a-line)}
html[data-surface="client"] .remittance-notice b{font:var(--text-ui);font-weight:600;color:var(--a-ink)}
html[data-surface="client"] .remittance-notice small{font:var(--text-small);color:var(--a-muted)}
html[data-surface="client"] .my-past-footer{background:var(--a-canvas);color:var(--a-muted)}
html[data-surface="client"] .line-account-card{background:var(--a-canvas);border:0;border-radius:var(--a-radius)}
html[data-surface="client"] .line-account-card>.lucide{color:var(--a-ink)}
html[data-surface="client"] .form-field label{font:var(--text-small);font-weight:600;color:var(--a-ink)}
html[data-surface="client"] .form-field :is(input,select,textarea){border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);background:#fff;font:var(--text-ui);font-weight:400;min-height:44px;color:var(--a-ink)}
html[data-surface="client"] .form-field :is(input,select,textarea):focus{outline:none;border-color:var(--a-ink);box-shadow:0 0 0 1px var(--a-ink)}
html[data-surface="client"] .field-help{font:var(--text-small);color:var(--a-muted)}
html[data-surface="client"] .my-account-tabs{background:#fff;border-top:1px solid var(--a-line);box-shadow:none}
html[data-surface="client"] .my-account-tabs button{min-height:56px;color:var(--a-muted);font:var(--text-caption);font-size:11px;background:transparent}
html[data-surface="client"] .my-account-tabs button.active{color:var(--a-accent-text);font-weight:600}
html[data-surface="client"] .my-account-tabs button.active .lucide{color:var(--a-accent)}

/* 提示訊息 */
html[data-surface="client"] .toast{background:var(--a-ink);color:#fff;border-radius:var(--a-radius-sm);font:var(--text-body);box-shadow:var(--a-overlay)}
html[data-surface="client"] .lucide.inline-icon{width:16px;height:16px;vertical-align:-3px}
html[data-surface="client"] .lucide.btn-icon{width:1.05em;height:1.05em;margin-right:4px;vertical-align:-.16em}
html[data-surface="client"] .qty .lucide,html[data-surface="client"] .cart-variant-line .lucide{width:18px;height:18px}
html[data-surface="client"] :is(.note-transaction-bar,.modal-body,.my-account-page,.cartbar) :is(.primary,.add){background:var(--a-accent-fill);border-color:var(--a-accent-fill);color:#fff}
@media(hover:hover) and (pointer:fine){html[data-surface="client"] :is(.note-transaction-bar,.modal-body,.my-account-page,.cartbar) :is(.primary,.add):hover:not(:disabled){background:var(--a-accent-fill-press);border-color:var(--a-accent-fill-press)}
}
html[data-surface="client"] :is(.note-transaction-bar,.modal-body,.my-account-page) :is(.primary,.add):disabled{background:var(--a-canvas);color:var(--a-muted);border-color:var(--a-canvas)}
html[data-surface="client"] .my-summary-card p{color:var(--a-muted);font:var(--text-body)}
html[data-surface="client"] .remittance-notice>:first-child,html[data-surface="client"] .remittance-notice :is(b,strong){color:var(--a-ink);font:var(--text-ui);font-weight:600}

/* =========================================================
   清單展示方式：雙欄卡片（list.displayMode = "grid"）
   左右交錯排列（保留商家排序），3:4 照片、無縮圖列；購物車按鈕浮在照片右下角
   ========================================================= */
.product-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:start;margin:12px 12px 0}
.product-grid-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.product.product-grid-card{position:relative;margin:0;container-type:inline-size;border-radius:12px}
.product.product-grid-card .product-image{height:auto;aspect-ratio:3/4;background-size:cover;background-position:center;border-radius:0}
.product.product-grid-card .flag{top:8px;left:8px;padding:3px 8px;font-size:11px}
.product.product-grid-card .product-body{padding:10px 10px 12px}
.product.product-grid-card .product-card-row{display:block}
.product.product-grid-card .product-card-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.product.product-grid-card .sku{font-size:11px;line-height:1.4}
.product.product-grid-card h3{font-size:14px;font-weight:500;line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product.product-grid-card .price strong{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.product.product-grid-card .product-card-add{position:absolute;right:8px;top:calc(133.333cqw - 52px);width:44px;height:44px;min-height:44px;min-width:0;padding:0;border:0;border-radius:50%;background:#fff;color:#222;box-shadow:0 2px 8px rgba(0,0,0,.18);display:grid;place-items:center}
@media(hover:hover) and (pointer:fine){.product.product-grid-card .product-card-add:hover{background:#f7f7f7}
}
.product.product-grid-card .grid-cart-icon{width:20px;height:20px}
.product.product-grid-card .cart-count-badge{position:absolute;top:-4px;right:-4px}

/* 預覽視窗：展示方式切換 */
.preview-display-toggle{position:absolute;top:16px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:4px;padding:4px;background:#fff;border:1px solid #dddddd;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.preview-display-toggle>span{padding:0 8px;font-size:13px;font-weight:600;color:#6a6a6a}
.preview-display-toggle button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:#222;font-size:14px;font-weight:500;cursor:pointer}
.preview-display-toggle button .lucide{width:16px;height:16px}
.preview-display-toggle button.active{background:#222;color:#fff;font-weight:600}
@media(max-width:560px){.preview-display-toggle{top:auto;bottom:96px;left:50%;transform:translateX(-50%)}}

/* 平台字標 Notedrop（與後台同一字標，客人端頂列尺寸較小） */
html[data-surface="client"] .brand.notedrop-wordmark{display:inline-flex;align-items:baseline;gap:0;font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;font-size:28px;line-height:1;letter-spacing:-.08em;color:#000;white-space:nowrap}
html[data-surface="client"] .notedrop-wordmark span{display:inline;font:inherit;letter-spacing:inherit}
html[data-surface="client"] .notedrop-wordmark .wm-drop{color:#ff385c}
@media(max-width:560px){html[data-surface="client"] .brand.notedrop-wordmark{font-size:24px}}

/* =========================================================
   店家首頁版型：A 清單優先（.home-lists）／B 選物牆（.home-wall）
   ========================================================= */
html[data-surface="client"] .home-v2 .topbar .my-account-button{margin-left:auto}
html[data-surface="client"] .home-v2 .client-store-home{padding:0 0 0}
html[data-surface="client"] .home-v2 .client-store-home>*:not(.home-cover){margin-left:20px;margin-right:20px}
/* 店家頭部 */
html[data-surface="client"] .home-store{display:flex;gap:14px;align-items:flex-start;padding:24px 0 8px}
html[data-surface="client"] .home-store h1{font:var(--text-heading);font-size:24px;margin:2px 0 4px}
html[data-surface="client"] .home-store p{font:var(--text-body);color:var(--a-muted);margin:0}
html[data-surface="client"] .home-logo{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--a-ink);color:#fff;font-size:22px;font-weight:700}
html[data-surface="client"] .home-store.centered{flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:16px}
html[data-surface="client"] .home-store.centered .home-logo{width:72px;height:72px;font-size:28px}
html[data-surface="client"] .home-store.with-cover{margin-top:-52px}
html[data-surface="client"] .home-store.with-cover .home-logo{border:4px solid #fff}
html[data-surface="client"] .home-cover{height:200px;background:var(--a-canvas) center/cover no-repeat}
/* 公告 */
html[data-surface="client"] .home-notice{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border-radius:var(--a-radius);background:var(--a-accent-soft)}
html[data-surface="client"] .home-notice span{flex:none;padding:2px 8px;border-radius:999px;background:#fff;color:var(--a-accent-text);font:var(--text-caption);font-weight:700}
html[data-surface="client"] .home-notice p{margin:0;font:var(--text-body)}
/* 區塊標題 */
html[data-surface="client"] .home-section-head{display:flex;justify-content:flex-start;align-items:center;gap:8px;padding:32px 0 12px}
html[data-surface="client"] .home-section-head h2{font:var(--text-subheading);font-size:20px;margin:0}
html[data-surface="client"] .home-section-head span{font:var(--text-body);color:var(--a-muted)}
/* A：清單卡 */
html[data-surface="client"] .home-list-cards{display:grid;gap:12px}
html[data-surface="client"] .home-list-card{display:grid;gap:8px;justify-items:start;width:100%;padding:16px;border:1px solid var(--a-line);border-radius:var(--a-radius);background:#fff;color:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
@media(hover:hover) and (pointer:fine){html[data-surface="client"] .home-list-card:hover{border-color:var(--a-line-strong);box-shadow:0 6px 16px rgba(0,0,0,.08)}
}
html[data-surface="client"] .home-list-card h3{font:var(--text-title);font-size:17px;font-weight:700;margin:0}
html[data-surface="client"] .home-list-card p{font:var(--text-body);color:var(--a-muted);margin:0}
html[data-surface="client"] .home-list-card>div{display:flex;justify-content:space-between;align-items:center;width:100%;padding-top:10px;border-top:1px solid var(--a-line)}
html[data-surface="client"] .home-list-card strong{font:var(--text-ui);font-size:14px}
html[data-surface="client"] .home-list-card>div span{display:inline-flex;align-items:center;gap:4px;font:var(--text-ui);font-size:14px;font-weight:700}
html[data-surface="client"] .home-list-card .inline-icon{width:16px;height:16px}
/* B：清單列 */
html[data-surface="client"] .home-list-rows{display:grid}
html[data-surface="client"] .home-list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:64px;padding:14px 0;border:0;border-top:1px solid var(--a-line);background:none;color:inherit;text-align:left;cursor:pointer}
html[data-surface="client"] .home-list-row:first-child{border-top:0}
html[data-surface="client"] .home-list-row h3{font:var(--text-title);margin:0}
html[data-surface="client"] .home-list-row small{font:var(--text-small);color:var(--a-accent-text)}
html[data-surface="client"] .home-list-row .lucide{width:20px;height:20px;flex:none}
/* 精選筆記：兩欄 3:4 */
html[data-surface="client"] .home-note-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
html[data-surface="client"] .home-note-card{display:grid;gap:4px;align-content:start;cursor:pointer;min-width:0}
html[data-surface="client"] .home-note-photo{position:relative;aspect-ratio:3/4;border-radius:var(--a-radius);background:var(--a-canvas) center/cover no-repeat;display:grid;place-items:center;margin-bottom:6px;overflow:hidden}
html[data-surface="client"] .home-note-photo>span{font:var(--text-small);color:var(--a-muted)}
html[data-surface="client"] .home-note-add{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--a-ink);box-shadow:0 2px 6px rgba(0,0,0,.16);cursor:pointer}
html[data-surface="client"] .home-note-add .lucide{width:18px;height:18px}
@media(hover:hover) and (pointer:fine){html[data-surface="client"] .home-note-add:hover{background:var(--a-canvas)}
}
html[data-surface="client"] .home-note-card small{font:var(--text-caption);font-weight:400;color:var(--a-muted)}
html[data-surface="client"] .home-note-card h3{font:var(--text-ui);font-size:14px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-surface="client"] .home-note-card b{font:var(--text-title);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
/* 加入社團 */
html[data-surface="client"] .home-join{display:grid;gap:10px;margin-top:32px;padding:16px;border:1px solid var(--a-line);border-radius:var(--a-radius)}
html[data-surface="client"] .home-join h2{font:var(--text-title);font-size:17px;font-weight:700;margin:0}
html[data-surface="client"] .home-join p{font:var(--text-body);color:var(--a-muted);margin:0}
html[data-surface="client"] .home-join-actions{display:flex;gap:8px;margin-top:2px}
html[data-surface="client"] .home-join-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);background:#fff;color:var(--a-ink);font:var(--text-ui);text-decoration:none}
@media(hover:hover) and (pointer:fine){html[data-surface="client"] .home-join-btn:hover{background:var(--a-canvas);border-color:var(--a-ink)}
}
html[data-surface="client"] .home-join-btn .dot{width:16px;height:16px;border-radius:50%;flex:none}
html[data-surface="client"] .home-join-btn .dot.line{background:#06c755}
html[data-surface="client"] .home-join-btn .dot.fb{background:#1877f2}
/* 頁尾 */
html[data-surface="client"] .home-v2 .client-store-home>.home-foot{margin:32px 0 0;padding:28px 20px;background:var(--a-canvas);text-align:center;font:var(--text-small);color:var(--a-muted)}
/* 首頁分頁：選品清單／精選筆記（收單中清單 3 份以上時） */
html[data-surface="client"] .home-tabs{position:sticky;top:var(--home-tabs-top,68px);z-index:5;display:flex;gap:24px;margin-top:24px;border-bottom:1px solid var(--a-line);background:#fff}
html[data-surface="client"] .home-tabs button{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0;border:0;background:none;color:var(--a-muted);font:var(--text-title);font-size:17px;cursor:pointer;box-shadow:inset 0 -2px 0 transparent;transition:color .15s ease,box-shadow .15s ease}
@media(hover:hover) and (pointer:fine){html[data-surface="client"] .home-tabs button:hover{color:var(--a-ink)}
}
html[data-surface="client"] .home-tabs button.active{color:var(--a-ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--a-ink)}
html[data-surface="client"] .home-tabs button span{font:var(--text-small);color:var(--a-muted);font-variant-numeric:tabular-nums}
html[data-surface="client"] .home-tab-panel{padding-top:16px}
@media(max-width:560px){html[data-surface="client"] .home-tabs{--home-tabs-top:62px}}

/* 店家首頁底部：未登入時固定 LINE 登入列（LINE 綠只用在 LINE 品牌按鈕） */
html[data-surface="client"] .home-login-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;gap:8px;max-width:520px;margin:0 auto;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--a-line);box-shadow:0 -6px 20px rgba(0,0,0,.06)}
html[data-surface="client"] .home-login-bar p{margin:0;text-align:center;font:var(--text-small);color:var(--a-muted)}
html[data-surface="client"] .home-line-login{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border-radius:var(--a-radius-sm);background:#06a74f;color:#fff;font:var(--text-ui);font-size:16px;font-weight:700;text-decoration:none}
html[data-surface="client"] .home-line-login:active{background:#05913f}
@media(hover:hover) and (pointer:fine){html[data-surface="client"] .home-line-login:hover{background:#05913f}}
html[data-surface="client"] .home-line-login .line-mark{display:inline-grid;place-items:center;height:22px;padding:0 6px;border-radius:6px;background:#fff;color:#06a74f;font-size:11px;font-weight:800;letter-spacing:.02em}
html[data-surface="client"] .has-login-bar .client-store-home{padding-bottom:110px}

/* 客人端內容區域背景 #FAFAFA（手機頁卡片與頂列維持白色） */
html[data-surface="client"] body,html[data-surface="client"] .shell,html[data-surface="client"] .phone-wrap{background:#fafafa}
html[data-surface="client"] .phone-page{background:#fff}
html[data-surface="client"] a.brand.notedrop-wordmark{text-decoration:none}

/* =========================================================
   客人端觸控尺寸（audit 2026-10-01）
   ========================================================= */
@media(max-width:900px){
  html[data-surface="client"] a.brand.notedrop-wordmark{padding:10px 0}
  html[data-surface="client"] .topbar :is(.icon-btn,.note-back,.my-account-button){min-width:44px;min-height:44px}
  html[data-surface="client"] .note-top :is(button,a){min-width:44px;min-height:44px}
  html[data-surface="client"] .product-thumbs button{min-width:44px;min-height:44px}
  /* 照片圓點：外觀不變，點擊範圍擴大到 36px */
  html[data-surface="client"] .note-dots button{position:relative}
  html[data-surface="client"] .note-dots button::before{content:"";position:absolute;inset:-14px}
}
/* LINE 登入按鈕：白字在 LINE 綠 #06a74f 上為 3.2:1，字級放大到 19px 粗體（大字標準 3:1） */
html[data-surface="client"] .home-line-login{font-size:19px}

/* 「我的」頁首右側的登出：白底細框次要按鈕 */
html[data-surface="client"] .my-account-head .my-account-logout{margin:0 0 0 auto;flex:none}
html[data-surface="client"] .my-account-head .my-account-logout button{min-height:44px;padding:0 16px;border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);background:#fff;color:var(--a-ink);font:var(--text-ui);cursor:pointer}
html[data-surface="client"] .my-account-head .my-account-logout button:active{background:var(--a-canvas)}
@media(hover:hover) and (pointer:fine){html[data-surface="client"] .my-account-head .my-account-logout button:hover{border-color:var(--a-ink)}}
/* 「我的 → 帳號資料」：聯絡人／電話在手機變成單欄時，欄距與其他欄位一致（欄位本身已有下方間距） */
html[data-surface="client"] .my-profile-form .grid-2{row-gap:0}

/* 店家首頁：有上傳 LOGO 時顯示圖片 */
html[data-surface="client"] .home-logo.has-image{background:#f7f7f7 center/cover no-repeat;color:transparent}
html[data-surface="client"] .store-logo.has-image{background:#f7f7f7 center/cover no-repeat}

/* 店家首頁「選品清單」卡片 v2（Figma 65:2） */
html[data-surface="client"] .home-list-card.home-list-card-v2{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:16px;overflow:hidden}
html[data-surface="client"] .home-list-card-v2 .hlc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;width:100%;padding:0;border:0}
html[data-surface="client"] .home-list-card-v2 .hlc-text{display:flex;flex-direction:column;gap:5px;min-width:0;line-height:1.4}
html[data-surface="client"] .home-list-card-v2 h3{margin:0;font:700 17px/1.4 var(--a-font-family);color:var(--a-ink);overflow-wrap:anywhere}
html[data-surface="client"] .home-list-card-v2 .hlc-text p{margin:0;font:400 14px/1.4 var(--a-font-family);color:var(--a-muted)}
/* 封面：81×81 的第一件商品照片，後方疊一張 67×67 淡灰卡（往右 7、往上 7 露出） */
html[data-surface="client"] .home-list-card-v2 .hlc-stack{position:relative;flex:none;width:81px;height:88px}
html[data-surface="client"] .home-list-card-v2 .hlc-stack-back{position:absolute;top:0;left:7px;width:67px;height:67px;border-radius:8.5px;background:#ededed}
html[data-surface="client"] .home-list-card-v2 .hlc-stack-front{position:absolute;top:7px;left:0;width:81px;height:81px;border-radius:8.5px;background:#d9d9d9 center/cover no-repeat}
html[data-surface="client"] .home-list-card-v2 .hlc-foot{display:flex;justify-content:space-between;align-items:center;width:100%;padding-top:10px;border-top:1px solid var(--a-line)}
html[data-surface="client"] .home-list-card-v2 .hlc-deadline{font:500 12px/1.4 var(--a-font-family);color:var(--a-ink);white-space:nowrap}
html[data-surface="client"] .home-list-card.home-list-card-v2 .hlc-foot>span.badge{font:500 12px/1.4 var(--a-font-family);padding:4px 10px;gap:6px}
html[data-surface="client"] .home-join-btn .home-join-icon{flex:none;display:block;width:24px;height:24px}

/* 已下架（關閉顧客下單）的商品：仍可閱讀，但沒有下單按鈕 */
html[data-surface="client"] .product.is-offsale .product-image{position:relative}
html[data-surface="client"] .product.is-offsale .product-image::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.45);pointer-events:none}
html[data-surface="client"] .product .offsale-flag{position:absolute;top:10px;left:10px;z-index:2;padding:3px 10px;border-radius:999px;background:var(--a-ink);color:#fff;font-size:12px;font-weight:600;line-height:1.5}
html[data-surface="client"] .product.is-offsale .product-image .flag{display:none}
html[data-surface="client"] .product .offsale-label{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:var(--a-radius-sm);background:var(--a-canvas);color:var(--a-muted);font-size:14px;font-weight:600;white-space:nowrap}
html[data-surface="client"] .note-transaction-bar.is-offsale{display:flex;align-items:center}
html[data-surface="client"] .note-transaction-bar.is-offsale>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html[data-surface="client"] .note-transaction-bar.is-offsale p{margin:0;color:var(--a-muted);font-size:14px}
html[data-surface="client"] .offsale-badge{display:inline-flex;padding:4px 12px;border-radius:999px;background:var(--a-ink);color:#fff;font-size:14px;font-weight:600}

/* 登入彈窗：「使用 LINE 登入」與「稍後再說」同寬同高。
   LINE 按鈕原本受 max-width:400px 與提示區 12px 內距限制，比下方滿寬的「稍後再說」窄一圈 */
html[data-surface="client"] .line-login-modal .line-auth-prompt{padding-left:0;padding-right:0;justify-items:stretch}
html[data-surface="client"] .line-login-modal .line-auth-prompt :is(h3,p,.line-logo){justify-self:center}
html[data-surface="client"] .line-login-modal .line-login-btn{max-width:none;width:100%;min-height:48px}
html[data-surface="client"] .line-login-modal .modal-body>button.variant{width:100%;min-height:48px}

/* 購物車彈窗：依 Figma「Notedrop/Customer/Cart modal」還原（500px 寬；商品卡＝灰底 12px 圓角、16px 內距、12px 間距；
   數量鈕與刪除鈕 44px；合計區無額外分隔，粗線後接「本次合計」；底部兩顆 44px 按鈕） */
html[data-surface="client"] .cart-modal{width:min(500px,calc(100vw - 32px))}
html[data-surface="client"] .cart-modal>.modal-head{padding:20px}
html[data-surface="client"] .cart-modal>.modal-head h2{font:var(--text-subheading);letter-spacing:var(--text-subheading-ls,-.01em)}
html[data-surface="client"] .cart-modal .modal-head>button.close{width:44px;height:44px;border-radius:var(--a-radius-sm);background:#fff;border:1px solid var(--a-line-strong)}
html[data-surface="client"] .cart-modal .modal-body{display:flex;flex-direction:column;gap:16px;padding:20px}
html[data-surface="client"] .cart-modal .cart-edit-line-variants{gap:12px;padding:16px;border:0;border-radius:var(--a-radius);background:var(--a-canvas)}
html[data-surface="client"] .cart-modal .cart-variant-heading b,html[data-surface="client"] .cart-modal .cart-variant-heading strong{font:var(--text-title)}
html[data-surface="client"] .cart-modal .cart-variant-lines{gap:0}
html[data-surface="client"] .cart-modal .cart-variant-line{padding:0;border:0;border-radius:0;background:none}
html[data-surface="client"] .cart-modal .cart-variant-line>span b{font:var(--text-ui)}
html[data-surface="client"] .cart-modal .cart-variant-line small{font:var(--text-small);color:var(--a-muted)}
html[data-surface="client"] .cart-modal .cart-edit-actions{gap:8px}
html[data-surface="client"] .cart-modal .cart-edit-actions button{min-width:44px;height:44px;border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);background:#fff;color:var(--a-ink)}
html[data-surface="client"] .cart-modal .cart-edit-actions>b{width:32px;font:var(--text-title);text-align:center}
html[data-surface="client"] .cart-modal .cart-edit-actions .cart-remove{width:auto;padding:0 16px;border-color:var(--a-warn);color:var(--a-warn);font-size:14px;font-weight:600}
html[data-surface="client"] .cart-modal .cart-variant-footer small{color:var(--a-muted)}
html[data-surface="client"] .cart-modal .cart-variant-footer .small-btn{color:var(--a-ink);font:var(--text-ui)}
html[data-surface="client"] .cart-modal .summary{gap:12px;padding:0;border-top:0}
html[data-surface="client"] .cart-modal .summary .total{padding-top:16px;border-top:1px solid var(--a-ink)}
html[data-surface="client"] .cart-modal .summary .total span{font:var(--text-subheading)}
html[data-surface="client"] .cart-modal .summary .total span+span{font:600 26px/1.2 var(--a-font-family);letter-spacing:-.02em}
html[data-surface="client"] .cart-modal .notice{padding:16px;border-radius:var(--a-radius);background:var(--a-canvas);color:var(--a-ink);font-weight:400}
html[data-surface="client"] .cart-modal :is(.add,.variant){margin-top:0;padding:0 16px;min-height:44px;border-radius:var(--a-radius-sm);font-size:14px;font-weight:600}
html[data-surface="client"] .cart-modal .variant{border:1px solid var(--a-line-strong);border-width:1px}

/* 首頁區塊標題的數量：依 Figma（209:878）改成標題右邊的 26px 圓形徽章，白底、1px #dadada 描邊、Inter Bold 13px 黑字，不再顯示「份／篇」單位（單位留在 aria-label） */
html[data-surface="client"] .home-section-head span.home-count{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:26px;height:26px;padding:3px;border:1px solid #dadada;border-radius:26px;background:#fff;color:#000;font:700 13px/normal Inter,var(--a-font-family);font-variant-numeric:tabular-nums}

/* 購物車：只有一個規格時，右邊數量控制已經顯示件數，底部「共 N 件」重複，隱藏並讓「加購商品」靠右；多規格時仍顯示合計件數 */
html[data-surface="client"] .cart-modal .cart-edit-line-variants:has(.cart-variant-line:only-child) .cart-variant-footer>small:first-child{display:none}
html[data-surface="client"] .cart-modal .cart-edit-line-variants:has(.cart-variant-line:only-child) .cart-variant-footer{justify-content:flex-end}

/* 商品卡大圖可左右滑動切換：保留直向捲動，禁止瀏覽器把橫向手勢當成頁面平移，滑鼠顯示可拖曳游標 */
html[data-surface="client"] .product-image[data-gallery-main]{touch-action:pan-y;user-select:none;-webkit-user-select:none}
html[data-surface="client"] .list-campaign-hero{position:relative}
html[data-surface="client"] .list-campaign-hero .list-share-btn{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--a-ink);cursor:pointer}
html[data-surface="client"] .list-campaign-hero .list-share-btn .lucide{width:24px;height:24px}
html[data-surface="client"] .note-reference-top{padding-left:12px;padding-right:12px}
html[data-surface="client"] .note-reference-top .shop-home-link{margin-left:-8px}