/* ============================================================
   AMICO — D 極簡精品風（Premium Minimal）全站視覺系統
   深墨綠舞台 / 宣紙米白文字 / 蓮花粉點綴 / 五產品各自色帶
   明體大標 × Cormorant 拉丁斜體 × 蓮花線徽（首頁不放商品圖）
   ============================================================ */
:root{
  /* ===== 與主題無關的基礎 token ===== */
  --green:#1E5A3A;           /* 品牌草本綠（按鈕填色，兩主題共用） */
  --green-deep:#143F28;
  /* 五產品色 */
  --c1:#1E7A3C; --c2:#8A8F94; --c3:#E8821E; --c4:#C61F2C; --c5:#E5B722;
  --radius:12px;
  --font-display:"Noto Serif TC", serif;
  --font-body:"Noto Sans TC", sans-serif;
  --latin:"Cormorant Garamond", serif;
  --wrap:min(1200px,92vw);
  --edge:calc((100% - var(--wrap))/2);

  /* ===== 亮色主題（預設）===== */
  /* 表面階梯（越上層越白） */
  --ink-0:#ECE7D8;           /* 最底：宣告列 / 頁尾 / 信任帶 / 理念 */
  --ink-1:#F5F1E7;           /* 頁面主底（暖宣紙白） */
  --ink-2:#FFFEFA;           /* 卡片浮層 */
  --ink-3:#EEE9DB;           /* 次表面：表頭 / 區段條 / hover */
  --paper-lite:#FFFFFF;      /* 產品圖框（潔白圖盤） */
  --ink-on-lite:#22281F;     /* 圖框白底上的深字 */
  /* 文字 */
  --t-hi:#22281F;            /* 主要文字（墨綠近黑） */
  --t-mid:#54604D;           /* 次要文字 */
  --t-dim:#76806C;           /* 弱文字 */
  /* 品牌色（亮底版） */
  --green-soft:#1E6E42;      /* 亮底上的綠字 / 強調 */
  --lotus:#C24E7C;           /* 亮底上的蓮花玫瑰（可作文字） */
  --lotus-hi:#A23A63;        /* hover 更深 */
  /* 線 */
  --line:rgba(34,40,31,.12);
  --hair:rgba(34,40,31,.12);
  --hair-2:rgba(34,40,31,.22);
  /* 語意 token */
  --on-accent:#FFFFFF;       /* 玫瑰／綠色徽章上的文字 */
  --invert-bg:#1B2318;       /* hover 反相底（toast 也用） */
  --invert-fg:#F3EEDF;       /* hover 反相字 */
  --btn-bg:rgba(34,40,31,.05);
  --btn-bg-hover:rgba(34,40,31,.09);
  --header-bg:rgba(245,241,231,.86);
  --tint-1:rgba(34,40,31,.05);
  --shadow:rgba(34,40,31,.10);
  --shadow-strong:rgba(34,40,31,.16);
  --ghost-stroke:rgba(34,40,31,.16);
  --ghost-fill:rgba(34,40,31,.07);
  --hero-bg:radial-gradient(1100px 520px at 78% 26%,rgba(30,90,58,.10),transparent 65%),
    radial-gradient(800px 600px at 12% 88%,rgba(228,143,176,.12),transparent 60%),var(--ink-1);
  --danger:#C0392B;
  --flash-bg:#F2EEDF;
  /* 狀態徽章（亮底） */
  --st-pending-bg:#FBEFD6;   --st-pending-fg:#8A6410;
  --st-paid-bg:#DDF0E4;      --st-paid-fg:#1E5A3A;
  --st-shipped-bg:#DCE9F8;   --st-shipped-fg:#23527C;
  --st-done-bg:#E8E8E2;      --st-done-fg:#5A5A52;
  --st-cancelled-bg:#F8DCDC; --st-cancelled-fg:#9C2B2B;
  --ok-bg:#E2F0E8;  --ok-border:#1E6E42;  --ok-text:#1E5A3A;
  --bad-bg:#F8DCDC; --bad-border:#C98A8A; --bad-text:#9C2B2B;
}

