/* Responsive + print rules shared by every GSI itinerary page.
   Lifted verbatim out of frontend/templates/golden-safari.php, where it was
   an inline <style id="gsi-responsive-global"> block. It has to be a real
   file so it can be enqueued: an Elementor-rendered page never runs the PHP
   template, so anything printed from there simply never reaches the page. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}*{box-sizing:border-box}img{max-width:100%;height:auto;display:block}@media(max-width:1200px){.hero,.sec,.itin{padding-left:48px!important;padding-right:48px!important}.sp-wrap{padding-left:48px!important;padding-right:48px!important}}@media(max-width:1024px){.hero,.sec,.itin{padding-left:36px!important;padding-right:36px!important}.sp-wrap{padding-left:36px!important;padding-right:36px!important}.inc-in,.itin-inner,.sp-in{max-width:100%}.dg-sidebar{grid-template-columns:1fr!important}.mw{position:relative!important;top:auto!important;height:360px!important}}@media(max-width:768px){.hero,.sec,.itin{padding:44px 22px!important}.inc{padding:52px 22px!important}.sp-wrap{padding:50px 22px!important}.hero-stats,.hs-grid,.hero-bottom{flex-wrap:wrap;gap:12px!important}.dg-sidebar{grid-template-columns:1fr!important}.mw,.mw-full,.mw-framed{height:300px!important}.sp-cards{grid-template-columns:1fr!important;gap:12px}.sp-inc-grid{grid-template-columns:1fr!important}h1{font-size:clamp(28px,8vw,54px)!important}h2{font-size:clamp(22px,5.5vw,36px)!important}}@media(max-width:480px){.hero,.sec,.itin{padding:32px 16px!important}.inc{padding:38px 16px!important}.sp-wrap{padding:36px 16px!important}h1,h2{word-break:break-word;hyphens:auto}.sp-tbl th:nth-child(4),.sp-tbl td:nth-child(4){display:none}.mw,.mw-full,.mw-framed{height:240px!important}.gsib-radio-cards{grid-template-columns:repeat(2,1fr)!important}}@media(max-width:360px){.hero,.sec,.itin{padding:24px 12px!important}.inc,.sp-wrap{padding:24px 12px!important}.sp-tbl th:nth-child(3),.sp-tbl td:nth-child(3){display:none}}@media(pointer:coarse){button,a[href],.sp-card,.bn,.bn-pdf,.bn-bb{min-height:44px}.sp-card{cursor:default}}body:not(.gsib-open){overflow-x:hidden}body.gsib-open{overflow:hidden!important}.hero-bg img,.hero-bg video{object-fit:cover;width:100%;height:100%}@media(max-width:600px){.sp-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.sp-tbl{min-width:480px}}@media(max-width:480px){.gsib-row-2{grid-template-columns:1fr!important}.gsib-tc-allergy-row{grid-template-columns:1fr!important}.gsib-chips{gap:6px}.gsib-chip{padding:6px 10px;font-size:11px}.gsib-step-label{display:none!important}.gsib-step-line{min-width:8px!important}.gsib-close{top:12px!important;right:12px!important;width:36px!important;height:36px!important}}@media print{.bar,.badge,#progressBar,#sectionLabel,.gsib-overlay,.bn-pdf,.bg,.bb{display:none!important}.hero{min-height:auto;page-break-after:always}.dy-hd,.dy-bd,.dy-details{max-height:none!important;display:block!important}*{animation:none!important;transition:none!important}a{color:inherit!important}}

/* ── blocks inside an Elementor page ─────────────────────────────────────────
   A block's output is wrapped twice before it reaches the page: Elementor's own
   .elementor-shortcode div, then .gsi-block. Neither is constrained by default,
   so a wide child — the rate table, which is meant to scroll inside .pt-wrap —
   pushed both to its own width instead. The table never scrolled, the whole
   page did: 686px of content in a 384px viewport.

   Constraining the two wrappers is the whole fix. .pt-wrap already carries
   overflow-x:auto in the page's own stylesheet; it simply never had a narrower
   parent to overflow against. */
.gsi-block,
.elementor-widget-shortcode .elementor-shortcode {
  max-width: 100%;
  min-width: 0;
}
.gsi-block .pt-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}