/**
 * GoTooi 首頁 — page-specific (shell/sidebar/cards in layout.css)
 */

:root {
  --home-purple: #7c3aed;
}

/* 12-column grid */
.home-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.home-span-12 { grid-column: 1 / -1; }

/* Hero — Hong Kong day/night by Asia/Hong_Kong time */
.home-hero {
  position: relative;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
  border-radius: var(--card-radius);
  border: 1px solid rgb(91 127 255 / 10%);
  overflow: hidden;
  transition: background 0.8s ease, border-color 0.8s ease;
}

.home-hero:has(.home-search-suggestions:not([hidden])) {
  overflow: visible;
  z-index: 25;
}

.home-hero-bg,
.home-hero-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-hero-bg { z-index: 0; }

.home-hero-visual {
  z-index: 1;
  background:
    radial-gradient(circle at 80% 20%, rgb(91 127 255 / 12%), transparent 50%);
  opacity: 0.35;
  transition: opacity 0.8s ease, background 0.8s ease;
}

.home-hero-inner { position: relative; z-index: 2; max-width: 640px; margin-inline: auto; text-align: center; }

/* Admin-controlled photo background (overrides time-of-day gradients when enabled) */
.home-hero.home-hero--photo-bg,
.home-hero.home-hero--photo-bg.home-hero--day,
.home-hero.home-hero--photo-bg.home-hero--dawn,
.home-hero.home-hero--photo-bg.home-hero--dusk,
.home-hero.home-hero--photo-bg.home-hero--night,
[data-hero-period] .home-hero.home-hero--photo-bg,
[data-theme='dark'] .home-hero.home-hero--photo-bg,
[data-theme='dark'] .home-hero.home-hero--photo-bg.home-hero--dusk,
[data-theme='dark'] .home-hero.home-hero--photo-bg.home-hero--night,
[data-theme='dark'][data-hero-period='dusk'] .home-hero.home-hero--photo-bg,
[data-theme='dark'][data-hero-period='night'] .home-hero.home-hero--photo-bg {
  background-color: #cfe8f6;
  background-image:
    linear-gradient(165deg, rgb(255 255 255 / 58%) 0%, rgb(224 242 254 / 42%) 42%, rgb(247 248 252 / 78%) 100%),
    var(--home-hero-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: rgb(91 127 255 / 16%);
  color: var(--color-text, #1b264f);
}

.home-hero.home-hero--photo-bg .home-hero-bg::before,
.home-hero.home-hero--photo-bg .home-hero-bg::after {
  display: none;
}

.home-hero.home-hero--photo-bg .home-hero-visual {
  opacity: 0.18;
  background: radial-gradient(circle at 80% 18%, rgb(255 255 255 / 28%), transparent 48%);
}

/* —— Day (07:00–17:00 HKT) —— */
.home-hero--day,
[data-hero-period='day'] .home-hero {
  background: linear-gradient(155deg, #7dd3fc 0%, #a5f3fc 28%, #ccfbf1 58%, #e0f2fe 100%);
  border-color: rgb(91 127 255 / 18%);
}

.home-hero--day .home-hero-bg::before,
[data-hero-period='day'] .home-hero .home-hero-bg::before {
  content: '';
  position: absolute;
  top: 8%;
  right: 12%;
  width: clamp(72px, 18vw, 110px);
  height: clamp(72px, 18vw, 110px);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 237 150 / 75%) 0%, rgb(255 200 80 / 25%) 45%, transparent 70%);
  filter: blur(1px);
}

.home-hero--day .home-hero-bg::after,
[data-hero-period='day'] .home-hero .home-hero-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 38%;
  background: linear-gradient(to top, rgb(91 127 255 / 8%) 0%, transparent 100%);
}

.home-hero--day .home-hero-visual,
[data-hero-period='day'] .home-hero .home-hero-visual {
  opacity: 0.42;
  background:
    radial-gradient(circle at 88% 12%, rgb(255 220 100 / 35%), transparent 38%),
    radial-gradient(circle at 80% 20%, rgb(91 127 255 / 14%), transparent 50%);
}

/* —— Dawn (05:00–07:00 HKT) —— */
.home-hero--dawn,
[data-hero-period='dawn'] .home-hero {
  background: linear-gradient(155deg, #fdba74 0%, #fecdd3 32%, #bae6fd 62%, #e0f2fe 100%);
  border-color: rgb(251 146 60 / 22%);
}

.home-hero--dawn .home-hero-bg::before,
[data-hero-period='dawn'] .home-hero .home-hero-bg::before {
  content: '';
  position: absolute;
  bottom: 18%;
  left: 15%;
  width: clamp(90px, 22vw, 140px);
  height: clamp(90px, 22vw, 140px);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 180 100 / 55%) 0%, rgb(251 113 133 / 20%) 50%, transparent 72%);
}

.home-hero--dawn .home-hero-visual,
[data-hero-period='dawn'] .home-hero .home-hero-visual {
  opacity: 0.38;
  background:
    radial-gradient(circle at 20% 75%, rgb(255 160 90 / 30%), transparent 45%),
    radial-gradient(circle at 80% 20%, rgb(91 127 255 / 10%), transparent 50%);
}

/* —— Dusk / Night default: light site (dark variants below require data-theme='dark') —— */
[data-hero-period='dusk'] .home-hero,
[data-hero-period='night'] .home-hero,
.home-hero--dusk,
.home-hero--night {
  background: linear-gradient(155deg, #7dd3fc 0%, #a5f3fc 28%, #ccfbf1 58%, #e0f2fe 100%);
  border-color: rgb(91 127 255 / 18%);
}

[data-hero-period='dusk'] .home-hero h1,
[data-hero-period='night'] .home-hero h1,
.home-hero--dusk .home-hero h1,
.home-hero--night .home-hero h1 {
  color: inherit;
  text-shadow: none;
}

[data-hero-period='dusk'] .home-hero-lead,
[data-hero-period='night'] .home-hero-lead,
.home-hero--dusk .home-hero-lead,
.home-hero--night .home-hero-lead {
  color: var(--color-text-muted);
}

[data-hero-period='dusk'] .home-hero .home-search,
[data-hero-period='night'] .home-hero .home-search,
.home-hero--dusk .home-search,
.home-hero--night .home-search {
  background: #fff;
  border: none;
  box-shadow: 0 8px 32px rgb(91 127 255 / 10%);
}

/* —— Dusk (17:00–19:00 HKT) — dark site only —— */
[data-theme='dark'] .home-hero--dusk,
[data-theme='dark'][data-hero-period='dusk'] .home-hero {
  background: linear-gradient(155deg, #fb923c 0%, #f472b6 30%, #818cf8 65%, #312e81 100%);
  border-color: rgb(139 92 246 / 28%);
}

[data-theme='dark'] .home-hero--dusk .home-hero h1,
[data-theme='dark'][data-hero-period='dusk'] .home-hero h1 {
  color: #fff;
  text-shadow: 0 1px 12px rgb(0 0 0 / 18%);
}

[data-theme='dark'] .home-hero--dusk .home-hero-lead,
[data-theme='dark'][data-hero-period='dusk'] .home-hero-lead {
  color: rgb(255 255 255 / 88%);
}

[data-theme='dark'] .home-hero--dusk .home-hero-eyebrow,
[data-theme='dark'][data-hero-period='dusk'] .home-hero-eyebrow {
  color: #fff;
  background: rgb(255 255 255 / 18%);
  backdrop-filter: blur(6px);
}

[data-theme='dark'] .home-hero--dusk .home-hero-bg::before,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-hero-bg::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 42%;
  background: linear-gradient(to top, rgb(49 46 129 / 55%) 0%, transparent 100%);
  clip-path: polygon(
    0% 100%, 0% 72%, 4% 68%, 7% 78%, 11% 62%, 15% 70%, 19% 58%, 24% 66%,
    28% 52%, 33% 64%, 37% 48%, 42% 60%, 47% 50%, 52% 68%, 57% 54%, 62% 72%,
    67% 58%, 72% 70%, 77% 56%, 82% 66%, 87% 52%, 92% 62%, 96% 48%, 100% 58%, 100% 100%
  );
}

[data-theme='dark'] .home-hero--dusk .home-hero-visual,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-hero-visual {
  opacity: 0.3;
  background:
    radial-gradient(circle at 75% 30%, rgb(251 146 60 / 25%), transparent 42%),
    radial-gradient(circle at 80% 20%, rgb(129 140 248 / 15%), transparent 50%);
}

[data-theme='dark'] .home-hero--dusk .home-search,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-search {
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 10px 36px rgb(0 0 0 / 22%);
  border: none;
}

/* —— Night (19:00–05:00 HKT) — dark site only —— */
[data-theme='dark'] .home-hero--night,
[data-theme='dark'][data-hero-period='night'] .home-hero {
  background: linear-gradient(165deg, #020617 0%, #0f172a 32%, #1e1b4b 62%, #312e81 100%);
  border-color: rgb(99 102 241 / 32%);
}

[data-theme='dark'] .home-hero--night .home-hero h1,
[data-theme='dark'][data-hero-period='night'] .home-hero h1 {
  color: #f8fafc;
  text-shadow: 0 1px 16px rgb(0 0 0 / 35%);
}

[data-theme='dark'] .home-hero--night .home-hero-lead,
[data-theme='dark'][data-hero-period='night'] .home-hero-lead {
  color: rgb(226 232 240 / 82%);
}

[data-theme='dark'] .home-hero--night .home-hero-eyebrow,
[data-theme='dark'][data-hero-period='night'] .home-hero-eyebrow {
  color: #9bb4ff;
  background: rgb(15 23 42 / 72%);
  border: 1px solid rgb(94 234 212 / 18%);
}

[data-theme='dark'] .home-hero--night .home-hero-bg::before,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-hero-bg::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 46%;
  background: linear-gradient(to top, rgb(2 6 23 / 92%) 0%, transparent 100%);
  clip-path: polygon(
    0% 100%, 0% 78%, 3% 74%, 6% 82%, 9% 68%, 13% 76%, 17% 62%, 21% 72%,
    25% 58%, 29% 68%, 33% 54%, 38% 64%, 43% 50%, 48% 62%, 53% 48%, 58% 60%,
    63% 46%, 68% 58%, 73% 44%, 78% 56%, 83% 42%, 88% 54%, 93% 40%, 97% 50%, 100% 44%, 100% 100%
  );
}

[data-theme='dark'] .home-hero--night .home-hero-bg::after,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgb(255 255 200 / 90%), transparent),
    radial-gradient(1px 1px at 28% 38%, rgb(255 200 120 / 75%), transparent),
    radial-gradient(1.5px 1.5px at 45% 18%, rgb(255 255 255 / 80%), transparent),
    radial-gradient(1px 1px at 62% 32%, rgb(251 191 36 / 70%), transparent),
    radial-gradient(1px 1px at 78% 24%, rgb(255 255 200 / 65%), transparent),
    radial-gradient(1.5px 1.5px at 88% 42%, rgb(244 114 182 / 60%), transparent),
    radial-gradient(1px 1px at 35% 55%, rgb(94 234 212 / 55%), transparent),
    radial-gradient(1px 1px at 55% 48%, rgb(255 255 255 / 50%), transparent),
    radial-gradient(1px 1px at 72% 58%, rgb(251 191 36 / 45%), transparent);
  opacity: 0.75;
  animation: home-hero-twinkle 5s ease-in-out infinite alternate;
}

@keyframes home-hero-twinkle {
  from { opacity: 0.55; }
  to { opacity: 0.9; }
}

