/*
  Oloropa phone-first controlling design system
  Scope: public, admin, and user portal renderable pages.
  Loaded through ol_shared_head_helpers.php so APIs/handlers remain lean.
*/
:root{
  --ol-phone-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ol-phone-nav-h: 5.75rem;
  --ol-phone-pad: clamp(1rem, 4vw, 1.25rem);
  --ol-phone-card-radius: 1.5rem;
  --ol-phone-panel-radius: 1.75rem;
  --ol-phone-tap: 44px;
  --ol-phone-shadow: 0 18px 55px rgba(16,37,27,.12);
  --ol-phone-soft-border: 1px solid rgba(198,162,74,.22);
  --ol-phone-cream: #fbf6ea;
  --ol-phone-ivory: #fffaf0;
  --ol-phone-green: #1F3A2D;
  --ol-phone-deep: #10251B;
  --ol-phone-gold: #C6A24A;
  --ol-phone-text: #17231D;
}

html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{overflow-x:hidden;min-width:0;background-color:var(--ol-phone-cream);}
img,video,iframe,canvas,svg{max-width:100%;}
button,a,input,select,textarea{touch-action:manipulation;}
:where(button,a,[role="button"],input,select,textarea,.ol-admin-btn,.ol-action,.ol-btn){min-height:var(--ol-phone-tap);}
:where(input,select,textarea){font-size:16px;}
:where(.ol-visually-safe-focus :focus-visible, :focus-visible){outline:3px solid rgba(198,162,74,.85);outline-offset:3px;}
[data-ol-phone-system="active"]{--ol-current-phone-nav-h:var(--ol-phone-nav-h);}

/* Universal layout containment */
#main-content,.ol-main-content,.ol-page,.ol-public-page,.ol-admin-shell,.ol-user-portal-shell,.portal-shell{min-width:0;}
#main-content{scroll-margin-top:1rem;}
#sidebar{will-change:transform;}
#toast,.ol-toast,.toast{z-index:9999;}

/* Premium cards and sections that must collapse cleanly on mobile */
:where(.destination-card,.package-card,.story-card,.gallery-card,.media-card,.ol-kpi-card,.ol-finance-card,.ol-report-row,.ol-report-library,.ol-table-row,.ol-story-layout,.ol-package-drawer,.ol-serenity-addons,.ol-user-command-card,.ol-admin-glass,.ol-create-panel,.ol-builder-panel){
  min-width:0;
  overflow-wrap:anywhere;
}

/* Media safety */
:where(.destination-card,.package-card,.story-card,.gallery-card,.media-card) :where(img,video){
  display:block;
  width:100%;
  object-fit:cover;
}
:where(.ol-media-frame,.ol-gallery-frame,.ol-card-media,.destination-card figure,.package-card figure,.story-card figure,.gallery-card figure,.media-card figure){
  position:relative;
  overflow:hidden;
  border-radius:inherit;
  isolation:isolate;
}
:where(.ol-media-frame,.ol-gallery-frame,.ol-card-media)::after{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:auto 0 0 0;
  height:38%;
  background:linear-gradient(180deg,transparent,rgba(7,20,15,.48));
  opacity:.75;
}

