/* ============================================================
   StopAsia PC 新版版面（2026-09-07 PC 改版；Feature::PC_NEW_DESIGN）
   排在 pc.css（元件外觀，複製自手機版）之後載入，只管「寬螢幕怎麼排」。
   使用者決定：內容區最大寬 1200px（英雄區與頂欄滿版）、橘色頂欄＋橫向主選單、
   行程頁左內容右預訂框（sticky）、下拉選單用瀏覽器原生選單（不用底部清單）、
   跳出視窗一律置中（不從底部滑出）。手機／平板不會載入這個檔案。
   ============================================================ */
body.pc-page,body.pc-legacy{font-size:16px;line-height:1.6}
.pc-wrap{max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.pc-page [hidden]{display:none !important}

/* ---------- 頂欄：logo、橫向主選單、語言、購物車 ---------- */
.topbar{display:block;height:auto;padding:0;box-shadow:0 2px 10px rgba(28,42,46,.12)}
.topbar-in{display:flex;align-items:center;gap:18px;height:64px}
.topbar .topbar-logo{flex:0 0 auto}
.topbar img{height:34px !important}
.topnav{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;margin-left:6px}
.topnav a{display:inline-flex;align-items:center;height:38px;padding:0 12px;border-radius:10px;color:#fff;font-size:14.5px;font-weight:500;white-space:nowrap;text-decoration:none;transition:background .15s ease}
.topnav a:hover{background:rgba(255,255,255,.16)}
.topnav a.on{background:rgba(255,255,255,.24);font-weight:700}
.topbar-actions{gap:10px;margin-left:auto;flex:0 0 auto}
.lang-dd>summary{font-size:13px;padding:8px 12px}
.lang{left:auto;right:0}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 12px;border-radius:999px;background:#fff;color:var(--saffron);font-size:13.5px;font-weight:400;text-decoration:none;transition:transform .12s ease,box-shadow .15s ease} /* 字重 700→400（2026-09-10 使用者：改細；網站只載入 400/500/700，400 就是最細的） */
.cart-btn:hover{box-shadow:0 4px 12px rgba(0,0,0,.18);transform:translateY(-1px)}
.cart-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cart-btn .cart-btn-txt{white-space:nowrap}
/* 數字泡泡（2026-09-10 使用者：改成綠色，並且要有呼吸動畫）。
   綠色用網站既有的 --lotus，跟章節開關、打勾同一個綠；白字在上面對比足夠。
   呼吸只做輕微縮放＋一圈淡綠的擴散，尺寸不變所以不會把旁邊的字推動；
   泡泡在沒有商品時帶 hidden（display:none），那時不會有動畫。 */
.cart-btn b{position:static;min-width:20px;height:20px;line-height:20px;padding:0 6px;border-radius:999px;background:var(--lotus);color:#fff;font-size:11.5px;text-align:center;animation:sa-cart-breathe 2.4s ease-in-out infinite}
/* 只放大、不要光暈：使用者是就手機那顆說的（光暈糊住後面的圖示），但同一天也講過
   「我不喜歡按鈕外的光暈效果」，所以 PC 這顆一併拿掉，兩邊的呼吸節奏保持一致。 */
@keyframes sa-cart-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){.cart-btn b{animation:none !important}}
.cart-btn b[hidden]{display:none}
/* 頂欄裡所有文字一律一般字重 400（2026-09-10 使用者：最上面那個 bar 裡的字體粗細都改成一般）：
   選單（含目前頁面的 .on）、語言鈕與下拉選單、購物車鈕與上面的數字。首頁、全部行程、行程頁、購物車、資訊頁、App 頁共用這個頂欄。 */
.topbar .topnav a,.topbar .topnav a.on,.topbar .lang-dd>summary,.topbar .lang a,.topbar .lang button,.topbar .lang .on,.topbar .cart-btn,.topbar .cart-btn b{font-weight:400}
/* 頂欄「我的行程清單」白底鈕的字與購物車圖示改深橘（2026-09-10 使用者指定）。
   行程頁（舊站頁面）會載入舊站 stylesheet.css，裡面 `a, a:visited, a:focus{color:#323232}` 權重 (0,1,1) 比 `.cart-btn` 高，
   購物車連結只要「已造訪」或點過取得焦點，字就變深灰、跟首頁長得不一樣（2026-09-10 使用者回報）；
   所以這裡用 .topbar a.cart-btn 連同 :visited／:focus 一起寫，權重壓過它。 */
.topbar a.cart-btn,.topbar a.cart-btn:link,.topbar a.cart-btn:visited,.topbar a.cart-btn:focus,.topbar a.cart-btn:hover{color:var(--laterite);outline:0}
/* 行程頁等舊站頁面的 body 字型是微軟正黑體，頂欄跟著變，同一顆「我的行程清單」在首頁與行程頁看起來一粗一細
   （2026-09-10 使用者：以首頁為準）。整個頂欄改用新版的字型堆疊，跟首頁完全一致。
   舊站 bootstrap.css 有一條 `*{font-family:微軟正黑體…}` 直接套在每個元素上，光改 .topbar 靠繼承傳不下去，
   所以要連 .topbar * 一起寫。 */
.pc-legacy .topbar,.pc-legacy .topbar *{font-family:var(--sans)}
@media (max-width:1180px){.topnav a{padding:0 9px;font-size:13.5px}.cart-btn .cart-btn-txt{display:none}}
/* ≤980px（直向 iPad）選單放不下 8 項改橫向捲動；右緣淡出提示還有東西可以滑（2026-09-08 評估平板走 PC 版時加） */
@media (max-width:980px){.topnav{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}.topnav::-webkit-scrollbar{display:none}}

/* ---------- 頁尾 ---------- */
.pc-footer{margin:56px 0 0;padding:36px 0 26px;border-top:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:13.5px;line-height:1.6}
.pc-footer-in{display:grid;grid-template-columns:340px minmax(0,1fr);gap:40px;align-items:start}
.pc-footer-brand img{display:block;height:34px;width:auto}
.pc-footer-brand p{margin:14px 0 0;max-width:32em}
.pc-footer-nav{display:flex;flex-wrap:wrap;gap:10px 24px;padding-top:6px}
.pc-footer-nav a{color:var(--ink);font-weight:500;font-size:14px;text-decoration:none}
.pc-footer-nav a:hover{color:var(--saffron)}
.pc-footer-copy{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px}
.pc-legacy .pc-footer{margin-top:48px}
/* 行程頁：卡片底邊到頁尾原本 71px（卡片 16＋格線內距 7＋頁尾 48），使用者 2026-09-10 要縮小一點，頁尾上邊距改 24 → 47px。只動行程頁。 */
.pc-legacy.product-product .pc-footer{margin-top:24px}

/* ---------- 付款提示條：容器內不再留手機的 16px 側邊 ---------- */
.pc-page .paylater{margin:16px 0 0}
.pc-page .paylater b{font-size:17px}
.pc-page .paylater small{font-size:13.5px}

/* ---------- 首頁元件（手機版寫在 home.blade.php 裡，PC 版集中在這裡） ---------- */
.pc-page .hero{position:relative;height:min(560px,62vh);min-height:420px;overflow:hidden;background:#2b2b2b}
.pc-page .hero img{width:100%;height:100%;object-fit:cover;display:block}
/* 首頁幻燈片：多張圖疊在同一格，pc.js 輪流加 .on；淡入淡出 .8s 與舊站 Camera 的 transPeriod 一樣 */
.pc-page .hero-slides{position:absolute;inset:0}
.pc-page .hero-slides img{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.pc-page .hero-slides img.on{opacity:1}
@media (prefers-reduced-motion:reduce){.pc-page .hero-slides img{transition:none}}
.pc-page .hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,8,.02) 20%,rgba(20,16,8,.74) 100%)}
.pc-page .hero-copy{position:absolute;left:0;right:0;bottom:72px;color:#fff}
.pc-page .hero-kicker{font-size:15px;letter-spacing:.06em;opacity:.92;margin:0 0 10px}
.pc-page .hero-title{font-weight:700;font-size:52px;line-height:1.12;margin:0 0 14px;letter-spacing:.01em;text-shadow:0 2px 24px rgba(0,0,0,.4);white-space:pre-line;text-wrap:balance;max-width:16em}
.pc-page .hero-title:lang(en){font-size:46px;letter-spacing:0}
.pc-page .hero-sub{margin:0;font-size:18px;line-height:1.55;opacity:.95;max-width:34em}

.pc-page .guide{display:grid;grid-template-columns:400px minmax(0,1fr);gap:28px;align-items:start;position:relative;z-index:2;margin-top:-56px}
.pc-page .guide-side{display:block}
.pc-page .guide-main{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 30px 26px;box-shadow:var(--shadow)}
.pc-page .guide-main .section-title{margin:0}
.pc-page .player{position:relative;display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;margin:0;background:var(--surface);border-radius:18px;padding:16px 18px 16px 16px;box-shadow:var(--shadow);text-decoration:none}
@keyframes sa-player-float{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}
@keyframes sa-player-lift{0%,100%{opacity:.05}50%{opacity:1}}
.pc-page .player{animation:sa-player-float 2.1s ease-in-out infinite}
.pc-page .player::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 12px 32px rgba(28,42,46,.22),0 4px 12px rgba(28,42,46,.13);opacity:.05;animation:sa-player-lift 2.1s ease-in-out infinite}
.pc-page .player.is-jelly{transform-origin:50% 0;animation:paylater-jelly .78s cubic-bezier(.33,.1,.28,1) forwards}
.pc-page .player.is-jelly::after{animation:none;opacity:0}
.pc-page .guide .paylater-slot{height:auto;transition:none}
.pc-page .guide .paylater-slot>.paylater{transform:none;opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){.pc-page .player,.pc-page .player.is-jelly{animation:none}.pc-page .player::after{display:none}}
.pc-page .player-icon{width:52px;height:52px;border-radius:12px}
.pc-page .player-text{display:grid;line-height:1.3;min-width:0}
.pc-page .player-now{font-size:12px;color:var(--lotus);font-weight:500}
.pc-page .player-text b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-page .player-next{font-size:12.5px;color:var(--muted)}
/* 換景點時整段文字先淡掉再換，避免字硬跳（2026-09-09） */
.pc-page .player-text{transition:opacity .18s ease}
.pc-page .player.is-swap .player-text{opacity:.2}
.pc-page .wave{display:flex;align-items:flex-end;gap:3px;height:28px}
.pc-page .wave i{display:block;width:3px;border-radius:2px;background:var(--saffron);height:30%;transform-origin:bottom}
.pc-page .wave i:nth-child(2){height:65%}.pc-page .wave i:nth-child(3){height:100%}.pc-page .wave i:nth-child(4){height:55%}.pc-page .wave i:nth-child(5){height:85%}.pc-page .wave i:nth-child(6){height:45%}.pc-page .wave i:nth-child(7){height:70%}
@media (prefers-reduced-motion:no-preference){
  .pc-page .wave i{animation:wave 1.1s ease-in-out infinite alternate}
  .pc-page .wave i:nth-child(2){animation-delay:.15s}.pc-page .wave i:nth-child(3){animation-delay:.3s}.pc-page .wave i:nth-child(4){animation-delay:.1s}.pc-page .wave i:nth-child(5){animation-delay:.25s}.pc-page .wave i:nth-child(6){animation-delay:.05s}.pc-page .wave i:nth-child(7){animation-delay:.2s}
  @keyframes wave{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
}
.pc-page .guide-lead{margin:14px 0 18px;font-size:16px;line-height:1.7;max-width:40em}
.pc-page .guide-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.pc-page .guide-facts div{background:var(--ground);border:1px solid var(--line);border-radius:14px;padding:14px 14px 12px}
.pc-page .guide-facts b{display:block;font-size:26px;line-height:1.1;color:var(--laterite);font-variant-numeric:tabular-nums}
.pc-page .guide-facts span{font-size:12.5px;color:var(--muted)}
.pc-page .guide-sites{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pc-page .guide-sites li{font-size:13px;padding:6px 12px;border-radius:999px;background:var(--stone)}
.pc-page .stores{display:flex;gap:10px}
.pc-page .store,.pc-page a.store{flex:1;text-align:center;padding:12px 8px;border-radius:12px;background:var(--ink);color:var(--ground);font-size:14px;font-weight:700;text-decoration:none;transition:transform .12s ease,background .15s ease}
.pc-page .store:hover{background:#2c3d42;transform:translateY(-1px)}
.pc-page .store small{display:block;font-weight:400;font-size:11.5px;opacity:.8}

.pc-page .promise{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:28px 0 0;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pc-page .promise>div{background:var(--surface);padding:18px 18px 18px 20px;display:flex;gap:12px;align-items:flex-start}
.pc-page .promise>div>div{min-width:0}
.pc-page .promise svg{width:24px;height:24px;flex:0 0 24px;stroke:var(--lotus);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.pc-page .promise b{display:block;font-size:15.5px;font-weight:700;line-height:1.3}
.pc-page .promise small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}
/* 四個承諾放在 .guide-side 左欄時排 2×2（2026-09-08，補齊左欄高度）；外框與間距沿用上面的 .promise */
.pc-page .guide-side .promise{grid-template-columns:1fr 1fr;margin:16px 0 0}
.pc-page .guide-side .promise>div{padding:16px 14px 16px 16px;gap:10px}
/* 2026-09-09 使用者說左欄還是矮一截：左欄改成撐滿整列高度（跟右邊 App 卡一樣高），
   承諾 2×2 吃掉剩餘高度、四格等高、底邊與右卡對齊；格內內容垂直置中。≤980px 單欄時沒有剩餘高度，等於不生效 */
.pc-page .guide-side{display:flex;flex-direction:column;align-self:stretch;min-height:0}
.pc-page .guide-side .promise{flex:1 1 auto;grid-auto-rows:1fr;min-height:0}
.pc-page .guide-side .promise>div{align-items:center}

.pc-page .section{padding:44px 0 0}
.pc-page .section-head{display:flex;align-items:flex-end;justify-content:space-between;padding:0 0 18px}
.pc-page .section-title{font-size:28px;line-height:1.2}
.pc-page .section-title small{font-size:14px;margin-top:6px}
.pc-page .more{font-size:14.5px;color:var(--lotus);font-weight:600;white-space:nowrap;padding-bottom:4px}
.pc-page .more:hover{color:var(--saffron)}

.pc-page .chips{display:flex;flex-wrap:wrap;gap:8px;overflow:visible;padding:0 0 18px;margin:0}
.pc-page .chip{padding:9px 16px;font-size:14px;cursor:pointer;transition:background .15s ease,color .15s ease}
.pc-page .chip:hover{background:var(--stone)}
.pc-page .chip[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.pc-page .chip[aria-pressed="true"]:hover{background:var(--ink)}
.pc-page .chips-sticky{position:sticky;top:64px;z-index:10;background:var(--ground);padding:14px 0}

/* 卡片格線：2026-09-09 使用者決定由四欄改三欄（1200px 容器下每張約 369px，原本四欄 271px 偏窄，
   行程名常被截成兩行）。≤820px（直向平板）再降成兩欄；原本的 ≤1100px 斷點與預設同為三欄，已移除 */
.pc-page .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:820px){.pc-page .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pc-page .tour{background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .16s ease,box-shadow .16s ease}
/* 行程卡片滑過去只讓照片放大，卡片本身不動也不換陰影（2026-09-10 使用者附影片：整張卡片跳動不好） */
.pc-page .tour:hover{transform:none}
.pc-page .tour[hidden]{display:none}
/* 2026-09-10 使用者：卡片圖片改成 16:9，而且不要裁切。原圖抽樣 25 張裡有 15 張本來就是 16:9（1.778／1.779），
   所以原本的 16/11 框才是在裁切；改成 16/9 之後這些圖是整張完整顯示，不是換一種裁法。
   縮圖也一起改成 560x315（見 MobileHomeData::thumb），否則 Thumb::cover 產圖時就先裁掉了。 */
.pc-page .tour-photo{position:relative;aspect-ratio:16/9;background:var(--stone);display:block;overflow:hidden}
.pc-page .tour-photo img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.pc-page .tour:hover .tour-photo img{transform:scale(1.04)}
.pc-page .stars{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:4px;background:rgba(28,42,46,.72);color:#fff;font-size:12px;font-weight:500;padding:4px 8px;border-radius:999px;backdrop-filter:blur(4px)}
.pc-page .stars svg{width:12px;height:12px;fill:#FFC53D}
.pc-page .app-ribbon{position:absolute;right:10px;top:10px;background:var(--saffron);color:#fff;font-size:11.5px;font-weight:700;padding:4px 8px;border-radius:6px}
.pc-page .paused .tour-photo::after{content:attr(data-paused);position:absolute;inset:0;display:grid;place-items:center;background:rgba(28,42,46,.55);color:#fff;font-size:16px;font-weight:400;letter-spacing:.3em;text-indent:.3em}
.pc-page .paused .tour-photo img{filter:grayscale(1)}
.pc-page .tour-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.pc-page .tour-name{font-weight:700;font-size:16px;line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-page .tour-meta{font-size:13px;color:var(--muted);margin:0}
/* 卡片簡介（2026-09-09 使用者要求；改三欄後卡片變寬、空間夠）：來源是後台的 Meta Tag Description，
   最多三行，超出以 … 收尾。價格列有 margin-top:auto，所以同一列的卡片價格仍會對齊底部 */
.pc-page .tour-intro{margin:2px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pc-page .tour-meta span+span::before{content:"・";margin:0 2px}
.pc-page .price-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto;padding-top:8px}
.pc-page .price{font-variant-numeric:tabular-nums;line-height:1}
.pc-page .price .cur{font-size:12px;color:var(--muted);margin-right:2px}
.pc-page .price .num{font-size:23px;font-weight:700;color:var(--laterite)}
.pc-page .price .unit{font-size:12px;color:var(--muted);margin-left:3px}
.pc-page .price .was{display:block;font-size:12px;color:var(--muted);text-decoration:line-through;margin-top:5px}
.pc-page .book,.pc-page a.book{padding:10px 16px;border-radius:10px;background:var(--saffron);color:#fff;font-weight:700;font-size:14px;text-decoration:none;transition:background .15s ease}
.pc-page .book:hover{background:#E36200}

.pc-page .list{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;margin:0;border-top:1px solid var(--line)}
.pc-page .row{grid-template-columns:120px 1fr;gap:16px;padding:14px 0}
.pc-page .row img,.pc-page .row .noimg{width:120px;height:92px;border-radius:12px}
.pc-page .row-photo{width:120px;height:92px;border-radius:12px}
.pc-page .row.paused .row-photo::after{font-size:12.5px}
.pc-page .row-name{font-size:15.5px}
.pc-page .row-meta{font-size:12.5px}
.pc-page .row-price .num{font-size:18px}
.pc-page .row:hover .row-name{color:var(--laterite)}
/* 清單列（首頁熱門行程等）滑過整個連結範圍時縮圖放大，跟卡片一致；.row-photo 本來就 overflow:hidden 所以放大不會溢出（2026-09-10 使用者要求） */
.pc-page .row img{transition:transform .3s ease}
.pc-page .row:hover img{transform:scale(1.06)}
.pc-page .btn-wide{display:table;width:auto;margin:22px auto 0;padding:13px 36px;border-radius:12px;font-size:15px;transition:background .15s ease,color .15s ease}
.pc-page .btn-wide:hover{background:var(--ink);color:var(--ground)}

.pc-page .steps{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pc-page .step{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.pc-page .step-n{font-size:40px;font-weight:700;line-height:1;color:var(--saffron)}
.pc-page .step b{display:block;font-size:17px;margin-bottom:4px}
.pc-page .step p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.6}

.pc-two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:44px 0 0}
.pc-page .app{margin:0;background:var(--saffron);color:#fff;border-radius:20px;padding:28px 28px 26px;position:relative;overflow:hidden;background-image:radial-gradient(circle at 84% 26%,rgba(255,255,255,.09) 0 32px,transparent 33px)}
.pc-page .app::after{content:"";position:absolute;right:-40px;bottom:-60px;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,.14)}
.pc-page .app::before{content:"";position:absolute;left:-34px;top:-48px;width:124px;height:124px;border-radius:50%;background:rgba(255,255,255,.10);pointer-events:none}
.pc-page .app-kicker{font-size:13.5px;opacity:.9;margin:0 0 4px}
/* 標題下方要有間距（2026-09-10 使用者）。原本 10px 是因為底下還有一段說明文字，
   那段同日移除之後標題就直接貼在清單上了；PC 字級較大，所以給 18px。 */
.pc-page .app h3{font-size:26px;margin:0 0 18px;line-height:1.2}
.pc-page .app p{margin:0 0 16px;font-size:15px;line-height:1.6;max-width:30em;opacity:.95;position:relative}
.pc-page .app ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:14.5px;position:relative}
.pc-page .app li{display:flex;gap:8px;align-items:center}
.pc-page .app li svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:0 0 16px}
.pc-page .app-more{position:relative;display:inline-block;margin:18px 0 0;padding:10px 18px;border-radius:10px;background:#fff;color:var(--laterite);font-weight:700;font-size:14px;text-decoration:none}
.pc-page .local{margin:0;padding:26px 28px;background:var(--lotus-soft);border-radius:20px;display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;align-content:start}
.pc-page .local h3{grid-column:1/-1;margin:0;font-size:24px}
.pc-page .local p{grid-column:1/-1;margin:-8px 0 2px;font-size:14.5px;color:var(--muted);line-height:1.6}
.pc-page .fact{font-variant-numeric:tabular-nums}
.pc-page .fact b{display:block;font-size:26px;font-weight:700;color:var(--lotus);line-height:1.1}
.pc-page .fact span{font-size:13px;color:var(--muted)}
@media (max-width:980px){
  .pc-page .guide{grid-template-columns:1fr;margin-top:24px}
  .pc-page .promise{grid-template-columns:1fr 1fr}
  .pc-page .list{grid-template-columns:1fr}
  .pc-two{grid-template-columns:1fr}
  .pc-page .hero-title{font-size:40px}
}

/* 全部行程頁 */
.pc-page .tours-head{padding:36px 0 0}
.pc-page .tours-head .section-title{font-size:32px}
.pc-page .tours-head .section-title small{margin-top:8px}
.pc-page .group{padding-top:36px}
.pc-page .group[hidden]{display:none}
.pc-page .group-title{margin:0 0 16px;font-size:22px;font-weight:700;display:flex;align-items:baseline;gap:10px}
.pc-page .group-title small{font-weight:400;font-size:13.5px;color:var(--muted)}

/* ---------- 舊站頁面（OpenCart）的 PC 版面 ---------- */
.pc-legacy #content{max-width:1200px;margin:0 auto !important;padding:8px 24px 0 !important;box-sizing:border-box}
.pc-legacy #container>.container>.row{margin:0}
.pc-legacy h1,.pc-legacy h1.style-1,.pc-legacy h1.view,.pc-legacy h1.style-2,.pc-legacy h1.checkout_H1{font-size:28px !important;margin:22px 0 16px !important}
.pc-legacy h1.Product_Title{max-width:1200px;margin:24px auto 6px !important;padding:0 24px !important;font-size:30px !important;box-sizing:border-box}
.pc-legacy h2{font-size:20px}
.pc-legacy .paylater{margin:0 0 6px !important}
.pc-legacy .paylater b{font-size:16px}
.pc-legacy input[type="text"],.pc-legacy input[type="email"],.pc-legacy input[type="password"],.pc-legacy input[type="tel"],.pc-legacy input[type="number"],.pc-legacy select,.pc-legacy textarea{font-size:15px !important}
.pc-legacy .box-container p,.pc-legacy .tab-content p,.pc-legacy .SA_article p,.pc-legacy .tab-content li,.pc-legacy .SA_Tour_DEST_Content li,.pc-legacy .tab-content ul,.pc-legacy .tab-content ol,.pc-legacy .SA_Tour_DEST_Content ul,.pc-legacy .SA_Tour_DEST_Content ol{font-size:15.5px !important}
/* 滑鼠：可點的東西都要有游標與 hover 回饋 */
.pc-legacy a.button:hover,.pc-legacy #button-cart:hover,.pc-legacy .infoNext a:hover,.pc-legacy #ButtonBlue a:hover,.pc-legacy .checkout .button-cont-right:hover,.pc-legacy .checkout a.button:hover{filter:brightness(1.06)}
.pc-legacy .sa-pick-btn,.pc-legacy .sa-pick-btn select,.pc-legacy .sa-pick-btn input[type="text"],.pc-legacy .tab-headingX,.pc-legacy .sa-im-app,.pc-legacy .sa-im-btns button,.sa-dialog-btns>*{cursor:pointer}
.pc-legacy .sa-optgroup-head:hover{background:#FFF9F3}
.pc-legacy .sa-pick-btn:hover{filter:brightness(.98)}

/* 資訊頁、結帳、帳號、訂單完成：內容不要拉到 1200 那麼寬，讀起來才舒服 */
.pc-legacy.information-information #content,.pc-legacy.checkout-success #content,.pc-legacy[class*="account-"] #content,.pc-legacy.error-not_found #content{max-width:900px}
.pc-legacy.checkout-checkout #content{max-width:860px}
.pc-legacy .box-container .num_section_box,.pc-legacy .box-container .num_section_box2,.pc-legacy .box-container .HowToWork_article,.pc-legacy .box-container .SA_article>div[style*="width:100%"]{padding:22px 24px 14px !important}
.pc-legacy .checkout-content{padding:22px 24px !important}
.pc-legacy .checkout-heading{padding:14px 0 10px !important}
.pc-legacy .sa-done{max-width:560px}

/* 行程頁：左內容、右預訂框（sticky） */
.pc-legacy.product-product{padding-bottom:0}
.pc-legacy .Mobile_Product_Page .PicFrame{margin:0 0 6px;width:auto !important}
.pc-legacy .flexslider,.pc-legacy .flexslider ul.slides,.pc-legacy .flexslider .slides li,.pc-legacy .flexslider .slides img,.pc-legacy .flexslider .flex-viewport,.pc-legacy .Mobile_Product_Page .PicFrame{border-radius:18px !important;overflow:hidden}
.pc-legacy .tabsBuy{margin:0 0 18px !important;padding:16px 18px 8px !important;border-radius:18px !important}
.pc-legacy .CartTopLeft_Mobile,.pc-legacy .CartTopLeft{margin:-16px 0 10px -18px !important}
.pc-legacy .product_stars_img_mobile,.pc-legacy .product_stars_img{border-radius:17px 0 0 0}
.pc-legacy .cart-top-Down_Bar{position:static;left:auto;right:auto;bottom:auto;z-index:auto;width:auto !important;margin:6px 0 8px !important;padding:14px 0 6px !important;border-top:1px solid var(--line);background:none !important;box-shadow:none !important}
.pc-legacy .cart-top-Down_Bar .price{flex:1 1 auto}
.pc-legacy .price-new_Down_Bar,.pc-legacy .product-info .price .price-new_Down_Bar{font-size:24px !important}
.pc-legacy .cart-top-Down_Bar #button-cart{min-width:168px}
.pc-legacy .tabs,.pc-legacy .heading_share{border-radius:18px !important;margin:0 0 16px !important}
.pc-legacy .tabs .tab-headingX,.pc-legacy .tabs .tab-heading{padding:18px 96px 18px 20px !important;font-size:18px !important}
.pc-legacy .tab-content,.pc-legacy .tab-content_notice{padding:14px 20px 20px !important}
.pc-legacy .tabs .tab-content_notice{padding:12px 20px 10px !important}
.pc-legacy .tab-content iframe{height:420px !important}
.pc-legacy .tab-content p.iframe_map,.pc-legacy .SA_Tour_DEST_Content p.iframe_map{margin:0 -20px 12px !important}
.pc-legacy .heading_share{aspect-ratio:21/9}
/* 圖片限高（2026-09-10 使用者：圖太高不方便閱讀；先選主圖 380、其餘 280，同日再改成其餘 220；地圖 iframe 維持 420）。
   一律「限高＋object-fit:cover 裁切」，寬度不變。左欄 744px 時：主圖輪播 505→380、App 橫幅 319→220、
   行程介紹第一張圖 390→220；小圈／大圈／外圈路線卡另外改成左圖右文（見下面那段）。主圖用固定高度（輪播每張都一樣高，
   flexslider 量到的高度才不會跟著每張圖的比例跳），其餘用 max-height（左欄變窄時照原比例自然更矮）。
   2026-09-11 使用者要求主圖那組改成固定 16:9（左欄 744px 時約 419px 高，原本是固定 380px）：
   長寬比給外框，圖片維持 object-fit:cover 鋪滿，所以不會被拉歪或壓扁，只是把超出的部分裁掉。
   .flex-viewport／ul.slides／li 要一起撐滿高度，不然 flexslider 會拿第一張圖的自然高度去量。 */
.pc-legacy #default_gallery .flexslider{aspect-ratio:16/9}
.pc-legacy #default_gallery .flexslider .flex-viewport,
.pc-legacy #default_gallery .flexslider ul.slides,
.pc-legacy #default_gallery .flexslider .slides li{height:100% !important}
.pc-legacy #default_gallery .flexslider .slides img{display:block;width:100% !important;height:100% !important;object-fit:cover;object-position:center}
.pc-legacy .heading_share{max-height:220px}
.pc-legacy img.first_img{max-height:220px !important;object-fit:cover;object-position:center}
/* 小圈／大圈／外圈路線預覽卡改成左圖右文（2026-09-10 使用者：文字壓在圖上、橫跨整張太寬不好看；三個版型中選定左圖右文）。
   pc.css 那套「照片鋪滿、文字疊上去」是手機版沿用來的，這裡整組蓋掉：左邊 42% 寬的縮圖（cover 裁切、最少 176px 高），
   右邊白底放說明文字（墨色、每行約 25 字、最多 4 行）與「詳細介紹」膠囊鈕靠右下；整張卡仍可點。 */
.pc-legacy .sa-teaser:has(.sa-teaser-pic){display:flex;align-items:stretch;gap:0;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;transition:border-color .15s ease,background .15s ease}
.pc-legacy .sa-teaser:has(.sa-teaser-pic):hover{border-color:#F3C89E;background:#FFFBF6}
.pc-legacy .sa-teaser:has(.sa-teaser-pic):active{background:var(--stone);filter:none}
.pc-legacy .sa-teaser:has(.sa-teaser-pic) .sa-teaser-pic{display:block;flex:0 0 42%;width:42%;height:auto;min-height:176px;max-height:none;aspect-ratio:auto;border-radius:0}
.pc-legacy .sa-teaser:has(.sa-teaser-pic) .sa-teaser-pic img{width:100% !important;height:100% !important;object-fit:cover !important;object-position:center}
.pc-legacy .sa-teaser:has(.sa-teaser-pic) .sa-teaser-body{position:static;flex:1 1 auto;min-width:0;justify-content:space-between;gap:12px;padding:16px 18px 14px;background:none}
.pc-legacy .sa-teaser:has(.sa-teaser-pic) .sa-teaser-txt{color:var(--ink) !important;font-size:14px !important;line-height:1.75 !important;text-shadow:none;-webkit-line-clamp:4}
/* 「詳細介紹」鈕：拿掉底下的橘色光暈與呼吸動畫（2026-09-10 使用者：改成白底後那層光暈很醜；三個方案中選定「實心橘底、無光暈」）。
   膠囊稍微放大到 PC 好點的尺寸，滑過整張卡片時變深橘；pc.css 那條 prefers-reduced-motion 的固定陰影也一併蓋掉。 */
.pc-legacy .sa-teaser:has(.sa-teaser-pic) .sa-teaser-cta{animation:none;box-shadow:none;margin-top:auto;padding:6px 13px;font-size:12.5px;transition:background .15s ease} /* margin-top:auto：沒有文字時按鈕也留在右下角 */
.pc-legacy .sa-teaser:has(.sa-teaser-pic):hover .sa-teaser-cta{background:var(--laterite)}
/* 「網友怎麼說」裡讀者上傳的照片（柏威夏那頁有一張 620×465）：同樣限高 220，但不裁切、寬度跟著縮，點開仍是原圖 */
.pc-legacy .comment-item-image img{max-height:220px;width:auto;max-width:100%}
.pc-legacy .heading_share .tab-headingX{padding:0 22px 4px !important;font-size:22px !important}
.pc-legacy .heading_share .tab-content{padding:0 22px 18px !important}
.pc-legacy .heading_share .WalShare .header-font,.pc-legacy .product-info .heading_share .tab-content .WalShare{font-size:14px !important}
.pc-legacy .tabs>p>img[src*="vehicle"]{border-radius:0 0 17px 17px !important}
@media (min-width:1000px){
  /* 欄距 32→24（2026-09-10 使用者：左右間距小 1/4，左欄大一點）；右欄固定 400px，省下的 8px 全給左欄 */
  /* 右欄 400→384（2026-09-10 使用者：右邊區塊窄一點點、視覺要平衡）；1152px 內容寬下左欄 744、右欄 384，約 2:1 */
  .pc-legacy .product-info{display:grid;grid-template-columns:minmax(0,1fr) 384px;column-gap:24px;align-items:start}
  .pc-legacy .product-info>*{grid-column:1;min-width:0}
  .pc-legacy .product-info>.paylater-slot{grid-column:2;grid-row:1}
  .pc-legacy .product-info>.tabsBuy{grid-column:2;grid-row:2/span 60;align-self:start}
  /* 付款提示與預訂框包在同一個容器（pc.js 建立），整欄一起置頂；
     原本兩者各佔一列，第 1 列高度由左邊大圖決定，提示下方會空一大片（2026-09-09 修） */
  /* 不要內部捲軸（2026-09-09 使用者要求）。但整欄比視窗高時若還置頂固定，底部的「預訂」鈕會永遠看不到，
     所以改由 pc.js 量高度：放得下才加 .is-sticky，放不下就跟著頁面正常捲動。 */
  /* 下邊距 16px＝左欄卡片（.tabs／.heading_share）的下邊距（2026-09-10 使用者：左右區塊下方要齊平）。
     左欄最後一張卡片的 16px 邊距算在格線高度裡，右欄 sticky 到格線最底時就比左邊低 16px；
     sticky 的活動範圍是用邊距框算的，右欄也給同樣的下邊距，兩邊底邊就對齊。 */
  .pc-legacy .product-info>.pc-buycol{grid-column:2;grid-row:1/span 200;align-self:start;margin-bottom:16px}
  /* 吸附（2026-09-09 使用者：吸附效果不見了）。整欄放得下就置頂固定；放不下就貼底——
     整欄跟著頁面捲，底緣一碰到視窗下沿就黏住，日期／選項那段可以往上捲出去看完，
     「預訂本行程」那一段一直留在畫面上。
     **中間曾誤判成「貼底沒有作用」**：那時線上的 pc.js 被我加的除錯碼寫壞（單引號字串裡夾了真正的
     換行），整支腳本語法錯誤、一行都沒跑，所以連 .pc-buycol 都沒建立；不是 sticky 的問題。
     在真實頁面量過：position:sticky、bottom:20px、align-self:start、grid area 6263px vs 欄高 617px
     （可移動空間 5646px），祖先層沒有任何 overflow／transform 會破壞 sticky。 */
  .pc-legacy .product-info>.pc-buycol.is-sticky-top{position:sticky;top:80px}
  /* 比視窗高時：top 由 pc.js 算成負值寫在行內樣式上（見那邊的說明，不能用 bottom） */
  .pc-legacy .product-info>.pc-buycol.is-sticky-bottom{position:sticky}
  /* 「最後一天再付款」提示到預訂框的距離：16px，跟預訂框到底部預訂列一樣（2026-09-10 使用者要求上下一致）。
     兩條分別對應「pc.js 已把付款提示與預訂框包成 .pc-buycol」與「沒有 JS 時的兩列退路」。 */
  .pc-legacy .pc-buycol>.paylater-slot .paylater{margin:0 0 16px !important}
  .pc-legacy .product-info>.paylater-slot .paylater{margin:0 0 16px !important}
}

/* 右欄最底下的「總價＋預訂本行程」整塊隱藏（2026-09-09 使用者試看看）：底部常駐預訂列
   已經有同樣的售價、市價與按鈕，重複兩份反而雜。#button-cart 只是視覺上藏起來，仍留在 DOM——
   底部那顆是去觸發它，「尚有 N 項必填」也還是從它裡面鏡射出來的。 */
.pc-legacy .pc-buycol #cart-top{display:none}
/* 選項卡與底部預訂列靠近一點（2026-09-10 使用者：讓人一看就知道兩者有關連）。原本最後一張選項卡到
   預訂框底邊 23px（卡片 margin 14＋框內距 8＋框線 1）、框底到預訂列 32px（框的 margin 18＋pc.js 讓開 14），
   合計 55px。改成框內 13px、框外 12px（pc.js 那邊同步改 12；12 對齊上方付款提示與預訂框的間距，
   使用者要求上下一樣）。框的下邊距只在 .pc-buycol 裡拿掉——
   欄高由 pc.js 量 offsetHeight，這 18px 本來就算在裡面，拿掉才貼得上去。 */
.pc-legacy .pc-buycol>.tabsBuy{margin-bottom:0 !important}
.pc-legacy .pc-buycol .tabsBuy .options>:last-child{margin-bottom:4px !important}

/* 畫面底部的固定預訂列（2026-09-09）：右欄比視窗高時整欄會跟著捲走，這一列讓下單入口一直在。
   使用者同日追加：**常駐在下緣**（原本只在按鈕離開畫面時才滑出），頁尾則由 pc.js 補 body 的
   padding-bottom 推到它上面，不會被蓋住。 */
.pc-legacy .pc-buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:11px 0;
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(28,42,46,.12)}
.pc-legacy .pc-buybar-in{max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box;
  display:flex;align-items:center;gap:18px}
.pc-legacy .pc-buybar-t{flex:1 1 auto;min-width:0;font-size:15px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 價格：售價一行、下面接劃掉的市價，照右欄那塊預訂框的排法（2026-09-09 使用者指定附圖） */
.pc-legacy .pc-buybar-p{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.2}
.pc-legacy .pc-buybar-p b{font-size:21px;font-weight:700;color:var(--saffron);letter-spacing:.01em}
.pc-legacy .pc-buybar-p small{font-size:11.5px;font-weight:400;color:var(--muted);letter-spacing:0}
.pc-legacy .pc-buybar-p small s{text-decoration:line-through}
/* 按鈕：上面一行是必填狀態、下面才是主字（跟右欄那顆一樣） */
.pc-legacy .pc-buybar button{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:220px;min-height:56px;padding:8px 30px;margin:0;border:0;border-radius:12px;
  background:var(--saffron);color:#fff;font-family:inherit;cursor:pointer;box-shadow:none;text-shadow:none}
.pc-legacy .pc-buybar-left{font-size:12.5px;font-weight:500;line-height:1.3;color:rgba(255,255,255,.92);letter-spacing:.02em}
.pc-legacy .pc-buybar-left[hidden]{display:none}
.pc-legacy .pc-buybar button b{font-size:16px;font-weight:700;line-height:1.2;letter-spacing:.04em}
.pc-legacy .pc-buybar button:hover{background:var(--laterite)}

/* 幻燈片下方的頁碼點：flexslider 執行時產生 <ol class="flex-control-nav">，
   站上沒有對應樣式，<a> 就變成一塊塊的長方形（2026-09-09 使用者回報）。 */
.pc-legacy .flexslider{position:relative}
.pc-legacy .flex-control-nav{position:absolute;left:0;right:0;bottom:14px;z-index:5;display:flex;justify-content:center;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.pc-legacy .flex-control-nav li{display:block;margin:0}
.pc-legacy .flex-control-nav li a{display:block;width:8px;height:8px;min-width:0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 1px 3px rgba(0,0,0,.35);text-indent:-9999px;overflow:hidden;cursor:pointer;transition:width .18s ease,background .18s ease}
.pc-legacy .flex-control-nav li a.flex-active{width:20px;border-radius:999px;background:#F26A00}
.pc-legacy .sa-optgroup-head{padding:14px 14px 14px 16px}
.pc-legacy .Cart_Remind_Tag{margin:2px 0 14px !important}

/* 購物車：左卡片、右總額卡（sticky） */
@media (min-width:1000px){
  .pc-legacy.checkout-cart #content{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:32px;align-items:start}
  .pc-legacy.checkout-cart #content>*{grid-column:1;min-width:0}
  .pc-legacy.checkout-cart #content>h1,.pc-legacy.checkout-cart #content>.paylater-slot,.pc-legacy.checkout-cart #content>.warning,.pc-legacy.checkout-cart #content>.success,.pc-legacy.checkout-cart #content>.attention{grid-column:1/-1}
  .pc-legacy.checkout-cart #content>.cart-bottom{grid-column:2;grid-row:3/span 60;align-self:start;position:sticky;top:80px;margin:6px 0 0 !important}
  .pc-legacy.checkout-cart .cart-bottom{padding:22px 20px 18px !important}
}
.pc-legacy.checkout-cart h1.style-1{margin:22px 0 18px !important}
.pc-legacy .cart-info tbody tr{padding:18px 20px 14px}
.pc-legacy .cart-info td.name>div:first-child a{font-size:18px !important}
.pc-legacy .sa-cart-opts{grid-template-columns:1fr 1fr;gap:12px}
.pc-legacy .Check_provided_items_area{padding:18px 20px !important}
.pc-legacy .sa-empty{max-width:560px;margin:40px auto 24px}
/* 空清單（2026-09-11 使用者：要放在網頁正中央）。購物車頁的 #content 是左 740px＋右 380px（總價欄）的格線，
   上面那條 `#content>*{grid-column:1}` 把這張卡也塞進左欄，所以它只在左欄裡置中、看起來偏左。
   空清單沒有右欄，讓它跨兩欄、水平置中；格線在 grid 裡 margin:auto 會吃掉寬度，改用 justify-self 並給定寬度。
   垂直也置中（2026-09-11 使用者：垂直也要置中、但「不是讓畫面變大」）：頁面高度維持剛好一個視窗，
   把卡片放在頂欄與頁尾之間那塊空白的正中間。扣掉的 302px＝頂欄 64px ＋ 頁尾 238px（頁尾的上邊距在下面歸零），
   這樣 內容 64＋538＋238 剛好等於 100vh，不會多出捲軸；align-content:center 讓卡片落在中間。
   先前試過 calc(100vh - 112px)，卡片中心確實等於 50vh，但頁面被撐高、出現捲軸，使用者不要那樣。 */
@media (min-width:1000px){
  .pc-legacy.checkout-cart #content:has(> .sa-empty){grid-template-columns:minmax(0,1fr);min-height:calc(100vh - 302px);align-content:center}
  .pc-legacy.checkout-cart #content>.sa-empty{grid-column:1 / -1;justify-self:center;width:min(100%,560px);margin:24px 0 !important}
  /* 頁尾自己的 48px 上邊距也算在那塊空白裡，不歸零的話卡片會比空白區中心高 32px */
  .pc-legacy.checkout-cart:has(.sa-empty) .pc-footer{margin-top:0}
}

/* 結帳：按鈕不必滿版、圖片限寬 */
.pc-legacy .checkout .highlight{margin:0 0 12px}
.pc-legacy #button-guest,.pc-legacy #button-payment-method,.pc-legacy #button-confirm{max-width:420px !important;margin-left:auto !important}
.pc-legacy .checkout .buttons .right{display:flex;justify-content:flex-end}
.pc-legacy .checkout p.num_section_Title img{max-width:440px}
.pc-legacy .sa-im-row{padding:12px 12px 12px 14px}

/* 通訊 ID 視窗：置中對話框（手機是底部滑出） */
.pc-legacy .sa-im-wrap{align-items:center;justify-content:center;padding:24px}
.pc-legacy .sa-im-sheet{width:min(520px,100%);max-height:86vh;padding:24px 26px 24px;border-radius:22px;transform:translateY(14px) scale(.98);opacity:0;transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .2s ease;box-shadow:0 24px 60px rgba(28,42,46,.32)}
.pc-legacy .sa-im-wrap.is-in .sa-im-sheet{transform:none;opacity:1}
.pc-legacy .sa-im-sheet::before{display:none}
.pc-legacy .sa-im-app:hover{border-color:#F3C89E}
@media (prefers-reduced-motion:reduce){.pc-legacy .sa-im-sheet{transition:none}}

/* 住宿地點對話框（舊站 SA_popup_Dialog）在 PC 上限寬置中。
   2026-09-09 重新設計後只有兩個欄位，560px 太寬、每行字太少，收成 440px。
   使用者同日回報「跳出來整個是歪的」：外掛的定位是 `left:40%;top:35%~40%`（沒有置中位移），
   而且用 keyframes 動畫 `transform:scale()`——**動畫的 transform 會蓋掉我們的 translateX(-50%)**，
   所以原本那條只在動畫跑完前有效，最後就歪掉。改成自己接管動畫，把位移寫進 keyframes 裡。
   只在顯示中（.in）時置中：關閉後外掛靠 .out／預設的 top:-100% 把它移出畫面，不能無條件 top:50%。 */
.pc-legacy .SA_popup_Dialog.ios.in{
  position:fixed !important;top:50% !important;left:50% !important;right:auto !important;bottom:auto !important;
  margin:0 !important;width:min(580px,calc(100vw - 48px)) !important;max-width:none !important;
  max-height:calc(100vh - 40px);overflow:auto;
  animation:pcDialogIn .18s ease-out both !important}
@keyframes pcDialogIn{from{opacity:0;transform:translate(-50%,-47%) scale(.985)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* 關閉：外掛的 out 動畫是從 top:35% 收掉的，跟置中位置對不上會跳一下，直接移出畫面 */
.pc-legacy .SA_popup_Dialog.ios.out{animation:none !important;top:-100% !important}
@media (prefers-reduced-motion:reduce){.pc-legacy .SA_popup_Dialog.ios.in{animation:none !important;transform:translate(-50%,-50%) !important}}

/* 右上角關閉圖示（2026-09-09 使用者要求；pc.js 補進 DOM）。外掛自己那顆紅色 × 一併隱藏，
   免得同時出現兩個關閉鈕。標題右邊留出位置，長標題不會壓到圖示。 */
.pc-legacy .SA_popup_Dialog.ios>a[rev="close"]{display:none !important}
.pc-legacy .SA_popup_Dialog.ios .sa-dlg-x{position:absolute;top:14px;right:14px;z-index:2;
  display:grid;place-items:center;width:34px;height:34px;margin:0;padding:0;border:0;border-radius:50%;
  background:var(--stone);color:var(--ink);cursor:pointer}
.pc-legacy .SA_popup_Dialog.ios .sa-dlg-x:hover{background:#E2DCD0}
.pc-legacy .SA_popup_Dialog.ios .sa-dlg-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.pc-legacy .SA_popup_Dialog.ios .SA_popup_Dialog_title{padding-right:56px !important}

/* 行程頁選項區的三種跳出視窗寬度一致（2026-09-10 使用者：寬度不一致，要跟 listbox 一樣）：
   下拉選單 .pc-optbox 是 min(580px, 100% − 24px×2)，住宿地點對話框（上面那條）與日期選擇器都對齊成同樣的 580。
   日曆本來是 340，拉到 580 後格子變寬，字級同步放大一級、內距加大，不然會太空。 */
.pc-legacy .Zebra_DatePicker{width:min(580px,calc(100vw - 48px)) !important;padding:16px 18px 14px !important}
/* 日曆右上角的關閉鈕（2026-09-10 使用者要求；pc.js 補進 DOM）。標題列右邊是外掛的「下個月」箭頭，
   所以關閉鈕放在標題上方，用 padding-top 讓出那一條留白。 */
.pc-legacy .Zebra_DatePicker{padding-top:50px !important}
.pc-legacy .Zebra_DatePicker .sa-dlg-x{position:absolute;top:9px;right:9px;z-index:2}   /* 外觀在檔尾「關閉鈕統一樣式」那段 */
.pc-legacy .Zebra_DatePicker table{border-spacing:6px 4px}
.pc-legacy .Zebra_DatePicker .dp_header td{font-size:18px !important;padding:8px 0 10px}
.pc-legacy .Zebra_DatePicker .dp_daypicker th{font-size:13px !important;padding:8px 0}
.pc-legacy .Zebra_DatePicker .dp_daypicker td{padding:8px 0 6px !important;font-size:16px !important}
.pc-legacy .Zebra_DatePicker .dp_daypicker td div{font-size:11px !important;margin-top:2px}
/* 下拉選單視窗的列：焦點外框只在鍵盤操作（pc.js 加上 .is-kbd）時顯示；用滑鼠開視窗時第一列不畫框（2026-09-10 使用者） */
.pc-legacy .pc-optitem:focus-visible{outline:0}
.pc-legacy .pc-optwrap.is-kbd .pc-optitem:focus-visible{outline:3px solid rgba(242,106,0,.55);outline-offset:-3px}
/* 「司機服務評分」實績區塊放在白色卡片裡看不出來（2026-09-10 使用者：把區塊內的白色改掉）：
   先用 --stone（#EFEBE3）使用者說太深、#F4F0E8 還是太深，再淡成 #F9F7F2（比頁面底色 #F8F6F1 再亮一點點）；
   框線與內部分隔線用 --line（#E4DED4），區塊靠框線與淡淡的底色跟白卡片分開。 */
.pc-legacy .sa-proof{background:#F9F7F2;border-color:var(--line)}
.pc-legacy .sa-proof-score{border-bottom-color:var(--line)}
.pc-legacy .sa-proof-cells>div{border-left-color:var(--line)}
/* 停售提示等對話框：PC 上稍寬 */
.sa-dialog{width:min(100%,420px);padding:30px 26px 22px}

/* 資訊頁：卡片留白與標題字級 */
.pc-legacy .box-container .num_section_Title,.pc-legacy .box-container .HowToWork_num_section_Title{font-size:19px !important}
.pc-legacy .box-container .num_section_textDw p{font-size:15.5px !important}
.pc-legacy .box-container div:has(>.souvenirs_num_section){padding:20px 22px !important}
.pc-legacy .infoNext a{width:auto;min-width:240px}

/* 搜尋結果：格線 */
.pc-legacy .product-grid ul.row,.pc-legacy .product-list ul.row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pc-legacy .product-grid ul li,.pc-legacy .product-list ul li{margin:0 !important}

/* LiveChat 泡泡：行程頁有底部常駐預訂列（2026-09-09 加的），泡泡會蓋住它（2026-09-10 使用者回報）。
   原本這裡寫 margin-bottom:0、註解是「PC 沒有底部固定列」，那是加預訂列之前的狀況，已過時。
   往上移一個預訂列的高度再加 12px 留白；列高由 pc.js 的 pad() 寫在 --pc-buybar-h，沒有預訂列的頁面不會掛 chat-lift。
   往下捲時 pc.css 的 html.chat-lift.chat-away（兩個 class、權重較高）仍會把泡泡收起來。 */
html.chat-lift #chat-widget-container{margin-bottom:calc(var(--pc-buybar-h, 66px) + 12px) !important}
/* 問候泡泡加寬（2026-09-10 使用者：文字縮在一起）。只在 pc.js 判斷泡泡真的在顯示時掛上 chat-greet；
   iframe 裡的 body 由 pc.js 塞樣式表改成 100%，才會跟著重排。 */
html.chat-greet #chat-widget-container{width:min(400px,calc(100vw - 24px)) !important}
/* 泡泡往左移一些（2026-09-10 使用者要求）。LiveChat 的行內樣式是 right:0，這裡推開 24px；
   聊天視窗打開時不套（html.chat-open 由 pc.js 掛），否則面板會被推歪。 */
html:not(.chat-open) #chat-widget-container{right:24px !important}

/* ---------- 選項區彈出視窗的關閉鈕：統一樣式（2026-09-10 使用者：所有關閉按鈕長相都要一致） ----------
   規格以下拉選單（listbox）那顆 .pc-optclose 為準：34px 圓形、淡米底 --stone、墨色圖示、16px 線條 2.2。
   以後新增彈出視窗時，把它的關閉鈕選擇器加進下面兩串就會自動長一樣，不要再各自寫一份外觀。
   位置（absolute 的 top／right、或排在標題列的 flex 裡）仍由各自的規則決定，這裡只統一外觀。
   為什麼要 !important：日曆外掛的 zebra_datepicker.css 有一條 `.Zebra_DatePicker *{color:#FF6800}`，
   會把 svg 的 currentColor 變成橘色，所以連 stroke 都直接寫死、不靠 currentColor。 */
.pc-legacy .pc-optclose,
.pc-legacy .SA_popup_Dialog.ios .sa-dlg-x,
.pc-legacy .Zebra_DatePicker .sa-dlg-x{
  display:grid !important;place-items:center;box-sizing:border-box;
  width:34px !important;height:34px !important;min-width:0;min-height:0;
  margin:0;padding:0;border:0 !important;border-radius:50% !important;
  background:var(--stone) !important;color:var(--ink) !important;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.pc-legacy .pc-optclose svg,
.pc-legacy .SA_popup_Dialog.ios .sa-dlg-x svg,
.pc-legacy .Zebra_DatePicker .sa-dlg-x svg{
  width:16px !important;height:16px !important;fill:none !important;
  stroke:var(--ink) !important;stroke-width:2.2 !important;stroke-linecap:round;stroke-linejoin:round}
.pc-legacy .pc-optclose:active,
.pc-legacy .SA_popup_Dialog.ios .sa-dlg-x:active,
.pc-legacy .Zebra_DatePicker .sa-dlg-x:active,
.pc-legacy .pc-optclose:hover,
.pc-legacy .SA_popup_Dialog.ios .sa-dlg-x:hover,
.pc-legacy .Zebra_DatePicker .sa-dlg-x:hover{background:#E2DCD0 !important}