/* MZ Radio Mobile - Efada spirit safe patch v1 */
@media (max-width:760px){
  html,body{overflow-x:hidden;-webkit-text-size-adjust:100%}
  body{padding-bottom:96px!important;background:linear-gradient(180deg,#fff8ec 0%,#faefd9 100%)!important;color:#073d34!important}
  .top{position:sticky;top:0;z-index:70;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:10px 12px!important;background:linear-gradient(135deg,#002d27,#074a3d)!important;border-bottom:1px solid rgba(244,207,120,.62)!important;box-shadow:0 8px 24px rgba(0,45,37,.20)!important;backdrop-filter:blur(14px)}
  .brand{min-width:0;gap:8px;color:#f6d77f!important}.brand img{width:48px!important;height:48px!important;object-fit:contain!important;border-radius:14px!important;background:rgba(255,255,255,.05)!important;padding:3px!important}.brand span{font-size:16px!important;white-space:nowrap!important}
  .nav{display:flex!important;flex-wrap:nowrap!important;gap:7px!important;overflow-x:auto!important;max-width:70vw!important;padding:4px 0!important;scrollbar-width:none!important}.nav::-webkit-scrollbar{display:none!important}
  .nav a,.nav span{white-space:nowrap!important;padding:8px 10px!important;font-size:13px!important;border-radius:12px!important;border-color:rgba(244,207,120,.62)!important;background:rgba(0,54,45,.58)!important;color:#fff8e9!important}
  .nav a.active{background:linear-gradient(135deg,#ffe8a3,#e0a832)!important;color:#063c32!important}
  .container,.mixed-wrap,.wrap{width:100%!important;max-width:100%!important;padding:12px!important;margin:0 auto!important}
  .hero{display:block!important;padding:22px 14px!important;border-radius:24px!important;text-align:center!important;margin:12px 0 16px!important;min-height:360px!important;background:linear-gradient(180deg,rgba(0,52,43,.88),rgba(0,48,41,.93)),url('mz-hero-bg.png') center/cover no-repeat!important;border-color:rgba(244,207,120,.58)!important}
  .hero-logo img{width:120px!important;max-height:120px!important;border-radius:24px!important;padding:8px!important;margin:0 auto 12px!important;background:rgba(0,40,34,.28)!important}
  .hero h1,.hero-copy h1{font-size:36px!important;line-height:1.15!important;margin:10px 0!important;color:#fff!important}
  .hero h1 .mz{color:#f4cf78!important}.hero p,.hero-copy p{font-size:15px!important;line-height:1.8!important;color:#fff7e7!important}
  .quick-links{justify-content:center!important;gap:8px!important}.play-hero,.quick-links .btn{min-height:44px!important;border-radius:999px!important;white-space:nowrap!important}
  .section-head h2{font-size:28px!important}.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.card,.channel-card,.program-card,.player-card{border-radius:20px!important;padding:12px!important;margin-bottom:10px!important;background:linear-gradient(145deg,#fffaf0,#f8ecd6)!important;color:#073d34!important}.channel-card-inner{display:block!important;text-align:center!important}.channel-logo-card{width:78px!important;height:78px!important;margin:0 auto 8px!important}.card h2,.card h3{font-size:19px!important;line-height:1.35!important}.muted,.now-sub{font-size:12px!important;line-height:1.65!important;color:#49665f!important}.listen-row{display:block!important;text-align:center!important;margin-top:10px!important}.listen-row .btn{margin-top:8px!important;width:100%!important;min-width:0!important;padding:9px 8px!important}.live{font-size:10px!important;padding:5px 9px!important}.features{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.feature{padding:12px!important}
  audio{width:100%!important}.progress{height:10px!important;margin:18px auto!important}.btn,.primary,.danger,.success{min-height:42px;border-radius:14px!important}input,textarea,select{font-size:16px!important;min-height:44px}
  .mz-mobile-bar{position:fixed!important;left:10px!important;right:10px!important;bottom:10px!important;z-index:100!important;display:flex!important;justify-content:space-around!important;gap:7px!important;padding:8px!important;border-radius:22px!important;background:linear-gradient(135deg,rgba(0,48,41,.97),rgba(4,64,53,.95))!important;border:1px solid rgba(244,207,120,.55)!important;box-shadow:0 18px 45px rgba(0,0,0,.28)!important;backdrop-filter:blur(16px)!important;overflow-x:auto!important;scrollbar-width:none!important}.mz-mobile-bar::-webkit-scrollbar{display:none!important}.mz-mobile-bar a{flex:1 0 74px!important;text-align:center!important;color:#fff8e9!important;text-decoration:none!important;font-size:11px!important;padding:7px 5px!important;border-radius:15px!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(244,207,120,.26)!important}.mz-mobile-bar b{display:block!important;font-size:17px!important;margin-bottom:2px!important;color:#f4cf78!important}
}

/* Patch 2B fallback */


/* MZ Radio Patch 2B - force home mobile channels to 2 columns, loaded after all inline styles */
@media (max-width: 760px){
  #channels .grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    align-items:stretch!important;
  }
  #channels .channel-card{
    display:block!important;
    min-height:220px!important;
    padding:10px!important;
    border-radius:18px!important;
  }
  #channels .channel-card-inner{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:center!important;
    gap:7px!important;
    height:100%!important;
  }
  #channels .channel-logo-card{
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
    min-height:72px!important;
    margin:0 auto 4px!important;
    border-radius:50%!important;
    padding:1px!important;
  }
  #channels .channel-card .live{
    position:absolute!important;
    top:8px!important;
    left:8px!important;
    font-size:10px!important;
    padding:4px 7px!important;
    z-index:2!important;
  }
  #channels .channel-card h2{
    font-size:18px!important;
    line-height:1.15!important;
    margin:2px 0 3px!important;
  }
  #channels .channel-card .muted{
    font-size:12px!important;
    line-height:1.35!important;
  }
  #channels .listen-row{
    width:100%!important;
    margin-top:auto!important;
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
    align-items:center!important;
    justify-content:flex-end!important;
  }
  #channels .listen-row .small{
    width:100%!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    min-height:32px!important;
  }
  #channels .listen-row .btn.primary{
    min-width:0!important;
    width:100%!important;
    padding:9px 4px!important;
    font-size:13px!important;
    border-radius:13px!important;
  }
  #channels .section-head h2{
    font-size:26px!important;
  }
}
@media (max-width: 360px){
  #channels .grid{gap:8px!important}
  #channels .channel-card{padding:8px!important;min-height:210px!important}
  #channels .channel-logo-card{width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important}
  #channels .channel-card h2{font-size:16px!important}
  #channels .channel-card .muted{font-size:11px!important}
}


/* =========================================================
   MZ Radio Patch 14 Phase 3 - Mobile buttons refinement
   Scope: mobile bottom navigation + visitor badge only
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --mz-mobile-bottom-safe: env(safe-area-inset-bottom, 0px);
    --mz-bottom-nav-height: 58px;
  }

  body {
    padding-bottom: calc(var(--mz-bottom-nav-height) + var(--mz-mobile-bottom-safe) + 12px) !important;
  }

  .mobile-bottom-nav,
  .mz-mobile-bottom-nav,
  .bottom-mobile-nav,
  .mobile-nav,
  .fixed-mobile-nav,
  .mz-bottom-bar,
  nav.mobile-bottom,
  .mobile-fixed-tabs {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(var(--mz-mobile-bottom-safe) + 6px) !important;
    width: auto !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    height: var(--mz-bottom-nav-height) !important;
    min-height: var(--mz-bottom-nav-height) !important;
    padding: 6px 7px !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, rgba(8,78,62,.96), rgba(3,48,40,.98)) !important;
    border: 1px solid rgba(245, 204, 112, .32) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 99999 !important;
    overflow: hidden !important;
  }

  .mobile-bottom-nav a,
  .mz-mobile-bottom-nav a,
  .bottom-mobile-nav a,
  .mobile-nav a,
  .fixed-mobile-nav a,
  .mz-bottom-bar a,
  nav.mobile-bottom a,
  .mobile-fixed-tabs a,
  .mobile-bottom-nav button,
  .mz-mobile-bottom-nav button,
  .bottom-mobile-nav button,
  .mobile-nav button,
  .fixed-mobile-nav button,
  .mz-bottom-bar button,
  nav.mobile-bottom button,
  .mobile-fixed-tabs button {
    min-width: 0 !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px 3px !important;
    margin: 0 !important;
    border-radius: 13px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    color: #f7ebc4 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.055) !important;
    box-shadow: none !important;
  }

  .mobile-bottom-nav a.active,
  .mz-mobile-bottom-nav a.active,
  .bottom-mobile-nav a.active,
  .mobile-nav a.active,
  .fixed-mobile-nav a.active,
  .mz-bottom-bar a.active,
  nav.mobile-bottom a.active,
  .mobile-fixed-tabs a.active,
  .mobile-bottom-nav .active,
  .mz-mobile-bottom-nav .active,
  .bottom-mobile-nav .active,
  .mobile-nav .active,
  .fixed-mobile-nav .active,
  .mz-bottom-bar .active,
  nav.mobile-bottom .active,
  .mobile-fixed-tabs .active {
    background: linear-gradient(180deg, #f7d778, #d9a82f) !important;
    color: #063a31 !important;
    border-color: rgba(255,255,255,.28) !important;
    box-shadow: 0 5px 12px rgba(190, 138, 32, .24) !important;
  }

  .mobile-bottom-nav svg,
  .mz-mobile-bottom-nav svg,
  .bottom-mobile-nav svg,
  .mobile-nav svg,
  .fixed-mobile-nav svg,
  .mz-bottom-bar svg,
  nav.mobile-bottom svg,
  .mobile-fixed-tabs svg,
  .mobile-bottom-nav i,
  .mz-mobile-bottom-nav i,
  .bottom-mobile-nav i,
  .mobile-nav i,
  .fixed-mobile-nav i,
  .mz-bottom-bar i,
  nav.mobile-bottom i,
  .mobile-fixed-tabs i {
    width: 18px !important;
    height: 18px !important;
    font-size: 17px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .mobile-bottom-nav span,
  .mz-mobile-bottom-nav span,
  .bottom-mobile-nav span,
  .mobile-nav span,
  .fixed-mobile-nav span,
  .mz-bottom-bar span,
  nav.mobile-bottom span,
  .mobile-fixed-tabs span {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  /* Visitor badge: keep it away from the bottom bar */
  .visitor-badge,
  .visitors-badge,
  .live-visitors,
  .online-visitors,
  #visitorBadge,
  #visitorsBadge,
  .visitor-counter,
  .visitors-counter,
  .site-visitors,
  .mz-visitors-badge {
    position: fixed !important;
    left: 12px !important;
    right: auto !important;
    bottom: calc(var(--mz-bottom-nav-height) + var(--mz-mobile-bottom-safe) + 16px) !important;
    max-width: 180px !important;
    transform: none !important;
    z-index: 99998 !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
  }

  /* Add room at the end of pages so the last cards are not hidden */
  main,
  .main,
  .page,
  .page-wrap,
  .container,
  .content,
  .site-content {
    scroll-padding-bottom: calc(var(--mz-bottom-nav-height) + 32px) !important;
  }
}

@media (max-width: 390px) {
  .mobile-bottom-nav,
  .mz-mobile-bottom-nav,
  .bottom-mobile-nav,
  .mobile-nav,
  .fixed-mobile-nav,
  .mz-bottom-bar,
  nav.mobile-bottom,
  .mobile-fixed-tabs {
    left: 7px !important;
    right: 7px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 5px !important;
    gap: 4px !important;
  }

  .mobile-bottom-nav a,
  .mz-mobile-bottom-nav a,
  .bottom-mobile-nav a,
  .mobile-nav a,
  .fixed-mobile-nav a,
  .mz-bottom-bar a,
  nav.mobile-bottom a,
  .mobile-fixed-tabs a,
  .mobile-bottom-nav button,
  .mz-mobile-bottom-nav button,
  .bottom-mobile-nav button,
  .mobile-nav button,
  .fixed-mobile-nav button,
  .mz-bottom-bar button,
  nav.mobile-bottom button,
  .mobile-fixed-tabs button {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 9.8px !important;
  }

  .mobile-bottom-nav svg,
  .mz-mobile-bottom-nav svg,
  .bottom-mobile-nav svg,
  .mobile-nav svg,
  .fixed-mobile-nav svg,
  .mz-bottom-bar svg,
  nav.mobile-bottom svg,
  .mobile-fixed-tabs svg,
  .mobile-bottom-nav i,
  .mz-mobile-bottom-nav i,
  .bottom-mobile-nav i,
  .mobile-nav i,
  .fixed-mobile-nav i,
  .mz-bottom-bar i,
  nav.mobile-bottom i,
  .mobile-fixed-tabs i {
    width: 16px !important;
    height: 16px !important;
    font-size: 15px !important;
  }

  .visitor-badge,
  .visitors-badge,
  .live-visitors,
  .online-visitors,
  #visitorBadge,
  #visitorsBadge,
  .visitor-counter,
  .visitors-counter,
  .site-visitors,
  .mz-visitors-badge {
    bottom: calc(54px + var(--mz-mobile-bottom-safe) + 12px) !important;
  }
}
/* =========================================================
   MZ Radio PATCH 14 Phase 3 FIX
   Mobile header + bottom buttons final positioning
   ========================================================= */
@media (max-width: 780px){
  html, body { overflow-x: hidden !important; }

  body{
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Hide the desktop/header button row on mobile. Keep the hamburger + drawer only. */
  header.top nav.nav,
  .top nav.nav,
  header .nav,
  .site-header .nav,
  .desktop-nav,
  .main-nav:not(.mz-mobile-drawer-links-v4),
  .navbar:not(.mz-mobile-bottom-v4):not(.mz-mobile-drawer-links-v4),
  .top-menu,
  .header-actions{
    display: none !important;
    visibility: hidden !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  /* Compact mobile top area. */
  header.top,
  .top,
  .site-header,
  .main-header{
    min-height: 64px !important;
    height: 64px !important;
    padding: 8px 70px 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .brand,
  .site-brand,
  .logo-wrap{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .brand img,
  .site-brand img,
  .logo-wrap img{
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: cover !important;
    border-radius: 13px !important;
  }

  .brand span,
  .site-brand span,
  .logo-wrap span{
    font-size: 16px !important;
    line-height: 1.05 !important;
    color: #f7d778 !important;
    max-width: 120px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Hamburger: fixed under status bar, not over buttons. */
  .mz-mobile-menu-btn-v4,
  .mobile-menu-toggle,
  .hamburger,
  .menu-toggle{
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    left: 12px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    z-index: 100050 !important;
    box-shadow: 0 9px 22px rgba(0,0,0,.22) !important;
  }

  .mz-mobile-menu-btn-v4 span{
    width: 23px !important;
    height: 3px !important;
  }

  /* Bottom navigation: keep it above Android/iPhone system buttons, never under them. */
  .mz-mobile-bottom-v4,
  .mz-mobile-bar,
  .mobile-bottom-nav,
  .bottom-mobile-nav,
  .fixed-mobile-nav,
  .mz-bottom-bar,
  nav.mobile-bottom,
  .mobile-fixed-tabs{
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
    width: auto !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 5px 6px !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    align-items: center !important;
    background: linear-gradient(180deg, rgba(6,82,66,.97), rgba(3,50,41,.99)) !important;
    border: 1px solid rgba(247, 215, 120, .42) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.09) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 100040 !important;
    overflow: hidden !important;
  }

  .mz-mobile-bottom-v4 a,
  .mz-mobile-bar a,
  .mobile-bottom-nav a,
  .bottom-mobile-nav a,
  .fixed-mobile-nav a,
  .mz-bottom-bar a,
  nav.mobile-bottom a,
  .mobile-fixed-tabs a{
    height: 47px !important;
    min-height: 47px !important;
    padding: 4px 3px !important;
    border-radius: 13px !important;
    gap: 1px !important;
    font-size: 10.5px !important;
    line-height: 1.12 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    color: #f8edcb !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.055) !important;
  }

  .mz-mobile-bottom-v4 a b,
  .mz-mobile-bar a b,
  .mobile-bottom-nav a b,
  .bottom-mobile-nav a b,
  .fixed-mobile-nav a b,
  .mz-bottom-bar a b,
  nav.mobile-bottom a b,
  .mobile-fixed-tabs a b{
    font-size: 17px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  .mz-mobile-bottom-v4 a span,
  .mz-mobile-bar a span,
  .mobile-bottom-nav a span,
  .bottom-mobile-nav a span,
  .fixed-mobile-nav a span,
  .mz-bottom-bar a span,
  nav.mobile-bottom a span,
  .mobile-fixed-tabs a span{
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  .mz-mobile-bottom-v4 a.active,
  .mz-mobile-bar a.active,
  .mobile-bottom-nav a.active,
  .bottom-mobile-nav a.active,
  .fixed-mobile-nav a.active,
  .mz-bottom-bar a.active,
  nav.mobile-bottom a.active,
  .mobile-fixed-tabs a.active{
    background: linear-gradient(180deg, #f8d979, #d8aa38) !important;
    color: #073b31 !important;
    border-color: rgba(255,255,255,.32) !important;
    box-shadow: 0 5px 13px rgba(171,121,25,.22) !important;
  }

  .mz-mobile-bottom-v4 a.active b,
  .mz-mobile-bar a.active b,
  .mobile-bottom-nav a.active b,
  .bottom-mobile-nav a.active b,
  .fixed-mobile-nav a.active b,
  .mz-bottom-bar a.active b,
  nav.mobile-bottom a.active b,
  .mobile-fixed-tabs a.active b{
    color: #073b31 !important;
  }

  /* Visitor badge: keep it above the bottom buttons and away from cards. */
  .visitor-badge,
  .visitors-badge,
  .live-visitors,
  .online-visitors,
  #visitorBadge,
  #visitorsBadge,
  .visitor-counter,
  .visitors-counter,
  .site-visitors,
  .mz-visitors-badge{
    position: fixed !important;
    left: 12px !important;
    right: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important;
    z-index: 100030 !important;
    max-width: 170px !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    transform: none !important;
  }

  /* Prevent content from being hidden behind the fixed bar. */
  main,
  .container,
  .page,
  .content,
  .site-content,
  #channels,
  .channels-section,
  .programs-section{
    padding-bottom: 92px !important;
    scroll-padding-bottom: 110px !important;
  }
}

@media (max-width: 370px){
  .mz-mobile-bottom-v4,
  .mz-mobile-bar,
  .mobile-bottom-nav,
  .bottom-mobile-nav,
  .fixed-mobile-nav,
  .mz-bottom-bar,
  nav.mobile-bottom,
  .mobile-fixed-tabs{
    left: 8px !important;
    right: 8px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 16px !important;
    gap: 4px !important;
  }
  .mz-mobile-bottom-v4 a,
  .mz-mobile-bar a,
  .mobile-bottom-nav a,
  .bottom-mobile-nav a,
  .fixed-mobile-nav a,
  .mz-bottom-bar a,
  nav.mobile-bottom a,
  .mobile-fixed-tabs a{
    height: 43px !important;
    font-size: 9.8px !important;
  }
}
/* MZ Radio Patch 35E - Mobile cards containment fix */
@media (max-width: 760px){
  html, body{max-width:100% !important; overflow-x:hidden !important;}
  main, section, .container, .page, .content, .site-content{max-width:100% !important; overflow-x:hidden !important; box-sizing:border-box !important;}
  .grid,
  .cards-grid,
  .programs-grid,
  .channels-grid,
  #channels .grid,
  #programs .grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
    width:100% !important;
    max-width:100% !important;
    padding-inline:10px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }
  .card,
  .channel-card,
  .program-card,
  #channels .card,
  #programs .card{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    padding:14px 10px !important;
    border-radius:18px !important;
  }
  .channel-card-inner,
  .rec-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:8px !important;
  }
  .channel-logo-card,
  .program-img,
  .card img{
    max-width:100% !important;
    object-fit:cover !important;
  }
  .channel-logo-card{width:70px !important;height:70px !important;border-radius:18px !important;margin:0 auto 8px !important;}
  .program-img{height:110px !important;border-radius:16px !important;}
  .card h2,.card h3,.channel-card h2,.program-card h3{
    font-size:18px !important;line-height:1.55 !important;margin:8px 0 !important;word-break:break-word !important;
  }
  .card p,.card .muted{
    font-size:13px !important;line-height:1.75 !important;word-break:break-word !important;
  }
  .listen-row{display:flex !important;flex-direction:column !important;gap:8px !important;align-items:center !important;}
  .section-head{padding-inline:14px !important;box-sizing:border-box !important;}
}
@media (max-width: 430px){
  .grid,
  .cards-grid,
  .programs-grid,
  .channels-grid,
  #channels .grid,
  #programs .grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
    padding-inline:8px !important;
  }
  .card,
  .channel-card,
  .program-card,
  #channels .card,
  #programs .card{padding:12px 8px !important;}
  .card h2,.card h3,.channel-card h2,.program-card h3{font-size:16px !important;}
  .channel-logo-card{width:62px !important;height:62px !important;}
  .program-img{height:96px !important;}
}
@media (max-width: 340px){
  .grid,
  .cards-grid,
  .programs-grid,
  .channels-grid,
  #channels .grid,
  #programs .grid{grid-template-columns:1fr !important;}
}