/* Perth News Travel — preview pages (/tours/preview). Booking widget styles live in perth-travel-widget.css. */
.travel-page {
    --travel-yellow: #facc15;
    --travel-yellow-soft: #fef9c3;
    --travel-yellow-deep: #a16207;
    --travel-ink: #0a0a0a;
    --travel-text: #27272a;
    --travel-muted: #6b6b73;
    --travel-line: #e7e5df;
    --travel-bg: #f6f4ee;
    --travel-card: #fff;
    --travel-radius: 16px;
    --travel-shadow: 0 1px 2px rgb(10 10 10 / .04), 0 8px 24px -12px rgb(10 10 10 / .12);
    --travel-header: 73px;
    background: var(--travel-bg);
    color: var(--travel-text);
    font-size: 15px;
    line-height: 1.8;
    padding-bottom: 64px;
}
.travel-page *, .travel-page *::before, .travel-page *::after { box-sizing: border-box; }
:where(.travel-page) a { color: inherit; text-decoration: none; }
.travel-page svg { width: 18px; height: 18px; flex-shrink: 0; }
.travel-page img { display: block; max-width: 100%; object-fit: cover; }
.travel-page button, .travel-page input, .travel-page select { font: inherit; color: inherit; }
.travel-page h1, .travel-page h2, .travel-page h3 { color: var(--travel-ink); font-weight: 900; letter-spacing: -.02em; line-height: 1.4; margin: 0; }
.travel-page p { margin: 0; }
.travel-page ul, .travel-page ol { margin: 0; padding: 0; list-style: none; }
.travel-page a:focus-visible, .travel-page button:focus-visible, .travel-page input:focus-visible, .travel-page select:focus-visible { outline: 3px solid #ca8a04; outline-offset: 2px; border-radius: 6px; }
.travel-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.travel-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.travel-mobile-only { display: none; }
.travel-eyebrow, .travel-section-heading p { font-size: 11px; font-weight: 900; letter-spacing: .16em; color: var(--travel-yellow-deep); }
.travel-tag { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--travel-yellow); color: var(--travel-ink); font-size: 12px; font-weight: 800; }

.travel-button-yellow, .travel-button-black {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
    font-size: 14px; font-weight: 900; cursor: pointer; white-space: nowrap;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.travel-button-yellow { background: var(--travel-yellow); color: var(--travel-ink); box-shadow: 0 6px 16px -8px rgb(202 138 4 / .7); }
.travel-button-yellow:hover { background: #fde047; transform: translateY(-1px); }
.travel-button-black { background: var(--travel-ink); color: var(--travel-yellow); }
.travel-button-black:hover { background: #27272a; transform: translateY(-1px); }

/* Travel masthead */
.travel-masthead { background: #fff; border-bottom: 1px solid var(--travel-line); }
.travel-masthead-inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.travel-brand { font-size: 22px; font-weight: 900; letter-spacing: -.045em; line-height: 1.25; white-space: nowrap; color: var(--travel-ink); }
.travel-brand-accent { margin-left: 2px; background: linear-gradient(transparent 62%, var(--travel-yellow) 62%); }
.travel-brand small { display: block; margin-top: 2px; font-size: 9px; font-weight: 800; letter-spacing: .18em; color: var(--travel-muted); }
.travel-brand-tagline { padding-left: 18px; border-left: 1px solid var(--travel-line); font-size: 12px; font-weight: 700; color: var(--travel-muted); }
.travel-masthead nav { display: flex; align-items: center; gap: 4px; margin-left: auto; font-size: 13px; font-weight: 800; }
.travel-masthead nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; color: var(--travel-text); transition: background-color .15s ease; }
.travel-masthead nav a:hover { background: var(--travel-bg); }
.travel-masthead nav a[aria-current] { background: var(--travel-ink); color: #fff; }
.travel-masthead nav .travel-masthead-japanese { background: var(--travel-yellow-soft); color: #713f12; }
.travel-masthead nav .travel-masthead-japanese:hover { background: var(--travel-yellow); color: var(--travel-ink); }

.travel-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 20px 0 14px; font-size: 12px; color: var(--travel-muted); }
.travel-breadcrumb a:hover { color: var(--travel-ink); text-decoration: underline; }

/* Home: hero */
.travel-hero { position: relative; margin-top: 24px; min-height: 560px; border-radius: 28px; overflow: hidden; background: #18181b; display: flex; align-items: flex-end; }
.travel-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-position: center; }
.travel-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .4) 30%, rgb(0 0 0 / 0) 50%); }
.travel-hero-inner { position: relative; z-index: 1; width: min(660px, 100%); padding: 56px 56px 52px; color: #fff; }
.travel-hero .travel-hero-kicker { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / .35); }
.travel-hero-kicker::before { content: ""; flex-shrink: 0; width: 36px; height: 2px; background: var(--travel-yellow); }
.travel-hero h1 { display: flex; flex-direction: column; margin: 18px 0 24px; color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / .35); }
.travel-hero-title-sub { font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; letter-spacing: .03em; line-height: 1.35; }
.travel-hero-title-main { font-size: clamp(38px, 4.4vw, 62px); white-space: nowrap; font-weight: 900; letter-spacing: -.04em; line-height: 1.12; }
/* Slanted, tapered yellow brush stroke under the main headline (brand accent). */
.travel-hero-title-main { position: relative; z-index: 0; align-self: flex-start; }
.travel-hero-title-main::after { content: ""; position: absolute; z-index: -1; left: -.1em; right: .3em; bottom: -.19em; height: .34em; background: linear-gradient(100deg, #fde047 0%, #facc15 45%, #eab308 100%); clip-path: polygon(1.5% 38%, 99% 0, 97.5% 74%, 0 100%); transform: rotate(-2deg); transform-origin: left bottom; box-shadow: 0 6px 18px -8px rgb(0 0 0 / .5); }
.travel-hero .travel-hero-lead { font-size: 15px; font-weight: 600; line-height: 1.95; color: rgb(255 255 255 / .92); text-shadow: 0 1px 10px rgb(0 0 0 / .4); }
.travel-hero-search { display: flex; align-items: center; max-width: 520px; margin-top: 30px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 16px 40px -18px rgb(0 0 0 / .7); }
.travel-hero-search label { display: flex; padding-left: 16px; color: var(--travel-muted); }
.travel-hero-search input { flex: 1; min-width: 0; height: 54px; padding: 0 12px; border: 0; outline: 0; background: transparent; color: var(--travel-ink); font-size: 15px; }
.travel-hero-search input:focus-visible { outline: 0; }
.travel-hero-search:focus-within { box-shadow: 0 0 0 3px var(--travel-yellow), 0 16px 40px -18px rgb(0 0 0 / .7); }
.travel-hero-search button { align-self: stretch; padding: 0 26px; border: 0; background: var(--travel-yellow); color: var(--travel-ink); font-size: 15px; font-weight: 900; letter-spacing: .1em; cursor: pointer; transition: background-color .15s ease; }
.travel-hero-search button:hover { background: #fde047; }
.travel-hero .travel-hero-popular { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; margin-top: 16px; font-size: 13px; font-weight: 700; text-shadow: 0 1px 8px rgb(0 0 0 / .5); }
.travel-hero-popular > span { margin-right: 12px; padding-right: 12px; border-right: 1px solid rgb(255 255 255 / .45); font-size: 12px; letter-spacing: .1em; color: var(--travel-yellow); }
.travel-hero-popular a { color: #fff; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .4); text-underline-offset: 5px; transition: text-decoration-color .15s ease; }
.travel-hero-popular a:hover { text-decoration-color: var(--travel-yellow); }
.travel-hero-popular a + a::before { content: "・"; display: inline-block; margin: 0 4px; color: rgb(255 255 255 / .6); }
.travel-hero-popular a:nth-of-type(n+5) { display: none; }

.travel-promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 20px; background: var(--travel-line); border: 1px solid var(--travel-line); border-radius: var(--travel-radius); overflow: hidden; }
.travel-promise li { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: #fff; }
.travel-promise svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--travel-yellow-soft); color: #854d0e; }
.travel-promise strong { display: block; font-size: 14px; color: var(--travel-ink); line-height: 1.5; }
.travel-promise span { display: block; font-size: 12px; color: var(--travel-muted); line-height: 1.6; }
.travel-page .travel-promise { margin-top: 28px; }

/* Sections */
.travel-section-icon, .travel-home-link-short, .travel-filter-heading, .travel-pickup-more { display: none; }
.travel-section { margin-top: 72px; }
.travel-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.travel-section-heading h2 { font-size: clamp(24px, 2.4vw, 30px); margin-top: 6px; }
.travel-section-heading div > span { display: block; margin-top: 6px; font-size: 14px; color: var(--travel-muted); }
.travel-section-heading > a { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 9px 16px; border: 1px solid var(--travel-line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 800; transition: border-color .15s ease, background-color .15s ease; }
.travel-section-heading > a:hover { border-color: var(--travel-ink); }
.travel-section-heading > a svg { width: 15px; height: 15px; }

/* Cards */
.travel-pickup-grid, .travel-catalogue-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.travel-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--travel-card); border-radius: var(--travel-radius); overflow: hidden; box-shadow: var(--travel-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.travel-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgb(10 10 10 / .05), 0 18px 36px -16px rgb(10 10 10 / .28); }
.travel-card-photo { position: relative; display: block; aspect-ratio: 4 / 3; background: #e4e4e7; overflow: hidden; }
.travel-card-photo img { width: 100%; height: 100%; transition: transform .5s ease; }
.travel-card:hover .travel-card-photo img { transform: scale(1.05); }
.travel-card-noimage { display: grid; place-items: center; width: 100%; height: 100%; color: #a1a1aa; }
.travel-card-noimage svg { width: 40px; height: 40px; }
.travel-card-badges { position: absolute; left: 10px; top: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.travel-photo-tag, .travel-photo-japanese, .travel-photo-bookable { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1.6; }
.travel-photo-tag { background: rgb(255 255 255 / .94); color: var(--travel-ink); }
.travel-photo-japanese { background: var(--travel-yellow); color: var(--travel-ink); }
.travel-photo-japanese svg, .travel-photo-bookable svg { width: 13px; height: 13px; }
.travel-photo-bookable { position: absolute; left: 10px; bottom: 10px; background: var(--travel-ink); color: var(--travel-yellow); }
.travel-card-body { display: flex; flex: 1; flex-direction: column; padding: 14px 16px 16px; }
.travel-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; font-weight: 700; color: var(--travel-muted); }
.travel-card-meta li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.travel-card-meta svg { width: 14px; height: 14px; color: #a16207; }
.travel-card h3 { margin-top: 6px; font-size: 16px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.travel-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.travel-card h3 a:focus-visible { outline: 0; }
.travel-card:has(h3 a:focus-visible) { outline: 3px solid #ca8a04; outline-offset: 2px; }
.travel-card-summary { margin-top: 6px; font-size: 13px; line-height: 1.75; color: var(--travel-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.travel-card-times { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 12px; }
.travel-card-times span { font-size: 11px; font-weight: 800; color: var(--travel-muted); margin-right: 2px; }
.travel-card-times a { padding: 1px 6px; border: 1px solid var(--travel-line); border-radius: 6px; background: #fafaf9; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--travel-ink); transition: border-color .15s ease, background-color .15s ease; }
.travel-card-times a:hover { border-color: var(--travel-ink); background: var(--travel-yellow-soft); }
.travel-card-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.travel-card-arrow { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--travel-yellow-soft); color: var(--travel-ink); transition: background-color .15s ease; }
.travel-card:hover .travel-card-arrow { background: var(--travel-yellow); }
.travel-card-arrow svg { width: 16px; height: 16px; }
.travel-card-request-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; margin-top: 12px; padding: 8px; border-radius: 7px; background: var(--travel-yellow); color: var(--travel-ink); font-size: 13px; font-weight: 800; }
.travel-card-request-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.travel-card-request-link:focus-visible { outline: 2px solid var(--travel-ink); outline-offset: 3px; }
.travel-price-label { display: block; font-size: 11px; font-weight: 700; color: var(--travel-muted); line-height: 1.4; }
.travel-price { display: flex; align-items: baseline; gap: 3px; font-size: 22px; font-weight: 900; letter-spacing: -.03em; line-height: 1.2; color: var(--travel-ink); }
.travel-price span { font-size: 11px; font-weight: 800; letter-spacing: 0; }
.travel-price small { font-size: 13px; font-weight: 800; }
.travel-price-yen { margin: 3px 0 0; color: var(--travel-muted); font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: 0; }
.travel-yen-note { margin: 10px 0; color: var(--travel-muted); font-size: 12px; line-height: 1.7; }
.travel-detail-fine-print { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--travel-line); color: var(--travel-muted); font-size: 12px; line-height: 1.8; }
.travel-detail-fine-print p { margin: 0; }
.travel-detail-fine-print p + p { margin-top: 4px; }
.travel-cancellation-policy { margin-top: 24px; }
.travel-cancellation-policy h3 { margin: 0 0 12px; font-size: 17px; font-weight: 800; }
.travel-cancellation-note { margin-top: 10px; color: var(--travel-muted); font-size: 12px; line-height: 1.8; }
.travel-mobile-book .travel-price-yen { font-size: 11px; margin-top: 1px; }
.travel-price-pending { font-size: 13px; font-weight: 800; color: var(--travel-muted); }

/* Home: destinations mosaic */
.travel-destinations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 16px; }
.travel-destinations a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; border-radius: var(--travel-radius); overflow: hidden; background: #27272a; color: #fff; isolation: isolate; }
.travel-destinations a:nth-child(1), .travel-destinations a:nth-child(6) { grid-column: span 2; }
.travel-destinations img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; transition: transform .6s ease; }
.travel-destinations a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(0 0 0 / .72), rgb(0 0 0 / .05) 65%); }
.travel-destinations a:hover img { transform: scale(1.06); }
.travel-destinations a > span { display: flex; flex-direction: column; gap: 2px; }
.travel-destinations small { font-size: 11px; font-weight: 900; letter-spacing: .16em; color: var(--travel-yellow); }
.travel-destinations strong { font-size: 24px; font-weight: 900; line-height: 1.35; }
.travel-destinations em { font-style: normal; font-size: 13px; font-weight: 700; color: rgb(255 255 255 / .85); }
.travel-destinations b { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; background: rgb(255 255 255 / .94); color: var(--travel-ink); font-size: 12px; }
.travel-destinations b svg { width: 14px; height: 14px; }

/* Home: themes */
.travel-theme-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.travel-theme-grid a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 180px; padding: 16px; border-radius: var(--travel-radius); overflow: hidden; background: #3f3f46; color: #fff; isolation: isolate; }
.travel-theme-grid img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; transition: transform .6s ease; }
.travel-theme-grid a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(0 0 0 / .7), rgb(0 0 0 / .1) 70%); }
.travel-theme-grid a:hover img { transform: scale(1.06); }
.travel-theme-icon { position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--travel-ink); }
.travel-theme-grid strong { font-size: 17px; font-weight: 900; line-height: 1.4; }
.travel-theme-grid b { font-size: 12px; font-weight: 800; color: rgb(255 255 255 / .8); }
.travel-theme-grid .travel-theme-japanese { grid-row: span 2; justify-content: flex-end; background: var(--travel-yellow); color: var(--travel-ink); padding: 22px; }
.travel-theme-japanese::before { display: none; }
.travel-theme-japanese .travel-theme-icon { position: static; width: 52px; height: 52px; margin-bottom: auto; background: var(--travel-ink); color: var(--travel-yellow); }
.travel-theme-japanese .travel-theme-icon svg { width: 24px; height: 24px; }
.travel-theme-japanese small { font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.travel-theme-grid .travel-theme-japanese strong { font-size: 22px; margin-top: 4px; }
.travel-theme-japanese em { font-style: normal; font-size: 13px; font-weight: 700; margin-top: 6px; line-height: 1.7; }
.travel-theme-grid .travel-theme-japanese b { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--travel-ink); font-size: 13px; }
.travel-theme-japanese b svg { width: 15px; height: 15px; }