/* Phone-first rules */
@media (max-width: 767px){
  :root{--ol-phone-nav-h:5.95rem;}
  html,body{width:100%;max-width:100%;}
  body{font-size:15px;line-height:1.55;}

  /* Main content becomes the controlling one-column canvas. */
  #main-content,.ol-main-content,main[role="main"],body > main{
    width:100%;
    max-width:100%;
    padding-left:var(--ol-phone-pad)!important;
    padding-right:var(--ol-phone-pad)!important;
    padding-bottom:calc(var(--ol-phone-nav-h) + var(--ol-phone-safe-bottom) + 1.25rem)!important;
  }
  body:has(#mobile-nav),body:has(.ol-admin-mobile-bottom-nav),body:has(.ol-user-bottom-nav){
    padding-bottom:calc(var(--ol-phone-nav-h) + var(--ol-phone-safe-bottom));
  }

  /* Never allow desktop grids to cause horizontal overflow on phone. */
  :where(.grid,[class*="grid-cols-"],.ol-admin-builder-grid,.ol-public-detail-grid,.ol-user-hub-grid,.ol-detail-cinema-grid,.ol-create-workspace,.ol-dashboard-grid,.ol-report-grid,.ol-finance-grid,.ol-package-grid,.ol-destination-grid,.ol-story-grid,#destination-grid){
    grid-template-columns:minmax(0,1fr)!important;
  }
  :where(.flex,.ol-toolbar,.ol-action-row,.ol-admin-actions,.ol-filter-row,.ol-report-actions,.ol-finance-actions){
    min-width:0;
  }
  :where(.ol-toolbar,.ol-action-row,.ol-admin-actions,.ol-filter-row,.ol-report-actions,.ol-finance-actions){
    flex-wrap:wrap!important;
    gap:.65rem!important;
  }
  :where(.ol-toolbar > *, .ol-action-row > *, .ol-admin-actions > *, .ol-filter-row > *){
    min-width:min(100%, 0px);
  }

  /* Hero and command sections: shorter, more readable, thumb-friendly. */
  :where(.ol-command-hero,.ol-admin-hero,.ol-public-hero,.hero,.ol-cinema-hero,.ol-user-command-card){
    min-height:auto!important;
    border-radius:1.7rem!important;
    padding:1.15rem!important;
    margin-left:0!important;
    margin-right:0!important;
    overflow:hidden!important;
  }
  :where(.ol-command-hero h1,.ol-admin-hero h1,.ol-public-hero h1,.hero h1,h1){
    font-size:clamp(2rem, 11vw, 3.1rem)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
    text-wrap:balance;
  }
  :where(h2){font-size:clamp(1.55rem, 7vw, 2.2rem)!important;line-height:1.05!important;text-wrap:balance;}
  :where(p,li){max-width:68ch;}

  /* Public/admin/user cards use a single rhythm. */
  :where(.destination-card,.package-card,.story-card,.gallery-card,.media-card,.ol-kpi-card,.ol-finance-card,.ol-report-row,.ol-table-row,.ol-user-command-card,.ol-admin-glass,.ol-story-layout,.ol-brief-step,.ol-calendar-day,.ol-serenity-addons){
    border-radius:var(--ol-phone-card-radius)!important;
    box-shadow:var(--ol-phone-shadow)!important;
  }
  :where(.destination-card,.package-card,.story-card,.gallery-card,.media-card,.ol-kpi-card,.ol-finance-card,.ol-report-row,.ol-table-row){
    padding:clamp(.85rem, 3.8vw, 1.1rem)!important;
  }
  :where(.destination-card img,.package-card img,.story-card img,.gallery-card img,.media-card img){
    min-height:190px;
    max-height:360px;
    border-radius:1.25rem;
  }

  /* Bottom navigation and mobile more sheet become authoritative. */
  #mobile-nav,.ol-admin-mobile-bottom-nav,.ol-user-bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:9000!important;
    min-height:calc(var(--ol-phone-nav-h) + var(--ol-phone-safe-bottom))!important;
    padding-bottom:calc(.55rem + var(--ol-phone-safe-bottom))!important;
    border-top:var(--ol-phone-soft-border)!important;
    background:rgba(255,250,240,.96)!important;
    backdrop-filter:blur(20px)!important;
    box-shadow:0 -18px 60px rgba(16,37,27,.13)!important;
  }
  #mobile-nav :where(a,button),.ol-admin-mobile-bottom-nav :where(a,button),.ol-user-bottom-nav :where(a,button){
    min-height:56px!important;
    border-radius:1rem!important;
  }
  #mobile-more-sheet,#ol-mobile-more-sheet,.ol-mobile-sheet,.ol-bottom-sheet{
    position:fixed!important;
    inset:0!important;
    z-index:9200!important;
  }
  #mobile-more-panel,#ol-mobile-more-panel,.ol-bottom-sheet-panel,.ol-drawer-panel{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    max-height:min(86dvh,720px)!important;
    overflow:auto!important;
    border-radius:1.9rem 1.9rem 0 0!important;
    padding:1rem 1rem calc(1.25rem + var(--ol-phone-safe-bottom))!important;
    background:rgba(255,250,240,.98)!important;
    box-shadow:0 -24px 80px rgba(16,37,27,.22)!important;
  }

  /* Sidebar becomes an off-canvas drawer only. */
  #sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:min(86vw,320px)!important;
    max-width:320px!important;
    z-index:9100!important;
    transform:translateX(-105%)!important;
    transition:transform .25s ease!important;
    border-radius:0 1.5rem 1.5rem 0!important;
  }
  #sidebar.is-open,#sidebar[data-open="true"]{transform:translateX(0)!important;}
  #sidebar :where(a,button){min-height:48px!important;}

  /* Tables turn into controlled scroll regions unless JS converts rows to cards. */
  :where(table){min-width:720px;}
  :where(.table-wrap,.ol-table-wrap,#destination-table-wrap,.ol-p7-table-wrap,.ol-finance-table-wrap){
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    border-radius:1.3rem;
    scroll-snap-type:x proximity;
  }
  :where(.ol-phone-card-table){display:block!important;min-width:0!important;}
  :where(.ol-phone-card-table thead){display:none!important;}
  :where(.ol-phone-card-table tbody,.ol-phone-card-table tr,.ol-phone-card-table td){display:block!important;width:100%!important;min-width:0!important;}
  :where(.ol-phone-card-table tr){
    margin:0 0 .9rem!important;
    border:var(--ol-phone-soft-border)!important;
    border-radius:1.2rem!important;
    background:rgba(255,250,240,.94)!important;
    box-shadow:0 12px 34px rgba(16,37,27,.08)!important;
    overflow:hidden!important;
  }
  :where(.ol-phone-card-table td){
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:1rem!important;
    padding:.72rem .9rem!important;
    border-bottom:1px solid rgba(198,162,74,.14)!important;
  }
  :where(.ol-phone-card-table td)::before{
    content:attr(data-ol-label);
    flex:0 0 42%;
    color:rgba(23,35,29,.62);
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  /* Drawers, media pickers, previews, builder surfaces. */
  #destination-drawer,#brief-builder-drawer,#media-library-drawer,#booking-calendar,#chat-panel,.ol-package-drawer,.ol-notification-dropdown,.ol-export-drawer{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    max-width:100%!important;
    max-height:86dvh!important;
    overflow:auto!important;
    z-index:9300!important;
    border-radius:1.9rem 1.9rem 0 0!important;
    padding:1rem!important;
    padding-bottom:calc(1.25rem + var(--ol-phone-safe-bottom))!important;
  }
  #media-library-drawer .grid,#booking-calendar .grid,#brief-builder-drawer .grid,#chat-panel .grid{grid-template-columns:minmax(0,1fr)!important;}
  #media-category-filter,#gallery-type-selector,#story-layout-selector{
    display:flex!important;
    gap:.5rem!important;
    overflow-x:auto!important;
    padding-bottom:.35rem!important;
    scroll-snap-type:x proximity;
  }
  #media-category-filter > *,#gallery-type-selector > *,#story-layout-selector > *{flex:0 0 auto;scroll-snap-align:start;}

  /* Story canvas: clean reading. */
  #story-canvas,#story-preview,.ol-story-canvas,.ol-story-preview{
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
  }
  :where(#story-canvas,#story-preview,.ol-story-canvas,.ol-story-preview) :where(p,li){
    font-size:1rem!important;
    line-height:1.78!important;
  }
  :where(.ol-story-layout,.ol-story-section){padding:1rem!important;border-radius:1.5rem!important;}

  /* Galleries and media morph into swipeable strips by default. */
  :where(.ol-gallery,.gallery,.ol-gallery-grid,.ol-media-grid,.ol-story-gallery,.ol-package-gallery,.ol-destination-gallery){
    display:flex!important;
    grid-template-columns:none!important;
    gap:.8rem!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:.5rem;
  }
  :where(.ol-gallery > *,.gallery > *,.ol-gallery-grid > *,.ol-media-grid > *,.ol-story-gallery > *,.ol-package-gallery > *,.ol-destination-gallery > *){
    flex:0 0 min(86vw,360px)!important;
    scroll-snap-align:start;
  }

  /* Brief builder and calendar become step-first. */
  #brief-builder,.ol-brief-builder{border-radius:1.8rem!important;}
  .ol-brief-step{display:block!important;margin-bottom:.9rem!important;}
  .ol-calendar-day{min-height:64px!important;padding:.7rem!important;}

  /* Chat and sound never collide with bottom nav. */
  #chat-widget,#oloropa-chat-widget-root,.ol-chat-shell{
    right:.85rem!important;
    bottom:calc(var(--ol-phone-nav-h) + var(--ol-phone-safe-bottom) + .85rem)!important;
    z-index:8800!important;
  }
  #chat-message-list,.ol-chat-thread{max-height:min(58dvh,520px)!important;}
  .ol-es-sound-dock{
    left:.85rem!important;
    right:auto!important;
    bottom:calc(var(--ol-phone-nav-h) + var(--ol-phone-safe-bottom) + .85rem)!important;
    max-width:min(56vw,260px)!important;
    z-index:8700!important;
  }
  .ol-es-sound-label{max-width:110px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}

  /* Sticky action bars. */
  .phone-sticky-actions,.ol-phone-sticky-actions,.ol-sticky-mobile-actions{
    position:sticky!important;
    bottom:calc(var(--ol-phone-nav-h) + var(--ol-phone-safe-bottom) + .6rem)!important;
    z-index:8600!important;
    display:flex!important;
    gap:.65rem!important;
    padding:.65rem!important;
    border:var(--ol-phone-soft-border)!important;
    border-radius:999px!important;
    background:rgba(255,250,240,.94)!important;
    backdrop-filter:blur(18px)!important;
    box-shadow:var(--ol-phone-shadow)!important;
  }
  .phone-sticky-actions > *,.ol-phone-sticky-actions > *,.ol-sticky-mobile-actions > *{flex:1 1 0;justify-content:center;}

  /* Forms become calm, vertically grouped, keyboard-friendly. */
  :where(form) :where(input,select,textarea){
    width:100%!important;
    min-height:48px!important;
    border-radius:1rem!important;
  }
  :where(form) :where(label){font-size:.78rem!important;font-weight:900!important;letter-spacing:.06em!important;}
  :where(.form-grid,.ol-form-grid,.ol-create-form-grid){grid-template-columns:minmax(0,1fr)!important;}

  /* Public route/map embeds. */
  #map-embed-preview,.ol-map-embed-shell,iframe[src*="maps"],.route-map-iframe{
    min-height:300px!important;
    max-height:58dvh!important;
    border-radius:1.4rem!important;
  }
  #youtube-embed-preview,.ol-embed-youtube,.video-embed{
    aspect-ratio:16/9;
    border-radius:1.4rem!important;
    overflow:hidden!important;
  }
}

