/*
 * 2026 雙11「一起呼吸」Landing 樣式
 * 對應：2026-1111-landing.liquid（/pages/2026-1111-landing）
 * Scope：.gv1111（整頁）、.gvm（情境卡片區，移植自 Artifact「五個縫隙切頁版」）
 * 注意：站內 html 根字級為 10px，本檔以 .gv1111 { font-size:16px } 為基準，內部用 em
 */
.gv1111 {
  --gv-green: #002d18;
  --gv-green-80: #3b5647;
  --gv-green-40: #9caba3;
  --gv-beige: #dcd6cf;
  --gv-teal: #6db4bb;
  --gv-gray: #8e877d;
  --gv-cream: #f4f1ea;
  --gv-wrap: 1400px;
  font-size: 16px; /* 站內 html 根字級為 10px，在此建立本頁基準，內部一律用 em */
  color: var(--gv-green);
  line-height: 1.9;
  letter-spacing: 0.04em;
  overflow-x: hidden;
}
/* 重設全站元素樣式（p 20px / 細體、h2 h3 52px）；:where() 權重為 0，不會蓋過下方 class */
.gv1111 :where(p, h2, h3, li) {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
.gv1111 img {
  display: block;
  max-width: 100%;
  height: auto;
}
.gv1111__wrap {
  max-width: var(--gv-wrap);
  margin: 0 auto;
  padding: 0 24px;
}
/* 字級規範（依視覺角色套用）：h1 60px / h2 46px / h3 30px / 內文 p 20px；大字、小字、卡片文字維持原設計 */
.gv1111__h2 {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 0.8em;
}
.gv1111__p {
  font-size: 16px;
  margin: 0 0 0.9em;
}
/* h1：Hero 主標（沿用 .gv1111__h2 的結構，靠 section 限定）；只套桌機，手機沿用下方 768px 的 30px */
@media (min-width: 769px) {
  .gv1111-hero .gv1111__h2 {
    font-size: 46px;
  }
  .gv1111__p {
    font-size: 20px;
  }
}

.gv1111--light {
  color: #fff;
}

/* 隱藏 Shopline 文字分頁預設輸出的內容區（本頁內容全由 liquid 輸出） */
.CustomPage {
  display: none;
}

/* 捲動淡入：liquid 底部 JS 加上 .gv1111-reveal，進入視窗後加 .is-revealed */
.gv1111-reveal {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.gv1111-reveal.is-revealed {
  opacity: 1;
}

/* 背景圖區塊共用 */
.gv1111__bg {
  position: relative;
  background: var(--bg) center / cover no-repeat;
}
.gv1111--light {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

/* 1. Hero */
.gv1111-hero {
  min-height: min(56vw, 760px);
  display: flex;
  align-items: center;
  text-align: center;
  padding: 80px 0;
}

/* 2. Microbreak */
.gv1111-micro {
  background: var(--gv-beige);
  text-align: center;
  padding: 72px 0 0;
}
.gv1111-micro__lead {
  font-size: clamp(1.1em, 1.8vw, 1.5em);
  font-weight: 700;
  margin: 0;
}
/* 枝幹壓到下一區的波浪色帶上（設計稿疊層） */
.gv1111-micro__branch {
  width: 100%;
  margin: -20vw 0 -13vw; /* 往上拉與上方文字疊層（圖上方透明留白約 8.4vw，其餘為刻意疊壓） */
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* 3. 情境卡片（移植自 Artifact「五個縫隙切頁版」；class / id 一律 gvm- 前綴，避免撞到站內 Bootstrap .close / .in / .show） */
/* Layout: 「不用等到放假」段落，照設計稿。桌機：湖藍波浪色帶上排五格照片當分頁，下方大面板直接攤開內容（模糊大背景＋清楚照片＋內文、2/5、左右箭頭）。手機：直向展開條，Read more 叫出深綠覆蓋層，底部「關閉」 */
.gvm {
  --teal: #6fb3b9; /* 色帶 */
  --mist: #d8d4cd; /* 下半段（au 暖灰） */
  --ink: #1f3229;
  --deep: #13382b; /* 手機 Read more 覆蓋層 */
  --white: #ffffff;
  --note: #b4532a;
}
.gvm,
.gvm * {
  box-sizing: border-box;
}
.gvm [hidden] {
  display: none !important;
}
.gvm {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
}
.gvm h2,
.gvm h3 {
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-wrap: balance;
}
.gvm p {
  margin: 0;
}
.gvm button {
  font: inherit;
  color: inherit;
}
.gvm-gut {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.gvm-sec {
  background: var(--mist);
  position: relative;
}
.gvm-wave {
  display: block;
  width: 100%;
  height: 44px;
  margin-bottom: -1px;
  background: var(--mist);
}
.gvm-head {
  background: var(--teal);
  color: #fff;
  text-align: center;
  padding-block: 40px 120px;
}
.gvm-head h2 {
  font-size: 46px;
  font-weight: 300;
  line-height: 1.5;
}
.gvm-head .gvm-copy {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  font-size: 20px;
}
.gvm-wrap {
  position: relative;
  max-width: 1120px;
  margin: -90px auto 0;
}
.gvm-after {
  text-align: center;
  padding-block: 36px 72px;
  font-size: 20px;
}

/* ---------- 手機：展開條 ---------- */
.gvm-acc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.gvm-s {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #2a2a28;
  color: #fff;
  height: 75px;
  transition: height 0.55s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.gvm-s.gvm-on {
  height: 236px;
}
.gvm-s img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.5s;
}
.gvm-s:not(.gvm-on) img {
  filter: brightness(0.78);
}
.gvm-s::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.55)
  );
  pointer-events: none;
}
.gvm-s-h {
  all: unset;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 75px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 18px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.gvm-s-h:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}
.gvm-plus {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  flex: 0 0 auto;
  transition: opacity 0.3s;
}
.gvm-plus::before,
.gvm-plus::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #1f2a26;
  border-radius: 1px;
}
.gvm-plus::after {
  transform: rotate(90deg);
}
.gvm-s.gvm-on .gvm-plus {
  opacity: 0;
}
.gvm-s-b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 18px 16px;
  display: grid;
  gap: 2px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.35s,
    transform 0.45s;
}
.gvm-s.gvm-on .gvm-s-b {
  opacity: 1;
  transform: none;
  transition-delay: 0.2s;
}
.gvm-s-b .gvm-try {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.gvm-s-b .gvm-line {
  font-size: 13.5px;
  opacity: 0.92;
}
.gvm-rm {
  justify-self: start;
  margin-top: 8px;
  background: none;
  border: 0;
  padding: 0 0 1px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #fff;
}
.gvm-rm:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* 手機 Read more：深綠面板從畫面底部往上滑出，後面壓一層暗 */
.gvm-scrim {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(10, 20, 16, 0.5);
  opacity: 0;
  transition: opacity 0.35s;
}
.gvm-scrim.gvm-show {
  opacity: 1;
}
.gvm-ov {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  max-height: 88svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--deep);
  color: #fff;
  border-radius: 20px 20px 0 0;
  padding: 14px max(28px, env(safe-area-inset-right, 0px))
    calc(32px + env(safe-area-inset-bottom, 0px))
    max(28px, env(safe-area-inset-left, 0px));
  display: grid;
  gap: 12px;
  align-content: start;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gvm-ov.gvm-show {
  transform: none;
}
.gvm-grab {
  justify-self: center;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  margin-bottom: 14px;
}
.gvm-ov h3 {
  font-size: 20px;
}
.gvm-ov .gvm-try {
  font-size: 15px;
  font-weight: 700;
  margin-top: 4px;
}
.gvm-ov .gvm-line {
  font-size: 14px;
  opacity: 0.9;
  margin-top: -6px;
}
.gvm-ov img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 10px;
  margin: 14px 0 8px;
  display: block;
}
.gvm-txt {
  display: grid;
  gap: 18px;
  margin: 0;
}
.gvm-txt dt {
  font-size: 12px;
  letter-spacing: 0.1em;
  opacity: 0.75;
  margin-bottom: 2px;
}
.gvm-txt dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.9;
}
.gvm-close {
  justify-self: center;
  margin-top: 20px;
  background: none;
  border: 1px solid #fff;
  color: #fff;
  padding: 8px 52px;
  font-size: 15px;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.gvm-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------- 桌機：上排分頁＋大面板 ---------- */
.gvm-desk {
  display: none;
}
@media (min-width: 760px) {
  .gvm-desk {
    display: block;
  }
}
@media (min-width: 760px) {
  .gvm-wave {
    height: 64px;
  }
  .gvm-head {
    padding-block: 56px 150px;
  }
  .gvm-head h2 {
    font-weight: 500;
  }
  .gvm-wrap {
    margin-top: -128px;
  }
  .gvm-acc,
  .gvm-ov,
  .gvm-scrim {
    display: none !important;
  }
  /* 桌機：五條直條並排，打開的那條約兩倍寬；照片保持明亮 */
  .gvm-dwrap {
    position: relative;
  }
  .gvm-dstrips {
    display: flex;
    gap: 8px;
    height: min(560px, 70vh);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .gvm-ds {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    background: #2a2a28;
    color: #fff;
    cursor: pointer;
    transition: flex-grow 0.6s cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  .gvm-ds.gvm-on {
    flex-grow: 2;
    cursor: default;
  }
  .gvm-ds img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    transition:
      transform 1s ease,
      filter 0.5s;
  }
  .gvm-ds:not(.gvm-on) img {
    filter: brightness(0.82);
  }
  .gvm-ds.gvm-on img {
    transform: none;
  }
  .gvm-ds::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.05) 40%,
      rgba(0, 0, 0, 0.5)
    );
    pointer-events: none;
  }
  .gvm-ds-h {
    all: unset;
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
  }
  .gvm-ds-h:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -5px;
  }
  .gvm-ds-t {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    margin: 0;
  }
  .gvm-ds-b .gvm-try {
    font-size: 26px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  }
  .gvm-ds-b .gvm-line {
    font-size: 14.5px;
    font-weight: 300;
    opacity: 0.92;
  }
  .gvm-ds-b .gvm-rm {
    margin-top: 14px;
    font-weight: 300;
  }

  /* 桌機 Read more：深綠覆蓋層直接蓋在五條上，後面的照片隱約可見 */
  .gvm-dov {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    min-height: 100%;
    background: rgba(19, 56, 43, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 56px;
    align-items: start;
    padding: 56px 96px 56px 56px;
    opacity: 0;
    transition: opacity 0.4s;
  }
  .gvm-dov.gvm-show {
    opacity: 1;
  }
  .gvm-dov img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    max-width: 100%;
  }
  .gvm-dov .gvm-dx-t {
    display: grid;
    gap: 4px;
  }
  .gvm-dov h3 {
    font-size: 22px;
    font-weight: 500;
  }
  .gvm-dov .gvm-try {
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
  }
  .gvm-dov .gvm-line {
    font-size: 15px;
    opacity: 0.85;
  }
  .gvm-dov .gvm-txt {
    margin-top: 22px;
    gap: 18px;
    max-width: 38em;
  }
  .gvm-dov .gvm-txt dt {
    font-size: 12px;
    opacity: 0.7;
  }
  .gvm-dov .gvm-txt dd {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.95;
  }
  /* Read more 覆蓋層（D1）：高度固定等於五條直條；三行標題和照片同一區（左），內文在右，放不下就在右欄內捲動 */
  .gvm-dov.gvm-lay-d1 {
    top: 0;
    bottom: 0;
    min-height: 0;
    padding: 0;
    gap: 0;
    align-items: stretch;
    overflow: hidden;
    grid-template-columns: 40% minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto;
  }
  .gvm-dov.gvm-lay-d1 .gvm-dx-t {
    display: contents;
  }
  .gvm-dov.gvm-lay-d1 img {
    grid-column: 1;
    aspect-ratio: auto;
    height: 100%;
    width: 100%;
    min-height: 0;
  }
  .gvm-dov.gvm-lay-d1 h3,
  .gvm-dov.gvm-lay-d1 .gvm-try,
  .gvm-dov.gvm-lay-d1 .gvm-line {
    grid-column: 1;
    position: relative;
    z-index: 2;
    padding: 0 40px;
    margin: 0;
  }
  .gvm-dov.gvm-lay-d1 h3 {
    grid-row: 2;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.28em;
    opacity: 0.9;
  }
  .gvm-dov.gvm-lay-d1 .gvm-try {
    grid-row: 3;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
    padding-top: 8px;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .gvm-dov.gvm-lay-d1 .gvm-line {
    grid-row: 4;
    font-size: 14.5px;
    font-weight: 300;
    padding-top: 4px;
    padding-bottom: 40px;
    opacity: 0.9;
  }
  .gvm-dov.gvm-lay-d1 .gvm-txt {
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: center;
    max-height: 100%;
    overflow-y: auto;
    margin: 0;
    padding: 56px 104px 56px 56px;
    max-width: none;
  }
  .gvm-dov.gvm-lay-d1 .gvm-txt dd {
    font-size: 14.5px;
    line-height: 1.9;
  }
  /* D1：照片撐滿左欄，標題疊在照片下半部的暗色漸層上 */
  .gvm-dov.gvm-lay-d1 img {
    grid-row: 1 / 5;
  }
  .gvm-dov.gvm-lay-d1::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / 5;
    z-index: 1;
    background: linear-gradient(
      180deg,
      rgba(10, 26, 19, 0) 35%,
      rgba(10, 26, 19, 0.82) 100%
    );
    pointer-events: none;
  }
  .gvm-dclose {
    all: unset;
    position: absolute;
    top: 22px;
    right: 22px;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }
  .gvm-dclose::before,
  .gvm-dclose::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 50%;
    height: 1.5px;
    background: #fff;
    transform: rotate(45deg);
  }
  .gvm-dclose::after {
    transform: rotate(-45deg);
  }
  .gvm-dclose:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
  /* 覆蓋層打開時，只留五條的照片隱約透出，標題、＋、文字都收起來，不跟內文打架 */
  .gvm-ds-t,
  .gvm-ds .gvm-plus {
    transition:
      opacity 0.3s,
      padding 0.5s;
  }
  .gvm-dwrap.gvm-ovon .gvm-ds-t,
  .gvm-dwrap.gvm-ovon .gvm-ds .gvm-plus,
  .gvm-dwrap.gvm-ovon .gvm-ds-b {
    opacity: 0 !important;
    transition-delay: 0s;
  }
  .gvm-dwrap.gvm-ovon .gvm-ds img {
    filter: saturate(0.7) brightness(0.85);
  }
}

