/* Approved detail pass. No replacement layout, photo cropping or hidden content. */
/* Site Noto faces are generated in fonts/detail-fonts.css from the
   original complete Noto font. One face per disjoint Unicode range. */
body,
body #overview,
body #rooms-section,
body [class*="font-"]:not(.material-symbols-outlined),
body #overview [class*="font-"]:not(.material-symbols-outlined),
body #rooms-section [class*="font-"]:not(.material-symbols-outlined) {
  font-family: "Site Noto", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}
main {
  --detail-muted: #426A96;
  --detail-rule: #D3DAE8;
}
main > section { scroll-margin-top: 62px; }
main .text-\[\#426A96\] { color: var(--detail-muted); }
main > section.border-\[\#D3DAE8\],
main > section > .border-b.border-\[\#D3DAE8\] { border-color: var(--detail-rule); }
main h2.font-bold, main h3.font-bold { font-weight: 600; }

/* Overview typography. */
#overview .text-\[11px\]:not(.material-symbols-outlined),
#overview .text-\[12px\]:not(.material-symbols-outlined) {
  font-size: 13px;
  line-height: 1.5;
}

/* Date typography and existing selected colors. */
#date-select .text-\[11px\]:not(.material-symbols-outlined),
#date-select .text-\[12px\]:not(.material-symbols-outlined) {
  font-size: 13px;
  line-height: 1.5;
}
#date-select .date-strip { font-variant-numeric: tabular-nums; }

/* Room categories are not availability states: one quiet badge style. */
#rooms-section .col-span-2 .absolute.text-white {
  background-color: #426A96;
}
#rooms-section .col-span-3 > .grid > div { overflow-wrap: break-word; }
#rooms-section .col-span-3 > .flex { flex-wrap: wrap; }
#rooms-section .col-span-3 > .flex > span { border-color: #e9ecf1; }

/* Same D1-D4 timeline. Only let the meal line wrap below a long day title. */
#itinerary .space-y-2.text-\[13px\] {
  font-size: 14px;
  line-height: 1.75;
}
#itinerary .text-\[11px\]:not(.material-symbols-outlined),
#itinerary .text-\[12px\]:not(.material-symbols-outlined) {
  font-size: 13px;
  line-height: 1.5;
}
#itinerary [data-detail-slot="day-title"] { line-height: 1.6; }
#detail-itinerary > [data-itinerary-day] + [data-itinerary-day] { border-top: 1px solid #E5EAF0; padding-top: 24px; }
#itinerary .w-\[100px\] { font-variant-numeric: tabular-nums; }

#dining-facilities .text-\[12px\]:not(.material-symbols-outlined),
#dining-facilities .text-\[13px\]:not(.material-symbols-outlined),
#notice-rules .text-\[12px\]:not(.material-symbols-outlined),
#notice-rules .text-\[13px\]:not(.material-symbols-outlined) {
  font-size: 14px;
  line-height: 1.7;
}
#dining-facilities .text-\[11px\]:not(.material-symbols-outlined) {
  font-size: 13px;
  line-height: 1.6;
}
#notice-rules table { font-variant-numeric: tabular-nums; }
#notice-rules th, #notice-rules td { vertical-align: top; }

/* Existing thumbnails: no border-width change when selected. */

