/* VMON4.3.3 · canvas + inner-content repair.
   4.3.2 correctly released the legacy Colibri half-width ancestor but then
   widened the whole product to the viewport. The real production bug was
   narrower: the product canvas should stay centred, while the content inside
   the Marga tabs must be allowed to use that canvas. Reservation follows the
   same principle: centred functional canvas, fluid fields inside it. */

/* -------------------------------------------------------------------------
   TRIP DETAIL
   One deliberate product canvas, not a full-viewport strip and not a legacy
   50/66% Colibri column. */
body.cth-brand--vmon.vmon-marga-page:not(.cth-marga-reservation):has(.md-template .viaje-title)
.content.colibri-page-content :where(.h-section,.h-section-grid-container,.h-row-container,.h-row,.h-col,.h-column,.h-column-container,.h-column__inner,.h-column__content):has(.md-template),
body.cth-brand--vmon.cth-vmon-trip-runtime .cth-vmon-trip-host{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  flex:0 0 100%!important;
  float:none!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}
body.cth-brand--vmon.vmon-marga-page:not(.cth-marga-reservation):has(.md-template .viaje-title)
.content.colibri-page-content .h-row:has(.md-template){display:block!important}

body.cth-brand--vmon.vmon-marga-page:not(.cth-marga-reservation):has(.md-template .viaje-title) .md-template,
body.cth-brand--vmon .md-template.cth-vmon-trip-template{
  display:block!important;
  width:min(calc(100% - 36px),1240px)!important;
  max-width:1240px!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
}

/* Product rows after the commercial header own the whole centred canvas. */
body.cth-brand--vmon.vmon-marga-page:not(.cth-marga-reservation):has(.md-template .viaje-title)
.md-template>.h-section-grid-container,
body.cth-brand--vmon.vmon-marga-page:not(.cth-marga-reservation):has(.md-template .viaje-title)
.md-template>.h-section-grid-container>.h-row-container,
body.cth-brand--vmon.vmon-marga-page:not(.cth-marga-reservation):has(.md-template .viaje-title)
.md-template>.h-section-grid-container>.h-row-container>.h-row:not(:has(.viaje-title)),
body.cth-brand--vmon.vmon-marga-page:not(.cth-marga-reservation):has(.md-template .viaje-title)
.md-template>.h-section-grid-container>.h-row-container>.h-row:not(:has(.viaje-title))>.h-column,
body.cth-brand--vmon .md-template.cth-vmon-trip-template .cth-vmon-trip-inner-wide{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  flex:0 0 100%!important;
  float:none!important;
  box-sizing:border-box!important;
}

