/*
 * =====================================================================
 * ANORAA — Comprehensive Mobile Responsiveness Fix
 * Paste this <style> block into the <head> of ALL templates,
 * OR serve as a linked stylesheet after existing styles.
 *
 * Breakpoints used:
 *   900px  — tablet landscape / small desktop
 *   640px  — tablet portrait
 *   480px  — large phone
 *   360px  — small phone (Samsung Galaxy S, iPhone SE)
 * =====================================================================
 */

/* ─── 1. GLOBAL BASE FIXES ─────────────────────────────────────────── */

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

html {
  /* Prevent font boost on Android */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* Prevent horizontal scroll on all pages */
  overflow-x: hidden;
  min-width: 0;
}

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

/* Fix inputs zooming on iOS (font < 16px triggers zoom) */
input, textarea, select {
  font-size: 16px !important;
}

/* ─── 2. HERO SECTION ───────────────────────────────────────────────── */

/* clamp(28px …) is too big at 360px; tighten the floor */
@media (max-width: 480px) {
  .hero h1, .hero h2 {
    font-size: clamp(24px, 7.5vw, 36px);
    line-height: 1.15;
  }

  .hero p.lead {
    font-size: 15px;
    margin: 12px 0 18px;
    max-width: 100%;
  }

  .hero-tag {
    font-size: 11px;
    padding: 5px 12px;
    margin-bottom: 14px;
  }

  /* Trust badges overflow on narrow screens — wrap tighter */
  .hero-trust {
    gap: 7px;
    margin-top: 16px;
  }
  .hero-trust span {
    font-size: 11px;
    padding: 5px 10px;
  }

  /* CTA buttons stack on very small screens */
  .hero-cta {
    flex-direction: column;
    gap: 10px;
  }
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Badge floaters clip outside viewport — hide on tiny screens */
  .hero-badge {
    display: none;
  }

  /* Give hero more breathing room at the bottom when image is stacked */
  .hero {
    padding-bottom: 40px;
  }

  /* Product image plate: avoid it touching edges */
  .hero-visual .plate {
    width: min(280px, 90%);
    border-width: 6px;
  }
}

/* ─── 3. NAVIGATION ─────────────────────────────────────────────────── */

/* At 900 px the hamburger is already shown; fix two edge cases */
@media (max-width: 900px) {
  /* Prevent logo text from wrapping onto two lines */
  .logo span { white-space: nowrap; }

  /* Ensure icon-btn row doesn't overflow */
  .nav-right { gap: 8px; }
}

@media (max-width: 480px) {
  /* Shrink logo slightly to keep everything on one row */
  .nav { padding: 10px 14px; }
  .logo { font-size: 20px; }
  .logo img { height: 36px; }
  .logo small { font-size: 8px; letter-spacing: 2px; }

  /* account_base header (orders / profile pages) */
  #hdr .nav { padding: 10px 14px; }
  #hdr .logo { font-size: 20px; }
  #hdr .logo img { height: 36px; }
}

/* Mobile nav drawer: prevent content from being taller than screen */
.mobnav {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── 4. ANNOUNCEMENT BANNER ────────────────────────────────────────── */

@media (max-width: 480px) {
  .annc { font-size: 12px; }
}

/* ─── 5. PRODUCT CARDS ───────────────────────────────────────────────── */

/* 3-col → 2-col already at 900 px; force 2-col on phones */
@media (max-width: 560px) {
  /* Generic 4-col grid → 2-col */
  .prod-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* Thekua / NK flex rows: 2-col with correct gap */
  #thekuaGrid,
  #nkGrid {
    gap: 12px;
    justify-content: flex-start;
  }
  #thekuaGrid .pcard,
  #nkGrid .pcard {
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
  }

  /* Tighten card body on narrow screens */
  .pcard-body { padding: 12px 12px 14px; }
  .pcard h3 { font-size: 15px; }
  .pcard .price { font-size: 17px; }
  .pcard .pben { font-size: 11.5px; }
}

@media (max-width: 360px) {
  /* On very small phones give each card a bit more room */
  #thekuaGrid .pcard,
  #nkGrid .pcard {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .prod-grid {
    grid-template-columns: 1fr;
  }
}

/* Add-to-cart button inside pcard: full width on mobile */
@media (max-width: 560px) {
  .pcard .btn {
    width: 100%;
    justify-content: center;
    padding: 11px 10px;
    font-size: 13px;
  }
}

/* ─── 6. COMBO CARDS ─────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .combo-mini {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ─── 7. SECTION SPACING ─────────────────────────────────────────────── */

@media (max-width: 560px) {
  .sec { padding: 32px 0; }
  .sec-head { margin-bottom: 26px; }
  .sec-head h2 { font-size: clamp(24px, 6vw, 36px); }
  .sec-head p { font-size: 14px; }
}

/* ─── 8. FEATURES / PROMO / BAND ────────────────────────────────────── */

@media (max-width: 560px) {
  .promo, .band {
    padding: 24px 16px;
    text-align: center;
  }
  .band-grid { gap: 16px; }
  .band h2 { font-size: clamp(22px, 6vw, 34px); }
  .band p { max-width: 100%; }
}

/* Feature section image order fix already in 900px MQ; 
   extra spacing on phone */
@media (max-width: 480px) {
  .feat { gap: 20px; }
  .feat-txt h2 { font-size: clamp(22px, 6vw, 30px); }
}

/* ─── 9. "WHY CHOOSE US" STATS ──────────────────────────────────────── */

