/* ── 手寫的自訂樣式 ── */

/* ═════ 顏色與字 ═════ */
:root{
  color-scheme:dark;
  --bg:#0D1110; --surface:#141918; --surface-2:#1A201F;
  /* ink-4 是最淡的字（提示、原價、版權），#7E8681 在所有底色上都有 4.6:1 以上 */
  --ink:#F2EFE6; --ink-2:#CDD2CA; --ink-3:#9AA49E; --ink-4:#7E8681;
  --field-line:rgba(242,239,230,.36);   /* 輸入框框線：對底色要有 3:1 才看得出是一格欄位 */
  --line:rgba(242,239,230,.11); --line-2:rgba(242,239,230,.06);
  --r:22px; --r-sm:14px;
  --mane:linear-gradient(100deg,#3F83F0,#4DBA4A 24%,#F2C230 44%,#EF7B2D 62%,#E0509F 80%,#8452D4);
  --foil:linear-gradient(100deg,#A9CBFF,#B5EDB0 18%,#FBE7A0 36%,#FDC49B 52%,#F8B3DC 70%,#CDB8F7 86%,#A9CBFF);
  --ring:conic-gradient(from 210deg,#3F83F0,#1FB5A6,#4DBA4A,#F2C230,#EF7B2D,#E4483E,#E0509F,#8452D4,#3F83F0);
  --ana:-1.5px 0 rgba(255,72,96,.8),1.5px 0 rgba(38,212,255,.8);
  --focus:#CDB8F7;
  --dark-text:#15130B;
  /* 內建版型的橘色系全部換掉 —— 下面沒特別寫到的地方才會用到它們 */
  --o-50:rgba(242,239,230,.05); --o-100:rgba(242,239,230,.1); --o-200:#3A413F; --o-300:rgba(242,239,230,.3);
  --o-400:#CDB8F7; --o-500:#6D45C9; --o-600:#F2EFE6; --o-700:#FBE7A0;
  --red:#FF8A80;
  --font:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  --latin:"Dela Gothic One","Noto Sans TC",sans-serif;
}
html{background:var(--bg)}
body{background:var(--bg);background-image:none;color:var(--ink);padding-bottom:24px;
  -webkit-tap-highlight-color:transparent}
::selection{background:var(--focus);color:var(--dark-text)}

/* ═════ 底：油墨黑 + 彩虹暈光 + 雕刻同心圓 + 顆粒 ═════ */
.sl-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(110% 60% at 50% -12%,rgba(132,82,212,.24),transparent 62%),
    radial-gradient(55% 38% at 102% 4%,rgba(63,131,240,.16),transparent 70%),
    radial-gradient(50% 34% at -4% 10%,rgba(239,123,45,.12),transparent 70%),
    var(--bg)}
.sl-bg::before{content:"";position:absolute;left:-10%;right:-10%;top:-10%;height:80vh;
  background:repeating-radial-gradient(circle at 50% -30%,rgba(242,239,230,.05) 0 1px,transparent 1px 8px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 90%);mask-image:linear-gradient(180deg,#000,transparent 90%)}
.sl-bg::after{content:"";position:absolute;inset:0;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sheet{position:relative;z-index:1}

/* ═════ 最上面一條：頭像、店名、SUPER LION ═════ */
.brand{padding:16px 0 12px;text-align:left}
.sl-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.brand .avatar{width:50px;height:50px;margin:0;padding:2.5px;border:0;background:var(--ring);
  box-shadow:0 8px 22px -6px rgba(132,82,212,.6);font-size:24px}
.brand .avatar img{border-radius:50%;box-shadow:0 0 0 2px var(--bg)}
.avatar > span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--surface-2)}
.brand h1{font-size:19px;font-weight:900;letter-spacing:.03em;line-height:1.25;font-feature-settings:"palt"}
.tagline{margin:1px 0 0;font-size:12.5px;font-weight:500;color:var(--ink-3);letter-spacing:.03em}
/* 右上角是版主的帳號（2026-09-14 由 SUPER LION 改成 @lolion9487）：
   是真的資訊，讀螢幕軟體要唸；一行不換行，窄螢幕跟著縮；錯位陰影收細一點，小字才看得清楚 */
.sl-mark{font-family:var(--latin);font-size:clamp(11px,3.4vw,13px);line-height:1.1;letter-spacing:.04em;
  text-align:right;white-space:nowrap;color:var(--ink);
  text-shadow:-1px 0 rgba(255,72,96,.75),1px 0 rgba(38,212,255,.75)}
.member-chip{margin-top:12px;background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:none}
.member-chip .ph{background:var(--surface-2);color:var(--ink)}

/* ═════ 段落標題 ═════ */
.block{margin-bottom:34px}
.block-head{align-items:center;margin-bottom:14px;padding:0 2px}
.block-head h2{display:flex;align-items:baseline;gap:9px;font-size:18px;font-weight:900;
  letter-spacing:.05em;font-feature-settings:"palt"}
.block-head h2 small{font-family:var(--latin);font-weight:400;font-size:10.5px;letter-spacing:.22em;
  color:var(--ink-4)}

/* ═════ 方案：手機左右滑 ═════ */
.plans[data-layout="carousel"]{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:18px;scrollbar-width:none;
  margin:0 -18px;padding:6px 18px 22px}
.plans[data-layout="carousel"]::-webkit-scrollbar{display:none}
.plans[data-layout="carousel"]::after{content:"";flex:0 0 1px}
.plans[data-layout="carousel"] > .plan,
.plans[data-layout="carousel"] > .sk{flex:0 0 min(84%,340px);scroll-snap-align:start}
.plans[data-layout="carousel"] > .plan:only-child{flex-basis:100%}
.plans[data-layout="carousel"] > .sk{height:420px;border-radius:var(--r)}
.plans[data-layout="carousel"] > .alert{flex:1 0 100%;margin:0}

.plans[data-layout="carousel"] .plan{
  position:relative;display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"cover cover" "head head" "more more" "price cta";
  grid-template-rows:auto auto 1fr auto;
  padding:0;border:0;border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(242,239,230,.045),rgba(242,239,230,.012) 42%),var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),0 22px 44px -22px rgba(0,0,0,.85);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
  animation:sl-rise .6s cubic-bezier(.2,.8,.2,1) backwards}
.plans[data-layout="carousel"] .plan:nth-child(2){animation-delay:.07s}
.plans[data-layout="carousel"] .plan:nth-child(3){animation-delay:.14s}
.plans[data-layout="carousel"] .plan:nth-child(n+4){animation-delay:.21s}

/* 每張卡一個鬃毛的顏色：c1→c2 是封面，k 是勾勾 */
.plan:nth-child(4n+1){--c1:#3F83F0;--c2:#1FB5A6;--k:#8FB8FF}
.plan:nth-child(4n+2){--c1:#F2C230;--c2:#EF7B2D;--k:#FBE7A0}
.plan:nth-child(4n+3){--c1:#E0509F;--c2:#8452D4;--k:#F4AEDA}
.plan:nth-child(4n+4){--c1:#4DBA4A;--c2:#1FB5A6;--k:#A7E3A5}

/* 選中：彩虹外框轉兩圈（5 秒）就停 —— 一直轉會讓人分心。瀏覽器不支援 @property 的話就是靜止的彩虹框 */
@property --sl-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.plans[data-layout="carousel"] .plan::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  border-radius:inherit;padding:2px;
  background:conic-gradient(from var(--sl-a),#3F83F0,#1FB5A6,#4DBA4A,#F2C230,#EF7B2D,#E4483E,#E0509F,#8452D4,#3F83F0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;transition:opacity .3s}
.plans[data-layout="carousel"] .plan.on::before{opacity:1;animation:sl-spin 2.5s linear 2}
.plans[data-layout="carousel"] .plan.on{
  box-shadow:0 26px 50px -20px rgba(132,82,212,.65),0 0 36px -10px rgba(63,131,240,.45)}
@keyframes sl-spin{to{--sl-a:360deg}}

/* 封面：頭像的單色版（亮度混合進鬃毛色），左下角壓暗放方案名 */
.plan-cover{grid-area:cover;position:relative;aspect-ratio:16/9;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,var(--c1),var(--c2))}
.plan-cover img{width:100%;height:100%;object-fit:cover}
.plan-cover-art{position:absolute;inset:0 -6% 0 32%;
  background:var(--brand-avatar) 50% 24% / cover no-repeat;
  mix-blend-mode:luminosity;opacity:.92;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%);mask-image:linear-gradient(90deg,transparent,#000 42%)}
.plan-cover::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top right,rgba(8,10,10,.9),rgba(8,10,10,.55) 50%,rgba(8,10,10,.08) 80%),
    repeating-radial-gradient(circle at 0% 110%,rgba(255,255,255,.08) 0 1px,transparent 1px 7px)}
.plan-cover::after{content:"";position:absolute;inset:-20%;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%);
  transform:translateX(-70%)}
.plan.on .plan-cover::after{animation:sl-sheen 1.1s cubic-bezier(.2,.8,.2,1)}
@keyframes sl-sheen{from{opacity:1;transform:translateX(-70%)}to{opacity:1;transform:translateX(70%)}}
/* 沒有商品圖時，封面上的方案名稱是唯一看得到的名字（.plan-name 只留給讀螢幕軟體），
   所以最多給三行、字級跟著螢幕寬度縮，長名字才不會被截掉 */
.plan-cover-name{position:absolute;left:16px;right:34%;bottom:13px;z-index:3;
  font-size:clamp(20px,6.6vw,26px);font-weight:900;line-height:1.18;letter-spacing:.02em;color:#fff;
  font-feature-settings:"palt";text-shadow:0 1px 2px rgba(0,0,0,.7),0 2px 16px rgba(0,0,0,.55);text-wrap:balance;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* 角標像一張斜貼的價格貼紙 */
.plans[data-layout="carousel"] .plan-tag{top:12px;left:12px;right:auto;z-index:5;
  padding:4px 10px;border-radius:7px;background:#FBE7A0;color:var(--dark-text);
  font-size:12px;font-weight:900;letter-spacing:.06em;transform:rotate(-3deg);
  box-shadow:0 8px 18px -6px rgba(0,0,0,.6)}
.plans[data-layout="carousel"] .tick{display:none}

/* 卡片內文 */
.plans[data-layout="carousel"] .plan-top{display:contents}
.plans[data-layout="carousel"] .plan-top > div:not(.plan-price){grid-area:head;min-width:0;padding:14px 16px 0}
.plans[data-layout="carousel"] .plan:not(.has-img) .plan-name{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.plans[data-layout="carousel"] .plan-name{font-size:17px;font-weight:900;letter-spacing:.02em}
.plans[data-layout="carousel"] .plan-sub{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.plans[data-layout="carousel"] .plan-more{grid-area:more;grid-template-rows:1fr;opacity:1}
.plans[data-layout="carousel"] .plan-feats{margin:12px 16px 0;padding:12px 0 0;gap:8px;border-top:1px dashed var(--line)}
.plans[data-layout="carousel"] .plan-feats li{font-size:13.5px;color:var(--ink-2)}
.plans[data-layout="carousel"] .plan-feats li::before{color:var(--k)}
.plans[data-layout="carousel"] .plan-blocked{margin:10px 16px 0;padding:10px 0 0;border-top-color:var(--line);color:#FBE7A0}
.plans[data-layout="carousel"] .plan-price{grid-area:price;align-self:end;margin:0;padding:16px 0 16px 16px;text-align:left}
.plans[data-layout="carousel"] .plan-price b{font-family:var(--latin);font-weight:400;font-size:25px;
  line-height:1.1;letter-spacing:.01em;color:var(--ink)}
.plans[data-layout="carousel"] .plan-price b small{font-family:var(--latin);font-size:11px;letter-spacing:.04em;
  color:var(--ink-3);margin-right:3px}
.plans[data-layout="carousel"] .plan-was{margin-top:3px;font-size:12px;color:var(--ink-4)}

/* 右下角的「選這個」：選中變成彩箔。
   後面那個 / "" 是把替代文字留空 —— 讀螢幕軟體不唸這幾個字（選了沒有，radio 自己會講）；
   不支援這種寫法的瀏覽器會丟掉第二個 content、用第一個 */
.plans[data-layout="carousel"] .plan::after{grid-area:cta;align-self:end;content:"選這個";content:"選這個" / "";
  margin:0 16px 17px 8px;padding:9px 15px;border-radius:999px;white-space:nowrap;
  font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--ink);
  background:rgba(242,239,230,.08);box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,color .25s}
.plans[data-layout="carousel"] .plan.on::after{content:"已選擇 ✓";content:"已選擇 ✓" / "";
  color:var(--dark-text);background:var(--foil);box-shadow:none}
.plans[data-layout="carousel"] .plan.off::after{content:"已售完";content:"已售完" / ""}
.plans[data-layout="carousel"] .plan.off{opacity:.5}
.plans[data-layout="carousel"] .plan:active{transform:scale(.985)}
.plans[data-layout="carousel"] .plan:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
@media (hover:hover){
  .plans[data-layout="carousel"] .plan:hover{transform:translateY(-4px)}
  .plans[data-layout="carousel"] .plan:hover .plan-cover::after{animation:sl-sheen 1.1s cubic-bezier(.2,.8,.2,1)}
  .plans[data-layout="carousel"] .plan:not(.on):hover::after{background:rgba(242,239,230,.15)}
}

/* 圓點與左右鍵（simple.js 產生；桌機排成一排時會自己藏起來） */
.plans-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:-6px}
.pn-dots{display:flex;align-items:center}
.pn-dot{width:30px;height:36px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.pn-dot::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--ink-4);
  transition:width .35s cubic-bezier(.2,.8,.2,1),background .35s}
.pn-dot.on::before{width:22px;background:var(--mane)}
.pn-arrow{width:42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  color:var(--ink);background:rgba(242,239,230,.07);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,opacity .2s}
.pn-arrow:hover:not([aria-disabled="true"]){background:rgba(242,239,230,.15)}
.pn-arrow[aria-disabled="true"]{opacity:.32;cursor:default}
.pn-arrow:focus-visible,.pn-dot:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:12px}

/* ═════ 付款方式 ═════ */
.pays{gap:10px}
.pay{min-height:58px;padding:12px 15px;border:0;border-radius:var(--r-sm);background:var(--surface);
  box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s,background .2s}
.pay:hover{box-shadow:inset 0 0 0 1.5px rgba(242,239,230,.25)}
.pay.on{padding:10px 13px;border:2px solid transparent;box-shadow:none;
  background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,var(--mane) border-box}
.pay b{color:var(--ink)}
.pay span{color:var(--ink-3)}
.pay .tick{border-color:var(--ink-4)}
.pay.on .tick{border-color:var(--ink);background:var(--ink)}
.pay.on .tick::after{background:var(--dark-text)}
.pay.off{opacity:.45}
.pay.off:hover{box-shadow:inset 0 0 0 1.5px var(--line)}
.pay:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}

/* ═════ 聯絡資料 ═════ */
.row2{gap:12px}
.fld{margin-bottom:14px}
.fld > span{margin-bottom:7px;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--ink-2)}
.fld i{color:#FBE7A0}
.fld em{color:var(--ink-4)}
.fld input,.fld textarea,.fld select{min-height:50px;font-size:16px;color:var(--ink);background:#0F1413;
  border:1.5px solid var(--field-line);border-radius:13px;transition:border-color .2s,box-shadow .2s,background .2s}
.fld textarea{min-height:88px}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-4)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;background:#121817;
  border-color:var(--focus);box-shadow:0 0 0 4px rgba(132,82,212,.25)}