[data-theme='dark'] .home-hero--night .home-hero-visual,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-hero-visual {
  opacity: 0.22;
  background:
    radial-gradient(circle at 70% 25%, rgb(124 58 237 / 22%), transparent 45%),
    radial-gradient(circle at 85% 15%, rgb(94 234 212 / 12%), transparent 38%);
}

[data-theme='dark'] .home-hero--night .home-search,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-search {
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 10px 40px rgb(0 0 0 / 38%);
  border: none;
}

.home-hero-eyebrow {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-teal-dark);
  background: rgb(255 255 255 / 75%);
  transition: color 0.8s ease, background 0.8s ease, border-color 0.8s ease;
}

.home-hero h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.65rem, 4.5vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  transition: color 0.8s ease;
}

.home-hero-lead {
  margin: 0 0 1.35rem;
  color: var(--color-text-muted);
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  line-height: 1.6;
  transition: color 0.8s ease;
}

.home-search-modes {
  display: inline-flex;
  gap: 0.25rem;
  margin: 0 0 0.75rem;
  padding: 0.25rem;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 72%);
  border: 1px solid rgb(91 127 255 / 16%);
}

.home-search-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.6rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, padding 0.25s ease, box-shadow 0.2s ease;
}

.home-search-mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.home-search-mode-sticker {
  width: 1.25rem;
  height: 1.25rem;
}

.gotooi-sticker-tab-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.home-search-mode.active .gotooi-sticker-tab-icon path {
  filter: brightness(1.05);
}

.home-search-mode-label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  margin-inline-start: 0;
  transition: max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease, margin-inline-start 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-search-mode:not(.active) .home-search-mode-label {
  max-width: 5rem;
  opacity: 0.72;
  margin-inline-start: 0.28rem;
}

@media (max-width: 380px) {
  .home-search-mode:not(.active) .home-search-mode-label {
    max-width: 3.25rem;
    font-size: 0.76rem;
  }

  .home-search-mode.active .home-search-mode-label {
    max-width: 5.5rem;
  }
}

.home-search-mode.active .home-search-mode-label {
  max-width: 7.5rem;
  opacity: 1;
  margin-inline-start: 0.35rem;
}

.home-search-mode.active {
  padding-inline: 0.85rem;
}

.home-search-mode:hover {
  background: rgb(91 127 255 / 8%);
}

/* Light site: dusk/night periods use day-like hero (time is decorative only) */
html[data-theme='light'] .home-hero--dusk,
html[data-theme='light'] .home-hero--night,
html[data-theme='light'][data-hero-period='dusk'] .home-hero,
html[data-theme='light'][data-hero-period='night'] .home-hero {
  background: linear-gradient(155deg, #7dd3fc 0%, #a5f3fc 28%, #ccfbf1 58%, #e0f2fe 100%);
  border-color: rgb(91 127 255 / 18%);
}

html[data-theme='light'] .home-hero--dusk .home-hero h1,
html[data-theme='light'] .home-hero--night .home-hero h1,
html[data-theme='light'][data-hero-period='dusk'] .home-hero h1,
html[data-theme='light'][data-hero-period='night'] .home-hero h1 {
  color: inherit;
  text-shadow: none;
}

html[data-theme='light'] .home-hero--dusk .home-hero-lead,
html[data-theme='light'] .home-hero--night .home-hero-lead,
html[data-theme='light'][data-hero-period='dusk'] .home-hero-lead,
html[data-theme='light'][data-hero-period='night'] .home-hero-lead {
  color: var(--color-text-muted);
}

html[data-theme='light'] .home-hero--dusk .home-search-modes,
html[data-theme='light'] .home-hero--night .home-search-modes,
html[data-theme='light'][data-hero-period='dusk'] .home-hero .home-search-modes,
html[data-theme='light'][data-hero-period='night'] .home-hero .home-search-modes {
  background: rgb(255 255 255 / 72%);
  border-color: rgb(91 127 255 / 16%);
}

html[data-theme='light'] .home-hero--dusk .home-search-mode,
html[data-theme='light'] .home-hero--night .home-search-mode,
html[data-theme='light'][data-hero-period='dusk'] .home-hero .home-search-mode,
html[data-theme='light'][data-hero-period='night'] .home-hero .home-search-mode {
  color: var(--color-text-muted);
}

html[data-theme='light'] .home-hero--dusk .home-search-carousel-label,
html[data-theme='light'] .home-hero--night .home-search-carousel-label,
html[data-theme='light'][data-hero-period='dusk'] .home-hero .home-search-carousel-label,
html[data-theme='light'][data-hero-period='night'] .home-hero .home-search-carousel-label {
  color: var(--color-text-muted);
}

html[data-theme='light'] .home-hero--dusk .home-search-carousel-pill,
html[data-theme='light'] .home-hero--night .home-search-carousel-pill,
html[data-theme='light'][data-hero-period='dusk'] .home-hero .home-search-carousel-pill,
html[data-theme='light'][data-hero-period='night'] .home-hero .home-search-carousel-pill {
  background: rgb(255 255 255 / 88%);
  border-color: rgb(91 127 255 / 28%);
  color: var(--color-teal-dark, #3d5ccc);
  backdrop-filter: none;
}

[data-theme='dark'] .home-hero--dusk .home-search-modes,
[data-theme='dark'] .home-hero--night .home-search-modes,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-search-modes,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-search-modes {
  background: rgb(255 255 255 / 12%);
  border-color: rgb(255 255 255 / 18%);
}

[data-theme='dark'] .home-hero--dusk .home-search-mode,
[data-theme='dark'] .home-hero--night .home-search-mode,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-search-mode,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-search-mode {
  color: rgb(255 255 255 / 85%);
}

[data-theme='dark'] .home-hero--dusk .home-search-mode:hover,
[data-theme='dark'] .home-hero--night .home-search-mode:hover,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-search-mode:hover,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-search-mode:hover {
  background: rgb(255 255 255 / 10%);
}

.home-search-mode.active {
  background: #fff;
  color: var(--color-primary, #5b7fff);
  box-shadow: 0 4px 14px rgb(0 0 0 / 12%);
}

.home-travel-submodes {
  display: inline-flex;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light, #eef2ff);
  border: 1px solid rgb(91 127 255 / 18%);
}

.home-travel-submode {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.home-travel-submode.active {
  background: #fff;
  color: var(--color-primary, #5b7fff);
  box-shadow: 0 2px 8px rgb(91 127 255 / 12%);
}

.gotooi-discount-badge-icon text {
  pointer-events: none;
}

@media (max-width: 768px) {
  .home-search-mode {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

.home-hero--day .home-search-mode,
[data-hero-period='day'] .home-hero .home-search-mode {
  color: var(--color-text-muted);
}

.home-hero--day .home-search-mode.active,
[data-hero-period='day'] .home-hero .home-search-mode.active {
  color: var(--color-primary, #5b7fff);
}

@media (prefers-reduced-motion: reduce) {
  .home-search-mode,
  .home-search-mode-label {
    transition: none;
  }
}

.home-search-stack {
  max-width: 520px;
  margin-inline: auto;
  width: 100%;
  position: relative;
  z-index: 3;
}

.home-search-stack:has(.home-search-suggestions:not([hidden])) {
  z-index: 30;
}

.home-panel-content.hidden {
  display: none;
}

.home-travel-card,
#home-travel-sheet-root {
  --travel-bg: #f5f6f8;
  --travel-surface: #ffffff;
  --travel-surface-2: #f8fafc;
  --travel-border: #e2e8f0;
  --travel-text: #0f172a;
  --travel-muted: #64748b;
  --travel-blue: #2563eb;
  --travel-blue-soft: #eff6ff;
  color: var(--travel-text);
}

.home-travel-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgb(91 127 255 / 14%);
  box-shadow: 0 12px 40px rgb(15 23 42 / 10%);
  overflow: hidden;
  text-align: left;
  padding: 0.85rem 0.9rem 1rem;
}

.home-travel-ref-form .travel-pill-field {
  background: var(--travel-blue-soft);
  color: var(--travel-text);
}

.home-travel-ref-form .travel-pill-value {
  color: var(--travel-text);
}

.home-travel-ref-form .travel-pill-icon {
  color: var(--travel-muted);
}

.home-travel-ref-form .travel-search-btn {
  width: 100%;
  background: var(--travel-blue);
  color: #fff;
}

.home-travel-paste-entry {
  margin: 0.55rem 0 0;
  text-align: center;
}

.home-travel-paste-entry.hidden,
.home-travel-paste-btn.hidden {
  display: none;
}

.home-travel-card--hotel-tool #home-paste-block[hidden],
.home-travel-card--hotel-tool #home-paste-block.hidden {
  display: none;
}

.home-travel-paste-btn {
  border: none;
  background: none;
  color: var(--travel-blue);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.home-travel-paste-panel {
  margin-top: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.home-travel-paste-panel.hidden {
  display: none;
}

#home-travel-native-search.hidden {
  display: none;
}

.home-travel-card--compact {
  padding-top: 0.35rem;
  padding-bottom: 1rem;
}

.home-travel-paste-reward #home-travel-native-search[hidden],
.home-travel-paste-reward #home-travel-native-search.hidden {
  display: none !important;
}

/* When admin enables「搜尋」, show native form inside the paste-reward card */
.home-travel-paste-reward #home-travel-native-search:not([hidden]):not(.hidden) {
  display: block !important;
  margin-bottom: 0.75rem;
}

#home-travel-native-search:not([hidden]):not(.hidden) {
  display: block;
}

.home-travel-card:not(.home-travel-paste-reward) #home-travel-native-search:not([hidden]):not(.hidden) {
  display: block !important;
}

.home-travel-card.home-travel-tools-empty {
  display: none !important;
}

.home-paste-shell--no-link .home-paste-search-bar {
  display: none !important;
}

.home-travel-paste-reward.home-travel-card {
  background: #fff;
  border-radius: 20px;
  padding: 0.85rem 0.75rem 1rem;
  margin-top: 0.35rem;
  box-shadow: 0 8px 28px rgb(15 23 42 / 8%);
}

/* ── 貼貼賞 Mall 版面（HKTVmall 風格） ── */
.home-paste-shell {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
}

.home-paste-search-bar {
  margin-bottom: 0.15rem;
}

.home-paste-search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.45rem 0.45rem 0.75rem;
  border-radius: 999px;
  background: #f3f4f8;
  border: 1px solid rgb(15 23 42 / 8%);
}

.home-paste-search-icon {
  flex-shrink: 0;
  color: #9ca3af;
}

.home-paste-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  color: var(--color-brand-navy, #1b264f);
  outline: none;
}

.home-paste-search-input::placeholder {
  color: #9ca3af;
}

.home-paste-search-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-brand-blue, #5b7fff);
  cursor: pointer;
}

