/* ==========================================================================
Istanbul On Boat — Style A "Classic navy"
Design tokens + base + components. Read DESIGN.md for the rules.
Fonts: load in BEFORE this file:
========================================================================== */
/* 1. TOKENS ---------------------------------------------------------------- */
:root {
/* Colour — brand */
--night-900: #071f33; /* top bar, footer, hero scrim */
--navy-700: #054a85; /* primary brand: headings, primary buttons, links */
--blue-600: #05579e; /* full-width brand bands (contact band) */
--sea-500: #0880e8; /* accent: icons, hover, focus ring, text ≥24px only */
--sky-200: #b9dcfa; /* light accent on dark grounds, never text on white */
--sky-100: #e3f1fd; /* badges, chips, logo disc */
--ice-50: #eef6fd; /* alternate section bg, card footers */
--white: #ffffff;
/* Colour — text & lines */
--ink: #0b2540; /* body text */
--ink-muted: #46607a; /* meta, captions (5.9:1 on white) */
--line: #d3e3f1; /* card borders, dividers (decorative) */
--line-strong: #6f8aa3; /* input borders (3:1) */
/* Colour — functional */
--whatsapp: #198754; /* WhatsApp / phone buttons only */
--danger: #b42318; /* form errors, sold out */
--on-dark: #ffffff;
--on-dark-muted: #e3f1fd;
/* Type */
--font-display: "Raleway", "Helvetica Neue", Arial, sans-serif;
--font-body: "Open Sans", "Segoe UI", Arial, sans-serif;
/* Spacing (4px base) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-18: 72px;
/* Radius */
--radius-sm: 6px; /* inputs, badges, photo captions */
--radius-md: 12px; /* photos inside cards, stat tiles */
--radius-lg: 20px; /* cards, booking bar, big photos */
--radius-pill: 30px; /* ALL buttons */
/* Shadow */
--shadow-card: 0 8px 24px rgba(7, 31, 51, 0.10);
--shadow-raised: 0 8px 24px rgba(7, 31, 51, 0.16);
--shadow-float: 0 6px 18px rgba(7, 31, 51, 0.28);
/* Layout */
--container: 1200px;
--gutter: 120px; /* desktop side padding at 1440 */
--header-h: 84px;
--topbar-h: 44px;
}
/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 24px;
color: var(--ink);
background: var(--white);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--navy-700); }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--navy-700); }
a:hover { color: var(--sea-500); }
:focus-visible { outline: 3px solid var(--sea-500); outline-offset: 2px; }
/* Bootstrap's .btn:focus-visible (higher specificity) zeroes the outline above; restore it for .btn links/buttons. */
.btn:focus-visible { outline: 3px solid var(--sea-500); outline-offset: 2px; box-shadow: none; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-16); }
.section--ice { background: var(--ice-50); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 3. TYPOGRAPHY ------------------------------------------------------------ */
.t-display { font-family: var(--font-display); font-size: 64px; line-height: 68px; font-weight: 400; letter-spacing: -0.01em; color: var(--on-dark); }
.t-h2 { font-family: var(--font-display); font-size: 40px; line-height: 46px; font-weight: 500; color: var(--navy-700); }
.t-h2--sm { font-size: 36px; line-height: 42px; }
.t-h3 { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; color: var(--navy-700); }
.t-h4 { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; color: var(--navy-700); }
.t-lead { font-size: 18px; line-height: 27px; }
.t-body { font-size: 16px; line-height: 24px; }
.t-small { font-size: 14px; line-height: 21px; }
.t-muted { color: var(--ink-muted); }
.t-eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.t-price { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 700; color: var(--navy-700); }
.t-price small { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--ink-muted); }
/* 4. LOGO ------------------------------------------------------------------ */
.logo { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.logo__mark { width: 48px; height: 48px; flex-shrink: 0; }
.logo__text { display: flex; flex-direction: column; gap: 2px; }
.logo__word { font-family: var(--font-display); font-size: 25px; line-height: 26px; letter-spacing: -0.01em; }
.logo__word-a { font-weight: 300; color: var(--ink); }
.logo__word-b { font-weight: 700; color: var(--navy-700); }
.logo__tag { font-size: 10px; line-height: 12px; font-weight: 700; letter-spacing: 0.28em; color: var(--ink-muted); }
.logo--dark .logo__word-a { color: var(--white); }
.logo--dark .logo__word-b { color: #8fc2ef; }
.logo--dark .logo__tag { color: var(--sky-200); }
/* 5. BUTTONS --------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
min-height: 44px; padding: 12px 24px;
font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 600;
border: 2px solid transparent; border-radius: var(--radius-pill);
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--lg { padding: 14px 28px; font-size: 15px; }
.btn--primary { background: var(--navy-700); color: var(--white); }
.btn--primary:hover { background: var(--blue-600); color: var(--white); }
.btn--light { background: var(--white); color: var(--navy-700); font-weight: 700; } /* on dark / photo */
.btn--light:hover { background: var(--sky-100); color: var(--navy-700); }
.btn--outline-light { background: transparent; color: var(--white); border-color: var(--white); } /* on dark / photo */
.btn--outline-light:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.btn--whatsapp { background: var(--whatsapp); color: var(--white); }
.btn--whatsapp:hover { background: #146c43; color: var(--white); }
.btn--ghost { background: transparent; color: var(--navy-700); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--navy-700); color: var(--navy-700); }
.btn svg { width: 18px; height: 18px; }
/* 6. BADGE ----------------------------------------------------------------- */
.badge { display: inline-block; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--sky-100); color: var(--navy-700); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
/* 7. TOP BAR + HEADER ------------------------------------------------------ */
.topbar { background: var(--night-900); color: var(--white); font-size: 14px; }
.topbar .container { height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.topbar a { color: var(--white); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar__muted { color: var(--sky-200); }
.topbar svg { width: 16px; height: 16px; stroke: var(--sky-200); }
.header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header .container { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
/* Bootstrap's `.nav { flex-wrap: wrap }` (equal specificity) wins the cascade for the
flex-wrap property alone whenever this rule does not also declare it, wrapping the
desktop nav into a second row that the sticky header then clips. Declare nowrap
explicitly so the single-row desktop nav from DESIGN.md is restored regardless of
vendor stylesheet load order. `nowrap` alone is not sufficient down to the tablet
range: below 1180px `.nav` switches to `display: none` (drawer via `.nav-toggle`,
see the 1180px breakpoint below) before the six links + logo + "Book now" run out of
row space, so this nowrap declaration only has to hold the row together at
>=1180px, where measurement confirmed it fits without horizontal overflow. */
.nav { display: flex; flex-wrap: nowrap; gap: var(--space-6); font-size: 15px; font-weight: 600; }
.nav a { color: var(--ink); text-decoration: none; padding-block: var(--space-2); border-bottom: 2px solid transparent; white-space: nowrap; padding-inline: 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--navy-700); border-bottom-color: var(--sea-500); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); align-items: center; justify-content: center; }
/* 8. HERO ------------------------------------------------------------------ */
.hero { position: relative; min-height: 640px; background: var(--night-900); overflow: hidden; display: flex; align-items: center; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,31,51,.85) 0%, rgba(7,31,51,.55) 50%, rgba(7,31,51,.15) 100%); }
.hero .container { position: relative; padding-block: var(--space-16) 120px; }
.hero__content { max-width: 640px; display: flex; flex-direction: column; gap: var(--space-5); }
.hero__lead { font-size: 18px; line-height: 27px; color: var(--on-dark-muted); max-width: 520px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }
/* 9. BOOKING BAR ----------------------------------------------------------- */
.booking { position: relative; margin-top: -56px; z-index: 2; }
.booking__panel { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--space-6) 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); align-items: end; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.field input, .field select { height: 48px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 var(--space-3); color: var(--ink); background: var(--white); }
.field input:focus, .field select:focus { outline: 3px solid var(--sea-500); outline-offset: 0; border-color: var(--navy-700); }
.field--error input, .field--error select { border-color: var(--danger); }
.field__error { color: var(--danger); font-weight: 400; }
.booking .btn { height: 48px; width: 100%; font-size: 15px; font-weight: 700; }
/* 10. TRUST STRIP ---------------------------------------------------------- */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); padding-block: var(--space-12) var(--space-4); }
.trust__item { display: flex; gap: var(--space-3); align-items: center; }
.trust__item svg { width: 28px; height: 28px; flex-shrink: 0; stroke: var(--sea-500); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trust__title { font-weight: 700; }
.trust__text { font-size: 14px; line-height: 21px; color: var(--ink-muted); }
/* 11. SECTION HEADER ------------------------------------------------------- */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-10); margin-bottom: var(--space-10); }
.section-head__titles { display: flex; flex-direction: column; gap: var(--space-2); }
.section-head__aside { max-width: 420px; color: var(--ink-muted); }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
/* 12. TOUR CARD ------------------------------------------------------------ */
.tour-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.tour-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.tour-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
.tour-card__media { position: relative; margin: var(--space-2); height: 220px; border-radius: var(--radius-md); overflow: hidden; background: var(--blue-600); }
.tour-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tour-card__media .badge { position: absolute; left: var(--space-4); top: var(--space-4); }
.tour-card__body { padding: var(--space-4) var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex-grow: 1; }
.tour-card__list { margin: var(--space-1) 0 0; padding-left: 18px; font-size: 14px; line-height: 22px; }
.tour-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); background: var(--ice-50); border-top: 1px solid var(--line); }
/* 13. PRIVATE YACHT (split) ------------------------------------------------ */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); align-items: center; }
.split__media { height: 420px; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-700); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__content { display: flex; flex-direction: column; gap: var(--space-5); }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); }
.stat__value { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 700; color: var(--navy-700); }
.stat__label { font-size: 14px; color: var(--ink-muted); }
/* 14. HOW IT WORKS --------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(7, 31, 51, 0.08); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.step__num { width: 48px; height: 48px; border-radius: 50%; background: var(--navy-700); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 22px; display: flex; align-items: center; justify-content: center; }
/* 15. CONTACT BAND --------------------------------------------------------- */
.band { background: var(--blue-600); color: var(--white); }
.band .container { padding-block: 56px; display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); }
.band h2 { color: var(--white); }
.band p { color: var(--on-dark-muted); font-size: 17px; }
.band__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
/* 16. FOOTER --------------------------------------------------------------- */
.footer { background: var(--night-900); color: var(--on-dark-muted); font-size: 14px; line-height: 22px; }
.footer .container { padding-block: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-10); }
.footer__title { font-weight: 700; color: var(--white); margin-bottom: var(--space-2); }
.footer__col { display: flex; flex-direction: column; gap: var(--space-2); }
.footer a { color: var(--on-dark-muted); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer__about { color: var(--sky-200); }
/* Legal / operator strip under the four footer columns. */
.footer .container.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); padding-block: var(--space-5); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; line-height: 20px; }
/* 17. FLOATING WHATSAPP ---------------------------------------------------- */
.wa-float { position: fixed; right: var(--space-8); bottom: var(--space-8); z-index: 60; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 12px 20px; border-radius: var(--radius-pill); background: var(--whatsapp); color: var(--white); font-weight: 600; font-size: 14px; text-decoration: none; box-shadow: var(--shadow-float); }
.wa-float:hover { background: #146c43; color: var(--white); }
.wa-float svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
/* 18. RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 1200px) {
:root { --gutter: 48px; }
.nav { gap: var(--space-5); }
}
/* Desktop-to-drawer switch for the header nav. With six links
("Bosphorus Cruise", "Morning Cruise", "Sunset Yacht Cruise", "Sunset Cruise",
"Dinner Cruise", "Contact"), the logo and "Book now", the row needs ~1109px at the
tightened gaps below (measured), i.e. a viewport of >=1350px with the 120px gutter.
Below 1360px the nav and "Book now" hide in favor of the `.nav-toggle` drawer. */
@media (max-width: 1400px) {
.nav { gap: var(--space-4); }
.header .container { gap: var(--space-6); }
}
@media (max-width: 1359px) {
.nav { display: none; } /* show in a drawer via .nav-toggle */
.nav-toggle { display: inline-flex; }
.header .btn--primary { display: none; }
}
@media (max-width: 1024px) {
.tour-grid, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.booking__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split { grid-template-columns: 1fr; gap: var(--space-10); }
.footer .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
:root { --gutter: 16px; --header-h: 68px; }
.topbar__muted { display: none; }
.logo__mark { width: 40px; height: 40px; }
.logo__word { font-size: 21px; line-height: 22px; }
.hero { min-height: 560px; }
.t-display { font-size: 40px; line-height: 44px; }
.t-h2 { font-size: 30px; line-height: 36px; }
.hero__actions .btn { width: 100%; }
.booking { margin-top: -40px; }
.booking__panel, .tour-grid, .steps, .trust, .stat-grid, .footer .container { grid-template-columns: 1fr; }
.section { padding-block: var(--space-12); }
.section-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.split__media { height: 280px; }
.band .container { flex-direction: column; align-items: flex-start; }
.band__actions .btn { width: 100%; }
.wa-float { right: var(--space-4); bottom: var(--space-4); padding: 12px; }
.wa-float span { display: none; } /* icon only on phones; keep aria-label */
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.tour-card, .btn { transition: none; }
.tour-card:hover { transform: none; }
}
/* ==========================================================================
PRODUCT PAGE (see DESIGN.md §9) — reference: dinner-cruise.html
========================================================================== */
/* 19. Page header */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 14px; color: var(--ink-muted); }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--navy-700); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }
.page-head { padding-top: 28px; display: flex; flex-direction: column; gap: var(--space-4); }
.page-head__row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-10); }
.page-head__main { display: flex; flex-direction: column; gap: var(--space-3); }
.page-head__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.t-page-title { font-family: var(--font-display); font-size: 48px; line-height: 54px; font-weight: 500; letter-spacing: -0.01em; color: var(--navy-700); }
.meta-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-size: 15px; }
.meta-row span { display: inline-flex; align-items: center; gap: var(--space-2); }
.meta-row svg, .icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--sea-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.price-block { text-align: right; flex-shrink: 0; font-size: 14px; color: var(--ink-muted); }
.price-block strong { display: block; font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 700; color: var(--navy-700); }
/* 20. Gallery mosaic */
.gallery { position: relative; margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 220px 220px; gap: 12px; }
.gallery__tile { border: 0; padding: 0; margin: 0; cursor: pointer; overflow: hidden; background: var(--night-900); }
.gallery__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery__tile:hover img { transform: scale(1.03); }
.gallery__tile:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.gallery__tile:nth-child(3) { border-radius: 0 var(--radius-lg) 0 0; }
.gallery__tile:nth-child(5) { border-radius: 0 0 var(--radius-lg) 0; }
.gallery__all { position: absolute; right: var(--space-4); bottom: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 10px 18px; border: 0; border-radius: var(--radius-pill); background: var(--white); color: var(--navy-700); font-weight: 600; font-size: 14px; box-shadow: var(--shadow-float); cursor: pointer; }
.gallery__all svg { width: 18px; height: 18px; fill: none; stroke: var(--navy-700); stroke-width: 2; }
/* 21. Lightbox */
.lightbox[hidden] { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 100; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(7, 31, 51, 0.72); border: 0; padding: 0; cursor: pointer; }
.lightbox__dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1100px, 100vw - 48px); height: min(760px, 100vh - 48px); background: var(--night-900); color: var(--white); border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(7, 31, 51, 0.5); overflow: hidden; display: flex; flex-direction: column; animation: lb-in .2s ease; }
@keyframes lb-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.98); } }
.lightbox__bar { height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 20px 0 28px; border-bottom: 1px solid rgba(185, 220, 250, 0.2); }
.lightbox__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.lightbox__count { margin-left: var(--space-4); font-size: 14px; color: var(--sky-200); }
.lightbox__actions { display: flex; gap: var(--space-3); align-items: center; }
.lightbox__close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox__close svg, .lightbox__nav svg { width: 22px; height: 22px; fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__stage { flex-grow: 1; min-height: 0; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5); }
.lightbox__figure { margin: 0; flex-grow: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.lightbox__figure img { max-width: 100%; max-height: calc(100% - 40px); object-fit: contain; border-radius: var(--radius-md); }
.lightbox__figure figcaption { font-size: 15px; color: var(--sky-100); text-align: center; }
.lightbox__nav { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.14); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__thumbs { flex-shrink: 0; display: flex; gap: 10px; justify-content: center; overflow-x: auto; padding: 14px 20px 20px; }
.lightbox__thumb { width: 96px; height: 64px; flex-shrink: 0; padding: 0; border: 3px solid transparent; border-radius: 8px; overflow: hidden; background: var(--night-900); opacity: .6; cursor: pointer; }
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumb[aria-current="true"] { border-color: var(--white); opacity: 1; }
body.is-locked { overflow: hidden; }
/* 22. Two-column body */
.product-body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-12); align-items: start; padding-block: var(--space-12) var(--space-16); }
.product-body > .book-card-section { align-self: stretch; min-width: 0; }
.product-main { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
.block { display: flex; flex-direction: column; gap: var(--space-5); }
.block__head { display: flex; flex-direction: column; gap: 6px; }
.t-h2-content { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 500; color: var(--navy-700); }
.t-h2-content--lg { font-size: 32px; line-height: 38px; }
.lead-17 { font-size: 17px; line-height: 27px; }
.highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.highlight { background: var(--ice-50); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: 6px; }
.highlight__value { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 700; color: var(--navy-700); }
.highlight__text { font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-8); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; }
.checklist svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: var(--sea-500); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.option { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.option img { width: 100%; height: 130px; object-fit: cover; }
.option__empty { height: 130px; background: var(--ice-50); display: flex; align-items: center; justify-content: center; }
.option__empty svg { width: 44px; height: 44px; fill: none; stroke: var(--sea-500); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.option__body { padding: 12px 14px; }
.option__title { font-weight: 700; font-size: 15px; }
.option__sub { font-size: 13px; color: var(--ink-muted); }
.panel-list { background: var(--ice-50); border-radius: var(--radius-lg); padding: var(--space-6) 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--space-8); font-size: 15px; line-height: 22px; list-style: none; margin: 0; }
.panel-list span { color: var(--ink-muted); }
.timeline-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-6); }
.timeline-wrap > img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; border-radius: var(--radius-lg); }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); display: flex; flex-direction: column; }
.timeline li { position: relative; display: flex; gap: var(--space-4); align-items: center; padding: var(--space-2) 0 var(--space-2) var(--space-5); font-weight: 600; }
.timeline li::before { content: ""; position: absolute; left: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--sea-500); box-shadow: 0 0 0 2px var(--white); }
.timeline__num { width: 28px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--sea-500); }
.info-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.info-panel p { font-size: 15px; line-height: 23px; margin-top: var(--space-2); }
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 18px 0; background: none; border: 0; cursor: pointer; text-align: left; font-size: 17px; font-weight: 600; color: var(--ink); }
.faq__q::after { content: "+"; font-size: 22px; color: var(--sea-500); }
.faq__q[aria-expanded="true"]::after { content: "−"; }
.faq__a { padding-bottom: 18px; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
/* 23. Booking card */
.book-card { position: sticky; top: calc(var(--header-h) + 24px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.book-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.book-card__head span { font-size: 13px; color: var(--ink-muted); white-space: nowrap; flex-shrink: 0; }
.opt-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 14px 16px; border-radius: var(--radius-md); border: 2px solid var(--line); background: var(--white); cursor: pointer; text-align: left; }
.opt-row[aria-checked="true"] { background: var(--sky-100); border-color: var(--navy-700); }
.opt-row__radio { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--navy-700); display: flex; align-items: center; justify-content: center; }
.opt-row[aria-checked="true"] .opt-row__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--navy-700); }
.opt-row__text { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.opt-row__name { font-weight: 700; font-size: 15px; color: var(--ink); }
.opt-row__desc { font-size: 13px; color: var(--ink-muted); }
.opt-row__price { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--navy-700); }
.stepper-row { display: flex; justify-content: space-between; align-items: center; }
.stepper-row__name { font-weight: 600; font-size: 15px; }
.stepper-row__unit { font-size: 13px; color: var(--ink-muted); }
.stepper { display: flex; align-items: center; gap: var(--space-3); }
.stepper button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--white); color: var(--navy-700); font-size: 20px; cursor: pointer; }
.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper output { width: 20px; text-align: center; font-weight: 700; font-size: 17px; }
.book-card__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; }
.book-card__total output { font-family: var(--font-display); font-weight: 700; font-size: 32px; color: var(--navy-700); }
.book-card .btn { width: 100%; }
.book-card .btn--primary { min-height: 52px; font-size: 16px; font-weight: 700; }
.reassure { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-muted); }
.reassure li { display: flex; gap: var(--space-2); align-items: center; }
.reassure svg { width: 16px; height: 16px; fill: none; stroke: var(--sea-500); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* 23b. Booking card feedback states (ProductBookingCard.razor) */
.form-message { border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; line-height: 20px; }
.form-message ul { margin: 0; padding-left: 18px; }
.form-message--error { color: var(--danger); background: #fdecea; border: 1px solid var(--danger); }
/* Green so the confirmation stands out from the site's blue palette. */
.form-message--success { display: flex; gap: 10px; align-items: flex-start; color: #0f5132; background: #e7f6ec; border: 1px solid #a3d9b8; border-left: 4px solid var(--whatsapp); font-weight: 600; }
.form-message--success::before { content: ""; flex: 0 0 20px; height: 20px; border-radius: 50%; background: var(--whatsapp) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.book-card-section { padding-block: var(--space-6) var(--space-8); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.mobile-book-bar { display: none; }
/* 24. Related tours (compact card) */
.tour-card--compact .tour-card__media { height: 180px; }
.tour-card--compact .t-h3 { font-size: 22px; line-height: 28px; }
.tour-card--compact .t-price { font-size: 24px; }
/* Full-width band outside the product container; the cards fill the row whatever their count. */
.section--related .tour-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.section--related .tour-card--compact .tour-card__media { height: 220px; }
.link-more { font-weight: 600; font-size: 15px; text-decoration: none; }
/* 25. Product page responsive */
@media (max-width: 1024px) {
.product-body { grid-template-columns: 1fr; }
.book-card { position: static; }
.gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery__tile:nth-child(3) { border-radius: 0 var(--radius-lg) 0 0; }
.gallery__tile:nth-child(4) { border-radius: 0 0 var(--radius-lg) 0; }
.gallery__tile:nth-child(5) { display: none; }
.options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile-book-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; min-height: 72px; padding: 12px var(--gutter); background: var(--white); border-top: 1px solid var(--line); box-shadow: var(--shadow-float); align-items: center; justify-content: space-between; gap: var(--space-4); }
.mobile-book-bar .t-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 22px; line-height: 1.3; }
.mobile-book-bar .btn { flex-shrink: 0; }
/* Reserve page-end space only on the pages that render the fixed bar, and only
while it is shown at this breakpoint, so the footer's final content can be
scrolled fully into view above it (request defect #2). The bar is a fixed
overlay sitting below , a sibling that renders after
in MainLayout.razor, so the clearance must land on the footer
itself (via the :has() relational selector, order-independent) rather
than on main, whose own bottom padding never affects sibling content. */
body:has(.mobile-book-bar) .footer { padding-bottom: 96px; }
.wa-float { bottom: 88px; }
/* The floating WhatsApp action is layout-owned (renders once per page from
MainLayout) and would otherwise sit on top of product-page controls at this
breakpoint (gallery/booking/menu/extras). Suppress it only on pages that
render the shared product two-column body; ContactBand keeps the same
WhatsApp destination reachable everywhere (request defect #4). */
body:has(.product-body) .wa-float { display: none; }
}
@media (max-width: 640px) {
.t-page-title { font-size: 34px; line-height: 40px; }
.page-head__row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.price-block { text-align: left; }
.gallery { display: block; }
.gallery__tile { display: none; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-md) !important; }
.gallery__tile:nth-child(1) { display: block; }
.highlights, .checklist, .panel-list, .info-panel, .timeline-wrap { grid-template-columns: 1fr; }
.timeline-wrap > img { min-height: 240px; }
.lightbox__dialog { width: 100vw; height: 100vh; border-radius: 0; }
.lightbox__thumbs { display: none; }
.lightbox__stage { position: relative; padding: var(--space-3); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; z-index: 1; }
.lightbox__nav--prev { left: var(--space-3); }
.lightbox__nav--next { right: var(--space-3); }
.lightbox__actions .btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.lightbox__dialog { animation: none; }
.gallery__tile img { transition: none; }
}
/* ==========================================================================
26. BLAZOR SHELL INTEGRATION (skip link + Blazor-driven drawer open state)
Minimal selectors not present in the supplied prototype; no new tokens.
========================================================================== */
.skip-link {
position: absolute;
top: -48px;
left: var(--space-4);
z-index: 1000;
background: var(--white);
color: var(--navy-700);
padding: 12px 20px;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-raised);
text-decoration: none;
font-weight: 600;
transition: top .15s ease;
}
.skip-link:focus { top: var(--space-4); }
@media (max-width: 1359px) {
.nav.nav--open {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--white);
padding: var(--space-4);
border-bottom: 1px solid var(--line);
gap: var(--space-2);
box-shadow: var(--shadow-raised);
}
}
@media (prefers-reduced-motion: reduce) {
.skip-link { transition: none; }
}
/* ==========================================================================
27. PRIVATE MENU PREVIEW & EXTRAS (MenuSelector.razor, ExtraSellection.razor)
Narrow feature styling replacing the legacy Bootstrap rows; reuses tokens
from sections 1 and 23 rather than introducing new ones.
========================================================================== */
.menu-preview { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); background: var(--ice-50); }
.menu-preview__hint { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.menu-preview__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.menu-preview__item { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.menu-preview__name { font-weight: 600; font-size: 14px; color: var(--ink); }
.menu-preview__price { font-weight: 700; font-size: 14px; color: var(--ink); }
.extras-list { display: flex; flex-direction: column; gap: var(--space-3); padding-block: var(--space-2); }
.extras-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.extras-row__label { font-size: 15px; line-height: 22px; color: var(--ink); }
.extras-row__qty select { height: 44px; min-width: 64px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 var(--space-3); color: var(--ink); background: var(--white); }
.extras-row__qty select:focus-visible { outline: 3px solid var(--sea-500); outline-offset: 0; border-color: var(--navy-700); }
@media (max-width: 640px) {
.extras-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}