body.cth-brand--vmon.vmon-marga-page:not(.cth-marga-reservation):has(.md-template .viaje-title)
.md-template :where(.h-tabs,.h-tabs-navigation,.h-tabs-item-content,.h-tabs-content,#itinerario,#imagenes,#alojamiento,#precioIncluye),
body.cth-brand--vmon .md-template.cth-vmon-trip-template :where(.h-tabs,.h-tabs-navigation,.h-tabs-item-content,.h-tabs-content,#itinerario,#imagenes,#alojamiento,#precioIncluye){
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

/* This is the bug that 4.3.2 missed: VMON4.2 still capped ordinary tab prose
   at 72ch. The screenshot therefore showed a wide white tab with a narrow
   column of text on the left. Remove that cap on the real nested Marga content.
   Images/tables already remain fluid. */
body.cth-brand--vmon.vmon-marga-page:not(.cth-marga-reservation):has(.md-template .viaje-title)
.md-template :where(#itinerario,#imagenes,#alojamiento,#precioIncluye) :where(.w-100,.h-y-container,.h-column__content),
body.cth-brand--vmon .md-template.cth-vmon-trip-template :where(#itinerario,#imagenes,#alojamiento,#precioIncluye) :where(.w-100,.h-y-container,.h-column__content){
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
body.cth-brand--vmon.vmon-marga-page:not(.cth-marga-reservation):has(.md-template .viaje-title)
.md-template .h-tabs-item-content :where(p,ul,ol,blockquote,figure,div):not(.select2-container),
body.cth-brand--vmon .md-template.cth-vmon-trip-template .h-tabs-item-content :where(p,ul,ol,blockquote,figure,div):not(.select2-container){
  max-width:none!important;
  min-width:0!important;
}
body.cth-brand--vmon.vmon-marga-page:not(.cth-marga-reservation):has(.md-template .viaje-title)
.md-template .h-tabs-item-content :where(p,ul,ol,blockquote){width:100%!important}

/* -------------------------------------------------------------------------
   RESERVATION
   Match the proven Laponia geometry: 1240 outer canvas, 1120 usable form,
   centred. "100%" means 100% of this functional canvas, not the viewport. */
body.cth-brand--vmon.cth-marga-reservation
.content.colibri-page-content :where(.h-section,.h-section-grid-container,.h-row-container,.h-row,.h-col,.h-column,.h-column-container,.h-column__inner,.h-column__content):has(.md-template),
body.cth-brand--vmon.cth-vmon-reservation-runtime .cth-vmon-reservation-host{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  flex:0 0 100%!important;
  float:none!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}
body.cth-brand--vmon.cth-marga-reservation .content.colibri-page-content .h-row:has(.md-template){display:block!important}
body.cth-brand--vmon.cth-marga-reservation .md-template,
body.cth-brand--vmon .md-template.cth-vmon-reservation-template{
  display:block!important;
  width:min(calc(100% - 36px),1240px)!important;
  max-width:1240px!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:30px 0 76px!important;
  box-sizing:border-box!important;
}
body.cth-brand--vmon.cth-marga-reservation .md-template form,
body.cth-brand--vmon form.cth-vmon-reservation-form{
  display:block!important;
  width:100%!important;
  max-width:1120px!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:clamp(22px,2.6vw,38px)!important;
  box-sizing:border-box!important;
}
body.cth-brand--vmon.cth-marga-reservation .md-template form :where(.h-row,.row),
body.cth-brand--vmon form.cth-vmon-reservation-form .cth-vmon-reservation-row{
  display:flex!important;
  flex-flow:row wrap!important;
  align-items:flex-start!important;
  gap:18px 20px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0 0 22px!important;
  box-sizing:border-box!important;
}
body.cth-brand--vmon.cth-marga-reservation .md-template form :where(.h-row,.row)>:where(.h-col,.h-column,[class*="h-col-"],[class*="col-"]),
body.cth-brand--vmon form.cth-vmon-reservation-form .cth-vmon-reservation-row>:where(.h-col,.h-column,[class*="h-col-"],[class*="col-"]){
  float:none!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  flex:1 1 230px!important;
  margin:0!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
}
body.cth-brand--vmon.cth-marga-reservation .md-template form .h-row>.h-col-lg-2{flex-basis:150px!important;flex-grow:0!important}
body.cth-brand--vmon.cth-marga-reservation .md-template form .h-row>.h-col-lg-3{flex-basis:220px!important}
body.cth-brand--vmon.cth-marga-reservation .md-template form .h-row>.h-col-lg-4{flex-basis:280px!important}
body.cth-brand--vmon.cth-marga-reservation .md-template form .h-row>.h-col-lg-6{flex-basis:440px!important}
body.cth-brand--vmon.cth-marga-reservation .md-template form .h-row>:where(.h-col-lg-8,.h-col-lg-9,.h-col-lg-10,.h-col-lg-12){flex-basis:100%!important}
body.cth-brand--vmon.cth-marga-reservation .md-template form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),select,textarea,.select2-container){
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
body.cth-brand--vmon.cth-marga-reservation .md-template form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),select){min-height:46px!important}
body.cth-brand--vmon.cth-marga-reservation .md-template form textarea{min-height:145px!important;resize:vertical!important}
body.cth-brand--vmon.cth-marga-reservation .md-template form :where(.cth-vmon-reservation-cell--wide,.g-recaptcha,[data-sitekey]){width:100%!important;max-width:100%!important;flex:0 0 100%!important}
body.cth-brand--vmon.cth-marga-reservation .cth-vmon-reservation-history__choice{display:inline-flex!important;width:auto!important;min-width:58px!important;max-width:none!important;white-space:nowrap!important}

@media(max-width:1023px) and (min-width:768px){
  body.cth-brand--vmon.cth-marga-reservation .md-template form :where(.h-row,.row)>:where(.h-col,.h-column,[class*="h-col-"],[class*="col-"]){flex:1 1 calc(50% - 10px)!important}
  body.cth-brand--vmon.cth-marga-reservation .md-template form .h-row>:where(.h-col-lg-8,.h-col-lg-9,.h-col-lg-10,.h-col-lg-12){flex-basis:100%!important}
}
@media(max-width:767px){
  body.cth-brand--vmon.vmon-marga-page:not(.cth-marga-reservation):has(.md-template .viaje-title) .md-template,
  body.cth-brand--vmon .md-template.cth-vmon-trip-template,
  body.cth-brand--vmon.cth-marga-reservation .md-template,
  body.cth-brand--vmon .md-template.cth-vmon-reservation-template{width:min(calc(100% - 20px),1240px)!important;max-width:1240px!important;margin-left:auto!important;margin-right:auto!important}
  body.cth-brand--vmon.cth-marga-reservation .md-template form{max-width:100%!important;padding:18px 14px!important}
  body.cth-brand--vmon.cth-marga-reservation .md-template form :where(.h-row,.row){display:block!important;margin-bottom:18px!important}
  body.cth-brand--vmon.cth-marga-reservation .md-template form :where(.h-row,.row)>:where(.h-col,.h-column,[class*="h-col-"],[class*="col-"]){display:block!important;width:100%!important;max-width:100%!important;margin:0 0 14px!important}
}