:root[data-theme="dark"]{
  /* ===== 深色主題（D 精品深色風）===== */
  --ink-0:#0E130D;           /* 最深：頁尾 / 收尾 */
  --ink-1:#141A12;           /* 頁面主底（深墨綠） */
  --ink-2:#1B2318;           /* 卡片浮層 */
  --ink-3:#222B1E;           /* 更亮一階（hover / 表頭） */
  --paper-lite:#FAF6EE;      /* 真正的宣紙白（產品圖框等） */
  --ink-on-lite:#22281F;     /* 宣紙白底上的深字 */
  --t-hi:#F3EEDF;            /* 深底主要文字 */
  --t-mid:#C8C7B4;           /* 深底次要文字 */
  --t-dim:#969A82;           /* 深底弱文字（AA on --ink-1） */
  --green-soft:#69B58C;      /* 深底上的綠字 */
  --lotus:#E48FB0;           /* 蓮花粉 */
  --lotus-hi:#EFAECB;
  --line:rgba(243,238,223,.14);
  --hair:rgba(243,238,223,.13);
  --hair-2:rgba(243,238,223,.30);
  --on-accent:#0E130D;
  --invert-bg:#FAF6EE;
  --invert-fg:#22281F;
  --btn-bg:rgba(243,238,223,.07);
  --btn-bg-hover:rgba(243,238,223,.14);
  --header-bg:rgba(20,26,18,.86);
  --tint-1:rgba(243,238,223,.06);
  --shadow:rgba(0,0,0,.45);
  --shadow-strong:rgba(0,0,0,.55);
  --ghost-stroke:rgba(243,238,223,.22);
  --ghost-fill:rgba(243,238,223,.10);
  --hero-bg:radial-gradient(1100px 520px at 78% 26%,rgba(30,90,58,.22),transparent 65%),
    radial-gradient(800px 600px at 12% 88%,rgba(228,143,176,.05),transparent 60%),var(--ink-1);
  --danger:#E58B95;
  --flash-bg:#33372E;
  --st-pending-bg:#3A3320;   --st-pending-fg:#F0D9A6;
  --st-paid-bg:#1E3A2A;      --st-paid-fg:#A9E0BE;
  --st-shipped-bg:#1F3344;   --st-shipped-fg:#A9D0F0;
  --st-done-bg:#33372E;      --st-done-fg:#C8C7B4;
  --st-cancelled-bg:#3D2A2A; --st-cancelled-fg:#F0BBBB;
  --ok-bg:#1E3A2A;  --ok-border:#69B58C;  --ok-text:#A9E0BE;
  --bad-bg:#3D2A2A; --bad-border:#7A4044; --bad-text:#F0BBBB;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-weight:300;background:var(--ink-1);color:var(--t-mid);
  line-height:1.8;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
h1,h2,h3{font-family:var(--font-display);line-height:1.35;color:var(--t-hi);letter-spacing:.06em;font-weight:600}
h2{font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:.55em}
:focus-visible{outline:2px solid var(--lotus);outline-offset:3px;border-radius:2px}
::selection{background:var(--lotus);color:var(--on-accent)}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:var(--wrap);margin-inline:auto}

.eyebrow{font-size:.72rem;letter-spacing:.36em;text-transform:uppercase;color:var(--lotus);font-weight:600;margin-bottom:.7em}
.kicker{font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--t-dim);font-weight:500}
.kicker .vn{color:var(--green-soft)}
.lotus-mark{display:block;color:var(--pc,var(--lotus));transition:transform .6s ease}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:2rem;
  padding:.6rem clamp(1rem,4vw,3rem);background:var(--header-bg);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.logo{display:flex;align-items:baseline;gap:.5rem;font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:var(--t-hi)}
.logo .logo-text{letter-spacing:.3em}
.logo em{font-style:normal;color:var(--green-soft)}
.logo .sub{font-size:.58rem;letter-spacing:.28em;color:var(--t-dim);font-family:var(--font-body);align-self:center}
.lotus{color:var(--lotus);font-size:1.2rem}
.lotus-lg{font-size:2.2rem;display:block;text-align:center;margin-bottom:.3rem;color:var(--lotus)}
.main-nav{display:flex;gap:1.6rem;align-items:center}
.main-nav > a, .dropdown > a{font-weight:400;font-size:.85rem;letter-spacing:.16em;color:var(--t-mid);
  padding:.4rem 0;position:relative;transition:color .3s}
.main-nav > a::after, .dropdown > a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;
  background:var(--lotus);transition:left .3s,right .3s}
.main-nav > a:hover, .dropdown > a:hover{color:var(--t-hi)}
.main-nav > a:hover::after, .dropdown > a:hover::after{left:0;right:0}
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:100%;left:0;min-width:11.5rem;background:var(--ink-2);
  border:1px solid var(--hair);border-radius:10px;box-shadow:0 18px 50px var(--shadow-strong);padding:.4rem;display:none}
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:.5rem .9rem;border-radius:8px;font-size:.85rem;color:var(--t-mid);letter-spacing:.06em}
.dropdown-menu a:hover{background:var(--tint-1);color:var(--t-hi)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:1.1rem}
.lang-btn{font-size:.78rem;letter-spacing:.1em;color:var(--t-mid);display:inline-flex;align-items:center;gap:.45rem}
.lang-btn:hover{color:var(--t-hi)}
.lang-btn .caret{font-size:.7em;opacity:.7;margin-left:.1rem}
.lang-flag{width:22px;height:16px;border-radius:2px;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);vertical-align:middle}
.lang-menu a.lang-opt{display:flex;align-items:center;gap:.6rem}
.lang-opt.is-active{background:var(--tint-1);color:var(--t-hi)}
.lang-opt.is-active::after{content:"✓";margin-left:auto;color:var(--lotus);font-size:.85em}
.lang-auto-opt{margin-top:.25rem;border-top:1px solid var(--hair)}
.lang-globe{fill:none;stroke:currentColor;stroke-width:1.5;box-shadow:none;border-radius:0;opacity:.8}
.hello{font-size:.8rem;color:var(--t-dim)}
.hello:hover{color:var(--t-hi)}
.cart-link{position:relative;font-size:1.15rem;color:var(--t-mid)}
.cart-link:hover{color:var(--t-hi)}
.cart-badge{position:absolute;top:-7px;right:-11px;background:var(--lotus);color:var(--on-accent);font-size:.62rem;
  min-width:1.05rem;height:1.05rem;border-radius:99px;display:flex;align-items:center;justify-content:center;font-weight:700}
.menu-toggle{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;margin-left:auto;color:var(--t-hi)}

