/* ============================================================================
THC TOUR — PREMIUM PRESENTATION SKIN (D1: foundation)
Scope: EVERY rule is nested under .tvh-tour. Transfers/hotels share the thui-*
design system and MUST NOT be affected. Nothing here touches the money path:
the OVA booking form's DOM is never selected — only its wrapper/shell.
Rollback: restore thc-tour.css.bak-d1.
========================================================================= */
.tvh-tour{
--t-max: 1460px;
--t-ink:#0b1220; --t-body:#4a5568; --t-muted:#8894a6;
--t-line:#e8ecf1; --t-surface:#fff; --t-soft:#f6f8fb;
--t-gold:#c8952f; --t-gold-dk:#a97b23; --t-teal:#0e7490;
--t-ok:#0f9d58; --t-no:#d64545;
--t-r:16px; --t-r-lg:22px;
--t-sh:0 1px 2px rgba(16,24,40,.04), 0 8px 28px rgba(16,24,40,.07);
--t-sh-lg:0 24px 64px rgba(16,24,40,.16);
--t-gap:96px;
color:var(--t-body);
font-feature-settings:"kern" 1;
}
/* ---------- 1. PAGE WIDTH — immersive ---------- */
.tvh-tour .thui-container,
.tvh-tour .thui-container--wide{ max-width:var(--t-max) !important; width:100%; padding-inline:24px; }
/* ---------- 6. TYPOGRAPHY + 13. VERTICAL RHYTHM ---------- */
.tvh-tour .thui-section{ margin:0 0 var(--t-gap) !important; padding:0 !important; }
.tvh-tour .thui-section--tight{ margin-bottom:var(--t-gap) !important; }
.tvh-tour .thui-section__head{ margin:0 0 28px; }
.tvh-tour .thui-section__eyebrow{
display:inline-block; font-size:12px; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--t-gold); margin-bottom:10px;
}
.tvh-tour .thui-section__title,
.tvh-tour .thc-tour__h2{
font-size:clamp(26px,2.5vw,36px); line-height:1.15; font-weight:800;
letter-spacing:-.025em; color:var(--t-ink); margin:0 0 6px;
}
.tvh-tour .tvh-prose{ font-size:17px; line-height:1.8; color:var(--t-body); max-width:72ch; }
.tvh-tour .tvh-prose p{ margin:0 0 1.1em; }
/* ---------- 2. HERO — immersive, 560px, dominant ---------- */
.tvh-tour .thui-breadcrumb{ padding:22px 0 18px; font-size:13px; color:var(--t-muted); }
.tvh-tour .thui-breadcrumb a{ color:var(--t-muted); text-decoration:none; }
.tvh-tour .thui-breadcrumb a:hover{ color:var(--t-gold); }
.tvh-tour .tvh-hero{
position:relative; min-height:600px; display:flex; align-items:flex-end;
border-radius:var(--t-r-lg); overflow:hidden; margin-bottom:var(--t-gap) !important;
box-shadow:var(--t-sh-lg); isolation:isolate;
}
.tvh-tour .thui-hero__bg{ position:absolute; inset:0; z-index:0; }
.tvh-tour .thui-hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); }
.tvh-tour .thui-hero__scrim{
position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg,rgba(6,10,18,.15) 0%,rgba(6,10,18,.42) 45%,rgba(6,10,18,.88) 100%);
}
.tvh-tour .thui-hero__body{ position:relative; z-index:2; padding:56px clamp(24px,4vw,60px); width:100%; color:#fff; }
.tvh-tour .thui-hero__eyebrow{
display:inline-block; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:#f4d79a; margin-bottom:14px;
}
.tvh-tour .thui-hero__title{
font-size:clamp(34px,4.6vw,60px); line-height:1.05; font-weight:800; letter-spacing:-.03em;
color:#fff; margin:0 0 20px; max-width:20ch; text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.tvh-tour .thui-hero__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.tvh-tour .thui-hero__chips .thui-badge{
background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
color:#fff; backdrop-filter:blur(8px); font-size:13px; font-weight:600;
padding:7px 14px; border-radius:999px;
}
.tvh-tour .thui-hero__price{ margin-bottom:22px; }
.tvh-tour .thui-price-badge{
display:inline-flex; align-items:baseline; gap:8px;
background:#fff; color:var(--t-ink); padding:12px 20px; border-radius:14px;
box-shadow:0 8px 30px rgba(0,0,0,.28);
}
.tvh-tour .thui-price-badge small{ font-size:12px; color:var(--t-muted); font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.tvh-tour .thui-price-badge b{ font-size:30px; font-weight:800; letter-spacing:-.02em; }
.tvh-tour .thui-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.tvh-tour .thui-hero__cta .thui-btn{ border-radius:12px; font-weight:700; }
/* Buttons — 15. micro-interactions */
.tvh-tour .thui-btn{ transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s; }
.tvh-tour .thui-btn:hover{ transform:translateY(-2px); }
.tvh-tour .thui-btn:active{ transform:translateY(0); }
.tvh-tour .thui-btn--lg{ padding:16px 30px; font-size:16px; }
.tvh-tour .thui-btn--primary{ background:var(--t-gold); border-color:var(--t-gold); color:#1a1204; }
.tvh-tour .thui-btn--primary:hover{ background:var(--t-gold-dk); border-color:var(--t-gold-dk); box-shadow:0 10px 28px rgba(200,149,47,.4); }
.tvh-tour .thui-btn--whatsapp{ background:#25d366; border-color:#25d366; color:#04240f; }
.tvh-tour .thui-btn--whatsapp:hover{ box-shadow:0 10px 28px rgba(37,211,102,.4); }
/* ---------- 12. TRUST ROW ---------- */
.tvh-tour .tvh-trust{
display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;
padding:26px; background:var(--t-soft); border:1px solid var(--t-line); border-radius:var(--t-r);
}
.tvh-tour .tvh-trust__item{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--t-body); }
.tvh-tour .tvh-trust__item b{ color:var(--t-ink); font-weight:700; }
.tvh-tour .tvh-trust__item span{ font-size:20px; }
/* ---------- LAYOUT: content + booking column ---------- */
.tvh-tour .thui-detail-grid{
display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:56px; align-items:start;
}
.tvh-tour .tvh-tour-content{ min-width:0; }
/* ---------- 5. QUICK FACTS — premium cards, 3-up ---------- */
.tvh-tour .tvh-facts{
display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.tvh-tour .tvh-facts__item{
display:flex; flex-direction:column; gap:6px; padding:22px;
background:var(--t-surface); border:1px solid var(--t-line); border-radius:var(--t-r);
box-shadow:var(--t-sh); transition:transform .2s, box-shadow .2s;
}
.tvh-tour .tvh-facts__item:hover{ transform:translateY(-3px); box-shadow:0 14px 36px rgba(16,24,40,.1); }
.tvh-tour .tvh-facts__label{
font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--t-muted);
}
.tvh-tour .tvh-facts__value{ font-size:19px; font-weight:700; color:var(--t-ink); letter-spacing:-.01em; }
/* Our highlights section reuses the same card language */
.tvh-tour .thc-tour__facts{ grid-template-columns:repeat(3,1fr); gap:14px; }
.tvh-tour .thc-tour__fact{
padding:22px; border-radius:var(--t-r); border-color:var(--t-line); box-shadow:var(--t-sh);
transition:transform .2s, box-shadow .2s;
}
.tvh-tour .thc-tour__fact:hover{ transform:translateY(-3px); box-shadow:0 14px 36px rgba(16,24,40,.1); }
.tvh-tour .thc-tour__fact i{ color:var(--t-gold); font-size:22px; }
.tvh-tour .thc-tour__fact-k{ font-size:11px; letter-spacing:.12em; color:var(--t-muted); }
.tvh-tour .thc-tour__fact-v{ font-size:19px; color:var(--t-ink); }
/* ---------- 7. ITINERARY — real timeline ---------- */
.tvh-tour .thc-tour__timeline{ padding-left:4px; }
.tvh-tour .thc-tour__step{ grid-template-columns:52px 1fr; gap:22px; padding-bottom:34px; }
.tvh-tour .thc-tour__step::before{ left:25px; top:46px; width:2px;
background:linear-gradient(180deg,var(--t-gold) 0%, var(--t-line) 100%); }
.tvh-tour .thc-tour__step-num{
width:52px; height:52px; font-size:16px; font-weight:800;
background:var(--t-surface); color:var(--t-gold); border:2px solid var(--t-gold);
box-shadow:0 0 0 5px var(--t-surface), var(--t-sh);
}
.tvh-tour .thc-tour__step-body{ padding-top:8px; }
.tvh-tour .thc-tour__step-title{ font-size:20px; font-weight:750; color:var(--t-ink); letter-spacing:-.015em; margin-bottom:8px; }
.tvh-tour .thc-tour__step-time{
background:#fdf6e7; color:var(--t-gold-dk); font-size:12px; font-weight:700;
letter-spacing:.03em; padding:5px 12px; border-radius:999px; margin-bottom:10px;
}
.tvh-tour .thc-tour__step-desc{ font-size:16px; line-height:1.75; }
/* ---------- 8. INCLUDED / EXCLUDED — two premium cards ---------- */
.tvh-tour .thc-tour__inex-grid{ gap:20px; }
.tvh-tour .thc-tour__col{
padding:28px; border-radius:var(--t-r); border:1px solid var(--t-line); box-shadow:var(--t-sh);
}
.tvh-tour .thc-tour__col--inc{ background:linear-gradient(180deg,#f2fbf5 0%, #fbfefc 100%); border-color:#d7f0e0; }
.tvh-tour .thc-tour__col--exc{ background:linear-gradient(180deg,#fdf4f4 0%, #fefbfb 100%); border-color:#f3dcdc; }
.tvh-tour .thc-tour__col .thc-tour__h3{ font-size:17px; font-weight:800; letter-spacing:-.01em; margin-bottom:16px; }
.tvh-tour .thc-tour__col--inc .thc-tour__h3{ color:#0b7a44; }
.tvh-tour .thc-tour__col--exc .thc-tour__h3{ color:#b23b3b; }
.tvh-tour .thc-tour__col li{ font-size:15.5px; line-height:1.65; padding-bottom:12px; }
/* ---------- 9. GALLERY GRID ---------- */
.tvh-tour .thc-tour__grid{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.tvh-tour .thc-tour__tile{ border-radius:var(--t-r); box-shadow:var(--t-sh); position:relative; }
.tvh-tour .thc-tour__tile::after{
content:'⤢'; position:absolute; right:10px; bottom:8px; color:#fff; font-size:15px;
opacity:0; transition:opacity .2s; text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.tvh-tour .thc-tour__tile:hover::after{ opacity:1; }
/* legacy 5-thumb strip from content-tour — tame it until D2 replaces it */
.tvh-tour .tvh-gallery{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; }
.tvh-tour .tvh-gallery a{ border-radius:var(--t-r); overflow:hidden; display:block; aspect-ratio:4/3; }
.tvh-tour .tvh-gallery a:first-child{ grid-row:span 2; aspect-ratio:auto; }
.tvh-tour .tvh-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.tvh-tour .tvh-gallery a:hover img{ transform:scale(1.05); }
/* ---------- 10. RELATED TOURS — 3 large cards ---------- */
.tvh-tour .thui-grid--auto{ grid-template-columns:repeat(3,1fr) !important; gap:22px; }
.tvh-tour .thui-card{
border-radius:var(--t-r); overflow:hidden; border:1px solid var(--t-line); background:var(--t-surface);
box-shadow:var(--t-sh); transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; text-decoration:none;
}
.tvh-tour .thui-card:hover{ transform:translateY(-6px); box-shadow:0 22px 52px rgba(16,24,40,.14); }
.tvh-tour .thui-card__media{ aspect-ratio:16/10; overflow:hidden; }
.tvh-tour .thui-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.tvh-tour .thui-card:hover .thui-card__media img{ transform:scale(1.07); }
.tvh-tour .thui-card__body{ padding:20px; }
.tvh-tour .thui-card__title{ font-size:17px; font-weight:750; color:var(--t-ink); line-height:1.35; margin:0 0 14px; }
.tvh-tour .thui-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tvh-tour .thui-card__price b{ font-size:19px; color:var(--t-ink); font-weight:800; }
/* ---------- 4. BOOKING SHELL — wrapper only. Form DOM untouched. ---------- */
.tvh-tour .tvh-booking-col{ position:sticky; top:96px; }
.tvh-tour .tvh-booking-wrap{
background:var(--t-surface); border:1px solid var(--t-line); border-radius:var(--t-r-lg);
box-shadow:var(--t-sh-lg); padding:26px; position:relative; overflow:hidden;
}
.tvh-tour .tvh-booking-wrap::before{
content:''; position:absolute; inset:0 0 auto 0; height:4px;
background:linear-gradient(90deg,var(--t-gold),#e9c877);
}
/* the OVA form lives inside — we only give it room to breathe */
.tvh-tour .tvh-booking-wrap .booking-form label{ font-size:12px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--t-muted); margin-bottom:6px; display:block; }
.tvh-tour .tvh-booking-wrap .booking-form input,
.tvh-tour .tvh-booking-wrap .booking-form select{
border-radius:12px !important; border:1px solid var(--t-line) !important; padding:13px 14px !important;
font-size:15px !important; background:var(--t-soft) !important; width:100%;
}
.tvh-tour .tvh-booking-wrap .booking-form input:focus,
.tvh-tour .tvh-booking-wrap .booking-form select:focus{
border-color:var(--t-gold) !important; background:#fff !important;
box-shadow:0 0 0 4px rgba(200,149,47,.13) !important; outline:none;
}
.tvh-tour .tvh-booking-wrap .booking-form-submit{
width:100%; padding:18px 24px !important; font-size:17px !important; font-weight:800 !important;
border-radius:14px !important; background:var(--t-gold) !important; border:0 !important; color:#1a1204 !important;
letter-spacing:.01em; cursor:pointer; transition:transform .18s, box-shadow .18s, background .18s;
}
.tvh-tour .tvh-booking-wrap .booking-form-submit:hover{
background:var(--t-gold-dk) !important; transform:translateY(-2px);
box-shadow:0 12px 32px rgba(200,149,47,.42);
}
/* ---------- 15. SECTION REVEAL (subtle, no library) ---------- */
@media (prefers-reduced-motion:no-preference){
.tvh-tour .thui-section, .tvh-tour .thc-tour{ animation:tvhIn .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tvhIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }
}
/* ---------- LIGHTBOX (kept) ---------- */
.thc-lb{position:fixed;inset:0;z-index:99999;background:rgba(8,12,20,.95);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s ease}
.thc-lb.is-open{opacity:1;pointer-events:auto}
.thc-lb__img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.thc-lb__btn{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;width:50px;height:50px;border-radius:50%;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.thc-lb__btn:hover{background:rgba(255,255,255,.26);transform:scale(1.06)}
.thc-lb__prev{left:24px;top:50%;transform:translateY(-50%)}
.thc-lb__next{right:24px;top:50%;transform:translateY(-50%)}
.thc-lb__close{right:24px;top:24px}
.thc-lb__count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;letter-spacing:.06em;opacity:.8}
/* ---------- 11. MOBILE ---------- */
@media(max-width:1100px){
.tvh-tour .thui-detail-grid{ grid-template-columns:1fr; gap:40px; }
.tvh-tour .tvh-booking-col{ position:static; }
.tvh-tour .thui-grid--auto{ grid-template-columns:repeat(2,1fr) !important; }
}
@media(max-width:768px){
.tvh-tour{ --t-gap:56px; }
.tvh-tour .thui-container,.tvh-tour .thui-container--wide{ padding-inline:16px; }
.tvh-tour .tvh-hero{ min-height:460px; border-radius:var(--t-r); }
.tvh-tour .thui-hero__body{ padding:28px 20px; }
.tvh-tour .thui-hero__title{ font-size:30px; max-width:none; }
.tvh-tour .thui-hero__cta{ display:grid; grid-template-columns:1fr; }
.tvh-tour .thui-hero__cta .thui-btn{ width:100%; justify-content:center; text-align:center; }
.tvh-tour .tvh-facts,.tvh-tour .thc-tour__facts{ grid-template-columns:1fr 1fr; gap:10px; }
.tvh-tour .tvh-facts__item,.tvh-tour .thc-tour__fact{ padding:16px; }
.tvh-tour .tvh-facts__value,.tvh-tour .thc-tour__fact-v{ font-size:16px; }
.tvh-tour .thc-tour__inex-grid{ grid-template-columns:1fr; }
.tvh-tour .thui-grid--auto{ grid-template-columns:1fr !important; }
.tvh-tour .tvh-gallery{ grid-template-columns:1fr 1fr; }
.tvh-tour .tvh-gallery a:first-child{ grid-column:span 2; grid-row:auto; }
.tvh-tour .thc-tour__grid{ grid-template-columns:1fr 1fr; gap:8px; }
.tvh-tour .thc-tour__step{ grid-template-columns:42px 1fr; gap:16px; }
.tvh-tour .thc-tour__step-num{ width:42px; height:42px; font-size:14px; }
.tvh-tour .thc-tour__step::before{ left:20px; top:38px; }
.tvh-tour .thc-tour__step-title{ font-size:17px; }
}
@media(prefers-reduced-motion:reduce){ .tvh-tour *{ animation:none !important; transition:none !important; } }
/* ============================================================================
CASCADE OVERRIDE — the thui design system is injected INLINE in by
thc-product.php (wp_head:99), i.e. AFTER this stylesheet. It therefore wins
every specificity tie. These rules exist solely to out-specify it.
Measured: it was clamping the container to 1320px and the hero to 436px.
========================================================================= */
html body .tvh-tour .thui-container,
html body .tvh-tour .thui-container--wide,
html body .tvh-tour .thui-container.thui-container--wide{
max-width:1460px !important; width:100% !important; padding-inline:24px !important;
}
html body .tvh-tour .tvh-hero,
html body .tvh-tour .thui-hero.tvh-hero{
min-height:600px !important; height:auto !important; display:flex !important; align-items:flex-end !important;
}
html body .tvh-tour .thui-detail-grid{
display:grid !important; grid-template-columns:minmax(0,1fr) 400px !important; gap:56px !important; align-items:start !important;
}
html body .tvh-tour .tvh-facts{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:14px !important; }
html body .tvh-tour .thc-tour__facts{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:14px !important; }
html body .tvh-tour .thui-grid--auto{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:22px !important; }
html body .tvh-tour .thui-section{ margin-bottom:96px !important; }
html body .tvh-tour .thui-hero__title{ font-size:clamp(34px,4.6vw,60px) !important; line-height:1.05 !important; }
html body .tvh-tour .tvh-booking-col{ position:sticky !important; top:96px !important; }
@media(max-width:1100px){
html body .tvh-tour .thui-detail-grid{ grid-template-columns:1fr !important; gap:40px !important; }
html body .tvh-tour .tvh-booking-col{ position:static !important; }
html body .tvh-tour .thui-grid--auto{ grid-template-columns:repeat(2,1fr) !important; }
}
@media(max-width:768px){
html body .tvh-tour .tvh-hero{ min-height:460px !important; }
html body .tvh-tour .tvh-facts,
html body .tvh-tour .thc-tour__facts{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
html body .tvh-tour .thui-grid--auto{ grid-template-columns:1fr !important; }
html body .tvh-tour .thui-section{ margin-bottom:56px !important; }
}
/* ============================================================================
D2 — Gallery as the single photo experience · booking card overlaps the hero
========================================================================= */
/* Grid rises to meet the hero, so the booking card can overlap it. */
html body .tvh-tour .tvh-hero{ margin-bottom:0 !important; }
html body .tvh-tour .thui-detail-grid{ margin-top:-72px !important; position:relative; z-index:3; }
html body .tvh-tour .tvh-tour-content{ padding-top:104px; } /* content clears the hero; the card does not */
html body .tvh-tour .tvh-booking-col{ top:96px !important; }
/* Booking card — stronger, elevated, overlapping */
html body .tvh-tour .tvh-booking-wrap{
padding:28px !important; border-radius:22px !important;
box-shadow:0 32px 80px rgba(16,24,40,.22), 0 2px 6px rgba(16,24,40,.06) !important;
border:1px solid rgba(255,255,255,.9) !important; background:#fff !important;
}
html body .tvh-tour .tvh-booking-wrap::before{ height:5px; }
/* Relocated trust row */
html body .tvh-tour .tvh-tour-content .tvh-trust{ margin-bottom:56px; }
/* ---- GALLERY: 1 large + 4 small, "+N Photos" on the last tile ---- */
html body .tvh-tour .thc-tour__gal{
display:grid !important;
grid-template-columns:repeat(4,1fr);
grid-template-rows:repeat(2,1fr);
gap:12px;
aspect-ratio:16/9;
}
html body .tvh-tour .thc-tour__tile{
position:relative; padding:0; border:0; background:#eef1f5; cursor:zoom-in;
border-radius:14px; overflow:hidden; display:block; width:100%; height:100%;
box-shadow:var(--t-sh);
}
html body .tvh-tour .thc-tour__tile--lead{ grid-column:span 2; grid-row:span 2; border-radius:18px; }
html body .tvh-tour .thc-tour__tile--hidden{ display:none !important; }
html body .tvh-tour .thc-tour__tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
html body .tvh-tour .thc-tour__tile:hover img{ transform:scale(1.06); }
html body .tvh-tour .thc-tour__tile::after{ content:none; }
html body .tvh-tour .thc-tour__tile:focus-visible{ outline:3px solid var(--t-gold); outline-offset:3px; }
html body .tvh-tour .thc-tour__more{
position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:2px; background:rgba(11,18,32,.62); color:#fff; font-size:13px; font-weight:600;
letter-spacing:.04em; backdrop-filter:blur(2px); transition:background .2s;
}
html body .tvh-tour .thc-tour__more b{ font-size:26px; font-weight:800; letter-spacing:-.02em; }
html body .tvh-tour .thc-tour__tile:hover .thc-tour__more{ background:rgba(11,18,32,.74); }
/* Kill the doubled heading: theme prints eyebrow+title, our section printed its own H2 */
html body .tvh-tour .tvh-tour-content > section > .thui-section__head + .tvh-prose{ margin-top:-8px; }
html body .tvh-tour .thc-tour--gallery .thui-section__head{ margin-bottom:24px; }
html body .tvh-tour .thc-tour--gallery .thc-tour__h2{ margin:0; }
@media(max-width:768px){
html body .tvh-tour .thui-detail-grid{ margin-top:-40px !important; }
html body .tvh-tour .tvh-tour-content{ padding-top:64px; }
html body .tvh-tour .thc-tour__gal{
grid-template-columns:repeat(2,1fr); grid-template-rows:auto; aspect-ratio:auto; gap:8px;
}
html body .tvh-tour .thc-tour__tile{ aspect-ratio:4/3; height:auto; }
html body .tvh-tour .thc-tour__tile--lead{ grid-column:span 2; grid-row:auto; aspect-ratio:16/10; }
html body .tvh-tour .tvh-booking-wrap{ padding:20px !important; }
}
/* ---- D2 FIX 1: the hero's white text colour was cascading into the price badge,
making the price invisible (white on white). The price is the single most
important number on the page — it is now pinned explicitly. ---- */
html body .tvh-tour .thui-hero__price .thui-price-badge,
html body .tvh-tour .thui-price-badge{ background:#fff !important; color:var(--t-ink) !important; }
html body .tvh-tour .thui-price-badge b{ color:var(--t-ink) !important; font-size:32px !important; font-weight:800 !important; }
html body .tvh-tour .thui-price-badge small{ color:var(--t-muted) !important; }
/* ---- D2 FIX 2: the hero (isolation:isolate) was painting OVER the overlapping
booking card and clipping its top. Explicit stacking order. ---- */
html body .tvh-tour .tvh-hero{ isolation:auto !important; z-index:1 !important; }
html body .tvh-tour .thui-detail-grid{ z-index:4 !important; }
html body .tvh-tour .tvh-booking-col{ z-index:5 !important; }
html body .tvh-tour .tvh-booking-wrap{ position:relative; z-index:5; }
/* trust row: single clean line, no orphan wrap */
html body .tvh-tour .tvh-tour-content .tvh-trust{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important; }
/* ============================================================================
D3 — CONVERSION. Hero + booking card are the two dominant elements.
Overlap is achieved with the aside's OWN negative margin (no z-index hacks,
no clipping): the hero simply stops, and the card is pulled up over it.
========================================================================= */
html body .tvh-tour .tvh-hero{ margin-bottom:0 !important; isolation:auto !important; z-index:0 !important; }
html body .tvh-tour .thui-detail-grid{ margin-top:0 !important; z-index:auto !important; }
html body .tvh-tour .tvh-tour-content{ padding-top:56px !important; }
html body .tvh-tour .tvh-booking-col{
margin-top:-110px !important; /* THE OVERLAP */
position:sticky !important; top:24px !important; z-index:20 !important;
}
/* the card itself */
html body .tvh-tour .tvh-booking-wrap{
overflow:visible !important; padding:0 !important; border-radius:20px !important;
background:#fff !important; border:1px solid rgba(16,24,40,.06) !important;
box-shadow:0 40px 90px -20px rgba(16,24,40,.35), 0 4px 12px rgba(16,24,40,.06) !important;
}
html body .tvh-tour .tvh-booking-wrap::before{ display:none !important; }
/* 4. PRICE DOMINATES */
html body .tvh-tour .tvh-bk__head{
padding:26px 26px 20px; border-bottom:1px solid var(--t-line);
background:linear-gradient(180deg,#fffdf8,#fff); border-radius:20px 20px 0 0;
}
html body .tvh-tour .tvh-bk__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
html body .tvh-tour .tvh-bk__from{
font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--t-muted); width:100%;
}
html body .tvh-tour .tvh-bk__amt{
font-size:46px; font-weight:800; letter-spacing:-.03em; color:var(--t-ink); line-height:1;
}
html body .tvh-tour .tvh-bk__unit{ font-size:14px; color:var(--t-muted); font-weight:600; }
/* OVA form gets padding without being touched */
html body .tvh-tour .tvh-booking-wrap .ova-forms-product{ padding:22px 26px 4px; }
/* OVA prints its own "From €30,00" — the header already says it. Suppress the duplicate. */
html body .tvh-tour .tvh-booking-wrap .ova-forms-product > .price,
html body .tvh-tour .tvh-booking-wrap .ova-forms-product .price-product{ display:none !important; }
/* 3. CTA HIERARCHY */
html body .tvh-tour .tvh-booking-wrap .booking-form-submit{
width:100% !important; padding:19px 24px !important; font-size:17px !important;
font-weight:800 !important; border-radius:14px !important;
background:var(--t-gold) !important; color:#1a1204 !important; border:0 !important;
box-shadow:0 10px 26px -6px rgba(200,149,47,.55) !important;
}
html body .tvh-tour .tvh-bk__wa{
display:flex; align-items:center; justify-content:center; gap:8px;
margin:12px 26px 0; padding:16px 20px; width:calc(100% - 52px);
background:#25d366; color:#04240f; font-weight:800; font-size:15px;
border-radius:14px; text-decoration:none; transition:transform .18s, box-shadow .18s;
}
html body .tvh-tour .tvh-bk__wa:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -6px rgba(37,211,102,.6); }
/* 8. TRUST — factual only */
html body .tvh-tour .tvh-bk__trust{ list-style:none; margin:20px 0 0; padding:0 26px; display:grid; gap:9px; }
html body .tvh-tour .tvh-bk__trust li{
position:relative; padding-left:24px; font-size:13.5px; color:var(--t-body); font-weight:500;
}
html body .tvh-tour .tvh-bk__trust li::before{
content:''; position:absolute; left:0; top:5px; width:15px; height:15px; border-radius:50%; background:#dcfce7;
}
html body .tvh-tour .tvh-bk__trust li::after{
content:''; position:absolute; left:5px; top:8px; width:4px; height:8px;
border:solid #16a34a; border-width:0 2px 2px 0; transform:rotate(45deg);
}
html body .tvh-tour .tvh-bk__pay{
display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; padding:16px 26px 22px;
border-top:1px solid var(--t-line);
}
html body .tvh-tour .tvh-bk__pay span{
font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--t-muted);
border:1px solid var(--t-line); border-radius:6px; padding:6px 10px; background:var(--t-soft);
}
/* 6. ITINERARY MOBILE COLLAPSE */
html body .tvh-tour .thc-tour__more-steps{
display:none; width:100%; margin-top:6px; padding:14px; background:#fff;
border:1px solid var(--t-line); border-radius:12px; font-weight:700; font-size:14px;
color:var(--t-ink); cursor:pointer;
}
/* 5. MOBILE STICKY BOOKING BAR */
.tvh-bar{
position:fixed; left:0; right:0; bottom:0; z-index:9998; display:none;
grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
padding:12px 14px calc(12px + env(safe-area-inset-bottom));
background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
border-top:1px solid var(--t-line, #e8ecf1); box-shadow:0 -8px 30px rgba(16,24,40,.12);
}
.tvh-bar__price{ line-height:1.1; }
.tvh-bar__from{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#8894a6; }
.tvh-bar__amt{ font-size:22px; font-weight:800; color:#0b1220; letter-spacing:-.02em; }
.tvh-bar__book{
display:flex; align-items:center; justify-content:center; padding:15px 18px;
background:#c8952f; color:#1a1204; font-weight:800; font-size:15px;
border-radius:12px; text-decoration:none; border:0; cursor:pointer;
}
.tvh-bar__wa{
display:flex; align-items:center; justify-content:center; width:50px; height:50px;
background:#25d366; color:#04240f; border-radius:12px; text-decoration:none; font-size:20px;
}
@media(max-width:1100px){
html body .tvh-tour .tvh-booking-col{ margin-top:0 !important; position:static !important; }
html body .tvh-tour .tvh-tour-content{ padding-top:40px !important; }
}
@media(max-width:768px){
.tvh-bar{ display:grid; }
html body.thc-product-v62{ padding-bottom:78px; }
/* itinerary collapsed to 3 steps */
html body .tvh-tour .thc-tour--itinerary.is-collapsed .thc-tour__step:nth-child(n+4){ display:none; }
html body .tvh-tour .thc-tour__more-steps{ display:block; }
/* 7. RELATED — snap slider, no library */
html body .tvh-tour .thui-grid--auto{
display:grid !important; grid-auto-flow:column !important; grid-auto-columns:78% !important;
grid-template-columns:none !important; overflow-x:auto; scroll-snap-type:x mandatory;
gap:14px !important; padding-bottom:10px; scrollbar-width:none;
}
html body .tvh-tour .thui-grid--auto::-webkit-scrollbar{ display:none; }
html body .tvh-tour .thui-grid--auto > *{ scroll-snap-align:start; }
html body .tvh-tour .tvh-bk__amt{ font-size:38px; }
}
/* D3 FIX — OvaBrw prints its own "From €30,00" block (div.price-product) inside the
form. Our card header already states the price at 46px. Hiding the duplicate so the
eye lands on ONE price. CSS only — the element stays in the DOM, untouched. */
html body .tvh-tour .tvh-booking-wrap .ova-forms-product .price-product{ display:none !important; }
/* ============================================================================
D4 — PROPORTIONS & POLISH PASS. Design-system refinement only.
No structural change. No markup change. No money-path contact.
========================================================================= */
.tvh-tour{ --t-max:1600px; --t-gap:104px; }
/* 1. WIDTH */
html body .tvh-tour .thui-container,
html body .tvh-tour .thui-container--wide,
html body .tvh-tour .thui-container.thui-container--wide{
max-width:1600px !important; padding-inline:32px !important;
}
/* 2. BOOKING CARD — bigger, balances the hero */
html body .tvh-tour .thui-detail-grid{
grid-template-columns:minmax(0,1fr) 440px !important; gap:64px !important;
}
html body .tvh-tour .tvh-bk__head{ padding:32px 32px 26px !important; }
html body .tvh-tour .tvh-bk__amt{ font-size:56px !important; }
html body .tvh-tour .tvh-bk__from{ font-size:12px !important; }
html body .tvh-tour .tvh-bk__unit{ font-size:15px !important; }
html body .tvh-tour .tvh-booking-wrap .ova-forms-product{ padding:26px 32px 6px !important; }
html body .tvh-tour .tvh-bk__wa{ margin:14px 32px 0 !important; width:calc(100% - 64px) !important; padding:18px 20px !important; font-size:16px !important; }
html body .tvh-tour .tvh-bk__trust{ padding:0 32px !important; margin-top:24px !important; gap:11px !important; }
html body .tvh-tour .tvh-bk__trust li{ font-size:14.5px !important; padding-left:26px !important; }
html body .tvh-tour .tvh-bk__pay{ padding:18px 32px 26px !important; }
html body .tvh-tour .tvh-booking-wrap .booking-form-submit{ padding:21px 24px !important; font-size:18px !important; }
/* 3. GAP BELOW HERO — tighten the dead band */
html body .tvh-tour .tvh-tour-content{ padding-top:26px !important; }
html body .tvh-tour .tvh-tour-content .tvh-trust{ margin-bottom:44px !important; padding:30px !important; }
html body .tvh-tour .tvh-trust__item{ font-size:15px !important; }
html body .tvh-tour .tvh-trust__item span{ font-size:24px !important; }
/* 5. + 13. TYPOGRAPHY — everything below H1 comes up */
html body .tvh-tour .thui-section__title,
html body .tvh-tour .thc-tour__h2{ font-size:clamp(30px,2.9vw,42px) !important; margin-bottom:10px !important; }
html body .tvh-tour .thui-section__eyebrow{ font-size:13px !important; }
html body .tvh-tour .tvh-prose{ font-size:18.5px !important; line-height:1.85 !important; max-width:68ch !important; }
html body .tvh-tour .thui-section__head{ margin-bottom:34px !important; }
/* 6. QUICK FACTS — taller, larger */
html body .tvh-tour .tvh-facts{ gap:18px !important; }
html body .tvh-tour .tvh-facts__item{ padding:30px 28px !important; min-height:132px !important; justify-content:center !important; gap:8px !important; border-radius:18px !important; }
html body .tvh-tour .tvh-facts__label{ font-size:12.5px !important; }
html body .tvh-tour .tvh-facts__value{ font-size:23px !important; }
/* 7. HIGHLIGHTS */
html body .tvh-tour .thc-tour__facts{ gap:18px !important; }
html body .tvh-tour .thc-tour__fact{ padding:30px 28px !important; min-height:150px !important; justify-content:center !important; border-radius:18px !important; }
html body .tvh-tour .thc-tour__fact i{ font-size:30px !important; margin-bottom:10px !important; }
html body .tvh-tour .thc-tour__fact-k{ font-size:12.5px !important; }
html body .tvh-tour .thc-tour__fact-v{ font-size:23px !important; }
/* 8. ITINERARY — a real timeline, not a list */
html body .tvh-tour .thc-tour__step{ grid-template-columns:68px 1fr !important; gap:30px !important; padding-bottom:46px !important; }
html body .tvh-tour .thc-tour__step-num{ width:68px !important; height:68px !important; font-size:21px !important; border-width:3px !important; box-shadow:0 0 0 6px #fff, var(--t-sh) !important; }
html body .tvh-tour .thc-tour__step::before{ left:33px !important; top:60px !important; width:3px !important; }
html body .tvh-tour .thc-tour__step-title{ font-size:24px !important; margin-bottom:10px !important; }
html body .tvh-tour .thc-tour__step-time{ font-size:13px !important; padding:6px 14px !important; margin-bottom:12px !important; }
html body .tvh-tour .thc-tour__step-desc{ font-size:17.5px !important; line-height:1.8 !important; }
/* 9. INCLUDED / EXCLUDED */
html body .tvh-tour .thc-tour__inex-grid{ gap:26px !important; }
html body .tvh-tour .thc-tour__col{ padding:38px 34px !important; border-radius:20px !important; }
html body .tvh-tour .thc-tour__col .thc-tour__h3{ font-size:20px !important; margin-bottom:20px !important; }
html body .tvh-tour .thc-tour__col li{ font-size:17px !important; padding-bottom:15px !important; padding-left:34px !important; }
html body .tvh-tour .thc-tour__inc::before,
html body .tvh-tour .thc-tour__exc::before{ width:21px !important; height:21px !important; top:4px !important; }
html body .tvh-tour .thc-tour__inc::after{ left:7px !important; top:9px !important; width:5px !important; height:10px !important; }
html body .tvh-tour .thc-tour__exc::after{ left:6px !important; top:3px !important; font-size:16px !important; }
/* 10. GALLERY — immersive */
html body .tvh-tour .thc-tour__gal{ gap:16px !important; aspect-ratio:16/8.2 !important; }
html body .tvh-tour .thc-tour__tile{ border-radius:18px !important; }
html body .tvh-tour .thc-tour__tile--lead{ border-radius:22px !important; }
html body .tvh-tour .thc-tour__more b{ font-size:34px !important; }
html body .tvh-tour .thc-tour__more{ font-size:14px !important; }
/* 11. RELATED TOURS — real cards */
html body .tvh-tour .thui-grid--auto{ gap:28px !important; }
html body .tvh-tour .thui-card{ border-radius:20px !important; }
html body .tvh-tour .thui-card__media{ aspect-ratio:16/11 !important; }
html body .tvh-tour .thui-card__body{ padding:26px !important; }
html body .tvh-tour .thui-card__title{ font-size:20px !important; margin-bottom:18px !important; }
html body .tvh-tour .thui-card__price b{ font-size:22px !important; }
/* 12. FOOTER GAP — the last section should not leave a canyon */
html body .tvh-tour .thui-section:last-child{ margin-bottom:48px !important; }
html body .tvh-tour > .thui-container--wide{ padding-bottom:0 !important; }
html body .tvh-tour{ margin-bottom:0 !important; padding-bottom:0 !important; }
@media(max-width:768px){
.tvh-tour{ --t-gap:60px; }
html body .tvh-tour .thui-container,
html body .tvh-tour .thui-container--wide{ padding-inline:16px !important; }
html body .tvh-tour .tvh-bk__amt{ font-size:42px !important; }
html body .tvh-tour .tvh-bk__head{ padding:24px !important; }
html body .tvh-tour .tvh-booking-wrap .ova-forms-product{ padding:20px 24px 6px !important; }
html body .tvh-tour .tvh-bk__wa{ margin:12px 24px 0 !important; width:calc(100% - 48px) !important; }
html body .tvh-tour .tvh-bk__trust,
html body .tvh-tour .tvh-bk__pay{ padding-inline:24px !important; }
html body .tvh-tour .thc-tour__step{ grid-template-columns:48px 1fr !important; gap:18px !important; padding-bottom:32px !important; }
html body .tvh-tour .thc-tour__step-num{ width:48px !important; height:48px !important; font-size:16px !important; }
html body .tvh-tour .thc-tour__step::before{ left:23px !important; top:44px !important; }
html body .tvh-tour .thc-tour__step-title{ font-size:19px !important; }
html body .tvh-tour .thc-tour__step-desc{ font-size:16px !important; }
html body .tvh-tour .tvh-facts__item,
html body .tvh-tour .thc-tour__fact{ padding:20px 16px !important; min-height:110px !important; }
html body .tvh-tour .tvh-facts__value,
html body .tvh-tour .thc-tour__fact-v{ font-size:18px !important; }
html body .tvh-tour .thc-tour__col{ padding:26px 22px !important; }
html body .tvh-tour .tvh-prose{ font-size:17px !important; }
}
/* ============================================================================
D4 FIX — THE PRICE WAS BEING COVERED.
OvaBrw's form renders a decorative header graphic (div.logo — a dashed line
with a plane) which is absolutely positioned and was painting ON TOP of our
€30. elementFromPoint() at the centre of the price returned DIV.logo, not the
price. The text was always rendered and dark — it was occluded.
The graphic is pure decoration; the price is the whole point of the card.
========================================================================= */
html body .tvh-tour .tvh-booking-wrap .logo{ display:none !important; }
html body .tvh-tour .tvh-bk__head{
position:relative !important; z-index:3 !important;
background:#fff !important; background-image:linear-gradient(180deg,#fffdf8,#fff) !important;
}
html body .tvh-tour .tvh-bk__price{ position:relative; z-index:4; }
html body .tvh-tour .tvh-booking-wrap .ova-forms-product{ position:relative; z-index:1; }
/* ============================================================================
D5 — FINAL REFINEMENT. Spacing, proportions, hierarchy. No architecture.
NOTE: "content +120px" and "card at 36%" conflict at a fixed width, so the
CONTAINER widens to 1720 instead of shrinking the card. Content gains ~120px;
the card keeps the 440px mass you asked for in D4.
========================================================================= */
/* 1. + 14. HORIZONTAL RHYTHM */
html body .tvh-tour .thui-container,
html body .tvh-tour .thui-container--wide,
html body .tvh-tour .thui-container.thui-container--wide{ max-width:1720px !important; }
html body .tvh-tour .thui-detail-grid{
grid-template-columns:minmax(0,1fr) 440px !important; gap:72px !important;
}
/* 13. body copy up */
html body .tvh-tour .tvh-prose{ font-size:19.5px !important; line-height:1.85 !important; max-width:74ch !important; }
/* 2. card sits lower — overlaps, not glued to the hero */
html body .tvh-tour .tvh-booking-col{ margin-top:-58px !important; top:28px !important; }
html body .tvh-tour .tvh-tour-content{ padding-top:34px !important; }
/* 3. kill the canyon between Quick Facts and Highlights */
.tvh-tour{ --t-gap:64px; }
html body .tvh-tour .thui-section{ margin-bottom:64px !important; }
html body .tvh-tour .thc-tour{ margin-bottom:64px !important; }
/* 4. HIGHLIGHTS — bigger */
html body .tvh-tour .thc-tour__fact{ min-height:180px !important; padding:40px 34px !important; }
html body .tvh-tour .thc-tour__fact i{ font-size:36px !important; margin-bottom:14px !important; }
html body .tvh-tour .thc-tour__fact-v{ font-size:25px !important; }
/* 5. ITINERARY — a major visual section */
html body .tvh-tour .thc-tour__step{ grid-template-columns:76px 1fr !important; gap:36px !important; padding-bottom:60px !important; }
html body .tvh-tour .thc-tour__step-num{
width:76px !important; height:76px !important; font-size:24px !important;
background:var(--t-gold) !important; color:#fff !important; border-color:var(--t-gold) !important;
box-shadow:0 0 0 7px #fff, 0 12px 30px -8px rgba(200,149,47,.6) !important;
}
html body .tvh-tour .thc-tour__step::before{ left:37px !important; top:70px !important; width:3px !important; }
html body .tvh-tour .thc-tour__step-title{ font-size:26px !important; }
html body .tvh-tour .thc-tour__step-desc{ font-size:18.5px !important; line-height:1.85 !important; }
/* 6. INCLUDED / EXCLUDED — less dominant */
html body .tvh-tour .thc-tour__col{ padding:28px 30px !important; }
html body .tvh-tour .thc-tour__col li{ padding-bottom:11px !important; }
/* 7. GALLERY — +20% presence */
html body .tvh-tour .thc-tour__gal{ aspect-ratio:16/9.9 !important; gap:18px !important; }
/* 8. RELATED — real cards */
html body .tvh-tour .thui-grid--auto{ gap:32px !important; }
html body .tvh-tour .thui-card__media{ aspect-ratio:16/12 !important; }
html body .tvh-tour .thui-card__body{ padding:30px !important; }
html body .tvh-tour .thui-card__title{ font-size:22px !important; }
html body .tvh-tour .thui-card__price b{ font-size:24px !important; }
/* 9. footer gap */
html body .tvh-tour .thui-section:last-child{ margin-bottom:34px !important; }
/* 10. HERO — more room to breathe */
html body .tvh-tour .thui-hero__body{ padding:72px clamp(28px,4.5vw,72px) !important; }
html body .tvh-tour .thui-hero__title{ max-width:26ch !important; margin-bottom:26px !important; }
html body .tvh-tour .thui-hero__chips{ margin-bottom:30px !important; }
html body .tvh-tour .thui-hero__price{ margin-bottom:28px !important; }
html body .tvh-tour .thui-hero__cta{ gap:16px !important; }
/* 11. BOOKING CARD — the CTA must dominate the fields */
html body .tvh-tour .tvh-booking-wrap .booking-form label{ font-size:11.5px !important; letter-spacing:.08em !important; }
html body .tvh-tour .tvh-booking-wrap .booking-form input,
html body .tvh-tour .tvh-booking-wrap .booking-form select{
padding:12px 14px !important; font-size:14.5px !important; background:#f7f9fc !important;
}
html body .tvh-tour .tvh-booking-wrap .booking-form-submit{
padding:24px !important; font-size:19px !important; letter-spacing:.02em !important;
border-radius:16px !important; margin-top:6px !important;
box-shadow:0 14px 34px -8px rgba(200,149,47,.7) !important;
}
/* 12. TRUST BADGES — bigger */
html body .tvh-tour .tvh-tour-content .tvh-trust{ padding:26px 30px !important; gap:18px !important; }
html body .tvh-tour .tvh-trust__item{ font-size:16px !important; gap:12px !important; }
html body .tvh-tour .tvh-trust__item span{ font-size:28px !important; }
@media(max-width:768px){
.tvh-tour{ --t-gap:52px; }
html body .tvh-tour .thui-section,
html body .tvh-tour .thc-tour{ margin-bottom:52px !important; }
html body .tvh-tour .tvh-prose{ font-size:17.5px !important; }
html body .tvh-tour .thui-hero__body{ padding:32px 20px !important; }
html body .tvh-tour .thc-tour__step{ grid-template-columns:52px 1fr !important; gap:18px !important; padding-bottom:34px !important; }
html body .tvh-tour .thc-tour__step-num{ width:52px !important; height:52px !important; font-size:17px !important; box-shadow:0 0 0 5px #fff !important; }
html body .tvh-tour .thc-tour__step::before{ left:25px !important; top:48px !important; }
html body .tvh-tour .thc-tour__step-title{ font-size:20px !important; }
html body .tvh-tour .thc-tour__step-desc{ font-size:16.5px !important; }
html body .tvh-tour .thc-tour__fact{ min-height:120px !important; padding:22px 16px !important; }
html body .tvh-tour .thc-tour__fact i{ font-size:26px !important; }
html body .tvh-tour .thui-card__title{ font-size:19px !important; }
}
/* ============================================================================
D5 FIX — HIGHLIGHTS CARDS WERE BROKEN.
The base .thc-tour__fact rules (list-style, flex-column) carried no
!important, so the inline thui stylesheet re-asserted list markers and
inline flow. Only the padding survived — hence tall, hollow cards with
bullets. Every structural property is now pinned.
Also: 4 highlights in a 3-col grid orphaned the 4th. Now auto-fits.
========================================================================= */
html body .tvh-tour .thc-tour__facts{
list-style:none !important; margin:0 !important; padding:0 !important;
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;
gap:18px !important;
}
html body .tvh-tour .thc-tour__facts > li{ list-style:none !important; }
html body .tvh-tour .thc-tour__facts > li::marker{ content:none !important; }
html body .tvh-tour .thc-tour__fact{
display:flex !important; flex-direction:column !important;
align-items:flex-start !important; justify-content:center !important;
gap:6px !important; text-align:left !important;
min-height:0 !important; padding:28px 26px !important;
list-style:none !important; margin:0 !important;
border:1px solid var(--t-line) !important; border-radius:18px !important;
background:#fff !important; box-shadow:var(--t-sh) !important;
}
html body .tvh-tour .thc-tour__fact i{
display:block !important; font-size:30px !important; line-height:1 !important;
margin:0 0 10px !important; color:var(--t-gold) !important;
}
html body .tvh-tour .thc-tour__fact-k{
display:block !important; width:100% !important;
font-size:12px !important; font-weight:700 !important; letter-spacing:.12em !important;
text-transform:uppercase !important; color:var(--t-muted) !important;
}
html body .tvh-tour .thc-tour__fact-v{
display:block !important; width:100% !important;
font-size:23px !important; font-weight:700 !important; color:var(--t-ink) !important;
letter-spacing:-.01em !important; line-height:1.25 !important;
}
/* same guard for the theme's Quick Facts, which shares the pattern */
html body .tvh-tour .tvh-facts{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important; }
html body .tvh-tour .tvh-facts__item{ min-height:0 !important; padding:28px 26px !important; }
@media(max-width:768px){
html body .tvh-tour .thc-tour__facts,
html body .tvh-tour .tvh-facts{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
html body .tvh-tour .thc-tour__fact,
html body .tvh-tour .tvh-facts__item{ padding:18px 16px !important; }
html body .tvh-tour .thc-tour__fact-v{ font-size:18px !important; }
}
/* ============================================================================
██ MOBILE SPRINT — P0. MUST BE THE LAST BLOCK IN THIS FILE. ██
WHY THIS EXISTS AND WHY IT IS LAST:
The D4/D5 desktop polish added grid rules with !important at the END of this
stylesheet — e.g. repeat(auto-fit, minmax(240px,1fr)). On a 390px phone that
collapses to ONE CARD PER ROW and it OVERRODE every mobile rule written earlier.
My own late desktop work destroyed the mobile layout. Every symptom — sparse
page, 1-per-row cards, unreadable related tours — came from that.
This layer ships LAST so nothing can override it. Anything added after this
block must respect it or it will break the phone again.
========================================================================= */
@media (max-width: 820px) {
/* ---- 1. HERO: 647px -> 380px ---- */
html body .tvh-tour .tvh-hero{ min-height:380px !important; height:auto !important; border-radius:14px !important; }
html body .tvh-tour .thui-hero__body{ padding:24px 18px !important; }
html body .tvh-tour .thui-hero__title{ font-size:30px !important; line-height:1.15 !important; max-width:none !important;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:12px !important; }
html body .tvh-tour .thui-hero__eyebrow{ font-size:10px !important; margin-bottom:8px !important; }
html body .tvh-tour .thui-hero__chips{ gap:6px !important; margin-bottom:14px !important; max-height:64px; overflow:hidden; }
html body .tvh-tour .thui-hero__chips .thui-badge{ font-size:11px !important; padding:5px 10px !important; }
html body .tvh-tour .thui-hero__price{ margin-bottom:0 !important; }
html body .tvh-tour .thui-price-badge b{ font-size:26px !important; }
html body .tvh-tour .thui-hero__cta{ display:none !important; } /* the sticky bar IS the CTA */
/* ---- 2. THE DESKTOP SIDEBAR MUST NOT EXIST ON A PHONE ---- */
/* 🔴 CRITICAL FIX. The previous rule was: .tvh-booking-col{ display:none }
That column contains THE ONLY BOOKING FORM. Hiding it made mobile booking
IMPOSSIBLE — the page got prettier and the till stopped working.
NEVER hide the booking column. Turn it into the bottom sheet instead:
same form, same fields, same money path — it just slides up. */
html body .tvh-tour .tvh-booking-col{
display:block !important;
position:fixed !important;
left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
z-index:10000 !important;
max-height:92vh !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch;
margin:0 !important;
transform:translateY(101%);
transition:transform .28s cubic-bezier(.2,.8,.2,1);
background:#fff !important;
border-radius:20px 20px 0 0 !important;
box-shadow:0 -18px 50px rgba(11,18,32,.35) !important;
padding-bottom:24px !important;
}
html body.tvh-sheet-open .tvh-tour .tvh-booking-col{ transform:translateY(0); }
html body .tvh-tour .tvh-booking-wrap{
box-shadow:none !important; border:0 !important; border-radius:0 !important; padding:0 !important;
}
/* grab handle */
html body .tvh-tour .tvh-booking-col::before{
content:''; display:block; width:44px; height:5px; border-radius:99px;
background:#dfe4ea; margin:10px auto 4px;
}
/* scrim */
.tvh-sheet-scrim{
position:fixed; inset:0; z-index:9999; background:rgba(8,12,20,.55);
opacity:0; pointer-events:none; transition:opacity .25s;
}
body.tvh-sheet-open .tvh-sheet-scrim{ opacity:1; pointer-events:auto; }
body.tvh-sheet-open{ overflow:hidden; }
.tvh-sheet-close{
position:absolute; top:10px; right:14px; z-index:2;
width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
background:#f1f3f6; color:#0b1220; font-size:17px; line-height:1;
}
html body .tvh-tour .thui-detail-grid{ display:block !important; margin-top:0 !important; }
html body .tvh-tour .tvh-tour-content{ padding-top:20px !important; }
/* ---- 3. DENSITY: 96/64 -> 40 ---- */
.tvh-tour{ --t-gap:40px; }
html body .tvh-tour .thui-section,
html body .tvh-tour .thc-tour{ margin-bottom:40px !important; }
html body .tvh-tour .thui-section__head{ margin-bottom:18px !important; }
html body .tvh-tour .thui-container,
html body .tvh-tour .thui-container--wide{ padding-inline:16px !important; }
html body .tvh-tour .tvh-tour-content .tvh-trust{ display:none !important; } /* duplicated in hero chips */
/* ---- 4. TWO COLUMNS. This is the rule the desktop polish was killing. ---- */
html body .tvh-tour .tvh-facts,
html body .tvh-tour .thc-tour__facts{
display:grid !important;
grid-template-columns:1fr 1fr !important; /* NOT auto-fit. Never auto-fit on a phone. */
gap:10px !important;
}
html body .tvh-tour .tvh-facts__item,
html body .tvh-tour .thc-tour__fact{
min-height:0 !important; padding:16px 14px !important; border-radius:14px !important; gap:4px !important;
}
html body .tvh-tour .thc-tour__fact i{ font-size:22px !important; margin-bottom:6px !important; }
html body .tvh-tour .tvh-facts__label,
html body .tvh-tour .thc-tour__fact-k{ font-size:10px !important; letter-spacing:.08em !important; }
html body .tvh-tour .tvh-facts__value,
html body .tvh-tour .thc-tour__fact-v{ font-size:16px !important; line-height:1.25 !important; }
/* ---- 5. TYPOGRAPHY ---- */
html body .tvh-tour .thui-section__title,
html body .tvh-tour .thc-tour__h2{ font-size:26px !important; margin-bottom:4px !important; }
html body .tvh-tour .thui-section__eyebrow{ font-size:11px !important; }
html body .tvh-tour .tvh-prose{ font-size:16px !important; line-height:1.7 !important; max-width:none !important; }
/* ---- 6. ITINERARY: tight cards, collapse after 3 (JS already does this) ---- */
html body .tvh-tour .thc-tour__step{ grid-template-columns:34px 1fr !important; gap:12px !important; padding-bottom:22px !important; }
html body .tvh-tour .thc-tour__step-num{ width:34px !important; height:34px !important; font-size:13px !important;
box-shadow:0 0 0 4px #fff !important; border-width:2px !important; }
html body .tvh-tour .thc-tour__step::before{ left:16px !important; top:32px !important; width:2px !important; }
html body .tvh-tour .thc-tour__step-title{ font-size:18px !important; margin-bottom:4px !important; }
html body .tvh-tour .thc-tour__step-time{ font-size:11px !important; padding:3px 9px !important; margin-bottom:6px !important; }
html body .tvh-tour .thc-tour__step-desc{ font-size:15px !important; line-height:1.6 !important; }
html body .tvh-tour .thc-tour__more-steps{ display:block !important; padding:13px !important; font-size:14px !important; }
/* ---- 7. INCLUDED / EXCLUDED: stacked, tight ---- */
html body .tvh-tour .thc-tour__inex-grid{ grid-template-columns:1fr !important; gap:12px !important; }
html body .tvh-tour .thc-tour__col{ padding:18px 16px !important; border-radius:14px !important; }
html body .tvh-tour .thc-tour__col .thc-tour__h3{ font-size:16px !important; margin-bottom:10px !important; }
html body .tvh-tour .thc-tour__col li{ font-size:15px !important; padding:0 0 8px 26px !important; }
/* ---- 8. GALLERY: 1 large + 2 small + "+N" ---- */
html body .tvh-tour .thc-tour__gal{
display:grid !important;
grid-template-columns:1fr 1fr !important;
grid-auto-rows:auto !important;
aspect-ratio:auto !important;
gap:8px !important;
}
html body .tvh-tour .thc-tour__tile{ aspect-ratio:1/1 !important; height:auto !important; border-radius:12px !important; }
html body .tvh-tour .thc-tour__tile--lead{ grid-column:1 / -1 !important; aspect-ratio:16/10 !important; border-radius:14px !important; }
html body .tvh-tour .thc-tour__tile:nth-of-type(n+4){ display:none !important; } /* lead + 2 = 3 visible */
html body .tvh-tour .thc-tour__more b{ font-size:24px !important; }
html body .tvh-tour .thc-tour__more{ font-size:12px !important; }
/* ---- 9. RELATED TOURS: swipe slider, 1.15 cards visible ---- */
html body .tvh-tour .thui-grid--auto{
display:grid !important;
grid-auto-flow:column !important;
grid-auto-columns:82% !important;
grid-template-columns:none !important;
gap:12px !important;
overflow-x:auto !important;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding:2px 16px 10px 0 !important;
margin-inline:0 !important;
}
html body .tvh-tour .thui-grid--auto::-webkit-scrollbar{ display:none; }
html body .tvh-tour .thui-grid--auto > *{ scroll-snap-align:start; }
html body .tvh-tour .thui-card__media{ aspect-ratio:16/10 !important; }
html body .tvh-tour .thui-card__body{ padding:16px !important; }
html body .tvh-tour .thui-card__title{ font-size:17px !important; line-height:1.3 !important; margin-bottom:10px !important; }
html body .tvh-tour .thui-card__price b{ font-size:20px !important; }
/* ---- 10. STICKY BOOKING BAR — the entire mobile booking experience ---- */
.tvh-bar{ display:grid !important; }
html body.thc-product-v62{ padding-bottom:86px !important; }
.tvh-bar__amt{ font-size:24px !important; }
.tvh-bar__book{ padding:16px 20px !important; font-size:16px !important; }
.tvh-bar__deposit{ display:block; font-size:11px; color:#0f9d58; font-weight:700; margin-top:1px; }
}
/* ---- P1: STICKY SECTION NAV ---- */
.tvh-nav{
position:sticky; top:0; z-index:90;
background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
border-bottom:1px solid var(--t-line,#e8ecf1);
margin:0 0 40px;
}
.tvh-nav__inner{
display:flex; gap:6px; align-items:center;
max-width:1720px; margin:0 auto; padding:10px 32px;
overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.tvh-nav__inner::-webkit-scrollbar{ display:none; }
.tvh-nav__pill{
flex:0 0 auto; padding:9px 16px; border-radius:999px; text-decoration:none;
font-size:14px; font-weight:600; color:var(--t-body,#4a5568);
white-space:nowrap; transition:background .18s, color .18s;
}
.tvh-nav__pill:hover{ background:#f1f3f6; color:var(--t-ink,#0b1220); }
.tvh-nav__pill.is-active{ background:var(--t-ink,#0b1220); color:#fff; }
@media (max-width:820px){
.tvh-nav{ top:0; margin:0 0 24px; }
.tvh-nav__inner{ padding:8px 16px; gap:6px; }
.tvh-nav__pill{ padding:8px 14px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce){ .tvh-nav__pill{ transition:none; } }
/* ---- P1 GALLERY FIX ---- */
/* the badge is moved by JS to the last VISIBLE tile — style it wherever it lands */
html body .tvh-tour .thc-tour__tile .thc-tour__more{ display:flex; }
@media (max-width:820px){
/* lead spans both columns, then exactly 2 squares = 3 visible tiles */
html body .tvh-tour .thc-tour__tile:nth-of-type(n+4):not(.thc-tour__tile--hidden){ display:none !important; }
html body .tvh-tour .thc-tour__more b{ font-size:26px !important; }
html body .tvh-tour .thc-tour__more{ font-size:13px !important; }
}
/* ---- P1 ACCORDION (mobile) ---- */
.tvh-acc__toggle{
display:none; width:100%; align-items:center; justify-content:space-between;
background:none; border:0; padding:0 0 10px; cursor:pointer;
font-size:16px; font-weight:800; color:inherit; text-align:left;
}
.tvh-acc__toggle em{ font-style:normal; font-weight:600; opacity:.65; }
.tvh-acc__toggle i{ transition:transform .2s; font-size:13px; }
.thc-tour__col.is-closed .tvh-acc__toggle i{ transform:rotate(-90deg); }
.thc-tour__col.is-closed ul{ display:none !important; }
@media (max-width:820px){
html body .tvh-tour .thc-tour__col--inc .tvh-acc__toggle{ color:#0b7a44; }
html body .tvh-tour .thc-tour__col--exc .tvh-acc__toggle{ color:#b23b3b; }
html body .tvh-tour .thc-tour__col{ padding:16px !important; }
}
/* ============================================================================
P1.1 HOTFIX — must remain AFTER the mobile layer.
========================================================================= */
/* ---- 1. ITINERARY: ONE numbering system, not two. ----
The timeline is an , so the browser printed "1." AND we printed the gold
badge. Two numbering systems side by side reads as broken markup. The gold
badge is the design; the list marker must die at every specificity. */
html body .tvh-tour .thc-tour__timeline,
html body .tvh-tour ol.thc-tour__timeline{
list-style:none !important; list-style-type:none !important;
margin:0 !important; padding:0 !important;
}
html body .tvh-tour .thc-tour__timeline > li,
html body .tvh-tour .thc-tour__step{
list-style:none !important; list-style-type:none !important;
}
html body .tvh-tour .thc-tour__timeline > li::marker,
html body .tvh-tour .thc-tour__step::marker{ content:'' !important; font-size:0 !important; }
/* ---- 2. INCLUDED / NOT INCLUDED: two separate blocks, not one merged slab ---- */
html body .tvh-tour .thc-tour__col{
border-radius:18px !important;
box-shadow:0 2px 10px rgba(0,0,0,.03) !important;
margin-bottom:24px !important;
}
html body .tvh-tour .thc-tour__col:last-child{ margin-bottom:0 !important; }
html body .tvh-tour .thc-tour__inex-grid{ gap:24px !important; }
/* ---- 7b. desktop: tighten the run-up to the itinerary ---- */
@media (min-width:821px){
html body .tvh-tour .thc-tour--itinerary{ margin-top:-16px !important; }
}
@media (max-width:820px){
/* 2 (mobile) */
html body .tvh-tour .thc-tour__col{ margin-bottom:20px !important; }
html body .tvh-tour .thc-tour__inex-grid{ gap:20px !important; }
/* 5 wider related cards */
html body .tvh-tour .thui-grid--auto{ grid-auto-columns:88% !important; }
/* 6 gallery gutters */
html body .tvh-tour .thc-tour__gal{ gap:12px !important; }
/* 7 larger section titles */
html body .tvh-tour .thui-section__title,
html body .tvh-tour .thc-tour__h2{ font-size:30px !important; }
/* 4 the sticky CTA must never cover the last section or the footer */
html body.thc-product-v62{ padding-bottom:96px !important; }
}
/* ============================================================================
P1.2 — ITINERARY AS CARDS. CSS ONLY.
No markup change, no data change, no booking change.
The /- stay in the DOM (good for semantics and SEO) — we simply stop
drawing them as a numbered timeline and draw them as cards instead.
The "Show full itinerary" collapse is untouched: it works on .thc-tour__step,
which still exists.
========================================================================= */
/* kill the timeline chrome: number badge + vertical rail */
html body .tvh-tour .thc-tour__step-mark,
html body .tvh-tour .thc-tour__step-num{ display:none !important; }
html body .tvh-tour .thc-tour__step::before{ display:none !important; content:none !important; }
/* the step becomes a single-column card */
html body .tvh-tour .thc-tour__timeline{ display:block !important; }
html body .tvh-tour .thc-tour__step{
display:block !important;
grid-template-columns:none !important;
gap:0 !important;
padding:28px !important;
margin:0 0 20px !important;
background:#fff !important;
border:1px solid #eef0f3 !important;
border-radius:18px !important;
box-shadow:0 4px 18px rgba(15,23,42,.04) !important;
transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s !important;
}
html body .tvh-tour .thc-tour__step:last-child{ margin-bottom:0 !important; }
html body .tvh-tour .thc-tour__step-body{ padding-top:0 !important; }
/* 4. hover — same language as the related-tour cards */
@media (hover:hover){
html body .tvh-tour .thc-tour__step:hover{
transform:translateY(-3px) !important;
box-shadow:0 10px 30px rgba(15,23,42,.08) !important;
}
}
/* 📍 marker replaces the number */
html body .tvh-tour .thc-tour__step-title{
display:flex !important; align-items:flex-start; gap:10px;
font-size:24px !important; font-weight:700 !important;
line-height:1.3 !important; margin:0 0 8px !important;
}
html body .tvh-tour .thc-tour__step-title::before{
content:'📍'; flex:0 0 auto; font-size:20px; line-height:1.35;
}
html body .tvh-tour .thc-tour__step-desc{
font-size:18px !important; line-height:1.7 !important;
}
html body .tvh-tour .thc-tour__step-time{ margin-bottom:10px !important; }
/* 7. give the itinerary room to start */
html body .tvh-tour .thc-tour--itinerary{ margin-top:48px !important; }
/* 8. the collapse button keeps its own breathing room */
html body .tvh-tour .thc-tour__more-steps{ margin-top:4px !important; }
/* 5. mobile */
@media (max-width:820px){
html body .tvh-tour .thc-tour__step{
padding:22px !important;
border-radius:16px !important;
margin-bottom:16px !important;
}
html body .tvh-tour .thc-tour__step-title{ font-size:19px !important; gap:8px; }
html body .tvh-tour .thc-tour__step-title::before{ font-size:17px; }
html body .tvh-tour .thc-tour__step-desc{ font-size:16px !important; line-height:1.65 !important; }
html body .tvh-tour .thc-tour--itinerary{ margin-top:32px !important; }
}
@media (prefers-reduced-motion:reduce){
html body .tvh-tour .thc-tour__step{ transition:none !important; }
}