/* ══ 變數 ══ */
:root {
  --bg:           #f7f3ee;
  --bg-soft:      #fbf8f4;
  --card:         #ffffff;
  --text:         #2f2a27;
  --muted:        #6d655f;
  --border:       #e8ddd4;
  --primary:      #8d705f;
  --primary-dark: #6e5648;
  --green:        #cfd8cf;
  --peach:        #ecd3c6;
  --dark:         #2e2a27;
  --line-green:   #06C755;
  --shadow:       0 16px 40px rgba(49,39,31,.08);
  --radius:       24px;
  --max:          1180px;
}

/* ══ Reset ══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans TC",
               "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.75;
}
img  { display: block; width: 100%; height: auto; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; }
h1   { font-size: clamp(2.2rem, 5vw, 4.2rem); margin: 16px 0; }
h2   { font-size: clamp(1.7rem, 3vw, 2.6rem); margin: 14px 0 16px; }
h3   { font-size: 1.15rem; margin-bottom: 8px; }
p    { color: var(--muted); margin-bottom: 14px; }
p:last-child { margin-bottom: 0; }

/* ══ Layout ══ */
.container {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}
.section        { padding: 30px 0; }
.section--soft  { background: var(--bg-soft); }
.section--dark  { background: var(--dark); color: #fff; }
.section--dark p { color: rgba(255,255,255,.72); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: center;
}
.grid-2--flip { grid-template-columns: .95fr 1.05fr; }
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ══ Eyebrow ══ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #efe6df;
  color: var(--primary-dark);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 4px;
}

/* ── 統一副標題 ── */
.section-desc {
  font-size: 1.04rem;
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.85;
  margin-bottom: 0;
}
.section--dark .section-desc {
  color: rgba(255,255,255,.68);
}
.section--dark h2 {
  color: #fff;
}
.eyebrow--light {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* ══ Buttons ══ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 16px;
  font-weight: 700;
  font-size: .96rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .22s ease, filter .22s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: var(--shadow);
}
.btn--primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.btn--line-cta {
  background: var(--line-green);
  color: #fff;
  border-color: var(--line-green);
  box-shadow: 0 10px 28px rgba(6,199,85,.28);
}
.btn--line-cta:hover { filter: brightness(.94); }

.btn--outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--outline:hover { background: rgba(255,255,255,.5); }

.btn--ghost {
  background: rgba(47,42,39,.07);
  color: var(--text);
  border-color: rgba(47,42,39,.1);
}
.btn--ghost:hover { background: rgba(47,42,39,.12); }

.btn--pill  { border-radius: 999px; }
.btn--sm    { min-height: 42px; padding: 0 16px; font-size: .9rem; border-radius: 14px; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ══ Header ══ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(14px);
  background: rgba(247,243,238,.82);
  border-bottom: 1px solid rgba(232,221,212,.8);
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 76px;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-shrink: 0;
}
.brand__logo {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: transform .3s ease;
}
.brand__logo:hover { transform: scale(1.06); }
.brand__name    { font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; }
.brand__tagline { color: var(--muted); font-size: .82rem; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: .94rem;
}
.nav__links a:not(.btn) { color: var(--muted); transition: color .2s; }
.nav__links a:not(.btn):hover { color: var(--text); }

/* ══ Hero ══ */
.hero        { padding: 72px 0 60px; }
.hero__lead  { font-size: 1.06rem; color: var(--muted); max-width: 54ch; }


.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 10px;
}
.tag {
  padding: 9px 15px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .9rem;
  color: var(--text);
}

.stat-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.stat {
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  text-align: center;
}
.stat strong { display: block; font-size: 1.4rem; color: var(--primary-dark); }
.stat span   { font-size: .8rem; color: var(--muted); }

.photo-card         { background: #fff; padding: 10px; border-radius: 28px; box-shadow: var(--shadow); }
.photo-card img     { border-radius: 20px; object-fit: cover; }
.photo-card--hero img { aspect-ratio: 6 / 5; }

.hero__visual { position: relative; }
.hero__badge {
  position: absolute;
  left: -18px;
  bottom: 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 14px 18px;
  max-width: 240px;
}
.hero__badge strong { display: block; font-size: .96rem; margin-bottom: 4px; }
.hero__badge span   { font-size: .86rem; color: var(--muted); }

/* ══════════ 品牌重點 ══════════ */

.trust-strip {
  padding-bottom: clamp(26px, 4vw, 48px);
}

.trust-strip__inner {
  display: grid;
  gap: 12px;
}

.trust-item {
  padding: 18px 18px 16px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.28);
}

.trust-item__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--muted);
}

.trust-item strong {
  font-size: var(--text-base);
  font-weight: 700;
}