/* ===== 覆蓋層切頁 ===== */
.gvm-pg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.gvm-pg button {
  all: unset;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  transition:
    background 0.25s,
    border-color 0.25s;
}
.gvm-pg button:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}
.gvm-pg button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.gvm-pg svg {
  width: 11px;
  height: 18px;
  stroke: #fff;
  stroke-width: 1.8;
  fill: none;
}
.gvm-pgn {
  font-size: 13px;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
  min-width: 3.6em;
  text-align: center;
}
.gvm-pgn b {
  font-weight: 500;
}
.gvm-ov .gvm-pg {
  margin-top: 26px;
}
.gvm-ov .gvm-close {
  margin-top: 16px;
}
.gvm-ov > h3,
.gvm-ov > .gvm-try,
.gvm-ov > .gvm-line,
.gvm-ov > img,
.gvm-ov > .gvm-txt {
  transition: opacity 0.22s;
}
.gvm-ov.gvm-swap > h3,
.gvm-ov.gvm-swap > .gvm-try,
.gvm-ov.gvm-swap > .gvm-line,
.gvm-ov.gvm-swap > img,
.gvm-ov.gvm-swap > .gvm-txt {
  opacity: 0;
}
@media (min-width: 760px) {
  .gvm-dov.gvm-lay-d1 .gvm-txt {
    grid-row: 1 / 4;
    padding-bottom: 16px;
  }
  .gvm-dov.gvm-lay-d1 .gvm-pg {
    grid-column: 2;
    grid-row: 4;
    align-self: end;
    padding: 0 104px 34px 56px;
    justify-content: center;
  }
  .gvm-dov.gvm-lay-d1 img,
  .gvm-dov.gvm-lay-d1 h3,
  .gvm-dov.gvm-lay-d1 .gvm-try,
  .gvm-dov.gvm-lay-d1 .gvm-line,
  .gvm-dov.gvm-lay-d1 .gvm-txt {
    transition: opacity 0.22s;
  }
}

