/* B-ROLL 共用樣式：首頁 index.html 與 about/index.html 都會載入。
   修改這個檔案，兩個頁面會一起變。 */
/* 🌐 全域變數與基礎樣式 開始（Global Variables & Base Reset） */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --ink:#1c1a16;
  --ink-elev:#252019;
  --paper:#faf6ee;
  --paper-elev:#ffffff;
  --paper-sunken:#f1ead9;
  --text:#211d17;
  --text-sec:#6e6555;
  --text-ter:#776c5a;
  --ondark:#f3ede0;
  --ondark-sec:#bcb2a0;
  --line:#e3d9c4;
  --line-strong:#d3c6a8;
  --line-dark:#3c362b;
  --red:#bb3a2c;
  --gold:#a97d2f;
  --green:#3f7d52;
  --radius-s:6px;
  --radius-m:14px;
  --radius-l:20px;
  --mono:"Space Mono","Noto Sans TC",monospace;
  --serif:"Noto Serif TC",Georgia,serif;
  --sans:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  --bg:var(--paper);
  --fill-red:#bb3a2c; --fill-gold:#a97d2f; --on-fill:#ffffff;
  --on-red:#ffffff; --on-gold:#ffffff; --red-ondark:#bb3a2c; --gold-ondark:#a97d2f;
  --brand-red:var(--red);
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    --paper:#12100c; --paper-elev:#1a1712; --paper-sunken:#0d0b08;
    --text:#f1ebdd; --text-sec:#b6ab97; --text-ter:#867b68;
    --line:#332c22; --line-strong:#463c2c;
    --ink:#0c0a08; --ink-elev:#14110c;
    --bg:var(--paper);
  }
}
:root[data-theme="dark"]{
  --paper:#12100c; --paper-elev:#1a1712; --paper-sunken:#0d0b08;
  --text:#f1ebdd; --text-sec:#b6ab97; --text-ter:#867b68;
  --line:#332c22; --line-strong:#463c2c;
  --ink:#0c0a08; --ink-elev:#14110c;
  --bg:var(--paper);
}
/* 🎨 網站配色 PALETTES 開始（由後台「網站配色」切換；每款都有淺色＋深色版本，文字對比皆達 WCAG AA 4.5:1 以上） */
/* 經典焙火 */
:root[data-palette="classic"]{--ink:#1c1a16;--ink-elev:#252019;--paper:#faf6ee;--paper-elev:#ffffff;--paper-sunken:#f1ead9;--text:#211d17;--text-sec:#6e6555;--text-ter:#776c5a;--ondark:#f3ede0;--ondark-sec:#bcb2a0;--line:#e3d9c4;--line-strong:#d3c6a8;--line-dark:#3c362b;--red:#bb3a2c;--gold:#a97d2f;--green:#3f7d52;--on-red:#ffffff;--on-gold:#ffffff;--red-ondark:#bb3a2c;--gold-ondark:#a97d2f;--bg:var(--paper);--fill-red:#bb3a2c;--fill-gold:#a97d2f;--on-fill:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="classic"]:not([data-theme="light"]){--ink:#0c0a08;--ink-elev:#14110c;--paper:#12100c;--paper-elev:#1a1712;--paper-sunken:#0d0b08;--text:#f1ebdd;--text-sec:#b6ab97;--text-ter:#958a76;--ondark:#f3ede0;--ondark-sec:#bcb2a0;--line:#332c22;--line-strong:#463c2c;--line-dark:#3c362b;--red:#bb3a2c;--gold:#a97d2f;--green:#3f7d52;--on-red:#ffffff;--on-gold:#ffffff;--red-ondark:#bb3a2c;--gold-ondark:#a97d2f;--bg:var(--paper);}}
:root[data-palette="classic"][data-theme="dark"]{--ink:#0c0a08;--ink-elev:#14110c;--paper:#12100c;--paper-elev:#1a1712;--paper-sunken:#0d0b08;--text:#f1ebdd;--text-sec:#b6ab97;--text-ter:#958a76;--ondark:#f3ede0;--ondark-sec:#bcb2a0;--line:#332c22;--line-strong:#463c2c;--line-dark:#3c362b;--red:#bb3a2c;--gold:#a97d2f;--green:#3f7d52;--on-red:#ffffff;--on-gold:#ffffff;--red-ondark:#bb3a2c;--gold-ondark:#a97d2f;--bg:var(--paper);}
/* 晨霧 */
:root[data-palette="mist"]{--ink:#1d1d1f;--ink-elev:#2c2c2e;--paper:#f5f5f7;--paper-elev:#ffffff;--paper-sunken:#e8e8ed;--text:#1d1d1f;--text-sec:#5e5e63;--text-ter:#6e6e73;--ondark:#f5f5f7;--ondark-sec:#a1a1a6;--line:#d2d2d7;--line-strong:#c7c7cc;--line-dark:#3a3a3c;--red:#b64400;--gold:#86601a;--green:#1f7a3c;--on-red:#ffffff;--on-gold:#ffffff;--red-ondark:#ff9f4a;--gold-ondark:#e0b860;--bg:var(--paper);--fill-red:#b64400;--fill-gold:#86601a;--on-fill:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="mist"]:not([data-theme="light"]){--ink:#161617;--ink-elev:#232325;--paper:#000000;--paper-elev:#1c1c1e;--paper-sunken:#0b0b0c;--text:#f5f5f7;--text-sec:#a1a1a6;--text-ter:#8e8e93;--ondark:#f5f5f7;--ondark-sec:#a1a1a6;--line:#2c2c2e;--line-strong:#3a3a3c;--line-dark:#38383a;--red:#ff9f4a;--gold:#e0b860;--green:#5fd07f;--on-red:#1d1d1f;--on-gold:#1d1d1f;--red-ondark:#ff9f4a;--gold-ondark:#e0b860;--bg:var(--paper);}}
:root[data-palette="mist"][data-theme="dark"]{--ink:#161617;--ink-elev:#232325;--paper:#000000;--paper-elev:#1c1c1e;--paper-sunken:#0b0b0c;--text:#f5f5f7;--text-sec:#a1a1a6;--text-ter:#8e8e93;--ondark:#f5f5f7;--ondark-sec:#a1a1a6;--line:#2c2c2e;--line-strong:#3a3a3c;--line-dark:#38383a;--red:#ff9f4a;--gold:#e0b860;--green:#5fd07f;--on-red:#1d1d1f;--on-gold:#1d1d1f;--red-ondark:#ff9f4a;--gold-ondark:#e0b860;--bg:var(--paper);}
/* 燕麥拿鐵 */
:root[data-palette="oat"]{--ink:#ebe2d4;--ink-elev:#f4eee4;--paper:#fbf8f3;--paper-elev:#ffffff;--paper-sunken:#f1eadf;--text:#2b2118;--text-sec:#66584a;--text-ter:#76685a;--ondark:#2b2118;--ondark-sec:#5f5143;--line:#e6dccd;--line-strong:#d6c7b2;--line-dark:#d3c4ae;--red:#9a4520;--gold:#7f5c1c;--green:#3a7048;--on-red:#ffffff;--on-gold:#ffffff;--red-ondark:#8c3c19;--gold-ondark:#71521a;--bg:var(--paper);--fill-red:#9a4520;--fill-gold:#7f5c1c;--on-fill:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="oat"]:not([data-theme="light"]){--ink:#2a221b;--ink-elev:#342a21;--paper:#1a1612;--paper-elev:#241e18;--paper-sunken:#13100d;--text:#f3ebdf;--text-sec:#bfb1a0;--text-ter:#a39584;--ondark:#f3ebdf;--ondark-sec:#c4b5a3;--line:#3a3027;--line-strong:#4d4034;--line-dark:#4a3e31;--red:#e99a70;--gold:#d9b56c;--green:#86c296;--on-red:#1a1612;--on-gold:#1a1612;--red-ondark:#e99a70;--gold-ondark:#d9b56c;--bg:var(--paper);}}
:root[data-palette="oat"][data-theme="dark"]{--ink:#2a221b;--ink-elev:#342a21;--paper:#1a1612;--paper-elev:#241e18;--paper-sunken:#13100d;--text:#f3ebdf;--text-sec:#bfb1a0;--text-ter:#a39584;--ondark:#f3ebdf;--ondark-sec:#c4b5a3;--line:#3a3027;--line-strong:#4d4034;--line-dark:#4a3e31;--red:#e99a70;--gold:#d9b56c;--green:#86c296;--on-red:#1a1612;--on-gold:#1a1612;--red-ondark:#e99a70;--gold-ondark:#d9b56c;--bg:var(--paper);}
/* 山林 */
:root[data-palette="forest"]{--ink:#1f3326;--ink-elev:#284032;--paper:#f6f7f2;--paper-elev:#ffffff;--paper-sunken:#e9ece1;--text:#1c241d;--text-sec:#525e50;--text-ter:#5f6b5d;--ondark:#eef3ea;--ondark-sec:#b6c7b7;--line:#dde2d4;--line-strong:#c9d0bd;--line-dark:#3b5444;--red:#a8432a;--gold:#76641c;--green:#2f6e3e;--on-red:#ffffff;--on-gold:#ffffff;--red-ondark:#f0a58a;--gold-ondark:#dcc56e;--bg:var(--paper);--fill-red:#a8432a;--fill-gold:#76641c;--on-fill:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="forest"]:not([data-theme="light"]){--ink:#142019;--ink-elev:#1c2b22;--paper:#0f1511;--paper-elev:#17201a;--paper-sunken:#0a0f0c;--text:#e8efe6;--text-sec:#a8b6a8;--text-ter:#8f9e8f;--ondark:#e8efe6;--ondark-sec:#a9bcab;--line:#26332a;--line-strong:#33443a;--line-dark:#2f4537;--red:#f0a58a;--gold:#dcc56e;--green:#7fcf93;--on-red:#0f1511;--on-gold:#0f1511;--red-ondark:#f0a58a;--gold-ondark:#dcc56e;--bg:var(--paper);}}
:root[data-palette="forest"][data-theme="dark"]{--ink:#142019;--ink-elev:#1c2b22;--paper:#0f1511;--paper-elev:#17201a;--paper-sunken:#0a0f0c;--text:#e8efe6;--text-sec:#a8b6a8;--text-ter:#8f9e8f;--ondark:#e8efe6;--ondark-sec:#a9bcab;--line:#26332a;--line-strong:#33443a;--line-dark:#2f4537;--red:#f0a58a;--gold:#dcc56e;--green:#7fcf93;--on-red:#0f1511;--on-gold:#0f1511;--red-ondark:#f0a58a;--gold-ondark:#dcc56e;--bg:var(--paper);}
/* 午夜藍調 */
:root[data-palette="midnight"]{--ink:#141c2e;--ink-elev:#1c2640;--paper:#f5f6f8;--paper-elev:#ffffff;--paper-sunken:#e7eaf0;--text:#161b26;--text-sec:#525a6b;--text-ter:#5f6778;--ondark:#eef1f7;--ondark-sec:#aab3c5;--line:#dde1e9;--line-strong:#c8cedb;--line-dark:#2e3a55;--red:#a03a52;--gold:#83601a;--green:#2c6e45;--on-red:#ffffff;--on-gold:#ffffff;--red-ondark:#f2a7b8;--gold-ondark:#e2c071;--bg:var(--paper);--fill-red:#a03a52;--fill-gold:#83601a;--on-fill:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="midnight"]:not([data-theme="light"]){--ink:#0f1524;--ink-elev:#182036;--paper:#0b0f18;--paper-elev:#141a26;--paper-sunken:#070a10;--text:#edf0f6;--text-sec:#a7afbf;--text-ter:#8f97a8;--ondark:#edf0f6;--ondark-sec:#a7b1c5;--line:#232b3b;--line-strong:#313b50;--line-dark:#28324a;--red:#f2a7b8;--gold:#e2c071;--green:#7fd09d;--on-red:#0b0f18;--on-gold:#0b0f18;--red-ondark:#f2a7b8;--gold-ondark:#e2c071;--bg:var(--paper);}}
:root[data-palette="midnight"][data-theme="dark"]{--ink:#0f1524;--ink-elev:#182036;--paper:#0b0f18;--paper-elev:#141a26;--paper-sunken:#070a10;--text:#edf0f6;--text-sec:#a7afbf;--text-ter:#8f97a8;--ondark:#edf0f6;--ondark-sec:#a7b1c5;--line:#232b3b;--line-strong:#313b50;--line-dark:#28324a;--red:#f2a7b8;--gold:#e2c071;--green:#7fd09d;--on-red:#0b0f18;--on-gold:#0b0f18;--red-ondark:#f2a7b8;--gold-ondark:#e2c071;--bg:var(--paper);}
/* 櫻花 */
:root[data-palette="sakura"]{--ink:#f6e3e6;--ink-elev:#fbeef0;--paper:#fdf8f8;--paper-elev:#ffffff;--paper-sunken:#f6eaec;--text:#2a1b1f;--text-sec:#6a5257;--text-ter:#7a6166;--ondark:#2a1b1f;--ondark-sec:#6a4f55;--line:#eedadd;--line-strong:#e0c4c9;--line-dark:#e3c3c9;--red:#b0374f;--gold:#85601e;--green:#2f7048;--on-red:#ffffff;--on-gold:#ffffff;--red-ondark:#a3304a;--gold-ondark:#73521a;--bg:var(--paper);--fill-red:#b0374f;--fill-gold:#85601e;--on-fill:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="sakura"]:not([data-theme="light"]){--ink:#2b1d21;--ink-elev:#36252a;--paper:#1a1214;--paper-elev:#241a1d;--paper-sunken:#130d0f;--text:#f6e9ec;--text-sec:#c4adb2;--text-ter:#a8939a;--ondark:#f6e9ec;--ondark-sec:#c9b1b7;--line:#3a2a2f;--line-strong:#4d383e;--line-dark:#4d353c;--red:#f2a0b2;--gold:#dcb86c;--green:#86c79c;--on-red:#1a1214;--on-gold:#1a1214;--red-ondark:#f2a0b2;--gold-ondark:#dcb86c;--bg:var(--paper);}}
:root[data-palette="sakura"][data-theme="dark"]{--ink:#2b1d21;--ink-elev:#36252a;--paper:#1a1214;--paper-elev:#241a1d;--paper-sunken:#130d0f;--text:#f6e9ec;--text-sec:#c4adb2;--text-ter:#a8939a;--ondark:#f6e9ec;--ondark-sec:#c9b1b7;--line:#3a2a2f;--line-strong:#4d383e;--line-dark:#4d353c;--red:#f2a0b2;--gold:#dcb86c;--green:#86c79c;--on-red:#1a1214;--on-gold:#1a1214;--red-ondark:#f2a0b2;--gold-ondark:#dcb86c;--bg:var(--paper);}
/* 柑橘 */
:root[data-palette="citrus"]{--ink:#f5dc6b;--ink-elev:#f9e898;--paper:#fffdf5;--paper-elev:#ffffff;--paper-sunken:#f7f1dc;--text:#24200f;--text-sec:#5e5636;--text-ter:#6b6343;--ondark:#24200f;--ondark-sec:#4f4624;--line:#efe6c4;--line-strong:#e0d39f;--line-dark:#d9c45a;--red:#b33f00;--gold:#7a5a00;--green:#2f6b2f;--on-red:#ffffff;--on-gold:#ffffff;--red-ondark:#9a3400;--gold-ondark:#5e4600;--bg:var(--paper);--fill-red:#b33f00;--fill-gold:#7a5a00;--on-fill:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="citrus"]:not([data-theme="light"]){--ink:#2a2510;--ink-elev:#353016;--paper:#15130a;--paper-elev:#1f1c10;--paper-sunken:#0f0d07;--text:#f7f2dc;--text-sec:#c2b996;--text-ter:#a39b7a;--ondark:#f7f2dc;--ondark-sec:#cdc39d;--line:#332e1a;--line-strong:#463f24;--line-dark:#4a4120;--red:#ffab6b;--gold:#e8c75a;--green:#9fd18a;--on-red:#15130a;--on-gold:#15130a;--red-ondark:#ffab6b;--gold-ondark:#e8c75a;--bg:var(--paper);}}
:root[data-palette="citrus"][data-theme="dark"]{--ink:#2a2510;--ink-elev:#353016;--paper:#15130a;--paper-elev:#1f1c10;--paper-sunken:#0f0d07;--text:#f7f2dc;--text-sec:#c2b996;--text-ter:#a39b7a;--ondark:#f7f2dc;--ondark-sec:#cdc39d;--line:#332e1a;--line-strong:#463f24;--line-dark:#4a4120;--red:#ffab6b;--gold:#e8c75a;--green:#9fd18a;--on-red:#15130a;--on-gold:#15130a;--red-ondark:#ffab6b;--gold-ondark:#e8c75a;--bg:var(--paper);}
/* 海鹽 */
:root[data-palette="ocean"]{--ink:#0f3a40;--ink-elev:#164a51;--paper:#f4f8f8;--paper-elev:#ffffff;--paper-sunken:#e4eeee;--text:#132326;--text-sec:#4c5f62;--text-ter:#5a6d70;--ondark:#e9f4f4;--ondark-sec:#a7c4c6;--line:#d8e4e4;--line-strong:#c2d3d4;--line-dark:#2c5a60;--red:#b8432f;--gold:#7a5f18;--green:#22704a;--on-red:#ffffff;--on-gold:#ffffff;--red-ondark:#ff9c84;--gold-ondark:#e6c46a;--bg:var(--paper);--fill-red:#b8432f;--fill-gold:#7a5f18;--on-fill:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="ocean"]:not([data-theme="light"]){--ink:#0d1f22;--ink-elev:#14292d;--paper:#0a1214;--paper-elev:#111d20;--paper-sunken:#070d0e;--text:#e6f1f1;--text-sec:#a3b8ba;--text-ter:#8aa0a2;--ondark:#e6f1f1;--ondark-sec:#a5c0c2;--line:#1f2f32;--line-strong:#2b4044;--line-dark:#24434a;--red:#ff9c84;--gold:#e6c46a;--green:#74d0a0;--on-red:#0a1214;--on-gold:#0a1214;--red-ondark:#ff9c84;--gold-ondark:#e6c46a;--bg:var(--paper);}}
:root[data-palette="ocean"][data-theme="dark"]{--ink:#0d1f22;--ink-elev:#14292d;--paper:#0a1214;--paper-elev:#111d20;--paper-sunken:#070d0e;--text:#e6f1f1;--text-sec:#a3b8ba;--text-ter:#8aa0a2;--ondark:#e6f1f1;--ondark-sec:#a5c0c2;--line:#1f2f32;--line-strong:#2b4044;--line-dark:#24434a;--red:#ff9c84;--gold:#e6c46a;--green:#74d0a0;--on-red:#0a1214;--on-gold:#0a1214;--red-ondark:#ff9c84;--gold-ondark:#e6c46a;--bg:var(--paper);}
/* 墨白 */
:root[data-palette="ink"]{--ink:#ffffff;--ink-elev:#f2f2f0;--paper:#f7f7f5;--paper-elev:#ffffff;--paper-sunken:#ececea;--text:#111111;--text-sec:#555555;--text-ter:#666666;--ondark:#111111;--ondark-sec:#555555;--line:#e5e5e3;--line-strong:#d4d4d2;--line-dark:#dddddb;--red:#c8102e;--gold:#7a6020;--green:#1e6e3a;--on-red:#ffffff;--on-gold:#ffffff;--red-ondark:#c8102e;--gold-ondark:#6e5718;--bg:var(--paper);--fill-red:#c8102e;--fill-gold:#7a6020;--on-fill:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="ink"]:not([data-theme="light"]){--ink:#000000;--ink-elev:#111111;--paper:#0a0a0a;--paper-elev:#161616;--paper-sunken:#050505;--text:#f2f2f2;--text-sec:#a8a8a8;--text-ter:#8c8c8c;--ondark:#f2f2f2;--ondark-sec:#a8a8a8;--line:#262626;--line-strong:#333333;--line-dark:#2a2a2a;--red:#ff6b6b;--gold:#e0c070;--green:#6fd08f;--on-red:#0a0a0a;--on-gold:#0a0a0a;--red-ondark:#ff6b6b;--gold-ondark:#e0c070;--bg:var(--paper);}}
:root[data-palette="ink"][data-theme="dark"]{--ink:#000000;--ink-elev:#111111;--paper:#0a0a0a;--paper-elev:#161616;--paper-sunken:#050505;--text:#f2f2f2;--text-sec:#a8a8a8;--text-ter:#8c8c8c;--ondark:#f2f2f2;--ondark-sec:#a8a8a8;--line:#262626;--line-strong:#333333;--line-dark:#2a2a2a;--red:#ff6b6b;--gold:#e0c070;--green:#6fd08f;--on-red:#0a0a0a;--on-gold:#0a0a0a;--red-ondark:#ff6b6b;--gold-ondark:#e0c070;--bg:var(--paper);}
/* 薰衣草 */
:root[data-palette="lavender"]{--ink:#2a1f3d;--ink-elev:#362850;--paper:#f8f6fb;--paper-elev:#ffffff;--paper-sunken:#ece8f3;--text:#1e1829;--text-sec:#5a5068;--text-ter:#675d75;--ondark:#f1ecf8;--ondark-sec:#bcb0cf;--line:#e2dcec;--line-strong:#cfc6de;--line-dark:#4a3c63;--red:#9b3a6e;--gold:#7e5f1a;--green:#2c6e4a;--on-red:#ffffff;--on-gold:#ffffff;--red-ondark:#f0a6cf;--gold-ondark:#e3c46f;--bg:var(--paper);--fill-red:#9b3a6e;--fill-gold:#7e5f1a;--on-fill:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="lavender"]:not([data-theme="light"]){--ink:#1a1328;--ink-elev:#241b37;--paper:#110d18;--paper-elev:#1a1524;--paper-sunken:#0b0910;--text:#efeaf6;--text-sec:#b2a8c2;--text-ter:#968ca7;--ondark:#efeaf6;--ondark-sec:#b8acca;--line:#2a2337;--line-strong:#382f48;--line-dark:#3a2e52;--red:#f0a6cf;--gold:#e3c46f;--green:#80cfa2;--on-red:#110d18;--on-gold:#110d18;--red-ondark:#f0a6cf;--gold-ondark:#e3c46f;--bg:var(--paper);}}
:root[data-palette="lavender"][data-theme="dark"]{--ink:#1a1328;--ink-elev:#241b37;--paper:#110d18;--paper-elev:#1a1524;--paper-sunken:#0b0910;--text:#efeaf6;--text-sec:#b2a8c2;--text-ter:#968ca7;--ondark:#efeaf6;--ondark-sec:#b8acca;--line:#2a2337;--line-strong:#382f48;--line-dark:#3a2e52;--red:#f0a6cf;--gold:#e3c46f;--green:#80cfa2;--on-red:#110d18;--on-gold:#110d18;--red-ondark:#f0a6cf;--gold-ondark:#e3c46f;--bg:var(--paper);}
/* 赤陶 */
:root[data-palette="terracotta"]{--ink:#76301b;--ink-elev:#80341e;--paper:#fbf6f1;--paper-elev:#ffffff;--paper-sunken:#f3e8de;--text:#2a1a12;--text-sec:#66503f;--text-ter:#75604f;--ondark:#fbefe6;--ondark-sec:#f0c9b6;--line:#ecdccd;--line-strong:#dcc4ae;--line-dark:#a9563a;--red:#a8401f;--gold:#7b5d17;--green:#3d6b2a;--on-red:#ffffff;--on-gold:#ffffff;--red-ondark:#ffd59a;--gold-ondark:#ffd59a;--bg:var(--paper);--fill-red:#a8401f;--fill-gold:#7b5d17;--on-fill:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="terracotta"]:not([data-theme="light"]){--ink:#3a1c12;--ink-elev:#4a2518;--paper:#17100c;--paper-elev:#211813;--paper-sunken:#110b08;--text:#f5e9df;--text-sec:#c2ad9d;--text-ter:#a69282;--ondark:#f8ece2;--ondark-sec:#e2bfa9;--line:#36271e;--line-strong:#4a362a;--line-dark:#6a3826;--red:#f0a07e;--gold:#e2bf6a;--green:#9cc98a;--on-red:#17100c;--on-gold:#17100c;--red-ondark:#ffd59a;--gold-ondark:#ffd59a;--bg:var(--paper);}}
:root[data-palette="terracotta"][data-theme="dark"]{--ink:#3a1c12;--ink-elev:#4a2518;--paper:#17100c;--paper-elev:#211813;--paper-sunken:#110b08;--text:#f5e9df;--text-sec:#c2ad9d;--text-ter:#a69282;--ondark:#f8ece2;--ondark-sec:#e2bfa9;--line:#36271e;--line-strong:#4a362a;--line-dark:#6a3826;--red:#f0a07e;--gold:#e2bf6a;--green:#9cc98a;--on-red:#17100c;--on-gold:#17100c;--red-ondark:#ffd59a;--gold-ondark:#ffd59a;--bg:var(--paper);}
/* 系統設定「增加對比」時：次要文字一律用主要文字色 */
@media (prefers-contrast: more){:root{--text-sec:var(--text) !important;--text-ter:var(--text) !important;--ondark-sec:var(--ondark) !important;}}
/* Windows 高對比等「強制色彩」模式：交給系統配色，並幫按鈕補上外框避免消失 */
@media (forced-colors: active){.btn,.pay-badge,.cart-count,.badge-new,.badge-pop,.picker-card,.option-card,.price-opt{border:1px solid ButtonText;}}
/* 🎨 網站配色 PALETTES 結束 */
/* 🔤 字體組合 FONTS 開始（由後台「網站外觀」切換；data-font 換掉 --serif 標題／--sans 內文／--mono 英文數字） */
:root[data-font="classic"]{--serif:"Noto Serif TC",Georgia,serif;--sans:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;--mono:"Space Mono","Noto Sans TC",monospace;}
:root[data-font="apple"]{--serif:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;--sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;--mono:"Inter",-apple-system,"Noto Sans TC",sans-serif;}
:root[data-font="wenkai"]{--serif:"LXGW WenKai TC","Noto Serif TC",serif;--sans:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;--mono:"IBM Plex Mono","Noto Sans TC",monospace;}
:root[data-font="sung"]{--serif:"Chiron Sung HK","Noto Serif TC",serif;--sans:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;--mono:"DM Mono","Noto Sans TC",monospace;}
:root[data-font="huninn"]{--serif:"Huninn","Noto Sans TC",sans-serif;--sans:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;--mono:"Nunito","Noto Sans TC",sans-serif;}
:root[data-font="huninn"] .hero-section h1,:root[data-font="huninn"] .process-name,:root[data-font="huninn"] .section-head h2,:root[data-font="huninn"] .brew-card h3,:root[data-font="huninn"] .category-head h3,:root[data-font="huninn"] .card-name-cn,:root[data-font="huninn"] .spec-v,:root[data-font="huninn"] .drawer-head h3,:root[data-font="huninn"] .cart-line .info b,:root[data-font="huninn"] .modal h3,:root[data-font="huninn"] .guide-item h4{font-weight:400;}
:root[data-font="iansui"]{--serif:"Iansui","Noto Serif TC",serif;--sans:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;--mono:"Space Mono","Noto Sans TC",monospace;}
:root[data-font="iansui"] .hero-section h1,:root[data-font="iansui"] .process-name,:root[data-font="iansui"] .section-head h2,:root[data-font="iansui"] .brew-card h3,:root[data-font="iansui"] .category-head h3,:root[data-font="iansui"] .card-name-cn,:root[data-font="iansui"] .spec-v,:root[data-font="iansui"] .drawer-head h3,:root[data-font="iansui"] .cart-line .info b,:root[data-font="iansui"] .modal h3,:root[data-font="iansui"] .guide-item h4{font-weight:400;}
/* 🔤 字體組合 FONTS 結束 */
/* 🅱️ LOGO 字體 開始（導覽列「B · ROLL」；由後台「網站外觀」切換） */
:root{--logo-font:"Space Mono",monospace;--logo-w:700;--logo-ls:.08em;--logo-size:14px;--logo-style:normal;}
:root[data-logo="mono"]{--logo-font:"Space Mono",monospace;--logo-w:700;--logo-ls:.08em;--logo-size:14px;--logo-style:normal;}
:root[data-logo="inter"]{--logo-font:"Inter",-apple-system,sans-serif;--logo-w:600;--logo-ls:.03em;--logo-size:16px;--logo-style:normal;}
:root[data-logo="montserrat"]{--logo-font:"Montserrat",sans-serif;--logo-w:700;--logo-ls:.2em;--logo-size:13px;--logo-style:normal;}
:root[data-logo="josefin"]{--logo-font:"Josefin Sans",sans-serif;--logo-w:600;--logo-ls:.24em;--logo-size:14px;--logo-style:normal;}
:root[data-logo="bebas"]{--logo-font:"Bebas Neue",sans-serif;--logo-w:400;--logo-ls:.14em;--logo-size:21px;--logo-style:normal;}
:root[data-logo="archivo"]{--logo-font:"Archivo Black",sans-serif;--logo-w:400;--logo-ls:.06em;--logo-size:15px;--logo-style:normal;}
:root[data-logo="syne"]{--logo-font:"Syne",sans-serif;--logo-w:800;--logo-ls:.06em;--logo-size:16px;--logo-style:normal;}
:root[data-logo="playfair"]{--logo-font:"Playfair Display",serif;--logo-w:700;--logo-ls:.05em;--logo-size:17px;--logo-style:normal;}
:root[data-logo="dmserif"]{--logo-font:"DM Serif Display",serif;--logo-w:400;--logo-ls:.04em;--logo-size:18px;--logo-style:normal;}
:root[data-logo="fraunces"]{--logo-font:"Fraunces",serif;--logo-w:600;--logo-ls:.03em;--logo-size:18px;--logo-style:italic;}
/* 🅱️ LOGO 字體 結束 */
/* 🃏 商品卡樣式 CARD STYLES 開始（data-card；只改外觀，cardHtml() 不變） */
:root:not([data-card="classic"]) .card:hover{box-shadow:none;transform:none;}
/* ── 極簡線條 ── */
:root[data-card="minimal"] .card{background:transparent;border:none;border-top:1px solid var(--line-strong);border-radius:0;padding:18px 2px 6px;gap:12px;}
:root[data-card="minimal"] .card-badges{top:18px;right:2px;}
:root[data-card="minimal"] .card-tags{gap:4px 12px;}
:root[data-card="minimal"] .card-name-en,:root[data-card="minimal"] .card-name-meta{border-color:transparent;padding-left:0;padding-right:0;}
:root[data-card="minimal"] .card-name-meta + .card-name-meta:before,:root[data-card="minimal"] .card-name-en + .card-name-meta:before{content:"·";margin-right:12px;color:var(--text-ter);}
:root[data-card="minimal"] .usage-chip{border-color:transparent;background:var(--paper-sunken);}
:root[data-card="minimal"] .flavor-meter{border-color:transparent;padding:4px 0;}
:root[data-card="minimal"] .price-opt{border-radius:999px;}
/* ── 柔和圓角 ── */
:root[data-card="soft"] .card{border:none;border-radius:28px;padding:26px 24px;background:color-mix(in srgb, var(--text) 4.5%, var(--paper));gap:12px;}
:root[data-card="soft"] .card:hover{box-shadow:0 18px 40px -26px rgba(0,0,0,.35);}
:root[data-card="soft"] .card-badges{top:24px;right:22px;}
:root[data-card="soft"] .card-name-cn{font-size:23px;}
:root[data-card="soft"] .card-name-en,:root[data-card="soft"] .card-name-meta,:root[data-card="soft"] .usage-chip{border-color:transparent;background:var(--paper-elev);}
:root[data-card="soft"] .flavor-meter{border:none;background:var(--paper-elev);border-radius:16px;padding:14px 16px;}
:root[data-card="soft"] .flavor-track{height:5px;}
:root[data-card="soft"] .price-opt{border-color:transparent;background:var(--paper-elev);border-radius:14px;}
:root[data-card="soft"] .price-opt.sel{border-color:var(--text);background:var(--paper-elev);}
/* ── 雜誌橫排 ── */
:root[data-card="magazine"] .card{background:transparent;border:none;border-top:2px solid var(--text);border-radius:0;padding:16px 0 8px;gap:12px;}
:root[data-card="magazine"] .card-badges{position:static;justify-content:flex-start;align-items:flex-start;}
:root[data-card="magazine"] .card-badges:empty{display:none;}
:root[data-card="magazine"] .card-top{padding-right:0;}
:root[data-card="magazine"] .card-name-cn{font-size:25px;line-height:1.28;}
:root[data-card="magazine"] .card-taste{font-family:var(--serif);font-size:14.5px;line-height:1.75;}
:root[data-card="magazine"] .card-name-en,:root[data-card="magazine"] .card-name-meta{border-radius:4px;}
:root[data-card="magazine"] .usage-chip,:root[data-card="magazine"] .price-opt{border-radius:4px;}
@media(min-width:760px){
  :root[data-card="magazine"] .cat-grid{grid-template-columns:repeat(auto-fill,minmax(500px,1fr));column-gap:36px;row-gap:28px;}
  :root[data-card="magazine"] .card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:24px;row-gap:10px;align-content:start;}
  :root[data-card="magazine"] .card > *{grid-column:1;align-self:start;}
  :root[data-card="magazine"] .card > .card-badges{grid-row:1;}
  :root[data-card="magazine"] .card > .card-top{grid-row:2;}
  :root[data-card="magazine"] .card > .card-taste{grid-row:3;}
  :root[data-card="magazine"] .card > .usage-row{grid-row:4;}
  :root[data-card="magazine"] .card > .card-detail{grid-row:5 / span 2;}
  :root[data-card="magazine"] .card > .flavor-meter{grid-column:2;grid-row:1 / span 3;}
  :root[data-card="magazine"] .card > .price-row{grid-column:2;grid-row:4;}
  :root[data-card="magazine"] .card > .card-actions{grid-column:2;grid-row:5;}
  :root[data-card="magazine"] .card > .card-foot{grid-column:2;grid-row:6;}
  :root[data-card="magazine"] .flavor-meter{margin-top:0;}
}
/* 🃏 商品卡樣式 CARD STYLES 結束 */
/* 🃏 全新排列的商品卡 開始（由後台「網站外觀」切換；cardHtml 依 data-card 換成不同版型） */
.lay .card-badges{position:static;display:flex;gap:6px;flex-wrap:wrap;}
.lay .card-badges:empty{display:none;}
.lay .card-top{padding-right:0;}
.lay .lay-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--text-ter);text-transform:uppercase;}
.lay .lay-meta{font-size:11.5px;color:var(--text-sec);}
.lay .lay-notes{display:flex;flex-wrap:wrap;gap:6px;}
.lay .lay-note{font-size:11.5px;line-height:15px;padding:4px 10px;border-radius:999px;background:var(--paper-sunken);color:var(--text);}

/* ── ① 風味雷達：右上角雷達圖，名字在左 ── */
.lay-radar .rd-head{display:grid;grid-template-columns:minmax(0,1fr) 118px;gap:10px;align-items:center;}
.lay-radar .card-name-cn{margin:2px 0 6px;}
.rd-svg{width:118px;height:118px;display:block;overflow:visible;}
.rd-svg .grid{fill:none;stroke:var(--line-strong);stroke-width:1;}
.rd-svg .axis{stroke:var(--line);stroke-width:1;}
.rd-svg .area{fill:color-mix(in srgb, var(--gold) 28%, transparent);stroke:var(--gold);stroke-width:1.6;stroke-linejoin:round;}
.rd-svg .pt{fill:var(--gold);}
.rd-svg text{font-family:var(--sans);font-size:9.5px;fill:var(--text-sec);}

/* ── ② 風味先行：風味大字當標題，名字變小 ── */
.lay-notesfirst{gap:14px;}
.nf-eyebrow{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.nf-big{font-family:var(--serif);font-weight:600;font-size:25px;line-height:1.35;margin:0;color:var(--text);}
.nf-big span{white-space:nowrap;}
.nf-big i{font-style:normal;color:var(--red);margin:0 .18em;}
.nf-name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line);}
.nf-name b{font-family:var(--serif);font-size:15px;}
.nf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.nf-stat{background:var(--paper-sunken);border-radius:10px;padding:9px 6px 8px;text-align:center;}
.nf-stat .k{display:block;font-size:10.5px;color:var(--text-ter);margin-bottom:4px;}
.nf-stat .v{display:block;font-family:var(--mono);font-size:19px;font-weight:700;color:var(--text);line-height:1;}
.nf-stat .v small{font-size:10px;color:var(--text-ter);font-weight:400;}

/* ── ③ 咖啡袋標籤：置中排列，四個圓環 ── */
.lay-label{text-align:center;align-items:stretch;}
.lay-label .card-badges{justify-content:center;}
.lb-frame{border:1px solid var(--line-strong);border-radius:14px;padding:16px 12px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.lb-frame .card-name-cn{margin:0;font-size:22px;}
.lb-rule{width:36px;height:2px;background:var(--red);border-radius:2px;margin:4px 0;}
.lb-notes{font-family:var(--serif);font-size:14px;color:var(--text);letter-spacing:.04em;}
.lb-rings{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.lb-ring svg{width:46px;height:46px;display:block;margin:0 auto 3px;transform:rotate(-90deg);}
.lb-ring .bg{fill:none;stroke:var(--paper-sunken);stroke-width:5;}
.lb-ring .fg{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;}
.lb-ring span{font-size:10.5px;color:var(--text-sec);}
.lay-label .card-taste{text-align:center;}
.lay-label .usage-row{justify-content:center;}

/* ── ④ 票券：左邊深色票根，直條圖 ── */
.lay-ticket{padding:0 !important;flex-direction:row !important;gap:0 !important;overflow:hidden;}
.tk-stub{flex:0 0 74px;background:var(--ink);color:var(--ondark);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:16px 0;position:relative;}
.tk-stub:after{content:"";position:absolute;right:-1px;top:10px;bottom:10px;border-right:2px dashed var(--paper-elev);}
.tk-country{writing-mode:vertical-rl;font-family:var(--mono);font-size:12px;letter-spacing:.24em;font-weight:700;}
.tk-roast{font-size:11px;color:var(--ondark-sec);writing-mode:vertical-rl;letter-spacing:.2em;}
.tk-main{flex:1;min-width:0;padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;}
.tk-bars{display:flex;gap:10px;align-items:flex-end;height:74px;padding:0 2px 0;border-bottom:1px solid var(--line-strong);}
.tk-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px;}
.tk-bar i{display:block;width:100%;max-width:26px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--gold),color-mix(in srgb, var(--gold) 55%, transparent));}
.tk-bar b{font-family:var(--mono);font-size:10px;color:var(--text-sec);font-weight:400;}
.tk-labels{display:flex;gap:10px;margin-top:5px;}
.tk-labels span{flex:1;text-align:center;font-size:10.5px;color:var(--text-ter);}
.lay-ticket .card-name-cn{font-size:19px;margin:2px 0 6px;}
.lay-ticket .price-opt{padding:7px 4px;min-width:0;}
/* 🃏 全新排列的商品卡 結束 */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:64px;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.mono{font-family:var(--mono);letter-spacing:.04em;}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin:0 0 10px;font-weight:700;}

/* 🌐 全域變數與基礎樣式 結束 */

/* ---------- 🧭 頂部導覽列 NAV 開始 ---------- */
.nav{position:sticky;top:0;z-index:80;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb, var(--ink) 92%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-dark);}
.nav-inner{max-width:1120px;margin:0 auto;padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--ondark);}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--logo-font);font-weight:var(--logo-w);letter-spacing:var(--logo-ls);font-size:var(--logo-size);font-style:var(--logo-style);white-space:nowrap;}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--red);display:inline-block;}
.nav-links{display:none;gap:26px;font-size:12.5px;}
@media(min-width:820px){.nav-links{display:flex;}}
/* 首頁前三個是 <button>：Safari 的按鈕預設字級比較小，這裡指定成和 <a> 一樣（13.3333px），文字才會一樣大 */
.nav-links button{background:none;border:none;color:var(--ondark-sec);cursor:pointer;padding:6px 0;font-family:var(--mono);font-size:13.3333px;font-weight:inherit;line-height:inherit;letter-spacing:.05em;-webkit-appearance:none;appearance:none;}
.nav-links button:hover{color:var(--ondark);}
.nav-actions{display:flex;align-items:center;gap:10px;}
.icon-btn{background:none;border:none;color:var(--ondark);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;padding:6px;}
.cart-count{position:absolute;top:-2px;right:-2px;background:var(--fill-red);color:var(--on-fill);font-size:10.5px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-family:var(--sans);}
.ship-pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--gold-ondark);border:1px solid var(--gold-ondark);border-radius:999px;padding:4px 10px;white-space:nowrap;display:none;}
@media(min-width:640px){.ship-pill{display:inline-block;}}

/* ---------- 🧭 頂部導覽列 NAV 結束 ---------- */

/* ---------- 🍎 加入購物車提示條 CART TOAST 開始（仿 Apple 官網：顯示在導覽列下方，往上滑顯示／往下滑收起） ---------- */
.cart-toast{position:fixed;left:0;right:0;top:calc(56px + env(safe-area-inset-top,0px));z-index:78;background:var(--paper-elev);border-bottom:1px solid var(--line);box-shadow:0 14px 30px -20px rgba(30,20,10,.35);transform:translateY(-110%);transition:transform .28s ease;pointer-events:none;}
.cart-toast.show{transform:translateY(0);pointer-events:auto;}
.cart-toast-inner{max-width:1120px;margin:0 auto;padding:9px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.cart-toast-main{display:flex;align-items:center;gap:10px;min-width:0;}
.cart-toast-check{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--fill-red);color:var(--on-fill);display:flex;align-items:center;justify-content:center;}
.cart-toast-check svg{width:11px;height:11px;}
.cart-toast-text{min-width:0;}
.cart-toast-text .line1{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cart-toast-text .line2{font-family:var(--mono);font-size:10.5px;color:var(--text-sec);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:560px){
  .cart-toast-inner{padding:8px 16px;gap:8px;}
  .cart-toast-text .line1{font-size:11.5px;}
  .cart-toast-text .line2{font-size:10px;}
}
/* ---------- 🍎 加入購物車提示條 CART TOAST 結束 ---------- */

/* ---------- 🏔️ HERO 主視覺區塊（深色） 開始 ---------- */
.hero-section{background:var(--ink);color:var(--ondark);padding:76px 0 64px;}
.hero-kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ondark-sec);margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.hero-kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--red);}
.hero-section h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,6vw,54px);line-height:1.3;margin:0 0 22px;max-width:640px;}
.hero-section h1 em{font-style:normal;color:var(--red-ondark);}
.hero-section p.lead{max-width:480px;color:var(--ondark-sec);font-size:15.5px;margin:0 0 32px;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.btn{appearance:none;border:none;cursor:pointer;border-radius:999px;padding:13px 24px;font-size:13.5px;font-weight:600;letter-spacing:.02em;transition:transform .15s ease, opacity .15s ease;font-family:var(--sans);}
.btn-primary{background:var(--ondark);color:var(--ink);}
.btn-primary:hover{opacity:.86;}
.btn-outline{background:transparent;color:var(--ondark);border:1px solid var(--line-dark);}
.btn-outline:hover{border-color:var(--ondark-sec);}
.btn-ink{background:var(--ink);color:var(--ondark);border:1px solid var(--line-dark);}
.btn-red{background:var(--fill-red);color:var(--on-fill);}
.btn-red:hover{opacity:.88;}
.btn-sm{padding:9px 16px;font-size:12px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.pay-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:10.5px;letter-spacing:.03em;padding:3px 9px;border-radius:999px;font-weight:700;}
.pay-badge.pending{color:var(--gold);border:1px solid var(--gold);background:color-mix(in srgb, var(--gold) 12%, transparent);}
.pay-badge.failed{color:var(--red);border:1px solid var(--red);background:color-mix(in srgb, var(--red) 12%, transparent);}
.pay-badge.paid{color:var(--green);border:1px solid var(--green);background:color-mix(in srgb, var(--green) 12%, transparent);}
.pay-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.pay-badge.pending .dot{animation:pay-pulse 1.1s ease-in-out infinite;}
@keyframes pay-pulse{0%,100%{opacity:1;}50%{opacity:.25;}}

/* ---------- 🏔️ HERO 主視覺區塊（深色） 結束 ---------- */

/* ---------- ☕ 生活情境選豆卡片 USE-CASE PICKER 開始 ---------- */
.picker-section{background:var(--ink);padding:64px 0 68px;color:var(--ondark);}
.picker-section .section-head p{color:var(--ondark-sec);}
.picker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;}
.picker-card{background:var(--ink-elev);border:1px solid var(--line-dark);border-radius:var(--radius-m);padding:22px 18px;cursor:pointer;text-align:left;transition:border-color .15s ease, background .15s ease;}
.picker-card:hover{border-color:var(--ondark-sec);}
.picker-card.sel{background:var(--ondark);border-color:var(--ondark);}
.picker-card.sel .picker-icon svg{stroke:var(--ink);}
.picker-card.sel .picker-name{color:var(--ink);}
.picker-card.sel .picker-desc{color:var(--ink);opacity:.65;}
.picker-icon{margin-bottom:14px;}
.picker-icon svg{stroke:var(--ondark);width:24px;height:24px;}
.picker-name{font-family:var(--mono);font-weight:700;font-size:13.5px;letter-spacing:.03em;margin-bottom:8px;color:var(--ondark);}
.picker-desc{font-size:12px;color:var(--ondark-sec);line-height:1.65;}

/* ---------- ☕ 生活情境選豆卡片 USE-CASE PICKER 結束 ---------- */

/* ---------- ☕ 咖啡處理法引導 PROCESS GUIDE 開始 ---------- */
/* 說明水洗／日曬／蜜處理／特殊處理四種處理法的風味差異，並附上烘焙程度說明 */
.process-section{background:var(--paper-sunken);padding:56px 0;}
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:22px;}
.process-card{background:var(--paper-elev);border:1px solid var(--line);border-radius:var(--radius-m);padding:20px 20px 18px;cursor:pointer;transition:border-color .15s ease, transform .15s ease;}
.process-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.process-card-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--gold);margin:12px 0 0;display:flex;align-items:center;gap:5px;}
.process-card-hint svg{width:11px;height:11px;flex-shrink:0;}
.process-tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 8px;}
.process-name{font-family:var(--serif);font-weight:700;font-size:17px;margin:0 0 8px;}
.process-desc{font-size:12.5px;color:var(--text-sec);line-height:1.7;margin:0;}
/* ---------- ☕ 咖啡處理法引導 PROCESS GUIDE 結束 ---------- */

