@media (max-width: 900px) {
  .site-header .nav {
    position: absolute;
    inset: auto 0 auto 0;
    top: 0;
    height: 100vh;
    transform: translateY(-110%);
  }

  .site-header .nav.open { transform: translateY(0); }
}

@media (min-width: 901px) {
  .site-header .nav { font-size: 20px !important; gap: 36px !important; }
  .site-header .nav > a:not(.nav-cta) { font-size: 20px !important; font-weight: 600 !important; padding: 18px 3px 14px !important; border-bottom: 3px solid transparent !important; }
  .site-header .nav > a.active:not(.nav-cta) { color: #7800a8 !important; border-bottom-color: #7800a8 !important; }
  .site-header .nav > a:not(.nav-cta):hover { color: #7800a8 !important; }
  .site-header .language-switcher button { font-size: 13px !important; padding: 8px 7px !important; }
  .site-header .brand > img:first-child { width: 210px !important; }
}

@media (max-width: 900px) {
  .site-header .nav > a.active:not(.nav-cta) {
    color: #7800a8 !important;
    font-weight: 700 !important;
    border-bottom: 3px solid #7800a8 !important;
    padding-bottom: 7px !important;
  }
}

/* Boat-trip cards: a balanced 2 × 2 grid on desktop. */
.service-grid .service-card.wide {
  grid-column: auto;
}

.service-grid .service-card {
  height: 100%;
}

/* Apartment facts: two primary facts, then four amenities in a 2 × 2 grid. */
.facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.facts .fact + .fact {
  border-left: 0;
}

.facts .fact:nth-child(even) {
  border-left: 1px solid var(--line);
}

.facts .fact:nth-child(n + 3) {
  border-top: 1px solid var(--line);
}

/* Critical mobile booking layout, protected from later theme rules. */
@media (max-width: 700px) {
  #booking.booking-with-calendar{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;width:100%!important;padding:48px 16px!important;gap:28px!important;overflow:hidden!important}
  #booking.booking-with-calendar>.availability-section,#booking.booking-with-calendar>.quote-form{display:block!important;position:static!important;inset:auto!important;grid-column:auto!important;flex:0 0 auto!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;transform:none!important}
  #booking .calendar-heading{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important}
  #booking .calendar-heading h2{min-width:0!important;font-size:32px!important;line-height:1.1!important}
  #booking .calendar-heading>div{display:flex!important;gap:8px!important}
  #booking .calendar-heading button{width:42px!important;height:42px!important}
  #booking .calendar-months{display:block!important;width:100%!important}
  #booking .calendar-month{width:100%!important;max-width:100%!important;padding:16px 10px!important}
  #booking .calendar-month:nth-child(2){display:none!important}
  #booking .calendar-days span{min-width:0!important;height:38px!important;font-size:13px!important}
  #booking .calendar-legend{display:flex!important;gap:14px!important;margin:18px 0 0!important}
  #booking.booking-with-calendar>.quote-form{padding:28px 18px!important;border-radius:14px!important}
  #booking .quote-form h2{font-size:36px!important;line-height:1.1!important}
  #booking .form-grid{display:flex!important;flex-direction:column!important;width:100%!important;gap:14px!important}
  #booking .form-grid>*{display:block!important;grid-column:auto!important;flex:0 0 auto!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important}
  #booking input,#booking select,#booking textarea{padding:15px!important;font-size:16px!important}
  #booking textarea{min-height:130px!important}
  #booking button[type="submit"]{width:100%!important;justify-content:center!important;border-radius:12px!important}
}