.home-travel-paste-panel {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.home-travel-paste-panel .travel-paste-field.home-paste-search-field {
  margin-bottom: 0;
  border-radius: 999px;
  background: #f3f4f8;
  border-color: rgb(15 23 42 / 8%);
}

.home-paste-compare-btn {
  width: 100%;
  margin-top: 0.1rem;
  border-radius: 999px;
  background: var(--color-brand-blue, #5b7fff);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.8rem 1rem;
}

.home-paste-compare-btn.travel-paste-cta {
  background: var(--color-brand-blue, #5b7fff);
  border-radius: 999px;
}

.home-paste-fullpage-link {
  margin: 0.15rem 0 0;
  text-align: center;
}

.home-paste-fullpage-link a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-brand-blue, #5b7fff);
  text-decoration: none;
}

.home-paste-fullpage-link a:hover {
  text-decoration: underline;
}

.home-paste-banner-mount[hidden],
.home-paste-merchant-mount[hidden],
.home-paste-promo-mount[hidden],
.home-paste-new-mount[hidden] {
  display: none !important;
}

.home-paste-banner-carousel {
  position: relative;
}

.home-paste-banner-track {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.15rem;
}

.home-paste-banner-track::-webkit-scrollbar {
  display: none;
}

.home-paste-banner-slide {
  flex: 0 0 88%;
  scroll-snap-align: center;
  min-height: 7.5rem;
  border-radius: 20px;
  padding: 1rem 1.1rem;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgb(15 23 42 / 14%);
  position: relative;
  overflow: hidden;
}

.home-paste-banner-logo,
.home-paste-banner-logo-fallback {
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.55rem;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.home-paste-banner-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: #1b264f;
}

.home-paste-banner-slide.has-image .home-paste-banner-logo,
.home-paste-banner-slide.has-image .home-paste-banner-logo-fallback {
  display: none;
}

.home-paste-banner-slide.has-image .home-paste-banner-slide-body,
.home-paste-promo-card.has-image .home-paste-promo-title,
.home-paste-promo-card.has-image .home-paste-promo-name {
  text-shadow: 0 1px 10px rgb(0 0 0 / 45%);
}

.home-paste-merchant-tile--link {
  text-decoration: none;
  color: inherit;
}

.home-paste-promo-card.has-image .home-paste-promo-logo,
.home-paste-promo-card.has-image .home-paste-promo-logo-fallback {
  display: none;
}

.home-paste-banner-slide-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 5.5rem;
  justify-content: flex-end;
}

.home-paste-banner-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.9;
}

.home-paste-banner-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
}

.home-paste-banner-sub {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  opacity: 0.95;
}

.home-paste-banner-price {
  margin: 0.15rem 0 0;
  font-size: 1rem;
  font-weight: 800;
}

.home-paste-banner-meta {
  position: absolute;
  right: 0.85rem;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 35%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.home-paste-banner-meta-sep {
  opacity: 0.7;
}

.home-paste-section-title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--color-brand-navy, #1b264f);
}

.home-paste-merchant-section + .home-paste-merchant-section {
  margin-top: 0.15rem;
}

.home-paste-merchant-scroll {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.2rem;
}

.home-paste-merchant-scroll::-webkit-scrollbar {
  display: none;
}

.home-paste-merchant-tile {
  flex: 0 0 calc(20% - 0.45rem);
  min-width: 4.35rem;
  max-width: 5.25rem;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: center;
  scroll-snap-align: start;
}

.home-paste-merchant-icon-wrap {
  position: relative;
  margin-bottom: 0.35rem;
}

.home-paste-merchant-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 2;
  max-width: 3.2rem;
  padding: 0.12rem 0.28rem;
  border-radius: 6px;
  background: linear-gradient(135deg, #ff914d 0%, #ff5c5c 100%);
  color: #fff;
  font-size: 0.48rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 2px 6px rgb(255 92 92 / 35%);
}

.home-paste-merchant-icon {
  aspect-ratio: 1;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgb(15 23 42 / 8%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
}

.home-paste-merchant-logo {
  width: 68%;
  height: 68%;
  object-fit: contain;
}

.home-paste-merchant-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  background: var(--color-primary, #5b7fff);
}

.home-paste-merchant-name {
  display: block;
  margin-bottom: 0.1rem;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.2;
  color: #6b7289;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-paste-merchant-rate {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-brand-navy, #1b264f);
}

.home-paste-promo-scroll {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.15rem 0 0.25rem;
}

.home-paste-promo-scroll::-webkit-scrollbar {
  display: none;
}

.home-paste-promo-card {
  flex: 0 0 8.75rem;
  height: 11.25rem;
  border-radius: 18px;
  padding: 0.85rem 0.75rem;
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  scroll-snap-align: start;
  box-shadow: 0 10px 22px rgb(15 23 42 / 16%);
}

.home-paste-promo-logo {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  border-radius: 10px;
  background: rgb(255 255 255 / 18%);
  padding: 0.25rem;
}

.home-paste-promo-logo-fallback {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255 / 22%);
  font-size: 1.1rem;
  font-weight: 800;
}

.home-paste-promo-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}

.home-paste-promo-name {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.92;
}

.home-paste-shell .home-cashback-explainer-mount {
  margin-top: 0.15rem;
}

.home-paste-edit-placeholder {
  min-height: 4.5rem;
  border: 2px dashed rgb(91 127 255 / 35%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  color: #6b7289;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  background: rgb(91 127 255 / 4%);
  pointer-events: none;
}

html.site-edit-mode .home-paste-edit-placeholder {
  pointer-events: none;
}

/* 貼貼賞商戶區 — hero 下方白底欄 */
.home-paste-extras {
  display: none;
}

.home-paste-extras:not([hidden]) {
  display: block;
}

.home-paste-extras-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgb(15 23 42 / 6%);
  box-shadow: 0 8px 24px rgb(15 23 42 / 6%);
  padding: 1rem 0.85rem 1.25rem;
  text-align: left;
  position: relative;
  z-index: 1;
}

.home-paste-banner-mount,
.home-paste-merchant-mount,
.home-paste-promo-mount,
.home-paste-new-mount,
.home-cashback-explainer-mount {
  position: relative;
  width: 100%;
}

.home-shell.home-mode-paste .home-paste-extras-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  margin-top: -1px;
  box-shadow: none;
}

@media (max-width: 768px) {
  .home-shell.home-mode-paste .home-paste-extras {
    margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px)));
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  }

  .home-shell.home-mode-paste .home-paste-extras-card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 480px) {
  .home-paste-merchant-tile {
    flex-basis: calc(16.666% - 0.5rem);
    min-width: 4.75rem;
    max-width: 5.75rem;
  }

  .home-paste-banner-slide {
    flex-basis: 72%;
  }
}

.home-travel-paste-reward .gotooi-recommended {
  margin-top: 0;
}

.home-travel-paste-reward .gotooi-recommended-outer {
  padding: 0.35rem;
}

.home-travel-paste-reward .home-travel-paste-block {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgb(91 127 255 / 12%);
}

.home-paste-sticker-brand {
  margin-bottom: 0.35rem;
}

.home-paste-sticker-brand .gotooi-paste-sticker--brand {
  position: relative;
  top: 0;
  left: 0;
  display: inline-block;
  max-width: 120px;
}

.home-paste-sticker-brand .gotooi-paste-sticker--brand .gotooi-paste-sticker-svg {
  width: 96px;
}

.home-paste-sticker-brand .gotooi-paste-sticker--brand .gotooi-paste-sticker-text {
  font-size: 0.72rem;
  padding-bottom: 4px;
}

.home-travel-paste-block {
  margin-top: 0.35rem;
}

.home-travel-card--compact .home-travel-paste-block {
  margin-top: 0;
}

.home-travel-paste-label {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-brand-navy);
  text-align: left;
}

.home-travel-paste-hint {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: left;
}

.home-travel-card--compact .home-travel-paste-entry {
  display: none;
}

.home-travel-card--compact .home-travel-paste-panel {
  margin-top: 0;
}

.home-travel-trust-badge {
  margin: 0.65rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.home-merchant-carousel-mount {
  margin-top: 1rem;
  padding-bottom: 0.35rem;
}

.home-travel-flight-cta {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.home-travel-mode-block.hidden {
  display: none !important;
}

.home-merchant-carousel-mount {
  margin-top: 0.5rem;
}

.home-merchant-promo-mount {
  margin-top: 0.65rem;
}

.home-merchant-promo-mount .travel-flash-banner {
  margin: 0;
  background: linear-gradient(135deg, #eef2ff 0%, #f7f8fc 100%);
  border: 1px solid #c7d2fe;
  color: var(--color-brand-navy, #1b264f);
}

.home-merchant-promo-mount .travel-flash-badge {
  background: var(--color-brand-blue, #5b7fff);
}

.home-merchant-promo-mount .travel-flash-countdown {
  color: var(--color-brand-blue, #5b7fff);
}

/* HKTVmall 風格商戶網格 + 貼貼賞 — GoTooi 品牌色 */
.gotooi-recommended {
  margin-top: 0.65rem;
}

.gotooi-recommended-outer {
  border-radius: 20px;
  padding: 0.5rem;
  background: linear-gradient(135deg, #eef2ff 0%, #e8edff 100%);
}

.gotooi-recommended-panel {
  background: #fff;
  border-radius: 16px;
  padding: 1rem 1rem 0.75rem;
}

.gotooi-recommended-title {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--color-brand-navy, #1b264f);
}

.gotooi-recommended-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem 0.5rem;
}

.gotooi-rec-card {
  min-width: 0;
  text-align: center;
}

.gotooi-rec-logo-stage {
  position: relative;
  margin-bottom: 0.4rem;
}

.gotooi-paste-sticker {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 3;
  display: inline-block;
  max-width: 88px;
  pointer-events: none;
}

.gotooi-paste-sticker-svg {
  display: block;
  width: 72px;
  height: auto;
}

.gotooi-paste-sticker-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px 6px;
  color: #fff;
  font-size: 0.52rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.gotooi-paste-sticker--brand {
  position: relative;
  top: 0;
  left: 0;
  max-width: 120px;
  pointer-events: auto;
}

.gotooi-paste-sticker--brand .gotooi-paste-sticker-svg {
  width: 96px;
}

.gotooi-paste-sticker--brand .gotooi-paste-sticker-text {
  font-size: 0.72rem;
  padding-bottom: 4px;
}

.gotooi-rec-logo {
  aspect-ratio: 1;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gotooi-rec-logo-img {
  width: 62%;
  height: 62%;
  object-fit: contain;
}

.gotooi-rec-logo-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 1.75rem;
  font-weight: 800;
}

.gotooi-rec-name {
  margin: 0 0 0.12rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #6b7289;
}

.gotooi-rec-rate {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-brand-navy, #1b264f);
}

@media (max-width: 359px) {
  .gotooi-recommended-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 480px) {
  .gotooi-recommended-grid {
    gap: 0.85rem 0.65rem;
  }

  .gotooi-paste-sticker-svg {
    width: 80px;
  }

  .gotooi-paste-sticker-text {
    font-size: 0.6rem;
  }
}

.home-merchant-carousel-title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-brand-navy);
  text-align: left;
}

.home-merchant-track {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.home-merchant-track-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.home-merchant-card {
  width: 8.25rem;
  padding: 0.65rem 0.65rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  text-align: center;
}

.home-merchant-logo {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 0.45rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.home-merchant-logo-img {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.home-merchant-logo-placeholder {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
}

.home-merchant-name {
  margin: 0;
  min-height: 2.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-brand-navy);
  line-height: 1.25;
}

.home-merchant-cashback {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Shared merchant brand logos (wallet, paste, carousel) */
.merchant-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.merchant-brand-logo--sm {
  width: 2.25rem;
  height: 2.25rem;
}

.merchant-brand-logo--md {
  width: 3.5rem;
  height: 3.5rem;
}

.merchant-brand-logo-img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.merchant-brand-logo-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
}

.merchant-brand-logo--fallback .merchant-brand-logo-fallback {
  display: inline-flex;
}

.merchant-brand-logo--fallback .merchant-brand-logo-img {
  display: none;
}

.wallet-tx-logo-wrap.merchant-brand-logo--sm {
  margin-right: 0;
}

/* Gemini-style cashback explainer (ShopBack model) */
.home-cashback-explainer-mount {
  margin-top: 0.65rem;
}

.cashback-explainer-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 0.35rem 0;
  border: 0;
  background: transparent;
  color: var(--color-brand-blue, #5b7fff);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.cashback-explainer-toggle:hover {
  opacity: 0.85;
}

.cashback-explainer-chevron {
  font-size: 0.65rem;
}

.cashback-explainer-gemini {
  margin-top: 0.5rem;
  padding: 1rem 1.05rem;
  border-radius: var(--radius-md, 16px);
  background: #0f0f0f;
  color: #f3f4f6;
  text-align: left;
}

.cashback-explainer-title {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #f3f4f6;
  line-height: 1.45;
}

.cashback-explainer-section + .cashback-explainer-section {
  margin-top: 0.85rem;
}

.cashback-explainer-heading {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.45;
}

.cashback-explainer-body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #d1d5db;
}

.cashback-explainer-merchants {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.55rem;
}

.cashback-explainer-merchant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 4rem;
}

.cashback-explainer-merchant-logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  object-fit: contain;
  background: #1f2937;
}

.cashback-explainer-merchant-fallback {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
}

.cashback-explainer-merchant-name {
  font-size: 0.62rem;
  color: #9ca3af;
  text-align: center;
  line-height: 1.2;
}

/* Flight vs hotel chrome — mirrors /travel; overrides .hidden when data-type is set */
#home-travel-search-form[data-type="flight"] #home-travel-trip-type-row {
  display: flex !important;
}

#home-travel-search-form[data-type="flight"] #home-travel-flight-locs {
  display: grid !important;
}

#home-travel-search-form[data-type="flight"] #home-travel-dest-single-pill {
  display: none !important;
}