/* ---------- 📄 一般內頁區塊共用樣式 SECTIONS 開始 ---------- */
/* 只設上下留白；左右留給 .wrap（原本寫 padding:60px 0 會把 .wrap 的左右邊界蓋掉，平板與小筆電上商品卡會貼齊螢幕邊緣） */
.section{padding-top:60px;padding-bottom:60px;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap;}
.section-head h2{font-family:var(--serif);font-size:clamp(22px,3.6vw,30px);margin:0 0 6px;}
.section-head p{margin:0;color:var(--text-sec);font-size:13.5px;max-width:560px;}

/* ---------- 📄 一般內頁區塊共用樣式 SECTIONS 結束 ---------- */

/* ---------- 🫖 沖煮建議卡片 BREW GUIDE CARD 開始 ---------- */
.brew-card{background:var(--paper-elev);border:1px solid var(--line);border-radius:var(--radius-l);padding:24px 26px;margin-bottom:30px;display:grid;grid-template-columns:1.3fr 1fr;gap:24px;}
@media(max-width:760px){.brew-card{grid-template-columns:1fr;}}
.brew-card h3{font-family:var(--serif);font-size:19px;margin:0 0 8px;}
.brew-card p{font-size:13.5px;color:var(--text-sec);margin:0;}
.brew-tools{font-family:var(--mono);font-size:11.5px;color:var(--text-sec);margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--line-strong);}
.brew-tools b{color:var(--text-ter);font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:9.5px;margin-right:10px;}
.brew-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);align-content:start;}
.brew-spec{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 14px;}
.brew-spec b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-ter);margin-bottom:4px;}
.brew-spec span{font-family:var(--mono);font-size:13.5px;}