/* Home: Rottnest feature */
.travel-island-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: 72px; background: #fff; border-radius: 28px; overflow: hidden; box-shadow: var(--travel-shadow); }
.travel-island-copy { padding: 52px 48px; }
.travel-island-copy h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 10px 0 16px; }
.travel-island-copy > p:not(.travel-eyebrow) { font-size: 15px; color: var(--travel-muted); line-height: 2; }
.travel-island-copy .travel-island-ways { display: grid; gap: 8px; margin: 24px 0 28px; }
.travel-island-ways a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--travel-line); border-radius: 12px; font-size: 14px; font-weight: 800; color: var(--travel-ink); transition: border-color .15s ease, background-color .15s ease; }
.travel-island-ways a:hover { border-color: var(--travel-ink); background: var(--travel-yellow-soft); }
.travel-island-ways svg { color: #0369a1; }
.travel-island-feature > img { width: 100%; height: 100%; min-height: 420px; }

/* Home: short list */
.travel-mini-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.travel-mini-list a { display: flex; align-items: center; gap: 14px; padding: 12px; padding-right: 16px; background: #fff; border-radius: var(--travel-radius); box-shadow: var(--travel-shadow); transition: transform .2s ease; }
.travel-mini-list a:hover { transform: translateY(-2px); }
.travel-mini-list img { width: 96px; height: 96px; border-radius: 12px; flex-shrink: 0; }
.travel-mini-list span { display: flex; flex-direction: column; min-width: 0; }
.travel-mini-list small { font-size: 11px; font-weight: 800; color: var(--travel-yellow-deep); }
.travel-mini-list strong { font-size: 14px; font-weight: 900; line-height: 1.5; color: var(--travel-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.travel-mini-list em { font-style: normal; font-size: 12px; color: var(--travel-muted); line-height: 1.6; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.travel-mini-list a > svg { margin-left: auto; color: var(--travel-muted); }

.travel-about { margin-top: 80px; padding: 64px 32px; border-radius: 28px; background: var(--travel-ink); color: #fff; text-align: center; }
.travel-about .travel-eyebrow { color: var(--travel-yellow); }
.travel-about h2 { color: #fff; font-size: clamp(24px, 3vw, 36px); margin: 12px 0 16px; }
.travel-about > p:not(.travel-eyebrow) { color: rgb(255 255 255 / .75); line-height: 2; }
.travel-about .travel-button-yellow { margin-top: 28px; }
.travel-about small { display: block; margin-top: 20px; font-size: 12px; color: rgb(255 255 255 / .55); line-height: 1.9; }

/* Catalogue */
.travel-catalogue-head { background: #fff; border-bottom: 1px solid var(--travel-line); }
.travel-catalogue-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 4px 0 26px; }
.travel-catalogue-title h1 { font-size: clamp(28px, 3vw, 38px); margin: 6px 0 4px; }
.travel-catalogue-title div > p:last-child { font-size: 14px; color: var(--travel-muted); }
.travel-searchbar { display: flex; align-items: center; gap: 6px; flex: 0 1 560px; padding: 5px; border: 1px solid var(--travel-line); border-radius: 999px; background: var(--travel-bg); }
.travel-searchbar:focus-within { border-color: var(--travel-ink); background: #fff; }
.travel-searchbar-keyword { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding-left: 14px; color: var(--travel-muted); }
.travel-searchbar-keyword input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; outline: 0; color: var(--travel-ink); font-size: 14px; }
.travel-searchbar-keyword input:focus-visible, .travel-searchbar-sort select:focus-visible { outline: 0; }
.travel-searchbar-sort select { height: 40px; padding: 0 30px 0 14px; border: 0; border-left: 1px solid var(--travel-line); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center / 16px no-repeat; appearance: none; font-size: 13px; font-weight: 700; cursor: pointer; }
.travel-searchbar .travel-button-yellow { min-height: 40px; padding: 0 20px; box-shadow: none; }

.travel-tagbar { position: sticky; top: var(--travel-header); z-index: 30; background: rgb(255 255 255 / .96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--travel-line); }
.travel-tagbar-scroll { display: flex; align-items: center; gap: 8px; padding: 12px 0; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 32px; }
.travel-tagbar-scroll::-webkit-scrollbar { display: none; }
.travel-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 38px; padding: 0 14px; border: 1px solid var(--travel-line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 800; color: var(--travel-text); white-space: nowrap; transition: border-color .15s ease, background-color .15s ease; }
.travel-chip:hover { border-color: var(--travel-ink); }
.travel-chip svg { width: 16px; height: 16px; color: #a16207; }
.travel-chip span { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--travel-bg); font-size: 11px; text-align: center; line-height: 20px; color: var(--travel-muted); }
.travel-chip.is-active { background: var(--travel-ink); border-color: var(--travel-ink); color: #fff; }
.travel-chip.is-active svg { color: var(--travel-yellow); }
.travel-chip.is-active span { background: var(--travel-yellow); color: var(--travel-ink); }
.travel-chip-japanese:not(.is-active) { background: var(--travel-yellow-soft); border-color: #fde68a; color: #713f12; }
.travel-chip-divider { flex-shrink: 0; width: 1px; height: 24px; margin: 0 4px; background: var(--travel-line); }
@media (min-width: 1200px) {
    .travel-tagbar { position: static; }
    .travel-tagbar-scroll { flex-wrap: wrap; overflow: visible; }
}

.travel-results-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 24px 0 18px; scroll-margin-top: calc(var(--travel-header) + 70px); }
.travel-results-count { font-size: 14px; font-weight: 700; color: var(--travel-muted); }
.travel-results-count strong { font-size: 24px; font-weight: 900; color: var(--travel-ink); margin-right: 2px; }
.travel-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.travel-active-filters a { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 12px; border-radius: 999px; background: var(--travel-ink); color: #fff; font-size: 12px; font-weight: 800; }
.travel-active-filters a svg { width: 14px; height: 14px; color: var(--travel-yellow); }
.travel-active-filters .travel-clear-filters { background: transparent; color: var(--travel-muted); text-decoration: underline; padding: 4px 6px; }
.travel-results-note { margin-left: auto; font-size: 12px; color: var(--travel-muted); }
.travel-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 64px 24px; background: #fff; border-radius: var(--travel-radius); text-align: center; }
.travel-empty > svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--travel-yellow-soft); color: #854d0e; }
.travel-empty h2 { font-size: 20px; }
.travel-empty p { color: var(--travel-muted); margin-bottom: 8px; }
.travel-catalogue-note { margin-top: 36px; font-size: 12px; line-height: 1.9; color: var(--travel-muted); text-align: center; }

/* Operator categories share the catalogue, language switch and existing filters. */
.travel-catalogue-heading { min-width: 0; }
.travel-catalogue-heading h1 { overflow-wrap: anywhere; }
.travel-operators { display: grid; gap: 16px; }
.travel-operator-card { display: flex; align-items: center; gap: 24px; padding: 20px; border: 1px solid var(--travel-line); border-radius: var(--travel-radius); background: #fff; }
.travel-operator-card > img { width: 180px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.travel-operator-card > span { display: grid; gap: 5px; flex: 1; min-width: 0; }
.travel-operator-card small { font-size: 12px; font-weight: 700; color: var(--travel-muted); }
.travel-operator-card strong { font-size: 24px; line-height: 1.4; overflow-wrap: anywhere; }
.travel-operator-card em { font-style: normal; font-size: 14px; color: var(--travel-muted); }
.travel-operator-card b { margin-top: 6px; font-size: 13px; }
.travel-operator-card > svg { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--travel-yellow-soft); flex-shrink: 0; }
.travel-operator-card:hover { border-color: var(--travel-ink); }
.travel-operator-filter { border-bottom: 1px solid var(--travel-line); background: #fff; }
.travel-operator-filter form { display: flex; align-items: center; gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.travel-operator-filter label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.travel-operator-filter label svg { width: 18px; height: 18px; color: #a16207; }
.travel-operator-filter form > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.travel-operator-filter select { min-width: 0; max-width: 100%; min-height: 42px; border: 1px solid var(--travel-line); border-radius: 8px; padding: 8px 32px 8px 12px; background-color: #fafaf9; font-size: 13px; }
.travel-operator-filter .travel-button-yellow { min-height: 42px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
.travel-operator-detail-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 4px; }
.travel-operator-detail-link svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 640px) {
    .travel-home-page #operators .travel-section-icon { background: #09090b; color: #fff; }
    .travel-operator-card { gap: 10px; padding: 0; border: 0; border-radius: 0; }
    .travel-operator-card > img { width: 80px; aspect-ratio: 1; border-radius: 8px; }
    .travel-operator-card > span { gap: 3px; }
    .travel-operator-card small { font-size: 10px; }
    .travel-operator-card strong { font-size: 15px; }
    .travel-operator-card em { display: none; }
    .travel-operator-card b { margin-top: 2px; font-size: 11px; }
    .travel-operator-card > svg { width: 26px; height: 26px; padding: 5px; }
    .travel-operator-filter form { align-items: stretch; flex-direction: column; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
    .travel-operator-filter form > div { width: 100%; }
    .travel-operator-filter select { flex: 1; width: 0; }
    .travel-operator-filter .travel-button-yellow { font-size: 12px; padding: 0 10px; }
    .travel-operator-filter .travel-button-yellow svg { display: none; }
}

/* Detail */
.travel-detail-eyebrow { display: none; }
.travel-detail-heading { padding: 4px 0 22px; max-width: 900px; }
.travel-heading-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.travel-heading-meta > a:first-child, .travel-japanese-label, .travel-bookable-label { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.travel-heading-meta > a:first-child { background: #fff; border: 1px solid var(--travel-line); }
.travel-heading-meta svg { width: 14px; height: 14px; }
.travel-japanese-label { background: var(--travel-yellow); color: var(--travel-ink); }
.travel-bookable-label { background: var(--travel-ink); color: var(--travel-yellow); }
.travel-heading-tag { padding: 4px 8px; font-size: 12px; font-weight: 700; color: var(--travel-muted); }
.travel-heading-tag:hover { color: var(--travel-ink); text-decoration: underline; }
.travel-detail-heading h1 { font-size: clamp(26px, 3vw, 38px); line-height: 1.35; }
.travel-detail-heading > p { margin-top: 12px; font-size: 16px; color: var(--travel-muted); line-height: 1.9; }

/* Detail gallery: one main visual with a thumbnail rail (right on desktop, below on phones). */
.travel-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.travel-gallery.has-thumbs { grid-template-columns: minmax(0, 1fr) 132px; }
.travel-gallery-main { position: relative; height: 480px; border-radius: 22px; overflow: hidden; background: #1c1c1f; }
.travel-gallery-stage { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.travel-gallery-stage img { width: 100%; height: 100%; transition: opacity .25s ease; }
.travel-gallery-stage img.is-changing { opacity: 0; }
.travel-gallery-arrow { position: absolute; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--travel-ink); box-shadow: 0 6px 18px -6px rgb(0 0 0 / .45); transform: translateY(-50%); cursor: pointer; opacity: 0; transition: opacity .2s ease, background-color .15s ease; }
.travel-gallery-prev { left: 16px; }
.travel-gallery-next { right: 16px; }
.travel-gallery-main:hover .travel-gallery-arrow, .travel-gallery-arrow:focus-visible { opacity: 1; }
.travel-gallery-arrow:hover { background: var(--travel-yellow); }
.travel-gallery-arrow svg { width: 22px; height: 22px; }
.travel-gallery-counter { position: absolute; left: 16px; bottom: 16px; padding: 4px 12px; border-radius: 999px; background: rgb(0 0 0 / .62); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.travel-gallery-all { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: #fff; color: var(--travel-ink); font-size: 13px; font-weight: 800; box-shadow: 0 6px 18px -6px rgb(0 0 0 / .4); }
.travel-gallery-all svg { width: 16px; height: 16px; }
.travel-gallery-thumbs { display: flex; flex-direction: column; gap: 8px; height: 480px; overflow: hidden; scrollbar-width: none; }
.travel-gallery-thumbs::-webkit-scrollbar { display: none; }
.travel-gallery-thumb { position: relative; flex: 1 1 0; min-height: 0; max-height: 120px; display: block; border-radius: 12px; overflow: hidden; background: #e4e4e7; opacity: .62; transition: opacity .15s ease; -webkit-tap-highlight-color: transparent; }
.travel-gallery-thumb::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 0 var(--travel-yellow); transition: box-shadow .15s ease; }
.travel-gallery-thumb img { width: 100%; height: 100%; }
.travel-gallery-thumb:hover { opacity: 1; }
.travel-gallery-thumb[aria-current] { opacity: 1; }
.travel-gallery-thumb[aria-current]::after { box-shadow: inset 0 0 0 3px var(--travel-yellow); }
.travel-gallery-all:hover { background: var(--travel-yellow); }
.travel-gallery-caption { margin-top: 8px; font-size: 11px; color: var(--travel-muted); }

.travel-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.travel-facts li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: #fff; border-radius: 14px; border: 1px solid var(--travel-line); min-width: 0; }
.travel-facts svg { width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: var(--travel-yellow-soft); color: #854d0e; }
.travel-facts div { min-width: 0; }
.travel-facts span { display: block; font-size: 11px; font-weight: 800; color: var(--travel-muted); }
.travel-facts strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 800; line-height: 1.55; color: var(--travel-ink); }

.travel-detail-tabs { position: sticky; top: var(--travel-header); z-index: 20; margin-top: 28px; background: rgb(246 244 238 / .95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--travel-line); }
.travel-detail-tabs div { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.travel-detail-tabs div::-webkit-scrollbar { display: none; }
.travel-detail-tabs a { position: relative; flex-shrink: 0; padding: 14px 18px; font-size: 14px; font-weight: 800; color: var(--travel-muted); white-space: nowrap; }
.travel-detail-tabs a:hover { color: var(--travel-ink); }
.travel-detail-tabs a.is-active { color: var(--travel-ink); }
.travel-detail-tabs a.is-active::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--travel-yellow); }

.travel-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; margin-top: 28px; }
.travel-detail-sheet { background: #fff; border-radius: 22px; box-shadow: var(--travel-shadow); overflow: hidden; }
.travel-detail-section { padding: 36px 40px; scroll-margin-top: calc(var(--travel-header) + 64px); }
.travel-detail-section + .travel-detail-section { border-top: 1px solid var(--travel-line); }
.travel-detail-section h2 { display: flex; align-items: center; gap: 12px; font-size: 22px; margin-bottom: 20px; }
.travel-detail-section h2 span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--travel-ink); color: var(--travel-yellow); font-size: 12px; letter-spacing: 0; }
.travel-detail-section > p { font-size: 15px; line-height: 2; color: var(--travel-text); }
.travel-detail-section > p + p { margin-top: 14px; }
/* Destination video: no player or automatic playback until the reader chooses it. */
.travel-video-card { margin-top: 24px; border: 1px solid #e7e0c9; border-radius: 12px; overflow: hidden; background: #fff; }
.travel-video-heading { display: flex; align-items: center; gap: 10px; padding: 15px 16px; background: #fffcf0; }
.travel-video-icon { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: var(--travel-yellow); color: var(--travel-ink); }
.travel-video-icon svg { width: 22px; height: 22px; }
.travel-video-heading h3 { margin: 0; color: var(--travel-ink); font-size: 17px; font-weight: 800; line-height: 1.6; }
.travel-video-heading p { margin: 3px 0 0; color: #52525b; font-size: 12px; line-height: 1.7; }
.travel-video-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #18181b; }
.travel-video-poster, .travel-video-poster img, .travel-video-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.travel-video-poster img { object-fit: cover; }
.travel-video-media iframe { border: 0; }
.travel-page .travel-video-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; width: 100%; border: 0; cursor: pointer; color: #fff; background: linear-gradient(transparent 40%, rgb(0 0 0 / .2)); }
.travel-video-play > span { display: grid; place-items: center; width: 64px; height: 46px; border-radius: 13px; background: rgb(9 9 11 / .88); box-shadow: 0 3px 15px rgb(0 0 0 / .2); transition: background .15s; }
.travel-video-play svg { width: 29px; height: 29px; }
.travel-video-play strong { padding: 3px 10px; border-radius: 4px; background: rgb(9 9 11 / .8); font-size: 12px; font-weight: 700; }
.travel-video-play:hover > span, .travel-video-play:focus-visible > span { background: var(--travel-yellow); color: #18181b; }
.travel-page .travel-video-play:focus-visible { outline: 3px solid var(--travel-yellow); outline-offset: -5px; }
.travel-video-loading { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #18181b; color: #fff; font-size: 13px; pointer-events: none; }
.travel-video-spinner { width: 30px; height: 30px; border: 3px solid #71717a; border-top-color: var(--travel-yellow); border-radius: 50%; animation: travel-video-spin .8s linear infinite; }
.travel-video-status { margin: 0; padding: 10px 14px 0; color: #52525b; font-size: 12px; line-height: 1.7; }
.travel-video-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; font-size: 11px; color: #71717a; }
.travel-video-footer a { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; color: #3f3f46; text-decoration: underline; text-underline-offset: 3px; }
.travel-video-footer a svg { width: 14px; height: 14px; }
.travel-video-card [hidden] { display: none !important; }
@keyframes travel-video-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
    .travel-video-card { margin-top: 18px; border-radius: 8px; }
    .travel-video-heading { align-items: flex-start; gap: 8px; padding: 12px 10px; }
    .travel-video-icon { width: 28px; height: 28px; border-radius: 7px; }
    .travel-video-icon svg { width: 18px; height: 18px; }
    .travel-video-heading h3 { font-size: 15px; }
    .travel-video-heading p { font-size: 11px; }
    .travel-video-play > span { width: 54px; height: 40px; border-radius: 10px; }
    .travel-video-footer { padding: 5px 10px; font-size: 10px; }
    .travel-video-footer a { min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .travel-video-spinner { animation: none; } }
.travel-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.travel-highlights li { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; background: var(--travel-yellow-soft); font-size: 14px; font-weight: 800; line-height: 1.6; color: var(--travel-ink); }
.travel-highlight-number { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--travel-yellow); font-size: 12px; font-weight: 900; }
.travel-section-note { margin-bottom: 20px; padding: 10px 14px; border-radius: 10px; background: var(--travel-bg); font-size: 13px; color: var(--travel-muted); }
.travel-timeline { position: relative; }
.travel-timeline li { position: relative; display: flex; gap: 18px; padding-bottom: 24px; }
.travel-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: repeating-linear-gradient(var(--travel-line) 0 5px, transparent 5px 9px); }
.travel-timeline-number { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--travel-yellow); color: var(--travel-ink); font-size: 13px; font-weight: 900; }
.travel-timeline-time { display: inline-block; font-size: 12px; font-weight: 900; color: var(--travel-yellow-deep); }
.travel-timeline h3 { font-size: 16px; margin: 2px 0 4px; }
.travel-timeline p { font-size: 14px; line-height: 1.9; color: var(--travel-muted); }
.travel-information { margin: 0; border: 1px solid var(--travel-line); border-radius: 14px; overflow: hidden; }
.travel-information > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); }
.travel-information > div + div { border-top: 1px solid var(--travel-line); }
.travel-information dt { padding: 14px 18px; background: #fafaf9; font-size: 13px; font-weight: 800; color: var(--travel-muted); }
.travel-information dd { margin: 0; padding: 14px 18px; font-size: 14px; line-height: 1.8; color: var(--travel-ink); overflow-wrap: anywhere; }
.travel-information dd small { display: block; font-size: 12px; color: var(--travel-muted); }
.travel-pickup-details { margin-top: 16px; border-block: 1px solid var(--travel-line); }
.travel-pickup-details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; font-size: 14px; font-weight: 800; cursor: pointer; list-style: none; }
.travel-pickup-details summary::-webkit-details-marker { display: none; }
.travel-pickup-details summary svg { width: 18px; height: 18px; flex-shrink: 0; transform: rotate(90deg); }
.travel-pickup-details[open] summary svg { transform: rotate(-90deg); }
.travel-pickup-details summary:focus-visible { outline: 2px solid #a16207; outline-offset: 3px; }
.travel-pickup-details > p { padding-bottom: 12px; font-size: 14px; line-height: 1.9; color: #3f3f46; }
.travel-pickup-details table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.8; }
.travel-pickup-details th, .travel-pickup-details td { padding: 10px 8px; text-align: left; border-top: 1px solid var(--travel-line); }
.travel-pickup-details thead th { background: #fafafa; font-weight: 700; }
.travel-pickup-details tbody th { font-weight: 500; overflow-wrap: anywhere; }
.travel-pickup-details tr > :last-child { width: 90px; white-space: nowrap; text-align: center; }
.travel-pickup-details td { font-weight: 800; font-variant-numeric: tabular-nums; }
.travel-detail-section > .travel-logistics-date { margin-top: 12px; font-size: 12px; color: #52525b; }
.travel-inclusions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.travel-inclusions > div { padding: 18px 20px; border-radius: 14px; }
.travel-inclusions-yes { background: #f0fdf4; }
.travel-inclusions-no { background: #fafaf9; border: 1px solid var(--travel-line); }
.travel-inclusions h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 10px; }
.travel-inclusions-yes h3 svg { color: #15803d; }
.travel-inclusions-no h3 svg { color: var(--travel-muted); }
.travel-inclusions li { display: flex; gap: 8px; padding: 4px 0; font-size: 14px; line-height: 1.7; }
.travel-inclusions li svg { width: 16px; height: 16px; margin-top: 4px; }
.travel-included-list svg { color: #15803d; }
.travel-excluded-list svg { color: #a1a1aa; }
.travel-important li { position: relative; padding: 12px 16px 12px 40px; border-radius: 12px; background: #fffbeb; font-size: 14px; line-height: 1.85; }
.travel-important li + li { margin-top: 8px; }
.travel-important li::before { content: "!"; position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 900; line-height: 1; }
.travel-source-note { margin-top: 16px; font-size: 12px; color: var(--travel-muted); }

.travel-detail-sidebar { position: sticky; top: calc(var(--travel-header) + 72px); }
.travel-booking-card { padding: 24px; background: #fff; border-radius: 22px; box-shadow: 0 1px 2px rgb(10 10 10 / .04), 0 20px 40px -20px rgb(10 10 10 / .25); border-top: 5px solid var(--travel-yellow); }
.travel-booking-title { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 900; color: var(--travel-ink); }
.travel-booking-title span { font-size: 11px; font-weight: 700; color: var(--travel-muted); }
.travel-booking-price { margin-top: 14px; }
.travel-booking-price .travel-price { font-size: 34px; }
.travel-booking-note { margin-top: 4px; font-size: 12px; color: var(--travel-muted); }
.travel-booking-times { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--travel-line); }
.travel-booking-times p { font-size: 12px; font-weight: 800; color: var(--travel-muted); margin-bottom: 8px; }
.travel-booking-times div { display: flex; flex-wrap: wrap; gap: 6px; }
.travel-booking-times a { padding: 6px 12px; border: 1px solid var(--travel-line); border-radius: 10px; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.travel-booking-times a:hover { border-color: var(--travel-ink); }
.travel-booking-times a[aria-current] { background: var(--travel-ink); border-color: var(--travel-ink); color: var(--travel-yellow); }
.travel-booking-status { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--travel-bg); font-size: 13px; }
.travel-booking-status svg { color: #ca8a04; }
.travel-booking-status strong { color: var(--travel-ink); }
.travel-booking-status span { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--travel-line); font-size: 11px; font-weight: 800; }
.travel-booking-explanation { margin: 12px 0 16px; font-size: 13px; line-height: 1.85; color: var(--travel-muted); }
.travel-booking-card .travel-button-yellow { display: flex; width: 100%; min-height: 52px; font-size: 15px; }
.travel-booking-card > small { display: block; margin-top: 12px; font-size: 11px; color: var(--travel-muted); text-align: center; }
.travel-compare-link { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 14px; border: 1px dashed #d4d4d8; font-size: 13px; font-weight: 800; color: var(--travel-text); }
.travel-compare-link:hover { border-color: var(--travel-ink); background: #fff; }
.travel-compare-link svg { width: 16px; height: 16px; }
.travel-related { margin-top: 64px; }

/* Targeted desktop spacing overrides the paragraph/list reset. */
@media (min-width: 641px) {
    .travel-detail-page .travel-highlights { margin-bottom: 14px; }
    .travel-detail-page .travel-detail-section > .travel-section-note { margin-bottom: 14px; }
    .travel-detail-page .travel-booking-explanation { margin: 10px 0 12px; }
    .travel-detail-page .travel-detail-section > .travel-source-note { margin-top: 12px; text-align: right; }
}

/* No-JS lightbox fallback; perth-travel.js opens the dialog viewer instead. */
.travel-lightbox { display: none; }
.travel-lightbox:target { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 24px 24px; background: rgb(10 10 12 / .96); color: #fff; }
.travel-lightbox img { max-width: 100%; max-height: 72vh; width: auto; object-fit: contain; border-radius: 8px; }
.travel-lightbox nav { display: flex; align-items: center; justify-content: space-between; width: 360px; max-width: 100%; margin-top: 16px; font-size: 13px; }
.travel-lightbox nav a { padding: 9px 14px; border-radius: 999px; background: rgb(255 255 255 / .14); }
.travel-lightbox p { margin-top: 12px; font-size: 11px; color: #a1a1aa; }
.travel-lightbox-close { position: absolute; top: 18px; right: 20px; padding: 9px 16px; border: 1px solid rgb(255 255 255 / .4); border-radius: 999px; font-size: 13px; }

.travel-viewer { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; background: rgb(10 10 12 / .97); color: #fff; }
.travel-viewer::backdrop { background: rgb(10 10 12 / .9); }
.travel-viewer-inner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 72px 72px 28px; }
.travel-viewer img { max-width: 100%; max-height: calc(100vh - 170px); width: auto; height: auto; object-fit: contain; border-radius: 8px; user-select: none; }
.travel-viewer-bar { display: flex; align-items: center; gap: 16px; margin-top: 16px; font-size: 13px; font-weight: 700; color: #d4d4d8; }
.travel-viewer-thumbs { display: flex; gap: 6px; margin-top: 14px; max-width: 100%; overflow-x: auto; }
.travel-viewer-thumbs button { flex-shrink: 0; width: 64px; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: none; opacity: .55; cursor: pointer; }
.travel-viewer-thumbs button[aria-current] { border-color: #facc15; opacity: 1; }
.travel-viewer-thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.travel-viewer-close, .travel-viewer-prev, .travel-viewer-next { position: absolute; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; }
.travel-viewer-close:hover, .travel-viewer-prev:hover, .travel-viewer-next:hover { background: #facc15; color: #0a0a0a; }
.travel-viewer-close { top: 18px; right: 18px; width: 44px; height: 44px; }
.travel-viewer-prev, .travel-viewer-next { top: 50%; width: 52px; height: 52px; transform: translateY(-50%); }
.travel-viewer-prev { left: 16px; }
.travel-viewer-next { right: 16px; }
.travel-viewer svg { width: 22px; height: 22px; }
.travel-viewer-credit { margin-top: 6px; font-size: 11px; color: #a1a1aa; }

.travel-mobile-nav { display: none; }

/* Tablet */
/* Desktop lead: editorial title beside an uncropped 3:2 photo, with thumbnails below. */
@media (min-width: 641px) {
    .travel-detail-page .travel-detail-intro { padding: 28px; border: 1px solid var(--travel-line); border-top: 4px solid var(--travel-yellow); border-radius: 18px; background: #fff; }
    .travel-detail-page .travel-detail-heading { max-width: none; padding: 0 0 24px; }
    .travel-detail-page .travel-detail-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 18px; line-height: 1.5; font-weight: 800; letter-spacing: .04em; color: #52525b; }
    .travel-detail-page .travel-detail-eyebrow::before { content: ""; width: 30px; height: 3px; margin-right: 4px; background: var(--travel-yellow); }
    .travel-detail-page .travel-detail-eyebrow span { color: #0a0a0a; }
    .travel-detail-page .travel-heading-meta { gap: 6px; margin-bottom: 16px; }
    .travel-detail-page .travel-heading-meta > a:first-child { background: #fafaf9; }
    .travel-detail-page .travel-detail-heading h1 { font-size: clamp(28px, 2.1vw, 32px); line-height: 1.6; letter-spacing: -.025em; text-wrap: balance; }
    .travel-detail-page[lang="ja"] .travel-detail-heading h1 { text-wrap: pretty; }
    .travel-detail-page .travel-detail-heading > p { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--travel-line); color: #3f3f46; font-size: 15px; line-height: 2; }
    .travel-detail-page .travel-gallery,
    .travel-detail-page .travel-gallery.has-thumbs { width: 100%; max-width: 880px; margin-inline: auto; grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .travel-detail-page .travel-gallery-main { height: auto; aspect-ratio: 3 / 2; border-radius: 12px; }
    .travel-detail-page .travel-gallery-stage img { object-fit: contain; }
    .travel-detail-page .travel-gallery-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; height: auto; overflow: visible; }
    .travel-detail-page .travel-gallery-thumb { width: 100%; height: clamp(56px, 5.5vw, 76px); max-height: none; border-radius: 8px; opacity: .8; }
    .travel-detail-page .travel-gallery-thumb::after { border-radius: 8px; }
    .travel-detail-page .travel-gallery-thumb:hover,
    .travel-detail-page .travel-gallery-thumb[aria-current] { opacity: 1; }
    .travel-detail-page .travel-gallery-caption { width: 100%; max-width: 880px; margin: 8px auto 0; text-align: right; font-size: 10px; }
    .travel-detail-page .travel-gallery-all { padding: 8px 12px; border-radius: 6px; font-size: 12px; }
    .travel-detail-page .travel-facts { margin-top: 16px; }
}
@media (min-width: 1024px) {
    .travel-detail-page .travel-detail-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: 32px; align-items: center; padding: 28px; }
    .travel-detail-page .travel-detail-heading { grid-column: 1; grid-row: 1 / 3; padding: 12px 4px 24px 0; }
    .travel-detail-page .travel-gallery { grid-column: 2; grid-row: 1; }
    .travel-detail-page .travel-gallery-caption { grid-column: 2; grid-row: 2; }
    .travel-detail-page .travel-detail-intro:not(:has(.travel-gallery)) { grid-template-columns: 1fr; }
}

@media (min-width: 641px) and (max-width: 1199px) {
    .travel-hero-inner { width: 50%; padding-right: 24px; }
    .travel-hero-image { object-position: 62% center; }
    .travel-hero-popular a:nth-of-type(n+4) { display: none; }
}
@media (max-width: 1199px) {
    .travel-pickup-grid, .travel-catalogue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .travel-theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .travel-theme-grid .travel-theme-japanese { grid-row: span 1; grid-column: span 2; }
    .travel-detail-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
    .travel-brand-tagline { display: none; }
}
@media (max-width: 960px) {
    .travel-container { padding: 0 24px; }
    .travel-masthead nav .travel-masthead-optional { display: none; }
    .travel-hero { min-height: 500px; }
    .travel-hero-inner { padding: 40px; }
    .travel-promise li { gap: 10px; padding: 14px 14px; }
    .travel-destinations { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
    .travel-destinations a:nth-child(1), .travel-destinations a:nth-child(6) { grid-column: span 2; }
    .travel-island-feature { grid-template-columns: 1fr; }
    .travel-island-feature > img { order: -1; min-height: 260px; max-height: 320px; }
    .travel-island-copy { padding: 36px 32px; }
    .travel-mini-list { grid-template-columns: 1fr; }
    .travel-catalogue-title { flex-direction: column; align-items: stretch; gap: 18px; }
    .travel-searchbar { flex-basis: auto; }
    .travel-detail-layout { grid-template-columns: 1fr; }
    .travel-detail-sidebar { position: static; order: -1; }
    .travel-gallery-main { height: 400px; }
    .travel-gallery.has-thumbs { grid-template-columns: minmax(0, 1fr) 104px; }
    .travel-gallery-thumbs { height: 400px; }
    .travel-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .travel-highlights { grid-template-columns: 1fr; }
    .travel-highlights li { flex-direction: row; align-items: center; }
}
@media (max-width: 900px) {
    .travel-pickup-grid, .travel-catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
}

/* Phone */
@media (max-width: 640px) {
    body:has(.travel-page) { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    .travel-page { --travel-header: 65px; padding-bottom: 32px; font-size: 14px; }
    .travel-container { padding: 0 16px; }
    .travel-masthead-inner { min-height: 56px; gap: 10px; }
    .travel-brand { font-size: 18px; }
    .travel-brand small { font-size: 8px; }
    .travel-masthead nav { display: none; }
    .travel-brand-tagline { display: block; padding-left: 10px; font-size: 10px; line-height: 1.5; }
    .travel-breadcrumb { padding: 14px 0 10px; font-size: 11px; }

    .travel-hero { min-height: 0; aspect-ratio: 5 / 7; margin-top: 12px; border-radius: 20px; align-items: stretch; }
    .travel-hero::after { background: linear-gradient(180deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .25) 24%, rgb(0 0 0 / 0) 33%, rgb(0 0 0 / 0) 64%, rgb(0 0 0 / .4) 74%, rgb(0 0 0 / .75) 100%); }
    .travel-hero-image { object-position: center; }
    /* Phone: centred poster layout. Headline on the sky, photos in the middle, kicker/search/links on the sunset. */
    .travel-hero-inner { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 22px 18px 18px; text-align: center; }
    .travel-hero h1 { order: 1; align-items: center; margin: 0 0 14px; }
    .travel-hero-title-sub { font-size: 18px; letter-spacing: .06em; }
    .travel-hero-title-main { align-self: center; font-size: 36px; letter-spacing: -.03em; }
    .travel-hero .travel-hero-lead { order: 2; font-size: 12.5px; line-height: 1.7; }
    .travel-hero .travel-hero-kicker { order: 3; margin-top: auto; margin-bottom: 12px; gap: 10px; font-size: 12px; letter-spacing: .1em; }
    .travel-hero-kicker::before, .travel-hero-kicker::after { content: ""; flex-shrink: 0; width: 22px; height: 2px; background: var(--travel-yellow); }
    .travel-hero-search { order: 4; align-self: stretch; max-width: none; margin-top: 0; }
    .travel-hero-search label { padding-left: 14px; }
    .travel-hero-search input { height: 48px; padding: 0 8px; font-size: 14px; }
    .travel-hero-search button { padding: 0 18px; font-size: 14px; }
    .travel-hero .travel-hero-popular { order: 5; justify-content: center; margin-top: 12px; font-size: 12px; }
    .travel-hero-popular > span { margin-right: 8px; padding-right: 8px; font-size: 11px; }
    .travel-hero-popular a:nth-of-type(n+4) { display: none; }
    .travel-promise { display: none; }

    .travel-section { margin-top: 48px; }
    .travel-section-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 18px; }
    .travel-section-heading > a { align-self: flex-start; padding: 7px 14px; font-size: 12px; }
    .travel-section-heading div > span { font-size: 13px; }

    .travel-pickup-grid { display: flex; gap: 12px; margin: 0 -16px; padding: 4px 16px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
    .travel-pickup-grid::-webkit-scrollbar { display: none; }
    .travel-pickup-grid .travel-card { flex: 0 0 72%; scroll-snap-align: start; }
    .travel-catalogue-grid { gap: 12px 10px; }
    .travel-card { border-radius: 14px; }
    .travel-card:hover { transform: none; }
    .travel-card-badges { left: 8px; top: 8px; right: 8px; gap: 4px; }
    .travel-photo-tag, .travel-photo-japanese, .travel-photo-bookable { padding: 2px 7px; font-size: 10px; }
    .travel-photo-bookable { left: 8px; bottom: 8px; }
    .travel-card-body { padding: 10px 12px 12px; }
    .travel-card-meta { font-size: 11px; gap: 2px 8px; }
    .travel-card-meta li:nth-child(2) { display: none; }
    .travel-card h3 { font-size: 14px; line-height: 1.5; margin-top: 4px; }
    .travel-card-summary { display: none; }
    .travel-pickup-grid .travel-card-summary { display: -webkit-box; font-size: 12px; }
    .travel-card-times { margin-top: 8px; gap: 4px; }
    .travel-card-times span { display: none; }
    .travel-card-times a { padding: 1px 6px; font-size: 11px; }
    .travel-card-bottom { padding-top: 10px; }
    .travel-price { font-size: 18px; }
    .travel-price-label { font-size: 10px; }
    .travel-card-arrow { width: 30px; height: 30px; }

    .travel-destinations { grid-auto-rows: 150px; gap: 10px; }
    .travel-destinations a { padding: 14px; border-radius: 14px; }
    .travel-destinations strong { font-size: 17px; }
    .travel-destinations em { display: none; }
    .travel-destinations small { font-size: 9px; }
    .travel-destinations b { top: 10px; right: 10px; padding: 2px 8px; font-size: 11px; }
    .travel-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .travel-theme-grid a { min-height: 130px; padding: 12px; border-radius: 14px; }
    .travel-theme-grid strong { font-size: 14px; }
    .travel-theme-icon { width: 30px; height: 30px; top: 10px; left: 10px; }
    .travel-theme-icon svg { width: 16px; height: 16px; }
    .travel-theme-grid .travel-theme-japanese { padding: 16px; }
    .travel-theme-japanese .travel-theme-icon { width: 40px; height: 40px; margin-bottom: 12px; }
    .travel-theme-grid .travel-theme-japanese strong { font-size: 18px; }
    .travel-island-feature { margin-top: 48px; border-radius: 20px; }
    .travel-island-copy { padding: 26px 20px; }
    .travel-mini-list img { width: 80px; height: 80px; }
    .travel-about { margin-top: 56px; padding: 44px 20px; border-radius: 20px; }
    .travel-mobile-only { display: inline; }

    /* Home uses the main site's compact mobile sections: icon/title and contents in one card. */
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) { --travel-bg: #f7f5ef; }
    :is(.travel-home-page, .travel-detail-page) .travel-section,
    .travel-home-page .travel-island-feature,
    .travel-home-page .travel-about { margin: 12px -8px 0; padding: 12px; border: 1px solid #e0f2fe; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
    :is(.travel-home-page, .travel-detail-page) .travel-section { scroll-margin-top: calc(var(--travel-header) + 12px); }
    .travel-home-page #pickups { margin-top: 16px; border-color: #fef3c7; }
    :is(.travel-home-page, .travel-detail-page) .travel-section-heading { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 12px; }
    :is(.travel-home-page, .travel-detail-page) .travel-section-heading > div,
    .travel-home-feature-heading { position: relative; min-width: 0; padding-left: 36px; }
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-section-icon { position: absolute; top: 3px; left: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: #fbbf24; color: #09090b; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-section-icon svg { width: 18px; height: 18px; }
    .travel-home-page #destinations .travel-section-icon,
    .travel-home-page .travel-island-feature .travel-section-icon { background: #0284c7; color: #fff; }
    .travel-home-page [aria-labelledby="theme-heading"] .travel-section-icon { background: #8b5cf6; color: #fff; }
    .travel-home-page [aria-labelledby="short-heading"] .travel-section-icon,
    .travel-home-page .travel-about .travel-section-icon { background: #09090b; color: #fff; }
    :is(.travel-home-page, .travel-detail-page) .travel-section-heading p,
    .travel-home-feature-heading .travel-eyebrow { color: #a16207; font-size: 9px; line-height: 1.3; letter-spacing: .04em; }
    :is(.travel-home-page, .travel-detail-page) .travel-section-heading h2,
    .travel-home-page .travel-home-feature-heading h2 { margin: 2px 0 0; color: #09090b; font-size: 14px; line-height: 1.5; letter-spacing: 0; }
    :is(.travel-home-page, .travel-detail-page) .travel-section-heading div > span { display: none; }
    :is(.travel-home-page, .travel-detail-page) .travel-section-heading > a { align-self: center; gap: 4px; min-height: 32px; padding: 5px 8px; border: 1px solid #e0f2fe; border-radius: 6px; background: #f0f9ff; color: #0369a1; font-size: 10px; line-height: 1.5; text-align: center; white-space: nowrap; }
    :is(.travel-home-page, .travel-detail-page) .travel-section-heading > a svg { display: block; width: 14px; height: 14px; }
    .travel-home-page .travel-pickup-more { display: flex; min-height: 46px; margin-top: 16px; border-radius: 6px; font-size: 13px; }
    .travel-home-page #pickups .travel-section-heading > a { border-color: #bae6fd; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
    .travel-home-page .travel-home-link-label { display: none; }
    .travel-home-page .travel-home-link-short { display: inline; }
    :is(.travel-home-page, .travel-detail-page)[lang="en"] .travel-section-heading > a { white-space: normal; max-width: 90px; }

    :is(.travel-home-page, .travel-detail-page) .travel-pickup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; margin: 0; padding: 0; overflow: visible; }
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-card { border: 1px solid #e4e4e7; border-radius: 8px; box-shadow: none; }
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-card-photo { aspect-ratio: 4 / 3; }
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-card-body { padding: 8px; }
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-card h3 { font-size: 13px; line-height: 1.55; -webkit-line-clamp: 3; }
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-pickup-grid .travel-card-summary { display: none; }
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-card-meta { font-size: 10px; }
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-card-meta svg { width: 12px; height: 12px; }
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-card-badges { top: 6px; left: 6px; right: 6px; }
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-photo-tag,
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-photo-japanese { padding: 2px 5px; font-size: 9px; }
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-card-bottom { gap: 4px; padding-top: 10px; }
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-card-arrow { width: 26px; height: 26px; }
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-card-times { gap: 3px; }
    :is(.travel-home-page, .travel-catalogue-page, .travel-detail-page) .travel-card-times a { padding: 2px 5px; font-size: 10px; }

    .travel-home-page .travel-destinations { grid-auto-rows: 124px; gap: 8px; }
    .travel-home-page .travel-destinations a,
    .travel-home-page .travel-destinations a:nth-child(1),
    .travel-home-page .travel-destinations a:nth-child(6) { grid-column: auto; padding: 10px; border-radius: 8px; }
    .travel-home-page .travel-destinations strong { font-size: 14px; }
    .travel-home-page .travel-destinations small { font-size: 8px; letter-spacing: .07em; }
    .travel-home-page .travel-destinations b { top: 8px; right: 8px; padding: 1px 6px; font-size: 10px; }
    .travel-home-page .travel-theme-grid { gap: 8px; }
    .travel-home-page .travel-theme-grid a { min-height: 112px; padding: 10px; border-radius: 8px; }
    .travel-home-page .travel-theme-grid strong { font-size: 13px; }
    .travel-home-page .travel-theme-grid b { font-size: 10px; }
    .travel-home-page .travel-theme-grid .travel-theme-japanese { padding: 12px 12px 12px 56px; min-height: 100px; background: #fffbeb; border: 1px solid #fde68a; }
    .travel-home-page .travel-theme-japanese .travel-theme-icon { position: absolute; left: 12px; top: 14px; width: 32px; height: 32px; margin: 0; border-radius: 6px; background: #fbbf24; color: #09090b; }
    .travel-home-page .travel-theme-japanese .travel-theme-icon svg { width: 18px; height: 18px; }
    .travel-home-page .travel-theme-japanese small { font-size: 9px; }
    .travel-home-page .travel-theme-grid .travel-theme-japanese strong { font-size: 15px; margin-top: 2px; }
    .travel-home-page .travel-theme-japanese em { margin-top: 2px; font-size: 11px; }
    .travel-home-page .travel-theme-grid .travel-theme-japanese b { margin-top: 6px; }

    .travel-home-page .travel-island-feature { display: flex; flex-direction: column; }
    .travel-home-page .travel-island-feature > img { order: 0; width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9; border-radius: 8px; margin-top: 12px; }
    .travel-home-page .travel-island-copy { padding: 0; }
    .travel-home-page .travel-home-feature-heading { margin-bottom: 12px; }
    .travel-home-page .travel-home-feature-heading h2 br { display: none; }
    .travel-home-page .travel-island-copy > p { font-size: 12px; line-height: 1.8; }
    .travel-home-page .travel-island-copy .travel-island-ways { margin: 20px 0; gap: 6px; }
    .travel-home-page .travel-island-ways a { min-height: 40px; padding: 8px 10px; border-radius: 6px; background: #f0f9ff; border-color: #e0f2fe; font-size: 12px; }
    .travel-home-page .travel-island-copy > .travel-button-black { display: flex; min-height: 44px; padding: 10px; border-radius: 6px; font-size: 12px; }
    .travel-home-page .travel-mini-list { gap: 0; }
    .travel-home-page .travel-mini-list a { gap: 10px; padding: 10px 0; border-radius: 0; box-shadow: none; }
    .travel-home-page .travel-mini-list a + a { border-top: 1px solid #f4f4f5; }
    .travel-home-page .travel-mini-list a:first-child { padding-top: 0; }
    .travel-home-page .travel-mini-list a:last-child { padding-bottom: 0; }
    .travel-home-page .travel-mini-list img { width: 72px; height: 64px; border-radius: 6px; }
    .travel-home-page .travel-mini-list strong { font-size: 13px; }
    .travel-home-page .travel-mini-list small { font-size: 10px; }
    .travel-home-page .travel-mini-list em { font-size: 11px; }
    .travel-home-page .travel-mini-list a > svg { width: 14px; }
    .travel-home-page .travel-about { color: var(--travel-text); text-align: left; border-color: #fef3c7; }
    .travel-home-page .travel-about > p { color: var(--travel-muted); font-size: 12px; line-height: 1.8; }
    .travel-home-page .travel-about .travel-button-yellow { display: flex; min-height: 44px; margin-top: 14px; border-radius: 6px; font-size: 13px; }
    .travel-home-page .travel-about small { margin-top: 12px; color: var(--travel-muted); font-size: 10px; line-height: 1.8; }
    /* Let the English footer links wrap instead of widening this mobile page. */
    body:has(:is(.travel-home-page, .travel-catalogue-page, .travel-detail-page)[lang="en"]) > footer > .grid { grid-template-columns: minmax(0, 1fr); }
    body:has(:is(.travel-home-page, .travel-catalogue-page, .travel-detail-page)[lang="en"]) > footer > .grid > .flex { flex-wrap: wrap; }

    .travel-catalogue-title { padding-bottom: 18px; }
    .travel-searchbar { flex-wrap: wrap; border-radius: 18px; padding: 6px; }
    .travel-searchbar-keyword { flex-basis: 100%; padding: 0 8px; }
    .travel-searchbar-sort { flex: 1; }
    .travel-searchbar-sort select { width: 100%; border-left: 0; background-color: #fff; border-radius: 12px; }
    .travel-searchbar .travel-button-yellow { border-radius: 12px; }
    .travel-tagbar-scroll { padding: 10px 0; gap: 6px; scroll-padding-inline: 16px; }
    .travel-tagbar .travel-container { padding-right: 0; }
    .travel-chip { height: 34px; padding: 0 12px; font-size: 12px; }
    .travel-results-heading { padding: 18px 0 14px; }
    .travel-results-note { margin-left: 0; flex-basis: 100%; }

    /* Catalogue: the same section cards and tour cards as the mobile travel home. */
    .travel-catalogue-page > .travel-container,
    .travel-catalogue-page .travel-catalogue-head > .travel-container { padding: 0 8px; }
    .travel-catalogue-page .travel-catalogue-head { background: transparent; border: 0; }
    .travel-catalogue-page .travel-breadcrumb { padding: 10px 4px; }
    .travel-catalogue-page .travel-catalogue-title,
    .travel-catalogue-page .travel-tagbar,
    .travel-catalogue-page .travel-catalogue-results { padding: 12px; border: 1px solid #e0f2fe; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
    .travel-catalogue-page .travel-catalogue-title { gap: 12px; border-color: #fef3c7; }
    .travel-catalogue-page .travel-catalogue-heading,
    .travel-catalogue-page .travel-filter-heading { position: relative; min-width: 0; padding-left: 36px; }
    .travel-catalogue-page .travel-catalogue-heading .travel-eyebrow,
    .travel-catalogue-page .travel-filter-heading .travel-eyebrow { font-size: 9px; line-height: 1.3; letter-spacing: .04em; }
    .travel-catalogue-page .travel-catalogue-heading h1,
    .travel-catalogue-page .travel-filter-heading h2 { margin: 2px 0 0; font-size: 14px; line-height: 1.5; letter-spacing: 0; overflow-wrap: anywhere; }
    .travel-catalogue-page .travel-catalogue-heading > p:last-child { margin-top: 4px; font-size: 11px; line-height: 1.6; }
    .travel-catalogue-page .travel-searchbar { gap: 8px; padding: 0; border: 0; background: #fff; border-radius: 0; }
    .travel-catalogue-page .travel-searchbar-keyword { min-width: 0; padding: 0 10px; border: 1px solid #e4e4e7; border-radius: 6px; background: #fafafa; }
    .travel-catalogue-page .travel-searchbar-keyword input { min-width: 0; height: 42px; font-size: 16px; }
    .travel-catalogue-page .travel-searchbar-sort { min-width: 0; }
    .travel-catalogue-page .travel-searchbar-sort select { min-width: 0; height: 40px; border: 1px solid #e4e4e7; border-radius: 6px; font-size: 12px; }
    .travel-catalogue-page .travel-searchbar .travel-button-yellow { min-height: 40px; padding: 0 20px; border-radius: 6px; font-size: 12px; }
    .travel-catalogue-page .travel-tagbar { margin: 12px 8px 0; top: calc(var(--travel-header) + 6px); backdrop-filter: none; }
    .travel-catalogue-page .travel-tagbar > .travel-container { padding: 0; }
    .travel-catalogue-page .travel-filter-heading { display: block; }
    .travel-catalogue-page .travel-filter-heading .travel-section-icon { background: #0284c7; color: #fff; }
    .travel-catalogue-page .travel-tagbar-scroll { gap: 6px; padding: 10px 0 0; scroll-padding-inline: 0; }
    .travel-catalogue-page .travel-chip { height: 34px; padding: 0 10px; border-radius: 6px; font-size: 11px; }
    .travel-catalogue-page .travel-chip span { min-width: 20px; padding: 0 4px; font-size: 10px; }
    .travel-catalogue-page .travel-catalogue-results { margin-top: 12px; }
    .travel-catalogue-page .travel-results-heading { gap: 8px; padding: 0 0 12px; scroll-margin-top: calc(var(--travel-header) + 124px); }
    .travel-catalogue-page .travel-results-count { position: relative; display: flex; align-items: center; gap: 4px; min-height: 34px; padding-left: 36px; font-size: 14px; color: var(--travel-ink); }
    .travel-catalogue-page .travel-results-count strong { font-size: 20px; }
    .travel-catalogue-page .travel-results-count .travel-section-icon { background: #09090b; color: #fff; }
    .travel-catalogue-page .travel-active-filters { flex-basis: 100%; gap: 4px; }
    .travel-catalogue-page .travel-active-filters a { max-width: 100%; padding: 4px 8px; border-radius: 6px; font-size: 11px; overflow-wrap: anywhere; }
    .travel-catalogue-page .travel-results-note { font-size: 10px; line-height: 1.7; }
    .travel-catalogue-page .travel-catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
    .travel-catalogue-page .travel-catalogue-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid #f4f4f5; text-align: left; font-size: 10px; line-height: 1.8; }
    .travel-catalogue-page .travel-empty { padding: 24px 4px; }
    .travel-catalogue-page .travel-empty h2 { font-size: 16px; }
    .travel-catalogue-page .travel-empty p { font-size: 12px; }

    .travel-detail-heading h1 { font-size: 24px; }
    .travel-detail-heading > p { font-size: 14px; }
    .travel-gallery, .travel-gallery.has-thumbs { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 -16px; }
    .travel-gallery-main { height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
    .travel-gallery-arrow { width: 38px; height: 38px; opacity: 1; background: rgb(255 255 255 / .85); }
    .travel-gallery-prev { left: 10px; }
    .travel-gallery-next { right: 10px; }
    .travel-gallery-arrow svg { width: 18px; height: 18px; }
    .travel-gallery-counter { left: 12px; bottom: 12px; padding: 3px 10px; }
    .travel-gallery-all { right: 12px; bottom: 10px; padding: 6px 12px; font-size: 12px; }
    .travel-gallery-thumbs { flex-direction: row; gap: 6px; max-height: none; padding: 0 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: 16px; height: auto; }
    .travel-gallery-thumb { flex: 0 0 76px; width: 76px; max-height: none; aspect-ratio: 4 / 3; scroll-snap-align: start; border-radius: 8px; }
    .travel-gallery-thumb::after { border-radius: 8px; }
    .travel-gallery-caption { padding: 0; }
    .travel-facts { gap: 8px; margin-top: 16px; }
    .travel-facts li { flex-direction: column; gap: 6px; padding: 12px; }
    .travel-facts svg { width: 32px; height: 32px; padding: 7px; }
    .travel-facts strong { font-size: 13px; }
    .travel-detail-tabs { margin: 20px -16px 0; padding: 0 8px; }
    .travel-detail-tabs a { padding: 12px 10px; font-size: 13px; }
    .travel-detail-tabs a.is-active::after { left: 10px; right: 10px; }
    .travel-detail-layout { margin-top: 18px; gap: 18px; }
    .travel-detail-sheet { border-radius: 18px; margin: 0 -4px; }
    .travel-detail-section { padding: 26px 18px; }
    .travel-detail-section h2 { font-size: 19px; }
    .travel-detail-section > p { font-size: 14px; }
    .travel-information > div { grid-template-columns: 1fr; }
    .travel-information dt { padding: 8px 14px; }
    .travel-information dd { padding: 10px 14px; }
    .travel-inclusions { grid-template-columns: 1fr; }
    .travel-booking-card { padding: 20px; border-radius: 18px; }
    .travel-booking-price .travel-price { font-size: 28px; }
    .travel-related { margin-top: 44px; }

    /* Mobile detail uses the same white section cards as the travel home. */
    .travel-detail-page > .travel-container { padding: 0 8px; }
    .travel-detail-page .travel-breadcrumb { padding: 10px 4px; font-size: 10px; }
    .travel-detail-page .travel-detail-intro,
    .travel-detail-page .travel-detail-section,
    .travel-detail-page .travel-booking-card,
    .travel-detail-page .travel-related { padding: 12px; border: 1px solid #e0f2fe; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
    .travel-detail-page .travel-detail-intro { border-color: #fef3c7; }
    .travel-detail-page .travel-detail-heading { padding: 0 0 12px; }
    .travel-detail-page .travel-heading-meta { gap: 4px; margin-bottom: 8px; }
    .travel-detail-page .travel-heading-meta > a:first-child,
    .travel-detail-page .travel-japanese-label,
    .travel-detail-page .travel-bookable-label { padding: 3px 7px; border-radius: 6px; font-size: 10px; }
    .travel-detail-page .travel-heading-tag { padding: 3px 4px; font-size: 10px; }
    .travel-detail-page .travel-detail-heading h1 { font-size: 20px; line-height: 1.6; }
    .travel-detail-page .travel-detail-heading > p { margin-top: 8px; font-size: 15px; line-height: 1.9; color: #27272a; }
    .travel-detail-page .travel-gallery { margin: 0; }
    .travel-detail-page .travel-gallery-main { border-radius: 8px; }
    .travel-detail-page .travel-gallery-thumbs { padding: 0; scroll-padding-inline: 0; }
    .travel-detail-page .travel-gallery-thumb { flex-basis: 64px; width: 64px; }
    .travel-detail-page .travel-gallery-caption { margin-top: 6px; font-size: 9px; }
    .travel-detail-page .travel-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
    .travel-detail-page .travel-facts li { flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px; border-color: #e0f2fe; border-radius: 8px; text-align: center; }
    .travel-detail-page .travel-facts svg { flex-shrink: 0; width: 32px; height: 32px; padding: 6px; border-radius: 8px; }
    .travel-detail-page .travel-facts div { width: 100%; }
    .travel-detail-page .travel-facts span { margin-bottom: 4px; font-size: 11px; line-height: 1.5; color: #52525b; }
    .travel-detail-page .travel-facts strong { display: block; overflow: visible; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
    .travel-detail-page[lang="en"] .travel-facts strong { hyphens: auto; }
    .travel-detail-page .travel-detail-tabs { margin: 12px 0 0; padding: 4px; background: #fff; border: 1px solid #e0f2fe; border-radius: 8px; }
    .travel-detail-page .travel-detail-tabs a { padding: 10px 8px; font-size: 12px; color: #3f3f46; }
    .travel-detail-page .travel-detail-tabs a.is-active { border-radius: 5px; background: #fef9c3; }
    .travel-detail-page .travel-detail-tabs a.is-active::after { display: none; }
    .travel-detail-page .travel-detail-layout { gap: 12px; margin-top: 12px; }
    .travel-detail-page .travel-detail-sheet { display: grid; gap: 12px; margin: 0; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
    .travel-detail-page .travel-detail-section { scroll-margin-top: calc(var(--travel-header) + 64px); }
    .travel-detail-page .travel-detail-section h2 { position: relative; min-height: 32px; padding-left: 36px; margin-bottom: 16px; font-size: 16px; line-height: 1.6; }
    .travel-detail-page .travel-detail-section h2 > span { display: none; }
    .travel-detail-page #itinerary .travel-section-icon { background: #0284c7; color: #fff; }
    .travel-detail-page #information .travel-section-icon { background: #09090b; color: #fff; }
    .travel-detail-page #important .travel-section-icon { background: #f59e0b; }
    .travel-detail-page .travel-detail-section > p { font-size: 15px; line-height: 1.95; color: #27272a; }
    .travel-detail-page .travel-highlights { gap: 6px; margin-bottom: 14px; }
    .travel-detail-page .travel-highlights li { align-items: flex-start; gap: 8px; padding: 10px; border-radius: 6px; font-size: 14px; color: #27272a; }
    .travel-detail-page .travel-highlight-number { flex-shrink: 0; width: 22px; height: 22px; font-size: 11px; }
    .travel-detail-page .travel-detail-section > .travel-section-note { margin-bottom: 16px; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: #3f3f46; }
    .travel-detail-page .travel-timeline li { gap: 10px; padding-bottom: 20px; }
    .travel-detail-page .travel-timeline li:last-child { padding-bottom: 0; }
    .travel-detail-page .travel-timeline li:not(:last-child)::before { left: 12px; top: 28px; }
    .travel-detail-page .travel-timeline-number { width: 26px; height: 26px; font-size: 11px; }
    .travel-detail-page .travel-timeline-time { font-size: 12px; color: #52525b; }
    .travel-detail-page .travel-timeline h3 { font-size: 16px; line-height: 1.65; }
    .travel-detail-page .travel-timeline p { font-size: 15px; line-height: 1.9; color: #27272a; }
    .travel-detail-page .travel-information { border: 0; border-radius: 0; }
    .travel-detail-page .travel-information > div { grid-template-columns: 90px minmax(0, 1fr); }
    .travel-detail-page .travel-information dt { padding: 12px 8px; background: #fafafa; font-size: 13px; color: #3f3f46; }
    .travel-detail-page .travel-information dd { padding: 12px 8px; font-size: 14px; color: #27272a; }
    .travel-detail-page .travel-information dd small { font-size: 13px; color: #52525b; }
    .travel-detail-page .travel-information > .travel-information-logistics { grid-template-columns: 1fr; }
    .travel-detail-page .travel-information-logistics dt { padding: 10px 8px 4px; background: transparent; }
    .travel-detail-page .travel-information-logistics dd { padding: 2px 8px 14px; font-size: 15px; line-height: 1.9; }
    .travel-detail-page .travel-detail-section > .travel-logistics-date { font-size: 12px; color: #52525b; }
    .travel-detail-page .travel-inclusions { gap: 12px; margin-top: 14px; }
    .travel-detail-page .travel-inclusions > div { padding: 12px 0 0; border: 0; border-top: 1px solid #e4e4e7; border-radius: 0; background: transparent; }
    .travel-detail-page .travel-inclusions h3 { font-size: 15px; }
    .travel-detail-page .travel-inclusions li { font-size: 14px; line-height: 1.9; color: #27272a; }
    .travel-detail-page .travel-important li { padding: 10px 10px 10px 34px; border-radius: 6px; font-size: 14px; line-height: 1.9; color: #27272a; }
    .travel-detail-page .travel-important li::before { left: 10px; top: 13px; width: 16px; height: 16px; font-size: 10px; }
    .travel-detail-page .travel-detail-section > .travel-source-note { margin-top: 12px; font-size: 12px; color: #52525b; }
    .travel-detail-page .travel-booking-title { position: relative; min-height: 34px; padding-left: 36px; font-size: 14px; }
    .travel-detail-page .travel-booking-title span { font-size: 9px; }
    .travel-detail-page .travel-booking-card { border-color: #fef3c7; }
    .travel-detail-page .travel-booking-card .travel-button-yellow { width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 6px; font-size: 12px; white-space: normal; }
    .travel-detail-page .travel-booking-explanation { font-size: 14px; color: #27272a; }
    .travel-detail-page .travel-compare-link { margin-top: 10px; font-size: 11px; }
    .travel-detail-page .travel-widget-preview { margin: 12px 0 0; border: 1px solid #e0f2fe; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
    .travel-detail-page .travel-widget-heading { position: relative; padding: 12px 12px 14px 48px; }
    .travel-detail-page .travel-widget-heading > .travel-section-icon { left: 12px; top: 16px; }
    .travel-detail-page .travel-widget-eyebrow { font-size: 9px; }
    .travel-detail-page .travel-widget-heading h2 { margin: 2px 0 6px; font-size: 14px; }
    .travel-detail-page .travel-widget-heading p { font-size: 14px; line-height: 1.8; color: #27272a; }
    .travel-detail-page .travel-related { margin: 12px 0 0; }
    .travel-detail-page .travel-related .travel-section-heading { flex-wrap: wrap; }
    .travel-detail-page .travel-related .travel-section-heading > a { margin-left: auto; }

    .travel-viewer-inner { padding: 64px 0 20px; }
    .travel-viewer-prev, .travel-viewer-next { display: none; }

    .travel-mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / .97); backdrop-filter: blur(10px); border-top: 1px solid var(--travel-line); box-shadow: 0 -8px 24px -16px rgb(0 0 0 / .3); }
    .travel-mobile-nav > a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; font-size: 10px; font-weight: 800; color: var(--travel-muted); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; transition: background-color .15s ease, color .15s ease, transform .1s ease; }
    .travel-mobile-nav > a:active { transform: scale(.94); }
    .travel-mobile-nav > a[aria-current] { color: var(--travel-ink); background: var(--travel-yellow-soft); }
    .travel-mobile-nav > a.is-loading svg { animation: travel-nav-pulse .8s ease-in-out infinite alternate; }
    .travel-mobile-nav > a svg { width: 20px; height: 20px; }
    .travel-mobile-book { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
    .travel-mobile-book .travel-price { font-size: 20px; }
    .travel-mobile-book > .travel-button-yellow { flex-shrink: 0; min-height: 46px; padding: 0 22px; }
    .travel-mobile-book > .travel-button-yellow svg { width: 16px; height: 16px; }
}
@media (max-width: 359px) {
    .travel-detail-page .travel-facts strong { font-size: 11px; }
    .travel-home-page #pickups .travel-section-heading { flex-wrap: wrap; gap: 8px; }
    .travel-home-page #pickups .travel-section-heading > a { margin-left: auto; }
    .travel-catalogue-grid { grid-template-columns: 1fr; }
    .travel-container { padding: 0 12px; }
    .travel-hero .travel-hero-lead { display: none; }
    .travel-hero { aspect-ratio: 2 / 3; }
    .travel-hero-title-sub { font-size: 16px; }
    .travel-hero-title-main { font-size: 31px; }
    .travel-hero .travel-hero-kicker { gap: 8px; font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
    .travel-hero-kicker::before, .travel-hero-kicker::after { width: 14px; }
    .travel-hero-popular a:nth-of-type(n+3) { display: none; }
    .travel-brand-tagline { display: none; }
    .travel-destinations strong { font-size: 15px; }
    .travel-facts { grid-template-columns: 1fr; }
    .travel-facts li { flex-direction: row; }
}
@keyframes travel-nav-pulse { from { opacity: 1; } to { opacity: .35; } }
/* Touch screens keep :hover after a tap (and after going back); keep hover-only effects to real pointers. */
@media (hover: none) {
    .travel-page a, .travel-page button { -webkit-tap-highlight-color: transparent; }
    .travel-card:hover { transform: none; box-shadow: var(--travel-shadow); }
    .travel-card:hover .travel-card-photo img, .travel-destinations a:hover img, .travel-theme-grid a:hover img { transform: none; filter: none; }
    .travel-gallery-arrow { opacity: 1; }
    .travel-card:hover .travel-card-arrow { background: var(--travel-yellow-soft); }
    .travel-button-yellow:hover, .travel-button-black:hover, .travel-mini-list a:hover { transform: none; }
    .travel-button-yellow:hover { background: var(--travel-yellow); }
    .travel-chip:not(.is-active):not(.travel-chip-japanese):hover, .travel-section-heading > a:hover { border-color: var(--travel-line); }
    .travel-card-times a:hover, .travel-island-ways a:hover { border-color: var(--travel-line); background: #fafaf9; }
    .travel-card:active { transform: scale(.985); }
    .travel-chip:active, .travel-card-times a:active, .travel-button-yellow:active, .travel-hero-popular a:active { opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
    .travel-page *, .travel-viewer * { transition: none !important; scroll-behavior: auto !important; }
    .travel-card:hover, .travel-card:hover .travel-card-photo img, .travel-destinations a:hover img, .travel-theme-grid a:hover img { transform: none; }
}

/* Optional Omakase city-walk benefit: keep the paid tour price separate. */
.travel-walk-benefit { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr); margin-top: 28px; overflow: hidden; border: 2px solid var(--travel-yellow); border-radius: 20px; background: #fffdf4; box-shadow: var(--travel-shadow); }
.travel-walk-photo { position: relative; min-height: 250px; overflow: hidden; background: #e8eee6; }
.travel-walk-photo img { width: 100%; height: 100%; object-fit: cover; }
.travel-walk-photo::after { content: ""; position: absolute; inset: 60% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / .55)); }
.travel-walk-photo > span { position: absolute; left: 20px; right: 12px; bottom: 16px; z-index: 1; color: #fff; font-size: 10px; line-height: 1.5; font-weight: 800; letter-spacing: .09em; }
.travel-walk-copy { min-width: 0; padding: 24px 28px; }
.travel-page .travel-walk-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #713f12; font-size: 12px; line-height: 1.5; font-weight: 800; letter-spacing: .03em; }
.travel-walk-eyebrow svg { width: 25px; height: 25px; padding: 4px; border-radius: 6px; color: var(--travel-ink); background: var(--travel-yellow); }
.travel-page .travel-walk-copy h2 { font-size: clamp(20px, 2.05vw, 27px); line-height: 1.5; }
.travel-page .travel-walk-description { margin-top: 8px; color: #3f3f46; font-size: 14px; line-height: 1.7; }
.travel-walk-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 13px; line-height: 1.3; }
.travel-walk-offer > span { color: #52525b; font-size: 12px; }
.travel-walk-offer s { display: block; margin-top: 3px; font-size: 20px; font-weight: 700; text-decoration-thickness: 1px; }
.travel-walk-offer > strong { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; color: #18181b; font-size: 27px; font-weight: 900; }
.travel-walk-offer strong small { flex-basis: 100%; margin-bottom: 2px; font-size: 10px; font-weight: 700; }
.travel-walk-offer strong b { font-size: 18px; font-weight: 800; }
.travel-page .travel-walk-points { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; }
.travel-walk-points li { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.6; font-weight: 800; }
.travel-walk-points svg { width: 16px; height: 16px; color: #166534; }
.travel-page .travel-walk-timing { margin-top: 8px; color: #52525b; font-size: 12px; line-height: 1.6; }
.travel-walk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin-top: 16px; }
.travel-walk-actions > .travel-button-yellow { min-height: 44px; padding: 8px 18px; line-height: 1.5; white-space: normal; text-align: center; }
.travel-walk-detail-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 12px; font-weight: 800; text-decoration: underline !important; text-underline-offset: 4px; }
.travel-walk-detail-link svg { width: 15px; height: 15px; }
.travel-page .travel-walk-conditions { margin-top: 12px; font-size: 11px; color: #62625d; line-height: 1.7; }
.travel-walk-benefit-compact { display: block; margin-top: 22px; }
.travel-walk-benefit-compact .travel-walk-copy { position: relative; padding: 20px 24px; }
.travel-walk-benefit-compact .travel-walk-offer { float: right; margin: -35px 0 0 24px; }
.travel-walk-benefit-compact .travel-walk-description { padding-right: 230px; }
.travel-walk-benefit-compact .travel-walk-conditions { clear: both; }
.travel-walk-benefit-gift .travel-walk-photo { min-height: 280px; }
.travel-page .travel-card-benefit { display: flex; align-items: flex-start; gap: 6px; margin: 9px 0 0; padding: 7px 9px; border-radius: 7px; background: var(--travel-yellow-soft); color: #713f12; font-size: 11px; line-height: 1.6; font-weight: 800; }
.travel-card-benefit svg { width: 16px; height: 16px; margin-top: 1px; }
@media (max-width: 900px) {
    .travel-walk-benefit { grid-template-columns: minmax(180px, .8fr) minmax(0, 2fr); }
    .travel-walk-copy { padding: 20px; }
    .travel-walk-benefit-compact { display: block; }
    .travel-walk-benefit-compact .travel-walk-offer { float: none; margin: 12px 0 0; }
    .travel-walk-benefit-compact .travel-walk-description { padding-right: 0; }
}
@media (max-width: 640px) {
    .travel-walk-benefit { grid-template-columns: 1fr; margin-top: 16px; border-radius: 12px; }
    .travel-walk-photo, .travel-walk-benefit-gift .travel-walk-photo { min-height: 0; height: 144px; }
    .travel-walk-photo img { object-position: center 46%; }
    .travel-walk-photo > span { left: 16px; bottom: 10px; font-size: 9px; }
    .travel-walk-copy, .travel-walk-benefit-compact .travel-walk-copy { padding: 16px; }
    .travel-page .travel-walk-copy h2 { font-size: 19px; line-height: 1.6; }
    .travel-page .travel-walk-eyebrow { margin-bottom: 8px; font-size: 11px; }
    .travel-page .travel-walk-description { font-size: 13px; }
    .travel-walk-offer { margin-top: 12px; }
    .travel-walk-offer > strong { font-size: 25px; }
    .travel-page .travel-walk-points { gap: 5px; flex-direction: column; }
    .travel-walk-actions { gap: 8px 14px; margin-top: 14px; }
    .travel-walk-actions > .travel-button-yellow { width: 100%; font-size: 13px; }
    .travel-walk-actions > .travel-walk-detail-link { margin: 0 auto; }
    .travel-walk-benefit-compact .travel-walk-actions > .travel-walk-detail-link { margin-left: 0; }
    .travel-page .travel-card-benefit { padding: 6px; font-size: 10px; gap: 4px; }
    .travel-card-benefit svg { width: 14px; height: 14px; }
}

/* Compact benefit on eligible paid-tour details only. */
.travel-walk-strip { margin-top: 22px; padding: 16px 22px 8px; border: 1px solid #eadc97; border-left: 4px solid var(--travel-yellow); border-radius: 12px; background: #fffdf4; color: var(--travel-ink); }
.travel-walk-strip-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; }
.travel-walk-strip-intro { display: flex; align-items: center; gap: 18px; min-width: 0; }
.travel-walk-strip-photo { display: none; }
@media (min-width: 1024px) {
    .travel-walk-strip-photo { display: block; flex: 0 0 144px; border-radius: 8px; overflow: hidden; }
    .travel-walk-strip-photo img { display: block; width: 144px; height: 96px; object-fit: cover; }
    .travel-walk-strip-photo:focus-visible { outline: 3px solid #a16207; outline-offset: 3px; }
}
.travel-walk-strip-copy { min-width: 0; }
.travel-page .travel-walk-strip-eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 12px; font-weight: 800; line-height: 1.5; color: #71531c; }
.travel-walk-strip-eyebrow svg { width: 22px; height: 22px; padding: 3px; border-radius: 5px; color: var(--travel-ink); background: var(--travel-yellow); }
.travel-page .travel-walk-strip h2 { font-size: 21px; line-height: 1.45; }
.travel-page .travel-walk-strip-description { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 5px; font-size: 13px; line-height: 1.6; color: #49463e; }
.travel-walk-strip-description > span + span { padding-left: 12px; border-left: 1px solid #d7cda8; }
.travel-page .travel-walk-strip-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 13px; line-height: 1.4; }
.travel-walk-strip-price > span:first-child { white-space: nowrap; }
.travel-walk-strip-price s { margin-left: 3px; font-size: 18px; font-weight: 700; text-decoration-thickness: 1px; }
.travel-walk-strip-price > strong { padding: 2px 9px; border-radius: 6px; background: var(--travel-yellow); font-size: 26px; font-weight: 900; }
.travel-walk-strip-details { margin-top: 4px; }
.travel-walk-strip-details > summary { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; min-height: 44px; padding: 7px 0; cursor: pointer; list-style: none; font-size: 13px; font-weight: 800; line-height: 1.5; color: #55451c; }
.travel-walk-strip-details > summary::-webkit-details-marker { display: none; }
.travel-walk-strip-details > summary > svg { width: 16px; height: 16px; transform: rotate(90deg); }
.travel-walk-strip-details[open] > summary > svg { transform: rotate(270deg); }
.travel-walk-strip-details > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.travel-walk-strip-details > summary:focus-visible { outline: 3px solid #a16207; outline-offset: 3px; border-radius: 4px; }
.travel-walk-strip-expanded { border-top: 1px solid #e7dfc3; padding: 12px 0 6px; font-size: 14px; line-height: 1.8; color: #37352f; }
.travel-page .travel-walk-strip-expanded ul { display: grid; gap: 5px; padding-left: 1.3em; list-style: disc; }
.travel-walk-strip-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 5px; font-size: 13px; font-weight: 800; text-decoration: underline !important; text-underline-offset: 3px; }
@media (max-width: 700px) {
    .travel-walk-strip { margin-top: 16px; padding: 13px 14px 5px; border-radius: 10px; }
    .travel-walk-strip-top { grid-template-columns: minmax(0, 1fr); gap: 9px; }
    .travel-page .travel-walk-strip h2 { font-size: 18px; }
    .travel-page .travel-walk-strip-description { display: grid; gap: 1px; }
    .travel-walk-strip-description > span + span { padding-left: 0; border: 0; }
    .travel-walk-strip-price > strong { font-size: 23px; }
}

/* Detail-page guidance is one shared panel, with quiet list markers. */
.travel-detail-page .travel-important-panel { padding: 24px; border: 1px solid #f0df9d; border-radius: 14px; background: #fffbeb; }
.travel-detail-page .travel-important-panel > h2 { margin: 0 0 18px; }
.travel-detail-page .travel-important-panel .travel-important { list-style: disc; padding-left: 1.3em; margin: 0; }
.travel-detail-page .travel-important-panel .travel-important li { padding: 0 0 0 2px; border-radius: 0; background: none; color: #36352f; font-size: 14px; line-height: 1.9; }
.travel-detail-page .travel-important-panel .travel-important li + li { margin-top: 8px; }
.travel-detail-page .travel-important-panel .travel-important li::before { content: none; }
.travel-detail-page .travel-important-panel .travel-important li::marker { color: #9a791e; font-size: .8em; }
.travel-detail-page .travel-important-panel .travel-cancellation-policy { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e9dcae; }
.travel-detail-page .travel-important-panel .travel-cancellation-note { margin: 12px 0 0; }
@media (max-width: 640px) {
    .travel-detail-page .travel-important-panel { padding: 18px 16px; border-radius: 10px; }
}