#king-crab-page {
  --navy: #061a2d;
  --navy-soft: #11283d;
  --cream: #f8f5ee;
  --gold: #d8ad55;
  --orange: #ed5a3d;
  --accent: #d8ad55;
  --accent-ink: #102337;
  min-height: 100vh;
  color: var(--cream);
  background: radial-gradient(circle at 8% 92%, rgba(148, 50, 41, .2), transparent 26%), var(--navy);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

/* ===== 共用：系列導覽（帝王蟹 ⇄ 雪蟹 互相串聯） ===== */
.series-nav { position: sticky; top: 0; z-index: 20; padding: .7rem 0; background: rgba(6, 26, 45, .82); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.1); }
.series-brand { display: inline-flex; align-items: center; gap: .45rem; color: #f4ecd9; font-weight: 900; letter-spacing: .06em; text-decoration: none; }
.series-brand i { color: #d8ad55; }
.series-links { display: flex; gap: .4rem; }
.series-links a { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .95rem; border-radius: 999px; color: #cdd8e2; font-weight: 800; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.series-links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.series-links a.active { color: #102337; background: #d8ad55; }
.crab-ico { font-size: 1.05em; line-height: 1; }

/* ===== 共用：LINE 訂購 浮動按鈕 ===== */
.line-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 60; display: inline-flex; align-items: center; gap: .55rem; padding: .9rem 1.5rem; border-radius: 999px; background: #06c755; color: #fff; font-weight: 900; letter-spacing: .02em; text-decoration: none; box-shadow: 0 12px 28px rgba(6,199,85,.4); }
.line-fab:hover, .line-fab:focus-visible { background: #05b34c; color: #fff; }
.line-fab i { font-size: 1.4rem; line-height: 1; }

@media (prefers-reduced-motion: no-preference) {
  .line-fab { transition: transform .2s ease, background-color .2s ease; }
  .line-fab:hover, .line-fab:focus-visible { transform: translateY(-2px); }
}

@media (max-width: 575.98px) {
  .line-fab { right: 0; left: 0; bottom: 0; width: 100%; justify-content: center; padding: 1rem; border-radius: 0; box-shadow: 0 -4px 20px rgba(0,0,0,.35); }
  #king-crab-page, #snow-crab-page { padding-bottom: 4rem; }
  @media (prefers-reduced-motion: no-preference) {
    .line-fab:hover, .line-fab:focus-visible { transform: none; }
  }
}

/* ===== 共用：內容區塊 / 標題 ===== */
.section-block { padding: clamp(3rem, 6vw, 5rem) 0; }
.section-block.section-alt { background: rgba(255,255,255,.03); }
.section-title { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 900; letter-spacing: -.02em; }
.section-lead { color: #cdd8e2; }

/* ===== 共用：內容元件（以頁面 --accent 上色，兩頁共用） ===== */
.knowledge-card { padding: 1.6rem 1.8rem; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.05); color: #d5e0ea; line-height: 1.9; }
.knowledge-card p:last-child { margin-bottom: 0; }
.knowledge-card strong { color: var(--accent); }

.mini-stat { display: flex; flex-direction: column; gap: .15rem; height: 100%; padding: 1.1rem 1.2rem; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(255,255,255,.03); }
.mini-stat i { font-size: 1.5rem; color: var(--accent); margin-bottom: .3rem; }
.mini-stat strong { font-size: 1.15rem; }
.mini-stat span { color: #a9c4d8; font-size: .85rem; }

.value-card { padding: 1.8rem; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.05); }
.value-card i { display: inline-flex; font-size: 2rem; color: var(--accent); margin-bottom: .8rem; }
.value-card h3 { font-size: 1.2rem; font-weight: 900; margin-bottom: .5rem; }
.value-card p { color: #cdd8e2; margin-bottom: 0; line-height: 1.8; }

.scene-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .3rem; padding: 1.5rem 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.04); }
.scene-card i { font-size: 1.9rem; color: var(--accent); margin-bottom: .3rem; }
.scene-card strong { font-size: 1.05rem; }
.scene-card span { color: #a9c4d8; font-size: .82rem; }

.step-list { list-style: none; margin: 0; padding: 0; }
.step-list li { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px dashed rgba(255,255,255,.14); }
.step-list li:last-child { border-bottom: 0; }
.step-no { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--accent-ink); background: var(--accent); font-weight: 900; }
.step-list strong { display: block; font-size: 1.1rem; margin-bottom: .2rem; }
.step-list p { margin: 0; color: #cdd8e2; line-height: 1.7; }

.media-frame { overflow: hidden; border-radius: 20px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 50px rgba(0,0,0,.22); }
.media-frame img { display: block; width: 100%; height: 320px; object-fit: cover; object-position: center; }
.media-frame figcaption { padding: .7rem 1rem; background: rgba(9,29,46,.9); color: var(--accent); font-size: .88rem; text-align: center; }

.banner-frame { overflow: hidden; border-radius: 24px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 60px rgba(0,0,0,.24); }
.banner-frame img { display: block; width: 100%; height: auto; }

.crab-gallery figure { margin: 0; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); box-shadow: 0 16px 40px rgba(0,0,0,.2); }
.crab-gallery img { display: block; width: 100%; height: 240px; object-fit: cover; object-position: center; }
.crab-gallery figcaption { padding: .75rem 1rem; text-align: center; }
.crab-gallery figcaption strong { display: block; font-size: 1.02rem; }
.crab-gallery figcaption span { color: #a9c4d8; font-size: .82rem; }
.crab-gallery figcaption i { color: var(--accent); margin-right: .35rem; }

.num-stat { text-align: center; height: 100%; padding: 1.5rem 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.03); }
.num-stat strong { display: block; font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 900; color: var(--accent); line-height: 1; }
.num-stat span { display: block; margin-top: .55rem; color: #a9c4d8; font-size: .85rem; }

.market-group-label { color: var(--accent); font-weight: 800; letter-spacing: .04em; margin-bottom: .85rem; }
.market-tag { display: flex; align-items: center; justify-content: center; gap: .4rem; height: 100%; padding: .75rem 1rem; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.04); font-weight: 700; font-size: .95rem; text-align: center; transition: border-color .2s ease, background-color .2s ease; }
.market-tag:hover { border-color: var(--accent); background: rgba(255,255,255,.07); }
.market-tag i { color: var(--accent); }

.spec-table { border: 1px solid rgba(255,255,255,.1); border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.04); }
.spec-row { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.spec-row:last-child { border-bottom: 0; }
.spec-row span { color: var(--accent); font-weight: 800; }
.spec-row strong { font-weight: 600; }

.allergen-card { padding: 1.8rem; border: 1px solid rgba(216,173,85,.5); border-radius: 20px; background: rgba(216,173,85,.1); }
.allergen-card i { font-size: 2rem; color: #e6c169; margin-bottom: .6rem; display: inline-flex; }
.allergen-card h3 { font-size: 1.2rem; font-weight: 900; margin-bottom: .5rem; }
.allergen-card p { color: #ecdcb8; line-height: 1.8; margin-bottom: 0; }

.faq-accordion .accordion-item { margin-bottom: .8rem; border: 1px solid rgba(255,255,255,.12); border-radius: 14px !important; overflow: hidden; background: rgba(255,255,255,.04); }
.faq-accordion .accordion-button { color: #f4ecd9; background: transparent; font-weight: 800; box-shadow: none; }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--accent); background: rgba(255,255,255,.05); }
.faq-accordion .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.18); }
.faq-accordion .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.6); }
.faq-accordion .accordion-body { color: #cdd8e2; line-height: 1.8; }
.faq-accordion .accordion-body strong { color: var(--accent); }

@media (max-width: 575.98px) {
  .spec-row { grid-template-columns: 1fr; gap: .2rem; }
}

/* ===== 共用：跨頁 CTA 與頁尾 ===== */
.cross-cta .cross-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.6rem, 3vw, 2.6rem); border: 1px solid rgba(216,173,85,.55); border-radius: 24px; background: linear-gradient(120deg, rgba(216,173,85,.14), rgba(95,198,255,.1)); }
.cross-cta .cross-text { max-width: 42rem; }
.cross-cta .cross-text p:not(.eyebrow) { color: #d5e0ea; }
.cross-button { padding: .95rem 1.6rem; border: 0; border-radius: 999px; color: #102337; background: #d8ad55; font-weight: 900; white-space: nowrap; }
.cross-button:hover, .cross-button:focus-visible { color: #102337; background: #ecc773; transform: translateY(-2px); }
.site-footer { padding: 1.4rem 0; border-top: 1px solid rgba(255,255,255,.1); color: #9fb1c2; font-size: .9rem; }
.site-footer .footer-links a { color: #cdd8e2; text-decoration: none; margin: 0 .1rem; }
.site-footer .footer-links a:hover { color: #fff; }
.site-footer .footer-supplier { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.08); color: #7f92a6; font-size: .78rem; line-height: 1.6; }

@media (prefers-reduced-motion: no-preference) {
  .cross-button { transition: transform .2s ease, background-color .2s ease; }
}

#king-crab-page .origin-badge { padding: .65rem 1rem; border-radius: 999px; color: #102337; background: var(--gold); font-weight: 800; letter-spacing: .06em; }
#king-crab-page .eyebrow { color: var(--gold); font-size: .86rem; font-weight: 800; letter-spacing: .18em; }
#king-crab-page .display-title { font-size: clamp(2.55rem, 4.4vw, 4.65rem); line-height: 1.12; font-weight: 900; letter-spacing: -.045em; }
#king-crab-page .display-title span { font-size: .66em; letter-spacing: -.035em; }
#king-crab-page .lead-title { color: #f2c96d; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 800; }
#king-crab-page .intro-copy { max-width: 44rem; color: #d5e0ea; font-size: 1rem; line-height: 1.8; }
#king-crab-page .feature-pill { display: flex; align-items: center; gap: .55rem; min-height: 58px; padding: .75rem .9rem; border: 1px solid rgba(216, 173, 85, .75); border-radius: 15px; background: rgba(255,255,255,.04); font-weight: 800; }
#king-crab-page .feature-pill i { color: #5fc6ff; font-size: 1.05rem; }
#king-crab-page .feature-pill span { white-space: nowrap; }
#king-crab-page .price-card { padding: 1.25rem 1.35rem; border: 1px solid rgba(216, 173, 85, .65); border-radius: 20px; background: rgba(255,255,255,.09); }
#king-crab-page .price-card small { display: block; margin-bottom: .25rem; color: #efd48f; font-weight: 800; }
#king-crab-page .price-line { font-size: clamp(1.35rem, 2.3vw, 1.95rem); font-weight: 800; }
#king-crab-page .price-line strong { color: #f2c96d; }
#king-crab-page .price-sub { margin-top: .4rem; color: #cbbb92; font-size: .92rem; }
#king-crab-page .order-button { padding: .9rem 1.4rem; border: 0; border-radius: 999px; color: #fff; background: var(--orange); box-shadow: 0 12px 28px rgba(237,90,61,.23); font-weight: 900; }
#king-crab-page .order-button:hover, #king-crab-page .order-button:focus-visible { color: #fff; background: #ff6c4e; transform: translateY(-2px); }
#king-crab-page .stock-note { color: #edca78; font-size: .9rem; }
#king-crab-page .hero-visual { min-height: 525px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px rgba(0,0,0,.24); }
#king-crab-page .hero-visual > img { height: 525px; object-fit: cover; object-position: center; }
#king-crab-page .image-label { top: 1.5rem; left: 1.5rem; display: flex; flex-direction: column; max-width: 82%; padding: .8rem 1rem; color: #3b281b; background: rgba(250,240,219,.85); backdrop-filter: blur(5px); }
#king-crab-page .image-label span { font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
#king-crab-page .image-label strong { font-family: "Noto Serif TC", "PMingLiU", serif; font-size: clamp(2.1rem, 3.8vw, 3.6rem); line-height: 1.05; }
#king-crab-page .image-label small { letter-spacing: .1em; }
#king-crab-page .image-footer { display: grid; grid-template-columns: repeat(3, 1fr); padding: .9rem 1rem; background: rgba(31,24,21,.88); backdrop-filter: blur(5px); }
#king-crab-page .image-footer > div { display: flex; align-items: center; justify-content: center; gap: .65rem; border-right: 1px solid rgba(255,255,255,.28); color: #f6eee1; font-size: .85rem; line-height: 1.25; }
#king-crab-page .image-footer > div:last-child { border-right: 0; }
#king-crab-page .image-footer i { font-size: 1.65rem; }
@media (max-width: 991.98px) {
  #king-crab-page .container-fluid { align-items: flex-start !important; }
  #king-crab-page .hero-visual, #king-crab-page .hero-visual > img { min-height: 420px; height: 420px; }
}

@media (max-width: 575.98px) {
  #king-crab-page .hero-visual, #king-crab-page .hero-visual > img { min-height: 390px; height: 390px; }
  #king-crab-page .image-label { top: 1rem; left: 1rem; }
  #king-crab-page .image-footer { padding: .7rem .35rem; }
  #king-crab-page .image-footer > div { flex-direction: column; gap: .2rem; text-align: center; font-size: .7rem; }
  #king-crab-page .image-footer i { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: no-preference) {
  #king-crab-page .order-button { transition: transform .2s ease, background-color .2s ease; }
}

/* ================= 雪蟹頁面（同系列、冰藍調） ================= */
#snow-crab-page {
  --navy: #061a2d;
  --cream: #f8f5ee;
  --gold: #d8ad55;
  --ice: #5fc6ff;
  --ice-deep: #2f8fd6;
  --accent: #5fc6ff;
  --accent-ink: #05243b;
  min-height: 100vh;
  color: var(--cream);
  background: radial-gradient(circle at 88% 6%, rgba(95, 198, 255, .16), transparent 30%), radial-gradient(circle at 8% 96%, rgba(47, 143, 214, .16), transparent 28%), var(--navy);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

#snow-crab-page .origin-badge { padding: .65rem 1rem; border-radius: 999px; color: #072033; background: var(--ice); font-weight: 800; letter-spacing: .06em; }
#snow-crab-page .origin-badge i { color: #0a2f4d; }
#snow-crab-page .eyebrow { color: var(--gold); font-size: .86rem; font-weight: 800; letter-spacing: .18em; }
#snow-crab-page .display-title { font-size: clamp(2.35rem, 4.1vw, 4.35rem); line-height: 1.12; font-weight: 900; letter-spacing: -.045em; }
#snow-crab-page .display-title span { font-size: .58em; letter-spacing: -.03em; color: #bfe6ff; }
#snow-crab-page .lead-title { color: #9bd7ff; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 800; }
#snow-crab-page .intro-copy { max-width: 44rem; color: #d5e0ea; font-size: 1rem; line-height: 1.8; }
#snow-crab-page .feature-pill { display: flex; align-items: center; gap: .55rem; min-height: 58px; padding: .75rem .9rem; border: 1px solid rgba(95, 198, 255, .55); border-radius: 15px; background: rgba(255,255,255,.04); font-weight: 800; }
#snow-crab-page .feature-pill i { color: var(--ice); font-size: 1.15rem; }
#snow-crab-page .feature-pill span { white-space: nowrap; }
#snow-crab-page .price-card { padding: 1.25rem 1.35rem; border: 1px solid rgba(95, 198, 255, .5); border-radius: 20px; background: rgba(255,255,255,.09); }
#snow-crab-page .price-card small { display: block; margin-bottom: .25rem; color: #9bd7ff; font-weight: 800; }
#snow-crab-page .price-line { font-size: clamp(1.35rem, 2.4vw, 2.05rem); font-weight: 800; }
#snow-crab-page .price-line strong { color: #ffd76b; }
#snow-crab-page .price-sub { margin-top: .4rem; color: #a9c4d8; font-size: .92rem; }
#snow-crab-page .order-button { padding: .9rem 1.4rem; border: 0; border-radius: 999px; color: #05243b; background: var(--ice); box-shadow: 0 12px 28px rgba(95,198,255,.22); font-weight: 900; }
#snow-crab-page .order-button:hover, #snow-crab-page .order-button:focus-visible { color: #05243b; background: #82d4ff; transform: translateY(-2px); }
#snow-crab-page .stock-note { color: #9bd7ff; font-size: .9rem; }

/* Hero 影像 */
#snow-crab-page .hero-visual { min-height: 525px; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px rgba(0,0,0,.24); }
#snow-crab-page .hero-visual > img { height: 525px; object-fit: cover; object-position: center; }
#snow-crab-page .image-label { top: 1.5rem; left: 1.5rem; display: flex; flex-direction: column; max-width: 82%; padding: .8rem 1rem; border-radius: 12px; color: #10314a; background: rgba(228,244,255,.88); backdrop-filter: blur(5px); }
#snow-crab-page .image-label span { font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
#snow-crab-page .image-label strong { font-family: "Noto Serif TC", "PMingLiU", serif; font-size: clamp(2.1rem, 3.8vw, 3.6rem); line-height: 1.05; }
#snow-crab-page .image-label small { letter-spacing: .1em; }
#snow-crab-page .image-footer { display: grid; grid-template-columns: repeat(3, 1fr); padding: .9rem 1rem; background: rgba(9,29,46,.9); backdrop-filter: blur(5px); }
#snow-crab-page .image-footer > div { display: flex; align-items: center; justify-content: center; gap: .65rem; border-right: 1px solid rgba(255,255,255,.24); color: #eaf4ff; font-size: .85rem; line-height: 1.25; }
#snow-crab-page .image-footer > div:last-child { border-right: 0; }
#snow-crab-page .image-footer i { font-size: 1.65rem; color: var(--ice); }

@media (max-width: 991.98px) {
  #snow-crab-page .hero-visual, #snow-crab-page .hero-visual > img { min-height: 420px; height: 420px; }
}
@media (max-width: 575.98px) {
  #snow-crab-page .hero-visual, #snow-crab-page .hero-visual > img { min-height: 390px; height: 390px; }
  #snow-crab-page .image-label { top: 1rem; left: 1rem; }
  #snow-crab-page .image-footer { padding: .7rem .35rem; }
  #snow-crab-page .image-footer > div { flex-direction: column; gap: .2rem; text-align: center; font-size: .7rem; }
  #snow-crab-page .image-footer i { font-size: 1.2rem; }
  #snow-crab-page .spec-row { grid-template-columns: 1fr; gap: .2rem; }
}
@media (prefers-reduced-motion: no-preference) {
  #snow-crab-page .order-button { transition: transform .2s ease, background-color .2s ease; }
}