/* ---------- 🫖 沖煮建議卡片 BREW GUIDE CARD 結束 ---------- */

/* ---------- 🛍️ 商品列表與商品卡片 PRODUCT GRID / CARD 開始 ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;}
/* ---------- 🗂️ 依處理法分類區塊 CATEGORY SECTIONS（水洗／日曬／蜜處理／特殊處理／沖煮配方） 開始 ---------- */
.category-section{margin-bottom:36px;}
.category-section:last-child{margin-bottom:0;}
.category-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.category-head h3{font-family:var(--serif);font-weight:600;font-size:18px;margin:0;}
.category-count{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-ter);}
/* 分類說明文字：目前僅「沖煮配方」分類會用到，用來特別註明這款配方的設計用意 */
.category-desc{flex-basis:100%;font-size:12.5px;color:var(--text-sec);line-height:1.7;margin:4px 0 0;}
/* 手機板：橫向可滑動輪播，不自動播放，純靠手指左右滑動瀏覽 */
.cat-grid{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:10px;margin:0 -24px;padding-left:24px;padding-right:24px;scroll-padding-left:24px;scroll-padding-right:24px;}
.cat-grid .card{flex:0 0 auto;width:78vw;max-width:300px;scroll-snap-align:start;}
/* 網頁板（≥760px）：改回多欄網格排列，取消橫向滑動 */
@media(min-width:760px){
  .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));overflow-x:visible;margin:0;padding-left:0;padding-right:0;padding-bottom:0;}
  .cat-grid .card{flex:unset;width:auto;max-width:unset;}
}
/* ---------- 🗂️ 依處理法分類區塊 CATEGORY SECTIONS 結束 ---------- */
.card{background:var(--paper-elev);border:1px solid var(--line);border-radius:var(--radius-l);padding:20px;display:flex;flex-direction:column;gap:10px;position:relative;transition:box-shadow .2s ease, transform .2s ease;}
.card:hover{box-shadow:0 22px 46px -28px rgba(30,20,10,.4);transform:translateY(-2px);}
.card-badges{position:absolute;top:16px;right:16px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.badge{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.03em;line-height:15px;padding:3px 9px;border:1px solid transparent;min-width:44px;box-sizing:border-box;text-align:center;border-radius:999px;text-transform:uppercase;}
.badge-new{background:var(--fill-red);color:var(--on-fill);font-size:9.5px;letter-spacing:.04em;}
.badge-pop{background:var(--fill-gold);color:var(--on-fill);}
.badge-soon{background:var(--paper-sunken);color:var(--text-sec);border:1px solid var(--line-strong);}
.card-top{padding-right:56px;}
.card-country{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--text-ter);text-transform:uppercase;margin-bottom:4px;}
.card-name-cn{font-family:var(--serif);font-weight:700;font-size:21px;margin:0 0 8px;line-height:1.32;}
.card-tags{display:flex;flex-wrap:wrap;gap:6px;}
.card-name-en{display:inline-block;font-family:var(--mono);font-size:10px;line-height:15px;letter-spacing:.05em;color:var(--text-sec);border:1px solid var(--line-strong);border-radius:999px;padding:3px 9px;}
.card-name-meta{display:inline-block;font-family:var(--sans);font-size:10.5px;font-weight:500;line-height:15px;letter-spacing:.04em;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:3px 9px;}
.card-taste{font-size:13px;color:var(--text);line-height:1.65;margin:2px 0 0;}
.spec-strip{display:flex;gap:8px;flex-wrap:wrap;}
.spec-item{flex:1;min-width:78px;background:var(--paper-sunken);border-radius:var(--radius-s);padding:8px 10px;}
.spec-k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-ter);margin-bottom:3px;}
.spec-v{display:block;font-family:var(--serif);font-size:13.5px;font-weight:600;color:var(--text);}
.card-plain{font-size:12px;color:var(--text-sec);}
.spec-chips{display:flex;gap:6px;flex-wrap:wrap;}
.spec-chip{font-size:11px;padding:5px 10px;border-radius:8px;background:var(--paper-sunken);color:var(--text);border:1px solid var(--line-strong);display:inline-flex;align-items:baseline;gap:5px;}
.spec-chip b{font-family:var(--mono);font-size:8.5px;color:var(--text-ter);font-weight:400;letter-spacing:.06em;text-transform:uppercase;}
.usage-row{display:flex;gap:5px;flex-wrap:wrap;}
.usage-chip{font-family:var(--sans);font-size:10.5px;line-height:15px;color:var(--text-ter);border:1px solid var(--line-strong);border-radius:999px;padding:3px 9px;}
.card-detail summary{cursor:pointer;color:var(--text-ter);font-family:var(--mono);font-size:11px;list-style:none;letter-spacing:.03em;}
.card-detail summary::-webkit-details-marker{display:none;}
.card-detail summary:before{content:"＋ 產地與沖煮資訊";}
.card-detail[open] summary:before{content:"－ 收合資訊";}
.card-detail .inner{margin-top:10px;font-size:12px;color:var(--text-sec);display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;}
.card-detail .inner div b{display:block;color:var(--text-ter);font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px;}
.card-detail .story{grid-column:1/-1;margin-top:6px;padding-top:8px;border-top:1px solid var(--line);}
/* 🔗 分享這款豆子（在「產地與沖煮資訊」裡）＋ 從專屬連結進來時的卡片標示 */
/* 商品卡最下面一列：左「加入比較」、右「分享」 */
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;min-height:32px;}
.card-foot .share-bean{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;min-height:32px;border:none;border-radius:999px;background:transparent;color:var(--text-ter);font-family:var(--sans);font-size:12px;cursor:pointer;}
.card-foot .share-bean:hover{color:var(--text);background:var(--paper-sunken);}
.card-foot .share-bean svg{width:14px;height:14px;}
.card.card-spotlight{box-shadow:0 0 0 2px var(--red);transition:box-shadow .3s ease;}
@media (prefers-reduced-motion: no-preference){
  .card.card-spotlight{animation:beanSpot 1.3s ease 2;}
  @keyframes beanSpot{0%,100%{box-shadow:0 0 0 2px var(--red);}50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--red) 25%, transparent);}}
}