#overview .gallery-thumbnail[aria-pressed="true"] {
  border-color: #28649B;
  box-shadow: inset 0 0 0 1px #28649B;
}
#overview .gallery-thumbnail[aria-pressed="false"] { border-color: #D3DAE8; }
.sticky-nav-item:focus-visible,
#overview .gallery-thumbnail:focus-visible,
main button:focus-visible {
  outline: 2px solid #28649B;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Dynamic content uses the original geometry; only intrinsic wrapping/state rules. */
body [hidden] { display: none; }
.detail-image-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: #426A96; background: #f5f6f8; margin: 0; }
#detail-hero-empty { position: absolute; inset: 0; }
#detail-status { color: #426A96; }
#detail-status button, #detail-status a { margin-right: 16px; color: #28649B; }
#detail-status button { border: 1px solid #D3DAE8; padding: 6px 12px; }
.detail-route-list { flex-wrap: wrap; }
.detail-route-list > button { flex: 0 0 auto; width: max-content; max-width: 100%; min-width: 0;  }
[data-route-button][aria-pressed="true"], [data-sailing-button][aria-pressed="true"] { background: #329bfa; border-color: #329bfa; color: #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(15,41,66,.24); }
[data-route-button][aria-pressed="false"], [data-sailing-button][aria-pressed="false"] { border-color: #D3DAE8; background: #fff; }
[data-cabin-row][data-selected="true"] { background: #f0f5fa; }
#detail-content button:disabled { opacity: .55; cursor: not-allowed; }
#detail-content .flex-1, [data-cabin-row] > div { min-width: 0; }
[data-detail-slot="ship-summary"], [data-detail-slot="cabin-reception"], [data-detail-slot="day-lines"], #notice-rules { overflow-wrap: anywhere; }
[data-detail-slot="cabin-reception"] { white-space: pre-line; }
.detail-day-meals { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 16px; font-size: 14px; line-height: 1.75; color: #426A96; }
.detail-day-meals p { margin: 0; }
.detail-day-meals .detail-day-accommodation { flex-basis: 100%; }
.detail-facility-names { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; padding: 0 0 16px; list-style: none; }
.detail-facility-names li::before { content: '•'; margin-right: 8px; color: #28649B; }
.detail-booking-notice { margin-top: 12px; color: #426A96; }

/* Selected routes and dates follow the approved bright-blue reference. */
[data-route-button][aria-pressed="true"] [data-detail-slot="route-title"], [data-route-button][aria-pressed="true"] [data-detail-slot="route-subtitle"], [data-sailing-button][aria-pressed="true"] [data-detail-slot="date-title"], [data-sailing-button][aria-pressed="true"] [data-detail-slot="date-description"] { color: #fff; }
[data-sailing-button][aria-pressed="true"] [data-detail-slot="date-price"] { display: table; margin: 4px auto 0; padding: 0 5px; border-radius: 2px; background: #fff; color: #e75a00; }

[data-detail-slot="ship-brand"] { white-space: nowrap; }


[data-detail-slot="cabin-reception"] { font-size:14px; line-height:1.8; }
[data-detail-slot="day-date"] { white-space:nowrap; }

.facility-image-button { cursor: zoom-in; }
.facility-image-button:disabled { cursor: default; }
.facility-dialog { width: min(1000px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); margin: auto; padding: 20px; border: 1px solid #D3DAE8; background: #fff; color: #092B49; }
.facility-dialog::backdrop { background: rgb(9 43 73 / 65%); }
.facility-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.facility-dialog-header h2 { font-size: 18px; font-weight: 600; }
.facility-dialog-header button { width: 36px; height: 36px; font-size: 26px; }
.facility-dialog-header button:focus-visible { outline: 2px solid #28649B; outline-offset: 2px; }
#facility-dialog-image { display: block; width: 100%; max-height: calc(100dvh - 160px); object-fit: contain; }

#notice-rules .notice-panel { border: 1px solid #E5EAF0; padding: 20px; background: #fff; font-size: 14px; line-height: 1.8; color: #426A96; }
#notice-rules .notice-heading { font-size: 16px; font-weight: 600; color: #092B49; margin-bottom: 10px; }
#notice-rules .notice-list { list-style: disc; padding-left: 18px; }
#notice-rules .notice-list li { padding-left: 2px; line-height: 1.8; }
#notice-rules .notice-list li + li { margin-top: 6px; }
#notice-rules .notice-list .notice-numbered { list-style: none; margin-left: -18px; padding-left: 0; }
#notice-rules .notice-exclusions { border-top: 1px solid #E5EAF0; margin-top: 20px; padding-top: 16px; }

/* Initial loading keeps the server-rendered facts available without flashing them before hydration. */
html.detail-booting:not([data-detail-prerender]) #detail-content { display:none; }
html.detail-booting:not([data-detail-prerender]) #detail-status { min-height:480px; margin-top:20px; padding:370px 24px 24px; box-sizing:border-box; background:linear-gradient(#e8eef3,#e8eef3) 24px 24px / 52% 320px no-repeat,linear-gradient(#e8eef3,#e8eef3) right 24px top 34px / 40% 24px no-repeat,linear-gradient(#f1f5f8,#f1f5f8) right 24px top 80px / 40% 120px no-repeat,#fff; border:1px solid #d3dae8; }

/* Desktop detail: compact editorial overview and comparison controls. */
#overview.detail-overview { padding:22px; margin-bottom:20px; background:#fff; border:1px solid #e1e7ed; border-radius:3px; box-shadow:none; }
.detail-overview-grid { display:grid; grid-template-columns:minmax(340px,38%) minmax(0,1fr); gap:28px; }
.detail-media,.detail-product { min-width:0; }
.detail-hero-stage { position:relative; height:250px; overflow:hidden; border-radius:3px; background:#f1f4f7; }
#detail-hero { display:block; width:100%; height:100%; object-fit:cover; object-position:center bottom; }
.detail-gallery-count { position:absolute; right:10px; bottom:10px; color:#fff; background:#122638b8; padding:3px 8px; border-radius:3px; font-size:12px; }
#detail-gallery { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-top:8px; }
#overview .gallery-thumbnail { text-align:inherit; height:48px; border-radius:2px; }
#overview .gallery-thumbnail span { display:none; }
.detail-specs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; padding-top:18px; margin-top:0; line-height:30px; }
#overview .detail-specs span:first-child { font-size:14px; color:#64778a; }
#overview .detail-specs [data-detail-slot] { font-size:18px; font-weight:600; color:#18364e; font-variant-numeric:tabular-nums; }
.detail-specs > div { display:flex; align-items:baseline; gap:5px; min-width:0; white-space:nowrap; }
.detail-product h1 { font-size:28px; line-height:36px; }
#overview [data-detail-slot="ship-summary"] { font-size:14px; color:#46596c; line-height:25px; margin:0; }

.detail-tag-group { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.detail-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.detail-tags:empty { display:none; }
.detail-feature { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:3px 10px; font-size:13px; font-weight:500; line-height:22px; color:#fff; background:#329BFA; border-radius:3px; }

.detail-feature svg { width:16px; height:16px; color:currentColor; flex-shrink:0; }
.detail-benefits { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.detail-benefits span { display:inline-flex; align-items:center; min-height:28px; padding:3px 10px; border-radius:3px; background:#329bfa; color:#fff; font-size:13px; font-weight:500; line-height:22px; }
.detail-description { margin-bottom:12px; }
.detail-facilities,.detail-route-summary { display:flex; align-items:baseline; gap:18px; margin:12px 0; font-size:14px; line-height:24px; color:#536274; }
.detail-info-label { font-size:13px; font-weight:400; color:#647080; flex-shrink:0; }
[data-detail-slot="ship-facility-summary"] { display:flex; flex-wrap:wrap; gap:6px 18px; }
.detail-facility-name { display:inline-flex; align-items:center; gap:6px; }
.detail-facility-name svg { width:16px; height:16px; color:#71869a; }
[data-detail-slot="ship-route-summary"] { display:flex; flex:1; flex-wrap:wrap; gap:8px 24px; }
.detail-route-fact { display:flex; align-items:center; gap:8px; }
.detail-route-fact svg { width:19px; height:19px; color:#1975ce; }
.detail-route-fact strong { font-weight:500; color:#263f54; }
.detail-route-fact > span { font-size:13px; color:#647080; }
.detail-booking-panel { margin-top:18px; padding:14px 18px 12px; background:#f5f7fa; border-radius:4px; }
.detail-price-line { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:8px 24px; }
.detail-price-label,.detail-price-unit { font-size:13px; color:#647080; }
.detail-price-line [data-detail-slot="hero-price"] { margin:0 5px 0 10px; font-size:32px; font-weight:600; color:#e15b26; line-height:40px; font-variant-numeric:tabular-nums; }
.detail-departure { display:flex; align-items:center; gap:7px; font-size:13px; color:#536274; }
.detail-departure svg { width:17px; height:17px; }
.detail-actions { display:grid; grid-template-columns:1.25fr 1fr; gap:12px; margin-top:12px; }
.detail-primary,.detail-secondary { display:flex; align-items:center; justify-content:center; gap:10px; height:44px; padding:0 16px; border-radius:3px; font-size:15px; font-weight:500; text-decoration:none; }
.detail-primary { background:#1975ce; color:#fff; }
.detail-primary:hover { background:#105da7; }
.detail-secondary { border:1px solid #b9cede; color:#236798; background:#fff; }
.detail-secondary:hover { background:#edf5fc; }
.detail-actions svg { width:19px; height:19px; flex-shrink:0; }
.detail-service-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:16px; }
.detail-service-links a,.detail-service-links button { padding:0; border:0; background:none; cursor:pointer; font-family:inherit; display:flex; justify-content:center; white-space:nowrap; align-items:center; gap:7px; color:#536274; font-size:13px; text-decoration:none; }
.detail-service-links a:hover,.detail-service-links button:hover { color:#1975ce; }
.detail-service-links svg { width:20px; height:20px; color:var(--service-icon-color,#0084ff); fill:none; stroke:currentColor; flex-shrink:0; }
#date-select,#rooms-section { padding:18px 22px; margin-bottom:20px; border-color:#e1e7ed; border-radius:3px; box-shadow:none; }
#date-select h2,#rooms-section h2 { font-size:18px; line-height:26px; }
#date-select > .flex { padding-bottom:12px; }
#detail-routes { gap:8px; margin-top:14px; }
#detail-routes > .detail-route-option { display:flex; align-items:center; gap:10px; min-height:42px; padding:8px 14px; border:1px solid #d3dae8; border-radius:3px; text-align:left; }
.detail-route-option strong { font-size:14px; font-weight:500; line-height:22px; }
.detail-route-option span { font-size:13px; }
.detail-route-option span:empty { display:none; }
#detail-dates .detail-date-option { min-height:62px; padding:7px 10px; border:1px solid #d3dae8; border-radius:3px; box-shadow:none; }
.detail-date-top { display:flex; align-items:baseline; justify-content:center; gap:6px; }
.detail-date-top strong { font-size:14px; font-weight:500; line-height:21px; }
.detail-date-top span { font-size:12px; color:#657587; }
.detail-date-option > strong { display:block; margin-top:3px; font-size:15px; line-height:21px; color:#d94d23; font-weight:600; }
#detail-dates .detail-date-option[aria-pressed="true"] [data-detail-slot="date-price"] { margin-top:3px; }
@media(max-width:1100px){.detail-overview-grid{grid-template-columns:minmax(300px,37%) minmax(0,1fr);gap:22px}.detail-hero-stage{height:225px}.detail-service-links{gap:12px}}

.itinerary-day-badge { background:#0084ff; border-radius:6px; }

.notice-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:start; }