/* =============================================================
   SEA MIRACLE — MOBILE APP SHELL  (Phase 1: Foundation)
   Loaded AFTER home.css / shop.css on every public page.
   Everything here is gated at max-width:768px so desktop is
   never affected. This file owns: design tokens, the compact
   mobile header, the sticky bottom navigation, the full-screen
   search overlay, and a reusable bottom-sheet component used by
   later phases (filters, sort, etc).
   ============================================================= */

:root {
  /* Spacing scale */
  --ms-1: 4px; --ms-2: 8px; --ms-3: 12px; --ms-4: 16px; --ms-5: 24px; --ms-6: 32px;
  /* Touch target minimum (Apple/Material guidance) */
  --touch-min: 44px;
  /* App-shell chrome heights */
  --mah-height: 58px;
  --mbn-height: 62px;
  --mbn-safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Radii / motion */
  --ms-radius: 14px;
  --ms-radius-lg: 20px;
  --ms-ease: cubic-bezier(.4,0,.2,1);
  --ms-trans-fast: .18s var(--ms-ease);
  --ms-trans: .28s var(--ms-ease);
  /* Layering */
  --z-mah: 900;
  --z-mbn: 950;
  --z-overlay: 1200;
  --z-sheet: 1300;
}

/* ─────────────────────────────────────────────────────────────
   Hide the entire mobile app shell on desktop/tablet by default.
   Only re-shown inside the max-width:768px block below, so the
   desktop experience is completely unaffected.
───────────────────────────────────────────────────────────── */
.mobile-app-header,
.mobile-bottom-nav,
.mobile-search-overlay,
.bottom-sheet-backdrop,
.bottom-sheet,
.mobile-rail-section,
.mobile-filter-bar,
.foot-chevron {
  display: none;
}

/* The footer accordion toggle is a real <button> (for a11y/click target)
   wrapped inside the existing `.foot-col h3`, but on desktop it must look
   and behave exactly like the plain heading text it replaced — no accordion
   chrome, no pointer cursor, no button decoration. The interactive/collapsed
   styling is added back only inside the max-width:768px block below. */
.foot-acc-toggle {
  display: block; width: 100%; background: none; border: none;
  padding: 0; margin: 0; font: inherit; color: inherit;
  text-align: left; cursor: default;
}

