:root {
      --bg: #F6F2EA;
      --surface: #FFFFFF;
      --ink: #1F2328;
      --muted:rgba(31,35,40,.68);
      --hair: rgba(23,23,23,.16);
      --radius: 10px;
      --shadow: 0 10px 30px rgba(0,0,0,.12);
      --accent: #FF5A3C; /* 橘紅 CTA */
      --accent2: #0B0B0B; /* 深色按鈕描邊/字 */
      --maxw: 1080px;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
      background: var(--bg);
      color: var(--ink);
      letter-spacing: .02em;
      line-height: 1.65;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    /* Top bar */
    .topbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 50;
      background: rgba(246,242,234,.8);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(23,23,23,.08);
    }
    .topbar-inner {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .brand {
      display: flex;
      align-items: baseline;
      gap: 10px;
      font-weight: 800;
      letter-spacing: .04em;
      white-space: nowrap;
    }
    .brand .zh { font-size: 22px; }
    .brand .en { font-size: 14px; opacity: .75; font-weight: 700; }

    .nav {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .nav a {
      font-size: 13px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(23,23,23,.16);
      background: rgba(255,255,255,.45);
    }
    .lang {
      display: flex; gap: 6px; align-items: center;
      border: 1px solid rgba(23,23,23,.16);
      border-radius: 999px;
      padding: 3px;
      background: rgba(255,255,255,.5);
    }
    .lang button {
      border: 0;
      background: transparent;
      padding: 7px 10px;
      border-radius: 999px;
      cursor: pointer;
      font-size: 12px;
      color: rgba(23,23,23,.75);
      font-weight: 700;
    }
    .lang button[aria-pressed="true"] {
      background: var(--ink);
      color: #fff;
    }


    /* Mobile burger + drawer */
    .burger{
      display:none;
      width:38px;height:38px;
      border-radius:999px;
      border:1px solid rgba(23,23,23,.16);
      background: rgba(255,255,255,.5);
      align-items:center;justify-content:center;
      cursor:pointer;
    }
    .burger svg{width:20px;height:20px;}
    .burger:hover{background: rgba(255,255,255,.85);}

    .drawer{position:fixed;inset:0;display:none;z-index:90;}
    .drawer.open{display:block;}
    .drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.38);backdrop-filter: blur(2px);}
    .drawer-panel{
      position:absolute;top:0;right:0;height:100%;
      width:min(360px, 88vw);
      background: rgba(246,242,234,.98);
      border-left: 1px solid rgba(23,23,23,.12);
      box-shadow: 0 18px 60px rgba(0,0,0,.22);
      padding: 14px;
      transform: translateX(100%);
      transition: transform .25s ease;
      display:flex;flex-direction:column;gap:14px;
    }
    .drawer.open .drawer-panel{transform: translateX(0);}
    .drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
    .drawer-title{font-weight:950;letter-spacing:.04em;}
    .drawer-close{
      width:38px;height:38px;border-radius:999px;
      border:1px solid rgba(23,23,23,.16);
      background: rgba(255,255,255,.65);
      display:inline-flex;align-items:center;justify-content:center;
      cursor:pointer;
    }
    .drawer-close svg{width:18px;height:18px;}
    .drawer-nav{display:flex;flex-direction:column;gap:8px;}
    .drawer-nav a{
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(23,23,23,.12);
      background: rgba(255,255,255,.6);
      font-weight: 900;
      letter-spacing: .04em;
    }
    .drawer-lang{margin-top:auto;display:flex;flex-direction:column;gap:10px;}
    .drawer-lang-label{font-size:12px;color: var(--muted);font-weight:800;letter-spacing:.04em;}


    /* Layout */
    .wrap {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 14px;
    }
    .spacer-top { height: 60px; }

    /* Hero */
    .hero {
      position: relative;
      margin-top: 14px;
      border: 1px solid rgba(23,23,23,.12);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      background:
        linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.12)),
        url('hero.jpg') center/cover no-repeat;
      min-height: 360px;
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(1200px 400px at 10% 20%, rgba(0,0,0,.32), transparent 60%);
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      padding: 44px 18px 22px;
      color: #fff;
    }
    .hero h1 {
      margin: 0;
      font-size: clamp(28px, 3.2vw, 40px);
      letter-spacing: .06em;
      line-height: 1.15;
      text-shadow: 0 10px 22px rgba(0,0,0,.35);
    }
    .hero p {
      max-width: 680px;
      margin: 14px 0 0;
      font-size: 18px;
      opacity: .80;
    }
    .hero .meta {
      margin-top: 18px;
      font-size: 13px;
      opacity: .95;
    }
    .hero .meta b { font-weight: 800; }
    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.35);
      background: rgba(0,0,0,.28);
      color: #fff;
      font-weight: 800;
      letter-spacing: .04em;
      backdrop-filter: blur(6px);
    }
    .btn.primary {
      background: var(--accent);
      border-color: rgba(255,255,255,.32);
      box-shadow: 0 12px 30px rgba(255,90,60,.35);
    }
    .btn.primary:hover { filter: brightness(1.03); }
    .btn.ghost {
      background: rgba(0,0,0,.22);
    }
    .btn svg { width: 18px; height: 18px; }

    /* Sections */
    section {
      padding: 32px 0;
    }
    .section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(23,23,23,.12);
      margin-bottom: 16px;
    }
    .section-head h2 {
      margin: 0;
      font-size: 34px;
      letter-spacing: .06em;
    }
    .section-head .sub {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 14px;
      max-width: 520px;
    }

    /* Category blocks */
    .cat {
      margin: 18px 0 26px;
    }
    .cat-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    .cat-title {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: .06em;
      margin: 0;
    }
    .carousel-controls {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .iconbtn {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid rgba(23,23,23,.16);
      background: rgba(255,255,255,.65);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .iconbtn:hover { background: rgba(255,255,255,.9); }
    .iconbtn svg { width: 18px; height: 18px; }

    .track {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(240px, 1fr);
      gap: 12px;
      overflow-x: auto;
      padding: 6px 2px 10px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;      /* Firefox */
      -ms-overflow-style: none;   /* IE/Edge legacy */
    }
    /* Card – like your sample */
    .card {
      scroll-snap-align: start;
      border: 3px solid rgb(var(--thai-day-rgb));
      border-radius: var(--radius);
      /*background: rgb(var(--thai-day-rgb));/* ✅ 整張卡片跟著星期變色 */
      overflow: hidden;
      /* box-shadow: 0 14px 40px rgba(0,0,0,.06), inset 0 3px 0 rgba(var(--thai-day-rgb), .45); */
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 50px rgba(0,0,0,.10);
    }
    .card-top {
      padding: 12px 12px 0;
    }
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid rgba(23,23,23,.14);
      background: rgba(255,255,255,.7);
      font-weight: 900;
      font-size: 12px;
      letter-spacing: .06em;
    }
    .pill.feature {
      background: var(--accent);
      border-color: rgba(255,255,255,.35);
      color: #fff;
    }
    .media {
      padding: 10px 12px 0;
    }
    .imgwrap {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: calc(var(--radius) - 6px);
      border: 1px solid rgba(23,23,23,.12);
      overflow: hidden;
      background: rgba(23,23,23,.04);
      position: relative;
    }
    .imgwrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: translateY(0px);
      transition: transform .35s ease;
    }

    .card-body {
      padding: 12px 12px 14px;
      display: flex;
      flex-direction: column;
    }
    .title {
      margin: 0;
      font-size: 18px;
      font-weight: 950;
      letter-spacing: .04em;
      line-height: 1.2;
    }
    .desc {
      margin: 8px 0 10px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
      min-height: 42px;
    }
    .row {
      margin-top: auto;           /* 這行是關鍵：整個 row 貼到卡片底部 */
      display: flex;
      flex-direction: column;     /* badges 在上、price 在下 */
      align-items: flex-start;
      gap: 10px;
    }
    .price {
      font-weight: 950;
      letter-spacing: .04em;
    }
    .badges {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-start;  /* 靠左 */
      width: 100%;                  /* 讓 badges 佔滿一行，視覺更穩 */
    }
    .badge {
      font-size: 11px;
      font-weight: 900;
      padding: 6px 8px;
      border-radius: 999px;
      border: 1px solid rgba(23,23,23,.14);
      background: rgba(255,255,255,.65);
    }

    /* Loading / errors */
    .loading {
      color: var(--muted);
      padding: 26px 0;
      text-align: center;
      font-weight: 800;
      letter-spacing: .06em;
    }
    .error {
      color: #8a1f1f;
      background: rgba(255,90,60,.10);
      border: 1px solid rgba(255,90,60,.25);
      border-radius: var(--radius);
      padding: 12px 14px;
      font-weight: 800;
      letter-spacing: .04em;
    }

    /* About / Contact simple cards */
    .grid2 {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 12px;
    }
    @media (max-width: 820px) {
      .grid2 { grid-template-columns: 1fr; }
      .nav-links { display:none; }
      .topbar .lang { display:none; }
      .drawer .lang { display:flex; }
      .burger { display:inline-flex; }
      .brand{flex-direction:column;align-items:flex-start;gap:2px;}
      .brand .zh{font-size:16px;}
      .brand .en{font-size:12px;opacity:.78;}
    }
    .panel {
      border: 1px solid rgba(23,23,23,.12);
      border-radius: var(--radius);
      background: rgba(255,255,255,.65);
      padding: 16px;
      box-shadow: 0 12px 34px rgba(0,0,0,.06);
    }
    .panel h3 {
      margin: 0 0 8px;
      font-size: 16px;
      letter-spacing: .04em;
    }
    .panel p { margin: 0; color: var(--muted); }

    /* Lightbox */
    .lightbox {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,.75);
      z-index: 80;
      padding: 16px;
    }
    .lightbox.show { display: flex; }
    .lightbox img {
      max-width: min(920px, 96vw);
      max-height: 88vh;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,.45);
      background: #111;
    }

    /* Scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .8s ease, transform .8s ease;
      will-change: opacity, transform;
    }
    .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
    /* Reduce motion */
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      .card, .card:hover { transform:none; transition:none; }
    }
    /* Hide scrollbar (desktop) but keep horizontal scrolling */
    .track::-webkit-scrollbar {
      display: none; /* Chrome/Safari */
      width: 0;
      height: 0;
    }