/* ---------- 🛍️ 商品列表與商品卡片 PRODUCT GRID / CARD 結束 ---------- */

/* ---------- 📊 風味量表 FLAVOUR METER 開始 ---------- */
.meter-block{display:flex;flex-direction:column;gap:5px;margin:2px 0 4px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.meter-row{display:grid;grid-template-columns:32px 1fr;align-items:center;gap:8px;}
.meter-label{font-family:var(--mono);font-size:9.5px;color:var(--text-ter);letter-spacing:.02em;}
.meter-track{display:flex;gap:3px;}
.meter-dot{flex:1;height:5px;border-radius:3px;background:var(--line);}
.meter-dot.on{background:var(--gold);}
.compare-table .meter-track{width:76px;}

/* ---------- 📊 商品卡片強度標示 CARD FLAVOR INDICATOR 開始 ---------- */
.flavor-meter{display:flex;flex-direction:column;gap:8px;margin:4px 0 2px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.flavor-row{display:grid;grid-template-columns:30px 1fr 12px;align-items:center;gap:10px;}
.flavor-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--text-ter);}
.flavor-track{position:relative;height:3px;border-radius:3px;background:var(--paper-sunken);}
.flavor-fill{position:relative;height:100%;border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb, var(--gold) 45%, transparent),var(--gold));transition:width .2s ease;}
.flavor-fill:after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--paper-elev);}
.flavor-num{font-family:var(--mono);font-size:9.5px;color:var(--text-ter);text-align:right;}
/* ---------- 📊 商品卡片強度標示 CARD FLAVOR INDICATOR 結束 ---------- */