/* ══════════ 與他牌比較區塊 ══════════ */
.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  padding: 4px 13px;
  border-radius: 999px;
  background: rgb(255, 255, 255);
  border: 1px solid rgba(4, 4, 3, 0.1);
  color: var(--primary-dark);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .0em;
}

.compare-editorial-section {
  padding: 30px 0 0;
  background:
    radial-gradient(circle at top left, rgba(141,112,95,.045), transparent 24%),
    linear-gradient(180deg, #fbf8f4 0%, #f7f3ee 100%);
}

.compare-editorial-heading {
  max-width: 760px;
  margin: 0 auto 26px;
  text-align: center;
}

.compare-editorial-visual {
  max-width: 920px;
  margin: 0 auto;
}

.compare-editorial-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 6.6;
  object-fit: cover;
  object-position: center;
  border-radius: 22px;
  background: #efe8e1;
}

.compare-editorial-table {
  border-top: 1px solid rgba(141,112,95,.12);
}

.compare-editorial-head,
.compare-editorial-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
}

.compare-editorial-head {
  padding: 0 0 14px;
  align-items: end;
}

.compare-editorial-head__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: .95rem;
  font-weight: 700;
}

.compare-editorial-head__item--label {
  opacity: 0;
}

.compare-editorial-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(141,112,95,.52);
}

.compare-editorial-row {
  padding: 22px 0;
  border-top: 1px solid rgba(141,112,95,.10);
  align-items: start;
}

  /* 關鍵：數字 + 標題同一行 */
  .compare-editorial-topic {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
  }

.compare-editorial-index {
  color: var(--text);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

.compare-editorial-topic h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.4;
}

.compare-editorial-brush {
  position: relative;
  display: inline;
  z-index: 1;
}

.compare-editorial-brush::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -7px;
  bottom: 1px;
  height: .72em;
  background: #f5f98d;
  border-radius: 8px 12px 7px 11px;
  transform: rotate(-1.5deg);
  z-index: -1;
}

.compare-editorial-text {
  min-width: 0;
}

.compare-editorial-text p {
  margin: 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.82;
}

.compare-editorial-text--brand p {
  color: #54473d;
}

/* Mobile keeps same logic */
@media (max-width: 1024px) {
  .compare-editorial-heading {
    text-align: left;
    margin-bottom: 22px;
  }

  .compare-editorial-visual {
    margin-bottom: 0px;
  }

  .compare-editorial-visual img {
    aspect-ratio: 4 / 2.15;
    border-radius: 18px;
  }

  .compare-editorial-head {
    display: none;
  }

  .compare-editorial-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 0 20px;
  }

  .compare-editorial-topic {
    gap: 6px;
    margin-bottom: 2px;
  }

  .compare-editorial-topic h3 {
    font-size: 1rem;
  }

  .compare-editorial-brush::after {
    left: -5px;
    right: -5px;
    bottom: 1px;
    height: .68em;
  }

  .compare-editorial-text p {
    max-width: none;
    font-size: .93rem;
    line-height: 1.72;
  }

  .compare-editorial-text--brand,
  .compare-editorial-text--normal {
    padding-left: 0;
  }

  .compare-editorial-text--brand::before,
  .compare-editorial-text--normal::before {
    display: block;
    margin-bottom: 6px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .01em;
  }

  .compare-editorial-text--brand::before {
    content: "筋鬆樂的頭部放鬆";
  }

  .compare-editorial-text--normal {
    padding-top: 10px;
    border-top: 1px dashed rgba(141,112,95,.10);
  }

  .compare-editorial-text--normal::before {
    content: "一般常見按摩體驗";
  }
}

@media (max-width: 768px) {
  .compare-editorial-section {
    padding: 30px 0 0;
  }

  .compare-editorial-heading .heading-highlight {
    font-size: .95rem;
    line-height: 1.76;
  }

  .compare-editorial-row {
    padding: 16px 0 18px;
  }

  .compare-editorial-index {
    font-size: .74rem;
  }

  .compare-editorial-topic h3 {
    font-size: .98rem;
  }

  .compare-editorial-text p {
    font-size: .91rem;
    line-height: 1.68;
  }

  .compare-editorial-text--brand::before,
  .compare-editorial-text--normal::before {
    font-size: .8rem;
  }
}

/* ══════════ Audience Section ══════════ */
.audience-section {
  padding: 30px 0;
  background:
    radial-gradient(circle at top left, rgba(141,112,95,.05), transparent 24%),
    linear-gradient(180deg, #fbf8f4 0%, #f7f3ee 100%);
}

.audience-heading {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

.audience-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.audience-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 28px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(141,112,95,.10);
  box-shadow: 0 16px 36px rgba(49,39,31,.05);
  overflow: hidden;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}

.audience-card:hover {
  transform: translateY(-3px);
  border-color: rgba(141,112,95,.18);
  box-shadow: 0 20px 42px rgba(49,39,31,.08);
}

.audience-card__image {
  background: linear-gradient(180deg, rgba(247,243,238,.96), rgba(255,255,255,.82));
  padding: 16px 16px 0;
}

.audience-card__image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3.3;
  object-fit: cover;
  object-position: center;
  border-radius: 22px;
  background: #efe8e1;
}

