/* EMPHIRE storefront — shared iPhone and small-screen layout layer. */

@media (max-width: 840px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
  }

  body.menu-open { overflow: hidden; }
  img, svg, video, canvas { max-width: 100%; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

  .site-header-nav {
    width: min(calc(100% - 32px), var(--wrap, 1440px));
    height: calc(86px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  .site-header-nav .nav-logo { width: 88px; height: 88px; }
  .site-header-nav .menu-button { flex: 0 0 48px; min-width: 48px; min-height: 48px; }
  .site-announcement { padding: calc(8px + env(safe-area-inset-top)) 14px 8px; font-size: 9px; }
  .site-announcement + .site-header-nav { height: 86px; padding-top: 0; }

  .mobile-nav {
    width: min(88vw, 370px);
    height: 100dvh;
    padding: env(safe-area-inset-top) 22px calc(24px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }

  .mobile-nav-head {
    min-height: 84px;
    margin-bottom: 4px;
  }

  .mobile-nav-head img { width: 68px; height: 68px; }
  .mobile-nav a { min-height: 54px; font-size: clamp(24px, 7vw, 29px); }
  .mobile-nav .mobile-bag { font-size: clamp(24px, 7vw, 29px); }

  .wrap,
  .co-page,
  .faq-layout,
  .faq-search-wrap {
    max-width: 100%;
  }

  .story-hero { min-height: 0; }
  .story-hero-inner { padding: 28px 0 62px; }
  .story-hero-inner h1,
  .story-hero-inner .product-hero-name {
    max-width: 100%;
    margin-top: 12px;
    font-size: clamp(48px, 14vw, 78px) !important;
    line-height: .88;
    overflow-wrap: anywhere;
  }
  .story-hero-inner p { max-width: 38rem; margin-top: 17px; font-size: 14px; line-height: 1.65; }
  .eyebrow { flex-wrap: wrap; font-size: 10px; line-height: 1.45; letter-spacing: .14em; }

  .footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .footer-main { gap: 28px; }
  .footer-nav { row-gap: 14px; }

  /* Prevent Safari from zooming when a field receives focus. */
  .form-input,
  .qinput,
  .qselect,
  .qtextarea,
  .search-input,
  .sort-select,
  .sf-input,
  #faqSearch {
    font-size: 16px !important;
  }

  /* Home */
  .service-grid,
  .work-grid,
  .featured-products-grid,
  .proof-panel,
  .process-panel { min-width: 0; }
  .card, .work-card, .featured-product-card { min-width: 0; }
  .showcase-head, .section-head { min-width: 0; }
  .process-copy { min-width: 0; }

  /* About / Services / Contact */
  .story-head h2,
  .svc-head h2,
  .contact-head h2,
  .tech-copy h2,
  .quote-intro h2 {
    overflow-wrap: anywhere;
  }
  .loc-card span { position: static; display: block; margin-top: 14px; }
  .contact-actions .button { flex: 1 1 180px; padding-inline: 16px; }
  .quote-panel, .quote-form, .qfield { min-width: 0; }

  /* Shop and product */
  .shop-toolbar,
  .products-grid,
  .product-page,
  .gallery-col,
  .info-col { min-width: 0; }
  .pd-overlay { padding-bottom: env(safe-area-inset-bottom); }
  .pd-modal { width: 100%; max-height: 100dvh; border-inline: 0; }
  .toast-wrap { width: calc(100% - 24px); bottom: calc(12px + env(safe-area-inset-bottom)); }
  .toast { max-width: 100%; white-space: normal; text-align: center; }

  /* Checkout */
  .co-grid { min-width: 0; }
  .co-left, .co-right { min-width: 0; }
  .order-item, .oi-info { min-width: 0; }
  .oi-name { overflow-wrap: anywhere; }

  /* Size charts */
  .chart-card, .table-scroll { min-width: 0; }
  .table-scroll { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

  /* FAQ and 404 */
  .faq-q-text { min-width: 0; overflow-wrap: anywhere; }
  .error-content { width: 100%; }
}

@media (max-width: 540px) {
  .wrap,
  .co-page {
    width: min(calc(100% - 28px), var(--wrap, 1440px));
  }

  .site-header-nav { width: calc(100% - 28px); }
  .story-hero-inner { padding: 20px 0 54px; }
  .story-hero-inner h1,
  .story-hero-inner .product-hero-name { font-size: clamp(44px, 15vw, 66px) !important; }
  .story-hero-inner p { font-size: 13px; }

  .button,
  .cta-link,
  .btn-help,
  .btn-primary,
  .btn-secondary { min-height: 48px; }

  .footer { padding-top: 56px; }
  .footer-logo { width: 150px; }
  .footer-copy h2 { font-size: 36px; line-height: .92; }
  .footer-nav { gap: 14px 18px; }

  /* Home */
  .hero-actions-mobile { max-width: calc(100% - 8px); }
  .hero-actions-mobile .button { min-height: 44px; }
  .services, .featured-products { padding-block: 76px; }
  .showcase { padding-block: 74px; }
  .section-head h2,
  .showcase h2 { font-size: clamp(44px, 14vw, 58px); overflow-wrap: anywhere; }
  .section-head p { font-size: 13px; line-height: 1.65; }
  .process-copy { padding: 28px 17px; }
  .process-list { gap: 14px; }
  .work-card-body { padding: 15px 14px 18px; }
  .work-card small { position: static; display: block; margin-top: 10px; }
  .featured-product-card { width: 100%; }

  /* About */
  .story { padding-block: 70px; }
  .story-head h2 { font-size: clamp(40px, 13vw, 54px); }
  .story-copy, .story-head p { font-size: 14px; line-height: 1.75; }
  .value-grid { gap: 30px; }
  .value { padding-bottom: 2px; }
  .loc-card { padding: 24px 20px; }
  .chip { max-width: 100%; padding-inline: 12px; }

  /* Services */
  .svc, .tech-section { padding-block: 70px; }
  .svc-head h2, .tech-copy h2 { font-size: clamp(40px, 13vw, 52px); }
  .svc-item, .beyond-card { padding: 28px 22px; }
  .process-strip { gap: 24px; margin-top: 42px; padding-top: 36px; }
  .tech-benefit { padding: 18px 15px; }
  .tech-visual { width: 100%; }

  /* Contact */
  .contact-section { padding-block: 68px; }
  .contact-grid { gap: 38px; }
  .contact-head h2, .quote-intro h2 { font-size: clamp(40px, 13vw, 54px); }
  .contact-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .contact-actions .button { width: 100%; }
  .info-card { padding: 24px 18px; }
  .info-row { gap: 12px; }
  .info-row > div { min-width: 0; overflow-wrap: anywhere; }
  .quote-panel { margin-inline: 0; padding: 27px 16px; }
  .quote-submit-row { gap: 12px; }
  .quote-status { min-width: 0; width: 100%; }

  /* Shop */
  .shop-catalog { padding: 52px 0 72px; }
  .catalog-heading h2 { font-size: clamp(40px, 13vw, 50px); }
  .shop-toolbar { width: 100%; }
  .filter-bar { gap: 6px; }
  .filter-tab { min-width: 0; }
  .products-grid { gap: 16px 10px; }
  .product-img-wrap { aspect-ratio: 4 / 5; }
  .product-info { min-width: 0; }
  .pi-row { align-items: flex-start; flex-direction: column; gap: 6px; }
  .p-name { width: 100%; overflow-wrap: anywhere; }
  .pd-close { top: max(.65rem, env(safe-area-inset-top)); }

  /* Product details */
  .product-main { padding-bottom: 72px; }
  .product-page { margin-top: 12px; }
  .gallery-col { height: min(94vw, 410px); }
  .info-head, .info-body, .info-foot, .share-row { padding-inline: 16px; }
  .info-name { overflow-wrap: anywhere; }
  .sizes { gap: 7px; }
  .size-btn { min-width: 48px; }
  .share-row { flex-wrap: wrap; }

  /* Checkout */
  .checkout-main { padding-bottom: 72px; }
  .co-breadcrumb { overflow-x: auto; white-space: nowrap; }
  .co-grid { margin-top: 14px; }
  .co-left, .co-right { padding: 17px 14px; }
  .co-steps { margin-bottom: 24px; }
  .co-steps .step { min-width: 0; padding: 9px 4px; font-size: 9px; letter-spacing: .035em; }
  .co-steps .step-num { font-size: 8px; }
  .pm-grid { grid-template-columns: 1fr; }
  .pm-card { min-height: 92px; }
  .qr-payment-box { padding: 16px 12px; }
  .success-page { padding: 48px 14px; }
  .success-details { padding: 16px 13px; }
  .sd-row { gap: 16px; }

  /* Size chart */
  .size-browser, .measure-section { padding-block: 70px; }
  .size-browser .section-head h2 { font-size: clamp(40px, 13vw, 52px); }
  .chart-card-head { padding: 20px 16px 16px; }
  .chart-name { font-size: 32px; }
  .size-table { min-width: 460px; }
  .chart-note { padding-inline: 13px; }
  .guide-cell { padding: 25px 18px; }

  /* FAQ */
  .faq-main { padding-block: 56px; }
  .faq-layout, .faq-search-wrap { width: calc(100% - 28px); }
  .faq-search-inner { min-width: 0; }
  .faq-cat-title { font-size: 25px; }
  .faq-q { gap: 12px; padding-block: 18px; }
  .faq-q-text { font-size: 14px; line-height: 1.5; }
  .faq-a-inner { font-size: 13px; line-height: 1.75; }
  .help-strip { padding: 68px 14px; }

  /* 404 */
  body > main:has(.error-content) { min-height: calc(100dvh - 86px); padding: 54px 14px 42px; }
  .error-code { font-size: clamp(64px, 24vw, 100px); }
  .error-actions { width: 100%; }
}

@media (max-width: 370px) {
  .wrap, .co-page { width: calc(100% - 24px); }
  .site-header-nav { width: calc(100% - 24px); }
  .site-header-nav .nav-logo { width: 80px; height: 80px; }
  .mobile-nav { width: 94vw; padding-inline: 18px; }
  .story-hero-inner h1,
  .story-hero-inner .product-hero-name { font-size: clamp(40px, 15vw, 56px) !important; }
  .service-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .sort-bar { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 7px; }
  .sort-select { width: 100%; }
  .hero-actions-mobile .button { padding-inline: 7px; font-size: 11px; }
  .featured-product-row { display: block; }
  .featured-product-price { display: block; margin-top: 8px; }
}

@supports not (overflow: clip) {
  @media (max-width: 840px) {
    html, body { overflow-x: hidden; }
  }
}