/* ---------- buttons ---------- */
.btn{display:inline-block;border:1px solid transparent;cursor:pointer;font-family:var(--font-body);font-weight:500;
  background:var(--btn-bg);color:var(--t-hi);
  border-radius:99px;padding:.55rem 1.4rem;font-size:.85rem;letter-spacing:.1em;
  transition:transform .2s, box-shadow .2s, background .3s, color .3s, border-color .3s}
.btn:hover{transform:translateY(-1px);background:var(--btn-bg-hover)}
.btn:focus-visible{outline:3px solid var(--lotus);outline-offset:2px}
.btn-solid{background:var(--green);color:#FAF6EE}
.btn-solid:hover{background:#2A7A50;box-shadow:0 8px 22px rgba(30,90,58,.4)}
.btn-outline{background:transparent;border:1px solid var(--hair-2);color:var(--t-hi)}
.btn-outline:hover{background:var(--invert-bg);border-color:var(--invert-bg);color:var(--invert-fg)}
.btn-ghost{background:transparent;color:var(--green-soft);text-decoration:underline;text-underline-offset:4px}
.btn-ghost:hover{color:var(--lotus-hi)}
.btn-lg{padding:.85rem 2.2rem;font-size:.95rem;letter-spacing:.2em}
.btn-sm{padding:.4rem 1rem;font-size:.78rem}
.tlink{font-size:.82rem;letter-spacing:.16em;color:var(--t-mid);border-bottom:1px solid var(--hair-2);
  padding-bottom:.3em;transition:color .3s,border-color .3s}
.tlink:hover{color:var(--lotus-hi);border-color:var(--lotus-hi)}
.more-link{color:var(--green-soft);font-weight:500;letter-spacing:.12em}
.more-link:hover{color:var(--lotus-hi)}

/* ---------- 通用區塊 ---------- */
section.about, section.products, section.news-section, .page{
  padding:clamp(2.6rem,6vw,4.6rem) clamp(1rem,4vw,3rem);max-width:1200px;margin:0 auto}
.about{text-align:center}
.about-body{max-width:42em;margin:0 auto;color:var(--t-mid)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}

/* ============================================================
   首頁（D 精品）— 宣告列 / Hero 聚光燈 / 信任帶 / 五方櫥窗
   ============================================================ */
.notice{background:var(--ink-0);border-bottom:1px solid var(--hair);text-align:center;
  font-size:.66rem;letter-spacing:.28em;color:var(--t-dim);padding:.6em 1em;text-transform:uppercase}
.notice em{font-style:normal;color:var(--lotus)}

.hero{position:relative;overflow:hidden;background:var(--hero-bg)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;
  gap:clamp(2rem,5vw,5rem);min-height:min(78vh,720px);
  padding:clamp(2.6rem,6vw,4.2rem) clamp(1rem,4vw,3rem);max-width:1200px;margin:0 auto}
.hero-copy .kicker{display:block;margin-bottom:1.8rem}
.hero h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:600;line-height:1.4;letter-spacing:.12em;margin:0 0 .2em}
.hero h1 em{font-style:normal;color:var(--lotus)}
.hero-vn{margin-top:1.2rem;font-family:var(--latin);font-style:italic;font-size:clamp(1rem,1.6vw,1.2rem);
  letter-spacing:.1em;color:var(--t-dim)}
.hero-sub{color:var(--t-mid);max-width:34em;margin:1.2rem 0 0}
.hero-cta{display:flex;align-items:center;gap:1.8rem;margin-top:2.8rem;flex-wrap:wrap}

/* 聚光燈舞台 */
.stage{position:relative;height:clamp(400px,54vh,540px)}
.slide{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:1.6rem;
  opacity:0;transform:scale(.975);transition:opacity .9s ease,transform .9s ease;pointer-events:none}
.slide.is-on{opacity:1;transform:none;pointer-events:auto}
.slide::before{content:"";position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  width:min(520px,92%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--pc,var(--lotus)) 0%,transparent 60%);opacity:.5;filter:blur(6px)}
.slide .ghost{position:absolute;top:-1%;left:3%;z-index:0;font-family:var(--latin);font-weight:300;
  font-size:clamp(6rem,12vw,9.5rem);line-height:1;color:transparent;-webkit-text-stroke:1px var(--ghost-stroke);user-select:none}
@supports not (-webkit-text-stroke:1px black){.slide .ghost{color:var(--ghost-fill)}}
.frame{position:relative;z-index:1;width:min(240px,52vw);display:grid;place-items:center}
.frame .lotus-mark{width:100%;height:auto}
.frame .lotus-mark g{stroke-width:1.8}
.slide::after{content:"";position:absolute;left:50%;bottom:15%;transform:translateX(-50%);width:46%;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair-2),transparent)}
.slide figcaption{position:relative;z-index:1;text-align:center}
.slide figcaption .vn{display:block;font-family:var(--latin);font-size:.82rem;letter-spacing:.38em;
  text-indent:.38em;color:var(--t-dim);text-transform:uppercase}
.slide figcaption .zh{display:block;margin-top:.4rem;font-family:var(--font-display);font-size:1.05rem;
  letter-spacing:.2em;color:var(--t-hi)}
.dots{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);display:flex;gap:.9rem;z-index:2}
.dots button{position:relative;width:14px;height:2px;background:var(--hair-2);border:none;cursor:pointer;
  transition:width .35s,background .35s}