.audience-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 22px;
}

.audience-card__tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(141,112,95,.10);
  color: var(--primary-dark);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.audience-card__content h3 {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.45;
  color: var(--text);
  letter-spacing: -.01em;
}

.audience-card__content p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.8;
}

.audience-footnote {
  max-width: 760px;
  margin: 26px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.8;
}

/* Tablet */
@media (max-width: 1024px) {
  .audience-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

/* Mobile slider */
@media (max-width: 768px) {
  .audience-section {
    padding: 30px 0;
  }

  .audience-heading {
    text-align: left;
    margin-bottom: 22px;
  }

  .audience-cards {
    grid-template-columns: none; /* 把平板的 2欄設定蓋掉 */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 14px;
    overflow-x: auto;
    padding-right: 4vw;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* align-items: start; */
  }

  .audience-cards::-webkit-scrollbar {
    display: none;
  }

  .audience-card {
    scroll-snap-align: start;
    border-radius: 24px;
  }

  .audience-card__image {
    padding: 12px 12px 0;
  }

  .audience-card__image img {
    border-radius: 18px;
    aspect-ratio: 4 / 3.15;
  }

  .audience-card__content {
    gap: 10px;
    padding: 16px 16px 18px;
  }

  .audience-card__content h3 {
    font-size: 1.06rem;
    line-height: 1.42;
  }

  .audience-card__content p {
    font-size: .92rem;
    line-height: 1.72;
  }

  .audience-footnote {
    margin-top: 18px;
    text-align: left;
    font-size: .92rem;
    line-height: 1.72;
  }
}

/* ══════════════════════════════════════
   Stat Strip
══════════════════════════════════════ */
.stat-strip { background: var(--dark); padding: 28px 0; }
.stat-strip__inner {
  display: flex; justify-content: center;
  gap: 0; flex-wrap: wrap;
}
.stat-item {
  flex: 1; min-width: 140px; text-align: center;
  padding: 16px 20px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.stat-item:last-child { border-right: none; }
.stat-item strong { display: block; font-size: 2rem; font-weight: 800; color: #fff; line-height: 1.1; }
.stat-item span   { font-size: .8rem; color: rgba(255,255,255,.55); }


/* ══════════ 組合方案 & 加購項目（jsl- 前綴，避免樣式衝突） ══════════ */

.jsl-combo-section,
.jsl-addon-section {
  --jsl-bg: #f7f3ee;
  --jsl-bg-soft: #fbf8f4;
  --jsl-card: #ffffff;
  --jsl-text: #2f2a27;
  --jsl-muted: #6d655f;
  --jsl-border: rgba(141, 112, 95, 0.10);
  --jsl-border-strong: rgba(141, 112, 95, 0.14);
  --jsl-primary: #8d705f;
  --jsl-primary-dark: #6e5648;
  --jsl-sage: lab(88.32% 14.31 5.35);
  --jsl-soft: #f1ece8;
  --jsl-shadow: 0 14px 32px rgba(49, 39, 31, 0.05);

  position: relative;
  z-index: 1;
  overflow-x: clip;
}

.jsl-shell {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.jsl-heading {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}

.jsl-heading--addon {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 680px;
}


.jsl-heading__title {
  margin: 16px 0 10px;
  color: var(--jsl-text);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.25;
  font-weight: 800;
}

.jsl-heading__text {
  margin: 0;
  color: var(--jsl-muted);
  font-size: 1rem;
  line-height: 1.8;
}

/* Tablet */
@media (max-width: 1024px) {
  .addon-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .addon-row__side {
    justify-content: space-between;
    width: 100%;
    gap: 12px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .addon-section {
    padding: 12px 0 78px;
  }

  .addon-heading {
    margin-bottom: 20px;
  }

  .addon-row {
    padding: 18px 18px;
    border-radius: 20px;
    gap: 14px;
  }

  .addon-row__titleline {
    gap: 8px;
    margin-bottom: 6px;
  }

  .addon-row h3 {
    font-size: 1rem;
  }

  .addon-row p {
    font-size: .91rem;
    line-height: 1.7;
  }

  .addon-row__side {
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .addon-row__meta strong {
    font-size: 1.7rem;
  }

  .addon-row__meta span {
    font-size: .88rem;
  }

  .addon-btn {
    min-height: 42px;
    padding: 0 16px;
    font-size: .88rem;
  }
}

/* Small phones */
@media (max-width: 420px) {
  .addon-row__side {
    flex-direction: column;
    align-items: flex-start;
  }

  .addon-btn {
    width: 100%;
  }
}

/* ══ Compare Table ══ */
.compare-table {
  width: 100%; border-collapse: collapse;
  margin: 10px 0;; background: #fff;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.compare-table th {
  background: var(--primary-dark); color: #fff;
  padding: 14px 18px; text-align: left;
  font-size: .9rem; font-weight: 700;
}
.compare-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  font-size: .93rem;
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:nth-child(even) td { background: var(--bg-soft); }
.compare-table .td-price { font-weight: 700; color: var(--primary-dark); }
.compare-table .td-combo { background: rgba(237,224,215,.3) !important; }

/* ══════════ 工作室空間區塊 ══════════ */
.studio-space-section {
  padding: 30px 0;
  background:
    radial-gradient(circle at top left, rgba(141, 112, 95, 0.05), transparent 26%),
    linear-gradient(180deg, #fbf8f4 0%, #f7f3ee 100%);
}

.studio-space-layout {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}

.studio-space-copy {
  max-width: 420px;
}

.studio-space-copy h2 {
  margin: 18px 0 16px;
  font-size: clamp(2rem, 1.6rem + 1vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--text);
}

.studio-space-lead {
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--muted);
}

.studio-space-points {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-space-points li {
  position: relative;
  padding-left: 18px;
  color: var(--text);
  line-height: 1.8;
}

.studio-space-points li::before {
  content: "";
  position: absolute;
  top: 0.78em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(141, 112, 95, 0.62);
}

.studio-space-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  background: #10c84f;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 16px 28px rgba(16, 200, 79, 0.18);
  transition: transform .24s ease, box-shadow .24s ease;
}

.studio-space-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 32px rgba(16, 200, 79, 0.22);
}

.studio-space-gallery {
  min-width: 0;
}

.studio-space-main {
  padding: 12px;
  border-radius: 32px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(141,112,95,.10);
  box-shadow: 0 18px 40px rgba(49,39,31,.06);
}

.studio-space-main img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  object-fit: cover;
  border-radius: 24px;
  background: #efe8e1;
  transition: opacity .28s ease, transform .28s ease;
}

.studio-space-gallery.is-switching .studio-space-main img {
  opacity: .72;
  transform: scale(.992);
}

.studio-space-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.studio-space-thumb {
  padding: 8px;
  border: 1px solid rgba(141,112,95,.10);
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 24px rgba(49,39,31,.04);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.studio-space-thumb:hover {
  transform: translateY(-2px);
  border-color: rgba(141,112,95,.20);
  box-shadow: 0 14px 28px rgba(49,39,31,.07);
}

.studio-space-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 15px;
  background: #efe8e1;
}

.studio-space-thumb.is-active {
  border-color: rgba(141,112,95,.34);
  box-shadow: 0 16px 30px rgba(49,39,31,.08);
}

.studio-space-thumb.is-active img {
  outline: 2px solid rgba(141,112,95,.24);
  outline-offset: 0;
}

/* 平板 */
@media (max-width: 1024px) {
  .studio-space-layout {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }

  .studio-space-copy {
    max-width: 100%;
  }
}

/* 手機：文上圖下 */
@media (max-width: 768px) {
  .studio-space-section {
    padding: 30px 0;
  }

  .studio-space-layout {
    gap: 22px;
  }

  .studio-space-copy h2 {
    margin: 16px 0 14px;
    font-size: 2.1rem;
    line-height: 1.18;
  }

  .studio-space-lead {
    margin-bottom: 18px;
    font-size: .96rem;
    line-height: 1.8;
  }

  .studio-space-points {
    gap: 10px;
  }

  .studio-space-points li {
    font-size: .96rem;
    line-height: 1.72;
  }

  .studio-space-cta {
    margin-top: 22px;
    min-height: 48px;
    padding: 0 20px;
    font-size: .96rem;
  }

  .studio-space-main {
    padding: 8px;
    border-radius: 22px;
  }

  .studio-space-main img {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }

  .studio-space-thumbs {
    gap: 8px;
    margin-top: 10px;
  }

  .studio-space-thumb {
    padding: 5px;
    border-radius: 14px;
  }

  .studio-space-thumb img {
    border-radius: 10px;
    aspect-ratio: 4 / 3;
  }
}

/* ═════════════════════════════
   流程（Timeline）
═════════════════════════════ */

.process-line {
  position: relative;
  margin-top: 40px;
  padding-left: 24px;
  border-left: 2px solid rgba(255,255,255,.2);
  display: grid;
  gap: 28px;
}

/* 每個步驟 */
.process-step {
  position: relative;
  padding-left: 12px;
}

/* 圓點 */
.process-dot {
  position: absolute;
  left: -14px;
  top: 4px;
  width: 14px;
  height: 14px;
  background: var(--peach);
  border-radius: 50%;
}

/* 文字 */
.process-step h3 {
  color: #fff;
  margin-bottom: 6px;
}

.process-step p {
  color: rgba(255,255,255,.7);
  font-size: .92rem;
}

/* 桌機版：橫向 */
@media (min-width: 1024px) {
  .process-line {
    border-left: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }

  .process-step {
    padding-left: 0;
  }

  .process-dot {
    position: static;
    margin-bottom: 10px;
  }
}

/* ══ Line Banner ══ */
.line-banner     { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.line-banner img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ══ FAQ ══ */
.faq-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: start; }
.faq-list   { display: grid; gap: 12px; }


.faq-item {
  padding: 0 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(77, 59, 47, 0.08);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 18px 32px 18px 0;
  font-weight: 700;
  color: var(--text);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 16px;
  font-size: 1.25rem;
  color: var(--accent-strong);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  padding: 0 0 18px;
}


/* ══ Float LINE ══ */
.float-line { position: fixed; right: 22px; bottom: 22px; z-index: 1200; }
.float-line a {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-radius: 999px;
  background: var(--line-green); color: #fff; font-weight: 700;
  box-shadow: 0 10px 28px rgba(6,199,85,.32);
  transition: transform .25s ease;
}
.float-line a:hover { transform: translateY(-3px); }


/* ══ 動畫 ══ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.anim-up    { animation: fadeUp .72s cubic-bezier(.22,1,.36,1) both; }
.delay-1    { animation-delay: .12s; }
.delay-2    { animation-delay: .24s; }
.delay-3    { animation-delay: .38s; }
.delay-4    { animation-delay: .52s; }
.float-anim { animation: floatY 5s ease-in-out infinite; }


/* ══════════════════════════════════════
   服務項目 Tab
══════════════════════════════════════ */
.service-tabs {
  display: flex; gap: 0;
  border: 1px solid var(--border); border-radius: 999px;
  background: #fff; padding: 4px;
  /* width: fit-content;  */
  width: 80%;        /* 或改成 100% 就全寬 */
  max-width: 480px;  /* 桌機上不要太寬，加個上限 */
  margin: 28px auto 0; /* auto 讓它置中 */
  justify-content: space-around; /* 讓三個 tab 平均分佈 */
  overflow-x: auto;
  -ms-overflow-style: none; 
  scrollbar-width: none;
}
.service-tabs::-webkit-scrollbar { display: none; }
.service-tab {
  flex: 1;           /* 新增這行，每個 tab 等寬 */
  text-align: center;
  padding: 10px 22px; border-radius: 999px;
  font-size: .88rem; font-weight: 700; color: var(--muted);
  cursor: pointer; white-space: nowrap;
  transition: all .22s ease; border: none; background: none;
}
.service-tab.active { background: var(--primary-dark); color: #fff; }
.service-panels { margin-top: 28px; }
.service-panel  { display: none; }

/* 桌機 / 平板：維持左右兩欄 */
.service-panel.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.service-panel__photo {
  overflow: hidden;
}

.service-panel__photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center top;
  transition: transform .6s ease;
}

.service-panel__body {
  background: #fff;
  padding: 10px 22px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.svc-badge {
  display: inline-block; margin-bottom: 14px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--peach); color: var(--primary-dark);
  font-size: .78rem; font-weight: 700;
}
.svc-desc { font-size: 1.02rem; line-height: 1.8; margin-bottom: 12px; }
.svc-list  { display: flex; flex-direction: column; gap: 1px; margin-bottom: 12px; }
.svc-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; }
.svc-list li::before {
  content: ''; flex-shrink: 0; width: 7px; height: 7px;
  border-radius: 50%; background: var(--primary); margin-top: 8px;
}
.price-inline { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--border); margin-bottom: 10px; }
.price-chip   { display: flex; align-items: center; gap: 8px; font-size: .94rem; }
.price-chip strong { color: var(--primary-dark); font-size: 1.2rem; }


/* ══════════════════════════════════════
   客戶評論（無縫自動滾動）
══════════════════════════════════════ */
.reviews-section { overflow: hidden; }
.review-track-wrap {
  position: relative; overflow: hidden; margin-top: 32px;
}
.review-track-wrap::before,
.review-track-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: 80px; z-index: 2; pointer-events: none;
}
.review-track-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.review-track-wrap::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }
.review-track {
  display: flex; gap: 20px;
  animation: scrollReview 32s linear infinite;
  width: max-content;
}
.review-track:hover { animation-play-state: paused; }
@keyframes scrollReview {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.review-card {
  width: 340px; flex-shrink: 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: 20px; padding: 24px;
  box-shadow: var(--shadow-sm);
}
.review-stars   { color: #d4976a; font-size: 1rem; letter-spacing: 2px; margin-bottom: 12px; }
.review-text    { font-size: .94rem; color: var(--text); line-height: 1.75; margin-bottom: 18px; }
.review-meta    { display: flex; justify-content: space-between; align-items: flex-end; }
.review-name    { font-weight: 700; font-size: .9rem; }
.review-service { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.review-date    { font-size: .8rem; color: var(--muted); }
.review-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
.review-score   { font-size: 4rem; font-weight: 800; color: var(--primary-dark); line-height: 1; }
.review-score-info strong { display: block; font-size: .9rem; color: var(--text); }
.review-score-info span   { font-size: .82rem; color: var(--muted); }
.review-stars-lg { color: #d4976a; font-size: 1.3rem; letter-spacing: 3px; }

/* ══════════════════════════════════════
   地圖
══════════════════════════════════════ */
.map-section { background: var(--dark); }
.map-layout  { display: grid; grid-template-columns: 1fr 1fr; }
.map-body {
  padding: 60px 52px;
  display: flex; flex-direction: column; justify-content: center;
  color: #fff;
}
.map-body h2 { color: #fff; }
.map-body p  { color: rgba(255,255,255,.65); }
.map-info-list   { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.map-info-item   { display: flex; align-items: flex-start; gap: 12px; font-size: .94rem; }
.map-info-item__icon { flex-shrink: 0; font-size: 1.1rem; margin-top: 2px; }
.map-info-item span   { color: rgba(255,255,255,.75); }
.map-info-item strong { color: #fff; display: block; margin-bottom: 2px; }
.map-frame { overflow: hidden; min-height: 360px; }
.map-frame iframe { width: 100%; height: 100%; min-height: 360px; border: none; display: block; filter: grayscale(.2); }

/* ══════════════════════════════════════
   Footer
══════════════════════════════════════ */
.site-footer-v2 {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  padding: 60px 0 120px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr 1.4fr;
  gap: 40px;
}
.footer-brand__tagline { color: var(--muted); font-size: .88rem; margin-top: 10px; max-width: 28ch; line-height: 1.7; }
.footer-copy  { font-size: .8rem; color: var(--muted); margin-top: 16px; }
.footer-col h4 {
  font-size: .82rem; font-weight: 700; letter-spacing: .06em;
  color: var(--primary-dark); margin-bottom: 14px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: .88rem; color: var(--muted); transition: color .2s; }
.footer-links a:hover { color: var(--text); }
.footer-info-list { display: flex; flex-direction: column; gap: 12px; }
.footer-info-item { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; color: var(--muted); }
.footer-info-item__icon { flex-shrink: 0; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.social-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: var(--muted);
  transition: all .2s ease; box-shadow: var(--shadow-sm);
}
.social-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.footer-bottom {
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: .8rem; color: var(--muted);
}

/* ══════════════════════════════════════
   浮動 LINE & 手機底部 Bar
══════════════════════════════════════ */
.float-line { position: fixed; right: 22px; bottom: 28px; z-index: 1200; }
.float-line a {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  background: var(--line-green); color: #fff; font-weight: 700;
  box-shadow: 0 10px 28px rgba(6,199,85,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.float-line a:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(6,199,85,.45); }
.mobile-bar { display: none; }

/* ══════════════════════════════════════
   動畫
══════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.anim-up { animation: fadeUp .78s cubic-bezier(.22,1,.36,1) both; }
.anim-in { animation: fadeIn .6s ease both; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .22s; }
.delay-3 { animation-delay: .36s; }
.delay-4 { animation-delay: .5s; }

/* ══ RWD ══ */
@media (max-width: 1024px) {
  .grid-2, 
  .grid-2--flip,
  .process-grid,
  .faq-layout,
  .steps-2x2 {
    grid-template-columns: 1fr 1fr;
  }

    /* LINE 引導：文字在上圖片在下 */
  .section--soft .grid-2 {
    grid-template-columns: 1fr;
  }
  .section--soft .grid-2 > div:first-child {
    order: 1;
  }
  .section--soft .grid-2 .line-banner {
    order: 2;
  }

    /* FAQ 單獨設定為單欄 */
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Hero 區塊改為單欄堆疊 */
  .hero .grid-2 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero .grid-2 > div:first-child {
    order: 1;
  }

  .hero__visual {
    order: 2;
  }

  .photo-card {
    padding: 8px;
    border-radius: 24px;
  }


  .grid-3                { grid-template-columns: 1fr 1fr; }
  .advantage-grid        { grid-template-columns: 1fr 1fr; }

    /* 服務 Tab */
  .service-panel.active  { grid-template-columns: 1fr; }
  .service-panel__photo img {
  width: 100%;
  aspect-ratio: 16 / 10;  /* 固定比例，三張都一樣 */
  object-fit: cover;
  object-position: center top; /* 避免主體被裁切 */
  transition: transform .6s ease;
  display: block;
}

  /* 加購 */
  .addon-row             { grid-template-columns: 1fr; }

    /* 空間 */
  .space-layout          { grid-template-columns: 1fr; }
  .space-photo           { height: 320px; }
  .space-body            { padding: 48px 32px; }

    /* 地圖 */
  .map-layout            { grid-template-columns: 1fr; }
  .map-body              { padding: 48px 32px; }

  /* Footer */
  .footer-grid           { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .section        { padding: 30px 0; }
  .hero           { padding-top: 40px; }

    /* Stat Strip：允許橫向捲動 */
  .stat-strip__inner     { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 0 20px; }
  .stat-item             { min-width: 110px; }

  .grid-3, .grid-4,
  .addon-grid,
  .mini-gallery   { grid-template-columns: 1fr; }
  .advantage-grid { grid-template-columns: 1fr; }
  /* .hero__badge    { position: static; margin-top: 14px; display: inline-block; } */
  .nav__links     { display: none; }
  .float-line     { display: none; }

   /* 服務 Tab */
  .service-panel__body   { padding: 10px 22px 28px; }

  /* 加購：水平卡圖片縮小 */
  .addon-h               { grid-template-columns: 110px 1fr; }
  .addon-h__photo img    { min-height: 140px; }

  /* 組合：卡片改垂直 */
  .combo-h               { flex-direction: column; align-items: flex-start; gap: 12px; }
  .combo-h__price        { text-align: left; }

  /* 地圖 */
  .map-body              { padding: 40px 24px; }
  .map-frame             { min-height: 260px; }
  .map-frame iframe      { min-height: 260px; }

   /* Footer */
  .footer-grid           { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom         { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* 浮動 LINE：手機隱藏（改用底部 Bar） */
  .float-line            { display: none; } 

  .mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1300;
  }
  .mobile-bar a {
    min-height: 52px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; box-shadow: var(--shadow);
  }
  .m-outline { background: rgba(247,243,238,.96); border: 1px solid var(--border); color: var(--text); }
  .m-line    { background: var(--line-green); color: #fff; }
}

@media (max-width: 768px) {
  .steps-2x2   { grid-template-columns: 1fr; }

  /* 加購：照片全寬 */
  .addon-h               { grid-template-columns: 1fr; }
  .addon-h__photo img    { aspect-ratio: 16/9; height: auto; }

  /* 服務 Tab */
  .service-tab           { padding: 10px 16px; font-size: .82rem; }

  /* 評論卡 */
  .review-card           { width: 260px; }

  /* Stat：文字稍縮 */
  .stat-item strong      { font-size: 1.6rem; }
}

/* ===== 組合方案 ===== */
.jsl-combo-section {
  padding: 30px 0;
}

.jsl-combo-slider {
  position: relative;
  overflow: hidden;
}

.jsl-combo-slider__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.jsl-combo-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--jsl-card);
  border: 1px solid var(--jsl-border);
  border-radius: 24px;
  padding: 22px 20px;
  box-shadow: var(--jsl-shadow);
}

.jsl-combo-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.jsl-combo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}

.jsl-combo-pill--brown {
  background: var(--jsl-primary);
  color: #fff;
}

.jsl-combo-pill--soft {
  background: #ece7e2;
  color: var(--jsl-text);
}

.jsl-combo-pill--sage {
  background: var(--jsl-sage);
  color: var(--jsl-primary-dark);
}

.jsl-combo-card__title {
  margin: 0 0 12px;
  color: var(--jsl-text);
  font-size: 1.06rem;
  line-height: 1.45;
  font-weight: 800;
}

.jsl-combo-card__desc {
  margin: 0 0 12px;
  color: var(--jsl-muted);
  font-size: .95rem;
  line-height: 1.8;
}

.jsl-combo-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jsl-combo-card__list li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 12px;
  color: var(--jsl-text);
  font-size: .95rem;
  line-height: 1.65;
}

.jsl-combo-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(141, 112, 95, 0.55);
}

.jsl-combo-card__price-note {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(141, 112, 95, 0.10);
  color: var(--jsl-muted);
  font-size: .9rem;
  text-decoration: line-through;
}

.jsl-combo-card__price-tip {
  margin-top: 6px;
  color: var(--jsl-primary-dark);
  font-size: .92rem;
  font-weight: 700;
}

.jsl-combo-card__price {
  margin-top: 8px;
  color: #7a5b48;
  font-size: 2.35rem;
  line-height: 1;
  font-weight: 800;
}

.jsl-combo-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 18px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 800;
  border: 0;
}

.jsl-combo-card__btn--line {
  background: #16c34a;
  color: #fff;
}

.jsl-combo-card__btn--soft {
  background: var(--jsl-soft);
  color: var(--jsl-primary-dark);
}

/* ===== 加購項目 ===== */
.jsl-addon-section {
  padding: 30px 0;
}

.jsl-addon-list {
  display: grid;
  gap: 14px;
}

.jsl-addon-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--jsl-border);
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(49, 39, 31, 0.04);
}

.jsl-addon-row__main {
  min-width: 0;
}

.jsl-addon-row__titleline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.jsl-addon-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ece4de;
  color: var(--jsl-primary-dark);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.jsl-addon-chip--sage {
  background: #dce4dc;
}

.jsl-addon-row__title {
  margin: 0;
  color: var(--jsl-text);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
}

.jsl-addon-row__desc {
  margin: 0;
  max-width: 46ch;
  color: var(--jsl-muted);
  font-size: .94rem;
  line-height: 1.75;
}

.jsl-addon-row__side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}

.jsl-addon-row__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.jsl-addon-row__meta strong {
  color: #7a5b48;
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
}

.jsl-addon-row__meta span {
  color: var(--jsl-muted);
  font-size: .95rem;
}

.jsl-addon-row__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: #f4efea;
  color: var(--jsl-primary-dark);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 800;
  white-space: nowrap;
}

.jsl-addon-row__btn--soft {
  background: #f6f2ee;
}

/* ===== Tablet ===== */
@media (max-width: 1024px) {
  .jsl-shell {
    width: min(1120px, calc(100% - 32px));
  }

  .jsl-combo-slider__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jsl-addon-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .jsl-addon-row__side {
    width: 100%;
    justify-content: space-between;
  }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .jsl-shell {
    width: calc(100% - 24px);
  }

  .jsl-combo-section {
    padding: 30px 0;
  }

  .jsl-addon-section {
    padding: 30px 0;
  }

  .jsl-heading,
  .jsl-heading--addon {
    text-align: left;
    margin-bottom: 20px;
    max-width: none;
  }

  .jsl-heading__title {
    margin-top: 14px;
    font-size: 2rem;
  }

  .jsl-heading__text {
    font-size: .96rem;
    line-height: 1.78;
  }

  /* 手機版：組合方案改成左右滑 */
  .jsl-combo-slider {
    overflow: hidden;
    margin-right: -12px;
  }

  .jsl-combo-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100vw - 50px);
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 12px 12px 0;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
  }

  .jsl-combo-slider__track::-webkit-scrollbar {
    display: none;
  }

  .jsl-combo-card {
    width: 100%;
    min-width: 0;
    padding: 20px 18px;
    border-radius: 22px;
    scroll-snap-align: start;
  }

  .jsl-combo-card__top {
    gap: 8px;
    margin-bottom: 14px;
  }

  .jsl-combo-pill {
    min-height: 34px;
    padding: 7px 12px;
    font-size: .8rem;
  }

  .jsl-combo-card__title {
    font-size: 1rem;
  }

  .jsl-combo-card__desc,
  .jsl-combo-card__list li {
    font-size: .92rem;
  }

  .jsl-combo-card__desc {
    line-height: 1.72;
  }

  .jsl-combo-card__price {
    font-size: 2rem;
  }

  .jsl-combo-card__btn {
    min-height: 50px;
    margin-top: 16px;
    font-size: .95rem;
  }

  /* 手機版：加購項目保持緊湊 */
  .jsl-addon-row {
    padding: 18px 18px;
    border-radius: 20px;
  }

  .jsl-addon-row__titleline {
    gap: 8px;
    margin-bottom: 6px;
  }

  .jsl-addon-row__title {
    font-size: 1rem;
  }

  .jsl-addon-row__desc {
    font-size: .91rem;
    line-height: 1.7;
  }

  .jsl-addon-row__side {
    align-items: center;
    justify-content: space-between;
  }

  .jsl-addon-row__meta strong {
    font-size: 1.72rem;
  }

  .jsl-addon-row__meta span {
    font-size: .88rem;
  }

  .jsl-addon-row__btn {
    min-height: 42px;
    padding: 0 16px;
    font-size: .88rem;
  }
}

/* ===== Small phones ===== */
@media (max-width: 420px) {
  .jsl-combo-slider {
    margin-right: -10px;
  }

  .jsl-combo-slider__track {
    grid-auto-columns: calc(100vw - 50px);
    gap: 10px;
    padding-right: 10px;
  }

  .jsl-combo-card {
    padding: 18px 16px;
  }

  .jsl-combo-card__price {
    font-size: 1.88rem;
  }

  .jsl-addon-row__side {
    flex-direction: column;
    align-items: flex-start;
  }

  .jsl-addon-row__btn {
    width: 100%;
  }
}

/* ===== 若你有手機底部固定按鈕 ===== */
@media (max-width: 768px) {
  body.has-mobile-sticky-bar .jsl-combo-slider__track {
    padding-bottom: 86px;
  }

  body.has-mobile-sticky-bar .jsl-addon-section {
    padding-bottom: 104px;
  }
}