/* ─────────────────────────────────────────────────────────────
   Everything below only applies on phones/small tablets.
   Desktop (>768px) is completely untouched.
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* The old desktop top navbar is replaced by the app header below */
  .navbar { display: none !important; }

  body { padding-bottom: calc(var(--mbn-height) + var(--mbn-safe-bottom)); }

  /* ── Compact mobile app header ─────────────────────────── */
  .mobile-app-header {
    position: sticky; top: 0; z-index: var(--z-mah);
    display: flex; align-items: center; justify-content: space-between;
    height: var(--mah-height);
    padding: 0 var(--ms-4);
    background: #fff;
    border-bottom: 1px solid var(--gray-100);
    box-shadow: 0 1px 8px rgba(0,0,0,.04);
  }
  .mah-logo { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .mah-logo img { height: 34px; width: auto; object-fit: contain; }
  .mah-logo-ico {
    width: 32px; height: 32px; border-radius: 10px;
    background: var(--grad); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
  }
  .mah-logo-text { font-size: 15px; font-weight: 800; color: var(--t-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mah-actions { display: flex; align-items: center; gap: var(--ms-2); flex-shrink: 0; }
  .mah-btn {
    width: var(--touch-min); height: var(--touch-min);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--gray-50); color: var(--gray-700);
    font-size: 17px; transition: background var(--ms-trans-fast);
  }
  .mah-btn:active { background: var(--gray-100); }
  .mah-btn .mbn-badge { top: 2px; right: 2px; }

  /* Mobile dropdown menu (About/Contact/FAQ/etc) now hangs off the app header */
  .mobile-nav {
    position: fixed; left: 0; right: 0; top: var(--mah-height);
    z-index: calc(var(--z-mah) - 1);
    max-height: calc(100vh - var(--mah-height) - var(--mbn-height));
    overflow-y: auto;
    -webkit-backdrop-filter: none;
  }

  /* ── Sticky bottom navigation ─────────────────────────────── */
  .mobile-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mbn);
    display: flex; align-items: stretch;
    height: calc(var(--mbn-height) + var(--mbn-safe-bottom));
    padding-bottom: var(--mbn-safe-bottom);
    background: #fff;
    border-top: 1px solid var(--gray-100);
    box-shadow: 0 -2px 16px rgba(0,0,0,.06);
  }
  .mbn-item {
    position: relative;
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    background: none; border: none; cursor: pointer;
    color: var(--gray-500); font-family: var(--font);
    font-size: 10px; font-weight: 600;
    padding: 6px 2px;
    transition: color var(--ms-trans-fast);
  }
  .mbn-item i { font-size: 19px; transition: transform var(--ms-trans-fast); }
  .mbn-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .mbn-item.active { color: var(--t-600); }
  .mbn-item.active i { transform: translateY(-1px); }
  .mbn-item:active i { transform: scale(.88); }
  .mbn-badge {
    position: absolute; top: 2px; right: calc(50% - 20px);
    min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 999px; background: #e11d48; color: #fff;
    font-size: 9px; font-weight: 800; line-height: 15px; text-align: center;
    border: 1.5px solid #fff;
  }

  /* ── Full-screen search overlay ────────────────────────────── */
  .mobile-search-overlay {
    position: fixed; inset: 0; z-index: var(--z-overlay);
    background: #fff;
    transform: translateY(-100%);
    transition: transform var(--ms-trans);
    display: flex; flex-direction: column;
  }
  .mobile-search-overlay.open { transform: translateY(0); }
  .mso-bar {
    display: flex; align-items: center; gap: var(--ms-2);
    padding: var(--ms-3) var(--ms-4);
    border-bottom: 1px solid var(--gray-100);
    padding-top: max(var(--ms-3), env(safe-area-inset-top));
  }
  .mso-back {
    width: var(--touch-min); height: var(--touch-min); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--gray-50); color: var(--gray-700); font-size: 16px;
  }
  .mso-form { flex: 1; min-width: 0; }
  .mso-form input {
    width: 100%; height: var(--touch-min);
    border: none; background: var(--gray-50); border-radius: 999px;
    padding: 0 var(--ms-4); font-size: 15px; font-family: var(--font);
    color: var(--gray-800); outline: none;
  }
  .mso-go {
    width: var(--touch-min); height: var(--touch-min); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--grad); color: #fff; font-size: 15px;
  }
  .mso-body { flex: 1; overflow-y: auto; padding: var(--ms-5) var(--ms-4); }
  .mso-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-400); margin-bottom: var(--ms-3); }

  /* Phase 6 — instant search results / recent / popular */
  .mso-results { display: none; }
  .mso-results.open { display: block; margin-bottom: var(--ms-5); }
  .mso-result {
    display: flex; align-items: center; gap: var(--ms-3);
    padding: var(--ms-2) 0; border-bottom: 1px solid var(--gray-100);
  }
  .mso-result img, .mso-noimg {
    width: 48px; height: 48px; border-radius: var(--ms-radius); object-fit: cover;
    background: var(--gray-50); flex-shrink: 0;
  }
  .mso-result-info { flex: 1; min-width: 0; }
  .mso-result-name {
    font-size: 14px; font-weight: 600; color: var(--gray-900);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .mso-result-cat { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
  .mso-result-price { font-size: 14px; font-weight: 800; color: var(--gray-900); flex-shrink: 0; }
  .mso-empty { font-size: 13px; color: var(--gray-400); padding: var(--ms-3) 0; }

  .mso-section { margin-bottom: var(--ms-5); }
  .mso-section-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--gray-400); margin-bottom: var(--ms-3);
  }
  .mso-section-head button {
    text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12px; color: var(--gray-500);
  }
  .mso-chips { display: flex; flex-wrap: wrap; gap: var(--ms-2); }
  .mso-chip {
    padding: 8px 14px; border-radius: 999px; background: var(--gray-50);
    color: var(--gray-700); font-size: 13px; font-weight: 600;
    min-height: 36px;
  }

  /* ── Reusable bottom sheet (used by filter/sort in later phases) ── */
  .bottom-sheet-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: var(--z-sheet);
    background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none;
    transition: opacity var(--ms-trans);
  }
  .bottom-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
  .bottom-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sheet) + 1);
    background: #fff;
    border-radius: var(--ms-radius-lg) var(--ms-radius-lg) 0 0;
    max-height: 82vh;
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform var(--ms-trans);
    box-shadow: 0 -8px 30px rgba(0,0,0,.18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottom-sheet.open { transform: translateY(0); }
  .bottom-sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: var(--gray-200); margin: 10px auto 4px; flex-shrink: 0; }
  .bottom-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--ms-3) var(--ms-5); flex-shrink: 0;
  }
  .bottom-sheet-head h3 { font-size: 16px; font-weight: 800; color: var(--gray-900); }
  .bottom-sheet-close { width: 36px; height: 36px; border-radius: 50%; background: var(--gray-50); color: var(--gray-600); display: flex; align-items: center; justify-content: center; }
  .bottom-sheet-body { padding: 0 var(--ms-5) var(--ms-5); overflow-y: auto; }

  /* Utility: minimum comfortable touch target for any interactive
     element rendered inside the mobile app shell */
  .mah-btn, .mbn-item, .mso-back, .mso-go, .bottom-sheet-close { min-width: var(--touch-min); min-height: var(--touch-min); }

  /* ═══════════════════════════════════════════════════════════
     PHASE 2 — HOMEPAGE APP-LIKE LAYOUT
     Desktop's hero/category grid/product carousel keep their own
     desktop CSS untouched; these rules only change how those same
     sections are PRESENTED on phones (native swipe/scroll instead
     of custom JS carousels + arrow buttons).
  ═══════════════════════════════════════════════════════════ */

  /* Hero: drop the side arrows (swipe + dots are the primary mobile
     interaction), keep everything else as-is */
  .hero-arrow { display: none; }

  /* Mobile-only rails (Best Sellers / Recently Viewed / Recommended) */
  .mobile-rail-section { display: block; padding: 40px 0; }
  .mobile-rail-section + .mobile-rail-section { background: var(--gray-50); }

  /* Category strip: swipeable horizontal rail instead of a static grid */
  .cat-grid {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-grid::-webkit-scrollbar { display: none; }
  .cat-card { flex: 0 0 62%; scroll-snap-align: start; }

  /* Product rails (Featured + the new mobile-only ones): native
     touch-scroll with snap, replacing the JS translateX carousel.
     `!important` is required because the carousel JS sets an inline
     `transform` style — this rule intentionally wins over it. */
  .prod-carousel-wrap { gap: 0; }
  .prod-carr-btn { display: none; }
  .prod-carousel { overflow: visible; }
  .prod-track {
    transform: none !important;
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; padding: 2px 2px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .prod-track::-webkit-scrollbar { display: none; }
  .prod-card { scroll-snap-align: start; flex: 0 0 66%; }

  /* ═══════════════════════════════════════════════════════════
     PHASE 3 — PRODUCT LISTING (products.php)
     Sticky Filter/Sort bar + bottom sheets replace the desktop
     inline filter strip. All actual filtering/sorting logic is
     reused via the (hidden) desktop controls — see the small
     script block at the bottom of products.php.
  ═══════════════════════════════════════════════════════════ */
  .shop-filter-strip { display: none; }
  .shop-main { padding-top: 12px; }

  .mobile-filter-bar {
    position: sticky; top: var(--mah-height); z-index: calc(var(--z-mah) - 2);
    display: flex; gap: var(--ms-3);
    padding: var(--ms-3) var(--ms-4);
    background: #fff;
    border-bottom: 1px solid var(--gray-100);
  }
  .mfb-btn {
    flex: 1; min-height: var(--touch-min);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 1.5px solid var(--gray-200); border-radius: 999px;
    background: var(--gray-50); color: var(--gray-700);
    font-family: var(--font); font-size: 13.5px; font-weight: 700;
  }
  .mfb-btn:active { background: var(--gray-100); }

  .ms-filter-group { margin-bottom: var(--ms-5); }
  .ms-filter-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-400); margin-bottom: var(--ms-3); }
  .ms-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
  .ms-pill {
    padding: 9px 16px; border-radius: 999px;
    border: 1.5px solid var(--gray-200); background: var(--gray-50);
    color: var(--gray-700); font-family: var(--font); font-size: 13px; font-weight: 600;
  }
  .ms-pill.active { background: var(--grad); border-color: transparent; color: #fff; }

  /* The relocated #priceDropdown needs to render inline in the sheet
     instead of as an absolutely-positioned popover */
  .bottom-sheet-body #priceDropdown {
    position: static; display: block; width: auto;
    padding: 0; margin: 0; border: none; box-shadow: none;
  }

  .bottom-sheet-foot {
    display: flex; gap: var(--ms-3);
    padding: var(--ms-4) var(--ms-5);
    border-top: 1px solid var(--gray-100);
    flex-shrink: 0;
  }
  .ms-clear-btn, .ms-apply-btn {
    flex: 1; min-height: var(--touch-min); border-radius: 999px;
    font-family: var(--font); font-size: 14px; font-weight: 700;
  }
  .ms-clear-btn { background: var(--gray-50); color: var(--gray-700); border: 1.5px solid var(--gray-200); }
  .ms-apply-btn { background: var(--grad); color: #fff; }

  .ms-sort-opt {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: var(--touch-min);
    padding: 0 4px; border-bottom: 1px solid var(--gray-50);
    font-family: var(--font); font-size: 14.5px; font-weight: 600; color: var(--gray-700);
    text-align: left;
  }
  .ms-sort-opt.active { color: var(--t-600); }
  .ms-sort-opt.active::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--t-600); }

  /* App-card polish for the shop grid */
  .shop-grid { gap: 12px; }
  .sp-card { border-radius: var(--ms-radius); }

  /* Fade-in-on-scroll reveal for product cards (see mobile-app.js).
     Cards are visible by default (safe if JS fails to load) — JS adds
     `.ms-reveal-pending` only when it can actually observe + reveal them. */
  .sp-card.ms-reveal-pending, .prod-card.ms-reveal-pending { opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ms-ease), transform .4s var(--ms-ease); }
  .sp-card.ms-revealed, .prod-card.ms-revealed { opacity: 1; transform: none; }

  /* ═══════════════════════════════════════════════════════════
     PHASE 5 — CART SIDEBAR (products.php + product.php)
  ═══════════════════════════════════════════════════════════ */
  /* Swipe-to-remove: mobile-app.js applies transform:translateX() directly
     to .cart-item during the drag; this transition only kicks in for the
     snap-back / fly-away animation once the finger lifts. */
  .cart-item { transition: transform .28s var(--ms-ease), opacity .28s var(--ms-ease); touch-action: pan-y; }

  .cart-coupon-row { display: flex; gap: 8px; margin-bottom: 16px; }
  .cart-coupon-row input {
    flex: 1; min-height: var(--touch-min);
    border: 1.5px solid var(--gray-200); border-radius: var(--ms-radius);
    padding: 0 14px; font-size: 13.5px; font-family: var(--font); outline: none;
  }
  .cart-coupon-row input:focus { border-color: var(--t-400); }
  .cart-coupon-row button {
    padding: 0 18px; min-height: var(--touch-min);
    border-radius: var(--ms-radius); background: var(--gray-800); color: #fff;
    font-family: var(--font); font-size: 13px; font-weight: 700;
  }
  .cart-delivery-note {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--gray-500);
    background: var(--g-50); border-radius: var(--ms-radius);
    padding: 10px 12px; margin-bottom: 14px;
  }
  .cart-delivery-note i { color: var(--t-600); }

  /* Existing drawers/lightboxes/scroll-top predate the mobile app shell
     and use z-index values (400-999) that collide with the new sticky
     header/bottom-nav/filter-bar (898-1300). Bump them above ALL mobile
     chrome so they still appear on top when opened. Scoped to mobile
     only — desktop's stacking order is untouched. */
  .cart-overlay, .wishlist-overlay { z-index: 1990 !important; }
  .cart-sidebar, .wishlist-sidebar { z-index: 1991 !important; }
  .sp-lightbox, .pdv-lightbox { z-index: 2000 !important; }
  .scroll-top { bottom: calc(var(--mbn-height) + var(--mbn-safe-bottom) + 14px) !important; }

  /* ═══════════════════════════════════════════════════════════
     PHASE 7 — WISHLIST SHARE
  ═══════════════════════════════════════════════════════════ */
  .wishlist-foot { display: flex; flex-direction: column; gap: 10px; }
  .wl-share-btn {
    display: flex !important; width: 100%; min-height: var(--touch-min);
    align-items: center; justify-content: center; gap: 7px;
    padding: 10px; border: 1.5px solid var(--t-400); color: var(--t-600);
    border-radius: var(--radius-full, 999px); font-size: 13px; font-weight: 700;
    font-family: var(--font); background: #fff; order: -1;
  }
  .wl-share-btn:active { background: var(--g-50); }

  /* ═══════════════════════════════════════════════════════════
     PHASE 8 — HOMEPAGE COMPACTNESS PASS
     (trust bar grid, before/after stats, section headings, footer)
  ═══════════════════════════════════════════════════════════ */

  /* Trust bar: home.css's own legacy breakpoints collapse this to a
     single column below 520px (`.trust-inner{grid-template-columns:1fr}`),
     which is exactly the real-phone range — that's why it rendered as a
     tall stacked list. Force a proper 2×2 grid on phones instead. */
  .trust-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0;
  }
  .trust-item {
    flex-direction: column; text-align: center; align-items: center;
    gap: 8px; padding: 16px 10px;
    border-right: 1px solid var(--gray-100) !important;
    border-bottom: 1px solid var(--gray-100);
  }
  .trust-item:nth-child(2n) { border-right: none !important; }
  .trust-item:nth-last-child(-n+2) { border-bottom: none; }
  .trust-ico { width: 38px; height: 38px; font-size: 16px; }
  .trust-txt strong { font-size: 12px; }
  .trust-txt span { font-size: 10.5px; }

  /* Before/After mini stats row: keep all three stats on one line on
     phones instead of wrapping the 3rd item ("Harsh chemicals") down. */
  .bna-stats {
    flex-wrap: nowrap; justify-content: space-between;
    gap: 8px; margin-bottom: 22px;
  }
  .bna-stat { min-width: 0; flex: 1; }
  .bna-stat strong { font-size: 17px; }
  .bna-stat span { font-size: 9.5px; display: block; line-height: 1.25; }
  .bna-stat-sep { height: 28px; flex-shrink: 0; }

  /* Section headings ("Science Meets Pure Nature" etc.) — the desktop
     clamp() still tops out too large for a compact app feel on phones. */
  .section-tag { font-size: 10px; padding: 3px 12px; margin-bottom: 6px; }
  .section-title { font-size: 21px; line-height: 1.25; margin-bottom: 8px; }
  .section-sub { font-size: 13px; line-height: 1.55; }
  .sec-features { padding: 40px 0; }
  .feat-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
  .feat-card { padding: 22px 14px; }
  .feat-ico { width: 52px; height: 52px; font-size: 20px; margin-bottom: 12px; }
  .feat-title { font-size: 13.5px; margin-bottom: 6px; }
  .feat-desc { font-size: 11.5px; line-height: 1.5; }

  /* Footer: collapse the link columns into tap-to-expand accordions —
     the same pattern shopping apps use to keep the footer short. The
     brand block (logo/description/social) stays fully visible. */
  .footer { padding: 32px 0 0; }
  .footer-grid { padding-bottom: 8px; gap: 0; }
  .foot-desc { font-size: 12.5px; margin-bottom: 16px; }
  .foot-col { border-bottom: 1px solid rgba(255,255,255,.08); }
  .foot-col h3 { margin-bottom: 0; padding-bottom: 0; }
  .foot-col h3::after { display: none; }
  .foot-acc-toggle {
    display: flex !important; align-items: center; justify-content: space-between;
    width: 100%; padding: 16px 2px; cursor: pointer;
    font-size: 14px; font-weight: 700; color: #fff;
    min-height: var(--touch-min);
  }
  .foot-chevron {
    display: inline-flex !important; font-size: 12px; color: var(--gray-500);
    transition: transform var(--ms-trans);
  }
  .foot-col.open .foot-chevron { transform: rotate(180deg); color: var(--t-400); }
  .foot-acc-body { max-height: 0; overflow: hidden; }
  .foot-col.open .foot-acc-body { max-height: none; }
  .foot-acc-body .foot-links { padding: 2px 2px 16px; }
  .foot-acc-body .foot-contact-row:first-child { margin-top: 2px; }
  .foot-acc-body > .foot-contact-row:last-child,
  .foot-acc-body .foot-contact-row:last-of-type { margin-bottom: 16px; }
  .foot-bottom { padding: 16px 0; }
}