:root{
  --bg:#fff7f9;
  --card:#ffffff;
  --text:#1f2328;
  --muted:#667085;
  --accent:#b0082b;
  --accent2:#e34a6f;
--page-bg:#f3e3de; /* 全站背景底色 */
--c-pink-1:#d47180;
--c-pink-2:#ee6e81;
--c-pink-3:#d9576b;
--c-yellow:#f7bf6b;
--c-pink-light:#fcc9db;

/* 五區塊色帶（粉嫩，可直接調整） */
--sec-donate-bg: rgba(255, 255, 255, 0.22);
--sec-about-bg:  rgba(255, 176, 193, 0.575);
--sec-howto-bg:  rgba(250, 16, 51, 0.18);
--sec-results-bg:rgba(245, 171, 128, 0.22);
--sec-notice-bg: rgba(226, 64, 88, 0.22);
  --line:rgba(0,0,0,.08);
  --shadow:0 14px 40px rgba(0,0,0,.08);
  --radius:18px;
  

  /* ===== UW 可調設定（你要改色就改這裡） ===== */
  --uw-opacity: .6;                      /* 背景淡化：0.6 = 60% */
  --uw-title-color: #fff;                /* 標題顏色 */
  --uw-p1-color: rgba(255,255,255,.92);  /* ✅ 第一段長文顏色（你要換色改這行） */
  --uw-p2-color: rgba(255,255,255,.88);  /* 第二段顏色 */
  --uw-text-shadow: 0 2px 14px rgba(0,0,0,.55);
  --uw-title-shadow: 0 2px 16px rgba(0,0,0,.6);
}

/* ===== Base ===== */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Noto Sans TC",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
    background: var(--page-bg);

  padding-top: var(--nav-h);
}
html, body{overflow-x:hidden;}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1140px}
.section{padding:64px 0}
.section-soft{background:transparent}

.section-head{margin-bottom:18px}
.section-title{font-size:clamp(22px,2.4vw,30px);font-weight:900;margin:0}
.section-sub{color:var(--muted);margin:8px 0 0}


/* =========================
 * Section blocks (5 sections)
 * ========================= */
.sec-donate{ background: var(--sec-donate-bg); }
.sec-about{  background: var(--sec-about-bg); }
.sec-howto{  background: var(--sec-howto-bg); }
.sec-results{background: var(--sec-results-bg); }
.sec-notice{ background: var(--sec-notice-bg); }

/* 5 個區塊：標題 + 小字置中（只影響 section-head） */
.sec-center .section-head{ text-align:center; }
.sec-center .section-sub{
  margin-left:auto;
  margin-right:auto;
  max-width:760px;
}

/* =========================
 * Sticky Nav
 * ========================= */
.site-nav{
  position:fixed;
  top:0;
  z-index:1101;
  background:#f794a3;
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);

  left:0;
  right:0;
  width:100%;
}
.brand-logos{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:220px;
}
.brand-link{display:inline-flex;align-items:center}
.brand-x{
  color:rgba(0,0,0,.45);
  font-weight:900;
  transform:translateY(-1px);
}
.brand-logo{
  height:34px;
  width:auto;
  object-fit:contain;
}
@media (max-width:575px){
  .brand-logo{height:28px}
  .brand-logos{gap:8px}
}

/* Desktop Nav 齊右 */
.site-nav nav.d-lg-flex{
  margin-left:auto;
  justify-content:flex-end;
}

/* Nav hover */
.site-nav .nav-link{
  position:relative;
  color:#feffbd;
  opacity:.9;
  font-weight:700;
  padding:.35rem .25rem;
  transition:color .18s ease,opacity .18s ease;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible{
  color:var(--accent);
  opacity:1;
}
.site-nav .nav-link::after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:-6px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
  border-radius:999px;
}
.site-nav .nav-link:hover::after,
.site-nav .nav-link:focus-visible::after{
  transform:scaleX(1);
}

