/* ═══════════════════════════════════════════════════════════════
   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: hidden;
}

/* Age gate — reliable taps on iPhone */
#agegate button {
  cursor: pointer !important;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

/* 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; align with section edges */
@media (max-width: 768px) {
  #shop .shtop {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .shctrl {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    max-width: 100%;
    padding-bottom: 0.35rem;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

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

  .flt {
    flex-shrink: 0;
  }

  #shop .srtsel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* 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;
  }

  /* Match shop section horizontal rhythm */
  #home .home-sec,
  #home .home-trust {
    padding-left: 1.3rem;
    padding-right: 1.3rem;
  }
}

/* Hero copy — stay clear of floating WhatsApp button */
@media (max-width: 520px) {
  #home .hsub {
    max-width: calc(100% - 4.25rem);
    margin-left: auto;
    margin-right: auto;
  }

  #home .hbtns {
    padding-right: 0.5rem;
  }
}

/* Product modal — unified stacked layout (mobile + desktop) */
.pm-grid {
  display: flex;
  flex-direction: column;
}

.pm-left {
  flex-shrink: 0;
}

.pm-media {
  min-height: 180px;
  max-height: 42svh;
  padding: 1rem;
}

.pm-vid-btn {
  width: calc(100% - 1.5rem);
  margin: 0.65rem 0.75rem 0;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.pm-right {
  max-height: none;
  padding: 1rem 1.1rem 1.5rem;
  flex: 1;
  overflow-x: hidden;
}

.pm-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  gap: 0;
  margin: 0.85rem 0 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.65rem;
  overflow: hidden;
  background: var(--s2);
}

.pm-tab {
  flex: none;
  margin: 0;
  padding: 0.85rem 0.45rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: var(--mut);
  min-height: 48px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.pm-tab:nth-child(2n) {
  border-right: none;
}

.pm-tab:nth-child(n + 3) {
  border-bottom: none;
}

.pm-tab.on {
  color: var(--gold);
  background: rgba(255, 165, 0, 0.14);
  box-shadow: inset 0 -2px 0 var(--gold);
}

.pm-panel {
  padding: 0.15rem 0 0.5rem;
}

.pm-back {
  position: absolute;
  top: max(0.65rem, env(safe-area-inset-top, 0.65rem));
  left: 0.65rem;
  z-index: 13;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(5, 3, 10, 0.82);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--font-label, 'DM Mono', monospace);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.pm-back:hover {
  border-color: rgba(201, 162, 39, 0.45);
  color: var(--gold);
}

#pmBg.on {
  z-index: 620;
}

body.product-page-open {
  overflow: hidden;
}

body.product-page-open #scrollTopBtn.on {
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

.pm-actions {
  flex-direction: column;
  gap: 0.65rem;
  padding-top: 1rem;
  margin-top: 0.5rem;
}

.pm-atc {
  width: 100%;
  min-height: 48px;
}

.pm-wl {
  display: none;
}

.pm-share-row {
  flex-direction: column;
}

.pm-rel-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 769px) {
  #pmBg {
    align-items: center;
    padding: 2rem 1.5rem;
  }

  .pm {
    max-width: 560px;
    margin: auto;
    border-radius: 1rem;
    min-height: auto;
  }

  .pm-media {
    max-height: 320px;
  }
}

/* Product modal — full-screen edge padding on phones */
@media (max-width: 768px) {
  #pmBg {
    padding: 0;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    align-items: stretch;
  }

  .pm {
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    min-height: 100svh;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .pm-close {
    top: max(0.65rem, env(safe-area-inset-top, 0.65rem));
    right: 0.65rem;
    z-index: 12;
    width: 36px;
    height: 36px;
  }

  .pm-back {
    top: max(0.65rem, env(safe-area-inset-top, 0.65rem));
    left: max(0.65rem, env(safe-area-inset-left, 0.65rem));
  }

  .pm-name {
    font-size: 1.35rem;
    line-height: 1.15;
    padding-right: 2.5rem;
    padding-left: 5.5rem;
  }

  .pm-price {
    font-size: 1.45rem;
  }

  .pm-bdgs {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .pm-actions {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, transparent, var(--s1) 24%);
  }
}

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

  .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);
}

/* Footer — stack legal row cleanly */
@media (max-width: 768px) {
  .ftbot {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 1.25rem;
  }

  .ftbadges {
    width: 100%;
  }
}

/* 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;
  }
}