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

/* ===== 壞叔叔：Q版童趣 × 西瓜夏日 ===== */
:root{
  --bg:#ffe7b3;
  --ink:#45362a; --ink-2:#7d6a58; --ink-3:#a89684; --ink-4:#cdbda6;
  --line:#efd9ac; --line-2:#f6e8c9; --stroke:#5c4a39;
  --o-50:#eafbe6; --o-100:#d9f5d1; --o-200:#aee9a1; --o-300:#79d66b;
  --o-400:#46b53c; --o-500:#3aa732; --o-600:#2f8f2a; --o-700:#246f20;
  --leaf:#46b53c; --leaf-d:#2f9f32; --melon:#ff6b86; --melon-d:#ef4e6c; --sun:#ffcf33; --sun-d:#f4ab00;
  --card:#ffffff;
  --r:22px; --r-sm:15px;
  --font:"Noto Sans TC","Baloo 2",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --round:"Baloo 2","Noto Sans TC",sans-serif;
}
body.shop-baduncle{ background:#ffe6ae; background-image:none; color:var(--ink); }

/* 背景：奶油黃天 + 薄荷/西瓜粉柔光 + 飄貼紙 */
.bu-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#ffe9ba}
.bu-sky{position:absolute;inset:0;background:
  radial-gradient(900px 520px at 50% -10%, #fff8e2, transparent 62%),
  radial-gradient(520px 420px at 10% 26%, rgba(110,220,150,.3), transparent 60%),
  radial-gradient(540px 440px at 94% 60%, rgba(255,140,170,.28), transparent 60%),
  linear-gradient(180deg,#fff2ce 0%, #ffe6ac 100%);}
.bu-st{position:absolute;background:center/contain no-repeat;will-change:transform;
  animation:buBob var(--t,6s) ease-in-out infinite;transform:rotate(var(--r,0deg))}
@keyframes buBob{0%{transform:translateY(0) rotate(var(--r,0deg))}
  50%{transform:translateY(-15px) rotate(calc(var(--r,0deg) + 5deg))}
  100%{transform:translateY(0) rotate(var(--r,0deg))}}
@media (prefers-reduced-motion:reduce){ .bu-st{animation:none} }
.s-melon1{width:78px;height:50px;left:5%;top:12%;--t:6.5s;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'><path d='M4 8 A46 46 0 0 0 96 8 Z' fill='%23ff8097'/><path d='M4 8 A46 46 0 0 0 96 8' fill='none' stroke='%2343b23b' stroke-width='10' stroke-linecap='round'/><path d='M14 11 A36 36 0 0 0 86 11' fill='none' stroke='%23fff' stroke-width='3' opacity='.6'/><g fill='%233a2e26'><ellipse cx='40' cy='27' rx='2.4' ry='3.4'/><ellipse cx='55' cy='33' rx='2.4' ry='3.4'/><ellipse cx='68' cy='25' rx='2.4' ry='3.4'/></g></svg>")}
.s-melon2{width:58px;height:37px;right:6%;top:40%;--t:7.5s;animation-delay:-2s;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'><path d='M4 8 A46 46 0 0 0 96 8 Z' fill='%23ff8097'/><path d='M4 8 A46 46 0 0 0 96 8' fill='none' stroke='%2343b23b' stroke-width='10' stroke-linecap='round'/><g fill='%233a2e26'><ellipse cx='42' cy='28' rx='2.4' ry='3.4'/><ellipse cx='60' cy='30' rx='2.4' ry='3.4'/></g></svg>")}
.s-star1{width:46px;height:46px;right:11%;top:11%;--t:5.5s;animation-delay:-1s;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 6 L61 38 L95 38 L67 58 L78 92 L50 72 L22 92 L33 58 L5 38 L39 38 Z' fill='%23ffcf33' stroke='%23f4a300' stroke-width='5' stroke-linejoin='round'/></svg>")}
.s-star2{width:34px;height:34px;left:13%;top:58%;--t:6.8s;animation-delay:-3s;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 6 L61 38 L95 38 L67 58 L78 92 L50 72 L22 92 L33 58 L5 38 L39 38 Z' fill='%23ffcf33' stroke='%23f4a300' stroke-width='5' stroke-linejoin='round'/></svg>")}
.s-cloud1{width:92px;height:54px;left:-1%;top:44%;--t:9s;animation-delay:-4s;opacity:.95;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70'><g fill='%23fff'><circle cx='38' cy='44' r='22'/><circle cx='66' cy='32' r='28'/><circle cx='92' cy='46' r='20'/><rect x='34' y='44' width='62' height='22' rx='11'/></g></svg>")}
.s-cloud2{width:70px;height:41px;right:3%;top:76%;--t:10s;animation-delay:-6s;opacity:.9;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70'><g fill='%23fff'><circle cx='38' cy='44' r='22'/><circle cx='66' cy='32' r='28'/><circle cx='92' cy='46' r='20'/><rect x='34' y='44' width='62' height='22' rx='11'/></g></svg>")}
.s-spark1{width:30px;height:30px;left:46%;top:7%;--t:4.5s;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 4 C54 34 66 46 96 50 C66 54 54 66 50 96 C46 66 34 54 4 50 C34 46 46 34 50 4 Z' fill='%23fff'/></svg>")}
.s-spark2{width:22px;height:22px;right:30%;top:66%;--t:5s;animation-delay:-2.5s;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 4 C54 34 66 46 96 50 C66 54 54 66 50 96 C46 66 34 54 4 50 C34 46 46 34 50 4 Z' fill='%23ffe08a'/></svg>")}

/* 品牌區 */
.brand{padding:36px 0 20px;text-align:center}
.bu-hero{display:flex;flex-direction:column;align-items:center}
.bu-badge{display:inline-block;background:#fff;color:var(--ink);border:2.5px solid var(--stroke);
  font-family:var(--round);font-weight:800;font-size:12px;letter-spacing:.02em;padding:5px 15px;border-radius:999px;
  box-shadow:0 3px 0 rgba(92,74,57,.18);transform:rotate(-2deg);margin-bottom:16px}
.avatar.bu-avatar{
  width:160px;height:160px;margin:0 auto;border-radius:50%;overflow:hidden;background:#fff;
  border:5px solid #fff;
  box-shadow:0 0 0 4px var(--leaf), 0 0 0 7px #fff, 0 14px 26px rgba(92,74,57,.28);}
.avatar.bu-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.avatar.bu-avatar>span{font-size:64px}
#brandName,.brand h1{font-weight:900;font-size:clamp(36px,11vw,52px);letter-spacing:.02em;margin-top:18px;line-height:1.05;
  color:var(--leaf);-webkit-text-stroke:7px #fff;paint-order:stroke fill;
  text-shadow:0 6px 0 rgba(92,74,57,.16)}
#tagline,.tagline{display:inline-block;font-family:var(--round);font-weight:800;font-size:13px;color:#fff;letter-spacing:.06em;
  margin-top:12px;background:var(--melon);border:2.5px solid var(--stroke);border-radius:999px;padding:4px 16px;
  box-shadow:0 3px 0 rgba(92,74,57,.18)}
#memberChip{margin-top:14px}

/* 區塊標題 */
.block-head h2{font-weight:900;font-size:20px;color:var(--ink);letter-spacing:.01em;display:flex;align-items:baseline;gap:9px}
.block-head h2 small{font-family:var(--round);font-size:11px;letter-spacing:.12em;color:var(--leaf-d);font-weight:800}
.more-link{font-family:var(--round);font-weight:800;color:var(--ink);background:var(--sun);border:2.5px solid var(--stroke);
  border-radius:999px;padding:3px 12px;box-shadow:0 2.5px 0 rgba(92,74,57,.18)}
.more-link:hover{background:#ffd94f}

/* 方案卡：白底大圓角＋柔棕描邊＋柔影，像貼紙 */
.plans{gap:14px}
.plan{position:relative;background:var(--card);border:2.5px solid var(--stroke);border-radius:var(--r);overflow:hidden;
  box-shadow:0 5px 0 rgba(92,74,57,.12), 0 12px 22px rgba(92,74,57,.1);transition:transform .14s, box-shadow .14s}
.plan:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(92,74,57,.12), 0 16px 26px rgba(92,74,57,.12)}
.plan.on{border-color:var(--leaf-d);box-shadow:0 5px 0 var(--leaf-d), 0 0 0 3px rgba(70,181,60,.25) inset}
.plan.is-featured{border-color:var(--melon-d)}
.plan.is-featured::before{content:'🍉 推薦';position:absolute;top:10px;right:-30px;transform:rotate(38deg);
  background:var(--melon);color:#fff;font-weight:800;font-size:11px;padding:3px 34px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.plan-name{color:var(--ink);font-weight:900}
.plan-sub{color:var(--ink-3)}
.plan-price b{color:var(--melon-d)} .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(--stroke);font-weight:800}
.plan-feats li{color:var(--ink-2)} .plan-feats li::before{content:'🍉';margin-right:4px}
.tick{border-color:var(--ink-3);border-width:2.5px;border-radius:50%}
.plan.on .tick,.pay.on .tick{border-color:var(--leaf-d);background:var(--leaf)}
.plan.on .tick::after,.pay.on .tick::after{color:#fff}

/* 付款方式 */
.pays{gap:11px}
.pay{background:var(--card);border:2.5px solid var(--stroke);border-radius:var(--r-sm);box-shadow:0 4px 0 rgba(92,74,57,.1)}
.pay:hover{transform:translateY(-1px)}
.pay.on{border-color:var(--leaf-d);background:#f3fcef}
.pay b{color:var(--ink)} .pay span{color:var(--ink-3)}

/* 聯絡表單 */
.fld>span{color:var(--ink-2);font-weight:700} .fld i{color:var(--melon-d)} .fld em{color:var(--ink-4)}
.fld input,.fld select,.fld textarea{background:#fff;border:2.5px solid var(--stroke);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(--leaf-d);box-shadow:0 0 0 3px rgba(70,181,60,.25);outline:none}

/* 結帳列 */
.checkout{background:#fff;border-top:3px solid var(--stroke);box-shadow:0 -4px 0 rgba(92,74,57,.06)}
.total #totalLabel,.total span{color:var(--ink-3)}
#totalAmount{color:var(--melon-d);font-weight:900}
.pay-btn{background:var(--leaf);color:#fff;font-weight:900;font-size:16px;border:2.5px solid var(--stroke);border-radius:999px;
  box-shadow:0 4px 0 var(--leaf-d), 0 6px 12px rgba(70,181,60,.3);letter-spacing:.03em}
.pay-btn:hover{background:#4ec043;transform:translateY(-1px)}
.pay-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--leaf-d)}
.pay-btn:disabled{opacity:.5;box-shadow:0 4px 0 var(--leaf-d);transform:none}
.fineprint{color:var(--ink-3)}

/* 注意事項（有填才顯示；老闆這次沒給就先藏起來） */
.disclaimer{background:#fff !important;border:2.5px solid var(--stroke) !important;
  border-left:7px solid var(--leaf) !important;border-radius:var(--r-sm);color:var(--ink-2) !important;line-height:1.95;
  box-shadow:0 4px 0 rgba(92,74,57,.1)}
.disclaimer:empty{display:none}
.copyright{color:var(--ink-3)}

/* 載入骨架 */
.sk{background:rgba(255,255,255,.6);border:2.5px dashed rgba(92,74,57,.25);border-radius:var(--r)}

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