.dots button::before{content:"";position:absolute;inset:-12px -7px}
.dots button[aria-selected="true"]{width:32px;background:var(--dc,var(--lotus))}
.dots button:hover{background:var(--t-hi)}

/* 信任髮絲帶 */
.trust{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--ink-0)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:1200px;margin:0 auto}
.trust-cell{padding:2rem clamp(1rem,2vw,2rem);border-left:1px solid var(--hair);transition:background .4s}
.trust-cell:first-child{border-left:0}
.trust-cell:hover{background:var(--tint-1)}
.trust-cell b{display:block;font-family:var(--font-display);font-weight:600;font-size:1rem;
  letter-spacing:.16em;color:var(--t-hi);margin-bottom:.4rem}
.trust-cell span{font-size:.78rem;color:var(--t-dim);letter-spacing:.05em}

/* 五方櫥窗 */
.collection{padding:clamp(3rem,7vw,5.5rem) 0;position:relative}
.collection .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  max-width:1200px;margin:0 auto clamp(1.5rem,3vw,2.5rem);padding:0 clamp(1rem,4vw,3rem)}
.collection .sec-head .kicker{display:block;margin-bottom:.8rem}
.rail-ctl{display:flex;gap:.7rem}
.rail-ctl button{width:44px;height:44px;border:1px solid var(--hair-2);background:none;cursor:pointer;
  display:grid;place-items:center;color:var(--t-mid);transition:background .3s,color .3s,border-color .3s,opacity .3s}
.rail-ctl button:hover{background:var(--invert-bg);color:var(--invert-fg);border-color:var(--invert-bg)}
.rail-ctl button:disabled{opacity:.25;pointer-events:none}
.rail-ctl svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.4}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(380px,80vw);gap:clamp(1.2rem,2.4vw,2rem);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--edge);scroll-padding-inline:var(--edge);
  padding-block:3.2rem 1.4rem;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.p-card{scroll-snap-align:start;position:relative;background:var(--ink-2);border:1px solid var(--hair);
  border-radius:8px;padding:2rem 1.8rem 2rem;transition:transform .45s,box-shadow .45s,border-color .45s}
.p-card:hover{transform:translateY(-8px);box-shadow:0 34px 70px var(--shadow-strong);border-color:var(--hair-2)}
.p-num{position:absolute;top:-2rem;left:1.1rem;z-index:2;font-family:var(--latin);font-weight:300;
  font-size:4.4rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--hair-2);
  transition:-webkit-text-stroke .45s,color .45s}
@supports not (-webkit-text-stroke:1px black){.p-num{color:var(--ghost-fill)}}
.p-card:hover .p-num{-webkit-text-stroke:1px var(--pc)}
.p-plate{position:relative;aspect-ratio:4/3;border-radius:4px;overflow:hidden;
  background:linear-gradient(158deg,var(--ink-1) 0%,var(--ink-0) 100%);border:1px solid var(--hair);
  display:grid;place-items:center}
.p-plate::before{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--pc) 0%,transparent 68%);
  opacity:.16;filter:blur(12px)}
.p-plate .lotus-mark{position:relative;width:52%;height:auto}
.p-plate .lotus-mark g{stroke-width:2.2}
.p-card:hover .p-plate .lotus-mark{transform:translateY(-4px) scale(1.04)}
.p-line{height:2px;width:42px;background:var(--pc);margin:1.6rem 0 1rem;transition:width .45s}
.p-card:hover .p-line{width:72px}
.p-vn{font-family:var(--latin);font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:var(--t-dim)}
.p-zh{font-family:var(--font-display);font-size:1.4rem;font-weight:600;letter-spacing:.12em;color:var(--t-hi);margin:.3rem 0 .5rem}
.p-zh a{color:inherit}
.p-zh a:hover{color:var(--pc)}
.p-tag{font-size:.85rem;color:var(--t-mid);letter-spacing:.04em}
.p-for{font-size:.74rem;color:var(--t-dim);margin-top:.5rem}
.p-for::before{content:"— "}
.p-price{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:1.4rem 0 1.2rem;
  padding-top:1.2rem;border-top:1px solid var(--hair)}
.p-price .std{font-family:var(--latin);font-size:1.6rem;color:var(--t-hi);letter-spacing:.04em}
.p-price .std small{font-family:var(--font-body);font-size:.66rem;color:var(--t-dim);letter-spacing:.12em;margin-left:.3rem}
.p-price .mem{font-size:.76rem;letter-spacing:.08em;color:var(--lotus)}
.p-price .mem b{font-family:var(--latin);font-size:1.1rem;font-weight:500}
.p-price del{color:var(--t-dim);font-size:.85rem}
.p-gap{height:1.4rem}
.p-cart{width:100%;padding:.9em 0;border:1px solid var(--hair-2);background:none;cursor:pointer;
  font-size:.78rem;letter-spacing:.3em;text-indent:.3em;color:var(--t-hi);
  transition:background .35s,color .35s,border-color .35s}