#home-travel-search-form[data-type="hotel"] #home-travel-trip-type-row,
#home-travel-search-form[data-type="hotel"] #home-travel-flight-locs {
  display: none !important;
}

#home-travel-search-form[data-type="hotel"] #home-travel-dest-single-pill {
  display: flex !important;
}

.home-travel-card.hidden {
  display: none;
}

/* 貼貼賞模式：隱藏 hero 以外攻略區塊，保留貼貼賞白底商戶區 */
.home-shell.home-mode-paste [data-home-section]:not([data-home-section="hero"]):not([data-home-section="paste-extras"]) {
  display: none !important;
}

.home-shell.home-mode-paste [data-home-section="paste-extras"] {
  display: block !important;
}

/* Visual editor: keep every home section clickable (don't trap admin in paste-only view) */
html.site-edit-mode .home-shell.home-mode-paste [data-home-section] {
  display: block !important;
}

html.site-edit-mode #home-paste-extras,
html.site-edit-mode #home-paste-extras[hidden],
html.site-edit-mode #home-paste-extras.hidden {
  display: block !important;
  visibility: visible !important;
}

html.site-edit-mode .home-shell.home-mode-paste [data-home-section="cat-icons"].is-disabled {
  display: none !important;
}

.home-shell.home-mode-paste .home-paste-extras:not(:has([id$="-mount"]:not([hidden]))) {
  display: none !important;
}

.home-shell.home-mode-paste .home-hero {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Paste mode: keep time-of-day hero gradient; only cards go white/dark-surface */
.home-shell.home-mode-paste .home-hero-bg,
.home-shell.home-mode-paste .home-hero-visual {
  opacity: 1;
}

/* @deprecated — 保留舊 class 相容 */
.home-shell.home-mode-travel .home-content-only {
  display: none !important;
}

.home-travel-form {
  display: flex;
  flex-direction: column;
}

.home-travel-form.hidden {
  display: none;
}

.home-travel-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgb(15 23 42 / 8%);
  min-height: 3.25rem;
}

.home-travel-row-icon {
  flex: 0 0 auto;
  color: #64748b;
  display: inline-flex;
}

.home-travel-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: #0f172a;
  padding: 0;
}

.home-travel-input:focus {
  outline: none;
}

.home-travel-input::placeholder {
  color: #94a3b8;
}

.home-travel-date-fields {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
}

.home-travel-date-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f172a;
  padding: 0;
}

.home-travel-date-input:focus {
  outline: none;
}

.home-travel-date-sep {
  color: #94a3b8;
  flex: 0 0 auto;
}

.home-travel-date-sep.hidden,
.home-travel-date-input.hidden {
  display: none;
}

.home-travel-meta {
  flex: 0 0 auto;
  font-size: 0.82rem;
  color: #64748b;
  white-space: nowrap;
}

.home-travel-guest-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  flex: 1 1 auto;
  font-size: 0.92rem;
  color: #334155;
}

.home-travel-guest-summary strong {
  color: #0f172a;
}

.home-travel-edit-guests {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--color-primary, #5b7fff);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0;
}

.home-travel-guest-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.65rem 1rem 0.85rem;
  border-bottom: 1px solid rgb(15 23 42 / 8%);
  background: #f8fafc;
}

.home-travel-guest-picker.hidden {
  display: none;
}

.home-travel-guest-picker label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #64748b;
}

.home-travel-guest-picker input {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid rgb(15 23 42 / 12%);
  border-radius: 8px;
  font: inherit;
}

.home-travel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgb(15 23 42 / 8%);
}