/* ===== 手機面板：佔畫面 90%，照片＋疊字標題在上，內文在中間捲動，切頁與關閉固定在底部 ===== */
.gvm-ov {
  height: 90svh;
  max-height: none;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(19, 56, 43, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.gvm-ovh {
  position: relative;
  flex: 0 0 auto;
  height: min(40svh, 320px);
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: #1d2a24;
}
.gvm-ovh img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
}
.gvm-ovh::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 26, 19, 0.25) 0%,
    rgba(10, 26, 19, 0) 28%,
    rgba(10, 26, 19, 0) 42%,
    rgba(10, 26, 19, 0.82) 100%
  );
  pointer-events: none;
}
.gvm-ovh .gvm-grab {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 50%;
  margin: 0 0 0 -20px;
  background: rgba(255, 255, 255, 0.75);
}
.gvm-tt {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 24px 20px;
  display: grid;
  gap: 2px;
}
.gvm-tt h3 {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.28em;
  opacity: 0.92;
}
.gvm-ov .gvm-tt .gvm-try {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 4px;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.gvm-ov .gvm-tt .gvm-line {
  font-size: 14px;
  font-weight: 300;
  opacity: 0.9;
  margin-top: 0;
}
.gvm-ovb {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 24px 20px;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 calc(100% - 28px),
    transparent
  );
  mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
}
.gvm-ovb .gvm-txt dd {
  font-weight: 300;
}
.gvm-ovf {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 18px calc(14px + env(safe-area-inset-bottom, 0px));
}
.gvm-ov .gvm-ovf .gvm-pg {
  margin: 0;
}
.gvm-ov .gvm-ovf .gvm-close {
  margin: 0;
  justify-self: end;
  padding: 6px 18px;
  font-size: 13px;
  letter-spacing: 0.16em;
}
.gvm-ovh img,
.gvm-tt,
.gvm-ovb {
  transition: opacity 0.22s;
}