/* Tablet: balanced panels, still touch-first. */
@media (min-width:768px) and (max-width:1199px){
  #main-content,.ol-main-content,main[role="main"],body > main{padding-left:1.25rem!important;padding-right:1.25rem!important;}
  :where(.ol-admin-builder-grid,.ol-public-detail-grid,.ol-user-hub-grid,.ol-create-workspace,.ol-detail-cinema-grid){
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(280px,.72fr)!important;
    gap:1.2rem!important;
  }
  :where(#destination-grid,.ol-package-grid,.ol-destination-grid,.ol-story-grid,.ol-media-grid){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #media-library-drawer,.ol-export-drawer{width:min(560px,92vw)!important;}
  .ol-command-hero,.ol-admin-hero,.ol-public-hero,.hero{border-radius:2rem!important;}
  #chat-widget,#oloropa-chat-widget-root{bottom:1.25rem!important;}
  .ol-es-sound-dock{bottom:1.25rem!important;}
}

/* Desktop: cinematic/admin density without undoing phone guarantees. */
@media (min-width:1200px){
  :where(.ol-admin-builder-grid,.ol-create-workspace){grid-template-columns:280px minmax(0,1fr) 380px;}
  :where(.ol-public-story-grid){grid-template-columns:minmax(0,780px) 320px;}
  :where(.ol-detail-cinema-grid){grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);}
  :where(#destination-grid,.ol-package-grid,.ol-destination-grid,.ol-story-grid){grid-template-columns:repeat(3,minmax(0,1fr));}
  #sidebar{transform:none;}
}

/* Reduced motion and reduced data friendly defaults. */
@media (prefers-reduced-motion: reduce){
  .reveal,.ol-reveal,.destination-card,.package-card,.story-card,.gallery-card,.media-card,.ol-kpi-card,.ol-finance-card{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
  :where(.ol-gallery,.gallery,.ol-media-grid){scroll-behavior:auto!important;}
}

/* Utility classes injected or used by JS. */
.ol-phone-overflow-guard{overflow-x:hidden!important;max-width:100%!important;}
.ol-phone-scroll-lock{overflow:hidden!important;touch-action:none!important;}
.ol-phone-panel-open{display:block!important;}
.ol-phone-hidden{display:none!important;}
.ol-phone-swipe-hint{position:relative;}
.ol-phone-swipe-hint::before{
  content:"Swipe";
  position:absolute;
  top:.7rem;
  right:.7rem;
  z-index:3;
  border-radius:999px;
  padding:.25rem .55rem;
  color:#10251B;
  background:rgba(255,250,240,.88);
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 8px 24px rgba(16,37,27,.12);
}


/* --------------------------------------------------------------------------
   Oloropa phone recovery bridge — 2026-06-06
   Fixes distorted public phone views caused by the generic phone layer adding
   outer main padding and treating cinematic/index cards as ordinary cards.
   Public pages already own their section gutters; admin/user shells keep the
   global phone controls above.
--------------------------------------------------------------------------- */
@media (max-width: 767px){
  body[data-oloropa-page] #main-content,
  body[data-ol-public-system] #main-content,
  body[data-ol-phase7-public="immersive"] #main-content{
    padding-left:0!important;
    padding-right:0!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

  body[data-oloropa-page="index.php"]{
    background:#f8efe0!important;
  }
  body[data-oloropa-page="index.php"] #main-content{
    padding-bottom:0!important;
  }
  body[data-oloropa-page="index.php"] :where(section,header,footer,main,article,aside,div){
    box-sizing:border-box;
  }
  body[data-oloropa-page="index.php"] :where(.ix-inner,.ol-storyboard-inner,.ol-p9-inner,.ol-route-pulse-inner){
    width:min(calc(100vw - 24px),1240px)!important;
    max-width:calc(100vw - 24px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body[data-oloropa-page="index.php"] #ol-living-story-hero.ol-index-story-canvas{
    min-height:auto!important;
    padding:7.25rem 1rem 3.25rem!important;
    overflow:hidden!important;
  }
  body[data-oloropa-page="index.php"] #ol-living-story-hero .ix-hero-grid,
  body[data-oloropa-page="index.php"] .ol-story-canvas-grid,
  body[data-oloropa-page="index.php"] .ol-storyboard-layout,
  body[data-oloropa-page="index.php"] .ol-route-pulse-layout,
  body[data-oloropa-page="index.php"] .ix-intent-layout,
  body[data-oloropa-page="index.php"] .atm-intent-layout,
  body[data-oloropa-page="index.php"] .atm-quiz,
  body[data-oloropa-page="index.php"] #final-decision .ix-gateway-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:1rem!important;
    width:100%!important;
    max-width:100%!important;
  }
  body[data-oloropa-page="index.php"] .ol-story-canvas-copy h1,
  body[data-oloropa-page="index.php"] .ix-hero-copy h1,
  body[data-oloropa-page="index.php"] .lh-hero-copy h1{
    font-size:clamp(2.65rem,13vw,4.35rem)!important;
    line-height:.92!important;
    letter-spacing:-.06em!important;
    max-width:100%!important;
  }
  body[data-oloropa-page="index.php"] .ol-story-signal-panel,
  body[data-oloropa-page="index.php"] .ol-storyboard-preview,
  body[data-oloropa-page="index.php"] .ix-route-preview,
  body[data-oloropa-page="index.php"] .atm-route-preview{
    width:100%!important;
    max-width:100%!important;
    border-radius:1.55rem!important;
  }
  body[data-oloropa-page="index.php"] .ol-story-canvas-actions,
  body[data-oloropa-page="index.php"] .ix-actions,
  body[data-oloropa-page="index.php"] .lh-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:.65rem!important;
  }
  body[data-oloropa-page="index.php"] .ol-story-canvas-actions > *,
  body[data-oloropa-page="index.php"] .ix-actions > *,
  body[data-oloropa-page="index.php"] .lh-actions > *{
    width:100%!important;
    justify-content:center!important;
  }
  body[data-oloropa-page="index.php"] .ol-story-cue-rail{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    max-width:100%!important;
    padding-bottom:.45rem!important;
    scrollbar-width:none!important;
  }
  body[data-oloropa-page="index.php"] .ol-story-cue-rail::-webkit-scrollbar{display:none!important;}
  body[data-oloropa-page="index.php"] .ol-story-cue-rail a{flex:0 0 auto!important;}

  body[data-oloropa-page="index.php"] .ol-storyboard-track,
  body[data-oloropa-page="index.php"] .ol-route-recommendations,
  body[data-oloropa-page="index.php"] .ix-pathway-grid,
  body[data-oloropa-page="index.php"] .ix-grid,
  body[data-oloropa-page="index.php"] .atm-choice-grid,
  body[data-oloropa-page="index.php"] .atm-mood-tiles,
  body[data-oloropa-page="index.php"] .ol14-destination-grid,
  body[data-oloropa-page="index.php"] .ol14-route-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:1rem!important;
  }
  body[data-oloropa-page="index.php"] .ol-storyboard-card,
  body[data-oloropa-page="index.php"] .ol-phase2-recommendation-card,
  body[data-oloropa-page="index.php"] .ol-phase2-serenity-card,
  body[data-oloropa-page="index.php"] .ix-card,
  body[data-oloropa-page="index.php"] .atm-intent-card,
  body[data-oloropa-page="index.php"] .atm-mood-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    border-radius:1.6rem!important;
  }
  body[data-oloropa-page="index.php"] .ol-storyboard-card{min-height:390px!important;}
  body[data-oloropa-page="index.php"] .ol-phase2-card-media{min-height:230px!important;}

  /* The cinematic spatial timeline has its own absolute/scroll behavior. Never let
     generic card/gallery/mobile rules pad or shrink these cards. */
  body[data-oloropa-page="index.php"] #spatial.ol-portal-spatial{
    height:auto!important;
    min-height:auto!important;
    overflow:hidden!important;
    padding:3rem 0!important;
  }
  body[data-oloropa-page="index.php"] #spatial .ol-portal-sticky{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    min-height:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:1rem!important;
    padding:1rem!important;
    overflow:hidden!important;
  }
  body[data-oloropa-page="index.php"] #spatial .ol-spatial-track{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:1rem!important;
    padding:.2rem .2rem 1rem!important;
    scroll-snap-type:x mandatory!important;
  }
  body[data-oloropa-page="index.php"] #spatial .ol-destination-node{
    flex:0 0 min(86vw,380px)!important;
    width:auto!important;
    max-width:none!important;
    opacity:1!important;
    transform:none!important;
    position:relative!important;
    left:auto!important;
    top:auto!important;
    scroll-snap-align:center!important;
  }
  body[data-oloropa-page="index.php"] #spatial .ol-destination-card{
    padding:0!important;
    width:100%!important;
    height:500px!important;
    min-height:460px!important;
    max-width:none!important;
    border-radius:1.7rem!important;
  }

  /* Generic gallery swipe behavior should not take over public page layout grids. */
  body[data-oloropa-page] :where(.ol-gallery,.gallery,.ol-gallery-grid,.ol-media-grid,.ol-story-gallery,.ol-package-gallery,.ol-destination-gallery):not([data-ol-mobile-swipe="true"]){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
  }
  body[data-oloropa-page] :where(.ol-gallery,.gallery,.ol-gallery-grid,.ol-media-grid,.ol-story-gallery,.ol-package-gallery,.ol-destination-gallery):not([data-ol-mobile-swipe="true"]) > *{
    flex:auto!important;
    width:100%!important;
    max-width:100%!important;
  }
}