/* v131: Mobile-only layout fixes.
   Desktop styles are untouched. This file only applies under 820px. */

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

  body{
    background:#f3f5f2!important;
  }

  /* Top navigation: keep it hidden until hamburger is opened.
     When opened, make it a real white dropdown panel so it will not wash over the page content. */
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:3000!important;
    min-height:74px!important;
    padding:14px 18px!important;
    background:rgba(255,255,255,.96)!important;
    border-bottom:1px solid rgba(17,24,39,.08)!important;
    box-shadow:0 8px 26px rgba(17,24,39,.08)!important;
    backdrop-filter:blur(16px)!important;
  }

  .site-header .brand,
  .site-header > .brand{
    font-size:clamp(25px,7vw,34px)!important;
    line-height:1.15!important;
    color:#111827!important;
    white-space:nowrap!important;
    max-width:calc(100vw - 118px)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .nav-toggle{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:56px!important;
    height:56px!important;
    border-radius:18px!important;
    border:1px solid rgba(17,24,39,.10)!important;
    background:rgba(255,255,255,.94)!important;
    color:#172033!important;
    box-shadow:0 12px 28px rgba(17,24,39,.10)!important;
    font-size:28px!important;
    line-height:1!important;
  }

  .top-nav{
    display:none!important;
  }

  body.nav-open .top-nav{
    display:flex!important;
    position:absolute!important;
    top:calc(100% + 8px)!important;
    left:14px!important;
    right:14px!important;
    z-index:3100!important;
    flex-direction:column!important;
    gap:4px!important;
    padding:12px!important;
    max-height:calc(100dvh - 104px)!important;
    overflow:auto!important;
    border-radius:22px!important;
    border:1px solid rgba(17,24,39,.10)!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 24px 70px rgba(17,24,39,.22)!important;
    backdrop-filter:blur(18px)!important;
  }

  body.nav-open .top-nav a{
    display:block!important;
    width:100%!important;
    padding:14px 16px!important;
    border-radius:16px!important;
    color:#172033!important;
    background:transparent!important;
    font-size:18px!important;
    font-weight:850!important;
    line-height:1.25!important;
    text-align:left!important;
    border-bottom:0!important;
  }

  body.nav-open .top-nav a:hover,
  body.nav-open .top-nav a:active{
    background:linear-gradient(135deg,rgba(255,63,155,.12),rgba(34,211,238,.11))!important;
    color:#0f172a!important;
  }

  main{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  /* Homepage hero: keep the fixed design, but make it readable and not blocked on mobile. */
  .brand-v4-hero{
    min-height:auto!important;
    padding:48px 18px 42px!important;
    overflow:hidden!important;
  }

  .brand-v4-hero-inner,
  .brand-v4-hero .brand-v4-hero-inner{
    width:100%!important;
    max-width:100%!important;
    display:block!important;
    padding:0!important;
  }

  .brand-v4-hero h1{
    font-size:clamp(36px,11vw,58px)!important;
    line-height:1.12!important;
    letter-spacing:.02em!important;
  }

  .brand-v4-hero p,
  .brand-v4-hero-copy p{
    font-size:17px!important;
    line-height:1.9!important;
  }

  .brand-v4-device-row,
  .brand-v4-hero-collage,
  .brand-v4-hero-visual{
    max-width:100%!important;
    overflow:hidden!important;
  }

  /* Generic section spacing on mobile. */
  .brand-v4-catalog,
  .brand-v4-scenarios,
  .brand-v4-featured,
  .brand-v4-trust,
  .brand-v4-cta,
  .footer-v62,
  .section{
    padding-left:18px!important;
    padding-right:18px!important;
  }

  /* Category pages: convert desktop left sidebar into a compact horizontal strip.
     It stays inside the page flow and will not cover the catalog or hero. */
  .cat-v4-hero{
    padding:42px 18px 38px!important;
    display:block!important;
  }

  .cat-v4-hero h1{
    font-size:clamp(38px,12vw,60px)!important;
    line-height:1.08!important;
  }

  .cat-v4-hero p{
    font-size:16px!important;
    line-height:1.75!important;
  }

  .cat-v4-search{
    margin-top:20px!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:8px!important;
  }

  .cat-v4-search input{
    min-width:0!important;
    height:46px!important;
  }

  .cat-v4-search .btn{
    height:46px!important;
    padding:0 16px!important;
  }

  .hl3c-v115-catalog-page,
  body.hl3c-v117-sidebar-collapsed .hl3c-v115-catalog-page{
    display:block!important;
    grid-template-columns:1fr!important;
    padding:16px 14px 46px!important;
    background:
      linear-gradient(180deg,rgba(219,232,225,.72) 0 174px,rgba(248,245,237,0) 174px 100%),
      radial-gradient(circle at 8% 5%,rgba(105,212,200,.13),transparent 28%)!important;
  }

  .hl3c-v115-sidebar,
  body.hl3c-v117-sidebar-collapsed .hl3c-v115-sidebar{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 16px!important;
    padding:12px!important;
    border-radius:20px!important;
    border:1px solid rgba(75,104,95,.18)!important;
    background:linear-gradient(180deg,rgba(226,237,232,.98),rgba(214,229,222,.96))!important;
    box-shadow:0 12px 28px rgba(55,76,70,.10)!important;
  }

  .hl3c-v115-sidebar-head,
  body.hl3c-v117-sidebar-collapsed .hl3c-v115-sidebar-head{
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    padding:0 2px 8px!important;
    margin:0 0 8px!important;
    border-bottom:1px solid rgba(67,94,86,.15)!important;
  }

  .hl3c-v115-sidebar h2,
  body.hl3c-v117-sidebar-collapsed .hl3c-v115-sidebar h2{
    display:block!important;
    font-size:18px!important;
    color:#23372f!important;
  }

  .hl3c-v117-collapse-btn{
    display:none!important;
  }

  .hl3c-v115-side-list,
  body.hl3c-v117-sidebar-collapsed .hl3c-v115-side-list{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    padding:2px 2px 8px!important;
    scrollbar-width:thin!important;
  }

  .hl3c-v115-side-list a,
  body.hl3c-v117-sidebar-collapsed .hl3c-v115-side-list a{
    display:inline-flex!important;
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    min-height:38px!important;
    padding:8px 13px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.68)!important;
    border:1px solid rgba(67,94,86,.16)!important;
    box-shadow:none!important;
    transform:none!important;
  }

  .hl3c-v115-side-list a::before{
    display:none!important;
  }

  .hl3c-v115-side-list a.active{
    background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(229,247,243,.92))!important;
    border-color:rgba(20,184,166,.38)!important;
    box-shadow:0 6px 16px rgba(47,85,78,.10)!important;
  }

  .hl3c-v115-side-list strong,
  body.hl3c-v117-sidebar-collapsed .hl3c-v115-side-list strong{
    display:block!important;
    font-size:16px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }

  .hl3c-v115-results{
    width:100%!important;
    max-width:100%!important;
  }

  .hl3c-v115-bar{
    border-radius:20px!important;
    padding:18px!important;
    display:block!important;
  }

  .hl3c-v115-bar h2{
    font-size:26px!important;
    line-height:1.22!important;
  }

  .hl3c-v115-product-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
  }

  .hl3c-v115-product-card{
    border-radius:22px!important;
    overflow:hidden!important;
  }

  .hl3c-v115-product-img{
    height:220px!important;
  }

  .hl3c-v128-inline-product{
    padding:18px!important;
    border-radius:22px!important;
  }

  /* Product pages: keep the restored desktop frame, stack content on mobile. */
  .product-v11-page,
  .product-v11-hero,
  .product-v11-content{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  .product-v11-hero-inner{
    display:block!important;
    width:100%!important;
    padding:24px 18px!important;
  }

  .product-v11-title{
    font-size:clamp(32px,10vw,52px)!important;
    line-height:1.12!important;
  }

  .product-v11-visual{
    margin-top:22px!important;
  }

  .product-v11-photo-card img,
  .product-v11-photo-card{
    max-width:100%!important;
  }

  .product-v15-guide-grid,
  .product-v14-related-products-grid{
    grid-template-columns:1fr!important;
  }

  /* General content/search pages */
  .page-body-v2,
  .product-detail-v2,
  .cases-v1-wrap{
    display:block!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }

  .cat-v3-product-grid,
  .product-grid,
  .category-grid,
  .case-grid{
    grid-template-columns:1fr!important;
  }
}

@media (max-width: 420px){
  .site-header{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .site-header .brand,
  .site-header > .brand{
    font-size:28px!important;
  }
  .nav-toggle{
    width:52px!important;
    height:52px!important;
  }
  .brand-v4-hero h1,
  .cat-v4-hero h1{
    font-size:40px!important;
  }
  .hl3c-v115-side-list strong{
    font-size:15px!important;
  }
  .hl3c-v115-product-img{
    height:205px!important;
  }
}