/*
 * A2TDEV Upgrade 94 — final small-device production freeze.
 *
 * This stylesheet is intentionally loaded after every page-level stylesheet.
 * It contains only cross-site mobile/accessibility invariants. Page composition
 * remains owned by the page-specific Upgrade 88–93 responsive rules.
 */

:root {
  --a2t-mobile-freeze-touch: 44px;
  --a2t-mobile-freeze-gutter: 16px;
}

@media (max-width: 900px) {
  html {
    max-inline-size: 100%;
    overscroll-behavior-x: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.a2t-production-shell {
    max-inline-size: 100%;
    overscroll-behavior-x: none;
  }

  /* Media must never become the source of document-level horizontal overflow. */
  body.a2t-production-shell :is(img, picture, video, canvas, svg, iframe) {
    max-inline-size: 100%;
  }

  /* Grid/flex content frequently contains user/CMS strings. Allow those nodes
     to shrink while preserving intentionally scrollable rails and tables. */
  body.a2t-production-shell :is(
    .a2t-page-shell,
    .a2t-account-page,
    .a2t-portal-shell,
    .a2t-payment-shell,
    .a2t-legal-page,
    .a2t-pr-page,
    .store-compact-page,
    .search-container,
    .blog-page-shell,
    .pm-layout,
    .pm-standards-shell,
    .pd-v6-shell,
    .a2t-footer-shell,
    .shell
  ) > * {
    min-inline-size: 0;
  }

  body.a2t-production-shell :is(
    .a2t-notification-copy,
    .a2t-cart-drawer-item-copy,
    .a2t-cart-drawer-item-top,
    .a2t-cart-drawer-item-foot,
    .a2t-footer-bottom,
    .a2t-footer-column,
    .a2t-empty-state,
    .empty-state
  ) {
    min-inline-size: 0;
  }

  /* Long URLs, emails, IDs and CMS-authored links may wrap, but ordinary copy
     keeps normal word-breaking behavior. */
  body.a2t-production-shell :is(
    .x-content,
    .a2t-footer,
    .a2t-notification-modal,
    .a2t-cart-drawer
  ) :is(a[href^="mailto:"], a[href^="tel:"], code, kbd, samp) {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.a2t-production-shell :is(
    .table-responsive,
    .a2t-table-scroll,
    .a2t-scroll-strip,
    .a2t-tab-strip,
    pre
  ) {
    max-inline-size: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.a2t-production-shell :is(
    .a2t-mobile-menu-btn,
    .a2t-icon-btn,
    summary,
    button,
    [role="button"]
  ) {
    touch-action: manipulation;
  }

  /* Keep focus outlines visible when a focused item is near an overflow edge. */
  body.a2t-production-shell :is(
    .a2t-global-breadcrumb,
    .a2t-mobile-menu-inner,
    .a2t-notification-list,
    .a2t-cart-drawer-list,
    .table-responsive,
    .a2t-table-scroll
  ) {
    scroll-padding-block: 4px;
  }
}

@media (max-width: 760px) {
  /* iOS Safari zooms editable controls below 16px. This final rule is loaded
     after page CSS so the behavior is consistent across every workflow. */
  body.a2t-production-shell :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea
  ) {
    font-size: 16px !important;
  }

  body.a2t-production-shell :is(
    button,
    [role="button"],
    summary,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
  ) {
    min-block-size: var(--a2t-mobile-freeze-touch);
  }

  /* Native checkbox/radio geometry is intentionally not enlarged; their label
     is the interaction surface. */
  body.a2t-production-shell label:has(> input[type="checkbox"]),
  body.a2t-production-shell label:has(> input[type="radio"]) {
    min-block-size: var(--a2t-mobile-freeze-touch);
    display: inline-flex;
    align-items: center;
  }

  body.a2t-production-shell .a2t-skip-link {
    top: max(8px, var(--a2t-safe-top, 0px)) !important;
    left: max(8px, var(--a2t-safe-left, 0px)) !important;
    max-inline-size: calc(100vw - max(16px, var(--a2t-safe-left, 0px)) - max(16px, var(--a2t-safe-right, 0px)));
  }

}

/* Short landscape phones need the full-screen navigation to prioritize links,
   not decorative vertical whitespace. The header remains the canonical size. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  body.a2t-production-shell .a2t-mobile-menu-legacy .a2t-mobile-menu-inner {
    padding-top: 8px !important;
    padding-bottom: max(12px, var(--a2t-safe-bottom, 0px)) !important;
  }

  body.a2t-production-shell .a2t-mobile-links-legacy > a {
    min-height: 48px !important;
    font-size: 17px !important;
  }

  body.a2t-production-shell .a2t-mobile-links-legacy > a.active::before,
  body.a2t-production-shell .a2t-mobile-links-legacy > a[aria-current="page"]::before {
    top: 14px;
    bottom: 14px;
  }

  body.a2t-production-shell .a2t-mobile-links-legacy > .a2t-mobile-legacy-cta {
    min-height: 48px !important;
    margin-top: 8px !important;
  }

  body.a2t-production-shell .a2t-notification-head p {
    display: none;
  }
}

@media (max-width: 350px) {
  body.a2t-production-shell :is(
    .a2t-page-shell,
    .a2t-account-page,
    .a2t-portal-shell,
    .a2t-payment-shell,
    .a2t-legal-page,
    .a2t-pr-page,
    .store-compact-page,
    .search-container,
    .blog-page-shell,
    .pm-layout,
    .pm-standards-shell,
    .pd-v6-shell
  ) {
    min-inline-size: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  body.a2t-production-shell *,
  body.a2t-production-shell *::before,
  body.a2t-production-shell *::after {
    scroll-behavior: auto !important;
  }
}

/* Make keyboard focus distinguishable even when the OS requests stronger
   contrast. No palette changes are made in normal rendering. */
@media (forced-colors: active) {
  body.a2t-production-shell :focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
  }

  body.a2t-production-shell :is(button, .btn, .a2t-btn, .a2t-nav-cta) {
    forced-color-adjust: auto;
  }
}