/* MiKO non-desktop reference header / hero
 * Visual target: centered logo, premium tools card, breaking-news pill, clean hero.
 * Desktop >1024px remains visually unchanged.
 */

/* DOM helpers added only to support the non-desktop layout.
 * display:contents preserves the original desktop search layout.
 */
body.home .miko-search-field-row{display:contents}
body.home .miko-notification-header-btn{display:none!important}
body.home .miko-mobile-menu-label{display:none!important}
body.home .miko-mobile-nav-tools{display:none!important}

@media (max-width:1024px){
  body.home{
    overflow-x:hidden!important;
  }

  body.home .miko-utility-bar{
    display:none!important;
  }

  body.home .miko-news-header{
    position:relative!important;
    width:100%!important;
    overflow:visible!important;
    background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
    border-bottom:0!important;
    box-shadow:none!important;
  }

  /* ---------- ROW 1: centered logo ---------- */
  body.home .miko-news-nav-wrap{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:min(calc(100% - 32px),960px)!important;
    max-width:960px!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:18px 0 12px!important;
    gap:13px!important;
    overflow:visible!important;
  }

  body.home .miko-news-brand{
    order:1!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    text-align:center!important;
  }

  body.home .miko-news-brand img{
    display:block!important;
    width:188px!important;
    max-width:46vw!important;
    height:auto!important;
    max-height:88px!important;
    margin:0 auto!important;
    object-fit:contain!important;
  }

  body.home .miko-news-brand span{
    display:none!important;
  }

  body.home .miko-news-brand:after{
    content:"อัปเดตข่าวสาร   รวดเร็ว   เชื่อถือได้"!important;
    display:block!important;
    margin-top:4px!important;
    color:#243f61!important;
    font-size:9px!important;
    line-height:1.1!important;
    font-weight:800!important;
    letter-spacing:.01em!important;
    word-spacing:10px!important;
    white-space:nowrap!important;
  }

  /* Keep main navigation as the existing off-canvas drawer. */
  body.home .miko-news-mainnav{
    position:fixed!important;
  }

  body.home .miko-mobile-nav-tools{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:5px!important;
    width:100%!important;
    margin-top:8px!important;
    padding-top:10px!important;
    border-top:1px solid #e6edf6!important;
  }
  body.home .miko-mobile-nav-tools .miko-mobile-nav-tool{
    width:100%!important;
    min-height:52px!important;
  }

  /* ---------- ROW 2 + ROW 3: premium tools card ---------- */
  body.home .miko-news-tools{
    order:2!important;
    position:relative!important;
    display:grid!important;
    grid-template-columns:72px 82px minmax(190px,1fr) 82px 82px!important;
    grid-template-areas:
      "menu member mode saved notify"
      "field field field field field"!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:14px 16px 15px!important;
    gap:10px 9px!important;
    border:1px solid rgba(202,216,234,.82)!important;
    border-radius:26px!important;
    background:
      radial-gradient(circle at 20% 0,rgba(56,145,255,.055),transparent 28%),
      linear-gradient(180deg,rgba(255,255,255,.99),rgba(248,251,255,.97))!important;
    box-shadow:
      0 18px 46px rgba(26,67,116,.10),
      0 3px 10px rgba(26,67,116,.035),
      inset 0 1px 0 rgba(255,255,255,.98)!important;
    overflow:hidden!important;
    isolation:isolate!important;
  }

  body.home .miko-news-tools:before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    background:linear-gradient(105deg,transparent 12%,rgba(255,255,255,.55) 46%,transparent 72%)!important;
    opacity:.34!important;
    z-index:-1!important;
  }

  body.home .miko-news-search[data-miko-search]{
    display:contents!important;
  }

  body.home .miko-reward-header-btn{
    display:none!important;
  }

  /* top controls */
  body.home .miko-mobile-menu{
    grid-area:menu!important;
  }
  body.home .miko-member-account{
    grid-area:member!important;
  }
  body.home .miko-search-mode{
    grid-area:mode!important;
  }
  body.home .miko-saved-news-toggle{
    grid-area:saved!important;
  }
  body.home .miko-notification-header-btn{
    grid-area:notify!important;
    display:flex!important;
  }

  body.home .miko-mobile-menu,
  body.home .miko-member-account,
  body.home .miko-saved-news-toggle,
  body.home .miko-notification-header-btn{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:66px!important;
    min-height:66px!important;
    margin:0!important;
    padding:6px 2px 5px!important;
    border:0!important;
    border-radius:16px!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#12365e!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    overflow:visible!important;
    text-decoration:none!important;
    transition:background .18s ease,transform .18s ease,color .18s ease!important;
  }

  body.home .miko-mobile-menu:hover,
  body.home .miko-member-account:hover,
  body.home .miko-saved-news-toggle:hover,
  body.home .miko-notification-header-btn:hover{
    background:#f1f7ff!important;
    color:#0d66f6!important;
    transform:translateY(-1px)!important;
  }

  body.home .miko-mobile-menu .miko-menu-bars,
  body.home .miko-member-account>svg,
  body.home .miko-saved-icon,
  body.home .miko-notification-icon{
    display:grid!important;
    place-items:center!important;
    width:27px!important;
    height:27px!important;
    min-width:27px!important;
    margin:0!important;
    color:#11385f!important;
  }

  body.home .miko-mobile-menu .miko-menu-bars{
    position:relative!important;
  }

  body.home .miko-mobile-menu .miko-menu-bars i{
    width:25px!important;
    height:2.5px!important;
    margin:2.5px 0!important;
    border-radius:99px!important;
    background:currentColor!important;
  }

  body.home .miko-member-account>svg,
  body.home .miko-saved-icon svg,
  body.home .miko-notification-icon svg{
    display:block!important;
    width:27px!important;
    height:27px!important;
    stroke:currentColor!important;
  }

  body.home .miko-header-avatar{
    display:block!important;
    width:31px!important;
    height:31px!important;
    min-width:31px!important;
    max-width:31px!important;
    overflow:hidden!important;
    border-radius:50%!important;
    box-shadow:0 0 0 2px #fff,0 0 0 3px #d9e7f5!important;
  }
  body.home .miko-header-avatar img,
  body.home .miko-header-avatar-img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  body.home .miko-mobile-menu-label,
  body.home .miko-saved-label,
  body.home .miko-notification-label,
  body.home .miko-member-account-label{
    display:block!important;
    max-width:100%!important;
    margin:0!important;
    color:#18395e!important;
    font-size:10px!important;
    line-height:1.15!important;
    font-weight:850!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-align:center!important;
  }

  body.home .miko-saved-label{
    font-size:0!important;
  }
  body.home .miko-saved-label:after{
    content:"บันทึกข่าว"!important;
    font-size:10px!important;
  }

  body.home .miko-member-account.is-logged-in .miko-member-account-label{
    font-size:0!important;
  }
  body.home .miko-member-account.is-logged-in .miko-member-account-label:after{
    content:"โปรไฟล์"!important;
    font-size:10px!important;
  }
  body.home .miko-member-account.is-logged-in .miko-member-account-label small{
    display:none!important;
  }

  body.home .miko-notification-count{
    position:absolute!important;
    top:7px!important;
    right:14px!important;
    display:grid!important;
    place-items:center!important;
    min-width:17px!important;
    height:17px!important;
    padding:0 4px!important;
    border:2px solid #fff!important;
    border-radius:99px!important;
    background:#ef233c!important;
    color:#fff!important;
    font-size:8px!important;
    line-height:1!important;
    font-weight:950!important;
    box-shadow:0 3px 8px rgba(239,35,60,.28)!important;
  }

  body.home .miko-saved-count{
    right:10px!important;
    top:7px!important;
  }

  /* segmented MiKO / Google switch in the center */
  body.home .miko-search-mode{
    align-self:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:min(100%,280px)!important;
    min-width:0!important;
    justify-self:center!important;
    height:52px!important;
    margin:0!important;
    padding:4px!important;
    gap:3px!important;
    border:1px solid #dce6f2!important;
    border-radius:17px!important;
    background:#edf3fa!important;
    box-shadow:inset 0 1px 2px rgba(28,64,108,.035)!important;
  }

  body.home .miko-search-mode button{
    flex:1 1 50%!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:42px!important;
    margin:0!important;
    padding:0 9px!important;
    border:0!important;
    border-radius:13px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    background:transparent!important;
    color:#405873!important;
    font-size:12px!important;
    font-weight:850!important;
    white-space:nowrap!important;
    box-shadow:none!important;
  }

  body.home .miko-search-mode button span{
    display:grid!important;
    place-items:center!important;
    flex:0 0 24px!important;
    width:24px!important;
    height:24px!important;
    border-radius:7px!important;
    background:#fff!important;
    color:#466582!important;
    font-size:11px!important;
    font-weight:950!important;
    box-shadow:inset 0 0 0 1px #d5e0ec!important;
  }

  body.home .miko-search-mode button b{
    display:inline-block!important;
    font:inherit!important;
    font-size:12px!important;
    font-weight:850!important;
    color:inherit!important;
    white-space:nowrap!important;
  }

  body.home .miko-search-mode button.is-active{
    background:#fff!important;
    color:#0d66f6!important;
    box-shadow:0 5px 14px rgba(21,83,163,.11)!important;
  }

  body.home .miko-search-mode button.is-active span{
    background:linear-gradient(145deg,#247cff,#075fe5)!important;
    color:#fff!important;
    box-shadow:0 5px 12px rgba(13,102,246,.22)!important;
  }

  body.home .miko-news-search.is-google .miko-search-mode button[data-search-mode="google"].is-active span{
    background:linear-gradient(135deg,#4285f4,#34a853)!important;
    color:#fff!important;
  }

  /* bottom search row inside same card */
  body.home .miko-search-field-row{
    grid-area:field!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr) 48px!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    height:54px!important;
    margin:2px 0 0!important;
    padding:4px 5px 4px 10px!important;
    gap:4px!important;
    border:1.5px solid #c9dbf5!important;
    border-radius:22px!important;
    background:#fff!important;
    box-shadow:
      inset 0 1px 2px rgba(20,69,125,.035),
      0 6px 16px rgba(31,77,130,.055)!important;
    overflow:hidden!important;
  }

  body.home .miko-search-leading{
    display:grid!important;
    place-items:center!important;
    width:30px!important;
    height:30px!important;
    color:#0e315b!important;
  }
  body.home .miko-search-leading svg{
    display:block!important;
    width:23px!important;
    height:23px!important;
    stroke-width:2!important;
  }

  body.home .miko-search-field-row input[data-miko-search-input]{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:42px!important;
    margin:0!important;
    padding:0 5px!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    color:#173859!important;
    font-size:12px!important;
    font-weight:700!important;
  }

  body.home .miko-search-field-row input[data-miko-search-input]::placeholder{
    color:#8394aa!important;
    font-size:11px!important;
    font-weight:650!important;
    opacity:1!important;
  }

  body.home .miko-search-submit{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:15px!important;
    background:linear-gradient(145deg,#1777ff,#075ee7)!important;
    color:#fff!important;
    box-shadow:
      0 8px 18px rgba(13,102,246,.26),
      0 0 18px rgba(13,102,246,.12)!important;
  }
  body.home .miko-search-submit svg{
    width:21px!important;
    height:21px!important;
    stroke-width:2!important;
  }

  /* ---------- ROW 3: breaking news pill ---------- */
  body.home .miko-breaking-wrap{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    width:min(calc(100% - 32px),960px)!important;
    max-width:960px!important;
    min-height:60px!important;
    margin:0 auto 2px!important;
    padding:0!important;
    gap:0!important;
    border:1px solid #e5ebf3!important;
    border-radius:20px!important;
    background:#fff!important;
    box-shadow:0 10px 28px rgba(23,58,99,.07)!important;
    overflow:hidden!important;
  }

  body.home .miko-breaking-label{
    position:relative!important;
    z-index:2!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:58px!important;
    height:100%!important;
    margin:0!important;
    padding:0 18px!important;
    border:0!important;
    border-radius:19px 17px 17px 19px!important;
    background:linear-gradient(135deg,#ff1746,#ef0033)!important;
    color:#fff!important;
    font-size:13px!important;
    line-height:1!important;
    font-weight:950!important;
    white-space:nowrap!important;
    box-shadow:5px 0 15px rgba(239,0,51,.12)!important;
  }

  body.home .miko-breaking-bolt{
    margin-right:6px!important;
    font-size:18px!important;
  }

  body.home .miko-breaking-track{
    position:relative!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:58px!important;
    margin:0!important;
    padding:0 30px 0 10px!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    overflow:hidden!important;
    mask-image:none!important;
    -webkit-mask-image:none!important;
  }

  body.home .miko-breaking-track:after{
    content:"›"!important;
    position:absolute!important;
    right:12px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    color:#ef233c!important;
    font-size:25px!important;
    font-weight:500!important;
    line-height:1!important;
    pointer-events:none!important;
  }

  body.home .miko-breaking-marquee{
    height:100%!important;
  }

  body.home .miko-breaking-set a{
    max-width:74vw!important;
    color:#263a55!important;
    font-size:11.5px!important;
    font-weight:750!important;
  }

  body.home .miko-breaking-wrap time{
    display:none!important;
  }

  /* ---------- hero polish to match the reference ---------- */
  body.home .miko-home-main{
    width:min(calc(100% - 32px),960px)!important;
    max-width:960px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:14px 0 18px!important;
    overflow:visible!important;
  }

  body.home .miko-hero-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
  }

  body.home .miko-hero-slider,
  body.home .miko-hero-track,
  body.home .miko-hero-card,
  body.home .miko-hero-slide{
    border-radius:22px!important;
  }

  body.home .miko-hero-slider{
    overflow:hidden!important;
    box-shadow:
      0 17px 38px rgba(10,31,58,.13),
      0 3px 10px rgba(10,31,58,.08)!important;
  }

  body.home .miko-hero-track,
  body.home .miko-hero-card{
    height:470px!important;
  }

  body.home .miko-hero-overlay{
    background:linear-gradient(180deg,rgba(3,10,23,.04) 8%,rgba(3,10,23,.24) 43%,rgba(3,10,23,.90) 100%)!important;
  }

  body.home .miko-hero-copy{
    left:24px!important;
    right:24px!important;
    bottom:72px!important;
    width:auto!important;
    max-width:none!important;
  }

  body.home .miko-hero-copy h1{
    margin:10px 0 14px!important;
    color:#fff!important;
    font-size:31px!important;
    line-height:1.18!important;
    font-weight:950!important;
    text-shadow:0 3px 18px rgba(0,0,0,.22)!important;
  }

  body.home .miko-hero-copy p{
    max-width:86%!important;
    margin-bottom:14px!important;
    color:#eef4ff!important;
    font-size:12px!important;
  }

  body.home .miko-hero-actions{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    max-width:100%!important;
  }

  body.home .miko-readmore{
    flex:0 0 auto!important;
    min-height:46px!important;
    padding:0 17px!important;
    border-radius:14px!important;
    font-size:14px!important;
    box-shadow:0 8px 20px rgba(239,35,60,.24)!important;
  }

  body.home .miko-story-actions--hero{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    min-width:0!important;
    max-width:100%!important;
  }

  body.home .miko-story-actions--hero .miko-story-action{
    flex:0 0 44px!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.22)!important;
    border-radius:13px!important;
    background:rgba(7,18,36,.34)!important;
    color:#fff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
  }

  body.home .miko-story-actions--hero .miko-story-action svg{
    width:20px!important;
    height:20px!important;
  }

  body.home .miko-story-actions--hero .miko-story-action span{
    display:none!important;
  }

  body.home .miko-hero-controls{
    display:none!important;
  }

  body.home .miko-hero-dots{
    left:auto!important;
    right:18px!important;
    bottom:18px!important;
    transform:none!important;
    max-width:none!important;
    padding:0!important;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  body.home .miko-hero-dots button{
    width:8px!important;
    height:8px!important;
    border-radius:99px!important;
    background:rgba(255,255,255,.9)!important;
  }
  body.home .miko-hero-dots button.is-active{
    width:22px!important;
    background:#0d66f6!important;
  }

  body.home .miko-hero-progress{
    height:2px!important;
  }
}

@media (max-width:700px){
  body.home .miko-news-nav-wrap,
  body.home .miko-breaking-wrap,
  body.home .miko-home-main{
    width:calc(100% - 20px)!important;
    max-width:none!important;
  }

  body.home .miko-news-nav-wrap{
    padding:13px 0 10px!important;
    gap:10px!important;
  }

  body.home .miko-news-brand img{
    width:154px!important;
    max-width:46vw!important;
    max-height:72px!important;
  }

  body.home .miko-news-tools{
    grid-template-columns:62px 72px minmax(0,1fr)!important;
    grid-template-areas:
      "menu member mode"
      "field field field"!important;
    padding:11px 12px 12px!important;
    gap:8px 7px!important;
    border-radius:22px!important;
  }

  body.home .miko-saved-news-toggle,
  body.home .miko-notification-header-btn{
    display:none!important;
  }

  body.home .miko-mobile-menu,
  body.home .miko-member-account,
  body.home .miko-saved-news-toggle,
  body.home .miko-notification-header-btn{
    height:61px!important;
    min-height:61px!important;
    padding:5px 1px 4px!important;
    gap:5px!important;
    border-radius:13px!important;
  }

  body.home .miko-mobile-menu .miko-menu-bars,
  body.home .miko-member-account>svg,
  body.home .miko-saved-icon,
  body.home .miko-notification-icon{
    width:25px!important;
    height:25px!important;
    min-width:25px!important;
  }
  body.home .miko-member-account>svg,
  body.home .miko-saved-icon svg,
  body.home .miko-notification-icon svg{
    width:25px!important;
    height:25px!important;
  }

  body.home .miko-mobile-menu-label,
  body.home .miko-saved-label:after,
  body.home .miko-notification-label,
  body.home .miko-member-account-label,
  body.home .miko-member-account.is-logged-in .miko-member-account-label:after{
    font-size:9px!important;
  }

  body.home .miko-search-mode{
    height:48px!important;
    padding:3px!important;
    border-radius:15px!important;
  }
  body.home .miko-search-mode button{
    height:40px!important;
    padding:0 7px!important;
    gap:5px!important;
    border-radius:12px!important;
    font-size:10.5px!important;
  }
  body.home .miko-search-mode button span{
    flex-basis:22px!important;
    width:22px!important;
    height:22px!important;
    font-size:10px!important;
  }
  body.home .miko-search-mode button b{
    font-size:10.5px!important;
  }

  body.home .miko-search-field-row{
    grid-template-columns:34px minmax(0,1fr) 44px!important;
    height:51px!important;
    padding:3px 4px 3px 9px!important;
    border-radius:19px!important;
  }
  body.home .miko-search-leading{
    width:27px!important;
    height:27px!important;
  }
  body.home .miko-search-leading svg{
    width:21px!important;
    height:21px!important;
  }
  body.home .miko-search-field-row input[data-miko-search-input]{
    height:38px!important;
    padding:0 4px!important;
    font-size:11px!important;
  }
  body.home .miko-search-field-row input[data-miko-search-input]::placeholder{
    font-size:10px!important;
  }
  body.home .miko-search-submit{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    border-radius:14px!important;
  }

  body.home .miko-breaking-wrap{
    min-height:54px!important;
    border-radius:17px!important;
  }
  body.home .miko-breaking-label{
    min-height:52px!important;
    padding:0 14px!important;
    border-radius:16px 14px 14px 16px!important;
    font-size:11.5px!important;
  }
  body.home .miko-breaking-track{
    height:52px!important;
    padding-right:25px!important;
  }
  body.home .miko-breaking-set a{
    max-width:70vw!important;
    font-size:10.5px!important;
  }

  body.home .miko-home-main{
    padding-top:12px!important;
  }

  body.home .miko-hero-track,
  body.home .miko-hero-card{
    height:420px!important;
  }
  body.home .miko-hero-slider,
  body.home .miko-hero-track,
  body.home .miko-hero-card,
  body.home .miko-hero-slide{
    border-radius:19px!important;
  }
  body.home .miko-hero-copy{
    left:18px!important;
    right:18px!important;
    bottom:62px!important;
  }
  body.home .miko-hero-copy h1{
    margin:8px 0 12px!important;
    font-size:25px!important;
    line-height:1.2!important;
  }
  body.home .miko-hero-copy p{
    display:none!important;
  }
  body.home .miko-readmore{
    min-height:44px!important;
    padding:0 15px!important;
    border-radius:13px!important;
    font-size:13px!important;
  }
  body.home .miko-story-actions--hero .miko-story-action{
    flex-basis:42px!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    border-radius:12px!important;
  }
  body.home .miko-hero-dots{
    right:14px!important;
    bottom:14px!important;
  }
}

@media (max-width:430px){
  body.home .miko-news-nav-wrap,
  body.home .miko-breaking-wrap,
  body.home .miko-home-main{
    width:calc(100% - 18px)!important;
  }

  body.home .miko-news-brand img{
    width:146px!important;
  }

  body.home .miko-news-tools{
    grid-template-columns:52px 62px minmax(0,1fr)!important;
    grid-template-areas:
      "menu member mode"
      "field field field"!important;
    padding:10px 9px 11px!important;
    gap:7px 6px!important;
    border-radius:21px!important;
  }

  body.home .miko-mobile-menu,
  body.home .miko-member-account,
  body.home .miko-saved-news-toggle,
  body.home .miko-notification-header-btn{
    height:58px!important;
    min-height:58px!important;
  }

  body.home .miko-mobile-menu-label,
  body.home .miko-saved-label:after,
  body.home .miko-notification-label,
  body.home .miko-member-account-label,
  body.home .miko-member-account.is-logged-in .miko-member-account-label:after{
    font-size:8.5px!important;
  }

  body.home .miko-search-mode{
    height:46px!important;
  }
  body.home .miko-search-mode button{
    height:38px!important;
    padding:0 5px!important;
    gap:4px!important;
  }
  body.home .miko-search-mode button span{
    flex-basis:21px!important;
    width:21px!important;
    height:21px!important;
  }
  body.home .miko-search-mode button b{
    font-size:10px!important;
  }

  body.home .miko-search-field-row{
    height:49px!important;
    border-radius:18px!important;
  }

  body.home .miko-breaking-label{
    padding:0 12px!important;
    font-size:11px!important;
  }

  body.home .miko-breaking-set a{
    max-width:68vw!important;
    font-size:10px!important;
  }

  body.home .miko-hero-track,
  body.home .miko-hero-card{
    height:400px!important;
  }
  body.home .miko-hero-copy{
    left:16px!important;
    right:16px!important;
    bottom:59px!important;
  }
  body.home .miko-hero-copy h1{
    font-size:22px!important;
  }

  body.home .miko-hero-actions{
    gap:6px!important;
  }
  body.home .miko-readmore{
    padding:0 14px!important;
    font-size:12.5px!important;
  }
  body.home .miko-story-actions--hero{
    gap:5px!important;
  }
  body.home .miko-story-actions--hero .miko-story-action{
    flex-basis:40px!important;
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
  }
}

@media (max-width:390px){
  body.home .miko-news-nav-wrap,
  body.home .miko-breaking-wrap,
  body.home .miko-home-main{
    width:calc(100% - 16px)!important;
  }

  body.home .miko-news-brand img{
    width:138px!important;
  }

  body.home .miko-news-tools{
    grid-template-columns:49px 58px minmax(0,1fr)!important;
    grid-template-areas:
      "menu member mode"
      "field field field"!important;
    padding-left:8px!important;
    padding-right:8px!important;
    column-gap:5px!important;
  }

  body.home .miko-search-mode button{
    padding-left:4px!important;
    padding-right:4px!important;
    gap:3px!important;
  }
  body.home .miko-search-mode button span{
    flex-basis:20px!important;
    width:20px!important;
    height:20px!important;
  }
  body.home .miko-search-mode button b{
    font-size:9.5px!important;
  }

  body.home .miko-breaking-label{
    padding:0 10px!important;
  }

  body.home .miko-hero-track,
  body.home .miko-hero-card{
    height:386px!important;
  }
  body.home .miko-hero-copy h1{
    font-size:20.5px!important;
  }

  body.home .miko-readmore{
    min-height:42px!important;
    padding:0 12px!important;
    font-size:12px!important;
  }
  body.home .miko-story-actions--hero .miko-story-action{
    flex-basis:38px!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
  }
}

@media (max-width:360px){
  body.home .miko-news-nav-wrap,
  body.home .miko-breaking-wrap,
  body.home .miko-home-main{
    width:calc(100% - 14px)!important;
  }

  body.home .miko-news-brand img{
    width:130px!important;
  }

  body.home .miko-news-tools{
    grid-template-columns:46px 54px minmax(0,1fr)!important;
    grid-template-areas:
      "menu member mode"
      "field field field"!important;
    padding:9px 7px 10px!important;
    gap:6px 4px!important;
  }

  body.home .miko-mobile-menu,
  body.home .miko-member-account,
  body.home .miko-saved-news-toggle,
  body.home .miko-notification-header-btn{
    height:56px!important;
    min-height:56px!important;
  }

  body.home .miko-mobile-menu-label,
  body.home .miko-saved-label:after,
  body.home .miko-notification-label,
  body.home .miko-member-account-label,
  body.home .miko-member-account.is-logged-in .miko-member-account-label:after{
    font-size:8px!important;
  }

  body.home .miko-search-mode button{
    padding:0 3px!important;
    gap:2px!important;
  }
  body.home .miko-search-mode button span{
    flex-basis:19px!important;
    width:19px!important;
    height:19px!important;
    font-size:9px!important;
  }
  body.home .miko-search-mode button b{
    font-size:9px!important;
  }

  body.home .miko-search-field-row{
    grid-template-columns:30px minmax(0,1fr) 40px!important;
    height:47px!important;
    padding-left:7px!important;
  }
  body.home .miko-search-field-row input[data-miko-search-input]{
    font-size:10px!important;
  }
  body.home .miko-search-field-row input[data-miko-search-input]::placeholder{
    font-size:9px!important;
  }
  body.home .miko-search-submit{
    width:39px!important;
    min-width:39px!important;
    max-width:39px!important;
    height:39px!important;
    min-height:39px!important;
    max-height:39px!important;
  }

  body.home .miko-breaking-label{
    padding:0 9px!important;
    font-size:10.5px!important;
  }
  body.home .miko-breaking-set a{
    max-width:65vw!important;
    font-size:9.5px!important;
  }

  body.home .miko-hero-track,
  body.home .miko-hero-card{
    height:370px!important;
  }
  body.home .miko-hero-copy{
    left:14px!important;
    right:14px!important;
    bottom:55px!important;
  }
  body.home .miko-hero-copy h1{
    font-size:18.5px!important;
    line-height:1.22!important;
  }

  body.home .miko-readmore{
    min-height:40px!important;
    padding:0 11px!important;
    font-size:11px!important;
  }
  body.home .miko-story-actions--hero{
    gap:4px!important;
  }
  body.home .miko-story-actions--hero .miko-story-action{
    flex-basis:36px!important;
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.home .miko-news-tools:before,
  body.home .miko-mobile-menu,
  body.home .miko-member-account,
  body.home .miko-saved-news-toggle,
  body.home .miko-notification-header-btn{
    transition:none!important;
    animation:none!important;
  }
}

/* Final mobile compact hardening — prevent right-side overlap in narrow in-app browsers. */
@media (max-width:700px){
  body.home .miko-news-tools{
    display:grid!important;
    grid-template-columns:54px 64px 150px!important;
    grid-template-areas:
      "menu member mode"
      "field field field"!important;
    align-items:start!important;
    justify-content:space-between!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:10px 10px 11px!important;
    column-gap:6px!important;
    row-gap:9px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body.home .miko-reward-header-btn,
  body.home .miko-saved-news-toggle,
  body.home .miko-notification-header-btn{
    display:none!important;
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
  }

  body.home .miko-mobile-menu{
    grid-area:menu!important;
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    justify-self:start!important;
  }

  body.home .miko-member-account{
    grid-area:member!important;
    width:64px!important;
    min-width:64px!important;
    max-width:64px!important;
    justify-self:start!important;
  }

  body.home .miko-search-mode{
    grid-area:mode!important;
    width:150px!important;
    min-width:150px!important;
    max-width:150px!important;
    justify-self:end!important;
    align-self:center!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  body.home .miko-search-mode button{
    flex:1 1 calc(50% - 2px)!important;
    width:calc(50% - 2px)!important;
    min-width:0!important;
    max-width:calc(50% - 2px)!important;
    padding-left:5px!important;
    padding-right:5px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body.home .miko-search-mode button b{
    overflow:hidden!important;
    text-overflow:clip!important;
  }

  body.home .miko-search-field-row{
    grid-area:field!important;
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
}

@media (max-width:430px){
  body.home .miko-news-tools{
    grid-template-columns:50px 60px 146px!important;
    padding-left:9px!important;
    padding-right:9px!important;
  }
  body.home .miko-mobile-menu{
    width:50px!important;
    min-width:50px!important;
    max-width:50px!important;
  }
  body.home .miko-member-account{
    width:60px!important;
    min-width:60px!important;
    max-width:60px!important;
  }
  body.home .miko-search-mode{
    width:146px!important;
    min-width:146px!important;
    max-width:146px!important;
  }
}

@media (max-width:390px){
  body.home .miko-news-tools{
    grid-template-columns:48px 56px 140px!important;
    padding-left:8px!important;
    padding-right:8px!important;
    column-gap:5px!important;
  }
  body.home .miko-mobile-menu{
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
  }
  body.home .miko-member-account{
    width:56px!important;
    min-width:56px!important;
    max-width:56px!important;
  }
  body.home .miko-search-mode{
    width:140px!important;
    min-width:140px!important;
    max-width:140px!important;
  }
  body.home .miko-search-mode button{
    padding-left:4px!important;
    padding-right:4px!important;
    gap:3px!important;
  }
}

@media (max-width:360px){
  body.home .miko-news-tools{
    grid-template-columns:46px 54px 134px!important;
    padding-left:7px!important;
    padding-right:7px!important;
    column-gap:4px!important;
  }
  body.home .miko-mobile-menu{
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
  }
  body.home .miko-member-account{
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
  }
  body.home .miko-search-mode{
    width:134px!important;
    min-width:134px!important;
    max-width:134px!important;
  }
  body.home .miko-search-mode button{
    padding-left:3px!important;
    padding-right:3px!important;
    gap:2px!important;
  }
  body.home .miko-search-mode button b{
    font-size:8.8px!important;
  }
  body.home .miko-search-mode button span{
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    flex-basis:18px!important;
  }
}

/* iOS / in-app browser safe compact header.
 * Avoid display:contents on the search form because Safari can retain a ghost box.
 * Keep the same visual arrangement, only shrink the right control so it ends cleanly.
 */
@media (max-width:700px){
  body.home .miko-news-tools{
    grid-template-columns:52px 62px 132px!important;
    grid-template-areas:"menu member mode"!important;
    justify-content:center!important;
    align-items:center!important;
    column-gap:10px!important;
    row-gap:0!important;
    padding:10px 12px!important;
    min-height:82px!important;
    overflow:hidden!important;
  }

  body.home .miko-news-search[data-miko-search]{
    grid-area:mode!important;
    display:block!important;
    width:132px!important;
    min-width:132px!important;
    max-width:132px!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:15px!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:hidden!important;
    justify-self:end!important;
  }

  body.home .miko-news-search[data-miko-search] .miko-search-mode{
    display:flex!important;
    width:132px!important;
    min-width:132px!important;
    max-width:132px!important;
    height:48px!important;
    margin:0!important;
    padding:3px!important;
    gap:2px!important;
    border-radius:15px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body.home .miko-news-search[data-miko-search] .miko-search-mode button{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:40px!important;
    padding:0 4px!important;
    gap:3px!important;
    border-radius:12px!important;
    overflow:hidden!important;
  }

  body.home .miko-news-search[data-miko-search] .miko-search-mode button span{
    flex:0 0 20px!important;
    width:20px!important;
    min-width:20px!important;
    height:20px!important;
  }

  body.home .miko-news-search[data-miko-search] .miko-search-mode button b{
    min-width:0!important;
    font-size:9px!important;
    line-height:1!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }

  body.home .miko-search-field-row{
    display:none!important;
  }

  body.home .miko-mobile-menu{
    width:52px!important;
    min-width:52px!important;
    max-width:52px!important;
    justify-self:center!important;
  }

  body.home .miko-member-account{
    width:62px!important;
    min-width:62px!important;
    max-width:62px!important;
    justify-self:center!important;
  }
}

@media (max-width:430px){
  body.home .miko-news-tools{
    grid-template-columns:48px 58px 126px!important;
    column-gap:8px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  body.home .miko-mobile-menu{
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
  }

  body.home .miko-member-account{
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
  }

  body.home .miko-news-search[data-miko-search],
  body.home .miko-news-search[data-miko-search] .miko-search-mode{
    width:126px!important;
    min-width:126px!important;
    max-width:126px!important;
  }
}

@media (max-width:390px){
  body.home .miko-news-tools{
    grid-template-columns:46px 56px 120px!important;
    column-gap:7px!important;
    padding-left:9px!important;
    padding-right:9px!important;
  }

  body.home .miko-mobile-menu{
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
  }

  body.home .miko-member-account{
    width:56px!important;
    min-width:56px!important;
    max-width:56px!important;
  }

  body.home .miko-news-search[data-miko-search],
  body.home .miko-news-search[data-miko-search] .miko-search-mode{
    width:120px!important;
    min-width:120px!important;
    max-width:120px!important;
  }

  body.home .miko-news-search[data-miko-search] .miko-search-mode button{
    padding-left:3px!important;
    padding-right:3px!important;
    gap:2px!important;
  }

  body.home .miko-news-search[data-miko-search] .miko-search-mode button span{
    flex-basis:19px!important;
    width:19px!important;
    min-width:19px!important;
    height:19px!important;
  }

  body.home .miko-news-search[data-miko-search] .miko-search-mode button b{
    font-size:8.5px!important;
  }
}

@media (max-width:360px){
  body.home .miko-news-tools{
    grid-template-columns:44px 54px 114px!important;
    column-gap:6px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }

  body.home .miko-mobile-menu{
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
  }

  body.home .miko-member-account{
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
  }

  body.home .miko-news-search[data-miko-search],
  body.home .miko-news-search[data-miko-search] .miko-search-mode{
    width:114px!important;
    min-width:114px!important;
    max-width:114px!important;
  }

  body.home .miko-news-search[data-miko-search] .miko-search-mode button b{
    font-size:8px!important;
  }

  body.home .miko-news-search[data-miko-search] .miko-search-mode button span{
    flex-basis:18px!important;
    width:18px!important;
    min-width:18px!important;
    height:18px!important;
  }
}

/* Featured card actions: same compact visual language as standard news cards */
@media(max-width:700px){
 body.home .miko-hero-actions{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;flex-wrap:wrap!important;width:100%!important}
 body.home .miko-hero-actions>.miko-readmore{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important;min-width:0!important;min-height:36px!important;height:36px!important;padding:0 12px!important;margin:0!important;font-size:11px!important;line-height:1!important;border-radius:10px!important;white-space:nowrap!important;box-shadow:none!important}
 body.home .miko-hero-actions>.miko-story-actions--hero{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;flex:1 1 100%!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important}
 body.home .miko-hero-actions .miko-story-actions--hero .miko-story-action{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;flex:none!important;width:100%!important;min-width:0!important;max-width:none!important;height:36px!important;min-height:36px!important;max-height:36px!important;padding:0 5px!important;border:1px solid #dde6f0!important;border-radius:10px!important;background:#fff!important;color:#62758d!important;font-size:9px!important;box-shadow:none!important;white-space:nowrap!important}
}