/* ===== Thai weekday color easter egg (Morandi + very light) =====
   Thai weekday colors:
   Mon=Yellow, Tue=Pink, Wed=Green, Thu=Orange, Fri=Blue, Sat=Purple, Sun=Red
   Implementation: set --thai-day-rgb on <html class="day-xxx"> and draw a subtle inset top strip.
*/
:root{
  --thai-day-rgb: 230, 230, 230; /* fallback */
}

/* Lighter Morandi (pastel + low saturation) */
html.day-mon { --thai-day-rgb: 230, 216, 168; } /* Mon - yellow (very light) */
html.day-tue { --thai-day-rgb: 227, 182, 195; } /* Tue - pink */
html.day-wed { --thai-day-rgb: 169, 196, 167; } /* Wed - green */
html.day-thu { --thai-day-rgb: 226, 179, 138; } /* Thu - orange */
html.day-fri { --thai-day-rgb: 175, 198, 217; } /* Fri - blue */
html.day-sat { --thai-day-rgb: 185, 168, 201; } /* Sat - purple */
html.day-sun { --thai-day-rgb: 214, 160, 160; } /* Sun - red */

/* Apply: subtle top strip inside each card (does NOT affect code pill) */

/* ===== Hero background video ===== */
.hero{
  position: relative;
  overflow: hidden;
  min-height: 58vh; /* 你想更高可調 65vh/75vh */
}

