

#lunosDrawer, #lunosDrawerBg { display: none; }
.mobile-nav { display: none !important; }

@media (max-width: 1024px) {

  html body header {
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
    border-bottom: 0 !important;
  }
  html body header .header-inner {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "tools tools" "logo burger" !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 16px 10px !important;
    gap: 2px 0 !important;
  }
  html body header nav { display: none !important; }

  html body header .header-right {
    grid-area: tools !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    font-size: 14px !important;
  }
  html body header .header-right .header-icon,
  html body header .header-right .header-icon svg { width: 20px !important; height: 20px !important; }
  html body header .lang-switcher { align-self: center !important; padding: 0 !important; }
  html body header .lang-current { font-size: 14px !important; font-weight: 700 !important; }
  html body header .header-links {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 14px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  html body header .header-links a { color: #000 !important; }

  html body header .logo {
    grid-area: logo !important;
    margin: 0 !important;
    justify-self: start !important;
  }
  html body header .logo-img { height: 42px !important; width: auto !important; }

  html body header .hamburger {
    grid-area: burger !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 8px 0 8px 12px !important;
    cursor: pointer !important;
    background: none !important;
  }
  html body header .hamburger span {
    display: block !important;
    width: 28px !important;
    height: 2.5px !important;
    border-radius: 0 !important;
    background: #0C559B !important;
    margin: 0 !important;
  }

  #lunosDrawerBg {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 9998;
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }
  #lunosDrawer {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 90%; max-width: 440px;
    background: #fff;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    font-family: 'Source Sans 3', Arial, sans-serif;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.lunos-menu-open #lunosDrawer { transform: translateX(0); }
  body.lunos-menu-open #lunosDrawerBg { opacity: 1; visibility: visible; }
  body.lunos-menu-open { overflow: hidden !important; }

  .ld-top { display: flex; justify-content: flex-end; padding: 20px 20px 18px; }
  .ld-close {
    background: none; border: 0; padding: 6px; cursor: pointer; color: #0C559B;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  }
  .ld-close svg { width: 32px; height: 32px; stroke: currentColor; stroke-width: 1.6; fill: none; }

  .ld-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e3e3e3; }
  .ld-item { border-bottom: 1px solid #e3e3e3; }
  .ld-row { display: flex; align-items: stretch; }
  .ld-row > a {
    flex: 1; display: block;
    padding: 18px 20px 18px 24px;
    font-size: 21px; color: #1a1a1a !important; text-decoration: none;
  }
  .ld-toggle {
    width: 68px; flex-shrink: 0;
    border: 0; border-left: 1px solid #e3e3e3; background: none;
    color: #0C559B; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .ld-toggle svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; }
  .ld-toggle .ld-v { transition: opacity .15s; }
  .ld-item.open .ld-toggle .ld-v { opacity: 0; }

  .ld-sub { list-style: none; margin: 0; padding: 0; display: none; }
  .ld-item.open .ld-sub { display: block; }
  .ld-sub li { border-top: 1px solid #ececec; }
  .ld-sub a {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 20px 13px 26px;
    font-size: 17px; color: #555 !important; text-decoration: none;
  }
  .ld-sub a::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: #47C969; flex-shrink: 0;
  }
  .ld-row > a:active, .ld-sub a:active { background: #D3F4DB; }

  html body .sidebar-fixed {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 45% !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    width: auto !important;
    gap: 3px !important;
    z-index: 800 !important;
  }
  html body .sidebar-fixed .sidebar-btn {
    width: 68px !important;
    min-height: 0 !important;
    padding: 10px 4px !important;
    gap: 5px !important;
    flex-direction: column !important;
    flex: none !important;
  }
  html body .sidebar-fixed .sidebar-btn svg { width: 25px !important; height: 25px !important; }
  html body .sidebar-fixed .sidebar-btn span { font-size: 11.5px !important; line-height: 1.15 !important; }
}

@media (max-width: 380px) {
  html body header .header-right,
  html body header .header-links,
  html body header .lang-current { font-size: 12.5px !important; gap: 8px !important; }
  html body header .logo-img { height: 38px !important; }
}

@media (max-width: 768px) {
  html body .prod-hero-outer .prod-hero-wrap {
    width: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }
  html body .prod-hero-outer .prod-hero-left {
    padding: 34px 20px 30px !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
  }
  html body .prod-hero-outer .prod-hero-eyebrow { font-size: 34px !important; margin: 0 0 4px !important; }
  html body .prod-hero-outer .prod-hero-title { font-size: 26px !important; line-height: 1.2 !important; margin: 0 0 16px !important; }
  html body .prod-hero-outer .prod-hero-tagline { font-size: 16px !important; margin: 0 0 22px !important; }
  html body .prod-hero-outer .prod-hero-service-label { font-size: 16px !important; margin: 0 0 10px !important; }
  html body .prod-hero-outer .prod-hero-services { gap: 6px !important; }
  html body .prod-hero-outer .prod-hero-service-btn { font-size: 16px !important; padding: 4px 12px !important; }

  html body .prod-hero-outer .prod-hero-right {
    height: 270px !important;
    min-height: 0 !important;
  }
  html body .prod-hero-outer #hero-panel-image.active {
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }
  html body .prod-hero-outer .prod-hero-right:has(.hero-panel.active:not(#hero-panel-image)) {
    height: auto !important;
  }
  html body .prod-hero-outer .prod-hero-right .hero-panel.active:not(#hero-panel-image) {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body .prod-hero-outer .prod-hero-right .hero-panel.active:not(#hero-panel-image) .hero-panel-content {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 24px 20px !important;
  }
  html body .prod-hero-outer #hero-panel-image img {
    position: absolute !important;
    top: 12px !important; left: 12px !important; right: auto !important; bottom: auto !important;
    width: calc(100% - 24px) !important;
    height: calc(100% - 24px) !important;
    max-width: none !important; max-height: none !important;
    min-width: 0 !important; min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  html body .prod-hero-outer .btn-360 { transform: scale(.75); transform-origin: bottom right; z-index: 2; }
}

html body header .header-icon, #searchOverlay { display: none !important; }

@media (max-width: 1024px) {
  html body header .header-inner { position: static !important; }
  html body header .lang-switcher { position: static !important; }
  html body header .lang-dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 12px !important;
    left: auto !important;
    width: min(270px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    padding-top: 6px !important;
    z-index: 1000 !important;
  }
  html body header .lang-dropdown a { font-size: 15px !important; padding: 11px 14px !important; }
}

@media (max-width: 1024px) {
  html body .cf-top, html body .cf-layout {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html body .cf-layout { grid-template-columns: minmax(0, 1fr) !important; }
  html body .cf-main, html body .cf-side { min-width: 0 !important; max-width: 100% !important; }
  html body .cf-main img, html body .cf-main table { max-width: 100% !important; }
  html body .cf-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100% !important; }
  html body .cf-table { min-width: 0 !important; width: 100% !important; font-size: 12.5px !important; table-layout: fixed !important; }
  html body .cf-table th, html body .cf-table td { overflow-wrap: anywhere !important; hyphens: auto !important; }
  html body .cf-table th:first-child, html body .cf-table td:first-child { width: 31% !important; }
  html body .cf-table th { padding: 10px 8px !important; font-size: 10.5px !important; letter-spacing: 0 !important; }
  html body .cf-table td { padding: 10px 8px !important; }

  html body .lx-cols { grid-template-columns: minmax(0, 1fr) !important; }
  html body .lx-main, html body .lx-side, html body .lx-wrap { min-width: 0 !important; max-width: 100% !important; }
  html body .lx-side { position: static !important; }
  html body .lx-main p, html body .lx-main li { text-align: left !important; }
}
@media (max-width: 768px) {
  html, body { overflow-x: clip !important; max-width: 100vw !important; }
  body { position: relative !important; }

  html body main table, html body section table, html body .cn-wrap table {
    max-width: 100% !important;
  }
}

@media (max-width: 1024px) {
  html body .bc-nav, html body .breadcrumb { display: block !important; padding: 14px 16px !important; }
  html body .bc-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 768px) {
  html body .blue-block-cards { width: 100% !important; justify-self: stretch !important; gap: 16px !important; }
  html body .blue-tile { aspect-ratio: 4 / 3.4 !important; }
  html body .blue-tile-label { font-size: 22px !important; }
  html body .kompetenz-card img { height: auto !important; aspect-ratio: 4 / 3 !important; }
}

@media(max-width:768px){.hero.hero-sr{height:auto !important;min-height:0 !important}.hero.hero-sr .hero-bg{position:relative !important;aspect-ratio:1440/640;background:#f1efeb url(/wp-content/themes/lunos-italia/assets/media/news-smart-remote-hero.webp) 30% center/cover no-repeat !important}.hero.hero-sr .hero-bg::after{display:none !important}.hero.hero-sr .hero-content{position:static !important;top:auto !important;bottom:auto !important;left:auto !important;right:auto !important;transform:none !important;max-width:none !important;padding:24px 16px 4px !important}}

@media (max-width: 768px) {
  html body .referenze-carousel-wrap { padding: 0 !important; }
  html body .referenze-grid-outer { overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 !important; width: 100% !important; }
  html body .referenze-grid-outer::-webkit-scrollbar { display: none; }
  html body .referenze-grid { transform: none !important; transition: none !important; gap: 16px !important; }
  html body .referenza-card { flex: 0 0 85% !important; padding: 0 !important; scroll-snap-align: start !important; }
  html body .referenza-card img { height: auto !important; aspect-ratio: 340 / 400 !important; }
  html body .ref-arrow { display: none !important; }
}

@media (max-width: 480px) {
  html body .blue-block-cards { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  html body .statement-section { padding: 44px 16px 52px !important; }
  html body .statement-inner { font-size: 32px !important; line-height: 1.22 !important; }
}
@media (max-width: 400px) {
  html body .statement-inner { font-size: 29px !important; }
}