@media (max-width: 560px) {
  .stat-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .stat b { font-size: 28px; }
}

@media (max-width: 360px) {
  .stat-row { grid-template-columns: 1fr; }
}

/* ─── 10. WHY GRID ──────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .why-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ─── 11. GIFTING / KEY-SELLING POINTS ──────────────────────────────── */

@media (max-width: 560px) {
  .ks-grid { grid-template-columns: 1fr; }

  .mk-grid .mk {
    flex: 0 1 100%;
  }
}

/* ─── 12. BLOG GRID ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ─── 13. CONTACT / CERTIFICATIONS ─────────────────────────────────── */

@media (max-width: 560px) {
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr !important; }
}

/* ─── 14. PLATFORM LOGOS (Marketplace row) ──────────────────────────── */

@media (max-width: 560px) {
  /* Ensure logos scroll horizontally rather than wrap in odd ways */
  .platform-logos, .mkt-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  .platform-logos img, .mkt-row img {
    height: 36px;
    width: auto;
  }
}

/* ─── 15. FAQ SECTION ───────────────────────────────────────────────── */

@media (max-width: 560px) {
  .faq-list { gap: 8px; }
  .faq-q { font-size: 14px; padding: 14px 16px; }
  .faq-a { font-size: 13.5px; padding: 10px 16px 14px; }
}

/* ─── 16. NEWSLETTER FORM ───────────────────────────────────────────── */

/* Already column on 560px — ensure input doesn't overflow */
@media (max-width: 560px) {
  .news .nf { flex-direction: column; }
  .news .nf input,
  .news .nf button { width: 100%; }
}

/* ─── 17. FOOTER ────────────────────────────────────────────────────── */

/* foot-grid already responsive; fix bottom row wrap on phones */
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  footer { padding: 36px 0 24px; }
  .social-row { justify-content: center; }
}

/* ─── 18. MOBILE STICKY BAR ─────────────────────────────────────────── */

/* Already shown at 900 px; ensure it sits above device home bars */
@media (max-width: 900px) {
  .msticky {
    padding-bottom: max(9px, env(safe-area-inset-bottom));
  }
  body { padding-bottom: max(64px, calc(64px + env(safe-area-inset-bottom))); }
}

/* ─── 19. ACCOUNT PAGES (orders, profile, reviews, support) ─────────── */

/* acc-header nav links: hide on phones, show only logo */
@media (max-width: 640px) {
  .acc-header-inner { flex-wrap: wrap; gap: 10px; }
  .acc-header nav {
    display: none; /* These pages use the main mobnav instead */
  }
}

/* acc-tabs: horizontal scrollable strip on mobile */
.acc-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.acc-tabs::-webkit-scrollbar { display: none; }

@media (max-width: 560px) {
  .acc-card { padding: 20px 16px; border-radius: 16px; }
  .acc-card.wide { padding: 20px 14px; }
  .acc-card h1 { font-size: 22px; }
}

/* Orders table: horizontally scrollable on mobile */
.acc-card table {
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 760px) {
  /* Wrap table in a scrollable container */
  .acc-card > table,
  .acc-card > .table-wrap {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-radius: 10px;
  }
  .order-items-desc {
    max-width: 160px;
    white-space: normal;
    word-break: break-word;
  }
}

/* ─── 20. PRODUCT DETAIL PAGE ───────────────────────────────────────── */

/* pd-grid already stacks at 760 px; fix padding and font */
@media (max-width: 760px) {
  .pd-wrap { padding: 16px 14px; border-radius: 16px; }
  .pd-price { font-size: 24px; }
  .pd-perks { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .pd-grid { gap: 18px; }
  .pd-fbt-grid {
    grid-template-columns: 1fr;
  }
  .pd-actions { flex-direction: column; }
  .pd-actions .btn { width: 100%; justify-content: center; }
}

/* ─── 21. WRAP CONTAINER PADDING ────────────────────────────────────── */

@media (max-width: 480px) {
  .wrap { padding: 0 14px; }
}

/* ─── 22. BUTTONS — prevent overflow on small screens ───────────────── */

@media (max-width: 360px) {
  .btn { padding: 12px 18px; font-size: 13px; }
  .btn-sm { padding: 8px 14px; font-size: 12px; }
}

/* ─── 23. WHATSAPP FLOAT BUTTON ─────────────────────────────────────── */

/* Sits above sticky bar on mobile */
@media (max-width: 900px) {
  .wa-float { bottom: max(74px, calc(64px + env(safe-area-inset-bottom) + 10px)); }
}

@media (max-width: 480px) {
  .wa-float { right: 14px; }
  .wa-float svg { width: 44px; height: 44px; }
}

/* ─── 24. TRACK ORDER PAGE ──────────────────────────────────────────── */

@media (max-width: 480px) {
  .track-steps {
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .track-step .dot { width: 28px; height: 28px; font-size: 13px; }
  .track-step span { font-size: 10px; }
  .track-info { flex-direction: column; gap: 10px; }
}

/* ─── 25. BLOG LIST & DETAIL ─────────────────────────────────────────── */

@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Blog detail static HTML pages */
@media (max-width: 640px) {
  article, .blog-body, .blog-content {
    padding: 0 16px;
  }
  .blog-hero-img, .post-header-img {
    border-radius: 0;
  }
}

/* ─── 26. FORM REVIEW SECTION ───────────────────────────────────────── */

@media (max-width: 480px) {
  .pd-section form input[type="text"],
  .pd-section form textarea,
  .pd-section form select {
    font-size: 16px; /* prevent iOS zoom */
  }
}