.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 影片填滿 */
  object-position: center;
  transform: scale(1.02); /* 避免邊緣露白 */
  z-index: 0;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.25) 45%,
    rgba(0,0,0,.45) 100%
  );
  z-index: 1;
}

/* 讓 Hero 內容在影片上層 */
.hero .hero-inner{
  position: relative;
  z-index: 2;
}
/* ===== Fullscreen Hero ===== */
.hero{
  position: relative;
  width: 100%;
  height: calc(100svh - 60px); /* 扣掉 .spacer-top 60px */
  height: calc(100vh - 60px);  /* fallback */
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  background: #000; /* 影片載入前的底色 */
}

/* 背景影片/圖片一定要填滿 */
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.25) 45%,
    rgba(0,0,0,.60) 100%
  );
  z-index: 1;
}

/* 內容疊在上面 */
.hero-inner{
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 96px 18px 28px; /* 上方留給 topbar，底部更像滿版 hero */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}



/* ===== ONE-FIX PATCH: hero fullscreen + aligned gutters + carousel padding ===== */
:root{
  --gutter: clamp(14px, 4vw, 22px);
  --header-h: 60px;
}

/* keep header/menu aligned */
.topbar-inner{
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap{
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.spacer-top{ height: var(--header-h); }

/* HERO: force fullscreen, no card margins/borders */
.hero{
  margin-top: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: calc(100vh - var(--header-h)) !important;
  min-height: 520px;
  overflow: hidden;
}

/* video overscan to kill iOS seams */
.hero-video{
  display: block;
  transform: scale(1.06);
  transform-origin: center;
}

/* softer gradient, focus bottom-right */
.hero-overlay{
  background:
    radial-gradient(60% 55% at 72% 72%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,0) 75%),
    linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,0) 70%);
}

/* content bottom-right */
.hero-inner{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--gutter);
}
.hero-copy{
  margin-left: 0;
  margin-right: auto;          /* 把整塊推到左側 */
  max-width: 680px;
}
.cta-row{
  justify-content: flex-end;
  align-items: flex-start;
}

/* carousel: give real left/right space so pills & first card aren't cut */
.track{
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
  scroll-padding-left: var(--gutter);
  scroll-padding-right: var(--gutter);
}

/* mobile: keep copy centered-ish and not too right */
@media (max-width: 640px){
  .hero-inner{ justify-content: center; }
  .hero-copy{ width: min(680px, calc(100% - var(--gutter) * 2)); }
  .cta-row{ justify-content: flex-start; }
}