/* ═══════════════════════════════════════════════════════════════
   MOBILE — Safari (iOS) & Chrome (Android) layout fixes
   ═══════════════════════════════════════════════════════════════ */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Prevent horizontal page drift */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* Touch devices: normal cursor, hide custom cursor rings */
@media (hover: none), (pointer: coarse) {
  body,
  a,
  button,
  .cm,
  .pc,
  input,
  select,
  textarea {
    cursor: auto !important;
  }

  #cur,
  #cur2 {
    display: none !important;
  }
}

/* iOS Safari: stop zoom on input focus (needs 16px+) */
@media (max-width: 768px) {
  .srch input,
  .nav-search-inner input,
  .nav-drawer-search input,
  .f input,
  .f select,
  .f textarea,
  #navSearchInput,
  #navSearchMobile {
    font-size: 16px !important;
  }
}

/* Shop filter pills — horizontal scroll instead of overflow */
@media (max-width: 768px) {
  .shctrl {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    padding-bottom: 0.35rem;
    margin: 0 -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .shctrl::-webkit-scrollbar {
    display: none;
  }

  .flt {
    flex-shrink: 0;
  }
}

/* Larger tap targets (Apple HIG ~44px) */
@media (max-width: 768px) {
  .nav-search-btn,
  .ncart,
  .nav-icon-btn,
  .ham {
    min-width: 44px;
    min-height: 44px;
  }

  .pg {
    min-width: 44px;
    min-height: 44px;
  }

  .bprim,
  .bgho {
    min-height: 44px;
  }
}

/* iPhone safe areas (notch / home bar) */
@supports (padding: env(safe-area-inset-bottom)) {
  .wa-fab {
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  #cpanel .cp-foot,
  .nav-drawer-ft {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }

  #nav .nav-inn {
    padding-left: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-left));
    padding-right: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-right));
  }
}

/* Hero — less top padding under fixed nav; room for floating WhatsApp */
@media (max-width: 768px) {
  #home #hero,
  #hero {
    padding-top: max(6.5rem, calc(5rem + env(safe-area-inset-top, 0px)));
    padding-bottom: max(5.5rem, calc(4rem + env(safe-area-inset-bottom, 0px)));
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }

  #home .hh1 {
    margin-bottom: 1.25rem;
  }

  #home .hw1 {
    font-size: clamp(2.4rem, 11vw, 3.2rem);
  }

  #home .hw2 {
    font-size: clamp(2.6rem, 12vw, 3.5rem);
  }

  .hsub,
  #home .hsub {
    font-size: clamp(0.88rem, 3.8vw, 1rem);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Modals & overlays — edge padding on narrow screens */
@media (max-width: 768px) {
  #pmBg,
  #cowrap,
  #lgBg {
    padding: 1rem;
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .pm {
    border-radius: 1rem;
  }

  .pm-right {
    max-height: none;
    padding: 1.25rem;
  }

  .agebox {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 100%;
  }

  .agebtns {
    flex-direction: column;
    width: 100%;
  }

  .agebtns button {
    width: 100%;
  }
}

/* Cart drawer — full width (reinforce) */
@media (max-width: 768px) {
  #cpanel {
    width: 100%;
    max-width: 100%;
  }

  .cp-hd,
  .cp-items,
  .cp-foot {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
}

/* WhatsApp FAB — sit above home bar, don’t cover cart CTA when open */
@media (max-width: 520px) {
  .wa-fab {
    z-index: 279;
  }
}

/* Reduce tap highlight flash on iOS */
a,
button {
  -webkit-tap-highlight-color: rgba(201, 162, 39, 0.2);
}

/* Small phones — keep full logo readable */
@media (max-width: 390px) {
  .nav-inn {
    gap: 0.5rem;
  }

  .nlogo {
    font-size: 1.05rem !important;
    letter-spacing: 0.02em;
  }

  .nav-actions {
    gap: 0.35rem;
  }

  .trust-row {
    justify-content: center;
  }

  .tbg {
    font-size: 0.58rem;
  }
}