/* DPRO GREEN KASUYA / MOBILE CROSS-BROWSER FIT R3 / 2026-09-28
   Purpose:
   - Keep the current iPhone layout.
   - Prevent Android / LINE in-app browser right-edge clipping.
   - Retain R2 mobile-menu / fixed-CTA overlap fix.
   - No desktop design change. */

/* Browser text scaling can differ between Safari and Android WebView/Chromium. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 1120px) {
  .menu-panel {
    z-index: 125 !important;
    max-height: calc(100dvh - 126px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .menu-panel.is-open {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

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

  /* Prevent grid/flex min-content width from forcing the page wider than viewport. */
  :where(
    main,
    section,
    header,
    footer,
    .wrap,
    .container,
    .site-head__inner,
    .header-inner,
    .hero__inner,
    .hero-grid,
    .story__grid,
    .maintenance__grid,
    .price__grid,
    .manager__grid,
    .shop-showcase__inner,
    .photo-consult__copy,
    .dpro-flow,
    .consult-input-guide,
    .consult-input-guide__grid,
    .start-flow__grid,
    .rental-compare,
    .rental-compare__row,
    .product-examples,
    .product-examples__list,
    .shop-catalog-grid,
    .maintenance-photo-strip,
    .maintenance-visuals,
    .local-service-visuals,
    .case-plan-grid,
    .cta__inner,
    .final-cta__inner,
    .section-head
  ) {
    min-width: 0;
    max-width: 100%;
  }

  :where(
    .hero__inner,
    .hero-grid,
    .story__grid,
    .maintenance__grid,
    .price__grid,
    .manager__grid,
    .shop-showcase__inner,
    .consult-input-guide__grid,
    .start-flow__grid,
    .dpro-flow,
    .product-examples,
    .product-examples__list,
    .shop-catalog-grid,
    .maintenance-visuals,
    .local-service-visuals,
    .case-plan-grid
  ) > * {
    min-width: 0;
    max-width: 100%;
  }

  img,
  svg,
  video,
  canvas,
  iframe {
    max-width: 100%;
  }

  /* Android Chromium can interpret auto-phrase more aggressively than iOS Safari.
     Mobile headings must always be allowed to break inside the available width. */
  :where(
    h1,
    h2,
    h3,
    .hero__lead,
    .subhero__lead,
    .section-head p,
    .story__copy p,
    .maintenance__copy p,
    .photo-consult__copy p,
    .shop-showcase__copy p,
    .cta p,
    .final-cta p
  ) {
    max-width: 100%;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  :where(
    h1 span,
    h2 span,
    h3 span,
    .hero h1 span,
    .subhero h1 span,
    .section h2 span,
    .maintenance h2 span,
    .photo-consult h2 span,
    .shop-showcase h2 span,
    .cta h2 span,
    .final-cta h2 span
  ) {
    max-width: 100%;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Do not let editorial links/buttons create a horizontal minimum width. */
  .text-link,
  .hero__actions .btn,
  .photo-consult__actions .btn,
  .shop-showcase__actions .btn,
  .final-cta__actions .btn,
  .cta-actions .btn {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* Preserve 2-column intent but make each column truly shrinkable. */
  .consult-input-guide__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .consult-input-guide article,
  .maintenance__steps article,
  .shop-product-card,
  .catalog-item,
  .case-plan,
  .manager__facts > div {
    min-width: 0;
    max-width: 100%;
  }

  /* Index ONLINE SHOP title / labels: never force width beyond the phone. */
  .shop-showcase h2,
  .shop-showcase h2 span,
  .shop-showcase__badges,
  .shop-showcase__actions {
    min-width: 0;
    max-width: 100%;
  }

  /* Standalone SHOP had an explicit max-content + nowrap title. */
  .hero h1 .shop-title-line {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Fixed mobile CTA: R1/R2 width fix retained. */
  .mobile-cta {
    box-sizing: border-box !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-width: calc(100dvw - 16px) !important;
    min-width: 0 !important;
    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(0, .66fr)
      minmax(0, .66fr)
      minmax(0, 1.08fr) !important;
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  body[data-shop-enabled="false"] .mobile-cta {
    grid-template-columns:
      minmax(0, 1.18fr)
      minmax(0, .72fr)
      minmax(0, 1.10fr) !important;
  }

  .mobile-cta > a,
  .mobile-cta > button {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  .mobile-cta [data-phone-number] {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    font-size: clamp(8px, 2.45vw, 10px);
    letter-spacing: -.035em;
    line-height: 1.15;
  }

  /* When hamburger menu is open, fixed CTA must never cover the menu. */
  body:has(.menu-panel.is-open) .mobile-cta {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + 24px)) !important;
  }

  .menu-panel.is-open {
    max-height: calc(100dvh - 120px);
  }
}

/* 430px-class Android phones: keep design, only remove remaining width traps. */
@media (max-width: 430px) {
  .consult-input-guide {
    min-width: 0;
    max-width: 100%;
  }

  .consult-input-guide__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .maintenance-photo-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .maintenance-visuals,
  .shop-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .shop-showcase__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :where(
    .manager__name strong,
    .maintenance__steps strong,
    .maintenance__steps span,
    .consult-input-guide strong,
    .consult-input-guide small,
    .shop-showcase__badges span
  ) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

@media (max-width: 360px) {
  .mobile-cta > a,
  .mobile-cta > button {
    font-size: 9px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  .mobile-cta [data-phone-number] {
    font-size: 8px;
  }

  .consult-input-guide__grid {
    grid-template-columns: 1fr !important;
  }
}