/* ===== 調整：桌機切頁放左欄標題下，右欄不出現捲軸；手機切頁放照片上，關閉做成整條 ===== */
@media (min-width: 760px) {
  .gvm-dov.gvm-lay-d1 {
    grid-template-rows: minmax(0, 1fr) auto auto auto auto;
  }
  .gvm-dov.gvm-lay-d1 img,
  .gvm-dov.gvm-lay-d1::before {
    grid-row: 1 / 6;
  }
  .gvm-dov.gvm-lay-d1 .gvm-line {
    padding-bottom: 20px;
  }
  .gvm-dov.gvm-lay-d1 .gvm-pg {
    grid-column: 1;
    grid-row: 5;
    position: relative;
    z-index: 2;
    justify-content: flex-start;
    align-self: auto;
    padding: 0 40px 36px;
  }
  .gvm-dov.gvm-lay-d1 .gvm-txt {
    grid-row: 1 / 6;
    overflow: hidden;
    padding: 52px 96px 52px 56px;
    padding-bottom: 52px;
  }
}
.gvm-ov .gvm-tt .gvm-pg {
  justify-content: flex-start;
  gap: 14px;
  margin-top: 14px;
}
.gvm-ov .gvm-tt .gvm-pg button {
  width: 32px;
  height: 32px;
}
.gvm-ovh {
  height: min(46svh, 360px);
}
@media (max-height: 700px) {
  .gvm-ovh {
    height: 42svh;
  }
}
.gvm-ovf {
  display: block;
  padding: 10px 20px calc(14px + env(safe-area-inset-bottom, 0px));
}
.gvm-ovf {
  text-align: center;
}
.gvm-ov .gvm-ovf .gvm-close {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 8px 40px 8px 44px;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 0.3em;
  border-color: rgba(255, 255, 255, 0.7);
}

