/* Local mobile media fit pass: keep product/proof assets readable on portrait screens. */
@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  .mobile-media-contain {
    object-fit: contain !important;
    object-position: center !important;
  }

  .mobile-media-cover {
    object-fit: cover !important;
  }

  .mobile-media-focus-right {
    object-position: 70% center !important;
  }

  .mobile-media-focus-center {
    object-position: center !important;
  }

  html body .whatsapp-float,
  html body .yao-chat {
    top: 50dvh !important;
    right: -10px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 90 !important;
  }

  html body .whatsapp-float {
    transform: translateY(-50px) !important;
  }

  html body .whatsapp-float:hover,
  html body .whatsapp-float:focus,
  html body .whatsapp-float:active {
    transform: translateY(-50px) !important;
  }

  html body .yao-chat {
    transform: translateY(0) !important;
  }

  html body .yao-chat-toggle:hover,
  html body .yao-chat-toggle:focus,
  html body .yao-chat-toggle:active {
    transform: none !important;
  }

  html body .whatsapp-float,
  html body .yao-chat-toggle {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
  }

  html body .yao-chat-toggle {
    transform: none !important;
  }

  html body .whatsapp-float strong,
  html body .yao-chat-toggle strong {
    display: none !important;
  }

  html body .whatsapp-float-icon {
    width: 23px !important;
    height: 23px !important;
  }

  html body .yao-chat-toggle span {
    width: 21px !important;
    height: 21px !important;
  }

  html body .yao-chat-panel {
    right: 0 !important;
    top: 52px !important;
    bottom: auto !important;
    width: min(328px, calc(100vw - 24px)) !important;
    max-height: min(560px, calc(100dvh - 96px)) !important;
  }

  html body.home-page .home-system-visual {
    height: clamp(230px, 72vw, 300px) !important;
    padding: 10px !important;
    background: #050505 !important;
    box-sizing: border-box !important;
  }

  html body.home-page .home-system-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    border-radius: 16px !important;
  }

  html body.product-page .product-two-generation-hero .product-visual,
  html body.product-page .product-hero.product-hero-combined .product-visual {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    padding: 12px !important;
    background: #f8f8f6 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body.product-page .product-two-generation-hero .product-visual img,
  html body.product-page .product-hero.product-hero-combined .product-visual img,
  html body.product-page .product-system-suite .product-compare-visuals img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  html body.media-page .media-hero-visual {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    gap: 10px !important;
    padding: 12px !important;
    background: #f8f8f6 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  html body.media-page .media-hero-visual img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 14px !important;
  }

  html body.media-page .media-kit-card,
  html body.media-page .media-proof-card,
  html body.media-page .media-proof-card:nth-of-type(2),
  html body.media-page .media-proof-card:nth-of-type(3) {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 10px 0 0 !important;
  }

  html body .about-visual-hero .about-hero-bg {
    object-fit: cover !important;
    object-position: 68% center !important;
  }

  html body .about-image-panel {
    min-height: auto !important;
    overflow: hidden !important;
  }

  html body .about-image-panel::before {
    background-size: cover !important;
    background-position: 58% center !important;
  }

  html body .contact-hero {
    background-position: 62% center, 62% center, 66% center !important;
    background-size: auto, auto, auto 100% !important;
  }

  html body main > .case-intro-panel.case-video-hero,
  html body .case-intro-panel.case-video-hero {
    min-height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 28px !important;
    overflow: hidden !important;
  }

  html body .case-intro-panel.case-video-hero .case-intro-video-layer {
    height: min(1040px, calc(100dvh + 360px)) !important;
    min-height: 920px !important;
    max-height: 1080px !important;
  }

  html body .case-intro-panel.case-video-hero .case-intro-video-layer video {
    object-fit: cover !important;
    object-position: center top !important;
  }

  html body .case-intro-panel.case-video-hero > .split-head {
    min-height: auto !important;
    margin-bottom: 18px !important;
    padding-top: clamp(220px, 64vw, 286px) !important;
  }

  html body .case-intro-panel.case-video-hero .case-summary-strip {
    gap: 10px !important;
    margin-bottom: 24px !important;
    overflow: visible !important;
  }

  html body .case-intro-panel.case-video-hero .case-summary-strip > div {
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  html body .case-intro-panel.case-video-hero .case-summary-strip strong {
    margin-bottom: 7px !important;
    line-height: 1.06 !important;
  }

  html body .case-intro-panel.case-video-hero .case-summary-strip span {
    display: block !important;
    max-width: 100% !important;
    line-height: 1.48 !important;
  }

  html body .proof-story-grid.compact-rail .proof-story-card,
  html body .proof-story-grid.compact-rail .proof-story-card.large,
  html body .proof-story-grid.compact-rail[data-auto-rail] .proof-story-card,
  html body .proof-story-grid.compact-rail[data-auto-rail] .proof-story-card.large {
    flex-basis: min(276px, 78vw) !important;
    min-height: 220px !important;
    height: 220px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  html body .proof-story-grid.compact-rail .proof-story-card img,
  html body .proof-story-grid.compact-rail .proof-story-card.large img,
  html body .proof-story-grid.compact-rail[data-auto-rail] .proof-story-card img,
  html body .proof-story-grid.compact-rail[data-auto-rail] .proof-story-card.large img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 18px !important;
  }

  html body .proof-story-grid.compact-rail .proof-story-card div,
  html body .proof-story-grid.compact-rail[data-auto-rail] .proof-story-card div {
    right: 16px !important;
    bottom: 16px !important;
    left: 16px !important;
    padding: 0 !important;
  }

  html body .proof-story-grid.compact-rail .proof-story-card h3,
  html body .proof-story-grid.compact-rail[data-auto-rail] .proof-story-card h3 {
    font-size: 17px !important;
    line-height: 1.18 !important;
  }

  html body.case-studies-page .whatsapp-float,
  html body.case-studies-page .yao-chat {
    top: 62dvh !important;
    right: -34px !important;
  }

  html body.product-page .whatsapp-float,
  html body.media-page .whatsapp-float,
  html body.cooking-methods-page .whatsapp-float,
  html body.product-page .yao-chat,
  html body.media-page .yao-chat,
  html body.cooking-methods-page .yao-chat {
    top: 50dvh !important;
    right: -10px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 90 !important;
  }

  html body.product-page .whatsapp-float,
  html body.media-page .whatsapp-float,
  html body.cooking-methods-page .whatsapp-float {
    transform: translateY(-50px) !important;
  }

  html body.product-page .whatsapp-float:hover,
  html body.product-page .whatsapp-float:focus,
  html body.product-page .whatsapp-float:active,
  html body.media-page .whatsapp-float:hover,
  html body.media-page .whatsapp-float:focus,
  html body.media-page .whatsapp-float:active,
  html body.cooking-methods-page .whatsapp-float:hover,
  html body.cooking-methods-page .whatsapp-float:focus,
  html body.cooking-methods-page .whatsapp-float:active {
    transform: translateY(-50px) !important;
  }

  html body.product-page .yao-chat,
  html body.media-page .yao-chat,
  html body.cooking-methods-page .yao-chat {
    transform: translateY(0) !important;
  }

  html body.product-page .whatsapp-float,
  html body.product-page .yao-chat-toggle,
  html body.media-page .whatsapp-float,
  html body.media-page .yao-chat-toggle,
  html body.cooking-methods-page .whatsapp-float,
  html body.cooking-methods-page .yao-chat-toggle {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
  }

  html body.product-page .whatsapp-float-icon,
  html body.media-page .whatsapp-float-icon,
  html body.cooking-methods-page .whatsapp-float-icon {
    width: 23px !important;
    height: 23px !important;
  }

  html body.product-page .yao-chat-toggle span,
  html body.media-page .yao-chat-toggle span,
  html body.cooking-methods-page .yao-chat-toggle span {
    width: 21px !important;
    height: 21px !important;
  }
}

@media (max-width: 360px) {
  html body .case-intro-panel.case-video-hero > .split-head {
    padding-top: 210px !important;
  }

  html body .proof-story-grid.compact-rail .proof-story-card,
  html body .proof-story-grid.compact-rail .proof-story-card.large,
  html body .proof-story-grid.compact-rail[data-auto-rail] .proof-story-card,
  html body .proof-story-grid.compact-rail[data-auto-rail] .proof-story-card.large,
  html body .proof-story-grid.compact-rail .proof-story-card img,
  html body .proof-story-grid.compact-rail .proof-story-card.large img,
  html body .proof-story-grid.compact-rail[data-auto-rail] .proof-story-card img,
  html body .proof-story-grid.compact-rail[data-auto-rail] .proof-story-card.large img {
    height: 210px !important;
    min-height: 210px !important;
  }
}