/* Phone-only layout/accessibility pass. Image sources, crops, and desktop
   composition remain component-owned. Controls retain their existing actions. */
@media(max-width:767px){
  /* Use the phone's reading width instead of the desktop ten-column measure. */
  .editorial-copy{width:calc(100% - 2 * var(--gutter,16px));max-width:none}

  /* A clear tap surface for actions, even when a translated label wraps. */
  .solid-button,.outline-button{min-height:48px;padding-block:10px}
  .rail-controls{height:44px}
  .rail-arrows button{width:44px;height:44px;flex:0 0 44px}
  .gallery-dialog-controls button{width:44px;height:44px;flex:0 0 44px}
  .gallery-close{min-width:44px;min-height:44px}
  .contact-dialog__close,.contact-dialog__copy-button,.mobile-variant-close{width:44px;height:44px;min-width:44px;min-height:44px}
  .site-footer__sitemap-links a{min-width:44px}

  /* Keep dialog controls within notches/home indicators and let long content
     scroll with the dynamic viewport, including the on-screen keyboard. */
  .contact-dialog{max-height:calc(100dvh - max(16px,env(safe-area-inset-top,0px)) - max(16px,env(safe-area-inset-bottom,0px)));overscroll-behavior:contain}
  .gallery-close{top:max(12px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px))}
  .gallery-dialog-controls{bottom:max(12px,env(safe-area-inset-bottom,0px));height:44px;width:min(328px,calc(100% - 32px));gap:8px}
  .gallery-dialog-controls .lightbox-progress{width:auto;min-width:24px;flex:1}
  .gallery-view{inset:calc(max(12px,env(safe-area-inset-top,0px)) + 52px) max(16px,env(safe-area-inset-right,0px)) calc(max(12px,env(safe-area-inset-bottom,0px)) + 56px) max(16px,env(safe-area-inset-left,0px))}
  .mobile-variant-close{top:max(12px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px))}
  .mobile-variant-content{padding-bottom:max(40px,calc(env(safe-area-inset-bottom,0px) + 24px))}

  /* Prevent inherited desktop minimums from squeezing narrow action rows. */
  .button-row,.feature-actions,.variant-detail-actions{min-width:0}
  .button-row>*{max-width:100%}
}
@media(max-width:359px){
  .contact-dialog:not(.agency-dialog){padding-inline:16px}
  .contact-dialog__number-row{gap:4px;flex-wrap:wrap}
  .contact-dialog__number{flex-shrink:0;max-width:100%}
}