.p-cart:hover{background:var(--invert-bg);color:var(--invert-fg);border-color:var(--invert-bg)}
.p-cart.done{background:var(--green);border-color:var(--green);color:#FAF6EE}
.rail-meta{display:flex;align-items:center;gap:1.6rem;margin:1.6rem auto 0;max-width:1200px;padding:0 clamp(1rem,4vw,3rem)}
.rail-bar{flex:1;height:1px;background:var(--hair);position:relative}
.rail-bar i{position:absolute;left:0;top:-.5px;height:2px;width:20%;background:var(--lotus);transition:width .2s}
.rail-hint{font-size:.66rem;letter-spacing:.28em;color:var(--t-dim);text-transform:uppercase}
.member-note{display:flex;align-items:center;gap:.6rem;margin:2.2rem auto 0;max-width:1200px;
  padding:0 clamp(1rem,4vw,3rem);font-size:.8rem;letter-spacing:.08em;color:var(--t-dim)}
.member-note a{color:var(--lotus);border-bottom:1px solid transparent;transition:border-color .3s}
.member-note a:hover{border-color:var(--lotus)}

/* ---------- 通用商品卡（goods_list / detail others，保留商品圖） ---------- */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.4rem;margin-top:1.5rem}
.card{background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s, box-shadow .25s, border-color .25s}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 50px var(--shadow);border-color:var(--hair-2)}
.card-band{height:6px;background:var(--c)}
.card-img{padding:1rem;background:var(--paper-lite)}
.card-img img{aspect-ratio:1.3;object-fit:contain}
.card-body{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.card-body h3{font-size:1.02rem;color:var(--t-hi)}
.card-body h3 a:hover{color:var(--c)}
.tagline{font-size:.83rem;color:var(--t-mid)}
.spec-line{font-size:.75rem;color:var(--t-dim)}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:.6rem;gap:.5rem}
.price{font-weight:600;color:var(--green-soft);font-family:var(--latin);font-size:1.15rem}
.price-lg{font-size:1.7rem;margin:.3em 0}
.card.mini{flex-direction:column}
.card.mini img{aspect-ratio:1.4;object-fit:contain;padding:.7rem}
.card.mini .card-body{flex-direction:row;justify-content:space-between;align-items:center}
.card.mini h3{font-size:.88rem}
.mp-hint{display:block;font-size:.72rem;color:var(--lotus);font-weight:500}
.orig-price{display:block;font-size:.75rem;color:var(--t-dim);font-weight:400}

/* ---------- news ---------- */
.news-section{position:relative}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem;margin-top:1.2rem}
.news-card{background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--radius);padding:1.3rem;
  transition:box-shadow .25s,border-color .25s,transform .25s;display:block}
.news-card:hover{box-shadow:0 18px 44px var(--shadow);border-color:var(--hair-2);transform:translateY(-3px)}
.news-card time, .news-row time{font-size:.76rem;color:var(--lotus);font-weight:600;letter-spacing:.1em;font-family:var(--latin)}
.news-card h3{margin:.3em 0;font-size:1.05rem;color:var(--t-hi)}
.news-card p{font-size:.85rem;color:var(--t-mid)}
.news-list{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}
.news-row{display:flex;gap:1.5rem;background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--radius);
  padding:1.1rem 1.4rem;align-items:baseline;transition:border-color .25s,background .25s}
.news-row:hover{border-color:var(--green-soft);background:var(--ink-3)}
.news-row h3{font-size:1.05rem;color:var(--t-hi)}
.news-row p{font-size:.85rem;color:var(--t-mid)}
.article h1{font-size:clamp(1.5rem,3vw,2.2rem);margin:.3em 0 .8em}
.article-body{white-space:pre-line;color:var(--t-mid);margin-bottom:2rem}

/* ---------- detail ---------- */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.detail-img{background:var(--paper-lite);border:1px solid var(--hair);border-radius:var(--radius);padding:2rem;
  border-top:8px solid var(--c)}
.detail-info h1{font-size:clamp(1.5rem,3vw,2.2rem);margin:.2em 0;color:var(--t-hi)}
.detail-info .tagline{font-size:1rem}
.desc{margin:1em 0;color:var(--t-mid);white-space:pre-line}
.meta{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;font-size:.9rem;
  background:var(--ink-2);border:1px solid var(--hair);border-radius:10px;padding:1rem 1.2rem;margin:1rem 0}
.meta dt{font-weight:600;color:var(--green-soft)}
.meta dd{color:var(--t-mid)}
.qty-row{display:flex;align-items:center;gap:1rem;margin:1.2rem 0}
.qty-ctrl{display:flex;border:1px solid var(--hair-2);border-radius:99px;overflow:hidden;background:var(--ink-2)}
.qty-ctrl button{width:2.4rem;height:2.4rem;border:none;background:none;font-size:1.1rem;cursor:pointer;color:var(--t-hi)}
.qty-ctrl input{width:3.2rem;text-align:center;border:none;font-size:1rem;background:none;color:var(--t-hi)}
.detail-actions{display:flex;gap:1rem;flex-wrap:wrap}
.others{margin-top:4rem}
.product-grid.slim{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}

/* ---------- cart / orders ---------- */
.page.narrow{max-width:820px}
.empty{color:var(--t-dim);padding:2rem 0}
.cart-item{display:grid;grid-template-columns:70px 1fr auto auto auto;gap:1rem;align-items:center;
  background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--radius);padding:.9rem 1.1rem;margin-bottom:.7rem}