.price-row{display:flex;gap:6px;flex-wrap:wrap;}
.price-opt{flex:1;min-width:74px;border:1px solid var(--line-strong);border-radius:var(--radius-m);padding:8px 8px;text-align:center;cursor:pointer;font-size:11.5px;color:var(--text-sec);}
.price-opt b{display:block;font-size:13.5px;font-family:var(--mono);color:var(--text);}
.price-opt.sel{border-color:var(--ink);background:var(--paper-sunken);}
.card-actions{display:flex;gap:8px;}
.card-actions .btn{flex:1;background:var(--ink);color:var(--ondark);}
.card-actions .btn:hover{opacity:.85;}
/* 🔔 售完／即將供應卡片上的「到貨通知我」（LINE 綠框，跟停用的灰按鈕並排） */
.card-actions .btn.btn-restock{background:transparent;color:var(--text);border:1px solid #06c755;display:inline-flex;align-items:center;justify-content:center;gap:5px;text-decoration:none;white-space:nowrap;}
.card-actions .btn.btn-restock svg{width:14px;height:14px;color:#06c755;flex:none;}

/* ---------- 📊 風味量表 FLAVOUR METER 結束 ---------- */

/* ---------- ⚖️ 商品比較 COMPARE 開始 ---------- */
.compare-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));padding-top:14px;background:var(--ink);color:var(--ondark);transform:translateY(120%);transition:transform .25s ease;border-top:1px solid var(--line-dark);}
.compare-bar.show{transform:translateY(0);}
.compare-bar-inner{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.compare-bar-inner .names{font-size:11.5px;color:var(--ondark-sec);font-family:var(--mono);}
.compare-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:620px;}
.compare-table th,.compare-table td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:middle;}
.compare-table th{color:var(--text-ter);font-weight:400;font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;}
.compare-table thead th{vertical-align:bottom;}
.compare-note{font-size:11.5px;color:var(--text-ter);margin-top:10px;}
.compare-toggle{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-ter);cursor:pointer;font-family:var(--mono);}
.compare-toggle input{accent-color:var(--red);width:13px;height:13px;}

/* ---------- ⚖️ 商品比較 COMPARE 結束 ---------- */