/* 標題固定高度：項目名稱永遠在同一個位置，建議換成兩行時只往下長，不會讓標題跳動 */
@media (min-width: 760px) {
  /* 標題固定在 55%，切頁固定貼底；中間那格吸收建議換行，兩者都不跳 */
  .gvm-dov.gvm-lay-d1 {
    grid-template-rows: 59% auto auto auto minmax(0, 1fr) auto;
  }
  .gvm-dov.gvm-lay-d1 img,
  .gvm-dov.gvm-lay-d1::before,
  .gvm-dov.gvm-lay-d1 .gvm-txt {
    grid-row: 1 / 7;
  }
  .gvm-dov.gvm-lay-d1 h3 {
    grid-row: 2;
    align-self: start;
  }
  .gvm-dov.gvm-lay-d1 .gvm-try {
    grid-row: 3;
  }
  .gvm-dov.gvm-lay-d1 .gvm-line {
    grid-row: 4;
  }
  /* 切頁直接釘在左下角，不參與排版，文字再長也推不動它 */
  .gvm-dov.gvm-lay-d1 .gvm-pg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40%;
    padding: 0 40px 36px;
    z-index: 3;
  }
  .gvm-dov.gvm-lay-d1 .gvm-try {
    font-size: clamp(18px, 1.75vw, 22px);
  }
}

/* 打開的直條：建議文字只能排在標題下方，不會往上蓋到標題；字級跟著螢幕寬度縮放 */
@media (min-width: 760px) {
  .gvm-ds-b .gvm-try {
    font-size: clamp(17px, 1.75vw, 22px);
    text-wrap: pretty;
  }
  .gvm-ds-b .gvm-line {
    font-size: clamp(13px, 1.15vw, 14.5px);
  }
}
@media (min-width: 760px) and (max-width: 1100px) {
  .gvm-ds.gvm-on {
    flex-grow: 2.6;
  }
}

/* ===== 直條：名稱在 ＋ 號正上方；打開時文字從名稱下方拉開，名稱跟著往上移 ===== */
@media (min-width: 760px) {
  .gvm-ds-c {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    pointer-events: none;
    transition: padding 0.5s;
  }
  .gvm-ds.gvm-on .gvm-ds-c {
    align-items: flex-start;
    padding: 0 36px;
  }
  .gvm-ds .gvm-ds-t {
    position: static;
    transform: none;
    padding: 0;
    text-align: inherit;
    transition: none;
  }
  .gvm-ds.gvm-on .gvm-ds-t {
    padding: 0;
  }
  .gvm-ds .gvm-ds-b {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: none;
    transition:
      grid-template-rows 0.55s cubic-bezier(0.3, 0.7, 0.2, 1),
      opacity 0.35s;
    pointer-events: none;
    align-self: stretch;
  }
  .gvm-ds.gvm-on .gvm-ds-b {
    grid-template-rows: 1fr;
    opacity: 1;
    transition-delay: 0.05s, 0.2s;
    pointer-events: auto;
  }
  .gvm-ds-b > div {
    overflow: hidden;
    min-height: 0;
    display: grid;
    gap: 4px;
    padding-top: 14px;
  }
  .gvm-ds .gvm-plus {
    position: relative;
    left: auto;
    bottom: auto;
    margin: 16px 0 0;
    height: 26px;
    transition:
      opacity 0.3s,
      height 0.4s,
      margin 0.4s;
  }
  .gvm-ds.gvm-on .gvm-plus {
    opacity: 0;
    height: 0;
    margin-top: 0;
  }
}
@media (min-width: 760px) and (max-width: 1100px) {
  .gvm-ds.gvm-on .gvm-ds-c {
    padding: 0 28px;
  }
}

/* 手機面板：照片和內文一起捲，只有關閉固定在底部；捲軸隱藏 */
.gvm-ovs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 20px 20px 0 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 calc(100% - 28px),
    transparent
  );
  mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
}
.gvm-ovs::-webkit-scrollbar {
  width: 4px;
}
.gvm-ovs::-webkit-scrollbar-track {
  background: transparent;
}
.gvm-ovs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
}
.gvm-ovs .gvm-ovb {
  overflow: visible;
  min-height: auto;
  flex: none;
  -webkit-mask-image: none;
  mask-image: none;
  padding-bottom: 36px;
}