.cart-item img{width:70px;height:56px;object-fit:contain;background:var(--paper-lite);border-radius:6px;padding:3px}
.cart-item .ci-name{font-weight:500;font-size:.95rem;color:var(--t-hi)}
.cart-item .remove{background:none;border:none;color:var(--danger);cursor:pointer;font-size:.8rem;text-decoration:underline}
.cart-total{text-align:right;font-size:1.15rem;margin:1.2rem 0;font-weight:600;color:var(--t-hi)}
.cart-total strong{color:var(--green-soft);font-size:1.4rem;font-family:var(--latin)}
.checkout{background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--radius);padding:1.6rem;
  display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.checkout label, .auth-card label{display:flex;flex-direction:column;gap:.3rem;font-weight:500;font-size:.88rem;color:var(--t-mid)}
.checkout input, .auth-card input{padding:.6rem .8rem;border:1px solid var(--hair-2);border-radius:8px;
  font-size:.95rem;font-family:var(--font-body);background:var(--ink-1);color:var(--t-hi)}
.checkout input:focus, .auth-card input:focus{outline:2px solid var(--green-soft)}
.checkout input::placeholder, .auth-card input::placeholder{color:var(--t-dim)}
.order-card{background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--radius);margin-bottom:1.2rem;overflow:hidden}
.order-card header{display:flex;justify-content:space-between;padding:.8rem 1.2rem;background:var(--ink-3);font-weight:600;color:var(--t-hi)}
.order-card ul{list-style:none;padding:.6rem 1.2rem}
.order-card li{display:grid;grid-template-columns:60px 1fr auto auto;gap:1rem;align-items:center;padding:.45rem 0;color:var(--t-mid)}
.order-card li img{width:60px;height:46px;object-fit:contain;background:var(--paper-lite);border-radius:5px;padding:2px}
.order-card footer{display:flex;justify-content:space-between;padding:.8rem 1.2rem;border-top:1px dashed var(--hair-2);font-size:.9rem;color:var(--t-mid)}
.status{font-size:.78rem;padding:.15rem .7rem;border-radius:99px;background:var(--ink-3);color:var(--t-mid)}
.status-pending{background:var(--st-pending-bg);color:var(--st-pending-fg)}
.status-paid{background:var(--st-paid-bg);color:var(--st-paid-fg)}
.status-shipped{background:var(--st-shipped-bg);color:var(--st-shipped-fg)}
.status-done{background:var(--st-done-bg);color:var(--st-done-fg)}
.status-cancelled{background:var(--st-cancelled-bg);color:var(--st-cancelled-fg)}

/* ---------- auth ---------- */
.auth{display:flex;justify-content:center}
.auth-card{background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--radius);padding:2.4rem;
  width:min(420px,100%);display:flex;flex-direction:column;gap:1rem;text-align:left}
.auth-card h2{text-align:center}
.auth-intro{text-align:center;font-size:.85rem;line-height:1.5;color:var(--t-mid);margin:-.3rem 0 .2rem}
.captcha-box{display:block;margin:.15rem 0 .45rem}
.captcha-box img,.captcha-box svg{border:1px solid var(--hair);border-radius:6px;display:block}
.auth-switch{text-align:center;font-size:.85rem;color:var(--t-mid)}
.auth-switch a{color:var(--green-soft);font-weight:600;text-decoration:underline}
.auth-switch a:hover{color:var(--lotus-hi)}

/* ---------- footer ---------- */
.site-footer{margin-top:0;background:var(--ink-0);border-top:1px solid var(--hair);
  padding:clamp(3rem,6vw,4.5rem) clamp(1rem,4vw,3rem) 1.8rem;color:var(--t-mid)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;max-width:1200px;margin:0 auto}
.footer-brand{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--t-hi)}
.footer-slogan{color:var(--t-dim);margin:.4em 0}
.footer-note{font-size:.78rem;color:var(--t-dim)}
.site-footer h6{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;margin-bottom:.9em;color:var(--t-dim)}
.site-footer a{display:block;padding:.25rem 0;color:var(--t-mid);font-size:.88rem;transition:color .3s}
.site-footer a:hover{color:var(--lotus-hi)}
.copyright{text-align:center;font-size:.74rem;color:var(--t-dim);margin-top:2.5rem;
  padding-top:1.5rem;border-top:1px solid var(--hair)}
.flash{max-width:1200px;margin:1rem auto 0;padding:0 clamp(1rem,4vw,3rem)}
.flash p{background:var(--flash-bg);border:1px solid var(--hair-2);border-radius:10px;padding:.7rem 1.1rem;font-size:.9rem;color:var(--t-hi)}
.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%,20px);background:var(--invert-bg);color:var(--invert-fg);
  padding:.7rem 1.5rem;border-radius:99px;font-size:.9rem;opacity:0;pointer-events:none;transition:all .3s;z-index:99;
  box-shadow:0 16px 40px var(--shadow-strong)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;min-height:0;padding-top:2.4rem;text-align:center}
  .stage{order:2;height:clamp(360px,46vh,460px)}
  .hero-copy{text-align:center}
  .hero-cta{justify-content:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-cell:nth-child(3){border-left:0}
  .trust-cell{border-top:1px solid var(--hair)}
  .trust-cell:nth-child(-n+2){border-top:0}
}
@media (max-width: 860px){
  .menu-toggle{display:block}
  .main-nav, .header-right{display:none}
  body.nav-open .main-nav, body.nav-open .header-right{
    display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
    position:fixed;top:54px;left:0;right:0;background:var(--ink-0);border-bottom:1px solid var(--hair);
    padding:1rem clamp(1rem,4vw,3rem);z-index:49}
  body.nav-open .header-right{top:auto;position:static;border:none;padding-top:0}
  body.nav-open .main-nav{box-shadow:0 20px 30px var(--shadow)}
  .dropdown-menu{position:static;display:block;border:none;box-shadow:none;background:none;padding-left:1rem}
  .detail-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cart-item{grid-template-columns:60px 1fr;grid-auto-rows:auto}
  .trust-grid{grid-template-columns:1fr}
  .trust-cell{border-left:0!important;border-top:1px solid var(--hair)}
  .trust-cell:first-child{border-top:0}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important}
}