/* ---------- 🛒 側欄與彈窗（購物車／結帳／後台）DRAWERS / MODALS 開始 ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,8,6,.5);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:90;}
.overlay.show{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--paper-elev);z-index:95;transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);}
.drawer.show{transform:translateX(0);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line);}
.drawer-head h3{margin:0;font-family:var(--serif);font-size:18px;}
.drawer-body{flex:1;overflow-y:auto;padding:16px 22px;}
.drawer-foot{padding:18px 22px;border-top:1px solid var(--line);}
.cart-line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);}
.cart-line .info{flex:1;}
.cart-line .info b{font-family:var(--serif);font-size:14.5px;display:block;}
.cart-line .info span{font-size:11.5px;color:var(--text-sec);}
.qty{display:flex;align-items:center;gap:8px;margin-top:8px;}
.qty button{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);background:none;color:var(--text);cursor:pointer;}
.remove-link{background:none;border:none;color:var(--text-ter);font-size:11px;cursor:pointer;text-decoration:underline;margin-top:6px;padding:0;}
.subtotal-row{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:6px;}
.subtotal-row.total{font-size:16px;font-weight:600;border-top:1px solid var(--line);padding-top:12px;margin-top:8px;}
.free-ship-line{font-family:var(--mono);font-size:11px;color:var(--gold);margin-top:4px;}
/* 📊 購物車進度條：已達成打勾，未達成顯示還差多少 */
.cart-progress{margin:12px 0 8px;}
.cart-progress-track{position:relative;height:6px;border-radius:999px;background:var(--paper-sunken);}
.cart-progress-fill{height:100%;border-radius:inherit;background:var(--gold);transition:width .35s ease;}
.cart-progress.done .cart-progress-fill{background:var(--green);}
.cart-progress-mark{position:absolute;top:-3px;width:2px;height:12px;margin-left:-1px;background:var(--line-strong);border-radius:1px;}
.cart-progress-mark.ok{background:var(--green);}
.cart-steps{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--text-sec);}
.cart-steps li{display:flex;align-items:center;gap:8px;}
.cart-steps li.ok{color:var(--green);font-weight:600;}
.cart-step-ic{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;font-size:10px;flex:none;box-sizing:border-box;}
.cart-steps li.ok .cart-step-ic{background:var(--green);border-color:var(--green);color:#fff;}
/* 🔗 分享彈窗 */
.share-modal{width:min(440px,92vw);}
.share-modal h3{padding-right:28px;}
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.share-opt{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px;border:1px solid var(--line);border-radius:var(--radius-m);background:transparent;color:var(--text);font-family:var(--sans);font-size:12px;text-decoration:none;cursor:pointer;}
.share-opt:hover{background:var(--paper-sunken);}
.share-opt[hidden]{display:none;}
.share-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;font-family:var(--sans);}
.share-ic svg{width:20px;height:20px;}
.share-ig{background:linear-gradient(45deg,#f9a73e,#e1306c 50%,#833ab4);}
.share-copy{background:var(--paper-sunken);color:var(--text);font-size:20px;border:1px solid var(--line);}
.share-ig-tip{font-size:12.5px;color:var(--green);line-height:1.6;margin:14px 0 0;}
.share-url{font-family:var(--mono);font-size:11px;color:var(--text-ter);margin:14px 0 0;word-break:break-all;}

.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);width:min(620px,92vw);max-height:86vh;overflow-y:auto;background:var(--paper-elev);border-radius:var(--radius-l);z-index:96;padding:28px;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;}
.modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%);}
.modal-close{position:absolute;top:16px;right:18px;background:none;border:none;font-size:20px;color:var(--text-ter);cursor:pointer;}
.modal h3{font-family:var(--serif);font-size:21px;margin:0 0 18px;}

.field{margin-bottom:14px;}
.field label{display:block;font-size:11.5px;color:var(--text-sec);margin-bottom:6px;font-family:var(--mono);}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border-radius:var(--radius-s);border:1px solid var(--line-strong);background:var(--paper);color:var(--text);font-size:14px;font-family:inherit;}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.option-grid.three{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:480px){.option-grid,.option-grid.three{grid-template-columns:1fr;}}
.option-card{border:1px solid var(--line-strong);border-radius:var(--radius-m);padding:12px 14px;cursor:pointer;font-size:13px;}
.option-card b{display:block;font-size:14px;margin-bottom:2px;}
.option-card span{color:var(--text-sec);font-size:11.5px;}
.option-card.sel{border-color:var(--red);background:var(--paper-sunken);}
.check-row{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--text-sec);margin:14px 0;}
.check-row input{margin-top:3px;accent-color:var(--red);}
.tech-note{margin-top:14px;font-size:11.5px;color:var(--text-ter);background:var(--paper);border:1px dashed var(--line-strong);border-radius:var(--radius-m);padding:14px 16px;font-family:var(--mono);}
.tech-note b{color:var(--text-sec);font-family:var(--sans);}

/* ---------- ✅ 訂單完成畫面 ORDER SUCCESS 開始 ---------- */
.success-icon{width:46px;height:46px;border-radius:50%;background:var(--fill-red);color:var(--on-fill);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:21px;}
.order-no-box{background:var(--paper-sunken);border:1px solid var(--line-strong);border-radius:var(--radius-m);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.order-no-box .label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--text-ter);margin-bottom:2px;}
.order-no-box .no{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:.03em;color:var(--text);word-break:break-all;}
.copy-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;background:var(--text);color:var(--paper);border-color:var(--text);}
.copy-btn:hover{opacity:.86;border-color:var(--text);}
.copy-btn.copied{background:var(--fill-red);border-color:var(--fill-red);color:var(--on-fill);opacity:1;}
.success-action-btn{background:var(--paper-sunken);color:var(--text);border-color:var(--line-strong);}
.success-action-btn:hover{border-color:var(--gold);}
.send-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.send-row input{flex:1;min-width:160px;}
.send-msg{font-size:12px;color:var(--text-sec);margin-top:8px;min-height:14px;}
.send-msg.err{color:var(--red);}
/* ---------- ✅ 訂單完成畫面 ORDER SUCCESS 結束 ---------- */

/* ---------- 🛒 側欄與彈窗（購物車／結帳／後台）DRAWERS / MODALS 結束 ---------- */

/* ---------- 📦 訂單查詢 TRACK 開始 ---------- */
.track-box{background:var(--paper-elev);border:1px solid var(--line);border-radius:var(--radius-l);padding:26px;max-width:640px;}
.track-tabs{display:flex;gap:8px;margin-bottom:18px;border-bottom:1px solid var(--line);}
.track-tab{background:none;border:none;cursor:pointer;padding:8px 4px 12px;font-size:13px;color:var(--text-sec);font-family:var(--sans);border-bottom:2px solid transparent;margin-bottom:-1px;}
.track-tab.sel{color:var(--text);font-weight:600;border-bottom-color:var(--red);}
.track-panel{display:none;}
.track-panel.sel{display:block;}
.track-form{display:flex;gap:10px;flex-wrap:wrap;}
.track-form input{flex:1;min-width:200px;}
.track-hint{font-size:11.5px;color:var(--text-ter);margin:8px 0 0;}
.timeline{display:flex;justify-content:space-between;margin-top:26px;position:relative;}
.timeline:before{content:"";position:absolute;top:9px;left:0;right:0;height:2px;background:var(--line);}
.tl-step{position:relative;flex:1;text-align:center;}
.tl-dot{width:18px;height:18px;border-radius:50%;background:var(--paper-elev);border:2px solid var(--line-strong);margin:0 auto 8px;position:relative;z-index:2;}
.tl-step.done .tl-dot{background:var(--red);border-color:var(--red);}
.tl-step span{font-size:10.5px;color:var(--text-sec);font-family:var(--mono);}
.order-summary{margin-top:20px;font-size:12.5px;color:var(--text-sec);background:var(--paper-sunken);border-radius:var(--radius-m);padding:14px 16px;}
.order-summary .oi-row{display:flex;justify-content:space-between;padding:4px 0;border-top:1px dashed var(--line-strong);}
.order-summary .oi-row:first-of-type{border-top:none;}
.tracking-box{margin-top:14px;padding:12px 14px;background:var(--paper-elev);border:1px solid var(--gold);border-radius:var(--radius-m);font-size:12.5px;}
.tracking-box a{color:var(--gold);text-decoration:underline;}
.history-card{border:1px solid var(--line);border-radius:var(--radius-m);padding:14px 16px;margin-top:10px;font-size:12.5px;}
.history-card .h-head{display:flex;justify-content:space-between;font-family:var(--mono);color:var(--text-sec);font-size:11px;margin-bottom:8px;}
.history-card .oi-row{display:flex;justify-content:space-between;padding:3px 0;}

/* ---------- 📦 訂單查詢 TRACK 結束 ---------- */

/* ---------- ℹ️ 訂購說明區 INFO STRIP 開始 ---------- */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
.guide-item{border-top:1px solid var(--line);padding-top:16px;}
.guide-item .num{font-family:var(--mono);font-size:11px;color:var(--red);margin-bottom:8px;}
.guide-item h4{font-family:var(--serif);font-size:16px;margin:0 0 6px;}
.guide-item p{margin:0;font-size:12.5px;color:var(--text-sec);}

/* ---------- ℹ️ 訂購說明區 INFO STRIP 結束 ---------- */

/* ---------- ⬛ 頁尾 FOOTER 開始 ---------- */
footer{border-top:1px solid var(--line-dark);padding:56px 0 40px;background:var(--ink);color:var(--ondark);}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
.foot-grid h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ondark-sec);margin:0 0 14px;}
.foot-grid a,.foot-grid p{display:block;font-size:12.5px;color:var(--ondark-sec);margin-bottom:8px;}
.foot-grid a:hover{color:var(--ondark);}
.foot-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--ondark-sec);font-family:var(--mono);}

/* ---------- ⬛ 頁尾 FOOTER 結束 ---------- */

/* 📜 全站捲軸樣式 SCROLLBAR 開始 */
::-webkit-scrollbar{height:6px;width:6px;}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px;}
/* 📜 全站捲軸樣式 SCROLLBAR 結束 */

/* ---------- 📱 手機版兩側邊界調整 MOBILE SIDE SPACING 開始 ---------- */
/* 縮小手機寬度下各區塊左右留白，避免內文（含側欄／彈窗訊息文字）被過大邊界壓縮 */
@media(max-width:480px){
  .wrap,.nav-inner,.compare-bar-inner{padding-left:16px;padding-right:16px;}
  .drawer-head,.drawer-foot,.drawer-body{padding-left:16px;padding-right:16px;}
  .modal{padding:22px 16px;width:94vw;}
  .track-box{padding:20px 16px;}
  .tech-note{padding:12px 14px;}
  /* .cat-grid 的左右留白是靠「負外距 + 內距」抵銷 .wrap 的邊界，這裡的 wrap 邊界改成 16px，
     所以 .cat-grid 也要跟著改成 16px，不然數值仍是 24px，會讓第一張卡片被裁掉一角、貼齊螢幕邊緣 */
  .cat-grid{margin:0 -16px;padding-left:16px;padding-right:16px;scroll-padding-left:16px;scroll-padding-right:16px;}
}
/* ---------- 📱 手機版兩側邊界調整 MOBILE SIDE SPACING 結束 ---------- */

/* ---------- ⬆️ 回到頂端按鈕 BACK TO TOP 開始 ---------- */
.back-to-top{
  position:fixed;
  right:20px;
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:70;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line-dark);
  background:var(--ink);
  color:var(--ondark);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(20,15,8,.5);
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, border-color .15s ease;
}
.back-to-top.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.back-to-top:hover{border-color:var(--ondark-sec);}
.back-to-top svg{width:18px;height:18px;}
@media(max-width:480px){
  .back-to-top{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:40px;height:40px;}
}
/* ---------- ⬆️ 回到頂端按鈕 BACK TO TOP 結束 ---------- */
/* ============ 🚧 暫停營業畫面 CLOSED SCREEN 開始 ============
   後台「緊急開關」開啟時，/api/products 回傳 closed:true，整頁蓋上這個畫面。
   網址加 ?pclosed=1 可以只預覽畫面（不影響顧客）。 */