.home-travel-chip {
  border: 1px solid rgb(15 23 42 / 12%);
  background: #f8fafc;
  color: #334155;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.home-travel-chip.active {
  background: rgb(91 127 255 / 12%);
  border-color: rgb(91 127 255 / 35%);
  color: var(--color-primary, #5b7fff);
}

.home-travel-submit {
  margin: 0.85rem 1rem 1rem;
  width: calc(100% - 2rem);
  border: none;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: var(--color-primary, #5b7fff);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgb(91 127 255 / 28%);
}

.home-travel-submit:hover {
  filter: brightness(1.05);
}

.home-flight-trip {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 1rem 0;
  border-bottom: 1px solid rgb(15 23 42 / 8%);
}

.home-flight-trip-btn {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748b;
  padding: 0.35rem 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.home-flight-trip-btn.active {
  color: var(--color-primary, #5b7fff);
  border-bottom-color: var(--color-primary, #5b7fff);
}

.home-travel-locations {
  position: relative;
}

.home-flight-swap {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgb(15 23 42 / 12%);
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(15 23 42 / 8%);
}

.home-travel-row--cabin {
  border-bottom: none;
}

.home-travel-cabin {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  padding: 0;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 1.25rem;
}

.home-travel-row--suggest {
  position: relative;
  z-index: 25;
}

.home-travel-suggestions {
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
}

.home-search {
  max-width: 100%;
  margin-inline: auto;
  padding: 0.45rem 0.5rem;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  border: none;
  box-shadow: 0 8px 32px rgb(91 127 255 / 10%);
  transition: background 0.8s ease, box-shadow 0.8s ease;
  position: relative;
  z-index: 20;
}

.home-search-field {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
  min-width: 0;
  min-height: 48px;
  padding-inline: 0.35rem 0.45rem;
}

.home-search-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline-start: 0.45rem;
  color: var(--color-text-muted);
  pointer-events: none;
}

.home-search-suggestions {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: -0.35rem;
  right: -0.35rem;
  z-index: 50;
  max-height: min(70vh, 22rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid rgb(91 127 255 / 14%);
  border-radius: var(--card-radius);
  box-shadow: 0 12px 40px rgb(15 23 42 / 14%);
  padding: 0.35rem 0;
  text-align: left;
}

.home-search-suggestions[hidden] { display: none; }

.home-search-suggestion-group + .home-search-suggestion-group {
  border-top: 1px solid var(--color-border, rgb(15 23 42 / 8%));
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

.home-search-suggestion-heading {
  margin: 0;
  padding: 0.35rem 0.85rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.home-search-suggestion {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
}

.home-search-suggestion:hover,
.home-search-suggestion.is-active {
  background: rgb(91 127 255 / 8%);
}

.home-search-suggestion-icon {
  flex: 0 0 auto;
  color: var(--color-primary);
  opacity: 0.85;
}

.home-search-suggestion-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.home-search-suggestion-label {
  font-weight: 600;
  line-height: 1.35;
}

.home-search-suggestion-sub {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-search-mark {
  background: rgb(91 127 255 / 18%);
  color: inherit;
  border-radius: 2px;
  padding: 0 0.05em;
}

[data-theme='dark'] .home-search-suggestions {
  background: rgb(26 34 66 / 98%);
  border-color: rgb(139 168 255 / 32%);
  box-shadow: 0 12px 40px rgb(0 0 0 / 42%);
}

[data-theme='dark'] .home-search-suggestion:hover,
[data-theme='dark'] .home-search-suggestion.is-active {
  background: rgb(91 127 255 / 16%);
}

[data-theme='dark'] .home-search,
[data-theme='dark'] .home-hero .home-search {
  background: rgb(26 34 66 / 96%);
  border: none;
  box-shadow: 0 8px 32px rgb(0 0 0 / 28%);
}

[data-theme='dark'] .home-search-icon {
  color: rgb(197 206 232 / 92%);
}

[data-theme='dark'] .home-search-input {
  color: var(--color-text);
}

.home-search-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.home-search-ghost {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.65rem 0.35rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-search-ghost.is-hidden { display: none; }

.home-search-ghost-term {
  color: var(--color-text);
  font-weight: 600;
}

.home-search-ghost-term.is-entering {
  animation: home-search-carousel-in 0.35s ease;
}

.home-search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent !important;
  padding: 0.65rem 0.35rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text);
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
}

.home-search-input:placeholder-shown:not(:focus) {
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
}

.home-search-input:focus {
  caret-color: var(--color-text);
  outline: none;
}

.home-search-input::placeholder {
  color: transparent;
  opacity: 0;
}

.home-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.home-search-btn {
  flex: 0 0 auto;
  padding: 0.55rem 1.15rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
  min-height: 42px;
  white-space: nowrap;
}

[data-theme='dark'] .home-search-btn {
  background: #8ba8ff;
  color: #0f1428;
}

/* Hero 搜尋輪播建議 */
.home-search-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.9rem;
  min-height: 2.5rem;
}

.home-search-carousel[hidden] { display: none; }

.home-search-carousel-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

[data-theme='dark'] .home-hero--dusk .home-search-carousel-label,
[data-theme='dark'] .home-hero--night .home-search-carousel-label,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-search-carousel-label,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-search-carousel-label {
  color: rgb(255 255 255 / 72%);
}

.home-search-carousel-viewport {
  display: flex;
  justify-content: center;
  min-height: 2.1rem;
}

.home-search-carousel-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.1rem;
  border: 1px solid rgb(91 127 255 / 28%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 88%);
  color: var(--color-teal-dark, #3d5ccc);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgb(91 127 255 / 10%);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  max-width: min(100%, 20rem);
}

[data-theme='dark'] .home-hero--dusk .home-search-carousel-pill,
[data-theme='dark'] .home-hero--night .home-search-carousel-pill,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-search-carousel-pill,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-search-carousel-pill {
  background: rgb(255 255 255 / 12%);
  border-color: rgb(255 255 255 / 22%);
  color: #fff;
  backdrop-filter: blur(8px);
}

.home-search-carousel-pill:hover {
  background: rgb(91 127 255 / 10%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgb(91 127 255 / 14%);
}

[data-theme='dark'] .home-hero--dusk .home-search-carousel-pill:hover,
[data-theme='dark'] .home-hero--night .home-search-carousel-pill:hover,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-search-carousel-pill:hover,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-search-carousel-pill:hover {
  background: rgb(255 255 255 / 20%);
}

.home-search-carousel-pill:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.home-search-carousel-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16rem;
}

.home-search-carousel-text.is-entering {
  animation: home-search-carousel-in 0.35s ease;
}

@keyframes home-search-carousel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.home-search-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.home-search-carousel-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(91 127 255 / 28%);
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.home-hero--dusk .home-search-carousel-dot,
.home-hero--night .home-search-carousel-dot,
[data-hero-period='dusk'] .home-hero .home-search-carousel-dot,
[data-hero-period='night'] .home-hero .home-search-carousel-dot {
  background: rgb(255 255 255 / 35%);
}

.home-search-carousel-dot.is-active {
  background: var(--color-primary);
  transform: scale(1.25);
}

.home-hero--dusk .home-search-carousel-dot.is-active,
.home-hero--night .home-search-carousel-dot.is-active,
[data-hero-period='dusk'] .home-hero .home-search-carousel-dot.is-active,
[data-hero-period='night'] .home-hero .home-search-carousel-dot.is-active {
  background: #fff;
}

.home-search-carousel-dot:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Category icons — visibility controlled by .is-disabled (site setting) */
.home-cat-icons {
  display: none;
  position: relative;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
}

.home-cat-icons.is-disabled {
  display: none !important;
}

.home-cat-icons:not(.is-disabled) {
  display: grid;
}

.home-cat-icons:not(.is-disabled):has(> .home-cat-icons-beta) {
  padding-top: 1.05rem;
}

/* Centered above the whole icon row — not a grid cell */
.home-cat-icons-beta {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  margin-left: 0;
  grid-column: 1 / -1;
  width: max-content;
  max-width: calc(100% - 1rem);
  box-shadow: var(--shadow-sm);
}

.home-cat-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
}

.home-cat-icon-circle {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  border-radius: var(--card-radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s;
}

.home-cat-icon:active .home-cat-icon-circle { transform: scale(0.94); }

/* Hot tags */
.home-tags-section { margin-bottom: 0.25rem; }

.home-section-title {
  margin: 0;
  font-size: clamp(1.05rem, 3vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.home-section-title--sm {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.65rem;
  font-weight: 600;
}

.home-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.home-section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.home-section-head-row .home-section-title {
  margin-bottom: 0;
}

.home-section-more {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.home-section-foot {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

.home-scroll-row {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)));
  margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px)));
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.home-scroll-row::-webkit-scrollbar { display: none; }

.home-hot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.home-hot-tag {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.home-hot-tag:hover {
  background: var(--color-teal-muted);
  color: var(--color-teal-dark);
  text-decoration: none;
}

/* 橫向排版：膠囊 / 輪播 / 瀑布 */
.home-hscroll-track,
.home-hscroll-waterfall {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.35rem;
}

.home-hscroll-track::-webkit-scrollbar,
.home-hscroll-waterfall::-webkit-scrollbar { display: none; }

.home-hscroll-waterfall {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: end;
  gap: 0.65rem 0.75rem;
}

.home-hscroll-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 132px;
  padding: 0.85rem 1rem;
  border-radius: var(--card-radius);
  background: linear-gradient(135deg, var(--color-primary-light, #eef2ff), #fff);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  box-shadow: var(--shadow-sm, 0 1px 3px rgb(0 0 0 / 8%));
}

.home-hscroll-card--tag .home-hscroll-card-label {
  font-size: 0.9rem;
  font-weight: 700;
}

.home-hscroll-tile {
  scroll-snap-align: start;
  display: flex;
  align-items: flex-end;
  padding: 0.75rem 0.9rem;
  border-radius: var(--card-radius);
  background: linear-gradient(145deg, #5b7fff, #1b264f);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow);
}

.home-hscroll-tile--tall { width: 148px; height: 118px; }
.home-hscroll-tile--mid { width: 132px; height: 96px; }
.home-hscroll-tile--short { width: 120px; height: 78px; }

.home-hscroll-tile-label {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
}

.home-hot-tags--promo-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.home-hot-tags--promo-row::-webkit-scrollbar { display: none; }

.home-hot-tag--promo,
.home-hot-tag--rank {
  background: linear-gradient(135deg, #eef2ff, #fff);
  border-color: rgb(91 127 255 / 35%);
}

.home-hscroll--chips .home-activity-wrap .home-carousel-btn { display: none; }

.home-hscroll--waterfall .activity-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 0;
}

.home-hscroll--waterfall .activity-card--tall { flex-basis: min(78vw, 280px); min-height: 220px; }
.home-hscroll--waterfall .activity-card--mid { flex-basis: min(68vw, 240px); min-height: 190px; }
.home-hscroll--waterfall .activity-card--short { flex-basis: min(58vw, 210px); min-height: 168px; }

.home-rank-grid--hscroll {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.home-rank-hscroll-block { min-width: 0; }

.home-rank-hscroll-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  width: 168px;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--surface-1, #fff);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm, 0 1px 3px rgb(0 0 0 / 8%));
}

.home-rank-hscroll-card--uniform { width: 176px; }
.home-rank-hscroll-card--tall,
.home-rank-hscroll-card--mid,
.home-rank-hscroll-card--short { width: 188px; }

.home-rank-hscroll-cover {
  height: 96px;
  background: linear-gradient(135deg, #5b7fff, #a5b4fc);
  background-size: cover;
  background-position: center;
}

.home-rank-hscroll-card--tall .home-rank-hscroll-cover,
.home-rank-hscroll-card--mid .home-rank-hscroll-cover,
.home-rank-hscroll-card--short .home-rank-hscroll-cover { height: 118px; }

/* Rank waterfall: single uniform row */
.home-rank-hscroll-block .home-hscroll-waterfall {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.home-rank-hscroll-body {
  padding: 0.65rem 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.home-rank-hscroll-num {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-primary);
}

.home-rank-hscroll-title {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-rank-hscroll-meta {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* Rankings — unified 3D coverflow carousel */
.home-rank-grid--coverflow {
  display: block !important;
  grid-template-columns: none !important;
}

.home-rank-loading {
  margin: 0;
  padding: 1rem 0;
}

.home-rank-coverflow-shell {
  min-width: 0;
}

.home-rank-coverflow-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  margin-bottom: 0.85rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 900px) {
  .home-rank-coverflow-tabs {
    justify-content: stretch;
    gap: 0.65rem;
    overflow: visible;
    margin-bottom: 1rem;
  }

  .home-rank-coverflow-tab {
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
  }
}

.home-rank-coverflow-tabs::-webkit-scrollbar { display: none; }

.home-rank-coverflow-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.home-rank-coverflow-tab.is-active {
  background: var(--color-primary-light, #eef2ff);
  border-color: rgb(91 127 255 / 45%);
  color: var(--color-primary);
}

.home-rank-coverflow-tab-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
}

.home-rank-coverflow-tab-icon .icon {
  width: 1rem;
  height: 1rem;
  display: block;
  overflow: visible;
}

.home-rank-coverflow-wrap {
  position: relative;
  width: 100%;
}

.home-rank-coverflow {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap, 1rem);
  width: 100%;
  overflow: visible;
  padding: 0;
  margin: 0;
}

.home-rank-coverflow-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 28px rgb(15 23 42 / 12%);
  position: relative;
}

.home-rank-coverflow-card.is-active {
  box-shadow: 0 16px 40px rgb(91 127 255 / 22%);
  border-color: rgb(91 127 255 / 35%);
}

.home-rank-coverflow-cover {
  height: min(52vw, 200px);
  background: linear-gradient(135deg, #5b7fff, #a5b4fc);
  background-size: cover;
  background-position: center;
  position: relative;
  flex-shrink: 0;
}

.home-rank-coverflow-num {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  z-index: 1;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-primary);
  background: rgb(255 255 255 / 92%);
}

.home-rank-coverflow-cat {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  max-width: calc(100% - 3rem);
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgb(255 255 255 / 92%);
  color: var(--color-text);
  box-shadow: 0 2px 8px rgb(15 23 42 / 10%);
}

.home-rank-coverflow-cat-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  overflow: visible;
}

.home-rank-coverflow-cat-icon .icon {
  width: 0.85rem;
  height: 0.85rem;
  display: block;
  overflow: visible;
  flex-shrink: 0;
}

.home-rank-coverflow-cat-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-rank-coverflow-body {
  padding: 0.75rem 0.85rem 0.9rem;
}

.home-rank-coverflow-title {
  margin: 0 0 0.25rem;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-rank-coverflow-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.home-rank-author {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.45rem;
  margin: 0.15rem 0 0.25rem;
  min-width: 0;
}

.home-rank-author-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.home-rank-author-handle {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
}

.home-rank-author-handle:hover {
  color: var(--color-primary);
}

.home-rank-hscroll-body .home-rank-author {
  margin: 0.1rem 0 0.2rem;
}

.home-rank-coverflow-nav {
  display: none;
}

@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  .home-rank-coverflow {
    flex-flow: row nowrap;
    align-items: stretch;
  }

  .home-rank-coverflow-card {
    flex: 1 1 0;
    min-width: 0;
  }

  .home-rank-coverflow-cover {
    height: clamp(140px, 14vw, 200px);
  }
}

@media (max-width: 1024px), ((hover: none) and (pointer: coarse)) {
  .home-rank-coverflow {
    flex-flow: row nowrap;
    align-items: stretch;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }

  .home-rank-coverflow::-webkit-scrollbar {
    display: none;
  }

  .home-rank-coverflow-card {
    flex: 0 0 min(88vw, 320px);
    scroll-snap-align: start;
  }

  .home-rank-coverflow-cover {
    height: min(52vw, 200px);
  }
}

.home-hscroll--chips .home-scroll-row .home-hot-tags { flex-wrap: nowrap; }

/* Trip-style discovery slider */
.home-discovery { position: relative; margin-bottom: 0.25rem; }

.home-discovery-title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.15rem, 3.2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.discovery-slider-wrap {
  position: relative;
  margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)));
  margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px)));
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.discovery-slider {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.2rem;
  outline: none;
}

.discovery-slider::-webkit-scrollbar { display: none; }

.discovery-card {
  flex: 0 0 clamp(132px, 34vw, 180px);
  scroll-snap-align: start;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  border-radius: 12px;
  transition: transform 0.2s;
}

.discovery-card.is-active .discovery-card-media {
  box-shadow: 0 0 0 2px var(--color-primary), 0 4px 14px rgb(91 127 255 / 18%);
}

.discovery-card:focus-visible .discovery-card-media {
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px rgb(91 127 255 / 20%);
}

.discovery-card-media {
  position: relative;
  height: clamp(88px, 22vw, 112px);
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
}

.discovery-card-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discovery-card-media.is-img-failed .discovery-card-img { display: none; }

.discovery-card-media.discovery-card--hk { background: linear-gradient(160deg, #5b7fff, #7b9cff); }
.discovery-card-media.discovery-card--jp { background: linear-gradient(160deg, #e11d48, #fb7185); }
.discovery-card-media.discovery-card--sz { background: linear-gradient(160deg, #2563eb, #60a5fa); }
.discovery-card-media.discovery-card--tokyo { background: linear-gradient(160deg, #7c3aed, #a78bfa); }
.discovery-card-media.discovery-card--mo { background: linear-gradient(160deg, #ca8a04, #facc15); }
.discovery-card-media.discovery-card--tw { background: linear-gradient(160deg, #059669, #34d399); }
.discovery-card-media.discovery-card--eu { background: linear-gradient(160deg, #4338ca, #818cf8); }
.discovery-card-media.discovery-card--kr { background: linear-gradient(160deg, #db2777, #f472b6); }
.discovery-card-media.discovery-card--osaka { background: linear-gradient(160deg, #ea580c, #fb923c); }

.discovery-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgb(0 0 0 / 62%) 100%);
}

.discovery-card-badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 1;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--color-text);
  background: rgb(255 255 255 / 88%);
}

.discovery-card-name {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.45rem;
  z-index: 1;
  font-size: clamp(0.82rem, 2.4vw, 0.95rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgb(0 0 0 / 35%);
}

.discovery-pointer {
  position: absolute;
  left: 0;
  top: calc(100% - 0.15rem);
  width: 0;
  height: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, left 0.25s ease;
}

.discovery-pointer.is-visible { opacity: 1; }

.discovery-pointer::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 8px solid var(--color-primary);
}

.discovery-slider-btn {
  position: absolute;
  right: max(var(--gutter), env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--color-text);
}

/* Attractions grid */
.home-attractions { margin-top: 1.25rem; }

.home-attractions > .home-section-title { margin-bottom: 1rem; }

.discovery-attractions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.discovery-attraction-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgb(0 0 0 / 8%);
}

.discovery-attraction-link {
  display: block;
  text-decoration: none;
  color: #fff;
}

.discovery-attraction-link:hover { text-decoration: none; color: #fff; }

.discovery-attraction-cover {
  aspect-ratio: 3 / 4;
  background: var(--color-teal-muted);
}

.discovery-attraction-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.discovery-attraction-ph {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: linear-gradient(160deg, var(--color-teal-light), #dbeafe);
}

.discovery-attraction-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.75rem;
  background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 72%) 100%);
  pointer-events: none;
}

.discovery-attraction-badge {
  align-self: flex-start;
  margin-bottom: auto;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #1f2937;
  background: linear-gradient(90deg, #fde68a, #fbbf24);
}

.discovery-attraction-location {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.35rem;
  padding: 0.18rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 600;
  background: rgb(255 255 255 / 22%);
  backdrop-filter: blur(4px);
}

.discovery-attraction-score {
  align-self: flex-start;
  margin-bottom: 0.35rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  background: rgb(234 88 12 / 85%);
}

.discovery-attraction-title {
  margin: 0 0 0.25rem;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.discovery-attraction-rating {
  margin: 0;
  font-size: 0.72rem;
  opacity: 0.92;
}

.discovery-attraction-heart {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 92%);
  color: var(--color-text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
  transition: color 0.2s, transform 0.15s;
}

.discovery-attraction-heart.is-saved { color: #e11d48; }

.discovery-attraction-heart:active { transform: scale(0.92); }

/* Scroll-to-top FAB */
.home-fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  z-index: 110;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 4px 20px rgb(0 0 0 / 12%);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: opacity 0.2s, transform 0.2s;
}

.home-fab:not(.hidden) { animation: home-fab-in 0.25s ease; }

@keyframes home-fab-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

html.has-mobile-tabs .home-fab {
  bottom: calc(0.5rem + var(--mobile-tab-h, 64px) + 1rem + env(safe-area-inset-bottom, 0px));
  z-index: 110;
}

@media (min-width: 769px) {
  .home-fab { bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
  html.has-mobile-tabs .home-fab {
    bottom: calc(0.5rem + var(--mobile-tab-h, 64px) + 1rem + env(safe-area-inset-bottom, 0px));
  }
  .discovery-attractions-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-stream,
  #post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (min-width: 1025px) {
  .discovery-attractions-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Legacy destination grid (kept for other pages) */
.home-dest-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
}

.dest-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 128px;
  padding: 1.15rem 0.75rem;
  border-radius: var(--card-radius);
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  text-align: center;
  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
  transition: transform 0.25s, box-shadow 0.25s;
}

.dest-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgb(0 0 0 / 14%);
  text-decoration: none;
  color: #fff;
}

.dest-card-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 0.45rem; }

.dest-card--hk { background: linear-gradient(145deg, #5b7fff, #7b9cff); }
.dest-card--jp { background: linear-gradient(145deg, #e11d48, #fb7185); }
.dest-card--sz { background: linear-gradient(145deg, #2563eb, #60a5fa); }
.dest-card--tokyo { background: linear-gradient(145deg, #7c3aed, #a78bfa); }
.dest-card--mo { background: linear-gradient(145deg, #ca8a04, #facc15); color: #1f2937; }
.dest-card--tw { background: linear-gradient(145deg, #059669, #34d399); }
.dest-card--eu { background: linear-gradient(145deg, #4338ca, #818cf8); }
.dest-card--kr { background: linear-gradient(145deg, #db2777, #f472b6); }
.dest-card--osaka { background: linear-gradient(145deg, #ea580c, #fb923c); }

/* Rankings */
.home-rank-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}

.home-rank-col {
  display: flex;
  min-width: 0;
}

.home-rank-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.15rem 0.85rem;
  border-radius: var(--card-radius);
}

.home-rank-panel-title {
  margin: 0 0 0.85rem;
  font-size: 1rem;
  font-weight: 700;
}

.home-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-rank-item { border-top: 1px solid var(--color-border); }

.home-rank-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0;
  text-decoration: none;
  color: inherit;
}

.home-rank-link:hover { color: var(--color-primary); text-decoration: none; }

.home-rank-num {
  flex-shrink: 0;
  width: 1.35rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-text-muted);
  text-align: center;
}

.home-rank-item--top1 .home-rank-num { color: #eab308; }
.home-rank-item--top2 .home-rank-num { color: #94a3b8; }
.home-rank-item--top3 .home-rank-num { color: #d97706; }

.home-rank-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.home-rank-thumb-ph {
  display: grid;
  place-items: center;
  background: var(--color-teal-muted);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.85rem;
}

.home-rank-text { min-width: 0; flex: 1; }

.home-rank-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-rank-meta { font-size: 0.75rem; color: var(--color-text-muted); }

.home-rank-empty { padding: 1rem 0; font-size: 0.9rem; }

/* Family cards — cover tag + body text */
.family-card-cover {
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(135deg, var(--color-teal-light), #dbeafe);
}

.family-card-tag {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: rgb(0 0 0 / 45%);
  backdrop-filter: blur(4px);
}

.family-card-body p {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.family-card-meta { font-size: 0.78rem; color: var(--color-text-muted); }

.home-family-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}

/* Activity carousel */
.home-section { margin-bottom: 1rem; }

.home-activity-wrap { position: relative; }

.home-activity-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}

.home-activity-track::-webkit-scrollbar { display: none; }

.activity-card {
  flex: 0 0 min(100%, 300px);
  scroll-snap-align: start;
  min-height: 200px;
  padding: 1.35rem;
  border-radius: var(--card-radius);
  text-decoration: none;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s;
}

.activity-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 15%, rgb(0 0 0 / 55%) 100%);
  z-index: 1;
}

.activity-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.activity-card--teal { background: linear-gradient(135deg, #5b7fff, #4a6ae6); }
.activity-card--purple { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.activity-card--orange { background: linear-gradient(135deg, #ea580c, #f97316); }

.activity-card-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 160px; }

.activity-card-tag {
  display: inline-block;
  margin-bottom: 0.45rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  background: rgb(255 255 255 / 22%);
}

.activity-card h3 { margin: 0 0 0.3rem; font-size: 1.1rem; font-weight: 700; }
.activity-card p { margin: 0 0 0.75rem; font-size: 0.85rem; opacity: 0.92; }

.activity-card-cta {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  background: #fff;
  color: var(--color-brand-navy);
}

.activity-card:hover { transform: translateY(-3px); color: #fff; text-decoration: none; }

.home-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.home-carousel-btn--prev { left: -0.5rem; }
.home-carousel-btn--next { right: -0.5rem; }

/* Stream feed — mobile-first 2 cols (phones + Apps) */
.home-stream,
#post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-stream > .stream-card {
  min-width: 0;
}

.stream-card-ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 2.5rem;
}

.stream-card-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.home-feed .filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.home-feed .filter-pill.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.home-feed-head {
  align-items: center;
  margin-bottom: 0.65rem;
}

.home-feed-filters {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.home-feed-filters .filter-pills-wrap {
  margin-bottom: 0;
}

.feed-topic-link-wrap {
  margin-top: -0.25rem;
}

.feed-topic-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.feed-topic-link:hover {
  text-decoration: underline;
}

.home-feed-filters .home-feed-sort {
  align-self: flex-start;
}

.home-feed-sort {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2, rgb(0 0 0 / 4%));
  border: 1px solid var(--color-border);
}

.home-sort-btn {
  padding: 0.35rem 0.85rem;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.home-sort-btn:hover {
  color: var(--color-text);
}

.home-sort-btn.active {
  color: #fff;
  background: var(--color-primary);
  box-shadow: 0 1px 3px rgb(91 127 255 / 25%);
}

.nav-app-btn {
  display: none;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-teal-dark);
  background: var(--color-teal-muted);
  border: 1px solid rgb(91 127 255 / 20%);
  text-decoration: none;
  white-space: nowrap;
}

.home-page .nav-app-btn { display: inline-flex; align-items: center; }

/* ===== Tablet ===== */
@media (max-width: 1024px) {
  .home-family-grid { grid-template-columns: repeat(2, 1fr); }
  .home-hot-tags { flex-wrap: nowrap; }
  /* Keep carousel / discovery controls on tablet+phone (swipe still works) */
  .home-carousel-btn,
  .discovery-slider-btn {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }
  .home-carousel-btn--prev { left: 0.25rem; }
  .home-carousel-btn--next { right: 0.25rem; }
  .discovery-slider-btn {
    right: max(0.5rem, env(safe-area-inset-right));
  }
}

/* Rankings — compact 3-col on narrow tablet */
@media (min-width: 640px) and (max-width: 900px) {
  .home-rank-grid { gap: 0.75rem; }
  .home-rank-panel { padding: 0.9rem 0.75rem 0.65rem; }
  .home-rank-panel-title { font-size: 0.9rem; margin-bottom: 0.65rem; }
  .home-rank-thumb { width: 36px; height: 36px; }
  .home-rank-name { font-size: 0.8rem; }
  .home-rank-link { gap: 0.45rem; padding: 0.55rem 0; }
}

/* Rankings — stack on very narrow screens */
@media (max-width: 639px) {
  .home-rank-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ===== Mobile / touch — full-bleed hero (no white side bars) ===== */
@media (max-width: 1024px), ((hover: none) and (pointer: coarse)) {
  .home-page .home-hero {
    border-radius: 0 0 22px 22px;
    border-left: none;
    border-right: none;
  }

  .home-page .home-grid > :not(.home-hero) {
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .home-grid { --grid-gap: 1rem; }

  .home-page .home-hero {
    padding-top: calc(clamp(2rem, 5vw, 3rem) + env(safe-area-inset-top, 0px) + 2.25rem);
  }

  .home-hero {
    margin: 0;
    border-radius: 0 0 22px 22px;
    border-left: none;
    border-right: none;
  }

  .home-hero-visual {
    background:
      radial-gradient(circle at 80% 20%, rgb(91 127 255 / 12%), transparent 50%);
  }

  .home-hero--day .home-hero-visual,
  [data-hero-period='day'] .home-hero .home-hero-visual {
    background:
      radial-gradient(circle at 88% 12%, rgb(255 220 100 / 35%), transparent 38%),
      radial-gradient(circle at 80% 20%, rgb(91 127 255 / 14%), transparent 50%);
  }

  .home-hero--night .home-hero-bg::before,
  [data-hero-period='night'] .home-hero .home-hero-bg::before,
  .home-hero--dusk .home-hero-bg::before,
  [data-hero-period='dusk'] .home-hero .home-hero-bg::before {
    height: 52%;
  }

  .home-search {
    border-radius: var(--card-radius);
    padding: 0.5rem 0.55rem;
  }

  .home-search-field {
    min-height: 46px;
    padding-inline: 0.3rem 0.4rem;
  }

  .home-search-suggestions {
    left: -0.4rem;
    right: -0.4rem;
    max-height: min(60vh, 18rem);
  }

  .home-search-input { padding: 0.6rem 0.25rem; font-size: 1rem; }
  .home-search-btn { padding: 0.5rem 1rem; min-height: 40px; font-size: 0.875rem; }

  .discovery-attractions-grid { gap: 0.65rem; }

  .home-family-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.85rem;
    scrollbar-width: none;
    padding-bottom: 0.35rem;
  }

  .home-family-grid::-webkit-scrollbar { display: none; }

  .family-card {
    flex: 0 0 min(88vw, 300px);
    scroll-snap-align: start;
  }

  .activity-card { flex: 0 0 min(88vw, 300px); }

  .home-section-head { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 1024px) {
  .home-stream,
  #post-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1025px) {
  .home-hot-tags { flex-wrap: wrap; }
  /* Cat icons: visibility is .is-disabled / site setting — same on desktop + mobile */
  .home-cat-icons:not(.is-disabled) {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    max-width: 56rem;
  }
}

@media (min-width: 1200px) {
  .home-dest-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1280px) {
  .home-shell--with-sidebar {
    max-width: 1440px;
    margin-inline: auto;
  }

  .home-stream,
  #post-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
  }

  .discovery-attractions-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
  }

  .home-rank-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .home-cat-icons:not(.is-disabled) {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    max-width: 64rem;
  }

  .home-section {
    margin-block: 1.75rem;
  }

  .home-travel-card,
  .home-paste-shell {
    max-width: 1180px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .dest-card:hover,
  .activity-card:hover,
  .discovery-card:hover { transform: none; }
  .dest-card:active { transform: scale(0.98); }
}

/* ── Light mode (home search widgets) ── */
[data-theme='light'] .home-search,
html:not([data-theme='dark']) .home-search {
  background: #fff;
  border: none;
  color-scheme: only light;
}

[data-theme='light'] .home-search-suggestions,
html:not([data-theme='dark']) .home-search-suggestions {
  background: #fff;
  border-color: rgb(91 127 255 / 14%);
}

[data-theme='light'] .home-search-mode.active,
html:not([data-theme='dark']) .home-search-mode.active {
  background: #fff;
  color: var(--color-primary, #5b7fff);
}

/* ── Dark mode (home widgets) ── */
[data-theme='dark'] .home-search,
[data-theme='dark'] .home-search-modes,
[data-theme='dark'] .home-travel-card,
[data-theme='dark'] .home-travel-paste-reward,
[data-theme='dark'] .home-paste-extras-card,
[data-theme='dark'] .home-paste-shell,
[data-theme='dark'] .load-section-skeleton {
  color-scheme: only light;
}

[data-theme='dark'] .home-search-mode.active,
[data-theme='dark'] .home-travel-submode.active {
  background: var(--color-surface);
  color: var(--color-primary);
}

[data-theme='dark'] .home-travel-card,
[data-theme='dark'] #home-travel-sheet-root {
  --travel-bg: #0f1428;
  --travel-surface: #1a2242;
  --travel-surface-2: #151b35;
  --travel-border: #2a3558;
  --travel-text: #eef1ff;
  --travel-muted: #9aa3c4;
  --travel-blue: #6b93ff;
  --travel-blue-soft: rgb(91 127 255 / 16%);
}

[data-theme='dark'] .home-travel-card,
[data-theme='dark'] .home-travel-paste-reward.home-travel-card {
  background: var(--color-surface);
  border-color: var(--color-border);
  color-scheme: only light;
}

[data-theme='dark'] .home-travel-date-input {
  color: var(--color-text);
  color-scheme: only light;
}

[data-theme='dark'] .home-travel-date-sep {
  color: var(--color-text-muted);
}

[data-theme='dark'] .home-travel-meta {
  color: var(--color-text-muted);
}

[data-theme='dark'] .home-paste-extras-card {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--shadow);
}

[data-theme='dark'] .home-paste-search-field {
  background: var(--surface-2);
  border-color: var(--color-border);
}

[data-theme='dark'] .home-paste-search-icon {
  color: var(--color-text-muted);
}

[data-theme='dark'] .home-paste-compare-btn,
[data-theme='dark'] .home-paste-compare-btn.travel-paste-cta {
  color: #fff;
}

[data-theme='dark'] .home-paste-fullpage-link a {
  color: #9db4ff;
}

[data-theme='dark'] .home-search-ghost {
  color: rgb(197 206 232 / 88%);
}

[data-theme='dark'] .home-search-ghost-term {
  color: #eef1ff;
  font-weight: 600;
}

/* ── Dark mode hero (all day periods) ── */
[data-theme='dark'] .home-hero--day,
[data-theme='dark'][data-hero-period='day'] .home-hero,
[data-theme='dark'] .home-hero--dawn,
[data-theme='dark'][data-hero-period='dawn'] .home-hero {
  background: linear-gradient(165deg, #020617 0%, #0f172a 32%, #1e1b4b 62%, #312e81 100%);
  border-color: rgb(99 102 241 / 32%);
}

[data-theme='dark'] .home-hero--day .home-hero h1,
[data-theme='dark'][data-hero-period='day'] .home-hero h1,
[data-theme='dark'] .home-hero--dawn .home-hero h1,
[data-theme='dark'][data-hero-period='dawn'] .home-hero h1 {
  color: #f8fafc;
  text-shadow: 0 1px 16px rgb(0 0 0 / 35%);
}

[data-theme='dark'] .home-hero--day .home-hero-lead,
[data-theme='dark'][data-hero-period='day'] .home-hero-lead,
[data-theme='dark'] .home-hero--dawn .home-hero-lead,
[data-theme='dark'][data-hero-period='dawn'] .home-hero-lead {
  color: rgb(226 232 240 / 82%);
}

[data-theme='dark'] .home-hero--day .home-hero-eyebrow,
[data-theme='dark'][data-hero-period='day'] .home-hero .home-hero-eyebrow,
[data-theme='dark'] .home-hero--dawn .home-hero-eyebrow,
[data-theme='dark'][data-hero-period='dawn'] .home-hero .home-hero-eyebrow {
  color: #9bb4ff;
  background: rgb(15 23 42 / 72%);
  border: 1px solid rgb(94 234 212 / 18%);
}

[data-theme='dark'] .home-hero--day .home-search-mode,
[data-theme='dark'][data-hero-period='day'] .home-hero .home-search-mode,
[data-theme='dark'] .home-hero--dawn .home-search-mode,
[data-theme='dark'][data-hero-period='dawn'] .home-hero .home-search-mode {
  color: rgb(255 255 255 / 85%);
}

[data-theme='dark'] .home-hero--day .home-search-mode.active,
[data-theme='dark'][data-hero-period='day'] .home-hero .home-search-mode.active,
[data-theme='dark'] .home-hero--dawn .home-search-mode.active,
[data-theme='dark'][data-hero-period='dawn'] .home-hero .home-search-mode.active {
  color: var(--color-primary);
}

[data-theme='dark'] .home-search-input {
  color: var(--color-text);
}

[data-theme='dark'] .home-search-icon {
  color: var(--color-text-muted);
}

[data-theme='dark'] .home-search-carousel-label {
  color: var(--color-text-muted);
}

[data-theme='dark'] .home-search-carousel-pill {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

[data-theme='dark'] .home-search-carousel-dot {
  background: rgb(91 127 255 / 35%);
}

[data-theme='dark'] .home-search-carousel-dot.is-active {
  background: var(--color-primary);
}

/* ── Light site: dusk/night hero stays light (explicit light theme) ── */
[data-theme='light'] .home-hero--dusk,
[data-theme='light'][data-hero-period='dusk'] .home-hero,
[data-theme='light'] .home-hero--night,
[data-theme='light'][data-hero-period='night'] .home-hero {
  background: linear-gradient(155deg, #7dd3fc 0%, #a5f3fc 28%, #ccfbf1 58%, #e0f2fe 100%);
  border-color: rgb(91 127 255 / 18%);
}

[data-theme='light'] .home-hero--dusk .home-hero h1,
[data-theme='light'][data-hero-period='dusk'] .home-hero h1,
[data-theme='light'] .home-hero--night .home-hero h1,
[data-theme='light'][data-hero-period='night'] .home-hero h1 {
  color: inherit;
  text-shadow: none;
}

[data-theme='light'] .home-hero--dusk .home-hero-lead,
[data-theme='light'][data-hero-period='dusk'] .home-hero-lead,
[data-theme='light'] .home-hero--night .home-hero-lead,
[data-theme='light'][data-hero-period='night'] .home-hero-lead {
  color: var(--color-text-muted);
}

[data-theme='light'] .home-hero--dusk .home-hero-eyebrow,
[data-theme='light'][data-hero-period='dusk'] .home-hero .home-hero-eyebrow,
[data-theme='light'] .home-hero--night .home-hero-eyebrow,
[data-theme='light'][data-hero-period='night'] .home-hero .home-hero-eyebrow {
  color: var(--color-teal-dark);
  background: rgb(255 255 255 / 75%);
  border: none;
}

[data-theme='light'] .home-hero--dusk .home-search,
[data-theme='light'][data-hero-period='dusk'] .home-hero .home-search,
[data-theme='light'] .home-hero--night .home-search,
[data-theme='light'][data-hero-period='night'] .home-hero .home-search {
  background: #fff;
  border: none;
  box-shadow: 0 8px 32px rgb(91 127 255 / 10%);
}

[data-theme='light'] .home-hero--dusk .home-search-modes,
[data-theme='light'][data-hero-period='dusk'] .home-hero .home-search-modes,
[data-theme='light'] .home-hero--night .home-search-modes,
[data-theme='light'][data-hero-period='night'] .home-hero .home-search-modes {
  background: rgb(255 255 255 / 72%);
  border-color: rgb(91 127 255 / 16%);
}

[data-theme='light'] .home-hero--dusk .home-search-mode,
[data-theme='light'][data-hero-period='dusk'] .home-hero .home-search-mode,
[data-theme='light'] .home-hero--night .home-search-mode,
[data-theme='light'][data-hero-period='night'] .home-hero .home-search-mode {
  color: var(--color-text-muted);
}

[data-theme='light'] .home-hero--dusk .home-search-mode.active,
[data-theme='light'][data-hero-period='dusk'] .home-hero .home-search-mode.active,
[data-theme='light'] .home-hero--night .home-search-mode.active,
[data-theme='light'][data-hero-period='night'] .home-hero .home-search-mode.active {
  background: #fff;
  color: var(--color-primary, #5b7fff);
}

[data-theme='light'] .home-hero--dusk .home-search-carousel-label,
[data-theme='light'][data-hero-period='dusk'] .home-hero .home-search-carousel-label,
[data-theme='light'] .home-hero--night .home-search-carousel-label,
[data-theme='light'][data-hero-period='night'] .home-hero .home-search-carousel-label {
  color: var(--color-text-muted);
}

[data-theme='light'] .home-hero--dusk .home-search-carousel-pill,
[data-theme='light'][data-hero-period='dusk'] .home-hero .home-search-carousel-pill,
[data-theme='light'] .home-hero--night .home-search-carousel-pill,
[data-theme='light'][data-hero-period='night'] .home-hero .home-search-carousel-pill {
  background: rgb(255 255 255 / 88%);
  border-color: rgb(91 127 255 / 28%);
  color: var(--color-teal-dark, #3d5ccc);
  backdrop-filter: none;
}

[data-theme='light'] .home-hero--dusk .home-search-carousel-dot,
[data-theme='light'][data-hero-period='dusk'] .home-hero .home-search-carousel-dot,
[data-theme='light'] .home-hero--night .home-search-carousel-dot,
[data-theme='light'][data-hero-period='night'] .home-hero .home-search-carousel-dot {
  background: rgb(91 127 255 / 28%);
}

[data-theme='light'] .home-hero--dusk .home-search-carousel-dot.is-active,
[data-theme='light'][data-hero-period='dusk'] .home-hero .home-search-carousel-dot.is-active,
[data-theme='light'] .home-hero--night .home-search-carousel-dot.is-active,
[data-theme='light'][data-hero-period='night'] .home-hero .home-search-carousel-dot.is-active {
  background: var(--color-primary, #5b7fff);
}

[data-theme='light'] .home-hero--dusk .home-hero-bg::before,
[data-theme='light'][data-hero-period='dusk'] .home-hero .home-hero-bg::before,
[data-theme='light'] .home-hero--night .home-hero-bg::before,
[data-theme='light'][data-hero-period='night'] .home-hero .home-hero-bg::before {
  top: 8%;
  right: 12%;
  bottom: auto;
  left: auto;
  width: clamp(72px, 18vw, 110px);
  height: clamp(72px, 18vw, 110px);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 237 150 / 75%) 0%, rgb(255 200 80 / 25%) 45%, transparent 70%);
  clip-path: none;
  filter: blur(1px);
}

[data-theme='light'] .home-hero--dusk .home-hero-bg::after,
[data-theme='light'][data-hero-period='dusk'] .home-hero .home-hero-bg::after,
[data-theme='light'] .home-hero--night .home-hero-bg::after,
[data-theme='light'][data-hero-period='night'] .home-hero .home-hero-bg::after {
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(to top, rgb(91 127 255 / 8%) 0%, transparent 100%);
  clip-path: none;
  opacity: 1;
  animation: none;
}

[data-theme='light'] .home-hero--dusk .home-hero-visual,
[data-theme='light'][data-hero-period='dusk'] .home-hero .home-hero-visual,
[data-theme='light'] .home-hero--night .home-hero-visual,
[data-theme='light'][data-hero-period='night'] .home-hero .home-hero-visual {
  opacity: 0.42;
  background:
    radial-gradient(circle at 88% 12%, rgb(255 220 100 / 35%), transparent 38%),
    radial-gradient(circle at 80% 20%, rgb(91 127 255 / 14%), transparent 50%);
}

/* ── Light site: native controls stay light even when OS is dark ── */
[data-theme='light'] .home-search,
[data-theme='light'] .home-travel-card,
[data-theme='light'] .home-travel-date-input,
[data-theme='light'] .home-paste-extras-card,
[data-theme='light'] .home-paste-search-field,
[data-theme='light'] .gotooi-recommended-panel {
  color-scheme: only light;
}

[data-theme='light'] .home-search-modes {
  background: rgb(255 255 255 / 72%);
  border-color: rgb(91 127 255 / 16%);
}

[data-theme='light'] .home-travel-card,
[data-theme='light'] .home-travel-paste-reward.home-travel-card {
  background: #fff;
  border-color: rgb(91 127 255 / 14%);
}

[data-theme='light'] .home-travel-date-input {
  color: #0f172a;
}

[data-theme='light'] .home-travel-date-sep {
  color: #94a3b8;
}

[data-theme='light'] .home-paste-extras-card {
  background: #fff;
  border-color: rgb(15 23 42 / 6%);
  box-shadow: 0 8px 24px rgb(15 23 42 / 6%);
}

[data-theme='light'] .home-paste-search-field {
  background: #f3f4f8;
  border-color: rgb(15 23 42 / 8%);
}

[data-theme='light'] .home-paste-search-icon,
[data-theme='light'] .home-paste-search-input::placeholder {
  color: #9ca3af;
}

[data-theme='light'] .home-paste-search-input {
  color: var(--color-brand-navy, #1b264f);
}

[data-theme='light'] .home-paste-merchant-icon {
  background: #fff;
  border-color: rgb(15 23 42 / 8%);
}

[data-theme='light'] .home-paste-merchant-name {
  color: #6b7289;
}

[data-theme='light'] .home-paste-promo-card {
  background: #fff;
  border-color: rgb(15 23 42 / 8%);
}

[data-theme='light'] .gotooi-recommended-outer {
  background: linear-gradient(135deg, #eef2ff 0%, #e8edff 100%);
}

[data-theme='light'] .gotooi-recommended-panel {
  background: #fff;
}

[data-theme='light'] .gotooi-recommended-title,
[data-theme='light'] .gotooi-rec-rate {
  color: var(--color-brand-navy, #1b264f);
}

[data-theme='light'] .gotooi-rec-name {
  color: #6b7289;
}

[data-theme='light'] .home-merchant-promo-mount .travel-flash-banner {
  background: linear-gradient(135deg, #eef2ff 0%, #f7f8fc 100%);
  border-color: #c7d2fe;
  color: var(--color-brand-navy, #1b264f);
}

/* ── Dark site: remaining light widgets ── */
[data-theme='dark'] .home-search-modes {
  background: rgb(26 34 66 / 82%);
  border-color: var(--color-border);
}

[data-theme='dark'] .home-search-mode {
  color: var(--color-text-muted);
}

[data-theme='dark'] .home-search-suggestions {
  background: rgb(26 34 66 / 98%);
  border-color: rgb(139 168 255 / 32%);
}

[data-theme='dark'] .home-hero--dusk .home-search,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-search,
[data-theme='dark'] .home-hero--night .home-search,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-search {
  background: rgb(26 34 66 / 96%);
  border: none;
  box-shadow: 0 8px 32px rgb(0 0 0 / 28%);
}

[data-theme='dark'] .home-hero--dusk .home-search-modes,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-search-modes,
[data-theme='dark'] .home-hero--night .home-search-modes,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-search-modes {
  background: rgb(15 20 40 / 72%);
  border-color: var(--color-border);
}

[data-theme='dark'] .home-hero--dusk .home-search-mode,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-search-mode,
[data-theme='dark'] .home-hero--night .home-search-mode,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-search-mode {
  color: var(--color-text-muted);
}

[data-theme='dark'] .home-hero--dusk .home-search-mode.active,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-search-mode.active,
[data-theme='dark'] .home-hero--night .home-search-mode.active,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-search-mode.active {
  background: var(--color-surface);
  color: var(--color-primary);
}

[data-theme='dark'] .home-hero--dusk,
[data-theme='dark'][data-hero-period='dusk'] .home-hero,
[data-theme='dark'] .home-hero--night,
[data-theme='dark'][data-hero-period='night'] .home-hero {
  background: linear-gradient(165deg, #020617 0%, #0f172a 32%, #1e1b4b 62%, #312e81 100%);
  border-color: rgb(99 102 241 / 32%);
}

[data-theme='dark'] .home-hero--dusk .home-hero h1,
[data-theme='dark'][data-hero-period='dusk'] .home-hero h1,
[data-theme='dark'] .home-hero--night .home-hero h1,
[data-theme='dark'][data-hero-period='night'] .home-hero h1 {
  color: #f8fafc;
  text-shadow: 0 1px 16px rgb(0 0 0 / 35%);
}

[data-theme='dark'] .home-hero--dusk .home-hero-lead,
[data-theme='dark'][data-hero-period='dusk'] .home-hero-lead,
[data-theme='dark'] .home-hero--night .home-hero-lead,
[data-theme='dark'][data-hero-period='night'] .home-hero-lead {
  color: rgb(226 232 240 / 82%);
}

[data-theme='dark'] .home-hero--dusk .home-hero-eyebrow,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-hero-eyebrow,
[data-theme='dark'] .home-hero--night .home-hero-eyebrow,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-hero-eyebrow {
  color: #9bb4ff;
  background: rgb(15 23 42 / 72%);
  border: 1px solid rgb(94 234 212 / 18%);
}

[data-theme='dark'] .home-hero--dusk .home-search-carousel-label,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-search-carousel-label,
[data-theme='dark'] .home-hero--night .home-search-carousel-label,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-search-carousel-label {
  color: var(--color-text-muted);
}

[data-theme='dark'] .home-hero--dusk .home-search-carousel-pill,
[data-theme='dark'][data-hero-period='dusk'] .home-hero .home-search-carousel-pill,
[data-theme='dark'] .home-hero--night .home-search-carousel-pill,
[data-theme='dark'][data-hero-period='night'] .home-hero .home-search-carousel-pill {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-primary);
  backdrop-filter: none;
}

[data-theme='dark'] .home-paste-merchant-icon {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

[data-theme='dark'] .home-paste-merchant-name,
[data-theme='dark'] .home-paste-section-title {
  color: var(--color-text-muted);
}

[data-theme='dark'] .home-paste-promo-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme='dark'] .home-paste-promo-title,
[data-theme='dark'] .home-paste-promo-name {
  color: var(--color-text);
}

[data-theme='dark'] .gotooi-recommended-outer {
  background: linear-gradient(135deg, rgb(91 127 255 / 14%) 0%, rgb(91 127 255 / 8%) 100%);
}

[data-theme='dark'] .gotooi-recommended-panel {
  background: var(--color-surface);
}

[data-theme='dark'] .gotooi-recommended-title,
[data-theme='dark'] .gotooi-rec-rate {
  color: var(--color-text);
}

[data-theme='dark'] .gotooi-rec-name {
  color: var(--color-text-muted);
}

[data-theme='dark'] .home-merchant-promo-mount .travel-flash-banner {
  background: linear-gradient(135deg, rgb(91 127 255 / 14%) 0%, rgb(91 127 255 / 8%) 100%);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme='dark'] .home-merchant-carousel-title {
  color: var(--color-text);
}

[data-theme='dark'] .home-travel-paste-reward .home-travel-paste-block {
  border-top-color: var(--color-border);
}

/* ===== Touch phones — safe full-width box; block desktop grid breakpoints ===== */
html.is-touch .home-main {
  padding-inline: 0 !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  box-sizing: border-box;
}

html.is-touch .home-main-inner,
html.is-touch .home-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
  overflow-x: clip;
  box-sizing: border-box;
}

html.is-touch .home-hero {
  border-radius: 0 0 22px 22px;
  border-left: none;
  border-right: none;
}

html.is-touch .home-grid > :not(.home-hero) {
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

html.is-touch .discovery-attractions-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html.is-touch .home-stream,
html.is-touch #post-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.85rem;
}

html.is-touch .home-dest-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html.is-touch .home-rank-grid {
  grid-template-columns: 1fr !important;
}

/* ── Rank coverflow 貼貼賞 slot ── */
.stream-paste-input {
  width: 100%;
  min-height: 2.25rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font: inherit;
  font-size: 0.82rem;
  background: var(--color-bg, #f7f8fc);
  color: var(--color-text);
}

.home-rank-coverflow-card--paste {
  cursor: default;
}

.home-rank-coverflow-cover--paste {
  background:
    radial-gradient(120% 80% at 10% 0%, rgb(91 127 255 / 35%), transparent 55%),
    linear-gradient(160deg, #1b264f, #5b7fff 60%, #7dd3fc) !important;
}

.home-rank-paste-lead {
  margin: 0 0 0.45rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.home-rank-paste-open {
  width: 100%;
  margin-bottom: 0.35rem;
}

.home-rank-paste-switch {
  border: none;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}