/* 切頁轉場：照片交叉淡化＋微縮放，文字錯開浮上 */
/* 選擇器要比照片原本的 transition 規則更具體，才不會被蓋掉 */
.gvm-dov.gvm-lay-d1 img.gvm-xf,
.gvm-ovh img.gvm-xf {
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 0.9s ease,
    transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  position: relative;
  z-index: 0;
}
.gvm-ovh img.gvm-xf {
  position: absolute;
  inset: 0;
}
.gvm-dov.gvm-lay-d1 img.gvm-xf.gvm-in,
.gvm-ovh img.gvm-xf.gvm-in {
  opacity: 1;
  transform: none;
}
#gvm-dvT,
#gvm-dvTry,
#gvm-dvLine,
#gvm-ovT,
#gvm-ovTry,
#gvm-ovLine {
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#gvm-dvTry,
#gvm-ovTry {
  transition-delay: 0.06s;
}
#gvm-dvLine,
#gvm-ovLine {
  transition-delay: 0.12s;
}
.gvm-tout {
  opacity: 0 !important;
  transform: translateY(8px);
  transition-delay: 0s !important;
  transition-duration: 0.18s !important;
}

/* 照片放進一個會裁切的框裡，切頁時放大的新照片不會超出框外、露出一條線 */
@media (min-width: 760px) {
  .gvm-dov.gvm-lay-d1 .gvm-dph {
    grid-column: 1;
    grid-row: 1 / 7;
    position: relative;
    overflow: hidden;
    min-height: 0;
  }
  .gvm-dov.gvm-lay-d1 .gvm-dph img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-area: auto;
  }
}

/* ===== 覆蓋層改用 au 沙色 #D2C8B1：底色變淺，右欄文字與 ✕ 改深色；壓在照片上的標題組維持白字 ===== */
.gvm {
  --au-sand: #d2c8b1;
  --au-ink: #353535;
  --au-sub: #353535;
  --au-line: #636567;
}
@media (min-width: 760px) {
  .gvm-dov {
    background: rgba(210, 200, 177, 0.9);
    color: var(--au-ink);
  }
  .gvm-dov .gvm-txt dt {
    color: var(--au-sub);
    opacity: 1;
  }
  .gvm-dov .gvm-txt dd {
    color: var(--au-ink);
  }
  .gvm-dov.gvm-lay-d1 h3,
  .gvm-dov.gvm-lay-d1 .gvm-try,
  .gvm-dov.gvm-lay-d1 .gvm-line {
    color: #fff;
  }
  .gvm-dov .gvm-pg {
    color: #fff;
  }
  .gvm-dclose::before,
  .gvm-dclose::after {
    background: var(--au-line);
  }
  .gvm-dclose:focus-visible {
    outline-color: var(--au-ink);
  }
}

/* 手機面板（切頁版）：沙色 90%＋模糊；照片上的標題與切頁維持白色，下方內文與關閉改深色 */
.gvm-ov {
  background: rgba(210, 200, 177, 0.9);
  color: var(--au-ink);
}
.gvm-ovb .gvm-txt dt {
  color: var(--au-sub);
  opacity: 1;
}
.gvm-ovb .gvm-txt dd {
  color: var(--au-ink);
}
.gvm-ov .gvm-tt,
.gvm-ov .gvm-tt .gvm-line {
  color: #fff;
}
.gvm-ov .gvm-ovf .gvm-close {
  border-color: var(--au-line);
  color: var(--au-ink);
}
.gvm-ov .gvm-ovf .gvm-close:focus-visible {
  outline-color: var(--au-ink);
}
.gvm-ovs {
  scrollbar-color: rgba(99, 101, 103, 0.35) transparent;
}
.gvm-ovs::-webkit-scrollbar-thumb {
  background: rgba(99, 101, 103, 0.35);
}

/* 小標：同樣用 #353535，以 12px＋寬字距和內文拉開層次 */
.gvm-dov .gvm-txt dt,
.gvm-ov .gvm-txt dt {
  font-size: 12px;
  letter-spacing: 0.2em;
}
.gvm-ov .gvm-txt dd {
  font-weight: 300;
}
/* Read more 參考資料：單行「參考資料｜引用」，字級固定、不參與 fitTxt 縮字 */
.gvm-ref {
  margin-top: 24px;
  opacity: 0.75;
}
.gvm-dov .gvm-txt .gvm-ref dd,
.gvm-ov .gvm-txt .gvm-ref dd {
  font-size: 12px;
  line-height: 1.7;
}
.gvm-ref a {
  color: inherit;
  text-decoration: underline;
  word-break: break-word;
}
/* 情境卡 Read more：小標（溫柔指引／了解更多），桌機＋手機共用
   JS（2026-1111-landing-final.js）的 tagHTML／panelHTML 會輸出 .gvm-tag／.gvm-blk／.gvm-ph，本段須先於 JS 上線
   注意：不可用 .gvm-sec 命名區塊，那是整個情境卡 section 的 class（帶 --mist 底色） */