.closed-screen{position:fixed;inset:0;z-index:99999;background:var(--paper);color:var(--text);display:flex;align-items:center;justify-content:center;padding:24px 16px;overflow-y:auto;}
.closed-screen[hidden]{display:none;}
html.is-closed, html.is-closed body{overflow:hidden;}
.closed-inner{max-width:440px;width:100%;text-align:center;}
.closed-art{position:relative;width:170px;height:170px;margin:0 auto 10px;color:var(--text);}
.closed-art svg{width:100%;height:100%;display:block;}
.closed-art .steam path{stroke:var(--text-sec);animation:cs-steam 3.2s ease-in-out infinite;opacity:0;}
.closed-art .steam path:nth-child(2){animation-delay:.9s;}
.closed-art .steam path:nth-child(3){animation-delay:1.8s;}
.closed-art .zz{position:absolute;font-family:var(--mono);font-weight:700;color:var(--red);opacity:0;animation:cs-z 3.6s ease-in-out infinite;}
.closed-art .zz.a{right:22px;top:46px;font-size:15px;}
.closed-art .zz.b{right:8px;top:30px;font-size:19px;animation-delay:1.2s;}
.closed-art .zz.c{right:-6px;top:12px;font-size:23px;animation-delay:2.4s;}
@keyframes cs-steam{0%{opacity:0;transform:translateY(8px);}35%{opacity:.85;}100%{opacity:0;transform:translateY(-14px);}}
@keyframes cs-z{0%{opacity:0;transform:translate(0,6px) rotate(-8deg);}30%{opacity:1;}100%{opacity:0;transform:translate(10px,-16px) rotate(8deg);}}
.closed-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--text-sec);margin:0 0 10px;}
.closed-screen h1{font-family:var(--serif);font-size:clamp(26px,6vw,34px);line-height:1.3;margin:0 0 14px;color:var(--text);}
.closed-screen p.closed-lead{text-wrap:balance;font-size:15px;line-height:1.8;color:var(--text-sec);margin:0 0 18px;}
.closed-note{border:1px dashed var(--line-strong);border-radius:var(--radius-m);padding:12px 14px;margin:0 auto 20px;font-size:14px;line-height:1.7;color:var(--text);background:var(--paper-elev);}
.closed-note[hidden]{display:none;}
.closed-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.closed-actions .btn-line{background:var(--fill-red);color:var(--on-fill);text-decoration:none;}
.closed-actions .btn-again{background:transparent;color:var(--text);border:1px solid var(--line-strong);}
.closed-tip{margin:26px 0 0;font-size:12.5px;line-height:1.7;color:var(--text-ter);}
@media (prefers-reduced-motion: reduce){.closed-art .steam path,.closed-art .zz{animation:none;opacity:.7;}}
/* ============ 🚧 暫停營業畫面 CLOSED SCREEN 結束 ============ */

/* ============ 🧭 導覽列連結＋手機選單 MENU 開始（首頁與 /about 共用） ============ */
.nav-links a{font-size:13.3333px;color:var(--ondark-sec);text-decoration:none;padding:6px 0;font-family:var(--mono);letter-spacing:.05em;}
.nav-links a:hover,.nav-links a.here{color:var(--ondark);}
.nav a.brand{color:inherit;text-decoration:none;align-self:stretch;min-height:44px;padding-right:14px;position:relative;z-index:2;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;}
.menu-btn{display:flex;}
@media(min-width:820px){.menu-btn{display:none;}}
.menu-panel{display:none;background:var(--ink);border-bottom:1px solid var(--line-dark);padding:6px 16px 14px;}
.menu-panel.open{display:block;}
@media(min-width:820px){.menu-panel.open{display:none;}}
.menu-panel a,.menu-panel button{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line-dark);padding:12px 4px;color:var(--ondark);text-decoration:none;font-size:14.5px;font-family:var(--sans);cursor:pointer;}
.menu-panel > :last-child{border-bottom:none;}
.menu-panel small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ondark-sec);margin-left:8px;}
/* ============ 🧭 導覽列連結＋手機選單 MENU 結束 ============ */

/* 🔔 到貨通知彈窗（電腦版） */
.restock-modal{width:min(560px,92vw);}
.restock-lead{font-size:14px;color:var(--text-sec);margin:-8px 0 18px;}
.restock-ways{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;}
.restock-way{display:flex;flex-direction:column;gap:8px;}
.restock-step{font-weight:600;font-size:13.5px;margin:0;color:var(--text);}
.restock-hint{font-size:12px;color:var(--text-ter);margin:0;line-height:1.6;}
.restock-qr{width:184px;height:184px;padding:8px;background:#fff;border-radius:var(--radius-s);border:1px solid var(--line);box-sizing:border-box;display:flex;align-items:center;justify-content:center;}
.restock-qr img,.restock-qr canvas{display:block;}
.restock-text{display:block;font-family:var(--mono);font-size:12.5px;background:var(--paper-sunken);border:1px solid var(--line);border-radius:var(--radius-s);padding:10px 12px;color:var(--text);word-break:break-all;}
.restock-way .btn{align-self:flex-start;color:var(--text);border-color:var(--line-strong);}
@media (max-width:520px){ .restock-ways{grid-template-columns:1fr;} }

/* 🎚️ 區塊交替背景 開始（商品區下方：商品比較、訂單查詢用較深底色，和「訂購、付款與配送」一淺一深交錯；
   box-shadow + clip-path 讓底色延伸到整個螢幕寬度，內容寬度不變） */
#compare-section,#track{background:var(--paper-sunken);box-shadow:0 0 0 100vmax var(--paper-sunken);clip-path:inset(0 -100vmax);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #compare-section,:root:not([data-theme="light"]) #track{background:var(--paper-elev);box-shadow:0 0 0 100vmax var(--paper-elev);}}
:root[data-theme="dark"] #compare-section,:root[data-theme="dark"] #track{background:var(--paper-elev);box-shadow:0 0 0 100vmax var(--paper-elev);}
/* 🎚️ 區塊交替背景 結束 */

/* ============ 🎓 咖啡課程總開關 ============
   後台總開關關閉時（site-look.js 在 <html> 加上 courses-off），所有頁面的「咖啡課程」連結都隱藏 */
:root.courses-off a[href="/courses/"]{display:none !important;}

/* ============ 📷 首頁大圖 HERO PHOTO ============
   照片和位置在 site-look.js 的 BROLL_HERO_PHOTOS（每套配色一張）。
   電腦版：照片在右半邊，左緣慢慢淡進底色；手機版：照片在文字後面，蓋一層底色讓文字好讀。
   想讓照片更淡／更明顯：改下面 :root 的三個數字（深色配色用）；淺色配色（例如燕麥）用 .hero-photo.light 那三個 */
:root{
  --hero-photo-op:.5;    /* 電腦版照片的不透明度（1＝原本的樣子，越小越淡） */
  --hero-cover-top:80%;  /* 手機版：照片上方蓋的底色濃度（越大越淡） */
  --hero-cover-mid:88%;  /* 手機版：照片中間蓋的底色濃度 */
}
.hero-section{position:relative;overflow:hidden;isolation:isolate;}
.hero-section > .wrap{position:relative;z-index:2;}
.hero-photo{display:none;position:absolute;top:0;bottom:0;right:0;z-index:0;width:min(58%,760px);
  background-image:var(--hero-img);background-repeat:no-repeat;background-size:cover;background-position:var(--hero-pos,center);
  opacity:var(--hero-photo-op);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%);}
.hero-photo.on{display:block;}
/* 淺色配色：照片不淡化（淡化後深色照片會變灰），邊緣也不做漸層 */
.hero-photo.light{-webkit-mask-image:none;mask-image:none;--hero-photo-op:1;--hero-cover-top:62%;--hero-cover-mid:74%;width:min(44%,640px);}
@media(max-width:760px){.hero-photo.light{width:100%;}}
@media(max-width:760px){
  .hero-photo{width:100%;background-position:var(--hero-mpos,center);opacity:1;-webkit-mask-image:none;mask-image:none;}
  .hero-photo::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,color-mix(in srgb,var(--ink) var(--hero-cover-top),transparent) 0%,color-mix(in srgb,var(--ink) var(--hero-cover-mid),transparent) 40%,color-mix(in srgb,var(--ink) 95%,transparent) 100%);}
}

/* ============ 🏳️ 產地小國旗（index.html 的 flagHtml） ============ */
.flag{display:inline-block;width:16px;height:11px;border-radius:2px;vertical-align:-1px;margin-right:6px;box-shadow:0 0 0 .5px rgba(0,0,0,.18);flex:none;}
.tk-top{display:flex;flex-direction:column;align-items:center;gap:8px;}
.tk-top .flag{margin:0;width:15px;height:10px;}

/* ============ 👆 點按鈕不反白 ============
   1. 手機點按時不出現灰色／藍色的點擊底色
   2. 快速點兩下按鈕時，按鈕上的字不會被選取（反白）
   3. 用滑鼠或手指點完，按鈕不留下外框；用鍵盤 Tab 移動時仍然顯示外框（方便鍵盤操作的人） */
html{-webkit-tap-highlight-color:transparent;}
button,.btn,[role="button"],label.chip,.icon-btn,.menu-panel a,.nav-links a{-webkit-user-select:none;user-select:none;touch-action:manipulation;}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),[role="button"]:focus:not(:focus-visible){outline:none;}

/* ============ ✂️ 精簡版面（A 摺疊說明／B 處理法精簡／C 生活時刻滑動） 開始 ============ */
.guide-grid{align-items:start;}
details.guide-item{padding-top:0;}
details.guide-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 0 14px;}
details.guide-item summary::-webkit-details-marker{display:none;}
details.guide-item .guide-q h4{margin:0 0 4px;}
details.guide-item .guide-sum{display:block;font-size:12.5px;color:var(--text-sec);line-height:1.6;}
details.guide-item .guide-plus{position:relative;flex-shrink:0;width:14px;height:14px;margin-top:5px;}
details.guide-item .guide-plus::before,details.guide-item .guide-plus::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:var(--text-sec);transition:transform .2s ease;}
details.guide-item .guide-plus::after{transform:rotate(90deg);}
details.guide-item[open] .guide-plus::after{transform:rotate(0deg);}
details.guide-item > p{padding:0 0 16px;}
details.guide-item[open] .guide-sum{display:none;}
@media (max-width:640px){
  .process-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .process-card{padding:16px 14px 14px;}
  .picker-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .picker-grid::-webkit-scrollbar{display:none;}
  .picker-card{flex:0 0 62%;scroll-snap-align:start;padding:18px 16px;}
  .guide-grid{gap:0;}
}
/* ============ ✂️ 精簡版面 結束 ============ */

/* ---------- 📖 處理法卡片「詳細說明」收合區 PROCESS MORE 開始 ---------- */
/* 每張處理法卡片下方的 <details>：預設收合，點「詳細說明」展開；點這一區不會觸發卡片的跳轉 */
.process-grid{align-items:start;}
.process-more{margin:14px 0 0;border-top:1px dashed var(--line);cursor:default;}
.process-more summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0 2px;font-size:12px;font-weight:600;color:var(--text);}
.process-more summary::-webkit-details-marker{display:none;}
.process-more .pm-plus{position:relative;flex-shrink:0;width:11px;height:11px;}
.process-more .pm-plus::before,.process-more .pm-plus::after{content:"";position:absolute;left:0;top:5px;width:11px;height:1.5px;background:var(--text-sec);transition:transform .2s ease;}
.process-more .pm-plus::after{transform:rotate(90deg);}
.process-more[open] .pm-plus::after{transform:rotate(0deg);}
.process-more .pm-body{padding:4px 0 2px;}
.process-more h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--gold);margin:14px 0 5px;font-weight:700;}
.process-more p{font-size:12.5px;color:var(--text-sec);line-height:1.8;margin:0 0 8px;}
.process-more .pm-ref{font-size:10.5px;color:var(--text-ter);line-height:1.6;margin:12px 0 0;padding-top:8px;border-top:1px solid var(--line);}
.process-more .pm-ref i{font-style:italic;}
/* 卡片展開時不要再上浮，避免閱讀時晃動 */
.process-card:has(.process-more[open]){transform:none;border-color:var(--line-strong);}
/* 手機兩欄太窄：展開的那張卡改成佔滿整列 */
@media (max-width:640px){
  .process-grid{grid-auto-flow:row dense;}
  .process-card:has(.process-more[open]){grid-column:1/-1;}
}
/* ---------- 📖 處理法卡片「詳細說明」收合區 PROCESS MORE 結束 ---------- */