/* =========================
 * Hero split
 * ========================= */
.hero.hero-split{
  padding:0;
  background:transparent;
  overflow:hidden;
}
.hero.hero-split .hero-split-inner{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:0;
  align-items:stretch;
  width:100%;
}
.hero.hero-split .hero-left{
  background:var(--page-bg);
  border:0;
  border-radius:0;
  box-shadow:none;
  display:flex;
  align-items:center;
}
.hero.hero-split .hero-left-inner{
  width:min(640px,100%);
  padding:clamp(22px,3.2vw,56px);
  margin-left:clamp(16px,3vw,60px);
  margin-right:clamp(16px,3vw,40px);
  position:relative;
}
.hero.hero-split .hero-right{
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
  position:relative;
  aspect-ratio:16/9;
  min-height:500px;
}
.hero.hero-split .hero-right-inner{width:100%;height:100%}
.hero-right .carousel,
.hero-right .carousel-inner,
.hero-right .carousel-item{height:100%}

/* 圖：中心裁切＋中心放大 */
.hero-slide-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  transform-origin:50% 50%;
  transform:scale(1);
  will-change:transform;
}
.carousel-item.active .hero-slide-img{
  animation:heroKenBurns 3.5s ease-in-out both;
}
/* Ken Burns：1.015 */
@keyframes heroKenBurns{
  from{ transform: scale(1) translateZ(0); }
  to  { transform: scale(1.015) translateZ(0); }
}

@media (max-width:991px){
  .hero.hero-split .hero-split-inner{grid-template-columns:1fr}
  .hero.hero-split .hero-left-inner{
    width:100%;
    margin:0;
    padding:22px 16px 18px;
  }
  .hero.hero-split .hero-right{
    min-height:320px;
    height:62vw;
    aspect-ratio:auto;
  }
}

/* Hero 漸入 */
.reveal-up{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .85s ease,transform .85s ease;
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.reveal-up.is-reveal{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .reveal-up{opacity:1!important;transform:none!important;transition:none!important}
}

/* picture01：上下漂浮（調大小改 clamp 最後那個數字） */
@keyframes heroFloat{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
  100%{ transform: translateY(0); }
}
.hero-picture01{
  display:block;
  width: clamp(260px, 32vw, 360px);
  height:auto;
  margin:0 auto 12px;
  pointer-events:none;
  animation: heroFloat 4.5s ease-in-out infinite;
}
.hero-type-lines{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0 0 14px;
}
.hero-type{
  width:min(720px,100%);
  height:auto;
  display:block;
}

.donate-grid{
  display:grid;
  grid-template-columns: minmax(240px, 420px) 1fr;
  gap: clamp(18px, 3.2vw, 52px);
  align-items:center;
  margin-top: 18px;
}
.donate-media{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;   /* 偏左 */
}
.donate-img{
  width:min(420px, 100%);
  height:auto;
}

.donate-content{
  text-align:left;
}

/* Donate type05/type06（取代原文字） */
.donate-type-lines{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0 0 18px;
}
.donate-type{  width:50%;
  height:auto;
  display:block;
}
.donate-title{
  margin:0 0 12px;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 900;
  letter-spacing: .2px;
}
.donate-lines{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.donate-line{
  display:grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items:baseline;
}
.donate-k{
  color: var(--muted);
  font-weight: 900;
}
.donate-v{
  color: #111827;
  line-height: 1.8;
  font-weight: 700;
}
.donate-price{
  color: var(--accent);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: .5px;
  line-height: 1.1;
}
.donate-footnote{
  margin-top: 12px;
  color: var(--muted);
  font-size: clamp(.8rem, 1.1vw, .92rem);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.donate-cta{
  margin-top: 16px;
}

@media (max-width: 991px){
  .donate-grid{
    grid-template-columns: 1fr;
  }
  .donate-media{
    justify-content:center;
  }
  .donate-content{
    text-align:left;
  }
  .donate-footnote{
    white-space: normal;
  }
}

.info-card,
.how-card,
.notice-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}

.info-card{padding:18px;height:100%}
.info-ic{font-size:28px;margin-bottom:10px}
.info-card h3{font-size:18px;font-weight:900;margin:0 0 6px}
.info-card p{margin:0;color:var(--muted);line-height:1.8}

.how-card{padding:18px;height:100%;position:relative}
.how-tag{
  position:absolute;top:14px;right:14px;
  background:rgba(176,8,43,.08);
  color:var(--accent);
  border:1px solid rgba(176,8,43,.22);
  padding:4px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:900;
}
.how-title{font-size:20px;font-weight:900;margin:0 0 10px}
.how-list{margin:0;padding-left:18px;color:var(--muted);line-height:1.9}
.how-note{margin-top:10px;color:var(--muted);font-size:.95rem}

.notice-card{padding:18px}
.notice-list{margin:0;padding-left:18px;color:var(--muted);line-height:1.9}

/* =========================
 * Product Spec
 * ========================= */
.product-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);
  box-shadow:0 14px 34px rgba(0,0,0,.06);
  overflow:hidden;
}
.product-row{display:grid;grid-template-columns:1.05fr 1fr}
@media (max-width:991px){.product-row{grid-template-columns:1fr}}

