/* =============================================================================
   2meet InfoCards — 公開前端樣式
   設計系統：CSS Variables（PRD 5.1）
   ============================================================================= */

/* --- Design Tokens (v6.5.3 Morandi Muse / DESIGN.md v2.5) ---------------- */
/* Layering：Vendor Custom（inline / <style id="tmeetic-profile-vars">）     */
/*         > System Theme Style（wp_2meet_theme_styles）                     */
/*         > Morandi Muse tokens（morandi-design-system.css）                */
/*         > HEX 備援（本檔 fallback 值，v2.5 對齊）                          */
:root {
  /* 告知瀏覽器本站僅支援亮色模式，阻止 IAB / Force Dark Mode 套用暗黑 token */
  color-scheme: light;

  /* ── 品牌色（Morandi Muse）───────────────────────────────────────────── */
  --2meet-primary:      var(--color-green-primary, #A8B9A4);   /* 莫蘭迪綠 */
  --2meet-accent:       var(--color-pink-primary, #D4AFAB);    /* 藕粉 — v2.5 情感強調 */

  /* ── 語義背景（v2.5 象牙白系）─────────────────────────────────────────── */
  --2meet-bg:           var(--color-bg-primary, #FFFEFA);      /* 象牙白 */
  --2meet-surface:      var(--color-bg-secondary, #FAF9F6);    /* 暖棉白 — 卡片底色 */

  /* ── 語義文字 ─────────────────────────────────────────────────────────── */
  --2meet-text:         var(--color-text-primary, #3A3530);    /* 深暖棕 */
  --2meet-muted:        var(--color-text-tertiary, #7A736A);   /* 暖灰棕 */

  /* ── Separator / Border ──────────────────────────────────────────────── */
  --2meet-border:       var(--color-bg-divider, #E8E3D9);
  --ios-separator:      var(--color-bg-divider, #E8E3D9);
  --ios-separator-dark: rgba(84, 84, 88, 0.65);

  /* ── Fill（互動底色）─────────────────────────────────────────────────── */
  --ios-fill:           rgba(120, 120, 128, 0.12);
  --ios-fill-active:    rgba(120, 120, 128, 0.20);

  /* ── 系統色（對齊 Morandi Muse 五色和諧）──────────────────────────────── */
  --ios-blue:           var(--color-blue-primary, #9EB3C2);    /* 霧霾藍 */
  --ios-green:          var(--color-green-primary, #A8B9A4);   /* 莫蘭迪綠 */
  --ios-orange:         var(--color-apricot-primary, #D9C4AA); /* 暖杏奶 */
  --ios-red:            var(--color-error, #C4897A);           /* 赤陶磚 */
  --ios-purple:         var(--color-purple-mist, #BDB1BD);     /* 淡紫霧 — v2.5 知性點綴 */

  /* ── 卡片陰影（暖棕色調，v2.5 §4.2）─────────────────────────────────── */
  --2meet-shadow:       var(--shadow-sm, 0 1px 4px rgba(58,53,48,0.05), 0 2px 6px rgba(58,53,48,0.03));
  --2meet-shadow-hover: var(--shadow-hover, 0 8px 24px rgba(168,185,164,0.22), 0 4px 8px rgba(168,185,164,0.12));

  /* ── 間距 ────────────────────────────────────────────────────────────── */
  --2meet-space-xs:     var(--space-2, 8px);
  --2meet-space-sm:     var(--space-4, 16px);
  --2meet-space-md:     var(--space-6, 24px);
  --2meet-space-lg:     var(--space-12, 48px);

  /* ── 字體（DESIGN.md §3.1 — 跳脫 reflex_fonts；display: PP Editorial New / body: PP Neue Montreal）── */
  --2meet-font-base:    var(--font-family-body, 'PP Neue Montreal', 'Noto Sans TC', 'PingFang TC', sans-serif);
  --2meet-font-display: var(--font-family-display, 'PP Editorial New', 'Inria Serif', 'Noto Serif TC', serif);
  --2meet-font-size:    16px;
  --2meet-line-height:  1.5;

  /* ── 圓角（Morandi radius scale，v2.5 §4.2）──────────────────────────── */
  --2meet-radius-card:  var(--radius-lg, 14px);
  --2meet-radius-btn:   var(--radius-md, 10px);
  --2meet-radius-input: var(--radius-md, 10px);
  --2meet-radius-pill:  var(--radius-full, 9999px);
  --2meet-radius-icon:  var(--radius-sm, 6px);

  /* ── 動畫 ────────────────────────────────────────────────────────────── */
  --2meet-transition:   var(--duration-normal, 0.2s) var(--ease-default, ease);

  /* ── 陰影層級（暖棕色調 fallback）──────────────────────────────────── */
  --2meet-shadow-sm:    var(--shadow-sm, 0 1px 4px rgba(58,53,48,0.05), 0 2px 6px rgba(58,53,48,0.03));
  --2meet-shadow-md:    var(--shadow-md, 0 4px 12px rgba(58,53,48,0.07), 0 2px 4px rgba(58,53,48,0.04));
  --2meet-shadow-lg:    var(--shadow-lg, 0 8px 24px rgba(58,53,48,0.09), 0 4px 8px rgba(58,53,48,0.05));

  /* ── Focus Ring ──────────────────────────────────────────────────────── */
  --2meet-focus-ring:   0 0 0 3px rgba(168,185,164,0.25);

  /* ── IG 品牌元素 ─────────────────────────────────────────────────────────── */
  --2meet-gradient-ig:  linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);

  /* ── LINE 品牌色 ─────────────────────────────────────────────────────────── */
  --2meet-line-green:   #06C755;
  --2meet-line-text:    #FFFFFF;

  /* ── 語義狀態色（B5 — Layer 2 補齊）─────────────────────────────────────── */
  --2meet-success:      var(--color-success, #198754);  /* 成功狀態（按鈕已儲存等）*/
  --2meet-rating:       var(--color-warning, #F5A623);  /* 評分星色 */

  /* ── 社群品牌色（B5 — 唯一定義點，禁止再下游硬編碼）────────────────────── */
  --2meet-social-youtube:  #FF0000;
  --2meet-social-tiktok:   #010101;
  --2meet-social-x:        oklch(8% 0.005 270);  /* X (Twitter) */
  --2meet-social-facebook: #1877F2;
  --2meet-social-threads:  #0D0D0D;
}

/* --- 卡片容器 --------------------------------------------------------------- */
.tmeetic-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;                    /* iOS 卡片間距 */
  max-width: 480px;
  margin: var(--2meet-space-md) auto;
  padding: 0 var(--2meet-space-sm);
  font-family: var(--2meet-font-base);
  font-size: var(--2meet-font-size);
  line-height: var(--2meet-line-height);
  color: var(--2meet-text);
}

/* --- 基礎卡片（iOS Elevated Card Style）------------------------------------- */
.tmeetic-card {
  background: var(--2meet-bg);
  border-radius: var(--2meet-radius-card);        /* 16px 圓角 */
  box-shadow: var(--2meet-shadow);                /* 細緻陰影 */
  overflow: hidden;
  border: none;
  border-bottom: none;
  padding-bottom: 0;
  transition:
    box-shadow var(--2meet-transition),
    opacity var(--2meet-transition),
    transform 0.1s ease;
}

.tmeetic-card:last-child {
  border-bottom: none;
}

/* 隱藏外框：優先於風格設定（含 Vendor 自訂 CSS 變數） */
.tmeetic-card--no-border {
  background:    transparent !important;
  box-shadow:    none        !important;
  border-radius: 0           !important;
  padding:       0           !important;
}

.tmeetic-card:hover {
  box-shadow: var(--2meet-shadow-hover);
  opacity: 1;
}

.tmeetic-card:active {
  opacity: 0.70;                                  /* iOS 標準按壓回饋 */
  transform: scale(0.98);
}

.tmeetic-card__image-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 0;                               /* 父卡片 overflow:hidden 自動裁切 */
}

.tmeetic-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.tmeetic-card__body {
  padding: var(--2meet-space-sm);
}

/* ── 圖片靠左 ────────────────────────────────────────────── */
.tmeetic-card--img-left,
.tmeetic-card--img-right {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.tmeetic-card--img-right {
  flex-direction: row-reverse;
}

.tmeetic-card--img-left .tmeetic-card__image-wrap,
.tmeetic-card--img-right .tmeetic-card__image-wrap {
  width: 32%;
  flex-shrink: 0;
  border-radius: 0;
}

.tmeetic-card--img-left .tmeetic-card__image-wrap {
  border-radius: var(--2meet-radius-card);
}

.tmeetic-card--img-right .tmeetic-card__image-wrap {
  border-radius: var(--2meet-radius-card);
}

.tmeetic-card--img-left .tmeetic-card__image,
.tmeetic-card--img-right .tmeetic-card__image {
  height: 100%;
  min-height: 120px;
}

.tmeetic-card--img-left .tmeetic-card__body,
.tmeetic-card--img-right .tmeetic-card__body {
  flex: 1;
  min-width: 0;
}

.tmeetic-card__title {
  font-size: 1rem;                                /* iOS Headline */
  font-weight: 600;                               /* iOS semibold */
  margin: 0 0 4px;
  color: var(--2meet-text);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.tmeetic-card__description {
  font-size: 0.875rem;                            /* iOS Footnote */
  font-weight: 400;
  color: var(--2meet-muted);
  margin: 0 0 var(--2meet-space-sm);
  line-height: 1.4;
}

/* --- CTA 按鈕（iOS Primary Button Style）------------------------------------ */
.tmeetic-card__cta {
  display: block;
  width: 100%;
  padding: 14px var(--2meet-space-md);            /* iOS 標準觸控目標 50px */
  border: none;
  border-radius: var(--2meet-radius-pill);        /* 膠囊形（App Store / IG 風格）*/
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  transition: opacity var(--2meet-transition), transform 0.1s ease;
  box-sizing: border-box;
  line-height: 1.5;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tmeetic-card__cta:hover,
.tmeetic-card__cta:focus {
  opacity: 0.85;
  text-decoration: none;
}

.tmeetic-card__cta:active {
  opacity: 0.70;                                  /* iOS 按壓回饋 */
  transform: scale(0.97);
}


/* --- 共用工具元件（跨前台／後台）----------------------------------------- */

/* Status badges */
.tmeetic-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--2meet-radius-pill);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.tmeetic-badge--gray    { background: var(--color-gray-light); color: var(--color-text-tertiary); }
.tmeetic-badge--yellow  { background: var(--color-apricot-lightest); color: #856404; }
.tmeetic-badge--blue    { background: var(--color-blue-lightest); color: var(--color-blue-dark); }
.tmeetic-badge--green   { background: var(--color-green-lightest); color: var(--color-green-dark); }
.tmeetic-badge--red     { background: var(--color-pink-lightest); color: var(--color-pink-dark); }
.tmeetic-badge--orange  { background: var(--color-apricot-lightest); color: var(--color-apricot-dark); }

/* iOS 語義色（v4.2.0 新增） */
.tmeetic-badge--success { background: var(--ios-green);  color: var(--color-text-inverse, #FAF3E3); }
.tmeetic-badge--warning { background: var(--ios-orange); color: var(--color-text-inverse, #FAF3E3); }
.tmeetic-badge--error   { background: var(--ios-red);    color: var(--color-text-inverse, #FAF3E3); }
.tmeetic-badge--info    { background: var(--ios-blue);   color: var(--color-text-inverse, #FAF3E3); }
.tmeetic-badge--muted   { background: var(--2meet-surface); color: var(--2meet-muted); border: 1px solid var(--2meet-border); }

/* Pagination */
.tmeetic-orders__pagination {
  display: flex;
  align-items: center;
  gap: var(--2meet-space-sm);
  justify-content: center;
  margin-top: var(--2meet-space-md);
}

.tmeetic-orders__page-info {
  font-size: 14px;
  color: var(--2meet-muted);
}

/* --- Dashboard 按鈕系統（v4.2.0，4 層）--------------------------------------- */

/* 基礎類別：所有 .tmeetic-btn 共用 */
.tmeetic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--2meet-radius-btn);
  font-family: var(--2meet-font-base);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition:
    opacity var(--2meet-transition),
    background var(--2meet-transition),
    border-color var(--2meet-transition);
  /* 無明確 modifier 時，預設為 secondary 外觀 */
  background: var(--2meet-surface);
  color: var(--2meet-text);
  border-color: var(--2meet-border);
}

.tmeetic-btn:hover {
  background: var(--ios-fill);
  text-decoration: none;
  color: var(--2meet-text);
}

.tmeetic-btn:active {
  opacity: 0.7;
  transform: scale(0.98);
}

/* Primary — 主要操作（藍底白字） */
.tmeetic-btn--primary {
  background: var(--2meet-primary);
  color: var(--color-text-inverse, #FAF3E3);
  border-color: var(--2meet-primary);
}

.tmeetic-btn--primary:hover {
  opacity: 0.88;
  color: var(--color-text-inverse, #FAF3E3);
  background: var(--2meet-primary);
}

/* Secondary — 次要操作（已是 base 預設，可顯式標記） */
.tmeetic-btn--secondary {
  background: var(--2meet-surface);
  color: var(--2meet-text);
  border-color: var(--2meet-border);
}

/* Tertiary — 文字按鈕（無底色） */
.tmeetic-btn--tertiary {
  background: transparent;
  color: var(--2meet-primary);
  border-color: transparent;
}

.tmeetic-btn--tertiary:hover {
  background: var(--ios-fill);
  color: var(--2meet-primary);
}

/* Danger — 危險操作（紅底白字） */
.tmeetic-btn--danger {
  background: var(--ios-red);
  color: var(--color-text-inverse, #FAF3E3);
  border-color: var(--ios-red);
}

.tmeetic-btn--danger:hover {
  opacity: 0.88;
  color: var(--color-text-inverse, #FAF3E3);
  background: var(--ios-red);
}

/* Disabled 狀態 */
.tmeetic-btn--disabled,
.tmeetic-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Small variant */
.tmeetic-btn--sm {
  font-size: 13px;
  padding: 5px 12px;
}

/* --- 響應式（iOS 小螢幕調整）--------------------------------------------------- */
@media (max-width: 480px) {
  .tmeetic-cards {
    padding: 0 12px;
    gap: 10px;
  }

  .tmeetic-card__body {
    padding: var(--2meet-space-sm);
  }

  .tmeetic-card__image {
    height: 160px;
  }

  /* 小螢幕卡片圓角微調 */
  .tmeetic-card,
  .tmeetic-card--social {
    border-radius: var(--radius-lg);
  }
}

/* --- HivePress Vendor Profile：方案 Z 整合版面 ------------------------------ */

/*
 * 目標 body class（ExpertHive 注入）：
 *   hp-template--vendor-view-page  → 確認是 vendor 頁
 *   hp-template--page-sidebar-left → 原本的左側欄佈局（我們要覆蓋）
 */

/* 1. 整頁單欄化：hp-row 由 flex-row 改為 flex-column */
body.hp-template--vendor-view-page .hp-row {
  flex-direction: column !important;
  align-items: center !important;
}

body.hp-template--vendor-view-page .hp-page__sidebar,
body.hp-template--vendor-view-page .hp-page__content {
  width: 100% !important;
  max-width: 560px !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* 1b. Experts 列表頁：Avatar 強制 1:1 防止橢圓形（v5.0.0 F3）*/
.hp-vendor--view-block .hp-vendor__image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 2. Vendor 識別區（aside.hp-page__sidebar）：置中、去掉 widget 外框 */
body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__summary {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--2meet-space-md) 0 0 !important;
  text-align: center;
}

body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__image {
  display: flex;
  justify-content: center;
  margin-bottom: var(--2meet-space-sm);
}

body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__image img {
  border-radius: 50%;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 3px solid #ffffff;   /* 第二圈：白色間距 */
  box-shadow: 0 0 0 1px var(--2meet-border, #EFEFEF); /* 外圈：1px 分隔線色 */
}

body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__name {
  font-size: 1.25rem;                             /* iOS Large Title 縮版 */
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__description {
  font-size: 0.875rem;                            /* iOS Footnote */
  color: var(--2meet-muted);
  max-width: 360px;
  margin: 0 auto var(--2meet-space-sm);
  line-height: 1.45;
}

/* 3. Send Message 按鈕：置中 */
body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__actions {
  justify-content: center !important;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

/* 4. 隱藏次要 meta（Member since 等，避免冗餘） */
body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__attributes--secondary,
body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__details--primary {
  display: none;
}

/* 4b. 停用 HivePress sticky-sidebar（單欄佈局下 position:fixed 會造成跑位）
 *     sticky-sidebar.js 對 .inner-wrapper-sticky 寫入 position:fixed inline style，
 *     用 !important 覆蓋使其恢復 static 文件流。 */
body.hp-template--vendor-view-page .inner-wrapper-sticky {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  transform: none !important;
}

/* 5. InfoCards 搬移後的外層容器
 * width:100% 確保在 flex-column + align-items:center 內拉伸至與 .hp-page__sidebar 同寬，
 * 解決卡片比 Send Message 等 HP 按鈕窄的問題。 */
.tmeetic-vendor-profile-cards {
  width: 100%;
  box-sizing: border-box;
  max-width: 560px;
  margin: var(--2meet-space-md) auto 0;
  padding: 0 var(--2meet-space-sm);
}

/* 5b. HP Vendor Profile 內的 .tmeetic-cards：移除雙重 padding
 *     外層 .tmeetic-vendor-profile-cards 已有 0 16px padding，
 *     內層不需再加，避免卡片被擠窄。 */
body.hp-template--vendor-view-page .tmeetic-cards {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* JS 搬移前先隱藏（HP block 將卡片渲染在 .hp-page__content 內），防止閃現。
 * 規則只限定在 .hp-page__content 內部，一旦 JS 將元素搬移到
 * .tmeetic-vendor-profile-cards（aside 的 afterend sibling），
 * 此規則即不再匹配，卡片自動恢復可見，不需要 JS 額外操作。 */
body.hp-template--vendor-view-page .hp-page__content .tmeetic-cards {
  visibility: hidden;
  pointer-events: none;
}

/* 6. HP 供應商資料折疊區（<details> 由 JS 建立） */
.tmeetic-hp-profile-more {
  max-width: 560px;
  margin: var(--2meet-space-md) auto var(--2meet-space-lg);
  padding: 0 var(--2meet-space-sm);
}

.tmeetic-hp-profile-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px var(--2meet-space-sm);
  background: var(--ios-fill);                    /* iOS 填充背景 */
  border: 0.5px solid var(--ios-separator);
  border-radius: var(--2meet-radius-pill);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--2meet-muted);
  list-style: none;
  user-select: none;
  min-height: 44px;
  transition: background var(--2meet-transition);
}

.tmeetic-hp-profile-more > summary:hover {
  background: var(--ios-fill-active);
  color: var(--2meet-text);
}

/* 移除瀏覽器預設的 details marker */
.tmeetic-hp-profile-more > summary::-webkit-details-marker { display: none; }
.tmeetic-hp-profile-more > summary::marker { display: none; }

.tmeetic-hp-profile-more[open] > summary {
  border-radius: var(--2meet-radius-card) var(--2meet-radius-card) 0 0;
  border-bottom-color: var(--2meet-surface);
}

.tmeetic-hp-profile-more__content {
  border: 1px solid var(--2meet-border);
  border-top: none;
  border-radius: 0 0 var(--2meet-radius-card) var(--2meet-radius-card);
  padding: var(--2meet-space-md);
  background: var(--2meet-bg);
}

/* 讓折疊內容裡的 HP 元素恢復正常寬度 */
.tmeetic-hp-profile-more__content .hp-block,
.tmeetic-hp-profile-more__content .hp-listing {
  max-width: none;
}

/* --- Profile Quick Nav（服務 / 預約 / 課程 / 品牌故事）--------------------- */

.tmeetic-profile-quick-nav {
  max-width: 560px;
  margin: 8px auto 0;
  padding: 0 var(--2meet-space-sm, 16px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Quick nav 內每個 details 取消原本的 margin，改由 gap 統一控制 */
.tmeetic-profile-quick-nav .tmeetic-hp-profile-more {
  margin: 0;
}

/* Preview List —— 清單容器 */
.tmeetic-preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Preview Item —— 單筆資料列 */
.tmeetic-preview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--2meet-border);
}

.tmeetic-preview-item:last-child {
  border-bottom: none;
}

/* 縮圖 */
.tmeetic-preview-item__thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--2meet-surface);
}

/* 服務列表專用：較大縮圖（80px）搭配 3 行資訊 */
.tmeetic-preview-item--service {
  align-items: flex-start;
  padding: 12px 0;
}

.tmeetic-preview-item--service .tmeetic-preview-item__thumb-wrap {
  display: block;
  flex-shrink: 0;
}

.tmeetic-preview-item--service .tmeetic-preview-item__thumb {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  display: block;
}

.tmeetic-preview-item--service .tmeetic-preview-item__thumb--empty {
  width: 80px;
  height: 80px;
}

.tmeetic-preview-item__thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--2meet-surface, #f8f9fa);
  border: 1px solid var(--2meet-border, #efefef);
  border-radius: var(--radius-sm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  font-size: 0; /* hide emoji */
  color: transparent;
}

/* 文字區 */
.tmeetic-preview-item__body {
  flex: 1;
  min-width: 0;
}

.tmeetic-preview-item__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--2meet-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
a.tmeetic-preview-item__title:hover {
  color: var(--2meet-primary);
  text-decoration: underline;
}

/* 分類 + 日期列 */
.tmeetic-preview-item__attrs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 4px;
}

/* 課程時長（clock icon 前綴） */
.tmeetic-preview-item__duration {
  font-size: 11px;
  color: var(--2meet-muted, #6c757d);
  white-space: nowrap;
}

.tmeetic-preview-item__duration::before {
  content: '⏱ ';
  font-style: normal;
}

.tmeetic-preview-item__category {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--2meet-primary, #A8B9A4);
  background: color-mix(in oklch, var(--2meet-primary) 8%, transparent);
  padding: 1px 7px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.tmeetic-preview-item__date {
  font-size: 11px;
  color: var(--2meet-muted, #6c757d);
  white-space: nowrap;
}

/* 金額 */
.tmeetic-preview-item__price {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--2meet-primary, #A8B9A4);
  margin-top: 4px;
}

.tmeetic-preview-item__meta {
  display: block;
  font-size: 12px;
  color: var(--2meet-muted);
  margin-top: 2px;
}

/* 行動按鈕（查看 / 立即預約 / 查看課程） */
.tmeetic-preview-item__action {
  font-size: 12px;
  font-weight: 600;
  color: var(--2meet-primary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.tmeetic-preview-item__action:hover {
  text-decoration: underline;
}

/* 查看全部連結 */
.tmeetic-preview-list__more {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  color: var(--2meet-primary);
  text-decoration: none;
}

.tmeetic-preview-list__more:hover {
  text-decoration: underline;
}

/* --- 獨立落地頁 (Standalone Page) / /@vendor/ / /vendor/ ------------------- */
.tmeetic-standalone-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--2meet-surface);
}

.tmeetic-standalone-page {
  max-width: 480px;
  margin: 0 auto;
  /* 上下保留呼吸空間；水平 padding 作為全頁唯一邊距（子元素不再重複） */
  padding: var(--2meet-space-md) var(--2meet-space-sm) var(--2meet-space-lg);
  font-family: var(--2meet-font-base);
  font-size: var(--2meet-font-size);
  line-height: var(--2meet-line-height);
  color: var(--2meet-text);
  box-sizing: border-box;
}

/* Standalone page 內的 .tmeetic-cards：移除雙重 padding
 * 外層 .tmeetic-standalone-page 已有 0 16px padding，
 * 不需再在 .tmeetic-cards 加一次水平 padding。 */
.tmeetic-standalone-page .tmeetic-cards {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.tmeetic-standalone-page__header {
  text-align: center;
  padding: var(--2meet-space-sm) 0 var(--2meet-space-sm);
  height: auto;                                      /* 防止主題 CSS 對 <header> 標籤設定固定高度 */
  overflow: visible;
}

.tmeetic-standalone-page__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ffffff;   /* 第二圈：白色間距 */
  box-shadow: 0 0 0 1px var(--2meet-border, #EFEFEF); /* 外圈：1px 分隔線色 */
  display: block;
  margin: 0 auto var(--2meet-space-sm);
}

.tmeetic-standalone-page__name {
  font-size: 1.375rem;                            /* 略大，品牌感更強 */
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--2meet-text);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.tmeetic-standalone-page__bio {
  font-size: 0.9rem;
  color: var(--2meet-muted);
  margin: 0 auto var(--2meet-space-md);
  max-width: 100%;                                /* 不再被 360px 截斷 */
  line-height: 1.5;
  height: auto;
  max-height: none;
  overflow: visible;
  -webkit-line-clamp: unset;                      /* 防止任何繼承的截斷 */
}

.tmeetic-standalone-page__bio p {
  margin: 0 0 0.75em;                             /* wpautop 生成的 <p> 標籤間距 */
}

.tmeetic-standalone-page__bio p:last-child {
  margin-bottom: 0;
}

.tmeetic-standalone-page__social-links {
  display: flex;
  justify-content: center;
  margin: 8px 0 4px;
  width: 100%;
}

.tmeetic-standalone-page__social-links .hp-social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.tmeetic-standalone-page__social-links .hp-social-links__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--2meet-muted);
  text-decoration: none;
}

.tmeetic-standalone-page__social-links .hp-social-links__item img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.tmeetic-standalone-page__empty {
  text-align: center;
  color: var(--2meet-muted);
  padding: var(--2meet-space-lg) 0;
}

/* Dark theme override（iOS Dark Mode 語義色彩）*/
.tmeetic-standalone-wrap[data-theme="dark"] {
  /* iOS Dark Mode 語義色 */
  --2meet-bg:           #1C1C1E;                  /* iOS systemBackground dark */
  --2meet-surface:      #000000;                  /* iOS systemGroupedBackground dark */
  --2meet-text:         #FFFFFF;                  /* iOS label dark */
  --2meet-muted:        rgba(235,235,245,0.60);   /* iOS secondaryLabel dark */
  --2meet-border:       rgba(84,84,88,0.36);      /* iOS separator dark */
  --ios-separator:      rgba(84,84,88,0.65);
  --ios-fill:           rgba(120,120,128,0.20);
  --ios-fill-active:    rgba(120,120,128,0.32);
  --2meet-shadow:       0 1px 3px rgba(0,0,0,0.40);
  --2meet-shadow-hover: 0 4px 16px rgba(0,0,0,0.50);
  background: #000000;
  color: #FFFFFF;
}

.tmeetic-standalone-wrap[data-theme="dark"] .tmeetic-standalone-page__name,
.tmeetic-standalone-wrap[data-theme="dark"] .tmeetic-card__title {
  color: #FFFFFF;
}

.tmeetic-standalone-wrap[data-theme="dark"] .tmeetic-card {
  background: var(--2meet-bg);
  box-shadow: var(--2meet-shadow);
}

/* =============================================================================
   Dark Mode — @media (prefers-color-scheme: dark)  v4.4.0
   iOS HIG Dark Mode 語義色對照：
     systemBackground      #000000
     systemGroupedBackground #1C1C1E
     label                 #FFFFFF
     secondaryLabel        rgba(235,235,245,0.60)
     separator             rgba(84,84,88,0.65)
   ============================================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    /* ── 背景 ─────────────────────────────────────────────────────────────── */
    --2meet-bg:           #000000;                /* iOS systemBackground dark */
    --2meet-surface:      #1C1C1E;               /* iOS systemGroupedBackground dark */

    /* ── 文字 ─────────────────────────────────────────────────────────────── */
    --2meet-text:         #FFFFFF;               /* iOS label dark */
    --2meet-muted:        rgba(235,235,245,0.60);/* iOS secondaryLabel dark */

    /* ── 邊框 ─────────────────────────────────────────────────────────────── */
    --2meet-border:       rgba(84,84,88,0.65);   /* iOS separator dark */
    --ios-separator:      rgba(84,84,88,0.65);
    --ios-fill:           rgba(120,120,128,0.36);
    --ios-fill-active:    rgba(120,120,128,0.48);

    /* ── 品牌色（暗底提亮，符合 WCAG AA）─────────────────────────────────── */
    --2meet-primary:      #5B8BE0;               /* 亮藍，暗底對比 4.6:1 */
    --2meet-accent:       #FF7B47;               /* 亮橙，暗底對比 4.5:1 */

    /* ── 陰影（暗底改用 overlay border 感覺）──────────────────────────────── */
    --2meet-shadow:       0 0 0 1px rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.50);
    --2meet-shadow-hover: 0 0 0 1px rgba(255,255,255,0.12), 0 4px 16px rgba(0,0,0,0.70);
    --2meet-shadow-sm:    0 0 0 1px rgba(255,255,255,0.06);
    --2meet-shadow-md:    0 0 0 1px rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.40);
    --2meet-shadow-lg:    0 0 0 1px rgba(255,255,255,0.10), 0 8px 24px rgba(0,0,0,0.60);

    /* ── Focus Ring（暗底）────────────────────────────────────────────────── */
    --2meet-focus-ring:   0 0 0 3px rgba(91,139,224,0.35);
  }

  /* ── Story 頁面 ─────────────────────────────────────────────────────────── */
  .tmeetic-story-page {
    background: var(--2meet-bg);
    color: var(--2meet-text);
  }

  .tmeetic-story__title,
  .tmeetic-story__description {
    color: var(--2meet-text);
  }

  .tmeetic-story__cover {
    opacity: 0.90;
  }

  /* ── Countdown 卡片暗底 ─────────────────────────────────────────────────── */
  .tmeetic-card__countdown-unit {
    background: var(--2meet-surface);
    color: var(--2meet-text);
  }

  /* ── 訂閱表單 ───────────────────────────────────────────────────────────── */
  .tmeetic-subscribe-form input[type="email"],
  .tmeetic-subscribe-form input[type="text"] {
    background: var(--2meet-surface);
    color: var(--2meet-text);
    border-color: var(--2meet-border);
  }

  .tmeetic-subscribe-form input::placeholder {
    color: var(--2meet-muted);
  }

  /* ── Accordion（details/summary）───────────────────────────────────────── */
  .tmeetic-card--accordion summary {
    color: var(--2meet-text);
  }

  .tmeetic-card--accordion details[open] summary {
    border-bottom-color: var(--2meet-border);
  }

  /* ── Embed placeholder ──────────────────────────────────────────────────── */
  .tmeetic-card__embed-placeholder {
    background: var(--2meet-surface);
    color: var(--2meet-muted);
  }

  /* ── Spotify 自製卡片（封面 1:1 / 外層 3:1 / hover 播放 / 點擊跳 Spotify）── */
  .tmeetic-card__spotify {
    display: flex;
    align-items: stretch;
    aspect-ratio: 3 / 1;
    background: #141414;
    border-radius: var(--2meet-radius-card);
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
  }

  .tmeetic-card__spotify:hover,
  .tmeetic-card__spotify:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
    outline: none;
  }

  .tmeetic-card__spotify-cover {
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    object-fit: cover;
    display: block;
  }

  .tmeetic-card__spotify-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 48px 10px 14px; /* 右留空給 play 按鈕 */
    gap: 4px;
    min-width: 0;
  }

  .tmeetic-card__spotify-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-inverse, #FAF3E3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
  }

  .tmeetic-card__spotify-brand {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #1DB954;
    font-weight: 500;
  }

  .tmeetic-card__spotify-brand svg {
    flex-shrink: 0;
  }

  /* ── Play 按鈕 overlay（hover 時淡入）── */
  .tmeetic-card__spotify-play {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%) scale(0.85);
    width: 36px;
    height: 36px;
    background: #1DB954;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
  }

  .tmeetic-card__spotify:hover .tmeetic-card__spotify-play,
  .tmeetic-card__spotify:focus-visible .tmeetic-card__spotify-play {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  .tmeetic-card__spotify-play svg {
    width: 16px;
    height: 16px;
    fill: #fff;
    margin-left: 2px; /* 視覺中心補償 */
  }

  @media (prefers-reduced-motion: reduce) {
    .tmeetic-card__spotify,
    .tmeetic-card__spotify-play {
      transition: none;
    }
  }
}

/* ==========================================================================
   Hero Image（v5.0.0 — 所有瀏覽器顯示）
   ========================================================================== */

.tmeetic-hero {
  width: 100%;
  max-width: 100%;
  margin: 0 auto var(--2meet-space-md);
  overflow: hidden;
  border-radius: var(--2meet-radius-card);
}

.tmeetic-hero img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: auto;  /* 保留圖片原始比例 */
  object-fit: contain;
}

/* Mobile：fullwidth 抵消父容器 16px padding，滿版顯示，無圓角 */
@media (max-width: 600px) {
  .tmeetic-standalone-page .tmeetic-hero--fullwidth {
    margin-left: calc(-1 * var(--2meet-space-sm));
    margin-right: calc(-1 * var(--2meet-space-sm));
    width: calc(100% + 2 * var(--2meet-space-sm));
    border-radius: 0;
  }
}

/* Desktop：不衝框，與卡片等寬，保留圓角，原始比例 */
@media (min-width: 601px) {
  .tmeetic-standalone-page .tmeetic-hero--fullwidth {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

/* Hero Image 僅在獨立品牌主頁顯示，HP Vendor Profile 保留原生圓形 Avatar */

/* ==========================================================================
   IAB Fast Gateway Mode（v5.0.0）
   ========================================================================== */

/* IAB（全平台）：強制背景色 #EFEFEF，防止 App WebView 注入深色/透明背景 ------- */
body.tmeetic-instagram-iab,
body.tmeetic-line-iab,
body.tmeetic-facebook-iab,
body.tmeetic-threads-iab,
body.tmeetic-tiktok-iab {
  background-color: var(--color-bg-tertiary) !important;
}

/* IAB（全平台）：隱藏網站 Header 與 Footer --------------------------------- */
.tmeetic-iab header,
.tmeetic-iab footer {
  display: none !important;
}

/* IAB（全平台）：確保品牌主頁 header 區塊顯示（防禦性規則） */
body.tmeetic-iab .tmeetic-standalone-page__header {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

/* IAB（全平台）：Hero fullwidth 強制滿版置中
   覆蓋 standalone-page 的負 margin 技術（在 IAB WebView 中負 margin 會造成靠右偏移）*/
body.tmeetic-iab .tmeetic-hero--fullwidth {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0;
}

/* IAB：若 wp-admin bar 存在（已登入用戶）一併隱藏
   html.admin-bar 的 margin-top 由前端 JS 重置（CSS 無法跨元素覆蓋） */
.tmeetic-iab #wpadminbar {
  display: none !important;
}
body.tmeetic-iab.admin-bar {
  margin-top: 0 !important;
}

/* IAB + Vendor Profile：單欄排版 */
body.tmeetic-iab.hp-template--vendor-view-page .hp-row {
  display: block !important;
}
body.tmeetic-iab.hp-template--vendor-view-page .hp-page__sidebar {
  width: 100% !important;
  float: none !important;
}

/* IAB：隱藏 HP 市集屬性 */
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__details--primary,
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__attributes--secondary,
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__attributes--ternary,
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__attributes--primary,
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__actions--primary,
body.tmeetic-iab.hp-template--vendor-view-page .hp-page__sidebar .widget,
body.tmeetic-iab.hp-template--vendor-view-page .hp-page__content {
  display: none !important;
}

/* IAB：保留 vendor_summary 中的 name + description，置中 */
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__summary {
  display: block !important;
}
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__name,
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__description {
  display: block !important;
  text-align: center;
}

/* ==========================================================================
   Hero + Dark Mode 補充（v5.0.0）
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .tmeetic-hero img {
    opacity: 0.92;
  }
}

/* Instagram IAB -----------------------------------------------------------
   由 class-2meetic-instagram.php 載入 2meetic-instagram.css 覆蓋
   -------------------------------------------------------------------- */

/* ==========================================================================
   PWA Install Banner（v5.1.0）
   ========================================================================== */

.tmeetic-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: var(--2meet-bg, #fff);
  border-top: 1px solid var(--2meet-border, #efefef);
  padding: 12px var(--2meet-space-sm, 16px);
  transform: translateY(100%);
  transition: transform 0.25s ease;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}

.tmeetic-install-banner.is-visible {
  transform: translateY(0);
}

.tmeetic-install-banner__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}

.tmeetic-install-banner__text {
  flex: 1;
  font-size: 14px;
  color: var(--2meet-text, #1a1a2e);
  display: flex;
  align-items: center;
  gap: 4px;
}

.tmeetic-install-banner__share-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.tmeetic-install-banner__btn {
  border: none;
  border-radius: var(--2meet-radius-btn, 999px);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 18px;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.tmeetic-install-banner__btn:active { opacity: 0.7; }

.tmeetic-install-banner__btn--primary {
  background: var(--2meet-primary, #A8B9A4);
  color: var(--color-text-inverse, #FAF3E3);
}

.tmeetic-install-banner__btn--close {
  background: transparent;
  color: var(--2meet-muted, #6c757d);
  padding: 8px 10px;
}

@media (prefers-color-scheme: dark) {
  .tmeetic-install-banner {
    background: #1c1c1e;
    border-top-color: #3a3a3c;
  }
  .tmeetic-install-banner__text { color: #f5f5f7; }
}

/* ==========================================================================
   Web Push 訂閱按鈕（v5.1.0）
   ========================================================================== */

.tmeetic-push-sub {
  position: fixed;
  bottom: 80px; /* Banner 上方留空，避免重疊 */
  right: var(--2meet-space-sm, 16px);
  z-index: 9980;
}

.tmeetic-push-sub__btn {
  background: var(--2meet-bg, #fff);
  border: 1.5px solid var(--2meet-border, #efefef);
  border-radius: var(--2meet-radius-btn, 999px);
  color: var(--2meet-text, #1a1a2e);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.10);
  transition: box-shadow 0.15s, transform 0.1s;
  white-space: nowrap;
}
.tmeetic-push-sub__btn:active { transform: scale(0.96); }

.tmeetic-push-sub__btn.is-subscribed {
  background: var(--2meet-surface, #f8f9fa);
  color: var(--2meet-muted, #6c757d);
}

@media (prefers-color-scheme: dark) {
  .tmeetic-push-sub__btn {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #f5f5f7;
  }
  .tmeetic-push-sub__btn.is-subscribed {
    background: #1c1c1e;
    color: #8e8e93;
  }
}

/* ── HivePress Social Links — LINE OA ────────────────────────────────────── */
/* SVG 純路徑 fill:#fff，背景色由 CSS 控制（與 HP 內建 icon 一致）。
   同時覆蓋 --line-oa（連字號）確保相容 hp\sanitize_slug 轉換後的 class 名稱。 */
.hp-social-links .hp-social-links__item.hp-social-links__item--line_oa,
.hp-social-links .hp-social-links__item.hp-social-links__item--line-oa {
  background-color: #06C755;
}



/* Instagram Feed Grid (v5.3.0) */
.tmeetic-ig-feed {
  margin-top: var(--2meet-space-sm);
}
.tmeetic-ig-feed__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--2meet-text);
  text-decoration: none;
  padding: 0 0 var(--2meet-space-xs);
}
.tmeetic-ig-feed__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.tmeetic-ig-feed__item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: block;
}
.tmeetic-ig-feed__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}
.tmeetic-ig-feed__item:hover img {
  opacity: 0.85;
}
@media (max-width: 480px) {
  .tmeetic-ig-feed__grid { gap: 2px; }
}
@media (prefers-color-scheme: dark) {
  .tmeetic-ig-feed__header { color: var(--2meet-text); }
}

/* ── HivePress Vendor Profile：暫時停用 Sticky 定位（v5.3.6 偵錯用）──────── */
.hp-vendor__attribute,
.hp-vendor__social-links,
.hp-vendor__action {
  position: static !important;
}

/* ── Vendor Profile Social Links 置中 ─────────────────────────────────────
 * hp-blocksy-support 已為 .hp-vendor__social-links 設定 display:flex（gap:8px）。
 * 這裡補上 justify-content:center 讓圖示群組在 Sidebar 欄位內水平置中；
 * 同時確保未啟用 hp-blocksy-support 時 fallback 為 flex（原本可能為 block）。
 * 內層 nav.hp-social-links 本身已有 justify-content:center + flex-wrap:wrap，
 * 因此加 width:100% 即可讓所有圖示在 nav 寬度內完整置中。
 * ─────────────────────────────────────────────────────────────────────── */
.hp-vendor__social-links.hp-widget {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.hp-vendor__social-links .hp-social-links {
  width: 100%;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
 * WCAG 2.1 AA + 手機端 UX 增強補丁（v5.46.0）
 * 1. 鍵盤焦點可見度（focus-visible）
 * 2. 觸控目標最小尺寸 44×44px
 * 3. touch-action（消除 iOS 300ms 延遲）
 * 4. prefers-reduced-motion（前庭功能障礙支援）
 * ═══════════════════════════════════════════════════════════════ */

/* ─ 1. 鍵盤焦點：所有互動元素在鍵盤導航時顯示清晰焦點框 ──── */
/* :focus-visible 只在鍵盤 Tab 時觸發，滑鼠點擊不顯示 */
.tmeetic-btn:focus-visible,
.tmeetic-btn-link:focus-visible,
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--2meet-primary, #A8B9A4) !important;
  outline-offset: 2px !important;
  /* 保留 box-shadow 同時顯示 */
}

/* 滑鼠/觸控用戶：隱藏 outline（已有 box-shadow 或 border 替代） */
.tmeetic-btn:focus:not(:focus-visible),
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none;
}

/* ─ 2. 觸控目標：按鈕最小高度 44px（Apple HIG / WCAG 2.5.5）── */
.tmeetic-btn {
  min-height: 44px;
}

/* 手機上 sm 按鈕也達到 44px（桌面保持緊湊） */
@media (max-width: 768px) {
  .tmeetic-btn--sm {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ─ 3. touch-action：消除 iOS Safari / Chrome 300ms 點擊延遲 ── */
button,
a,
label,
input,
select,
textarea,
[role="button"] {
  touch-action: manipulation;
}

/* ─ 4. prefers-reduced-motion：支援前庭功能障礙用戶 ──────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   EPK 市集列表頁
   ─────────────────────────────────────────────────────────────────
   .tmeetic-epk-market        — 頁面外框
   .tmeetic-epk-card          — 卡片容器
   ═══════════════════════════════════════════════════════════════════ */

/* ── CSS Tokens ─────────────────────────────────────────────────── */
.tmeetic-epk-market {
  --epk-radius-card: 16px;
  --epk-radius-btn:  8px;
  --epk-space-sm:    16px;
  --epk-space-md:    24px;
  --epk-border:      var(--color-bg-divider, #E8E3D9);
  --epk-surface:     var(--color-bg-secondary, #FAF9F6);
  --epk-muted:       var(--color-text-tertiary, #7A736A);
  --epk-text:        var(--color-text-primary, #3A3530);
  --epk-primary:     var(--2meet-primary, #A8B9A4);
  --epk-shadow-hover: 0 4px 16px rgba(0,0,0,0.08);
}

/* ── 頁面標頭 ─────────────────────────────────────────────────── */
.tmeetic-epk-market__header {
  text-align: center;
  margin-bottom: var(--epk-space-md);
}
.tmeetic-epk-market__header h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--epk-text);
}
.tmeetic-epk-market__subtitle {
  color: var(--epk-muted);
  font-size: 15px;
  line-height: 1.5;
}
.tmeetic-epk-market__count {
  font-size: 13px;
  color: var(--epk-muted);
  margin-bottom: var(--epk-space-sm);
}

/* ── 篩選列 ───────────────────────────────────────────────────── */
.tmeetic-epk-filter-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: var(--epk-space-sm);
  flex-wrap: wrap;
}
.tmeetic-epk-search-input {
  flex: 1;
  min-width: 160px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--epk-border);
  border-radius: var(--epk-radius-btn);
  font-size: 14px;
  color: var(--epk-text);
  background: var(--color-bg-secondary, #FAF9F6);
  outline: none;
  transition: border-color 0.2s;
}
.tmeetic-epk-search-input:focus {
  border-color: var(--epk-primary);
}
.tmeetic-epk-sort-select {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--epk-border);
  border-radius: var(--epk-radius-btn);
  font-size: 14px;
  color: var(--epk-text);
  background: var(--color-bg-secondary, #FAF9F6);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.tmeetic-epk-sort-select:focus {
  border-color: var(--epk-primary);
}
.tmeetic-epk-btn {
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: var(--epk-radius-btn);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}
.tmeetic-epk-btn--primary {
  background: var(--epk-primary);
  color: var(--color-text-inverse, #FAF3E3);
}
.tmeetic-epk-btn--primary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* ── 卡片網格 ─────────────────────────────────────────────────── */
.tmeetic-epk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--epk-space-sm);
}

/* ── 卡片容器 ─────────────────────────────────────────────────── */
.tmeetic-epk-card {
  background: var(--color-bg-secondary, #FAF9F6);
  border-radius: var(--epk-radius-card);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.tmeetic-epk-card:hover {
  box-shadow: var(--epk-shadow-hover);
  transform: translateY(-2px);
}

/* ── 封面圖 ───────────────────────────────────────────────────── */
.tmeetic-epk-card__image-link {
  display: block;
  text-decoration: none;
  overflow: hidden;
}
.tmeetic-epk-card__image {
  width: 100%;
  height: 180px;
  background-color: var(--epk-surface);
  overflow: hidden;
  position: relative;
}
.tmeetic-epk-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.tmeetic-epk-card:hover .tmeetic-epk-card__image img {
  transform: scale(1.04);
}

/* ── 卡片內容 ─────────────────────────────────────────────────── */
.tmeetic-epk-card__body {
  padding: 14px 16px 16px;
}

/* 標題 */
.tmeetic-epk-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tmeetic-epk-card__title a {
  color: var(--epk-text);
  text-decoration: none;
  transition: color 0.15s;
}
.tmeetic-epk-card__title a:hover {
  color: var(--epk-primary);
}

/* Vendor 列 */
/* Vendor + 分類 details 列（同 bookings tmb-card-details 模式） */
.tmeetic-epk-card__details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 8px;
}
.tmeetic-epk-card__vendor,
.tmeetic-epk-card__category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--epk-muted);
}
.tmeetic-epk-card__category {
  font-weight: 600;
  letter-spacing: 0.03em;
}
.tmeetic-epk-card__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.tmeetic-epk-card__vendor-name {
  font-size: 13px;
  color: var(--epk-muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s;
}
a.tmeetic-epk-card__vendor-name:hover {
  color: var(--epk-primary);
}
.tmeetic-epk-card__vendor + .tmeetic-epk-card__category::before {
  content: '·';
  margin-right: 8px;
  color: var(--epk-border, #EFEFEF);
  font-weight: 400;
}
.tmeetic-epk-card__category a {
  color: var(--epk-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.tmeetic-epk-card__category a:hover { color: var(--epk-primary); }

/* 分類篩選 chip */
.tmeetic-epk-market__active-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 10px;
  background: var(--epk-surface, #F8F9FA);
  border: 1px solid var(--epk-border, #EFEFEF);
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--epk-text, #1A1A2E);
}
.tmeetic-epk-market__filter-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--epk-muted, #6C757D);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.tmeetic-epk-market__filter-remove:hover {
  background: var(--epk-border, #EFEFEF);
  color: var(--epk-text, #1A1A2E);
}

/* 簡介 */
.tmeetic-epk-card__desc {
  font-size: 13px;
  color: var(--epk-muted);
  line-height: 1.55;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 統計數據 */
.tmeetic-epk-card__meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--epk-muted);
}

/* ── 分頁 ─────────────────────────────────────────────────────── */
.tmeetic-epk-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--epk-space-md);
  flex-wrap: wrap;
}
.tmeetic-epk-pagination__link,
.tmeetic-epk-pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--epk-radius-btn);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tmeetic-epk-pagination__link {
  background: var(--epk-surface);
  color: var(--epk-text);
  text-decoration: none;
}
.tmeetic-epk-pagination__link:hover {
  background: var(--epk-primary);
  color: var(--color-text-inverse, #FAF3E3);
}
.tmeetic-epk-pagination__current {
  background: var(--epk-primary);
  color: var(--color-text-inverse, #FAF3E3);
  cursor: default;
}

/* ── RWD: Tablet ≤768px ───────────────────────────────────────── */
@media (max-width: 768px) {
  .tmeetic-epk-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tmeetic-epk-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .tmeetic-epk-search-input,
  .tmeetic-epk-sort-select {
    width: 100%;
    min-width: unset;
  }
  .tmeetic-epk-btn {
    width: 100%;
  }
}

/* ── RWD: Mobile ≤480px ───────────────────────────────────────── */
@media (max-width: 480px) {
  .tmeetic-epk-grid {
    grid-template-columns: 1fr;
  }
  .tmeetic-epk-market__header h1 {
    font-size: 22px;
  }
}

/* ================================================================
   /listings/ Listing Card — Hourly Rate
   ================================================================ */
.tmeetic-listing__hourly-rate {
  display: block;
  width: 100%;
  flex: 0 0 100%;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--2meet-accent, #E8541A);
  margin-top: 2px;
}

/* ================================================================
   Site Branding Block — Vendor Profile Page
   ================================================================ */
.tmeetic-site-branding {
  text-align: center;
  padding: 20px 16px;
  margin: 30px 0 10px;
  background: var(--2meet-bg, #FFFFFF);
  border-radius: var(--2meet-radius-card, 16px);
  box-shadow: var(--2meet-shadow, 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04));
  overflow: hidden;
}

.tmeetic-site-branding__logo-wrap {
  margin-bottom: 8px;
}

.tmeetic-site-branding__logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
}

.tmeetic-site-branding__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--2meet-text, #1A1A2E);
  line-height: 1.4;
}

.tmeetic-site-branding__divider {
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: var(--color-error);
  border-radius: 2px;
  flex-shrink: 0;
}

.tmeetic-site-branding__link {
  color: inherit;
  text-decoration: none;
}
.tmeetic-site-branding__link:hover {
  text-decoration: underline;
}

.tmeetic-site-branding__tagline {
  font-size: 12px;
  color: var(--2meet-muted, #6C757D);
  margin-top: 4px;
  line-height: 1.5;
}

/* =============================================================================
   Follow Bar — 追蹤按鈕 + Vendor 統計（品牌主頁 sidebar）
   ============================================================================= */

.tmeetic-follow-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--2meet-bg, #fff);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Stats Row：粉絲數 / 課程數 / 品牌故事數 */
.tmeetic-vendor-stats-row {
  display: flex;
  gap: 20px;
}

.tmeetic-vendor-stats-row__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.tmeetic-vendor-stats-row__item strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--2meet-text, #333);
  line-height: 1.2;
  display: inline-block; /* 讓 transform 生效 */
}

/* 追蹤數字更新動畫 */
@keyframes tmeetic-count-pop {
  0%   { transform: scale(1);    opacity: 1; }
  40%  { transform: scale(1.35); opacity: 0.6; }
  100% { transform: scale(1);    opacity: 1; }
}

.tmeetic-count-update {
  animation: tmeetic-count-pop 0.35s ease-out both;
  color: var(--2meet-primary, #A8B9A4);
}

.tmeetic-vendor-stats-row__item span {
  font-size: 11px;
  color: var(--2meet-muted, #666);
  line-height: 1.3;
}

/* Follow 按鈕 */
.tmeetic-follow-bar__btn {
  width: 100%;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--2meet-primary, #A8B9A4);
  color: var(--2meet-primary, #A8B9A4);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
  text-align: center;
}

.tmeetic-follow-bar__btn:hover {
  background: var(--2meet-primary, #A8B9A4);
  color: var(--color-text-inverse, #FAF3E3);
}

.tmeetic-follow-bar__btn--active {
  background: var(--2meet-primary, #A8B9A4);
  color: var(--color-text-inverse, #FAF3E3);
}

.tmeetic-follow-bar__btn--active:hover {
  background: transparent;
  color: var(--2meet-primary, #A8B9A4);
}

.tmeetic-follow-bar__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Follow Bar Toast 通知（取代原生 alert()）─────────────────────────────── */
.tmeetic-follow-toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(26, 26, 46, 0.92);
  color: var(--color-text-inverse, #FAF3E3);
  font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  z-index: 9995;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  max-width: calc(100vw - 48px);
}
.tmeetic-follow-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tmeetic-follow-toast--hint {
  background: var(--color-pink-primary, #C49C97);
  color: var(--color-text-inverse, #FAF3E3);
  white-space: normal;
  max-width: min(420px, calc(100vw - 48px));
  line-height: 1.45;
  padding: 12px 20px;
  text-align: center;
}

/* ── 手機端 sticky Follow Bar ─────────────────────────────────────────────── */
.tmeetic-follow-bar-sticky {
  display: none; /* 預設隱藏；JS 加 --visible 時才顯示 */
}

@media (max-width: 767px) {
  .tmeetic-follow-bar-sticky {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9996;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--2meet-bg, #fff);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
    border-top: 1px solid var(--2meet-border, #efefef);
    transform: translateY(110%);
    transition: transform 0.25s ease;
    pointer-events: none;
  }

  .tmeetic-follow-bar-sticky--visible {
    transform: translateY(0);
    pointer-events: auto;
  }

  .tmeetic-follow-bar-sticky__info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }

  .tmeetic-follow-bar-sticky__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
  }

  .tmeetic-follow-bar-sticky__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .tmeetic-follow-bar-sticky__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--2meet-text, #1a1a2e);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  .tmeetic-follow-bar-sticky__followers {
    font-size: 11px;
    color: var(--2meet-muted, #6c757d);
    line-height: 1.2;
  }

  .tmeetic-follow-bar-sticky__btn {
    width: auto;
    flex-shrink: 0;
    padding: 9px 22px;
    font-size: 13px;
    min-height: 38px;
  }

  /* 讓頁面底部留白，避免 sticky bar 遮擋最後內容 */
  body.tmeetic-has-follow-bar-sticky {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
}

/* =============================================================================
   Force Light Mode — 強制亮色模式（v6.3.1）
   防止 Facebook / LINE / Instagram IAB 及 Android Chrome Force Dark 黑屏。

   三層防禦：
   1. HTML <meta name="color-scheme" content="light">（由 PHP wp_head 輸出）
   2. :root { color-scheme: light }（阻止 UA 套用系統暗黑 token）
   3. 此 block：覆蓋現有 dark mode 媒體查詢，強制還原亮色 token
   ============================================================================= */

/* 層 2：html/body 層級強制設定（優先於 UA stylesheet）*/
html {
  color-scheme: light !important;
  forced-color-adjust: none;           /* 阻斷 Chrome Force Dark 顏色強制調整 */
  -webkit-text-size-adjust: 100%;      /* 阻斷 WebKit 文字大小自動調整 */
  filter: none !important;             /* 阻斷某些 IAB 用 filter:invert() 反轉 */
}

/* 層 3：覆蓋現有 dark mode 媒體查詢（置於檔案最末，優先級最高）*/
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light !important;

    /* ── 還原亮色設計 Token（Morandi Muse v2.5 對齊）────────────────────── */
    --2meet-bg:           var(--color-bg-primary, #FFFEFA) !important;
    --2meet-surface:      var(--color-bg-secondary, #FAF9F6) !important;
    --2meet-text:         var(--color-text-primary, #3A3530) !important;
    --2meet-muted:        var(--color-text-tertiary, #7A736A) !important;
    --2meet-border:       var(--color-bg-divider, #E8E3D9) !important;
    --ios-separator:      var(--color-bg-divider, #E8E3D9) !important;
    --ios-separator-dark: rgba(84, 84, 88, 0.65) !important;
    --ios-fill:           rgba(120, 120, 128, 0.12) !important;
    --ios-fill-active:    rgba(120, 120, 128, 0.20) !important;
    --2meet-primary:      var(--color-green-primary, #A8B9A4) !important;
    --2meet-accent:       var(--color-pink-primary, #D4AFAB) !important;
    --2meet-shadow:
      0 2px 8px rgba(58, 53, 48, 0.06),
      0 0 0 1px rgba(58, 53, 48, 0.03) !important;
    --2meet-shadow-hover:
      0 4px 16px rgba(168, 185, 164, 0.20),
      0 0 0 1px rgba(58, 53, 48, 0.04) !important;
    --2meet-shadow-sm:    0 1px 4px rgba(58, 53, 48, 0.05) !important;
    --2meet-shadow-md:
      0 2px 8px rgba(58, 53, 48, 0.06),
      0 0 0 1px rgba(58, 53, 48, 0.03) !important;
    --2meet-shadow-lg:    0 4px 16px rgba(58, 53, 48, 0.08) !important;
    --2meet-focus-ring:   0 0 0 3px rgba(168, 185, 164, 0.25) !important;
  }

  html, body {
    background-color: var(--color-bg-primary, #FFFEFA) !important;
    color:            var(--color-text-primary, #3A3530) !important;
    filter:           none    !important;
  }

  /* ── 還原卡片與頁面容器亮色背景 ─────────────────────────────────────────── */
  .tmeetic-cards,
  .tmeetic-card,
  .tmeetic-standalone-wrap,
  .tmeetic-story-page,
  .tmeetic-dashboard,
  .tmeetic-followed-vendors,
  .tmeetic-my-favorites {
    background-color: var(--2meet-bg)    !important;
    color:            var(--2meet-text)  !important;
  }
}

/* =============================================================================
   Layer 3: 品牌主頁強制 Light Mode 專項
   目標：/vendor/{slug}/ 及 /@{slug}/ 無論任何情境（IAB / Force Dark / 系統設定）
         一律維持 var(--color-bg-primary) (#FFFFFF) 頁面底色
       + var(--color-bg-secondary) 卡片底色（見 DESIGN.md §9.6）。
   ============================================================================= */

/* ── 無條件強制（不依賴媒體查詢，優先級最高）─────────────────────────────── */
body.hp-template--vendor-view-page,
body.hp-template--vendor-view-page .hp-row,
body.hp-template--vendor-view-page .hp-page__sidebar,
body.hp-template--vendor-view-page .hp-page__content,
body.hp-template--vendor-view-page .entry-content,
body.hp-template--vendor-view-page .site-content,
body.hp-template--vendor-view-page .wp-site-blocks {
  background-color: var(--color-bg-primary) !important;
  color:            var(--color-text-primary) !important;
}

/* 卡片與 Follow Bar 容器以 --color-bg-secondary 區分層次 */
body.hp-template--vendor-view-page .tmeetic-cards,
body.hp-template--vendor-view-page .tmeetic-card,
body.hp-template--vendor-view-page .tmeetic-follow-bar,
body.hp-template--vendor-view-page .tmeetic-site-branding {
  background-color: var(--color-bg-secondary) !important;
  color:            var(--color-text-primary) !important;
}

/* 針對 IAB + dark 的雙重條件強化 */
@media (prefers-color-scheme: dark) {
  body.hp-template--vendor-view-page,
  body.hp-template--vendor-view-page *:not(img):not(svg):not(canvas):not(video):not(iframe):not(.tmeetic-card):not(.tmeetic-follow-bar) {
    background-color: revert; /* 先還原繼承 */
  }

  body.hp-template--vendor-view-page {
    background-color: var(--color-bg-primary) !important;
  }

  body.hp-template--vendor-view-page .hp-row,
  body.hp-template--vendor-view-page .hp-page__sidebar,
  body.hp-template--vendor-view-page .hp-page__content {
    background-color: var(--color-bg-primary) !important;
    color:            var(--color-text-primary) !important;
  }

  body.hp-template--vendor-view-page .tmeetic-cards,
  body.hp-template--vendor-view-page .tmeetic-card,
  body.hp-template--vendor-view-page .tmeetic-follow-bar {
    background-color: var(--color-bg-secondary) !important;
    color:            var(--color-text-primary) !important;
  }
}

/* =============================================================================
   Layer 4: Forced Colors Mode（Windows / Android 高對比模式）
   某些裝置開啟高對比模式後，瀏覽器會強制覆寫所有顏色。
   forced-color-adjust: none 退出自動調色，改用系統語意色彩保持可讀性。
   ============================================================================= */
@media (forced-colors: active) {
  html, body {
    background-color: Canvas !important;
    color: CanvasText !important;
    forced-color-adjust: none;
  }

  body.hp-template--vendor-view-page,
  body.hp-template--vendor-view-page .hp-row,
  body.hp-template--vendor-view-page .hp-page__sidebar,
  body.hp-template--vendor-view-page .hp-page__content {
    background-color: Canvas !important;
    color: CanvasText !important;
  }

  .tmeetic-card,
  .tmeetic-cards,
  .tmeetic-follow-bar,
  .tmeetic-site-branding {
    background-color: Canvas !important;
    color: CanvasText !important;
    border: 1px solid CanvasText;
  }
}

/* =============================================================================
   Layer 5: DarkReader 擴充偵測
   DarkReader 在 <html> 注入 data-darkreader-scheme / data-darkreader-mode 屬性，
   並插入 <style class="darkreader"> 強制反轉顏色。
   以下規則覆蓋 DarkReader 注入的樣式，還原亮色設計。
   ============================================================================= */
html[data-darkreader-scheme="dark"],
html[data-darkreader-mode] {
  --2meet-bg:           var(--color-bg-primary, #FFFFFF) !important;
  --2meet-surface:      #EFEFEF !important;
  --2meet-text:         #333333 !important;
  --2meet-muted:        #666666 !important;
  --2meet-border:       #DDDDDD !important;
  --2meet-primary:      #A8B9A4 !important;
  --2meet-accent:       #E8541A !important;
  background-color:     #EFEFEF !important;
  color:                #333333 !important;
  filter:               none !important;
}

html[data-darkreader-scheme="dark"] body,
html[data-darkreader-mode] body {
  background-color: var(--color-bg-tertiary) !important;
  color:            #333333 !important;
  filter:           none !important;
}

html[data-darkreader-scheme="dark"] .tmeetic-card,
html[data-darkreader-mode] .tmeetic-card,
html[data-darkreader-scheme="dark"] .tmeetic-cards,
html[data-darkreader-mode] .tmeetic-cards {
  background-color: #FFFFFF !important;
  color:            #333333 !important;
}

/* Vendor Profile — DarkReader 覆蓋（對齊 §9.6 白底 + 卡片 secondary） */
html[data-darkreader-scheme="dark"] body.hp-template--vendor-view-page,
html[data-darkreader-mode] body.hp-template--vendor-view-page {
  background-color: var(--color-bg-primary) !important;
}

html[data-darkreader-scheme="dark"] body.hp-template--vendor-view-page .tmeetic-card,
html[data-darkreader-mode] body.hp-template--vendor-view-page .tmeetic-card,
html[data-darkreader-scheme="dark"] body.hp-template--vendor-view-page .tmeetic-follow-bar,
html[data-darkreader-mode] body.hp-template--vendor-view-page .tmeetic-follow-bar {
  background-color: var(--color-bg-secondary) !important;
  color:            var(--color-text-primary) !important;
}

/* ── Subscribe form readonly email hint（v6.4.8）───────────────────────────── */
.tmeetic-subscribe-form__hint {
  display:     block;
  margin-top:  6px;
  font-size:   12px;
  line-height: 1.5;
  color:       var(--2meet-muted, #6C757D);
}

.tmeetic-subscribe-form__hint a {
  color:           var(--2meet-primary, #A8B9A4);
  text-decoration: underline;
}

.tmeetic-subscribe-form__hint a:hover,
.tmeetic-subscribe-form__hint a:focus-visible {
  text-decoration: none;
}