/* ✂️ 商品卡：適合沖煮標籤收進「產地與沖煮資訊」 */
.card-detail .detail-usage{grid-column:1/-1;padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid var(--line);}
.card-detail .detail-usage .usage-row{margin-top:4px;}

/* ============ 🎨 風味配色商品卡 FLAVOR CARD 開始（index.html 的 cardFlavor()，預設 classic 卡片樣式） ============ */
/* 七個風味色系：刻意調低飽和度（低飽和度的「預期喜好度」較高），深色模式另有一組比較亮的版本 */
:root{--fl-floral:#a5779a;--fl-citrus:#c4961c;--fl-berry:#a3364f;--fl-fruit:#d27f4c;--fl-tea:#6c8c4b;--fl-nut:#a5733f;--fl-cocoa:#5b3d2c;--fl-wash:26%;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--fl-floral:#d3a5c7;--fl-citrus:#e3c05a;--fl-berry:#e07a90;--fl-fruit:#efa67b;--fl-tea:#a3c483;--fl-nut:#d5a571;--fl-cocoa:#b58f78;--fl-wash:26%;}}
:root[data-theme="dark"]{--fl-floral:#d3a5c7;--fl-citrus:#e3c05a;--fl-berry:#e07a90;--fl-fruit:#efa67b;--fl-tea:#a3c483;--fl-nut:#d5a571;--fl-cocoa:#b58f78;--fl-wash:26%;}
/* 卡片：上方染色，由上往下淡出 */
.card.card-fx{padding:0;gap:0;overflow:hidden;border-color:color-mix(in srgb,var(--tone) 18%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--tone) calc(var(--fl-wash) + 8%),var(--paper-elev)) 0,color-mix(in srgb,var(--tone) calc(var(--fl-wash) * .45),var(--paper-elev)) 130px,var(--paper-elev) 290px);}
.card.card-fx > :not(.fx-head){margin-left:20px;margin-right:20px;}
.card.card-fx > :last-child{margin-bottom:16px;}
.card-fx .fx-head{position:relative;padding:22px 20px 8px;}
.card-fx .fx-head .card-badges{top:16px;right:16px;}
.card-fx .fx-head .card-country{padding-right:120px;}
/* 名稱只在空格處換行（例如「伊索比亞／美花處理廠」），避免最後一個字單獨掉到下一行；真的放不下才在字中間斷 */
.card-fx .fx-head .card-name-cn{font-size:22px;margin:0 0 4px;word-break:keep-all;overflow-wrap:anywhere;}
.card-fx .fx-en{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--text-sec);}
/* 三個風味詞直接用大字列出 */
.card-fx .fx-notes{font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.5;color:var(--text);margin-top:14px;}
.card-fx .fx-notes .sep{color:var(--tone);margin:0 .45em;font-weight:400;}
.card-fx .fx-n,.sim .fx-n{white-space:nowrap;}   /* 每個風味詞不拆開，要換行就整個詞一起換 */
.card-fx .fx-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin-top:8px;font-size:13px;color:var(--text-sec);}
.card-fx .fx-proc:before{content:"·";margin:0 10px;color:var(--text-ter);}
/* 風味量表換成這款豆子的顏色 */
.card-fx .flavor-meter{margin-top:14px;}
.card-fx .flavor-fill{background:linear-gradient(90deg,color-mix(in srgb,var(--tone) 40%,transparent),var(--tone));}
.card-fx .flavor-fill:after{background:var(--tone);}
.card-fx .card-detail{margin-top:12px;}
.card-fx .card-detail .fx-taste{grid-column:1/-1;font-size:13px;line-height:1.7;color:var(--text);padding-bottom:8px;border-bottom:1px solid var(--line);}
.card-fx .price-row{margin-top:12px;}
.card-fx .card-actions{margin-top:10px;}
.card-fx .card-foot{margin-top:6px;}
/* 最下面一列：加入比較｜相似推薦｜分享（三個擠在一起時不斷行） */
.card-foot.has-sim{gap:2px;}
.card-foot.has-sim .compare-toggle,.card-foot.has-sim .share-bean{white-space:nowrap;}
.card-foot.has-sim .share-bean{padding:6px 7px;gap:4px;}
/* ✨ 相似推薦彈窗 */
.sim-modal{width:min(440px,92vw);}
.sim-modal h3{padding-right:28px;line-height:1.45;}
.sim-list{display:flex;flex-direction:column;gap:10px;}
.sim{display:block;width:100%;text-align:left;font:inherit;color:var(--text);cursor:pointer;border:1px solid color-mix(in srgb,var(--tone) 22%,var(--line));border-radius:var(--radius-m);padding:14px 16px;background:linear-gradient(180deg,color-mix(in srgb,var(--tone) calc(var(--fl-wash) + 6%),var(--paper-elev)) 0,var(--paper-elev) 110px);transition:transform .15s ease;}
.sim:hover{transform:translateY(-2px);}
.sim > span{display:block;}
.sim .sim-why{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--text-sec);}
.sim .sim-name{font-family:var(--serif);font-weight:700;font-size:16px;margin:4px 0 6px;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere;}
.sim .sim-notes{font-size:13px;font-weight:600;}
.sim .sim-notes .sep{color:var(--tone);margin:0 .35em;font-weight:400;}
.sim .sim-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12px;color:var(--text-sec);}
.sim .sim-foot b{font-family:var(--mono);color:var(--text);font-size:12.5px;}
.sim-empty{font-size:13px;color:var(--text-sec);margin:0;}
/* 商品名稱只在空格處換行（所有卡片樣式） */
.card .card-name-cn{word-break:keep-all;overflow-wrap:anywhere;}

/* ── 極簡線條：上緣一條風味色細線，只有很淡的一點顏色 ── */
:root[data-card="minimal"] .card.card-fx{background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 12%,transparent) 0,transparent 140px);border:none;border-top:2px solid var(--tone);border-radius:0;padding:0;gap:0;}
:root[data-card="minimal"] .card.card-fx > :not(.fx-head){margin-left:4px;margin-right:4px;}
:root[data-card="minimal"] .card-fx .fx-head{padding:16px 4px 6px;}
:root[data-card="minimal"] .card-fx .fx-head .card-badges{top:16px;right:4px;}
/* ── 柔和圓角：整張卡淡淡染上風味色 ── */
:root[data-card="soft"] .card.card-fx{border:none;border-radius:28px;padding:0;gap:0;background:linear-gradient(180deg,color-mix(in srgb,var(--tone) calc(var(--fl-wash) + 4%),var(--paper)) 0,color-mix(in srgb,var(--tone) 9%,var(--paper)) 260px,color-mix(in srgb,var(--tone) 7%,var(--paper)) 100%);}
:root[data-card="soft"] .card.card-fx > :not(.fx-head){margin-left:24px;margin-right:24px;}
:root[data-card="soft"] .card.card-fx > :last-child{margin-bottom:20px;}
:root[data-card="soft"] .card-fx .fx-head{padding:26px 24px 8px;}
:root[data-card="soft"] .card-fx .fx-head .card-badges{top:24px;right:22px;}
/* ── 雜誌橫排：上緣粗線換成風味色，不染底色 ── */
:root[data-card="magazine"] .card.card-fx{background:transparent;border:none;border-top:3px solid var(--tone);border-radius:0;padding:0 0 8px;gap:0;overflow:visible;}
:root[data-card="magazine"] .card.card-fx > :not(.fx-head){margin-left:0;margin-right:0;}
:root[data-card="magazine"] .card-fx .fx-head{padding:16px 0 4px;}
:root[data-card="magazine"] .card-fx .fx-head .card-badges{position:absolute;top:16px;right:0;}
@media(min-width:760px){
  :root[data-card="magazine"] .card.card-fx{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:24px;row-gap:0;align-content:start;}
  :root[data-card="magazine"] .card.card-fx > *{grid-column:1;align-self:start;}
  :root[data-card="magazine"] .card-fx > .fx-head{grid-row:1;}
  :root[data-card="magazine"] .card-fx > .fx-notes{grid-row:2;}
  :root[data-card="magazine"] .card-fx > .fx-sub{grid-row:3;}
  :root[data-card="magazine"] .card-fx > .card-detail{grid-row:4 / span 3;}
  :root[data-card="magazine"] .card-fx > .flavor-meter{grid-column:2;grid-row:1 / span 3;margin-top:16px;}
  :root[data-card="magazine"] .card-fx > .price-row{grid-column:2;grid-row:4;}
  :root[data-card="magazine"] .card-fx > .card-actions{grid-column:2;grid-row:5;}
  :root[data-card="magazine"] .card-fx > .card-foot{grid-column:2;grid-row:6;}
  :root[data-card="magazine"] .card-fx .fx-head .card-badges{right:auto;left:auto;position:static;margin-bottom:8px;justify-content:flex-start;}
  :root[data-card="magazine"] .card-fx .fx-head .card-badges:empty{display:none;}
}

/* ── 雷達／風味先行／標籤／票券：共用的風味色 ── */
.card.lay-fx{background:linear-gradient(180deg,color-mix(in srgb,var(--tone) calc(var(--fl-wash) + 4%),var(--paper-elev)) 0,color-mix(in srgb,var(--tone) calc(var(--fl-wash) * .4),var(--paper-elev)) 120px,var(--paper-elev) 280px);border-color:color-mix(in srgb,var(--tone) 18%,var(--line));}
.lay-fx .fx-notes{font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.5;color:var(--text);}
.lay-fx .fx-notes .sep{color:var(--tone);margin:0 .4em;font-weight:400;}
.lay-fx .fx-n,.lb-notes .fx-n{white-space:nowrap;}
.lay-fx .card-detail .fx-taste{grid-column:1/-1;font-size:13px;line-height:1.7;color:var(--text);padding-bottom:8px;border-bottom:1px solid var(--line);}
.lay-label .card-detail .inner{text-align:left;}
/* 雷達圖換成風味色 */
.lay-fx .rd-svg .area{fill:color-mix(in srgb,var(--tone) 28%,transparent);stroke:var(--tone);}
.lay-fx .rd-svg .pt{fill:var(--tone);}
/* 風味先行：分隔點與數字底色 */
.lay-fx .nf-big i{color:var(--tone);}
.lay-fx .nf-stat{background:color-mix(in srgb,var(--tone) 12%,var(--paper-elev));}
/* 標籤：框線、短線、圓環 */
.lay-fx .lb-frame{border-color:color-mix(in srgb,var(--tone) 45%,var(--line));background:color-mix(in srgb,var(--paper-elev) 55%,transparent);}
.lay-fx .lb-rule{background:var(--tone);}
.lay-fx .lb-notes i{font-style:normal;color:var(--tone);}
.lay-fx .lb-ring .fg{stroke:var(--tone);}
/* 票券：左邊票根改成深一點的風味色，直條圖也換色 */
.card.lay-fx.lay-ticket{background:var(--paper-elev);}
.lay-fx .tk-main{background:linear-gradient(180deg,color-mix(in srgb,var(--tone) calc(var(--fl-wash) * .6),var(--paper-elev)) 0,var(--paper-elev) 200px);}
.lay-fx .tk-stub{background:color-mix(in srgb,var(--tone) 72%,#1c1a16);color:#fff;}
.lay-fx .tk-roast{color:rgba(255,255,255,.75);}
.lay-fx .tk-bar i{background:linear-gradient(180deg,var(--tone),color-mix(in srgb,var(--tone) 50%,transparent));}
.lay-ticket .fx-notes{margin:0 0 8px;font-size:14.5px;}
.lay-ticket .card-foot.has-sim{flex-wrap:wrap;row-gap:0;}
.lay-ticket .card-foot.has-sim .share-bean{padding:6px 5px;}
/* ============ 🎨 風味配色商品卡 FLAVOR CARD 結束 ============ */