.product-media{
  background:linear-gradient(180deg,rgba(176,8,43,.06),rgba(0,0,0,0));
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.product-media img{
  width:100%;
  max-width:520px;
  border-radius:16px;
  object-fit:cover;
  aspect-ratio:4/3;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
}
.product-info{
  padding:20px 32px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.product-name-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.product-title{color:#4b515e;margin:0;font-size:28px;font-weight:800;line-height:1.15}
.product-cta-wrap{margin-top:6px}
.product-cta{padding:10px 14px;font-weight:900;border-radius:14px}
.product-spec{
  margin-top:8px;
  border-top:1px dashed var(--line);
  padding-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.spec-line{display:grid;grid-template-columns:88px 1fr;gap:10px}
.spec-k{color:var(--muted);font-weight:800}
.spec-v{color:#111827;line-height:1.7}
.spec-price{align-items:baseline}
.price-strong{
  color:var(--accent);
  font-size:34px;
  font-weight:900;
  letter-spacing:.5px;
  line-height:1.1;
}
@media (max-width:575px){.price-strong{font-size:30px}}
.product-foot{
  border:0;
  background:transparent;
  padding:10px 0 0;
  margin-top:6px;
  color:var(--muted);
  line-height:1.6;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:clamp(.72rem,1.2vw,.88rem);
}

/* =========================
 * Results: Marquee + Lightbox
 * ========================= */
.marquee-fullbleed{width:100%}
.marquee-wrap{max-width:none;margin:0}

.marquee{
  overflow:hidden;
  border-left:0;
  border-right:0;
  background: transparent;
}
 
.marquee-track{
  display:flex;
  gap:5px;
  padding:0px;
  width:max-content;
  animation:marqueeScroll 28s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-img{
  height:170px;
  width:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:14px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  cursor:zoom-in;
}
@keyframes marqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (max-width:767px){
  .marquee-track{padding:10px;gap:10px}
  .marquee-img{height:110px;border-radius:12px}
}

/* Lightbox */
.lightbox-modal{position:relative;background:transparent;border:0}
.lightbox-modal #lightboxImg{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  background:var(--page-bg);
}
.lightbox-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

/* =========================
 * United Way band（第一段可換色）
 * ========================= */
.uw-band{
  --uw-h: 420px;

  position:relative;
  width:100%;
  min-height:var(--uw-h);
  margin:0;
  padding:0;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  background:#000;
}
.uw-band::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("img/uw_bg.jpg") center/cover no-repeat;
  opacity: var(--uw-opacity);
  z-index:0;
}
.uw-band-inner{
  position:relative;
  z-index:1;
  width:min(1140px,92vw);
  margin:0 auto;
  padding:28px 16px;
  text-align:center;
}
.uw-band h3{
  margin:0 0 10px;
  font-weight:900;
  color: var(--uw-title-color) !important;
  text-shadow: var(--uw-title-shadow) !important;
}

/* 全部段落先用第二段色 */
.uw-band p,
.uw-band p span{
  margin:0 auto;
  max-width:760px;
  color: var(--uw-p2-color) !important;
  line-height:1.9;
  text-shadow: var(--uw-text-shadow) !important;
}

/* ✅ 第一段長文（你要換色的那段） */
.uw-band p:first-of-type,
.uw-band p:first-of-type span{
  color: var(--uw-p1-color) !important;
}

/* Logo */
.uw-band .partner-card{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0}
.uw-band .row{justify-content:center;align-items:center;text-align:center}
.uw-band .partner-logo{
  margin:0 auto 14px;
  width:100%;
  height:auto;
  object-fit:contain;
}

/* UW button */
.uw-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:-8px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.6);
  background:rgba(255, 238, 238, 0.18);
  color:#fff !important;
  font-weight:900;
  transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
}
.uw-btn:hover{
  background:var(--page-bg);
  color:var(--accent) !important;
  border-color:#fff;
  transform:translateY(-1px);
}

/* =========================
 * Follow me（置中、無白色 pill）
 * ========================= */
.cta-bottom{
  padding:64px 0;
  background:
    radial-gradient(40% 40% at 20% 15%, rgba(227,74,111,.18), transparent 60%),
    radial-gradient(40% 40% at 80% 0%, rgba(176,8,43,.14), transparent 60%),
    linear-gradient(180deg, #fff, var(--bg));
  border-top:1px solid var(--line);
}
.cta-bottom .container{max-width:980px}
.cta-bottom .container,
.cta-bottom .section-head{ text-align:center; }

.section-eyebrow{
  background:transparent;
  border:0;
  padding:0;
  border-radius:0;
  display:block;
  margin:0 auto 10px;
  color:var(--accent);
  font-weight:900;
  letter-spacing:.08em;
}
.section-subtitle{
  color:var(--muted);
  line-height:1.9;
  margin:10px auto 0;
  max-width:760px;
}

/* Follow me buttons（保留原本按鈕設計） */
.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.8rem;
  margin-top:1.6rem;
  justify-content:center;
}
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.7rem 1.6rem;
  border-radius:999px;
  font-size:1.35rem;
  font-weight:700;
  border:2px solid transparent;
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
  background: #fff;
}
#FB.btn-outline{color:#0866ff;border-color:#0866ff}
#FB.btn-outline:hover{
  background:#0866ff;
  color:#fff;
  box-shadow:0 8px 18px rgba(8,102,255,0.35);
}
#groups.btn-outline{color:#8baf2b;border-color:#8baf2b}
#groups.btn-outline:hover{
  background:#8baf2b;
  color:#fff;
  box-shadow:0 8px 18px rgba(139,175,43,0.35);
}


