/*
 * Begad mobile interaction baseline for iOS and other touch devices.
 *
 * This final, additive layer establishes the parts of Apple's interaction
 * model a web storefront can honor: safe areas, 44pt touch targets, legible
 * form controls, predictable sheets, reduced motion, and a stable tab bar.
 */

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

  body.begad-storefront-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }

  body.begad-storefront-shell,
  body.begad-storefront-shell * {
    box-sizing: border-box;
  }

  body.begad-storefront-shell :is(header, main, section, footer) {
    max-width: 100%;
  }

  body.begad-storefront-shell :is(img, video, canvas, svg) {
    max-width: 100%;
  }

  body.begad-storefront-shell :is(a, button, input, select, textarea, summary, [role="button"]) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(237, 90, 22, .14);
  }

  body.begad-storefront-shell :is(input, select, textarea) {
    font-size: 16px !important;
  }

  body.begad-storefront-shell :is(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
    outline: 3px solid #0a84ff !important;
    outline-offset: 2px !important;
  }

  /* In a normal browser these safe-area environment values resolve to 0. */
  body.begad-storefront-shell > header:first-of-type {
    padding-top: env(safe-area-inset-top, 0px);
  }

  body.begad-storefront-shell .container {
    padding-inline-start: max(16px, env(safe-area-inset-left, 0px));
    padding-inline-end: max(16px, env(safe-area-inset-right, 0px));
  }

  /* The mobile header has menu, logo, account, and cart controls. Give those
     groups explicit columns so translated account copy cannot widen the page. */
  body.begad-storefront-shell header .sticky-header > .block.xl\:hidden:first-child .flex.justify-between {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 96px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.begad-storefront-shell header .sticky-header > .block.xl\:hidden:first-child .flex.justify-between > div {
    min-width: 0 !important;
  }

  body.begad-storefront-shell header .sticky-header > .block.xl\:hidden:first-child .flex.justify-between > div:nth-child(2) {
    display: flex;
    justify-content: center;
  }

  body.begad-storefront-shell header .sticky-header > .block.xl\:hidden:first-child .flex.justify-between > div:last-child {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 96px !important;
  }

  /* Account is already a labelled tab-bar destination. Use the standard
     compact account glyph in the top bar and preserve its accessible label. */
  body.begad-storefront-shell header .storefront-mobile-join {
    width: 44px !important;
    max-width: 44px !important;
    padding-inline: 0 !important;
    gap: 0 !important;
  }

  body.begad-storefront-shell header .storefront-mobile-join span {
    display: none !important;
  }

  /* Apple's minimum comfortable hit region is 44pt. */
  body.begad-storefront-shell :is(
    #sidebar-menu-btn,
    #side-bar-menu-close,
    .storefront-mobile-join,
    .close-sidebar-btn,
    .quantity-btn,
    .storefront-cart-qty-btn,
    [data-cart-remove],
    [data-sidebar-cart-remove],
    [data-sidebar-cart-qty-change],
    .wishlist-btn,
    .slider-btn,
    .ic-pagination-btn
  ) {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body.begad-storefront-shell :is(
    .btn-primary,
    .product-add-to-cart-btn-section .btn,
    [data-home-add-to-cart],
    .checkout-as-image .btn,
    .storefront-order-form button[type="submit"]
  ) {
    min-height: 44px !important;
  }

  /* Full-width banners must not create sideways page scrolling. Horizontal
     category/product rails remain scrollable inside their own containers. */
  body.begad-storefront-shell .market-entrance,
  body.begad-storefront-shell .market-hero-grid,
  body.begad-storefront-shell .market-hero,
  body.begad-storefront-shell .market-side,
  body.begad-storefront-shell .market-side > a,
  body.begad-storefront-shell .market-hero-banner-link,
  body.begad-storefront-shell .market-hero-banner-img {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.begad-storefront-shell .market-entrance,
  body.begad-storefront-shell .market-hero-grid,
  body.begad-storefront-shell .market-hero,
  body.begad-storefront-shell .market-side {
    overflow-x: clip !important;
  }

  /* Divide the tab bar between the configured item count. The old fixed
     five-column grid left a blank column when only four tabs were present. */
  body.begad-storefront-shell .storefront-mobile-bottom-nav {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    border-top: 1px solid rgba(60, 60, 67, .22) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 -1px 12px rgba(0, 0, 0, .06) !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
  }

  body.begad-storefront-shell .storefront-mobile-bottom-nav .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 8px !important;
  }

  body.begad-storefront-shell .storefront-mobile-bottom-nav .footer-bottom-nav {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  body.begad-storefront-shell .storefront-mobile-bottom-nav .footer-bottom-nav > li {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  body.begad-storefront-shell .storefront-mobile-bottom-nav .footer-bottom-nav-btn {
    display: flex !important;
    min-width: 44px !important;
    min-height: 58px !important;
    padding: 5px 2px 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.begad-storefront-shell .storefront-mobile-bottom-nav .mobile-nav-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border: 0 !important;
    border-radius: 10px !important;
  }

  body.begad-storefront-shell .storefront-mobile-bottom-nav .mobile-nav-label {
    font-size: 10px !important;
    line-height: 12px !important;
  }

  body.begad-storefront-shell .storefront-mobile-bottom-nav .footer-bottom-nav-btn:is(.is-active, [aria-current="page"]) {
    color: #d94b13 !important;
  }

  /* Sidebars and authentication dialogs behave like iOS sheets on phones. */
  body.begad-storefront-shell :is(
    .login-page-sidebar,
    .register-page-sidebar,
    .forgot-password-page-sidebar,
    .cart-sidebar,
    #sidebar
  ) {
    width: min(100%, 430px) !important;
    max-width: 100% !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
  }

  body.begad-storefront-shell .storefront-mobile-order-action,
  body.begad-storefront-shell .storefront-mobile-product-action {
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  body.begad-storefront-shell .storefront-mobile-bottom-nav .footer-bottom-nav-btn {
    min-height: 50px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.begad-storefront-shell *,
  body.begad-storefront-shell *::before,
  body.begad-storefront-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Capacitor-only native affordances. These selectors never activate in Safari. */
.begad-native-network-status {
  position: fixed;
  z-index: 100000;
  top: env(safe-area-inset-top, 0px);
  inset-inline: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #1d1d1f;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  font: 600 13px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  text-align: center;
}

.begad-native-network-status[hidden] {
  display: none !important;
}

.begad-native-product-share {
  position: fixed;
  z-index: 9997;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: #d94b00;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.begad-native-product-share svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.begad-native-app,
html.begad-native-app body {
  overscroll-behavior-y: none;
}

@media (prefers-reduced-transparency: reduce) {
  body.begad-storefront-shell .storefront-mobile-bottom-nav {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (prefers-contrast: more) {
  body.begad-storefront-shell :is(button, .btn, input, select, textarea) {
    border-width: 2px !important;
  }
}