/**
 * Mobile shell — trava layout da loja no celular:
 * sem arrastar pro lado, sem zoom indesejado, conteúdo dentro da tela.
 */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  position: relative;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Containers raiz da loja */
body > div,
.min-h-screen {
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.mx-auto.max-w-md {
  width: 100%;
  max-width: 28rem !important;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Scroll horizontal só dentro de carrosséis / tabs */
.overflow-x-auto,
nav.overflow-x-auto,
[class*="overflow-x-auto"] {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

/* Modais e overlays não estouram a largura */
#buyModal,
#chatWidget,
#shareModal,
#pixModal,
.fixed.inset-0,
[style*="position:fixed"],
[style*="position: fixed"] {
  max-width: 100vw;
}

#modalSheet,
#buyModal > div[style*="max-width"] {
  max-width: min(28rem, 100vw) !important;
}

/* iOS: evita zoom ao focar inputs (font-size < 16px dispara zoom) */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Utilitário: esconder scrollbar horizontal em áreas permitidas */
.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* === Header loja / produto — cabe na tela mobile === */
.store-header,
header.sticky.top-0.flex.items-center,
header.sticky.top-0 > .flex.items-center {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px !important;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.store-header-search,
header.sticky .flex-1.flex.items-center.rounded-full,
header.sticky .flex-1.flex.items-center[class*="rounded-full"] {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100%;
  padding: 5px 8px !important;
  gap: 4px !important;
}

.store-header-search input,
header.sticky .flex-1.flex.items-center input {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 0;
  font-size: 12px !important;
  line-height: 1.2;
}

.store-header-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.store-header-icon,
header.sticky a.p-1,
header.sticky button.p-1 {
  flex-shrink: 0;
  padding: 2px !important;
  line-height: 0;
}

header.sticky svg.w-6.h-6 { width: 20px !important; height: 20px !important; }
header.sticky svg.w-5.h-5 { width: 18px !important; height: 18px !important; }
header.sticky svg.w-4.h-4 { width: 14px !important; height: 14px !important; }

.store-header-menu { display: none !important; }

@media (max-width: 380px) {
  header.sticky .flex-1.flex.items-center input::placeholder {
    font-size: 11px;
  }
}