/* =========================
 * Footer（桃紅底＋半透明框）
 * ========================= */
.footer-cta{
  background:linear-gradient(180deg, #ec93b1, #eb3f78);
  color:#fff;
  padding:44px 0;
}
.footer-cta-inner{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
@media (max-width:991px){
  .footer-cta-inner{flex-direction:column;align-items:flex-start}
}
.footer-small{opacity:.85;font-size:.8rem;margin-top:14px}

/* Floating button */
.float-btn{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:1200;
  background:var(--accent);
  color:#fff;
  padding:12px 14px;
  border-radius:999px;
  box-shadow:0 14px 34px rgba(176,8,43,.28);
  font-weight:900;
}
.float-btn:hover{filter:brightness(1.03)}

/* Fixed Nav：避免錨點被蓋住 */
section[id]{scroll-margin-top: calc(var(--nav-h) + 16px);}



/* =========================================================
   Donate Block Variant A
   全寬粉嫩色帶 + 內容置中 + 左圖右文（乾淨、主打商品感）
   ========================================================= */
body.donate-variant-A #spec.sec-donate{
  padding: 80px 0;
  background:
    radial-gradient(40% 40% at 20% 20%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(40% 40% at 85% 10%, rgba(255,200,76,.18), transparent 62%),
    linear-gradient(180deg, rgba(252,201,219,.85), rgba(252,201,219,.55));
}

/* 內容不要貼邊：置中寬度 */
body.donate-variant-A #spec.sec-donate .container{
  max-width: 1180px;
}

/* 左右兩欄排版 */
body.donate-variant-A #spec .donate-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(18px, 3vw, 54px);
  align-items:center;
}

