/* ============================================================
   ASE PRESALE — mobile.css  v1.20
   MOBILE-ONLY stylesheet (loaded only when wp_is_mobile())
   
   App-like design:
   - All touch targets min 52px (Apple HIG)
   - Fixed bottom tab bar (like iOS)
   - Large font sizes — readable at arm's length
   - Full-width buttons — thumb-friendly
   - Splash/hero fills viewport like native app
   - Add-to-homescreen: transparent status bar
   ============================================================ */

/* ── FORCE CORRECT BASE ──────────────────────────── */
html {
  font-size: 17px !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  overflow-x: hidden;
  /* Safe area for notch phones */
  padding-top: env(safe-area-inset-top, 0);
}
body {
  font-size: 17px !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background: #FFFFFF !important;
  /* Extra bottom padding for tab bar */
  padding-bottom: calc(70px + env(safe-area-inset-bottom, 0)) !important;
}
/* No zoom on input focus */
input, textarea, select, button {
  font-size: 16px !important;
  -webkit-appearance: none;
  touch-action: manipulation;
}

/* ── ANNOUNCEMENT BAR ─────────────────────────────── */
.ase-announcement {
  padding: 10px 16px !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* ── HEADER — app top bar ────────────────────────── */
.ase-header {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 1000 !important;
  height: 64px !important;
}
.ase-header-inner {
  height: 64px !important;
  padding: 0 16px !important;
  gap: 10px !important;
}
.ase-logo img { height: 46px !important; max-width: 170px !important; }
.ase-phone-link { display: none !important; } /* Hide on mobile — use tab bar call button */
.ase-cart-btn {
  padding: 0.55rem 0.85rem !important;
  font-size: 14px !important;
  min-height: 44px !important;
}
.ase-account-btn {
  padding: 0.55rem 0.85rem !important;
  font-size: 13px !important;
  min-height: 44px !important;
  white-space: nowrap !important;
}

/* ── HIDE DESKTOP NAV — replaced by bottom tab bar ── */
.ase-nav { display: none !important; }

/* ── PAGE OFFSET — below fixed header ───────────────── */
.ase-announcement ~ .ase-header + .ase-nav ~ * { margin-top: 0; }
/* Push content below announcement + header */
.ase-hero, section.ase-section, .woocommerce, body > * {
  margin-top: 0;
}
/* First real content after nav should clear header */
.ase-hero { margin-top: calc(44px + 64px) !important; } /* announcement + header */

/* ── BOTTOM TAB BAR — iOS app style ─────────────── */
.ase-mobile-tabbar {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  width: 100vw !important;
  height: calc(70px + env(safe-area-inset-bottom, 0)) !important;
  background: #FFFFFF !important;
  border-top: 1px solid #E0E0E0 !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.10) !important;
  z-index: 2000 !important;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
  align-items: stretch !important;
}
.ase-tab-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 4px !important;
  text-decoration: none !important;
  color: #888888 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  border-top: 3px solid transparent !important;
  transition: 0.15s ease !important;
  min-height: 52px !important;
  gap: 3px !important;
  -webkit-tap-highlight-color: transparent !important;
}
.ase-tab-item:active { background: #FBF5E0 !important; }
.ase-tab-item.active {
  color: #DBAE3D !important;
  border-top-color: #DBAE3D !important;
}
.ase-tab-icon {
  font-size: 24px !important;
  line-height: 1 !important;
  display: block !important;
}
/* Center primary CTA tab — gold fill */
.ase-tab-item.tab-primary {
  background: #DBAE3D !important;
  color: #FFFFFF !important;
  border-radius: 14px 14px 0 0 !important;
  border-top: none !important;
  margin: 0 3px !important;
}
.ase-tab-item.tab-primary .ase-tab-icon { font-size: 26px !important; }
.ase-tab-item.tab-primary:active { background: #C8962A !important; }
.ase-tab-item.tab-primary .ase-tab-label { color: #FFFFFF !important; }
.ase-tab-label { font-size: 10px !important; font-weight: 700 !important; }

/* ── HERO — full-viewport, app splash feel ────────── */
.ase-hero {
  padding: 28px 18px 32px !important;
  min-height: auto !important;
}
.ase-hero-inner {
  flex-direction: column !important;
  gap: 20px !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.ase-hero-text h1 {
  font-size: 32px !important;
  line-height: 1.1 !important;
  margin-bottom: 12px !important;
}
.ase-hero-text p {
  font-size: 16px !important;
  max-width: 100% !important;
  margin-bottom: 16px !important;
  line-height: 1.65 !important;
}
.ase-hero-badges { gap: 8px !important; }
.ase-badge { font-size: 11px !important; padding: 5px 12px !important; }

/* Hero login card — full width on mobile */
.ase-hero-login {
  min-width: unset !important; max-width: 100% !important;
  width: 100% !important; padding: 22px 18px !important;
  border-radius: 16px !important;
}
.ase-hero-login h3 { font-size: 20px !important; margin-bottom: 8px !important; }
.ase-hero-login p { font-size: 15px !important; margin-bottom: 18px !important; }

/* ── BUTTONS — large, full-width, 54px minimum ──── */
.btn-gold, .btn-black, .btn-outline {
  min-height: 54px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  border-radius: 10px !important;
  padding: 0 20px !important;
  width: 100% !important;
  margin-bottom: 10px !important;
}

/* ── SECTIONS ─────────────────────────────────────── */
.ase-section {
  padding: 28px 18px !important;
  width: 100% !important;
}
.ase-section-inner { max-width: 100% !important; margin: 0 !important; }
.ase-section-header { margin-bottom: 20px !important; }
.ase-section-header h2 { font-size: 24px !important; }
.ase-section-header p { font-size: 15px !important; }

/* ── AZSE SHOP TOOLBAR (mobile) ───────────────────── */
.ase-shop-toolbar {
  padding: 16px 16px 14px !important;
  margin-bottom: 14px !important;
}
.ase-shop-toolbar-inner {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
.ase-shop-heading h1 { font-size: 22px !important; }
.ase-shop-tabs {
  width: 100% !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 2px !important;
}
.ase-shop-tab {
  flex: 0 0 auto !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
}
.ase-shop-filter { width: 100% !important; }
.ase-shop-filter select {
  flex: 1 1 auto !important;
  min-height: 46px !important;
  font-size: 15px !important; /* prevent iOS zoom */
  padding: 10px 14px !important;
}

/* Result count / sort dropdown stack on mobile */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  float: none !important;
  width: 100% !important;
  margin: 0 0 10px !important;
}
.woocommerce .woocommerce-ordering select {
  width: 100% !important;
  min-height: 46px !important;
  font-size: 15px !important;
}

/* Card badges on mobile */
.ase-card-badge { top: 6px !important; left: 6px !important; }
.retail-pill { font-size: 10px !important; padding: 4px 10px !important; }
.woocommerce ul.products li.product.outofstock::after {
  top: 6px !important; right: 6px !important;
  font-size: 9px !important; padding: 3px 8px !important;
}

/* ── WooCommerce PRODUCT GRID ─────────────────────── */
.woocommerce ul.products {
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.woocommerce ul.products li.product a img {
  height: 160px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px !important;
  padding: 10px 10px 4px !important;
}
.woocommerce ul.products li.product .price {
  font-size: 17px !important;
  padding: 0 10px !important;
}
.woocommerce ul.products li.product .button {
  margin: 10px !important;
  padding: 12px !important;
  font-size: 13px !important;
  min-height: 44px !important;
  border-radius: 8px !important;
}

/* Presale pill on cards */
.presale-pill {
  font-size: 10px !important;
  padding: 4px 10px !important;
}

/* ── SINGLE PRODUCT ───────────────────────────────── */
.woocommerce div.product {
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
  padding: 0 !important;
}
.woocommerce div.product .product_title {
  font-size: 22px !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 28px !important;
  margin-bottom: 14px !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  min-height: 56px !important;
  font-size: 16px !important;
  width: 100% !important;
  border-radius: 10px !important;
}
.ase-presale-info {
  font-size: 15px !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  margin-bottom: 16px !important;
}

/* ── CART & CHECKOUT ──────────────────────────────── */
.woocommerce-cart table.cart th,
.woocommerce-checkout table.shop_table th {
  font-size: 11px !important; padding: 10px 8px !important;
}
.woocommerce-cart table.cart td,
.woocommerce-checkout table.shop_table td {
  padding: 12px 8px !important; font-size: 14px !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  font-size: 16px !important; /* Prevent iOS zoom */
  min-height: 52px !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
}
#place_order {
  min-height: 58px !important;
  font-size: 17px !important;
  border-radius: 12px !important;
}

/* ── MY ACCOUNT ───────────────────────────────────── */
.woocommerce-account .woocommerce {
  flex-direction: column !important;
}
.woocommerce-MyAccount-navigation {
  width: 100% !important;
}
.woocommerce-MyAccount-navigation ul li a {
  min-height: 52px !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
}

/* ── HOW IT WORKS ─────────────────────────────────── */
.ase-steps {
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
.ase-steps::before { display: none !important; }
.ase-step-num {
  width: 48px !important; height: 48px !important;
  font-size: 17px !important;
}
.ase-step h4 { font-size: 14px !important; }
.ase-step p  { font-size: 13px !important; }

/* ── BENEFITS ─────────────────────────────────────── */
.ase-benefits { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.ase-benefit-card { padding: 18px 12px !important; border-radius: 12px !important; }
.ase-benefit-icon { font-size: 28px !important; margin-bottom: 8px !important; }
.ase-benefit-card h4 { font-size: 13px !important; }
.ase-benefit-card p  { font-size: 13px !important; line-height: 1.5 !important; }

/* ── LOGIN GATE ───────────────────────────────────── */
.ase-login-gate {
  margin: 20px 0 !important;
  padding: 24px 18px !important;
  border-radius: 16px !important;
}
.ase-login-gate h2 { font-size: 22px !important; }
.ase-login-gate p  { font-size: 15px !important; }

/* ── WP-MEMBERS FORMS — large on mobile ───────────── */
#wpmem_login, #wpmem_reg {
  padding: 0 !important;
}
#wpmem_login h2, #wpmem_reg h2 {
  font-size: 22px !important;
  margin-bottom: 20px !important;
}
#wpmem_login input[type="text"],
#wpmem_login input[type="email"],
#wpmem_login input[type="password"],
#wpmem_reg  input[type="text"],
#wpmem_reg  input[type="email"],
#wpmem_reg  input[type="password"] {
  font-size: 16px !important;
  min-height: 56px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
}
#wpmem_login input[type="submit"],
#wpmem_reg  input[type="submit"] {
  min-height: 58px !important;
  font-size: 17px !important;
  border-radius: 12px !important;
}

/* ── FOOTER — simplified for mobile ──────────────── */
.ase-footer {
  padding: 24px 18px 0 !important;
}
.ase-footer-inner {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  padding-bottom: 20px !important;
}
.ase-footer-contact { text-align: left !important; }
.ase-footer-contact .phone { font-size: 22px !important; }
.ase-footer-bottom {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 14px 0 !important;
}
.ase-footer-links-inline { margin-top: 4px !important; }
.ase-footer-links-inline a { margin-left: 0 !important; margin-right: 12px !important; }

/* ── NOTICES ─────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-size: 15px !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
}

/* ── SCROLL REVEAL: reduced motion on mobile ─────── */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}