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

/* ===== 小八大家長：卡通艷陽 × 藍天白雲 ===== */
:root{
  --bg:#54b3ef;
  --ink:#16233c; --ink-2:#38506f; --ink-3:#6b809b; --ink-4:#9fb2c6;
  --line:#16233c; --line-2:rgba(22,35,60,.14);
  --o-50:#eef7ff; --o-100:#fff6d4; --o-200:#ffe79a; --o-300:#ffd84a;
  --o-400:#ffcf1f; --o-500:#f7bd00; --o-600:#e0a800; --o-700:#b98600;
  --sun:#ffcf1f; --sun-2:#ffe066; --ink-line:#16233c;
  --card:#ffffff;
  --r:16px; --r-sm:12px;
  --font:"Noto Sans TC","Baloo 2",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --round:"Baloo 2","Noto Sans TC",sans-serif;
}
body.shop-xiaoba{ background:#5bb6f0; background-image:none; color:var(--ink); }

/* 背景：卡通藍天 + 太陽 + 飄雲 */
.xb-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  linear-gradient(180deg,#3fa3ee 0%,#5fb9f2 46%,#8ad2f7 100%)}
.xb-sun{position:absolute;top:-34px;right:-30px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle at 42% 42%, #fff1a8 0%, #ffd21e 48%, #ffc400 72%, rgba(255,196,0,0) 73%);
  filter:drop-shadow(0 0 30px rgba(255,208,40,.6));animation:xbSun 7s ease-in-out infinite}
@keyframes xbSun{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
.xb-cloud{position:absolute;background-repeat:no-repeat;background-size:contain;
  filter:drop-shadow(0 8px 10px rgba(30,86,140,.16));will-change:transform;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'><g fill='white'><circle cx='55' cy='76' r='38'/><circle cx='100' cy='56' r='48'/><circle cx='152' cy='60' r='44'/><circle cx='196' cy='80' r='32'/><circle cx='125' cy='90' r='40'/></g></svg>")}
.xb-cloud.c1{top:10%;width:200px;height:100px;animation:xbDrift 72s linear infinite}
.xb-cloud.c2{top:26%;width:140px;height:70px;opacity:.95;animation:xbDrift 96s linear infinite;animation-delay:-30s}
.xb-cloud.c3{top:46%;width:240px;height:120px;opacity:.9;animation:xbDrift 120s linear infinite;animation-delay:-70s}
.xb-cloud.c4{top:64%;width:120px;height:60px;opacity:.85;animation:xbDrift 84s linear infinite;animation-delay:-18s}
.xb-cloud.c5{top:80%;width:180px;height:90px;opacity:.8;animation:xbDrift 110s linear infinite;animation-delay:-52s}
@keyframes xbDrift{from{transform:translateX(115vw)}to{transform:translateX(-60vw)}}
@media (prefers-reduced-motion:reduce){ .xb-cloud{animation:none} .xb-sun{animation:none}
  .xb-cloud.c1{left:4%}.xb-cloud.c2{right:8%}.xb-cloud.c3{left:-6%}.xb-cloud.c4{right:4%}.xb-cloud.c5{left:40%} }

/* 品牌區 */
.brand{padding:40px 0 22px;text-align:center}
.xb-hero{display:flex;flex-direction:column;align-items:center}
.xb-badge{display:inline-block;background:var(--sun);color:var(--ink);border:2.5px solid var(--ink-line);
  font-weight:800;font-size:11px;letter-spacing:.14em;padding:5px 14px;border-radius:999px;
  box-shadow:2px 2px 0 var(--ink-line);transform:rotate(-2deg);margin-bottom:18px}
.avatar.xb-avatar{
  width:154px;height:154px;margin:0 auto;border-radius:50%;overflow:hidden;background:#cfecff;
  border:4px solid var(--ink-line);
  box-shadow:5px 6px 0 rgba(22,35,60,.9), 0 0 0 7px #fff;}
.avatar.xb-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.avatar.xb-avatar>span{font-size:60px}
#brandName,.brand h1{font-family:var(--font);font-weight:900;font-size:clamp(32px,8.6vw,44px);letter-spacing:.01em;
  margin-top:20px;line-height:1.05;color:var(--sun);
  -webkit-text-stroke:2.6px var(--ink-line);paint-order:stroke fill;
  text-shadow:3px 3px 0 var(--ink-line)}
#tagline,.tagline{font-weight:800;font-size:13px;color:#fff;letter-spacing:.06em;margin-top:14px;
  text-shadow:0 2px 0 rgba(22,35,60,.35), 1px 1px 0 rgba(22,35,60,.5)}
#memberChip{margin-top:16px}

/* 區塊標題（在藍天上，加白描邊讓它跳出來） */
.block-head h2{font-weight:900;font-size:19px;color:#fff;letter-spacing:.02em;display:flex;align-items:baseline;gap:9px;
  text-shadow:2px 2px 0 var(--ink-line), -1px -1px 0 rgba(22,35,60,.4)}
.block-head h2 small{font-size:10px;letter-spacing:.18em;color:#fff6cf;font-weight:800;text-shadow:1px 1px 0 var(--ink-line)}
.more-link{color:#fff;font-weight:800;background:var(--sun);border:2px solid var(--ink-line);border-radius:999px;
  padding:3px 11px;box-shadow:2px 2px 0 var(--ink-line);color:var(--ink)}
.more-link:hover{background:var(--sun-2)}

/* 方案卡：白底粗黑框＋硬陰影 */
.plans{gap:14px}
.plan{position:relative;background:var(--card);border:2.5px solid var(--ink-line);border-radius:var(--r);overflow:hidden;
  box-shadow:4px 4px 0 rgba(22,35,60,.9);transition:transform .12s, box-shadow .12s}
.plan:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 rgba(22,35,60,.9)}
.plan.on{border-color:var(--o-600);box-shadow:4px 4px 0 var(--o-600), inset 0 0 0 2px var(--sun)}
.plan.is-featured{border-color:var(--o-600)}
.plan.is-featured::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--sun)}
.plan-name{color:var(--ink);font-weight:900}
.plan-sub{color:var(--ink-3)}
.plan-price b{color:var(--ink)} .plan-price b small{color:var(--ink-3)}
.plan-was{color:var(--ink-4)}
.plan-tag{background:var(--sun);color:var(--ink);border:2px solid var(--ink-line);font-weight:800}
.plan-feats li{color:var(--ink-2)} .plan-feats li::before{color:var(--o-600)}
.tick{border-color:var(--ink-3);border-width:2px}
.plan.on .tick,.pay.on .tick{border-color:var(--ink-line);background:var(--sun)}
.plan.on .tick::after,.pay.on .tick::after{color:var(--ink)}

/* 付款方式 */
.pays{gap:11px}
.pay{background:var(--card);border:2.5px solid var(--ink-line);border-radius:var(--r-sm);box-shadow:3px 3px 0 rgba(22,35,60,.85)}
.pay:hover{transform:translate(-1px,-1px)}
.pay.on{border-color:var(--o-600);background:#fffdf3}
.pay b{color:var(--ink)} .pay span{color:var(--ink-3)}

/* 聯絡表單 */
.fld>span{color:#fff;font-weight:700;text-shadow:1px 1px 0 rgba(22,35,60,.5)} .fld i{color:var(--sun)} .fld em{color:#eaf4ff}
.fld input,.fld select,.fld textarea{background:#fff;border:2.5px solid var(--ink-line);color:var(--ink);border-radius:var(--r-sm);font-weight:600}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-4)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--o-600);box-shadow:0 0 0 3px rgba(255,207,31,.4);outline:none}

/* 結帳列 */
.checkout{background:#fff;border-top:3px solid var(--ink-line);box-shadow:0 -3px 0 rgba(22,35,60,.08)}
.total #totalLabel,.total span{color:var(--ink-3)}
#totalAmount{color:var(--ink);font-weight:900}
.pay-btn{background:var(--sun);color:var(--ink);font-weight:900;border:2.5px solid var(--ink-line);border-radius:12px;
  box-shadow:3px 3px 0 var(--ink-line);letter-spacing:.04em}
.pay-btn:hover{background:var(--sun-2);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink-line)}
.pay-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink-line)}
.pay-btn:disabled{opacity:.45;box-shadow:3px 3px 0 var(--ink-line);transform:none}
.fineprint{color:var(--ink-3)}

/* 注意事項：白卡片粗框 */
.disclaimer{background:#fff !important;border:2.5px solid var(--ink-line) !important;
  border-left:6px solid var(--sun) !important;border-radius:var(--r-sm);color:var(--ink-2) !important;line-height:1.95;
  box-shadow:4px 4px 0 rgba(22,35,60,.85)}
.copyright{color:#eaf4ff;text-shadow:1px 1px 0 rgba(22,35,60,.35)}

/* 載入骨架 */
.sk{background:rgba(255,255,255,.55);border:2px dashed rgba(22,35,60,.3);border-radius:var(--r)}

@media (min-width:560px){ .sheet{max-width:480px} }