/* 捲動浮現（首頁用，無 JS 也有預設可見的退化） */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease var(--d,0s),transform .9s ease var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ---------- 會員中心 / 團隊網路 ---------- */
.ucard{background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--radius);padding:1.2rem 1.4rem;margin-bottom:1.2rem}
.ucard h3{font-size:1.05rem;margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;color:var(--t-hi)}
.ucard-hero{display:flex;align-items:center;gap:1rem}
.ucard-hero .hero-info{display:flex;flex-direction:column;flex:1}
.ucard-hero strong{font-size:1.15rem;font-family:var(--font-display);color:var(--t-hi)}
.avatar{width:52px;height:52px;border-radius:50%;background:var(--green);color:#FAF6EE;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1.3rem;flex:none}
.avatar-sm{width:26px;height:26px;font-size:.8rem;vertical-align:middle;margin-right:.3rem}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.9rem;margin-bottom:1.2rem}
.stat-card{background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--radius);
  padding:1rem;text-align:center;display:flex;flex-direction:column;gap:.15rem}
.stat-num{font-family:var(--latin);font-weight:500;font-size:1.5rem;color:var(--green-soft)}
.stat-label{font-size:.8rem;color:var(--t-dim)}
.ref-row{display:flex;gap:.6rem;align-items:center;margin-top:.6rem}
.ref-code{font-size:1.3rem;font-weight:700;letter-spacing:.25em;background:var(--ink-1);
  border:1px dashed var(--green-soft);border-radius:8px;padding:.35rem .9rem;color:var(--green-soft)}
.ref-input{flex:1;min-width:0;border:1px solid var(--hair-2);border-radius:8px;padding:.45rem .7rem;
  font-size:.85rem;background:var(--ink-1);color:var(--t-hi)}
