/* Shared mobile-first polish for Vapehouse design options */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

/* Touch targets */
.btn,
.icon-btn,
.text-btn,
.cat,
.add,
.site-nav__link,
.qty button {
  min-height: 44px;
  touch-action: manipulation;
}
.icon-btn {
  width: 44px;
  min-width: 44px;
}

/* Prevent iOS input zoom */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
textarea,
select {
  font-size: 16px !important;
}

/* Header: keep actions usable on narrow phones */
.site-header__inner {
  gap: 8px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
.logo {
  font-size: clamp(1.05rem, 4.5vw, 1.45rem);
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-header__actions {
  gap: 6px;
  flex-shrink: 0;
}
.text-btn {
  padding: 0 10px;
  font-size: 0.72rem;
  max-width: 28vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Back to chooser: below notch, don't cover whole header */
.back-choose {
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  max-width: calc(100vw - 24px);
  z-index: 310;
}

/* Push sticky header slightly when back chip is present */
body[data-base] .site-header {
  top: 0;
}

/* Hero mobile */
.hero {
  min-height: min(78vh, 560px) !important;
}
.hero__content {
  padding: 36px 16px 48px !important;
  padding-bottom: max(48px, env(safe-area-inset-bottom)) !important;
}
.hero__brand {
  font-size: clamp(2.4rem, 14vw, 4.2rem) !important;
  max-width: 10ch;
}
.hero__cta {
  display: grid !important;
  width: 100%;
  gap: 10px;
}
.hero__cta .btn {
  width: 100%;
}
.hero__dots {
  left: 16px !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
}

/* Catalog: comfortable 2-col; stack controls */
.catalog,
.strip,
.membership,
.payments,
.order-cta,
.newsletter,
.site-footer {
  padding-left: max(14px, env(safe-area-inset-left)) !important;
  padding-right: max(14px, env(safe-area-inset-right)) !important;
}

.grid {
  gap: 10px !important;
}

.card .row {
  flex-wrap: wrap;
  gap: 8px;
}
.card .add {
  margin-left: auto;
}

.section-head h2 {
  font-size: clamp(1.7rem, 8vw, 2.6rem) !important;
  word-break: break-word;
}

/* Categories scroll with padding cue */
.cats {
  margin-inline: -4px;
  padding-inline: 4px;
  scroll-padding-inline: 4px;
  -webkit-overflow-scrolling: touch;
}

/* Payments: 2x2 on phone is fine; keep readable */
.payments__list li {
  font-size: 0.86rem;
  padding: 12px 10px;
}

/* Drawer: almost full width on phones */
.drawer {
  width: min(100vw, 420px) !important;
  padding-bottom: env(safe-area-inset-bottom);
}
/* C: bottom-sheet cart spans the app column */
body.theme-c .drawer {
  width: 100% !important;
  max-width: 100% !important;
}
.checkout {
  min-height: 48px;
}

/* Modal sheet on mobile */
.modal__panel {
  width: 100% !important;
  max-width: 100% !important;
  padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
}

/* FAB clear of home indicator */
.fab-wa {
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
}

/* Age gate */
.agegate {
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
}
.agegate__panel {
  width: min(100%, 400px);
}

/* Very small phones: single-column products */
@media (max-width: 360px) {
  .grid {
    grid-template-columns: 1fr !important;
  }
  .card:nth-child(1) {
    grid-column: auto !important;
  }
  .text-btn {
    display: none;
  }
}

/* Tablet-ish phones in landscape */
@media (max-width: 699px) {
  .site-nav {
    display: none !important;
  }
  .strip {
    grid-template-columns: 1fr !important;
  }
  .newsletter__inner {
    grid-template-columns: 1fr !important;
  }
  .membership__inner,
  .payments__inner,
  .order-cta__inner,
  .newsletter__inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}