/* ============================================================
   CDI V20 mobile hero, drawer and carousel final fix
   - Removes accidental hero top whitespace on mobile
   - Gives homepage chips/cards a smooth continuous carousel
   - Makes drawer opening reliable and keeps CTA dock safe
   ============================================================ */

@media(max-width:760px){
  html,body{max-width:100%!important;overflow-x:hidden!important;}

  /* The mobile header is in normal flow, so the hero must not add fake offset. */
  body:not(.admin-body) .cdi-premium > .hero:first-child,
  body:not(.admin-body) main > .hero:first-child,
  body:not(.admin-body) .mphero:first-child,
  body:not(.admin-body) .page-hero:first-child,
  body:not(.admin-body) .cdi-hero:first-child{
    padding-top:0!important;
  }
  body:not(.admin-body) .hero.fw{
    padding-top:0!important;
    margin-top:0!important;
  }
  body:not(.admin-body) .hero .hgrid{
    min-height:0!important;
    padding:0!important;
    gap:0!important;
  }
  body:not(.admin-body) .hero .hl{
    padding:22px 18px 18px!important;
  }
  body:not(.admin-body) .hero .breadcrumb,
  body:not(.admin-body) .hero .breadcrumbs,
  body:not(.admin-body) .hero nav[aria-label="Breadcrumb"]{
    margin-bottom:22px!important;
  }
  body:not(.admin-body) .hero h1{
    font-size:clamp(34px,11vw,48px)!important;
    line-height:1.02!important;
    letter-spacing:-.045em!important;
    margin-bottom:16px!important;
  }
  body:not(.admin-body) .hero .eyepill{margin-bottom:14px!important;}
  body:not(.admin-body) .hero p{
    font-size:17px!important;
    line-height:1.5!important;
    margin-bottom:16px!important;
  }

  /* Drawer: force a dependable sheet on top of every page. */
  body:not(.admin-body) .mobile-drawer{
    position:fixed!important;
    inset:0 0 0 auto!important;
    width:min(92vw,390px)!important;
    max-width:min(92vw,390px)!important;
    height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:#fff!important;
    z-index:2147483000!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(105%,0,0)!important;
    transition:transform .28s cubic-bezier(.22,.8,.28,1), visibility 0s linear .28s!important;
    box-shadow:-30px 0 70px rgba(8,24,44,.28)!important;
  }
  body:not(.admin-body) .mobile-drawer.open,
  body:not(.admin-body) .mobile-drawer.is-open{
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
    transition:transform .28s cubic-bezier(.22,.8,.28,1), visibility 0s!important;
  }
  body:not(.admin-body) .mobile-drawer .dtop{
    flex:0 0 auto!important;
    min-height:78px!important;
    padding:14px 18px!important;
    background:#0B1F3D!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  body:not(.admin-body) .mobile-drawer .mmenu{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:18px 18px 20px!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body:not(.admin-body) .mobile-drawer .dfoot{
    flex:0 0 auto!important;
    position:static!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    padding:12px 18px calc(14px + env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.98)!important;
    border-top:1px solid #E8EEF6!important;
    box-shadow:0 -16px 36px rgba(12,31,56,.10)!important;
    opacity:1!important;
    transform:none!important;
  }
  body:not(.admin-body) .mobile-drawer .dfoot .btn{
    min-height:42px!important;
    border-radius:16px!important;
    font-size:13px!important;
    line-height:1.1!important;
    padding:10px 10px!important;
    white-space:normal!important;
  }
  body:not(.admin-body) .mobile-drawer .dfoot .btn:nth-child(3),
  body:not(.admin-body) .mobile-drawer .dfoot .cdi-install-menu-btn{
    grid-column:1 / -1!important;
  }
  body.cdi-drawer-open{overflow:hidden!important;}

  /* Hero chip/card carousel - continuous, smooth and no sideways page overflow. */
  body:not(.admin-body) .hero-ticks,
  body:not(.admin-body) .tboxes{
    display:block!important;
    overflow:hidden!important;
    position:relative!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:4px 0 10px!important;
    scroll-snap-type:none!important;
    -webkit-overflow-scrolling:auto!important;
    mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  }
  body:not(.admin-body) .hero-ticks .cdi-rail-inner,
  body:not(.admin-body) .tboxes .cdi-rail-inner{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:10px!important;
    width:max-content!important;
    will-change:transform!important;
    transform:translate3d(0,0,0);
    animation:cdiSmoothRail 24s linear infinite!important;
  }
  body:not(.admin-body) .tboxes .cdi-rail-inner{animation-duration:26s!important;}
  body:not(.admin-body) .hero-ticks:hover .cdi-rail-inner,
  body:not(.admin-body) .tboxes:hover .cdi-rail-inner,
  body:not(.admin-body) .hero-ticks.is-paused .cdi-rail-inner,
  body:not(.admin-body) .tboxes.is-paused .cdi-rail-inner{
    animation-play-state:paused!important;
  }
  body:not(.admin-body) .hero-ticks .htick{
    flex:0 0 auto!important;
    min-width:max-content!important;
    max-width:none!important;
    width:auto!important;
    height:38px!important;
    min-height:38px!important;
    padding:8px 13px!important;
    border-radius:999px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:12.5px!important;
    line-height:1!important;
    scroll-snap-align:none!important;
  }
  body:not(.admin-body) .tboxes .tbox{
    flex:0 0 174px!important;
    min-width:174px!important;
    max-width:174px!important;
    width:174px!important;
    min-height:82px!important;
    padding:13px 14px!important;
    border-radius:18px!important;
    scroll-snap-align:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  body:not(.admin-body) .tboxes .tbox strong,
  body:not(.admin-body) .tboxes .tbox span{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    display:block!important;
  }
  body:not(.admin-body) .tboxes .tbox strong{font-size:17px!important;line-height:1.05!important;margin-bottom:6px!important;}
  body:not(.admin-body) .tboxes .tbox span{font-size:12.5px!important;line-height:1.15!important;}

  /* Comparison checklist uses a smoother two-row carousel too. */
  body:not(.admin-body) .comparison-points{
    overflow:hidden!important;
    display:block!important;
    max-width:100%!important;
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  }
  body:not(.admin-body) .comparison-points .cdi-rail-inner{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2,minmax(52px,auto))!important;
    grid-auto-columns:220px!important;
    gap:10px!important;
    width:max-content!important;
    animation:cdiSmoothRail 30s linear infinite!important;
  }
  body:not(.admin-body) .comparison-points.is-paused .cdi-rail-inner{animation-play-state:paused!important;}
  body:not(.admin-body) .comparison-points span{
    min-height:52px!important;
    padding:10px 12px!important;
    border-radius:17px!important;
    font-size:13px!important;
    line-height:1.15!important;
  }

  /* Clean show more / show less pill. No icons, no underline. */
  body:not(.admin-body) .cdi-read-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:42px!important;
    border:1px solid #CFE3F7!important;
    background:#fff!important;
    color:#0B5EC8!important;
    border-radius:999px!important;
    padding:10px 22px!important;
    font:800 15px/1 Poppins,system-ui,sans-serif!important;
    text-decoration:none!important;
    box-shadow:0 12px 24px rgba(47,128,237,.09)!important;
    margin:8px 0 18px!important;
  }
  body:not(.admin-body) .cdi-read-toggle:before,
  body:not(.admin-body) .cdi-read-toggle:after,
  body:not(.admin-body) .cdi-read-toggle *{display:none!important;content:none!important;}
}