.profile-form{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;align-items:end}
.profile-form label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;font-weight:500;color:var(--t-mid)}
.profile-form input{border:1px solid var(--hair-2);border-radius:8px;padding:.5rem .7rem;font:inherit;background:var(--ink-1);color:var(--t-hi)}
.profile-form button{grid-column:1/-1;justify-self:start}
.member-table{width:100%;border-collapse:collapse;font-size:.9rem}
.member-table th,.member-table td{padding:.5rem .6rem;border-bottom:1px solid var(--hair);text-align:left;color:var(--t-mid)}
.member-table th{font-size:.78rem;letter-spacing:.08em;color:var(--t-dim);font-weight:600}
.member-table tr:last-child td{border-bottom:none}
.member-table .num{text-align:right}
.member-table .plus{color:var(--green-soft);font-weight:700}
.level-badge{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;
  padding:.1rem .4rem;border-radius:999px;font-size:.72rem;font-weight:700;color:#FAF6EE;background:var(--green)}
.level-badge.level-2{background:#E8821E}
.level-badge.level-3{background:var(--lotus);color:var(--on-accent)}
@media(max-width:640px){
  .profile-form{grid-template-columns:1fr}
  .ucard-hero{flex-wrap:wrap}
  .member-table{font-size:.8rem}
}

/* ---------- 安置組織樹 / 提現 / 註冊擴充 ---------- */
.auth-wide{max-width:560px}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.ref-check{display:block;min-height:1.2em;font-size:.8rem}
.ref-check.ok{color:var(--green-soft)}
.ref-check.bad{color:var(--danger)}
.field-hint{display:block;font-size:.76rem;line-height:1.45;color:var(--t-dim);margin:.25rem 0 .2rem;font-weight:400}
.line-pick{border:1px solid var(--hair-2);border-radius:10px;padding:.5rem .9rem;margin:.4rem 0 .8rem;
  display:flex;gap:1.4rem;align-items:center}
.line-pick legend{font-size:.85rem;font-weight:500;padding:0 .3rem;color:var(--t-mid)}
.line-pick .radio{display:flex;align-items:center;gap:.35rem;font-size:.9rem;color:var(--t-mid)}
.org-tree{overflow-x:auto;padding:.5rem 0}
.org-tree ul{display:flex;justify-content:center;padding-top:1.2rem;position:relative}
.org-tree li{list-style:none;text-align:center;position:relative;padding:1.2rem .4rem 0}
.org-tree li::before,.org-tree li::after{content:'';position:absolute;top:0;right:50%;
  border-top:2px solid var(--hair-2);width:50%;height:1.2rem}
.org-tree li::after{right:auto;left:50%;border-left:2px solid var(--hair-2)}
.org-tree li::before{border-right:2px solid var(--hair-2)}
.org-tree li:only-child::before,.org-tree li:only-child::after{display:none}
.org-tree li:only-child{padding-top:0}
.org-tree li:first-child::before{border:none}
.org-tree li:last-child::after{border:none}
.org-tree li:last-child::before{border-right:2px solid var(--hair-2);border-radius:0 6px 0 0}
.org-tree li:first-child::after{border-left:2px solid var(--hair-2);border-radius:6px 0 0 0}
.org-tree ul.tree-root{padding-top:0}
.org-tree ul.tree-root > li{padding-top:0}
.org-tree ul.tree-root > li::before,.org-tree ul.tree-root > li::after{display:none}
.tnode{display:inline-flex;flex-direction:column;align-items:center;gap:.15rem;background:var(--ink-2);
  border:1.5px solid var(--hair-2);border-radius:10px;padding:.5rem .8rem;min-width:6.5rem;position:relative}
.tnode .avatar-sm{margin:0}
.tnode-name{font-weight:600;font-size:.85rem;color:var(--t-hi)}
.tnode-code{font-size:.7rem;color:var(--t-dim);letter-spacing:.1em}
.tnode-me{border-color:var(--ok-border);background:var(--ok-bg)}
.tnode-empty{border-style:dashed;color:var(--t-dim);font-size:.78rem;justify-content:center;min-height:3.5rem}
.status-w-pending{background:var(--st-pending-bg);color:var(--st-pending-fg)}
.status-w-approved{background:var(--st-paid-bg);color:var(--st-paid-fg)}
.status-w-rejected{background:var(--st-cancelled-bg);color:var(--st-cancelled-fg)}
.member-table .minus{color:var(--danger);font-weight:700}
@media(max-width:640px){.auth-grid{grid-template-columns:1fr}}

/* ---------- 公司理念 / 太陽線職級 / 儲值 / 購物車 ---------- */
.philosophy{padding:clamp(3rem,6vw,4.5rem) clamp(1rem,6vw,5rem);text-align:center;
  background:var(--ink-0);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.phil-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;max-width:960px;margin:1.8rem auto 0}
.phil-card{background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--radius);
  padding:1.8rem 1.4rem;text-align:center;transition:transform .3s,border-color .3s}
.phil-card:hover{transform:translateY(-5px);border-color:var(--hair-2)}
.phil-icon{font-size:1.9rem;display:block;margin-bottom:.6rem}
.phil-card h3{font-size:1.08rem;margin-bottom:.5rem;color:var(--green-soft);letter-spacing:.1em}
.phil-card p{font-size:.88rem;color:var(--t-mid)}
.rank-badge{display:inline-flex;align-items:center;justify-content:center;min-width:2.1rem;
  padding:.05rem .45rem;border-radius:999px;font-size:.72rem;font-weight:800;color:#FAF6EE;background:#7A8088;vertical-align:middle}
.rank-badge.rank-lg{font-size:1rem;padding:.15rem .7rem}
.rank-badge.rank-v1{background:var(--green)}
.rank-badge.rank-v2{background:#2278B5}
.rank-badge.rank-v3{background:#E8821E}
.rank-badge.rank-v4{background:#7B4FD0}
.rank-badge.rank-v5{background:#C61F2C}
.rank-badge.rank-v6{background:linear-gradient(135deg,#C9A227,#8A6D1D)}
.rank-bar{height:10px;background:var(--ink-1);border:1px solid var(--hair-2);border-radius:999px;overflow:hidden;margin:.5rem 0 .3rem}
.rank-bar-fill{height:100%;background:linear-gradient(90deg,var(--green),#3FA868);border-radius:999px}
.chain-select{border:1px solid var(--hair-2);border-radius:8px;padding:.5rem .7rem;font:inherit;background:var(--ink-1);color:var(--t-hi)}
.cart-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.points-row input{max-width:10rem}
.sun-tree ul{flex-wrap:wrap}

/* ---------- 雙軌價 / 晉升 / 付款分配 ---------- */
.rank-badge.rank-none{background:#5A5E55;color:#C8C7B4}
.req-list{list-style:none;margin:.4rem 0;display:flex;flex-direction:column;gap:.3rem}
.req-list li{padding:.45rem .8rem;border-radius:8px;font-size:.9rem;border:1px solid var(--hair-2);color:var(--t-mid)}
.req-list li.ok{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok-text)}
.req-list li.todo{background:var(--bad-bg);border-color:var(--bad-border);color:var(--bad-text)}
.pay-box{border:1px dashed var(--hair-2);border-radius:10px;padding:.7rem .9rem;background:var(--ink-1)}
.pay-row{display:flex;gap:1rem;align-items:end;flex-wrap:wrap}
.pay-row label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;font-weight:500;flex:1;min-width:11rem;color:var(--t-mid)}
.pay-row input{border:1px solid var(--hair-2);border-radius:8px;padding:.45rem .7rem;font:inherit;background:var(--ink-1);color:var(--t-hi)}
.pay-ok{color:var(--green-soft);font-weight:800}
.pay-short{color:var(--danger)}
#checkout-btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- 亮／暗主題切換鈕 ---------- */
.theme-toggle{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:99px;
  color:var(--t-mid);border:1px solid transparent;background:none;cursor:pointer;
  transition:color .3s,background .3s,border-color .3s}
.theme-toggle:hover{color:var(--t-hi);background:var(--btn-bg)}
.theme-toggle:focus-visible{outline:2px solid var(--lotus);outline-offset:2px}
.theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.theme-toggle .ic-sun{display:none}
.theme-toggle .ic-moon{display:block}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}

/* ---------- 原型用：身分預覽切換（正式站不顯示，僅本機 demo 時加 body.demo-toggle） ---------- */