/* 左圖：加淡圓形襯底 + 立體感 */
body.donate-variant-A #spec .donate-media{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(10px, 2vw, 22px);
}
body.donate-variant-A body.donate-variant-A #spec .donate-img{
  position:relative;
  width:min(560px, 96%);
  height:auto;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.14));
}

/* 右文：靠左、層級更清楚 */
body.donate-variant-A #spec .donate-content{
  text-align:left;
  padding-right: clamp(0px, 1vw, 16px);
}
body.donate-variant-A #spec .donate-type-lines{
  gap: 10px;
  margin: 0 0 18px;
}
body.donate-variant-A #spec .donate-type{
  width: min(540px, 100%);
}

/* CTA 位置與手感 */
body.donate-variant-A #spec .donate-cta{
  margin-top: 14px;
}
body.donate-variant-A #spec .donate-cta .btn{
  padding: 14px 22px;
  border-radius: 16px;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(176,8,43,.22);
}
body.donate-variant-A #spec .donate-cta .btn:hover{
  transform: translateY(-1px);
}

/* RWD：手機上下堆疊 + 文字置中 */
@media (max-width: 991px){
  body.donate-variant-A #spec .donate-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  body.donate-variant-A #spec .donate-content{
    text-align:center;
  }
  body.donate-variant-A body.donate-variant-A #spec .donate-img{
    width:min(460px, 92%);
  }
  body.donate-variant-A #spec .donate-type{
    margin: 0 auto;
  }
}




/* =========================================================
   Donate Variant A – Tuned (v3)
   1) donate-content 整體縮小 10%
   2) donate-type-lines 文字塊再縮小 15%
   4) cake03 底下襯底改用 flower02.png（透明度60%）
   5) 立即前往門市 按鈕放大（含手機）
   6) UW 按鈕放大（含手機）
   ========================================================= */

/* 1) 右側整體縮小 10% */
body.donate-variant-A #spec .donate-content{
  transform: scale(.9);
  transform-origin: left center;
}

/* 2) type05/type06 再縮小 15%（在原基礎上） */
body.donate-variant-A #spec .donate-type{
  width: min(442px, 100%); /* 520px * 0.85 ≈ 442px */
}

/* 4) 左圖襯底改成花朵（flower02.png） */
body.donate-variant-A /* 3) cake03 維持原樣：不額外套用比例或裁切 */
body.donate-variant-A #spec .donate-img{
  transform: none !important;
}

/* 5) Donate CTA 放大（桌機/手機都放大） */
body.donate-variant-A #spec .donate-cta .btn{
  padding: 16px 28px !important;
  font-size: 1.15rem !important;
  border-radius: 18px !important;
}

/* 6) UW 按鈕放大（桌機/手機都放大） */
.uw-btn{
  padding: 14px 26px !important;
  font-size: 1.05rem !important;
  border-radius: 999px !important;
}

@media (max-width: 575px){
  body.donate-variant-A #spec .donate-content{
    transform: scale(.92);
    transform-origin: center top;
  }
  body.donate-variant-A #spec .donate-cta .btn{
    width: 100%;
    max-width: 360px;
    font-size: 1.12rem !important;
    padding: 16px 26px !important;
  }
  .uw-btn{
    width: 100%;
    max-width: 360px;
    padding: 16px 26px !important;
    font-size: 1.1rem !important;
  }
}