.gvm-tag {
  display: inline-flex;
  align-items: center;
}
.gvm-tag b {
  padding: 3px 16px;
  border-radius: 999px;
  background: rgba(160, 120, 70, 0.16);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
/* 手機覆蓋層：溫柔指引移到下方內文區，照片上的 line 不再使用 */
.gvm-ov .gvm-line {
  display: none;
}
.gvm-txt .gvm-blk {
  display: grid;
  gap: 10px;
}
.gvm-txt .gvm-blk dt {
  font-size: inherit;
  letter-spacing: 0;
  opacity: 1;
  margin: 0;
}
@media (min-width: 760px) {
  /* D1 右欄：when → try → 分隔線 → 溫柔指引 → 了解更多 → 參考資料（左側照片只留 when＋try） */
  .gvm-dov.gvm-lay-d1 .gvm-line {
    display: none;
  }
  .gvm-dov.gvm-lay-d1 .gvm-txt {
    gap: 22px;
    align-content: start;
    padding-top: 40px;
    padding-bottom: 36px;
  }
  .gvm-dov.gvm-lay-d1 .gvm-ph {
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }
  .gvm-dov.gvm-lay-d1 .gvm-txt .gvm-ph dt {
    font-size: 13px;
    letter-spacing: 0.2em;
    opacity: 0.8;
    margin: 0;
  }
  .gvm-dov.gvm-lay-d1 .gvm-txt .gvm-ph dd {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 8px;
    letter-spacing: 0.06em;
  }
  .gvm-dov.gvm-lay-d1 .gvm-txt .gvm-ref {
    margin-top: -6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gvm * {
    transition: none !important;
  }
}

/* 4. 你剛剛吸了一口氣 */
.gv1111-breath {
  padding: 120px 0 110px;
}
.gv1111-breath__inner {
  max-width: 640px;
  font-size: 0.95em;
}

/* 5. 555 微呼吸 */
.gv1111-start {
  text-align: center;
  padding: 90px 0 0;
}
.gv1111-start__lead {
  font-size: clamp(1.3em, 2.4vw, 2em);
  color: var(--gv-green-80);
  line-height: 1.7;
  margin: 0 0 50px;
  letter-spacing: 0.1em;
}
.gv1111-start__nose {
  width: min(280px, 60vw);
  margin: 0 auto -150px;
  position: relative;
  z-index: 1;
}
/* S5 鼻子圖＋儀式區：淡入同時往上飄（reduced-motion 時 JS 不加 .gv1111-reveal，不會觸發） */
.gv1111-start__nose.gv1111-reveal,
.gv1111-ritual .gv1111-reveal {
  transform: translate3d(0, 40px, 0);
  transition:
    opacity 0.9s ease-out,
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gv1111-start__nose.gv1111-reveal.is-revealed,
.gv1111-ritual .gv1111-reveal.is-revealed {
  transform: none;
}
.gv1111-ritual {
  padding: 190px 0 80px;
  text-align: center;
}
.gv1111-ritual__lead {
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1.9;
  margin: 0 0 40px;
}
.gv1111-ritual__title {
  margin: 0 0 48px;
}
.gv1111-ritual__title img {
  width: min(560px, 80vw);
  margin: 0 auto;
}
.gv1111-ritual__text {
  max-width: 780px;
  margin: 0 auto;
  font-size: 0.9em;
}

/* 步驟卡 */
.gv1111-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
  text-align: center;
}
.gv1111-step {
  background: rgba(244, 241, 234, 0.9);
  color: var(--gv-green-80);
  padding: 0 28px 32px;
  min-height: 340px;
}
.gv1111-step__tag {
  display: inline-block;
  background: #fff;
  color: var(--gv-gray);
  font-weight: 700;
  font-size: 1.2em;
  padding: 2px 26px;
  border-radius: 999px;
  transform: translateY(-50%);
}
.gv1111-step__title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px;
}
.gv1111-step__desc {
  font-size: 16px;
  margin: 0 0 16px;
}
.gv1111-step__media {
  aspect-ratio: 4 / 3;
  background: var(--gv-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gv-gray);
  font-size: 0.85em;
}
/* 5.5 呼吸引導影片：桌機 16:9、手機 9:16，先佔好高度避免載入時版面跳動 */
.gv1111-loop-video {
  margin: 0;
  line-height: 0;
  background: var(--gv-beige);
}
.gv1111-loop-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 6. 一如往常 */
.gv1111-story {
  padding: 110px 0;
}
.gv1111-story__inner {
  font-size: 0.92em;
  line-height: 1.8;
}
.gv1111-story .gv1111__h2 {
  line-height: 1.7;
  margin-bottom: 1.2em;
}

/* 7. 過去九年：沿用 2022 gv1111.css／2025 頁的 .section.slide 輪播樣式，只抽出輪播規則並以 .gv1111-years 限定範圍
   （原 gv1111.css 含 body、img、.btn.white、fancybox 等全域規則，不整份引入） */
.gv1111-bands {
  height: 120px;
  background: linear-gradient(
    var(--gv-green, #002d18) 0 66%,
    var(--gv-green-80, #3b5647) 66%
  );
}
.gv1111-years.section.slide {
  padding: 24px 0 48px;
  overflow: hidden;
}
.gv1111-years .slick-track {
  display: flex !important;
}
.gv1111-years .slick-slide {
  height: auto;
}
.gv1111-years .slick-initialized .slick-slide {
  display: flex;
}
.gv1111-years .slick-list {
  overflow: inherit !important;
}
.gv1111-years .slider .col-sm-6 {
  display: flex;
  padding: 0 10px;
}
.gv1111-years .slider .inner {
  display: inline-block;
  width: 45%;
  padding: 20px;
  min-height: 520px;
}
.gv1111-years .slider .bg-img {
  display: inline-block;
  width: 55%;
  height: 520px;
  background-position: center;
  background-size: cover;
}
.gv1111-years .slider .bg-img.five {
  background-image: url(https://cdn.greenvines.com.tw/shopline/2021-rebrand/landing-page/2022-1111/images/s2-p05.jpg);
}
.gv1111-years .slider .bg-img.four {
  background-image: url(https://cdn.greenvines.com.tw/shopline/2021-rebrand/landing-page/2022-1111/images/s2-p04.jpg);
}
.gv1111-years .slider .bg-img.three {
  background-image: url(https://cdn.greenvines.com.tw/shopline/2021-rebrand/landing-page/2022-1111/images/s2-p03.jpg);
}
.gv1111-years .slider .bg-img.two {
  background-image: url(https://cdn.greenvines.com.tw/shopline/2021-rebrand/landing-page/2022-1111/images/s2-p02.jpg);
}
.gv1111-years .slider .bg-img.one {
  background-image: url(https://cdn.greenvines.com.tw/shopline/2021-rebrand/landing-page/2022-1111/images/s2-p01.jpg);
}
.gv1111-years .slider .bg-img.sev {
  background-image: url(https://gvcdn.s3-ap-northeast-1.amazonaws.com/shopline/2021-rebrand/landing-page/2024-1111/images/s4-p02.png);
}
.gv1111-years .slider .bg-img.six {
  background-image: url(https://gvcdn.s3-ap-northeast-1.amazonaws.com/shopline/2021-rebrand/landing-page/2024-1111/images/s4-p01.png);
}
.gv1111-years .slider .bg-img.eig {
  background-image: url(https://gvcdn.s3-ap-northeast-1.amazonaws.com/shopline/2021-rebrand/landing-page/2025-1111/s8-p01.jpg);
}
.gv1111-years .slider .bg-img.nin {
  background-image: url(https://gvcdn.s3-ap-northeast-1.amazonaws.com/shopline/2021-rebrand/landing-page/2025-1111/kv.jpg);
}
.gv1111-years h3 {
  font-size: 30px;
  line-height: 1.5;
}
.gv1111-years .inner p {
  font-size: 20px;
  line-height: 28px;
}
.gv1111-years .mobile-slider .col-sm-12 {
  flex-direction: column;
}
.gv1111-years .mobile-slider img {
  display: block;
  width: 100%;
  aspect-ratio: 1290 / 900; /* 統一成多數圖片的比例（2025 kv 為寬版 1920×750），超出部分裁切 */
  object-fit: cover;
}
.gv1111-years .mobile-slider .inner {
  padding: 20px;
  min-height: 300px;
}
.gv1111-years .carousel .carousel-control-wrap {
  display: flex;
  justify-content: space-between;
  font-size: 30px;
}
.gv1111-years .carousel .carousel-control-wrap a {
  cursor: pointer;
  color: var(--gv-green, #002d18);
}
.gv1111-years .carousel .carousel-control-wrap span.rotate {
  display: block;
  transform: rotate(180deg);
}

/* 8. CTA */
.gv1111-cta {
  min-height: min(94vw, 600px);
  display: flex;
  align-items: center;
  text-align: center;
}
.gv1111-cta .gv1111__h2 {
  font-weight: 500;
  line-height: 1.8;
}
.gv1111-cta__btn {
  display: inline-block;
  background: #fff;
  color: var(--gv-green);
  padding: 8px 20px;
  font-weight: 700;
  text-decoration: none;
  margin-top: 24px;
}
.gv1111-cta__btn:hover {
  background: var(--gv-cream);
  color: var(--gv-green);
  text-decoration: none;
}

/* Mobile */
@media (max-width: 768px) {
  .gv1111__wrap {
    margin: 40px auto;
  }
  .gv1111__h2,
  .gvm-head h2 {
    font-size: 30px;
  }
  .gv1111__p br {
    display: none;
  }
  .gv1111__bg {
    background-image: var(--bg-m, var(--bg));
  }
  .gv1111-hero {
    min-height: 156vw;
  }
  .gv1111-breath,
  .gv1111-story {
    padding: 80px 0;
  }
  .gv1111-steps {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .gv1111-step {
    min-height: 0;
  }
  .gv1111-loop-video video {
    aspect-ratio: 9 / 16;
  }
}