@keyframes cdiSmoothRail{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}

@media(max-width:760px) and (prefers-reduced-motion:reduce){
  body:not(.admin-body) .hero-ticks .cdi-rail-inner,
  body:not(.admin-body) .tboxes .cdi-rail-inner,
  body:not(.admin-body) .comparison-points .cdi-rail-inner{animation:none!important;}
}

/* ============================================================
   CDI V20 final mobile correction - hero, drawer, marquee polish
   ============================================================ */
@media(max-width:760px){
  body:not(.admin-body) .hero.fw{
    padding-top:0!important;
    padding-bottom:0!important;
  }
  body:not(.admin-body) .hero .hgrid{
    display:block!important;
    min-height:0!important;
  }
  body:not(.admin-body) .hero .hl{
    padding:28px 20px 18px!important;
  }
  body:not(.admin-body) .hero .eyepill{
    display:inline-flex!important;
    max-width:100%!important;
    font-size:11px!important;
    line-height:1.25!important;
    letter-spacing:.12em!important;
    margin:0 0 18px!important;
    padding:0!important;
    color:rgba(7,20,38,.64)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  body:not(.admin-body) .hero h1{
    font-size:clamp(37px,10.2vw,43px)!important;
    line-height:1.03!important;
    max-width:350px!important;
    margin:0 0 18px!important;
    letter-spacing:-.055em!important;
  }
  body:not(.admin-body) .hero p{
    font-size:17px!important;
    line-height:1.48!important;
    max-width:348px!important;
    margin-bottom:14px!important;
  }
  body:not(.admin-body) .hero-search{
    margin-top:14px!important;
  }
  body:not(.admin-body) .hero .hr{
    display:none!important;
  }
  body:not(.admin-body) .hero .breadcrumb,
  body:not(.admin-body) .hero .breadcrumbs,
  body:not(.admin-body) .hero nav[aria-label="Breadcrumb"]{
    display:none!important;
  }

  /* Proper backdrop: tap outside drawer closes the menu. */
  .cdi-mobile-drawer-backdrop{
    position:fixed!important;
    inset:0!important;
    background:rgba(8,24,44,.54)!important;
    backdrop-filter:blur(6px)!important;
    -webkit-backdrop-filter:blur(6px)!important;
    z-index:2147482990!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .22s ease!important;
  }
  .cdi-mobile-drawer-backdrop.is-open{
    opacity:1!important;
    pointer-events:auto!important;
  }
  body:not(.admin-body) .mobile-drawer{
    width:min(90vw,370px)!important;
    max-width:min(90vw,370px)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body:not(.admin-body) .mobile-drawer .dtop{
    min-height:72px!important;
    padding:12px 16px!important;
  }
  body:not(.admin-body) .mobile-drawer .drawer-logo{
    max-width:150px!important;
    height:auto!important;
  }
  body:not(.admin-body) .mobile-drawer .dclose{
    width:50px!important;
    height:50px!important;
    border-radius:18px!important;
  }
  body:not(.admin-body) .mobile-drawer .mmenu{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    padding:12px 16px 10px!important;
  }
  body:not(.admin-body) .mobile-drawer .mmenu details,
  body:not(.admin-body) .mobile-drawer .mmenu .mmenu-flat{
    margin-bottom:10px!important;
  }
  body:not(.admin-body) .mobile-drawer .mmenu summary,
  body:not(.admin-body) .mobile-drawer .mmenu-flat{
    min-height:62px!important;
    padding:15px 16px!important;
    border-radius:22px!important;
    font-size:20px!important;
    line-height:1.1!important;
  }
  body:not(.admin-body) .mobile-drawer .mmenu-panel{
    padding:8px 6px 12px!important;
  }
  body:not(.admin-body) .mobile-drawer .mmenu-grid a,
  body:not(.admin-body) .mobile-drawer .mmenu-panel > a{
    min-height:40px!important;
    padding:9px 8px!important;
  }
  body:not(.admin-body) .mobile-drawer .dfoot{
    flex:0 0 auto!important;
    position:static!important;
    margin-top:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    padding:10px 16px calc(12px + env(safe-area-inset-bottom))!important;
    background:#fff!important;
    border-top:1px solid #E8EEF6!important;
    box-shadow:0 -10px 26px rgba(12,31,56,.08)!important;
    z-index:2!important;
  }
  body:not(.admin-body) .mobile-drawer .dfoot .btn{
    min-height:46px!important;
    border-radius:17px!important;
    font-size:14px!important;
    line-height:1.08!important;
    padding:10px 8px!important;
  }
  body:not(.admin-body) .mobile-drawer .dfoot .btn:nth-child(3){
    grid-column:1 / -1!important;
  }
  /* Keep the PWA install action visible. A later mobile polish rule previously
     hid this control, which made the working install flow impossible to reach. */
  body:not(.admin-body) .mobile-drawer .dfoot .cdi-install-menu-btn{
    display:flex!important;
    grid-column:1 / -1!important;
    min-height:48px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    background:#0B1F3D!important;
    border:1px solid #0B1F3D!important;
    color:#fff!important;
    box-shadow:0 10px 22px rgba(11,31,61,.16)!important;
  }
  .pwa-standalone body:not(.admin-body) .mobile-drawer .dfoot .cdi-install-menu-btn{
    display:none!important;
  }

  /* Smooth marquee rails: CSS transform only, no JS scrollLeft movement. */
  body:not(.admin-body) .hero-ticks,
  body:not(.admin-body) .tboxes,
  body:not(.admin-body) .comparison-points{
    touch-action:pan-y!important;
    overscroll-behavior-x:contain!important;
  }
  body:not(.admin-body) .hero-ticks .cdi-rail-inner,
  body:not(.admin-body) .tboxes .cdi-rail-inner{
    animation-timing-function:linear!important;
    animation-play-state:running!important;
  }
  body:not(.admin-body) .hero-ticks .cdi-rail-inner{animation-duration:20s!important;}
  body:not(.admin-body) .tboxes .cdi-rail-inner{animation-duration:24s!important;}
  body:not(.admin-body) .comparison-points .cdi-rail-inner{animation-duration:28s!important;}

  body:not(.admin-body) .cdi-read-toggle{
    min-height:38px!important;
    padding:9px 18px!important;
    border-radius:999px!important;
    font-size:14px!important;
    text-decoration:none!important;
  }
}