body.donate-variant-A #spec .donate-media{position:relative;}
body.donate-variant-A body.donate-variant-A #spec .donate-img{position:relative; z-index:1;}



/* === Variant class alias：支援 donate-variant-A / donate-variant-a === */
body:is(.donate-variant-A,.donate-variant-a) #spec.sec-donate { /* hook */ }




/* =========================================================
   FIX: cake03 襯底 flower02 必須有 content + position 才會顯示
   （之前 ::before 沒寫 content/position，所以看起來「沒變化」）
   ========================================================= */
body.donate-variant-A #spec .donate-media{
  position: relative;
}
body.donate-variant-A body.donate-variant-A #spec .donate-img{
  position: relative;
  z-index: 1;
}

/* ----- Mobile hamburger button ----- */
.nav-toggle{
  margin-left:auto;
  border:1px solid var(--line);
  background:rgba(255,255,255,.65);
  backdrop-filter:saturate(160%) blur(10px);
  border-radius:14px;
  padding:10px 12px;
}
.nav-toggle .hamburger{
  display:block;
  width:22px;
  height:2px;
  background:var(--text);
  position:relative;
}
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:var(--text);
}
.nav-toggle .hamburger::before{ top:-7px; }
.nav-toggle .hamburger::after{ top:7px; }

/* Mobile collapse spacing */
@media (max-width: 991px){
  .site-nav .collapse{
    width:100%;
    margin-top:10px;
    padding:10px 0 6px;
    border-top:1px solid var(--line);
  }
  .site-nav .nav-links{ padding:0 6px 10px; }
  .site-nav .nav-link{ padding:.6rem .35rem; }
}

/* ----- Unified buttons (兩顆按鈕：桌機/手機一致) ----- */
.btn-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:1.18rem;       /* ✅ 文字大小一致 */
  padding:16px 34px;       /* ✅ 尺寸一致 */
  border-radius:999px;     /* ✅ 膠囊圓角一致 */
  line-height:1;
  letter-spacing:.2px;
}
/* Bootstrap btn-lg 會改 padding，這裡固定回來 */
.btn.btn-lg.btn-pill{
  font-size:1.18rem;
  padding:16px 34px;
  border-radius:999px;
}


:root{
  --pill-radius: 999px;
  --pill-fw: 900;

  /* Mobile default */
  --pill-fs: 1.14rem;
  --pill-py: 16px;
  --pill-px: 34px;
}

@media (min-width: 992px){
  :root{
    /* Desktop bigger */
    --pill-fs: 1.32rem;
    --pill-py: 20px;
    --pill-px: 54px;
  }
}

.btn-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight: var(--pill-fw) !important;
  font-size: var(--pill-fs) !important;
  padding: var(--pill-py) var(--pill-px) !important;
  border-radius: var(--pill-radius) !important;
  line-height: 1 !important;
  letter-spacing: .3px;
  text-decoration:none;
}

/* 保險：避免 Bootstrap btn 內建尺寸覆蓋 */
.btn.btn-pill{
  font-size: var(--pill-fs) !important;
  padding: var(--pill-py) var(--pill-px) !important;
  border-radius: var(--pill-radius) !important;
}


/* =========================================================
   Donate flower02 (實體 img + reveal-up)
   ========================================================= */
#spec .donate-media{ position:relative; }
#spec .donate-flower{
  position:absolute;
  left:50%;
  top:58%;
  width:min(720px, 112%);
  aspect-ratio: 9 / 7;
  transform: translate(-50%, -50%) rotate(-6deg);
  opacity: .6;
  pointer-events:none;
  z-index:0;
}
#spec .donate-img{
  position:relative;
  z-index:1;
}


/* =========================================================
   Mobile Offcanvas Nav (手機折疊抽屜)
   ========================================================= */
