/*
Theme Name: Otto Safari Guide Child
Theme URI: https://ottosafariguide.com/
Description: Custom safari-business header and footer for Travel Monster.
Author: Otto Safari Guide
Template: travel-monster
Version: 1.0.0
Text Domain: otto-safari-child
*/

/* Parent styles are loaded from functions.php. */
:root{
  --otto-green:#0b4b35;
  --otto-green-dark:#063728;
  --otto-gold:#c8923b;
  --otto-sand:#f7f3ea;
  --otto-cream:#fffdf8;
  --otto-ink:#17211d;
  --otto-muted:#66736d;
  --otto-border:#e5e0d5;
  --otto-shadow:0 12px 35px rgba(12,37,28,.10);
}

.otto-site-header{position:relative;z-index:999;background:#fff;border-bottom:1px solid var(--otto-border);}
.otto-topbar{background:var(--otto-green-dark);color:#fff;font-size:13px;}
.otto-topbar__inner{max-width:1400px;margin:auto;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.otto-topbar__left,.otto-topbar__right{display:flex;align-items:center;gap:18px;}
.otto-topbar a{color:#fff;text-decoration:none;}
.otto-topbar a:hover{color:#f3d49d;}
.otto-trust{display:inline-flex;align-items:center;gap:7px;font-weight:600;}
.otto-trust-dot{width:7px;height:7px;background:#d6a24b;border-radius:50%;display:inline-block;}

.otto-mainbar{background:#fff;}
.otto-mainbar__inner{max-width:1400px;margin:auto;padding:14px 24px;min-height:82px;display:flex;align-items:center;gap:28px;}
.otto-brand{flex:0 0 auto;display:flex;align-items:center;min-width:190px;}
.otto-brand img{max-height:68px;width:auto;display:block;}
.otto-brand .site-title{margin:0;font-size:22px;line-height:1.15;}
.otto-brand .site-title a{color:var(--otto-green);text-decoration:none;font-weight:800;}
.otto-brand .site-description{font-size:11px;color:var(--otto-muted);margin-top:4px;}

.otto-nav{flex:1;display:flex;align-items:center;justify-content:center;min-width:0;}
.otto-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:3px;}
.otto-nav li{position:relative;margin:0;}
.otto-nav a{display:flex;align-items:center;gap:6px;padding:12px 11px;color:var(--otto-ink);text-decoration:none;font-size:14px;font-weight:650;white-space:nowrap;border-radius:7px;}
.otto-nav a:hover,.otto-nav .current-menu-item>a,.otto-nav .current-menu-ancestor>a{color:var(--otto-green);background:var(--otto-sand);}
.otto-nav .menu-item-has-children>a:after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);}
.otto-nav .sub-menu{position:absolute;left:0;top:calc(100% + 8px);min-width:235px;background:#fff;border:1px solid var(--otto-border);border-radius:12px;box-shadow:var(--otto-shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(5px);transition:.18s ease;display:block;z-index:1000;}
.otto-nav li:hover>.sub-menu,.otto-nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none;}
.otto-nav .sub-menu a{padding:10px 12px;white-space:normal;font-weight:550;}
.otto-nav .sub-menu .sub-menu{left:calc(100% + 8px);top:-8px;}

.otto-header-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto;}
.otto-header-search{width:40px;height:40px;border:1px solid var(--otto-border);border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--otto-green);cursor:pointer;}
.otto-header-search svg{width:18px;height:18px;}
.otto-quote-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--otto-gold);color:#fff!important;text-decoration:none!important;padding:13px 18px;border-radius:7px;font-size:14px;font-weight:800;box-shadow:0 5px 16px rgba(200,146,59,.24);white-space:nowrap;}
.otto-quote-btn:hover{background:#ad792d;color:#fff!important;transform:translateY(-1px);}

.otto-search-panel{display:none;background:#fff;border-top:1px solid var(--otto-border);box-shadow:0 8px 25px rgba(0,0,0,.08);}
.otto-search-panel.is-open{display:block;}
.otto-search-panel__inner{max-width:900px;margin:auto;padding:18px 24px;display:flex;gap:10px;}
.otto-search-panel input[type=search]{flex:1;border:1px solid #d9d4c9;border-radius:7px;padding:13px 15px;font-size:16px;}
.otto-search-panel button{border:0;border-radius:7px;background:var(--otto-green);color:#fff;padding:0 22px;font-weight:700;}

.otto-mobile-toggle{display:none;border:1px solid var(--otto-border);background:#fff;width:42px;height:42px;border-radius:7px;align-items:center;justify-content:center;cursor:pointer;}
.otto-mobile-toggle span,.otto-mobile-toggle:before,.otto-mobile-toggle:after{content:"";display:block;width:21px;height:2px;background:var(--otto-green);position:absolute;}
.otto-mobile-toggle{position:relative;}
.otto-mobile-toggle:before{transform:translateY(-7px);}
.otto-mobile-toggle:after{transform:translateY(7px);}
.otto-mobile-toggle.is-open span{opacity:0;}
.otto-mobile-toggle.is-open:before{transform:rotate(45deg);}
.otto-mobile-toggle.is-open:after{transform:rotate(-45deg);}

.otto-mobile-panel{display:none;}
.otto-mobile-panel__inner{padding:10px 18px 22px;border-top:1px solid var(--otto-border);}
.otto-mobile-panel ul{list-style:none;margin:0;padding:0;}
.otto-mobile-panel li{border-bottom:1px solid #eee;}
.otto-mobile-panel a{display:flex;padding:13px 4px;color:var(--otto-ink);text-decoration:none;font-weight:650;}
.otto-mobile-panel .sub-menu{padding-left:15px;}
.otto-mobile-panel .sub-menu a{font-size:14px;font-weight:500;}
.otto-mobile-panel.is-open{display:block;}
.otto-mobile-contact{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px;}
.otto-mobile-contact a{justify-content:center;border:1px solid var(--otto-border);border-radius:7px;padding:11px;}
.otto-mobile-contact .otto-quote-btn{border-color:var(--otto-gold);}

.otto-footer{background:var(--otto-green-dark);color:#dfe9e3;margin-top:0;}
.otto-footer a{color:#e8eee9;text-decoration:none;}
.otto-footer a:hover{color:#f0c778;}
.otto-footer__lead{background:var(--otto-green);border-bottom:1px solid rgba(255,255,255,.12);}
.otto-footer__lead-inner{max-width:1400px;margin:auto;padding:30px 24px;display:flex;align-items:center;justify-content:space-between;gap:25px;}
.otto-footer__lead h2{color:#fff;margin:0 0 5px;font-size:25px;}
.otto-footer__lead p{margin:0;color:#d7e5dc;}
.otto-footer__grid{max-width:1400px;margin:auto;padding:55px 24px 42px;display:grid;grid-template-columns:1.45fr 1fr 1fr 1.1fr;gap:42px;}
.otto-footer__brand img{max-width:210px;max-height:72px;width:auto;background:#fff;border-radius:6px;padding:5px;}
.otto-footer__brand p{line-height:1.7;margin:18px 0;color:#c4d3ca;}
.otto-footer__trust{display:flex;gap:8px;flex-wrap:wrap;}
.otto-footer__badge{border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:7px 11px;font-size:12px;}
.otto-footer h3{color:#fff;font-size:15px;margin:0 0 16px;text-transform:uppercase;letter-spacing:.08em;}
.otto-footer ul{list-style:none;margin:0;padding:0;}
.otto-footer li{margin:0 0 10px;}
.otto-footer li a{color:#cbd9d0;font-size:14px;}
.otto-footer__contact-item{display:flex;gap:10px;align-items:flex-start;margin:0 0 13px;color:#cbd9d0;font-size:14px;line-height:1.5;}
.otto-footer__contact-icon{width:20px;color:#e0b05a;flex:0 0 20px;text-align:center;}
.otto-footer__bottom{border-top:1px solid rgba(255,255,255,.12);}
.otto-footer__bottom-inner{max-width:1400px;margin:auto;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;color:#9fb3a7;}
.otto-footer__bottom nav ul{display:flex;gap:17px;list-style:none;margin:0;padding:0;}
.otto-footer__bottom nav a{color:#b7c7be;}
.otto-footer__social{display:flex;gap:8px;margin-top:17px;}
.otto-footer__social a{width:35px;height:35px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:grid;place-items:center;font-size:13px;}
.otto-footer__widget-area{margin-top:20px;}
.otto-footer__widget-area .widget{margin:0 0 20px;}
.otto-footer__widget-area .widget-title{color:#fff;}

@media(max-width:1100px){
  .otto-nav a{padding-left:8px;padding-right:8px;font-size:13px;}
  .otto-brand{min-width:150px;}
  .otto-quote-btn{padding:11px 13px;}
}
@media(max-width:900px){
  .otto-topbar__inner{justify-content:center;}
  .otto-topbar__right{display:none;}
  .otto-mainbar__inner{padding:11px 18px;min-height:72px;}
  .otto-nav,.otto-header-search{display:none;}
  .otto-header-actions{margin-left:auto;}
  .otto-mobile-toggle{display:flex;}
  .otto-brand img{max-height:58px;}
  .otto-footer__grid{grid-template-columns:1fr 1fr;}
  .otto-footer__lead-inner{align-items:flex-start;flex-direction:column;}
}
@media(max-width:600px){
  .otto-topbar__inner{padding:7px 15px;font-size:11px;}
  .otto-mainbar__inner{gap:10px;}
  .otto-brand{min-width:0;max-width:190px;}
  .otto-brand img{max-width:170px;max-height:52px;}
  .otto-header-actions .otto-quote-btn{display:none;}
  .otto-mobile-contact{grid-template-columns:1fr;}
  .otto-footer__grid{grid-template-columns:1fr;gap:30px;padding:40px 20px 30px;}
  .otto-footer__lead-inner{padding:25px 20px;}
  .otto-footer__lead h2{font-size:21px;}
  .otto-footer__bottom-inner{padding:16px 20px;align-items:flex-start;flex-direction:column;}
}
body.otto-menu-open{overflow:hidden;}

/* =========================================================
   OTTO LAYOUT / WP TRAVEL ENGINE ARCHIVE FIX
   Keep Travel Monster's structural wrappers intact. Only the
   custom archive marker below gets a full-width content treatment.
   ========================================================= */

/* Never create a horizontal page offset. */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* The custom shell is always full viewport width. */
.otto-site-header,
.otto-footer,
.otto-footer__lead,
.otto-footer__bottom {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* Keep our own shell centered. */
.otto-topbar__inner,
.otto-mainbar__inner,
.otto-footer__lead-inner,
.otto-footer__grid,
.otto-footer__bottom-inner {
  width: min(1440px, calc(100% - 48px));
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/*
 * WP Travel Engine / tour archive pages:
 * - remove the blog-style sidebar column
 * - use the full Travel Monster content area
 * - retain the theme's own .site-content and .container wrappers
 * - avoid forcing arbitrary widths on unrelated pages
 */
body.otto-wte-archive-layout .main-content-wrapper {
  display: block;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

body.otto-wte-archive-layout #primary {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  float: none;
}

body.otto-wte-archive-layout #secondary {
  display: none !important;
}

body.otto-wte-archive-layout .site-content > .container,
body.otto-wte-archive-layout .site-content > .container-full {
  width: 100%;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* WP Travel Engine listing itself should use the available primary width. */
body.otto-wte-archive-layout .wte-tours,
body.otto-wte-archive-layout .wte-tour-listing,
body.otto-wte-archive-layout .wte-tour-list,
body.otto-wte-archive-layout .wptravelengine-tours,
body.otto-wte-archive-layout .wptravelengine-tour-list,
body.otto-wte-archive-layout .wp-travel-engine-tours,
body.otto-wte-archive-layout .wte-archive,
body.otto-wte-archive-layout .tours-listing,
body.otto-wte-archive-layout .tour-listing {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* Do not inherit left/right padding intended for sidebar pages. */
body.otto-wte-archive-layout #primary,
body.otto-wte-archive-layout #primary > * {
  box-sizing: border-box;
}

/* Keep common listing rows centered rather than drifting left. */
body.otto-wte-archive-layout .wte-tours .container,
body.otto-wte-archive-layout .wte-tour-listing .container,
body.otto-wte-archive-layout .wptravelengine-tours .container,
body.otto-wte-archive-layout .wptravelengine-tour-list .container,
body.otto-wte-archive-layout .tours-listing .container,
body.otto-wte-archive-layout .tour-listing .container {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* The sidebar's Recent Articles widget must never occupy the archive column. */
body.otto-wte-archive-layout #secondary .widget,
body.otto-wte-archive-layout .sidebar-wrap-main {
  display: none !important;
}

/* Prevent accidental theme row overflow. */
body.otto-wte-archive-layout .row {
  box-sizing: border-box;
  max-width: 100%;
}

@media (max-width: 1490px) {
  .otto-topbar__inner,
  .otto-mainbar__inner,
  .otto-footer__lead-inner,
  .otto-footer__grid,
  .otto-footer__bottom-inner {
    width: calc(100% - 36px);
  }
}

@media (max-width: 767px) {
  body.otto-wte-archive-layout .main-content-wrapper,
  body.otto-wte-archive-layout #primary {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .otto-topbar__inner,
  .otto-mainbar__inner,
  .otto-footer__lead-inner,
  .otto-footer__grid,
  .otto-footer__bottom-inner {
    width: calc(100% - 30px);
  }
}

/* =========================================================
   OTTO PAGE LAYOUT FIX
   Travel Monster assigns some WordPress pages a sidebar layout
   (rightsidebar/leftsidebar) through body classes. The custom
   safari site uses full-width page content instead, which keeps
   ordinary pages aligned consistently with the pages already
   using full-width layouts.
   ========================================================= */
@media (min-width: 768px) {
  body.page:not(.otto-wte-archive-layout) .main-content-wrapper {
    display: block;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  body.page:not(.otto-wte-archive-layout) #primary {
    width: 100% !important;
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none;
    margin-left: auto;
    margin-right: auto;
  }

  body.page:not(.otto-wte-archive-layout) #secondary {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.page:not(.otto-wte-archive-layout) .site-content > .container {
    width: 100%;
    max-width: var(--tmp-container-width, 1400px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }

  body.page:not(.otto-wte-archive-layout) .entry-content {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Elementor/full-width sections should not inherit a sidebar offset. */
body.page:not(.otto-wte-archive-layout) .elementor-section.elementor-section-boxed > .elementor-container {
  margin-left: auto;
  margin-right: auto;
}

body.page:not(.otto-wte-archive-layout) .elementor-section.elementor-section-full_width {
  width: 100%;
  left: auto;
  right: auto;
}

/* Keep all theme-level rows from acquiring a one-sided offset. */
body.page:not(.otto-wte-archive-layout) .main-content-wrapper > .row,
body.page:not(.otto-wte-archive-layout) #primary > .row {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

@media (max-width: 767px) {
  body.page:not(.otto-wte-archive-layout) .site-content > .container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  body.page:not(.otto-wte-archive-layout) #primary {
    width: 100% !important;
  }
}


/* =========================================================
   OTTO FULL-BLEED HERO
   Automatically applies to the first top-level Elementor
   section that actually has a background image. This keeps
   ordinary content sections unchanged while allowing the
   hero image to run from the left edge to the right edge.
   ========================================================= */
.otto-auto-hero{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  left:auto !important;
  right:auto !important;
  box-sizing:border-box !important;
  overflow:hidden;
}

.otto-auto-hero > .elementor-container{
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.otto-auto-hero .elementor-widget-container,
.otto-auto-hero .elementor-background-overlay{
  box-sizing:border-box;
}

/* Give a photographic hero enough vertical presence without
   forcing a fixed height on mobile. */
@media (min-width:768px){
  .otto-auto-hero{
    min-height:clamp(480px, 62vh, 720px);
    display:flex;
    align-items:stretch;
  }
}

@media (max-width:767px){
  /* Mobile hero: full bleed without the desktop fixed-height behavior. */
  .otto-auto-hero{
    width:100vw !important;
    max-width:100vw !important;
    min-height:0 !important;
    height:auto !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:hidden !important;
    display:block !important;
  }

  .otto-auto-hero > .elementor-container,
  .otto-auto-hero > .e-con-inner,
  .otto-auto-hero .elementor-container{
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:15px !important;
    padding-right:15px !important;
    box-sizing:border-box !important;
  }

  .otto-auto-hero .elementor-column,
  .otto-auto-hero .elementor-widget-wrap{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* Keep the actual photographic background edge-to-edge. */
  .otto-auto-hero,
  .otto-auto-hero .elementor-background-overlay{
    background-position:center center !important;
    background-size:cover !important;
  }

  .otto-auto-hero .elementor-widget-container{
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* Prevent long headings/buttons from creating horizontal scrolling. */
  .otto-auto-hero h1,
  .otto-auto-hero h2,
  .otto-auto-hero h3,
  .otto-auto-hero p,
  .otto-auto-hero .elementor-button{
    max-width:100%;
    box-sizing:border-box;
    overflow-wrap:anywhere;
  }

  /* Comfortable mobile hero content without forcing a huge blank area. */
  .otto-auto-hero .elementor-widget-wrap{
    padding-top:28px;
    padding-bottom:28px;
  }
}

@media (max-width:480px){
  .otto-auto-hero > .elementor-container,
  .otto-auto-hero > .e-con-inner,
  .otto-auto-hero .elementor-container{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .otto-auto-hero .elementor-widget-wrap{
    padding-top:22px;
    padding-bottom:22px;
  }
}


/* =========================================================
   OTTO MOBILE BALANCED CONTENT LAYOUT
   Keep all page content centered without forcing desktop grid
   offsets or viewport-width containers onto normal content.
   ========================================================= */
@media (max-width: 767px) {
  html, body { width:100% !important; max-width:100% !important; min-width:0 !important; overflow-x:hidden !important; }

  #page, .site, .site-content, .main-content-wrapper, .content-area,
  #primary, .entry-content {
    box-sizing:border-box !important;
    min-width:0 !important;
  }

  .site-content > .container,
  .site-content > .container-full,
  .main-content-wrapper > .container,
  .main-content-wrapper > .container-full {
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:15px !important;
    padding-right:15px !important;
    box-sizing:border-box !important;
  }

  #primary, .content-area,
  body.page:not(.otto-wte-archive-layout) #primary,
  body.otto-wte-archive-layout #primary {
    width:100% !important;
    max-width:100% !important;
    float:none !important;
    position:static !important;
    left:auto !important;
    right:auto !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  body.page #secondary,
  body.otto-wte-archive-layout #secondary { display:none !important; }

  .site-content .row,
  .main-content-wrapper .row,
  #primary .row {
    width:auto !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
  }

  .elementor,
  .elementor-page .elementor-section,
  .elementor-page .e-con,
  .elementor-page .e-con.e-parent {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .elementor-page .elementor-section > .elementor-container,
  .elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }

  .elementor-page .elementor-column,
  .elementor-page .elementor-widget-wrap,
  .elementor-page .elementor-widget,
  .elementor-page .e-con-inner {
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .elementor-page img,
  .elementor-page video,
  .elementor-page iframe { max-width:100% !important; box-sizing:border-box !important; }

  .otto-topbar__inner,
  .otto-mainbar__inner,
  .otto-footer__lead-inner,
  .otto-footer__grid,
  .otto-footer__bottom-inner {
    width:calc(100% - 30px) !important;
    max-width:1200px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }

  .otto-auto-hero {
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    box-sizing:border-box !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    overflow:hidden !important;
  }

  .otto-auto-hero > .elementor-container,
  .otto-auto-hero .elementor-container,
  .otto-auto-hero > .e-con-inner {
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:15px !important;
    padding-right:15px !important;
    box-sizing:border-box !important;
  }

  .otto-auto-hero {
    min-height:340px !important;
    height:auto !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
  }
}

@media (max-width:390px) {
  .site-content > .container,
  .site-content > .container-full,
  .main-content-wrapper > .container,
  .main-content-wrapper > .container-full {
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .otto-topbar__inner,
  .otto-mainbar__inner,
  .otto-footer__lead-inner,
  .otto-footer__grid,
  .otto-footer__bottom-inner {
    width:calc(100% - 24px) !important;
  }
}


/* =========================================================
   MOBILE FINAL CENTERING OVERRIDE — V7
   Correct only horizontal positioning of the content.
   Do not alter desktop layout or the custom header/footer.
   ========================================================= */
@media (max-width: 767px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* Re-establish a single centered page content rail. */
  body .site-content,
  body .main-content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  body .site-content > .container,
  body .site-content > .container-full,
  body .main-content-wrapper > .container,
  body .main-content-wrapper > .container-full {
    width: calc(100% - 30px) !important;
    max-width: none !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Remove legacy Bootstrap/Travel Monster horizontal offsets. */
  body .site-content .row,
  body .main-content-wrapper .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  body #primary,
  body .content-area,
  body .main-content-wrapper #primary {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box !important;
  }

  /* The actual WordPress content rail. */
  body #primary > article,
  body #primary > .page,
  body #primary > .post,
  body #primary > .entry-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body .entry-content {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }

  /* Elementor: center the outer containers but never shift their columns. */
  body .elementor-page .elementor,
  body .elementor-page .elementor-section-wrap,
  body .elementor-page .elementor-section,
  body .elementor-page .e-con.e-parent {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body .elementor-page .elementor-section > .elementor-container,
  body .elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  body .elementor-page .e-con.e-parent > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Never center text by accident — center the boxes, not typography. */
  body .elementor-page .elementor-widget,
  body .elementor-page .elementor-widget-container {
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Full-bleed hero remains the one intentional exception. */
  body .otto-auto-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  /* Keep custom header/footer rails perfectly centered. */
  body .otto-topbar__inner,
  body .otto-mainbar__inner,
  body .otto-footer__lead-inner,
  body .otto-footer__grid,
  body .otto-footer__bottom-inner {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 390px) {
  body .site-content > .container,
  body .site-content > .container-full,
  body .main-content-wrapper > .container,
  body .main-content-wrapper > .container-full {
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  body .elementor-page .elementor-section > .elementor-container,
  body .elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* =========================================================
   OTTO SAFARI GUIDE — HEADER V10
   Original responsive header; footer and page content untouched.
   ========================================================= */
.otto-v10-header{position:relative;z-index:10000;background:#fff;color:#17211d;font-family:inherit;border-bottom:1px solid #e8e2d7}
.otto-v10-shell{width:min(1440px,calc(100% - 48px));margin-inline:auto}
.otto-v10-trust{background:#063728;color:#fff;font-size:12px}
.otto-v10-trust__inner{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.otto-v10-trust__left,.otto-v10-trust__right{display:flex;align-items:center;gap:12px;min-width:0}
.otto-v10-trust a{color:#fff;text-decoration:none}.otto-v10-trust a:hover{color:#e9c978}
.otto-v10-trust__star{color:#e0b85d;font-size:14px}.otto-v10-trust__sep{opacity:.45}
.otto-v10-trust__right>a{font-weight:700}
.otto-v10-language{display:flex;align-items:center;gap:6px}
.otto-v10-language__label{opacity:.72}
.otto-v10-language select,.otto-v10-language .pll-parent-menu-item select{background:transparent;border:0;color:#fff;font:inherit}
.otto-v10-language select option{color:#17211d;background:#fff}

.otto-v10-main{background:#fff}
.otto-v10-main__inner{min-height:82px;display:flex;align-items:center;gap:20px}
.otto-v10-brand{display:flex;align-items:center;flex:0 0 auto;max-width:210px;text-decoration:none;color:inherit}
.otto-v10-brand .custom-logo-link{display:flex;align-items:center}
.otto-v10-brand .custom-logo{display:block;width:auto;height:auto;max-width:132px;max-height:58px;object-fit:contain}
.otto-v10-brand-copy{display:none}
.otto-v10-brand__name{font-size:20px;font-weight:800;color:#084d2a;line-height:1.1}
.otto-v10-brand__tag{display:block;margin-top:4px;color:#66736d;font-size:10px;letter-spacing:.04em;text-transform:uppercase}

.otto-v10-desktop-nav{flex:1;min-width:0;display:flex;justify-content:center}
.otto-v10-menu,.otto-v10-menu ul{list-style:none;margin:0;padding:0}
.otto-v10-menu{display:flex;align-items:center;justify-content:center;gap:2px}
.otto-v10-menu>li{position:relative}
.otto-v10-menu a{display:flex;align-items:center;gap:7px;padding:11px 10px;border-radius:8px;color:#17211d;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}
.otto-v10-menu>li:hover>a,.otto-v10-menu>li:focus-within>a,.otto-v10-menu .current-menu-item>a,.otto-v10-menu .current-menu-ancestor>a{color:#084d2a;background:#f7f3ea}
.otto-v10-menu .menu-item-has-children>a:after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.otto-v10-menu .sub-menu{position:absolute;left:0;top:calc(100% + 5px);width:260px;background:#fff;border:1px solid #e4ded2;border-radius:12px;box-shadow:0 18px 45px rgba(12,37,28,.14);padding:7px;opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .16s ease,transform .16s ease,visibility .16s ease;z-index:10001}
.otto-v10-menu li:hover>.sub-menu,.otto-v10-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.otto-v10-menu .sub-menu li{position:relative}
.otto-v10-menu .sub-menu a{width:100%;box-sizing:border-box;padding:10px 11px;white-space:normal;font-size:13px;font-weight:600}
.otto-v10-menu .sub-menu a:hover{background:#f7f3ea;color:#084d2a}
.otto-v10-menu .sub-menu .sub-menu{left:calc(100% + 6px);top:-7px}

.otto-v10-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.otto-v10-search-btn,.otto-v10-menu-btn{border:0;background:transparent;padding:0}
.otto-v10-search-btn{width:38px;height:38px;border:1px solid #e4ded2;border-radius:50%;display:grid;place-items:center;color:#084d2a;cursor:pointer}
.otto-v10-search-btn svg{width:17px;height:17px}
.otto-v10-whatsapp{height:40px;padding:0 13px;display:inline-flex;align-items:center;gap:7px;border:1px solid #d8e2dc;border-radius:20px;color:#084d2a;text-decoration:none;font-size:12px;font-weight:800}
.otto-v10-whatsapp svg{width:17px;height:17px;fill:currentColor}
.otto-v10-quote{height:42px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;background:#e67d3c;color:#fff!important;border-radius:7px;text-decoration:none!important;font-size:13px;font-weight:800;white-space:nowrap;box-shadow:0 5px 16px rgba(230,125,60,.2)}
.otto-v10-quote:hover{background:#cf672e}
.otto-v10-menu-btn{display:none;width:42px;height:42px;border:1px solid #e4ded2;border-radius:9px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.otto-v10-menu-btn span{display:block;width:20px;height:2px;background:#084d2a;border-radius:2px;transition:.2s}

.otto-v10-popular{background:#f7f3ea;border-top:1px solid #eee8dc;border-bottom:1px solid #e7e0d3}
.otto-v10-popular__inner{min-height:38px;display:flex;align-items:center;gap:18px;overflow:hidden}
.otto-v10-popular a,.otto-v10-popular__label{font-size:11px;white-space:nowrap}
.otto-v10-popular a{color:#4d5b54;text-decoration:none;font-weight:650}.otto-v10-popular a:hover{color:#084d2a}
.otto-v10-popular__label{font-weight:800;color:#084d2a}

.otto-v10-search{display:none;background:#fff;border-bottom:1px solid #e4ded2;box-shadow:0 12px 25px rgba(0,0,0,.07)}
.otto-v10-search.is-open{display:block}
.otto-v10-search>.otto-v10-shell{padding:14px 0}
.otto-v10-search form{display:flex;gap:8px}
.otto-v10-search input[type="search"]{flex:1;min-width:0;border:1px solid #ddd6ca;border-radius:8px;padding:12px 14px}
.otto-v10-search input[type="submit"],.otto-v10-search button[type="submit"]{background:#084d2a;color:#fff;border:0;border-radius:8px;padding:0 18px;font-weight:700}

.otto-v10-mobile{display:none}

/* Wide screens: keep navigation comfortable without shrinking the brand. */
@media (max-width:1250px){
 .otto-v10-brand{max-width:155px}.otto-v10-brand .custom-logo{max-width:115px;max-height:52px}
 .otto-v10-menu a{padding-inline:7px;font-size:12px}
 .otto-v10-whatsapp{display:none}
 .otto-v10-quote{padding-inline:12px}
}

/* Mobile header: one clear bar, no desktop trust/popular clutter. */
@media (max-width:767px){
 .otto-v10-shell{width:calc(100% - 28px);max-width:none}
 .otto-v10-trust{display:none}
 .otto-v10-main__inner{min-height:64px;gap:10px}
 .otto-v10-brand{max-width:150px;min-width:0}
 .otto-v10-brand .custom-logo{max-width:104px;max-height:46px}
 .otto-v10-brand-copy{display:block;margin-left:-2px;color:#084d2a;font-size:9px;line-height:1.1;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
 .otto-v10-brand-copy small{display:block;color:#66736d;font-size:8px;letter-spacing:.08em;margin-top:2px}
 .otto-v10-desktop-nav,.otto-v10-popular{display:none}
 .otto-v10-actions{margin-left:auto;gap:7px}
 .otto-v10-search-btn{display:none}
 .otto-v10-whatsapp{display:inline-flex;width:39px;height:39px;padding:0;justify-content:center;border-radius:50%;font-size:0}
 .otto-v10-whatsapp svg{width:18px;height:18px}
 .otto-v10-quote{height:39px;padding:0 11px;font-size:11px;border-radius:7px}
 .otto-v10-menu-btn{display:flex}
 .otto-v10-menu-btn.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .otto-v10-menu-btn.is-open span:nth-child(2){opacity:0}
 .otto-v10-menu-btn.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 .otto-v10-search{display:none!important}

 .otto-v10-mobile{position:fixed;z-index:10010;inset:64px 0 0;background:#063728;color:#fff;display:block;overflow-y:auto;padding:0 14px 24px;transform:translateX(100%);transition:transform .25s ease;visibility:hidden}
 .otto-v10-mobile.is-open{transform:translateX(0);visibility:visible}
 .otto-v10-mobile__head{height:52px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
 .otto-v10-mobile__close{width:36px;height:36px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;border-radius:8px;font-size:25px;line-height:1;cursor:pointer}
 .otto-v10-mobile__cta{display:flex;align-items:center;justify-content:space-between;background:#e67d3c;color:#fff;text-decoration:none;border-radius:9px;padding:14px 15px;margin-bottom:9px;font-size:14px;font-weight:800}
 .otto-v10-mobile-menu,.otto-v10-mobile-menu ul{list-style:none;margin:0;padding:0}
 .otto-v10-mobile-menu>li{border-bottom:1px solid rgba(255,255,255,.11);position:relative}
 .otto-v10-mobile-menu a{display:block;color:#fff;text-decoration:none;padding:14px 42px 14px 4px;font-size:15px;font-weight:700}
 .otto-v10-mobile-menu .sub-menu{display:none;padding:0 0 5px 12px}
 .otto-v10-mobile-menu li.is-expanded>.sub-menu{display:block}
 .otto-v10-mobile-menu .sub-menu a{padding:10px 38px 10px 8px;font-size:13px;font-weight:550;color:#dce8e1}
 .otto-v10-mobile-menu .menu-item-has-children>.otto-sub-toggle{position:absolute;right:0;top:7px;width:38px;height:38px;border:0;background:transparent;color:#fff;cursor:pointer}
 .otto-v10-mobile-menu .menu-item-has-children>.otto-sub-toggle:after{content:"";display:block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:auto}
 .otto-v10-mobile-menu li.is-expanded>.otto-sub-toggle:after{transform:rotate(225deg);margin-top:5px}
 .otto-v10-mobile__quick{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:14px}
 .otto-v10-mobile__quick a{display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px 8px;color:#fff;text-decoration:none}
 .otto-v10-mobile__quick strong{font-size:12px}.otto-v10-mobile__quick span{font-size:9px;color:#bfd0c6}
 .otto-v10-mobile-language{margin-top:12px;padding:12px;border-top:1px solid rgba(255,255,255,.1);font-size:12px}
 .otto-v10-mobile-language .pll-switcher-select{margin-top:7px}
 body.otto-v10-menu-open{overflow:hidden}
}

/* Small phones: keep all header controls inside the viewport. */
@media (max-width:390px){
 .otto-v10-shell{width:calc(100% - 20px)}
 .otto-v10-brand{max-width:120px}.otto-v10-brand .custom-logo{max-width:86px;max-height:40px}
 .otto-v10-brand-copy{font-size:8px}.otto-v10-brand-copy small{font-size:7px}
 .otto-v10-quote{font-size:10px;padding-inline:8px}.otto-v10-actions{gap:5px}
 
}

/* =========================================================
   HERO — retain V8 full-bleed behavior and center the image.
   Applies only to the automatically detected hero.
   ========================================================= */
@media (max-width:767px){
 /* V10 MOBILE HERO: full-bleed viewport, centered crop, no horizontal offset. */
 html body .otto-auto-hero{
   width:100vw!important;
   max-width:100vw!important;
   margin-left:50%!important;
   margin-right:0!important;
   transform:translateX(-50%)!important;
   position:relative!important;
   left:auto!important;
   right:auto!important;
   overflow:hidden!important;
   box-sizing:border-box!important;
   background-position:center center!important;
   background-size:cover!important;
   background-repeat:no-repeat!important;
 }
 html body .otto-auto-hero .elementor-background-overlay,
 html body .otto-auto-hero .elementor-motion-effects-layer{
   background-position:center center!important;
   background-size:cover!important;
 }
 html body .otto-auto-hero .elementor-widget-image,
 html body .otto-auto-hero .elementor-widget-image .elementor-widget-container{
   width:100%!important;
   max-width:100%!important;
   margin:0!important;
   padding:0!important;
   box-sizing:border-box!important;
   text-align:center!important;
 }
 html body .otto-auto-hero .elementor-widget-image img{
   display:block!important;
   width:100%!important;
   max-width:100%!important;
   height:auto!important;
   margin:0!important;
   object-fit:cover!important;
   object-position:center center!important;
 }
}


/* =========================================================
   OTTO SAFARI GUIDE — MOBILE TOUR ARCHIVE
   Full-width, readable tour cards on phones.
   Desktop/tablet layout is intentionally untouched.
   Scope: WP Travel Engine tour archive pages only.
   ========================================================= */
@media (max-width: 767px) {
  body.otto-wte-archive-layout {
    --otto-archive-gutter: 10px;
  }

  /* Give the WP Travel Engine archive the full mobile canvas. */
  body.otto-wte-archive-layout .site-content,
  body.otto-wte-archive-layout .main-content-wrapper,
  body.otto-wte-archive-layout .site-content > .container,
  body.otto-wte-archive-layout .site-content > .container-full,
  body.otto-wte-archive-layout .main-content-wrapper > .container,
  body.otto-wte-archive-layout .main-content-wrapper > .container-full,
  body.otto-wte-archive-layout #primary,
  body.otto-wte-archive-layout .content-area,
  body.otto-wte-archive-layout #main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  /* A small, balanced edge gutter keeps cards from touching the glass. */
  body.otto-wte-archive-layout #primary > *,
  body.otto-wte-archive-layout .entry-content > * {
    box-sizing: border-box !important;
  }

  /* WP Travel Engine archive outer/list wrappers — support the common
     WPTE layouts without changing the plugin markup. */
  body.otto-wte-archive-layout
  .wpte-trip-archive,
  body.otto-wte-archive-layout
  .wpte-trip-archive-wrapper,
  body.otto-wte-archive-layout
  .wpte-trip-listing,
  body.otto-wte-archive-layout
  .wpte-trip-list,
  body.otto-wte-archive-layout
  .wpte-trip-grid,
  body.otto-wte-archive-layout
  .wpte-trip-archive__content,
  body.otto-wte-archive-layout
  .wpte-trip-archive .container,
  body.otto-wte-archive-layout
  .wpte-trip-archive .container-fluid {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--otto-archive-gutter) !important;
    padding-right: var(--otto-archive-gutter) !important;
    box-sizing: border-box !important;
  }

  /* Remove Bootstrap/Travel Monster negative row margins inside the archive. */
  body.otto-wte-archive-layout
  .wpte-trip-archive .row,
  body.otto-wte-archive-layout
  .wpte-trip-listing .row,
  body.otto-wte-archive-layout
  .wpte-trip-list .row,
  body.otto-wte-archive-layout
  .wpte-trip-grid .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* One large card per row on phones. This gives the title, excerpt and
     metadata enough horizontal room to remain readable. */
  body.otto-wte-archive-layout
  .wpte-trip-grid,
  body.otto-wte-archive-layout
  .wpte-trip-listing .wpte-trip-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  body.otto-wte-archive-layout
  .wpte-trip-grid > *,
  body.otto-wte-archive-layout
  .wpte-trip-listing .wpte-trip-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Common WPTE card wrappers. */
  body.otto-wte-archive-layout
  .wpte-trip-card,
  body.otto-wte-archive-layout
  .wpte-trip-item,
  body.otto-wte-archive-layout
  .wpte-trip,
  body.otto-wte-archive-layout
  article.wpte-trip-card,
  body.otto-wte-archive-layout
  .wpte-trip-list .item,
  body.otto-wte-archive-layout
  .wpte-trip-list > li {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Make the visual card larger without making the text cramped. */
  body.otto-wte-archive-layout
  .wpte-trip-card,
  body.otto-wte-archive-layout
  .wpte-trip-item,
  body.otto-wte-archive-layout
  .wpte-trip {
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  body.otto-wte-archive-layout
  .wpte-trip-card img,
  body.otto-wte-archive-layout
  .wpte-trip-item img,
  body.otto-wte-archive-layout
  .wpte-trip img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
  }

  /* Readable mobile typography. */
  body.otto-wte-archive-layout
  .wpte-trip-card h2,
  body.otto-wte-archive-layout
  .wpte-trip-card h3,
  body.otto-wte-archive-layout
  .wpte-trip-item h2,
  body.otto-wte-archive-layout
  .wpte-trip-item h3,
  body.otto-wte-archive-layout
  .wpte-trip h2,
  body.otto-wte-archive-layout
  .wpte-trip h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body.otto-wte-archive-layout
  .wpte-trip-card p,
  body.otto-wte-archive-layout
  .wpte-trip-item p,
  body.otto-wte-archive-layout
  .wpte-trip p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
  }

  /* WPTE's card metadata/tags should wrap instead of shrinking the card. */
  body.otto-wte-archive-layout
  .wpte-trip-card ul,
  body.otto-wte-archive-layout
  .wpte-trip-card .trip-meta,
  body.otto-wte-archive-layout
  .wpte-trip-card .trip-features,
  body.otto-wte-archive-layout
  .wpte-trip-item ul,
  body.otto-wte-archive-layout
  .wpte-trip-item .trip-meta,
  body.otto-wte-archive-layout
  .wpte-trip-item .trip-features {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /* Keep the archive controls full width and easy to use. */
  body.otto-wte-archive-layout
  .wpte-bf-search,
  body.otto-wte-archive-layout
  .wpte-trip-search,
  body.otto-wte-archive-layout
  .wpte-search,
  body.otto-wte-archive-layout
  .wpte-trip-archive-search,
  body.otto-wte-archive-layout
  .wpte-filter,
  body.otto-wte-archive-layout
  .wpte-filters {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.otto-wte-archive-layout
  .wpte-bf-search input,
  body.otto-wte-archive-layout
  .wpte-bf-search select,
  body.otto-wte-archive-layout
  .wpte-trip-search input,
  body.otto-wte-archive-layout
  .wpte-trip-search select {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width:390px) {
  body.otto-wte-archive-layout {
    --otto-archive-gutter: 8px;
  }

  body.otto-wte-archive-layout
  .wpte-trip-card h2,
  body.otto-wte-archive-layout
  .wpte-trip-card h3,
  body.otto-wte-archive-layout
  .wpte-trip-item h2,
  body.otto-wte-archive-layout
  .wpte-trip-item h3,
  body.otto-wte-archive-layout
  .wpte-trip h2,
  body.otto-wte-archive-layout
  .wpte-trip h3 {
    font-size: 17px !important;
  }

  body.otto-wte-archive-layout
  .wpte-trip-card p,
  body.otto-wte-archive-layout
  .wpte-trip-item p,
  body.otto-wte-archive-layout
  .wpte-trip p {
    font-size: 13.5px !important;
    line-height: 1.52 !important;
  }
}


/* =========================================================
   MOBILE ARCHIVE — FINAL FULL-WIDTH LAYOUT
   Targets the actual Safari Tour Manager archive markup:
   .tour-listing-page > .container-fluid
   .main-content > .safari-listings > .row
   .col-md-6 > .safari-card
   ========================================================= */
@media (max-width: 767px) {

  /* The archive itself breaks out of Travel Monster's narrow
     page container and is centered against the viewport. */
  html body.otto-wte-archive-layout .tour-listing-page {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body.otto-wte-archive-layout .tour-listing-page > .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  html body.otto-wte-archive-layout .tour-listing-page .main-content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  /* Cancel Bootstrap's column gutters/negative row offsets. */
  html body.otto-wte-archive-layout .tour-listing-page .safari-listings {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body.otto-wte-archive-layout .tour-listing-page .safari-listings > .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
  }

  /* One genuinely wide card per row on phones. */
  html body.otto-wte-archive-layout .tour-listing-page .safari-listings > .row > .col-md-6,
  html body.otto-wte-archive-layout .tour-listing-page .safari-listings > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 0 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body.otto-wte-archive-layout .safari-card-link,
  html body.otto-wte-archive-layout .safari-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body.otto-wte-archive-layout .safari-card {
    overflow: hidden !important;
  }

  html body.otto-wte-archive-layout .safari-image {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html body.otto-wte-archive-layout .safari-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  html body.otto-wte-archive-layout .safari-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html body.otto-wte-archive-layout .safari-title-overlay {
    max-width: calc(100% - 24px) !important;
    overflow-wrap: anywhere !important;
  }

  html body.otto-wte-archive-layout .safari-details,
  html body.otto-wte-archive-layout .safari-itinerary,
  html body.otto-wte-archive-layout .safari-quick-adventure {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  /* Archive heading/results area gets the same full-width treatment. */
  html body.otto-wte-archive-layout .tour-listing-page .content-header,
  html body.otto-wte-archive-layout .tour-listing-page .destination-header,
  html body.otto-wte-archive-layout .tour-listing-page .results-count,
  html body.otto-wte-archive-layout .tour-listing-page .selected-filters-section,
  html body.otto-wte-archive-layout .tour-listing-page .mobile-filter-buttons {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body.otto-wte-archive-layout .tour-listing-page .destination-header .page-title {
    font-size: 25px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }

  /* ---------------------------------------------------------
     ARCHIVE BANNER — full width + heading always visible
     --------------------------------------------------------- */
  html body.otto-wte-archive-layout .page-header-top {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    min-height: 175px !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  html body.otto-wte-archive-layout .page-header-top[data-bg-image="yes"]::before {
    z-index: 0 !important;
    background: rgba(0,0,0,.48) !important;
  }

  html body.otto-wte-archive-layout .page-header-top .page-header-wrap {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 175px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 28px 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-align: center !important;
  }

  html body.otto-wte-archive-layout .page-header-top .page-header-wrap .page-title,
  html body.otto-wte-archive-layout .page-header-top .page-header-wrap .archive-title-wrapper,
  html body.otto-wte-archive-layout .page-header-top .page-header-wrap .sub-title,
  html body.otto-wte-archive-layout .page-header-top .page-header-wrap .archive-description,
  html body.otto-wte-archive-layout .page-header-top .travel-monster-search-count,
  html body.otto-wte-archive-layout .page-header-top .travel-monster-breadcrumb-main-wrap {
    position: relative !important;
    z-index: 3 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body.otto-wte-archive-layout .page-header-top .page-header-wrap .page-title {
    color: #fff !important;
    font-size: clamp(25px, 7vw, 38px) !important;
    line-height: 1.18 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  html body.otto-wte-archive-layout .page-header-top .page-header-wrap .sub-title,
  html body.otto-wte-archive-layout .page-header-top .page-header-wrap .archive-description,
  html body.otto-wte-archive-layout .page-header-top .travel-monster-search-count {
    color: #fff !important;
  }

  html body.otto-wte-archive-layout .page-header-top .travel-monster-breadcrumb-main-wrap {
    color: #fff !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width:390px) {
  html body.otto-wte-archive-layout .tour-listing-page > .container-fluid {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  html body.otto-wte-archive-layout .safari-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html body.otto-wte-archive-layout .page-header-top,
  html body.otto-wte-archive-layout .page-header-top .page-header-wrap {
    min-height: 155px !important;
  }
}