.line-box{background:rgba(6,199,85,.08);border-color:rgba(6,199,85,.32)}
.line-box p{color:#9BE7B5}
.shop-superlion .coupon-row button{min-height:50px;padding:0 18px;border-radius:13px;
  background:var(--ink);color:var(--dark-text);font-weight:800}
.shop-superlion .coupon-row button:disabled{opacity:.5}
.shop-superlion .coupon-msg.ok{color:#8BE28E}
.shop-superlion .coupon-msg.err{color:#FF9E94}

/* 點了方案，付款與聯絡資料從下面浮上來，結帳列從底部滑上來 */
#paySection:not([hidden]),#formSection:not([hidden]){animation:sl-rise .45s cubic-bezier(.2,.8,.2,1) backwards}
#formSection:not([hidden]){animation-delay:.06s}
@keyframes sl-rise{from{opacity:0;transform:translateY(16px)}}

/* ═════ 版主自介 ═════ */
.sl-card{position:relative;overflow:hidden;isolation:isolate;padding:30px 22px 26px;border-radius:var(--r);
  text-align:center;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.sl-card::before{content:"";position:absolute;inset:-30%;z-index:-1;
  background:var(--brand-avatar) center / cover no-repeat;filter:blur(46px) saturate(1.5);opacity:.22}
.sl-card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-radial-gradient(circle at 50% 0%,rgba(242,239,230,.045) 0 1px,transparent 1px 9px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.sl-portrait{position:relative;width:128px;height:128px;margin:0 auto 18px}
.sl-ring{position:absolute;inset:-7px;border-radius:50%;background:var(--ring);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
  animation:sl-turn 4.5s cubic-bezier(.3,.7,.3,1) 1}
@keyframes sl-turn{to{transform:rotate(1turn)}}
/* 支援「捲動驅動動畫」的瀏覽器：外圈跟著捲動轉 —— 不捲就不動，也就沒有停不下來的動畫 */
@supports (animation-timeline:view()){
  .sl-ring{animation:sl-turn linear both;animation-timeline:view()}
}
.sl-big{width:128px;height:128px;margin:0;border:0;font-size:54px;background:var(--surface-2);
  box-shadow:0 20px 44px -14px rgba(0,0,0,.9)}
#aboutTitle{margin:0 0 14px;font-size:22px;font-weight:900;letter-spacing:.03em;
  font-feature-settings:"palt";text-wrap:balance}
.sl-body{max-width:34em;margin:0 auto;text-align:left}
.sl-body p{margin:0 0 12px;font-size:15px;line-height:1.85;color:var(--ink-2)}
.sl-body p:last-child{margin-bottom:0}

/* ═════ 常見問題 ═════ */
.faq-list{display:grid;gap:10px;interpolate-size:allow-keywords}
.faq-list details{border-radius:var(--r-sm);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .25s,box-shadow .25s}
.faq-list details[open]{background:var(--surface-2);box-shadow:inset 0 0 0 1px rgba(242,239,230,.2)}
.faq-list summary{display:flex;align-items:center;gap:14px;min-height:56px;padding:14px 18px;cursor:pointer;
  list-style:none;font-size:15px;font-weight:700;line-height:1.5;border-radius:inherit}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;margin-left:auto;width:14px;height:14px;color:var(--ink-3);
  background:linear-gradient(currentColor,currentColor) center / 14px 2px no-repeat,
             linear-gradient(currentColor,currentColor) center / 2px 14px no-repeat;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),color .3s}
.faq-list details[open] > summary::after{transform:rotate(45deg);color:var(--ink)}
.faq-list summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.faq-a{padding:0 18px 18px;font-size:14.5px;line-height:1.85;color:var(--ink-2)}
/* 開合的動畫：支援的瀏覽器才有，其他照常開合 */
.faq-list details::details-content{block-size:0;overflow:hidden;
  transition:block-size .35s cubic-bezier(.2,.8,.2,1),content-visibility .35s allow-discrete}
.faq-list details[open]::details-content{block-size:auto}

/* ═════ 結帳列 ═════ */
/* 壓成一排：金額在左、按鈕在右。原本三層疊起來 180 多 px，
   手機上用鍵盤移到表單下半部的欄位，會整格被它蓋住 */
.checkout{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:14px;row-gap:8px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  overflow:hidden;border-top:0;background:rgba(12,16,15,.86);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 -16px 36px -10px rgba(0,0,0,.6)}
.checkout::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--mane)}
.checkout:not([hidden]){animation:sl-up .5s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes sl-up{from{opacity:0;transform:translateY(40px)}}
.checkout .total{display:grid;margin:0;min-width:0}
.total span{font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 金額不能斷成兩行（320 寬時「NT$」和數字會被拆開）：不換行、字級跟著螢幕縮 */
.total b{font-family:var(--latin);font-weight:400;font-size:clamp(19px,6vw,23px);line-height:1.2;
  letter-spacing:.01em;white-space:nowrap;color:var(--ink)}
.checkout .fineprint{grid-column:1 / -1;margin:0;text-align:left;font-size:11.5px;line-height:1.55;color:var(--ink-3)}
/* 用鍵盤移到的欄位不要被結帳列蓋住：結帳列出現時，捲動會在底部預留它的高度 */
html:has(#checkout:not([hidden])){scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom))}
/* 很矮的畫面（手機橫拿、放大到 400%）：結帳列不黏在底部，否則幾乎沒地方看內容 */
@media (max-height:560px){.checkout{position:static}}
/* 彩箔只在出現時流動兩趟（不到 5 秒），一直動會讓人分心 */
.pay-btn{width:auto;min-height:52px;padding:0 26px;border-radius:999px;color:var(--dark-text);
  font-size:16px;font-weight:900;letter-spacing:.1em;
  background:var(--foil);background-size:220% 100%;
  box-shadow:0 12px 30px -10px rgba(205,184,247,.7),inset 0 1px 0 rgba(255,255,255,.65);
  animation:sl-foil 2.4s ease-in-out 2 alternate}
.pay-btn:hover:not(:disabled){background:var(--foil);background-size:220% 100%;filter:saturate(1.15) brightness(1.04)}
.pay-btn:disabled{background:#262C2B;color:#6C7671;box-shadow:none;animation:none}
.pay-btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.pay-btn .spin{border-color:rgba(21,19,11,.25);border-top-color:var(--dark-text)}
@keyframes sl-foil{from{background-position:0% 50%}to{background-position:100% 50%}}

/* ═════ 其他 ═════ */
.alert-error{background:rgba(228,72,62,.12);border:1.5px solid rgba(228,72,62,.45);color:#FFB4AB}
.alert-warn{background:rgba(242,194,48,.1);border:1.5px solid rgba(242,194,48,.4);color:#FBE7A0}
.alert-info{background:rgba(242,239,230,.05);border:1.5px solid var(--line);color:var(--ink-2)}
.sk{background:linear-gradient(90deg,#141918 25%,#1C2322 50%,#141918 75%);background-size:200% 100%}
.disclaimer{margin-top:30px;border:0;border-radius:var(--r-sm);font-size:12px;color:var(--ink-3);
  background:rgba(242,239,230,.03);box-shadow:inset 0 0 0 1px var(--line)}
.copyright{color:var(--ink-4)}
.toast{background:var(--ink);color:var(--dark-text);font-weight:700}

/* 很窄的手機（320 寬）：價格和「選這個」擠不下一排，改成上下 */
@media (max-width:359px){
  .plans[data-layout="carousel"] .plan{grid-template-columns:1fr;grid-template-areas:"cover" "head" "more" "price" "cta"}
  .plans[data-layout="carousel"] .plan-price{padding-bottom:8px}
  .plans[data-layout="carousel"] .plan::after{justify-self:start;margin:0 16px 16px}
}

/* ═════ 平板：版面變寬、其他段落收窄置中；方案還是左右滑（排成格子會剩一張孤零零在第二排） ═════ */
@media (min-width:760px){
  .sheet{max-width:1080px;padding:0 32px}
  .brand{padding:26px 0 20px}
  .block:not(.plans-block),#alert,.checkout,.disclaimer,.copyright{max-width:640px;margin-left:auto;margin-right:auto}
  .plans-block{margin-bottom:48px}
  .plans[data-layout="carousel"]{margin:0 -32px;padding:6px 32px 22px;scroll-padding-inline:32px}
  .plans[data-layout="carousel"] > .plan,
  .plans[data-layout="carousel"] > .sk,
  .plans[data-layout="carousel"] > .plan:only-child{flex-basis:320px}
  .sl-card{display:grid;grid-template-columns:auto 1fr;column-gap:30px;align-items:start;padding:32px;text-align:left}
  .sl-portrait{grid-row:span 2;margin:4px 0 0}
  .sl-body{margin:0}
}
/* ═════ 桌機：三張排得下就排成一排，不用滑 ═════ */
@media (min-width:1000px){
  .plans-block .block-head{justify-content:center}
  /* 320 是上限：版面內寬 1016，三張 320 加兩道 20 的間距剛好 1000，一排排得下三張 */
  .plans[data-layout="carousel"]{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,320px));
    justify-content:center;gap:20px;overflow:visible;margin:0;padding:6px 0 0}
  .plans[data-layout="carousel"]::after{display:none}
  .plans-nav{display:none}
}

/* 不要動畫的人：轉圈、彩箔流動、進場全部停掉（內建版型只縮短時間，無限循環的會變成閃爍） */
@media (prefers-reduced-motion:reduce){
  .plans[data-layout="carousel"] .plan.on::before,.sl-ring,.pay-btn,.sk,.spin,
  .plans[data-layout="carousel"] .plan,.plan-cover::after,#paySection,#formSection,.checkout{animation:none !important}
  /* 內建版型的全域規則管不到 ::details-content，要自己關（單獨一條：不支援這個選擇器的瀏覽器才不會連帶丟掉上面那條） */
  .faq-list details::details-content{transition:none}
}