/* ============================================================
   MOBILE.CSS  —  Phone fit-to-screen (≤768px)
   Keeps the desktop orbit + section-3 motion, just resizes
   everything so nothing is cropped or off-screen.
   Desktop/tablet untouched. Load LAST.
   ============================================================ */

@media (max-width: 768px) {

/* ── 0. Kill desktop-only chrome ── */
  .grain-overlay,
  .cursor-dot,
  .cursor-ring,
  .particle-canvas { display: none !important; }
  body { cursor: auto !important; }
  a, button { cursor: pointer !important; }

/* ── 1. NAVBAR ── */
  :root { --nav-height: 64px; }
  .navbar { height: 64px; }
  .nav-container { padding: 0 18px; }
  .logo-img { height: 50px !important; }
  .nav-links, .nav-actions { display: none !important; }
  .nav-hamburger { display: flex !important; }

/* ── 2. HERO CANVAS ── */
  .main-canvas {
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
  }

  /* Background: cover so the product sits on the pedestal scene, like
     desktop. Centre keeps the pedestal in view. */
  .hero-bg {
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* (no scrim — clean look) */

  /* ── ORBIT: same mechanism as desktop, just smaller. Pivot stays
     left-anchored & vertically centred exactly like desktop, so the
     existing scroll rotation arc is preserved — only the radius shrinks
     (set by mobile.js). Do NOT set `transform` here; script.js writes
     transform:rotate() to spin the wheel, and we must not block it. */
  .orbit-pivot {
    left: -10px !important;            /* slight off-screen-left like desktop */
    top: 52% !important;               /* nudge down so arc clears the navbar */
    translate: 0 -50% !important;      /* vertical centre via CSS translate, not transform */
    z-index: 6 !important;
  }

  /* Product items: sized so they stay FULLY visible through the entire
     rotation. They swing to the top/bottom of the orbit arc, so the
     product height + the radius must fit inside the visible zone (below
     the 64px navbar). Kept compact for that reason. */
  .product-item {
    width: 44vw !important;
    max-width: 200px !important;
    height: 56vw !important;
    max-height: 260px !important;
    margin-top: -28vw !important;      /* -(height/2) to centre on the orbit axis */
    margin-left: 0 !important;
  }

  .item-inner { padding: 8px !important; }

  /* The product image — big & crisp */
  .floating-img {
    max-width: 115% !important;
    max-height: 115% !important;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.4)) !important;
  }

  /* hide per-item text labels on the tiny phone orbit (keeps it clean) */
  .product-data { display: none !important; }

  /* category indicator pill stays near bottom, above nothing */
  .category-indicator {
    bottom: 26px !important;
    z-index: 8 !important;
  }

  /* Scroll room for the hero orbit rotation — enough to feel the
     motion, short enough not to scroll forever. (desktop = 800vh) */
  #orbitSpacer { height: 300vh !important; }

/* ── 3. SECTION 02 — bottle bigger + centered ── */
  .section-scroll-char {
    flex-direction: column !important;
    min-height: auto !important;
    padding: 70px 6vw 70px !important;
    gap: 0 !important;
    text-align: center !important;
    overflow: hidden !important;
  }
  .char-stage {
    order: 1 !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding-bottom: 28px;
  }
  .char-png {
    position: relative !important;
    width: 74vw !important;
    max-width: 340px !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 34px 60px rgba(217,184,168,0.4)) !important;
  }
  .char-shadow, .float-tag { display: none !important; }
  .char-text-panel {
    order: 2 !important;
    max-width: 100% !important;
    flex: none !important;
    width: 100%;
  }
  .char-eyebrow { justify-content: center !important; }
  .char-heading {
    font-size: clamp(2.2rem, 11vw, 3.4rem) !important;
    margin-bottom: 18px !important;
  }
  .char-body {
    margin: 0 auto 28px !important;
    max-width: 100% !important;
    font-size: 15px !important;
  }
  .char-stats { justify-content: center !important; }
  .char-cta { display: flex !important; justify-content: center !important; }

/* ── 4. SECTION 03 — keep the rotating orbit, just shrink stage ──
   premium.js positions items with a hardcoded 420px radius. We can't
   change that from CSS, so mobile.js overrides ORBIT_RADIUS. Here we
   just size the stage + items so they're big and on-screen. */
  .section-orbit-gallery {
    min-height: auto !important;
    padding: 64px 0 64px !important;
    overflow: hidden !important;
  }
  .og-ring, .og-glow { display: none !important; }

  .og-header { margin-bottom: 28px !important; padding: 0 24px !important; }
  .og-heading { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .og-sub { font-size: 13px !important; }

  /* Stage fills the phone width, stays square & centered */
  .og-orbital-stage {
    width: 94vw !important;
    height: 94vw !important;
    max-width: 460px !important;
    max-height: 460px !important;
    margin: 0 auto !important;
  }

  /* Orbit items — sized relative to viewport so they never clip.
     width = 34vw (≈ matches the JS radius geometry), max 150. */
  .og-orbit-item {
    width: 34vw !important;
    max-width: 150px !important;
    height: 44vw !important;
    max-height: 195px !important;
    /* center the item box on the orbit point */
    margin-left: -17vw !important;
    margin-top: -22vw !important;
  }
  .og-img {
    filter: drop-shadow(0 18px 40px rgba(217,184,168,0.4)) !important;
  }
  .og-center-label { font-size: 22px !important; }

  .og-footer { margin-top: 36px !important; padding: 0 24px !important; }
  .btn-luxury-full { width: 100%; justify-content: center; }

/* ── 5. FOOTER ── */
  .footer-cinema { padding: 60px 0 0 !important; }
  .fc-inner { padding: 0 22px 36px !important; }
  .fc-brand-giant { margin-bottom: 14px !important; }
  .fc-brand-text, .fc-brand-t { font-size: clamp(2rem, 12vw, 3.4rem) !important; white-space: nowrap !important; }
  .fc-tagline { font-size: clamp(1.1rem, 5vw, 1.6rem) !important; margin-bottom: 36px !important; }
  .fc-newsletter { max-width: 100% !important; margin-bottom: 44px !important; }
  .fc-links-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 18px !important;
    margin-bottom: 40px !important;
    padding-top: 32px !important;
  }
  .fc-bottom-strip { flex-direction: column !important; gap: 10px !important; text-align: center !important; }

} /* end ≤768px */


/* ── Smaller phones ── */
@media (max-width: 420px) {
  .product-item { width: 48vw !important; height: 60vw !important; margin-top: -30vw !important; }
  .char-png { width: 80vw !important; }
  .logo-img { height: 44px !important; }
}

@media (max-width: 400px) {
  .fc-links-grid { grid-template-columns: 1fr !important; }
}