.nav-menu-btn{
  margin-left:auto;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.78);
  color: #111;
  font-weight: 900;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  line-height: 1;
}

.offcanvas{
  background: #fce2db;
}
.offcanvas-header{
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.mobile-nav-list{
  list-style:none;
  margin:0;
  padding: 10px 0 0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.mobile-nav-link{
  display:block;
  padding: 14px 14px;
  border-radius: 14px;
  font-weight: 900;
  color: #111;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
}
.mobile-nav-link:hover{
  background: rgba(255,255,255,.95);
}

/* 手機：桌機 nav 不顯示 */
@media (max-width: 991px){
  header.site-nav nav.d-none{ display:none !important; }
}
@media (min-width: 992px){
  .nav-menu-btn{ display:none !important; }
}



/* ===== Mobile: remove old collapse toggle (已改為 offcanvas) ===== */
.nav-toggle{ display:none !important; }

/* desktop nav uses existing .nav-link styles */
.desktop-nav .nav-link{}

/* On mobile, keep header clean: only logo + menu btn */
@media (max-width: 991px){
  .desktop-nav{ display:none !important; }
}



/* =========================================================
   PATCH v12
   1) Mobile offcanvas nav link hover -> red like desktop
   2) Cake bigger + shadow + flower bigger
   3) Make '立即前往門市' button same size as UW button
   ========================================================= */

/* 1) Mobile nav link hover/focus/active -> accent red */
.mobile-nav-link{
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.mobile-nav-link:hover,
.mobile-nav-link:focus-visible,
.mobile-nav-link:active{
  color: var(--accent) !important;
  border-color: rgba(176,8,43,.35) !important;
  background: rgba(255,255,255,.95) !important;
}

/* Optional underline like desktop */
.mobile-nav-link{
  position: relative;
}
.mobile-nav-link::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:8px;
  height:2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
  border-radius: 999px;
}
.mobile-nav-link:hover::after,
.mobile-nav-link:focus-visible::after{
  transform: scaleX(1);
}

/* 2) Cake + flower bigger + stronger shadow */
#spec .donate-img{
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.18)) !important;
  transform: scale(1.10);           /* 整體放大 */
  transform-origin: center center;
}
#spec .donate-flower{
  width: min(820px, 122%) !important;  /* 襯底也放大 */
  top: 60% !important;
}

/* RWD: mobile keep reasonable scale */
@media (max-width: 575px){
  #spec .donate-img{
    transform: scale(1.06);
    filter: drop-shadow(0 18px 32px rgba(0,0,0,.18)) !important;
  }
  #spec .donate-flower{
    width: min(720px, 132%) !important;
    top: 62% !important;
  }
}

/* 3) Donate CTA button same size as UW (force same pill vars) */
#spec .donate-cta .btn{
  font-size: var(--pill-fs) !important;
  padding: var(--pill-py) var(--pill-px) !important;
  border-radius: var(--pill-radius) !important;
  font-weight: var(--pill-fw) !important;
}



/* ===== About icons (PNG) + centered text ===== */
#about.sec-center .section-head{
  text-align:center;
}
#about.sec-center .row{
  text-align:center;
}
#about.sec-center .info-card{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
#about.sec-center .info-ic{
  margin-bottom:12px;
}
#about.sec-center .info-icon{
  width:56px;
  height:56px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
#about.sec-center .info-card h3{
  margin-top:0;
}
#about.sec-center .info-card p{
  margin-top:6px;
}

/* ===== Howto（捐贈方式）圖文卡：左客服 icon / 中文字 / 右表單 icon ===== */
#howto .section-head{ margin-bottom: 18px; }
#howto .section-sub{ margin-top: 8px; }

:root{
  --howto-card-w: 900px;   /* ✅ 卡片最大寬度（想更短：820px；想更寬：980px） */
  --howto-icon-w: 110px;   /* ✅ 左/右 icon 大小 */
}

.howto-wrap{
  display:flex;
  justify-content:center;
}

.howto-card{
  width: min(var(--howto-card-w), 100%);
  background:#fff;
  border-radius:16px;
  padding:26px 32px;
  display:grid;
  grid-template-columns: 140px 1fr 140px;
  grid-template-areas: "left text right";
  gap:22px;
  align-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}

.howto-icon{
  display:flex;
  align-items:center;
  justify-content:center;
}
.howto-icon-left{ grid-area:left; }
.howto-icon-right{ grid-area:right; }

.howto-icon img{
  width: var(--howto-icon-w);
  height:auto;
  margin:0;
}

/* ✅ 文字區塊垂直置中 + 整塊置中；清單本體置中但內容左對齊 */
.howto-text{
  grid-area:text;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

.howto-title{
  margin:0 0 10px;
  font-weight:900;
  font-size:18px;
}

.howto-list{
  display:inline-block;  /* 清單本體置中 */
  text-align:left;       /* 內容左對齊 */
  margin:0 auto;
  padding-left:18px;
  line-height:1.9;
  color:#667085;
}

.howto-note{
  margin:10px 0 0;
  font-size:14px;
  color:#667085;
  text-align:center;
}

/* 手機：上下排（上：左右 icon、下：文字） */
@media (max-width: 767px){
  :root{ --howto-icon-w: 92px; --howto-card-w: 640px; }

  .howto-card{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "left right"
      "text text";
    padding:20px 18px;
    gap:14px 10px;
    justify-items:center;
  }

  .howto-text{ margin-top: 6px; }
}


/* =========================
 * Footer 主標 SVG（淡入）
 * ========================= */
.footer-type{
  width: min(760px, 100%);
  height: auto;
  display:block;
  margin: 0 0 10px 0;
}

/* ✅ 讓 footer 左側區塊可以撐開（SVG 才吃得到寬度） */
.footer-cta-inner > div:first-child{
  flex: 1 1 auto;
  min-width: 0;
}

/* ✅ 若右邊按鈕區太寬，至少讓它不要硬擠左側 */
.footer-cta-inner > .d-flex{
  flex: 0 0 auto;
}

@media (max-width: 575px){
  .footer-type{ width: min(420px, 100%); }
}


/* ===== 浮動按鈕：改成「愛心門市參與」整顆圖片 ===== */
.float-btn{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 1200;

  /* ✅ 按鈕尺寸（跟圖片一致） */
  width: 120px;      /* 可調 */
  height: 120px;     /* 可調 */
  padding: 0 !important;

  /* ✅ 用圖片當按鈕本體 */
  background: url("img/float_heart_store.png") center/contain no-repeat;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /* ✅ 把原本文字藏起來（但仍可點） */
  font-size: 0;
  line-height: 0;
  color: transparent;

  display: block;
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease;
}

/* Hover 彈跳 */
.float-btn:hover{
  animation: floatHeartPop .42s cubic-bezier(.2,.9,.2,1) both;
  filter: drop-shadow(0 14px 24px rgba(176,8,43,.28));
}

@keyframes floatHeartPop{
  0%{ transform: translateY(0) scale(1); }
  45%{ transform: translateY(-7px) scale(1.10); }
  75%{ transform: translateY(2px) scale(.98); }
  100%{ transform: translateY(0) scale(1); }
}

/* 手機：稍微縮小避免遮到內容 */
@media (max-width: 575px){
  .float-btn{
    width: 96px;
    height: 96px;
    right: 10px;
    bottom: 10px;
  }
}

/* 無障礙：減少動畫 */
@media (prefers-reduced-motion: reduce){
  .float-btn:hover{ animation:none; }
}

.section-title-img{
  display: block;
  margin: 0 auto;
  width: min(520px, 92%);
  height: auto;
}

/* 手機再小一點 */
@media (max-width: 575px){
  .section-title-img{
    width: min(360px, 92%);
  }
}