/* end IIFE */
/*
  ╔══════════════════════════════════════════════════════════════════╗
  ║  URBANESSENCE  ·  style.css                                      ║
  ║  Complete stylesheet — mobile-first, fully responsive            ║
  ╠══════════════════════════════════════════════════════════════════╣
  ║  TABLE OF CONTENTS                                               ║
  ║  ─────────────────                                               ║
  ║  1.  CSS Reset & Base                                            ║
  ║  2.  CSS Custom Properties (design tokens)                       ║
  ║  3.  Scroll Container & Full-screen Sections                     ║
  ║  4.  Keyframe Animations                                         ║
  ║  5.  Emanate Pulse Overlay                                       ║
  ║  6.  Top Brand Capsule  (#urbanessenceBtn)                       ║
  ║  7.  Drop Capsules  (.drop-capsule)                              ║
  ║  8.  Bottom Navigation Bar  (.bottom-bar)                        ║
  ║      8a. Circle Buttons  (.circle-btn)                           ║
  ║      8b. Centre Nav Pill  (.nav-pill / .nav-icon)                ║
  ║      8c. Earth Menu Wrapper  (.message-menu-wrapper)             ║
  ║      8d. Social Flyout  (.social-actions / .action-btn)          ║
  ║      8e. Earth Icon Rotation  (.msg-icon-wrap)                   ║
  ║  9.  Badge  (.badge)                                             ║
  ║  10. Responsive Breakpoints                                      ║
  ╚══════════════════════════════════════════════════════════════════╝
*/


/* ================================================================
   1. CSS RESET & BASE STYLES
   ─────────────────────────
   • Universal box-sizing so padding never causes overflow.
   • html/body locked to viewport height with overflow hidden to
     prevent the page itself from scrolling (the .scroll-container
     inside body handles all scrolling instead).
   • Body uses Jost for the brand aesthetic; system fonts as fallback.
   • -webkit-user-select:none prevents long-press text selection on mobile.
   ================================================================ */

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

html {
  height: 100%;
  overflow: hidden;          /* page itself must not scroll */
  overscroll-behavior: none; /* prevents iOS rubber-band on the html element */
}

body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  overscroll-behavior-y: contain;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, sans-serif;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent long-press text selection on mobile browsers */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  padding: 0;
}


/* ================================================================
   2. CSS CUSTOM PROPERTIES  (design tokens)
   ─────────────────────────────────────────
   Centralised values so every component stays consistent.
   Grouped into:
     - Safe area insets (iOS notch / Dynamic Island awareness)
     - Drop shadows (4 levels of elevation)
     - Easing curves (named for their "feel")
     - Per-brand-line colour tokens (gent/grace/edge)
     - Shared pill/button tokens
   ================================================================ */

:root {

  /* ── iOS safe areas ── */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Distance between bottom nav bar and the very bottom of the screen.
     Uses max() so it's at least 16px, OR safe-area + 10px on notched phones. */
  --nav-bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));

  /* Horizontal padding from screen edges to the bottom bar */
  --side-gap: clamp(12px, 4vw, 20px);

  /* ── Elevation shadows ──
     sm  = subtle card lift
     md  = floating button
     lg  = open/active state
     xl  = selected / highlighted state                              */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.12);
  --shadow-md: 0 8px 28px -4px rgba(0,0,0,.26);
  --shadow-lg: 0 18px 48px -8px rgba(0,0,0,.4);
  --shadow-xl: 0 30px 64px -14px rgba(0,0,0,.52);

  /* ── Easing curves ──
     premium     = slight overshoot (spring-like)
     out-expo    = fast-out very-slow-in (iOS native feel)
     in-out-silk = smooth symmetrical (scroll / fade)
     press       = snappy tactile response                           */
  --ease-premium:     cubic-bezier(.19,.91,.32,1.05);
  --ease-out-expo:    cubic-bezier(.16, 1, .3,  1);
  --ease-in-out-silk: cubic-bezier(.45, 0, .2,  1);
  --ease-press:       cubic-bezier(.25,.46,.45,.94);

  /* ── UrbanGent colour tokens (warm gold) ── */
  --gent-from:   rgba(255,245,225,.14);
  --gent-to:     rgba(255,235,195,.06);
  --gent-border: rgba(255,228,175,.28);
  --gent-glow:   rgba(255,210,130,.13);
  --gent-inset:  rgba(255,250,235,.12);

  /* ── UrbanGrace colour tokens (rose pink) ── */
  --grace-from:   rgba(255,218,232,.13);
  --grace-to:     rgba(255,198,218,.06);
  --grace-border: rgba(255,188,212,.28);
  --grace-glow:   rgba(255,165,200,.13);
  --grace-inset:  rgba(255,235,245,.12);

  /* ── UrbanEdge colour tokens (soft green) ── */
  --edge-from:   rgba(198,238,212,.12);
  --edge-to:     rgba(168,222,192,.05);
  --edge-border: rgba(158,218,182,.26);
  --edge-glow:   rgba(138,208,168,.12);
  --edge-inset:  rgba(220,248,232,.11);

  /* ── Shared glass pill / button tokens ──
     Used by .nav-pill, .circle-btn, .action-btn for consistency  */
  --pill-bg:     rgba(10,11,16,.78);
  --pill-border: rgba(255,255,255,.10);
  --pill-shadow:
    0 16px 40px -8px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.07);
  --pill-height: 58px;   /* height of circle buttons AND nav pill */
  --pill-radius: 100px;  /* full-round capsule shape */
}


/* ================================================================
   3. SCROLL CONTAINER & FULL-SCREEN SECTIONS
   ───────────────────────────────────────────
   .scroll-container
     • Takes exactly the full viewport height.
     • overflow-y:scroll + scroll-snap-type → mandatory snap every section.
     • touch-action:pan-y allows natural touch scrolling.
     • -webkit-overflow-scrolling:touch enables momentum scrolling on iOS.

   .fullscreen-section
     • Each section is sticky + 100vh — creates the "slide" effect.
     • z-index stacked so later sections paint over earlier ones on scroll.
     • contain:layout style → browser optimisation hint.
   ================================================================ */

.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: none;
  scroll-snap-type: y mandatory;   /* hard snap to each section */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.fullscreen-section {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  contain: layout style;
}

/* Individual section background colours */
#section1 {
  z-index: 1;
  background-image: url('images/homeimages/homeimage1.jpg');
}
#section2 {
  z-index: 2;
  background-image: url('images/homeimages/homeimage2.jpg');
}
#section3 {
  z-index: 3;
 background-image: url('images/homeimages/homeimage3.jpg');
}
#section4 {
  z-index: 4;
  background-color: #0a0c10;
}


/* ================================================================
   4. KEYFRAME ANIMATIONS
   ──────────────────────
   Defined once, reused across multiple components.

   slideDown  → top capsule enters from above on load
   slideUp    → bottom bar enters from below on load
   softFloat  → idle floating of drop-capsules (desktop only)
   badgePop   → cart badge micro-bounce on first render
   ================================================================ */

/* Top capsule slides down from above the viewport */
@keyframes slideDown {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-120px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Bottom bar slides up from below the viewport */
@keyframes slideUp {
  0%   { opacity: 0; transform: translateY(100px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Gentle float animation for drop-capsules when they're idle (desktop) */
@keyframes softFloat {
  0%, 100% {
    transform: translate(calc(-50% + var(--x-offset, 0px)), 0px) scale(1);
  }
  50% {
    transform: translate(calc(-50% + var(--x-offset, 0px)), -5px) scale(1.012);
  }
}

/* Badge pops in with a slight overshoot */
@keyframes badgePop {
  0%   { transform: scale(.5); opacity: 0; }
  70%  { transform: scale(1.18); }
  100% { transform: scale(1);   opacity: 1; }
}


/* ================================================================
   5. EMANATE PULSE OVERLAY  (#emanatePulse)
   ──────────────────────────────────────────
   A softly blurred radial gradient that briefly flashes around
   the top capsule when it is pressed. Creates a "glow" effect.
   • Positioned and sized dynamically by JS → triggerPulse().
   • pointer-events:none — invisible to touch/click.
   • transform: translate(-50%,-50%) so JS can set top/left to the
     centre of the capsule and the element centres on that point.
   ================================================================ */

.emanate-pulse {
  position: fixed;
  z-index: 15;
  border-radius: 100px;
  background: radial-gradient(
    circle,
    rgba(200,165,115,.38) 0%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  filter: blur(38px);
  transition: opacity .4s ease-out;
  transform: translate(-50%, -50%);
}


/* ================================================================
   6. TOP BRAND CAPSULE  (.urban-capsule)
   ──────────────────────────────────────
   The "URBANESSENCE" pill fixed to the top-centre of the screen.
   • Starts off-screen (translateY(-120px)) and slides in after .4s.
   • Glass-morphism look: backdrop-filter + semi-transparent bg.
   • Press/release states managed by JS adding .pressing / .releasing.
   • .pressing overrides transform using !important to beat the
     animation's final transform value.
   ================================================================ */

.urban-capsule {
  position: fixed;
  /* Push below the status bar / notch on iOS */
  top: calc(22px + var(--safe-top));
  left: 50%;

  z-index: 30;                       /* above sections, below drop-capsules */
  display: flex;
  align-items: center;
  justify-content: center;

  height: 52px;
  padding: 0 clamp(20px, 5vw, 48px); /* fluid horizontal padding */
  border-radius: 100px;              /* pill shape */

  /* Glass morphism background */
  background: linear-gradient(
    150deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.06) 100%
  );
  backdrop-filter: blur(50px) saturate(200%);
  -webkit-backdrop-filter: blur(50px) saturate(200%);

  border: 1px solid rgba(255,255,255,.22);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.09);

  /* Typography */
  color: #fff;
  font-size: clamp(.78rem, 3.6vw, 1.72rem); /* fluid — never clips on tiny screens */
  font-weight: 500;
  letter-spacing: clamp(.18em, 1.2vw, .3em);
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,.2);
  white-space: nowrap;

  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  will-change: transform, opacity;

  /* Hidden initially; animation fills forwards to opacity:1 */
  opacity: 0;
  transform: translateX(-50%) translateY(-120px);
  animation: slideDown 1s var(--ease-out-expo) forwards .4s;
  transition: box-shadow .42s var(--ease-in-out-silk), background .32s ease;
}

/* Hover brighten (desktop) */
.urban-capsule:hover {
  background: linear-gradient(
    150deg,
    rgba(255,255,255,.27) 0%,
    rgba(255,255,255,.11) 100%
  );
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.13);
}

/* JS adds .pressing on pointerdown — tactile scale-down */
.urban-capsule.pressing {
  transform: translateX(-50%) scale(.955) !important;
  transition: transform .1s var(--ease-press) !important;
}

/* JS adds .releasing on pointerup — spring back with overshoot */
.urban-capsule.releasing {
  transition: transform .38s var(--ease-premium) !important;
}


/* ================================================================
   7. DROP CAPSULES  (.drop-capsule)
   ──────────────────────────────────
   The three brand-line pills (UrbanEdge, UrbanGent, UrbanGrace)
   that emerge below the top capsule when it is pressed.

   Lifecycle managed entirely by JS (script.js):
     • Created dynamically → appended to a role="menu" container.
     • Animated from the capsule centre outward via applyOpenPositions().
     • Closed via applyClosedPositions().
     • Destroyed and removed from DOM after the close animation.

   Key mechanics:
     • position:fixed — they float over everything.
     • --x-offset custom property set per-capsule by JS so the softFloat
       animation can translate along the correct horizontal axis.
     • .idle-float → gentle bob animation when the menu is resting open.
     • .selected  → elevated glow + slight lift when user has picked one.
   ================================================================ */

.drop-capsule {
  position: fixed;
  z-index: 20;
  left: 50%;
  top: 0;                     /* JS overrides top dynamically */
  display: flex;
  align-items: center;
  justify-content: center;

  height: 46px;
  padding: 0 clamp(14px, 3.5vw, 30px);
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.18);

  backdrop-filter: blur(48px) saturate(180%);
  -webkit-backdrop-filter: blur(48px) saturate(180%);

  color: rgba(255,255,255,.9);
  font-size: clamp(.6rem, 2.4vw, 1.02rem);
  font-weight: 400;
  letter-spacing: clamp(.08em, .8vw, .16em);
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
  white-space: nowrap;

  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  pointer-events: none;         /* enabled via JS when .emerged */

  will-change: transform, opacity, top;
  transform: translate(-50%,-50%) scale(.88);
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  /* Smooth multi-property transition for open/close */
  transition:
    transform .82s var(--ease-out-expo),
    opacity   .65s var(--ease-in-out-silk),
    top       .82s var(--ease-out-expo),
    box-shadow .4s ease,
    background .28s ease,
    border-color .28s ease;
}

/* ── Per-brand colour overrides ── */
.drop-capsule[data-id="gent"] {
  background: linear-gradient(145deg, var(--gent-from) 0%, var(--gent-to) 100%);
  border-color: var(--gent-border);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--gent-inset), 0 4px 20px var(--gent-glow);
}
.drop-capsule[data-id="grace"] {
  background: linear-gradient(145deg, var(--grace-from) 0%, var(--grace-to) 100%);
  border-color: var(--grace-border);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--grace-inset), 0 4px 20px var(--grace-glow);
}
.drop-capsule[data-id="edge"] {
  background: linear-gradient(145deg, var(--edge-from) 0%, var(--edge-to) 100%);
  border-color: var(--edge-border);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--edge-inset), 0 4px 20px var(--edge-glow);
}

/* JS adds .emerged once animation positions are applied → enables clicks */
.drop-capsule.emerged { pointer-events: auto; }
.drop-capsule[data-id="gent"].emerged  { box-shadow: var(--shadow-lg), inset 0 1px 0 var(--gent-inset),  0 8px 28px var(--gent-glow);  }
.drop-capsule[data-id="grace"].emerged { box-shadow: var(--shadow-lg), inset 0 1px 0 var(--grace-inset), 0 8px 28px var(--grace-glow); }
.drop-capsule[data-id="edge"].emerged  { box-shadow: var(--shadow-lg), inset 0 1px 0 var(--edge-inset),  0 8px 28px var(--edge-glow);  }

/* .pressing — quick scale-down for tactile feel */
.drop-capsule.pressing {
  transition:
    transform .1s var(--ease-press),
    box-shadow .1s ease,
    background .1s ease,
    border-color .1s ease,
    opacity .65s var(--ease-in-out-silk),
    top .82s var(--ease-out-expo) !important;
}
.drop-capsule[data-id="gent"].pressing  {
  transform: translate(calc(-50% + var(--x-offset,0px)), 0) scale(.91) !important;
  background: linear-gradient(145deg, rgba(255,245,220,.22) 0%, rgba(255,235,190,.1) 100%) !important;
  border-color: rgba(255,222,165,.44) !important;
}
.drop-capsule[data-id="grace"].pressing {
  transform: translate(calc(-50% + var(--x-offset,0px)), 0) scale(.91) !important;
  background: linear-gradient(145deg, rgba(255,215,232,.22) 0%, rgba(255,195,218,.1) 100%) !important;
  border-color: rgba(255,182,208,.44) !important;
}
.drop-capsule[data-id="edge"].pressing {
  transform: translate(calc(-50% + var(--x-offset,0px)), 0) scale(.91) !important;
  background: linear-gradient(145deg, rgba(195,238,212,.22) 0%, rgba(165,222,192,.1) 100%) !important;
  border-color: rgba(148,215,178,.42) !important;
}

/* .releasing — spring back */
.drop-capsule.releasing {
  transition:
    transform .42s var(--ease-premium),
    box-shadow .42s ease,
    background .32s ease,
    border-color .32s ease,
    opacity .65s var(--ease-in-out-silk),
    top .82s var(--ease-out-expo) !important;
}

/* .selected — user has tapped this brand line */
.drop-capsule.selected {
  border-width: 1.5px;
  transform: translate(calc(-50% + var(--x-offset,0px)), -3px) scale(1.04);
  text-shadow: 0 1px 14px rgba(0,0,0,.28), 0 0 10px rgba(255,255,255,.18);
  transition:
    transform .28s var(--ease-premium),
    box-shadow .32s ease,
    background .28s ease,
    border-color .22s ease;
}
.drop-capsule[data-id="gent"].selected  {
  background: linear-gradient(145deg, rgba(255,248,228,.22) 0%, rgba(255,238,200,.1) 100%);
  border-color: rgba(255,222,155,.48);
  box-shadow: var(--shadow-xl), inset 0 1px 0 var(--gent-inset), 0 0 28px var(--gent-glow);
}
.drop-capsule[data-id="grace"].selected {
  background: linear-gradient(145deg, rgba(255,222,238,.22) 0%, rgba(255,202,222,.1) 100%);
  border-color: rgba(255,182,212,.48);
  box-shadow: var(--shadow-xl), inset 0 1px 0 var(--grace-inset), 0 0 28px var(--grace-glow);
}
.drop-capsule[data-id="edge"].selected  {
  background: linear-gradient(145deg, rgba(200,242,218,.22) 0%, rgba(170,228,198,.1) 100%);
  border-color: rgba(148,215,178,.46);
  box-shadow: var(--shadow-xl), inset 0 1px 0 var(--edge-inset), 0 0 28px var(--edge-glow);
}

/* .idle-float — gentle bob when menu rests open (desktop only) */
.drop-capsule.idle-float {
  animation: softFloat 3.8s ease-in-out infinite;
}


/* ================================================================
   8. BOTTOM NAVIGATION BAR  (.bottom-bar)
   ─────────────────────────────────────────
   Outer fixed container. Three direct children:
     [.circle-btn Home]  [.nav-pill-wrap]  [.message-menu-wrapper]

   align-items:flex-end ensures flyout expands UPWARD without
   mis-aligning the three items vertically.

   pointer-events:none on the bar + auto on children means the
   transparent gap between items doesn't eat touch events.
   ================================================================ */

.bottom-bar {
  position: fixed;
  bottom: var(--nav-bottom);
  left: var(--side-gap);
  right: var(--side-gap);
  z-index: 30;

  display: flex;
  align-items: flex-end;          /* flyout grows upward from earth button */
  justify-content: space-between;
  gap: 10px;

  opacity: 0;
  animation: slideUp 1s var(--ease-out-expo) forwards .7s;

  pointer-events: none;           /* bar itself transparent to touch */
}

/* Every direct child gets touch events back */
.bottom-bar > * { pointer-events: auto; }


/* ================================================================
   8a. CIRCLE BUTTONS  (.circle-btn)
   ───────────────────────────────────
   Shared styles for the Home button (left) and Earth button (right).
   • Glass morphism: dark bg + backdrop-filter + subtle border.
   • Size controlled by --pill-height token (responsive via @media).
   • .active state lights up the icon and shows the dot indicator.
   • Press/release states managed by JS attaching .pressing/.releasing.
   • ::before pseudo-element = highlight background behind icon when active.
   • .nav-dot gets z-index:1 to paint above the ::before pseudo-element.
   ================================================================ */

.circle-btn {
  flex-shrink: 0;
  width:  var(--pill-height);
  height: var(--pill-height);
  border-radius: var(--pill-radius);

  background: var(--pill-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--pill-border);
  box-shadow: var(--pill-shadow);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  position: relative;             /* context for ::before and .nav-dot */

  transition: transform .18s var(--ease-press), opacity .18s ease;
}

/* SVG icon inside circle buttons */
.circle-btn svg {
  width: 22px;
  height: 22px;
  stroke: rgba(255,255,255,.35);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke .22s ease;
  flex-shrink: 0;
}

/* Active state — lit icon colour */
.circle-btn.active svg { stroke: #f0e4d0; }

/* Indicator dot (small circle at bottom of button) */
.circle-btn .nav-dot {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  z-index: 1;                     /* must be above ::before highlight */
  transition: background .22s ease, transform .22s var(--ease-premium);
}
.circle-btn.active .nav-dot {
  background: #f0e4d0;
  transform: translateX(-50%) scale(1.25);
}

/* Highlight background behind the active icon */
.circle-btn::before {
  content: "";
  position: absolute;
  inset: 7px 6px;
  border-radius: 100px;
  background: transparent;
  transition: background .24s ease;
  z-index: 0;                     /* below .nav-dot */
}
.circle-btn.active::before { background: rgba(255,255,255,.08); }

/* JS .pressing → scale down for tactile feedback */
.circle-btn.pressing {
  transform: scale(.87);
  opacity: .62;
  transition: transform .08s var(--ease-press), opacity .08s ease !important;
}

/* JS .releasing → spring back */
.circle-btn.releasing {
  transition: transform .4s var(--ease-premium), opacity .28s ease !important;
}


/* ================================================================
   8b. CENTRE NAV PILL  (.nav-pill-wrap / .nav-pill / .nav-icon)
   ───────────────────────────────────────────────────────────────
   .nav-pill-wrap
     • flex:1 → expands to fill all space between the two circle btns.
     • Centres the pill inside that space.

   .nav-pill
     • The frosted-glass pill containing Account | Search | Cart.
     • max-width:300px prevents it becoming too wide on large screens.

   .nav-icon
     • Each icon button inside the pill.
     • flex:1 makes them split the pill width equally.
     • min-width:44px meets WCAG 2.5.5 touch target size.
     • ::before pseudo-element = active highlight (NO backdrop-filter —
       nesting backdrop-filter inside another is buggy on iOS Safari).
   ================================================================ */

.nav-pill-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.nav-pill {
  display: flex;
  align-items: center;
  height: var(--pill-height);
  padding: 0 8px;
  border-radius: var(--pill-radius);

  background: var(--pill-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--pill-border);
  box-shadow: var(--pill-shadow);

  isolation: isolate;              /* new stacking context for children */
  width: 100%;
  max-width: 300px;                /* wider pill for better visual balance */
}

.nav-icon {
  flex: 1;
  height: 100%;
  min-width: 44px;                 /* WCAG 2.5.5 minimum touch target */
  border-radius: var(--pill-radius);
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  transition: transform .18s var(--ease-press), opacity .18s ease;
}

/* Highlight pseudo-element — NO backdrop-filter (iOS Safari bug) */
.nav-icon::before {
  content: "";
  position: absolute;
  inset: 8px 4px;
  border-radius: var(--pill-radius);
  background: transparent;
  transition: background .24s ease;
  z-index: 0;
}
.nav-icon.active::before { background: rgba(255,255,255,.08); }

/* SVG icon inside pill buttons */
.nav-icon svg {
  width: 20px;
  height: 20px;
  stroke: rgba(255,255,255,.32);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke .22s ease;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.nav-icon.active svg { stroke: #f0e4d0; }

/* Indicator dot */
.nav-icon .nav-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  transition: background .22s ease, transform .22s var(--ease-premium);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.nav-icon.active .nav-dot { background: #f0e4d0; transform: scale(1.25); }

/* Thin separator between pill items */
.nav-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}

/* Pill icon press states */
.nav-icon.pressing {
  transform: scale(.87);
  opacity: .62;
  transition: transform .08s var(--ease-press), opacity .08s ease !important;
}
.nav-icon.releasing {
  transition: transform .4s var(--ease-premium), opacity .28s ease !important;
}


/* ================================================================
   8c. EARTH MENU WRAPPER  (.message-menu-wrapper)
   ─────────────────────────────────────────────────
   • position:relative → context for the absolutely-positioned flyout.
   • width fixed to --pill-height so it doesn't stretch in the flex row.
   • The wrapper itself is a flex-end child of .bottom-bar so it
     stays at the same baseline as the pill and home button.
   ================================================================ */

.message-menu-wrapper {
  position: relative;
  flex-shrink: 0;
  width: var(--pill-height);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}


/* ================================================================
   8d. SOCIAL FLYOUT  (.social-actions / .action-btn)
   ────────────────────────────────────────────────────
   .social-actions
     • position:absolute; bottom:calc(100% + 12px) → floats ABOVE
       the earth button, 12px gap, with ZERO effect on bar layout.
     • flex-direction:column-reverse → DOM order determines which
       button is closest to earth. Facebook is [nth-child(1)] so it
       appears at the bottom (closest to thumb), Call at top.
     • Default: pointer-events:none + buttons are hidden.
     • .expanded state: pointer-events:auto + buttons visible.

   .action-btn (each social button)
     • Hidden default: scale(.7) translateY(20px) opacity:0
       (below their final position, so they rise up on open)
     • Shown state: scale(1) translateY(0) opacity:1
     • On CLOSE the reverse: they fall back down to
       scale(.7) translateY(20px) — creating "come down" effect.

   STAGGER DELAYS:
     Opening: Facebook first (0.02s), Call last (0.17s) → float up.
     Closing:  Call first (0s), Facebook last (0.15s) → fall down.
     .collapsing class (added by JS) overrides the opening delays
     with closing delays, then is removed after 420ms.
   ================================================================ */

.social-actions {
  /* Float above the earth button — zero layout impact */
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);

  /* Stack items bottom→top (Facebook=bottom, Call=top) */
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 9px;

  pointer-events: none;    /* disabled by default */
}

/* When expanded, the container accepts touch events */
.message-menu-wrapper.expanded .social-actions {
  pointer-events: auto;
}

/* Individual social action button */
.action-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;

  background: var(--pill-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--pill-border);
  box-shadow: var(--pill-shadow);

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  /* ── Hidden default state ──
     Positioned BELOW final resting place (translateY positive = down)
     So opening = "rising up", closing = "falling back down". */
  opacity: 0;
  transform: scale(.7) translateY(20px);
  pointer-events: none;

  /* Transition for both open and close */
  transition: transform .32s var(--ease-premium), opacity .24s ease;
}

/* SVG icon inside action button */
.action-btn svg {
  width: 20px;
  height: 20px;
  stroke: rgba(255,255,255,.60);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke .2s ease;
}

/* Facebook icon needs fill, not stroke */
.action-btn[data-action="facebook"] svg {
  fill: rgba(255,255,255,.55);
  stroke: none;
}

/* Instagram uses both stroke (outer square) and needs fill for dot */
.action-btn[data-action="instagram"] svg {
  stroke-width: 1.5;
}

/* Active press feedback */
.action-btn.pressing  { opacity: .65; }
.action-btn.releasing { transition: transform .38s var(--ease-premium), opacity .28s ease; }

/* ── OPEN state: buttons rise up with staggered delays ── */
.message-menu-wrapper.expanded .action-btn {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
/* Stagger: Facebook (nth-child 1) = first, Call (nth-child 4) = last */
.message-menu-wrapper.expanded .action-btn:nth-child(1) { transition-delay: .02s; }
.message-menu-wrapper.expanded .action-btn:nth-child(2) { transition-delay: .07s; }
.message-menu-wrapper.expanded .action-btn:nth-child(3) { transition-delay: .12s; }
.message-menu-wrapper.expanded .action-btn:nth-child(4) { transition-delay: .17s; }

/* ── CLOSE state (.collapsing added/removed by JS):
   Reverse stagger — Call falls first, Facebook falls last.
   Buttons animate BACK to translateY(20px) = downward = "come down". ── */
.message-menu-wrapper.collapsing .action-btn:nth-child(1) { transition-delay: .15s; }
.message-menu-wrapper.collapsing .action-btn:nth-child(2) { transition-delay: .10s; }
.message-menu-wrapper.collapsing .action-btn:nth-child(3) { transition-delay: .05s; }
.message-menu-wrapper.collapsing .action-btn:nth-child(4) { transition-delay: .00s; }


/* ================================================================
   8e. EARTH ICON ROTATION  (.msg-icon-wrap)
   ──────────────────────────────────────────
   IMPORTANT: Rotation is on .msg-icon-wrap (inner span), NOT on
   the button itself (.circle-btn). This separation means:

     • Button's transform = scale (JS press animation) — unaffected.
     • Icon's transform   = rotate (CSS class) — unaffected by scale.

   Without this separation, opening the menu then pressing the button
   would snap rotation to 0° because scale() and rotate() on the
   same element override each other.

   Open:  rotates 180° (half-spin)
   Close: CSS transition animates it back to 0° automatically when
          .expanded is removed — creating the "reverse rotate" effect.
   ================================================================ */

.msg-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .45s var(--ease-premium);
  pointer-events: none;
}

/* Rotate icon 180° when flyout is open */
.message-menu-wrapper.expanded .msg-icon-wrap {
  transform: rotate(180deg);
}

/* When collapsing, class is removed → transition animates back to 0° */


/* ================================================================
   9. BADGE  (.badge)
   ──────────────────
   The red notification pill on the Cart button.
   • Absolutely positioned top-right of the button.
   • Pops in with a slight overshoot animation on first render.
   ================================================================ */

.badge {
  position: absolute;
  top: 8px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  border-radius: 100px;
  background: linear-gradient(135deg, #e05c35, #c04020);
  border: 1.5px solid rgba(10,11,16,.95);
  font-family: "Jost", sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  letter-spacing: 0;
  z-index: 2;
  animation: badgePop .35s var(--ease-premium) forwards;
}


/* ================================================================
   10. RESPONSIVE BREAKPOINTS
   ──────────────────────────
   Mobile-first: base styles target all screens.
   Breakpoints only shrink/adjust — never introduce new layouts.

   480px  → most Android phones landscape / small tablets portrait
   400px  → compact phones (iPhone SE, Galaxy A series small)
   340px  → very small / old phones (Galaxy Fold outer screen, etc.)

   Desktop (> 680px): idle-float animation enabled for drop-capsules.
   ================================================================ */

/* ── Drop-capsule mobile adjustments ─── */
@media (max-width: 680px) {
  /* Disable idle float — too distracting on mobile */
  .drop-capsule.idle-float { animation: none; }

  /* Stronger lift + thicker border for selected on mobile */
  .drop-capsule.selected {
    transform: translate(calc(-50% + var(--x-offset,0px)), -4px) scale(1.06) !important;
    border-width: 2px;
  }
}

/* ── 480px: tweak gaps ─── */
@media (max-width: 480px) {
  .bottom-bar { gap: 8px; }
}

/* ── 400px: smaller touch targets on compact phones ─── */
@media (max-width: 400px) {
  :root {
    --pill-height: 52px;   /* slightly shorter buttons */
    --side-gap: 10px;      /* tighter edge margins */
  }

  .nav-pill     { max-width: 200px; padding: 0 6px; }
  .nav-icon svg { width: 18px; height: 18px; }
  .circle-btn svg { width: 20px; height: 20px; }
  .action-btn   { width: 44px; height: 44px; }
  .action-btn svg { width: 18px; height: 18px; }
  .urban-capsule  { letter-spacing: .17em; }
  .drop-capsule   { letter-spacing: .07em; }
}

/* ── 340px: very small screens ─── */
@media (max-width: 340px) {
  :root {
    --pill-height: 48px;
    --side-gap: 8px;
  }

  .nav-pill   { max-width: 175px; padding: 0 4px; }
  .bottom-bar { gap: 6px; }
  .action-btn { width: 40px; height: 40px; }
  .social-actions { gap: 7px; }
}

/* ================================================================
   PROFILE SLIDE‑UP PANEL
   ================================================================ */
.profile-panel {
  position: fixed;
  left: var(--side-gap);
  right: var(--side-gap);
  /* Position it just above the bottom navigation bar */
  bottom: calc(var(--nav-bottom) + var(--pill-height) + 12px);
  z-index: 25;                     /* below bottom bar (z-index:30) */
  
  background: var(--pill-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--pill-border);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
  
  padding: 20px 18px;
  color: #fff;
  
  /* Hidden by default – slid down completely */
  transform: translateY(calc(100% + 30px));
  opacity: 0;
  transition: transform 0.45s var(--ease-premium),
              opacity 0.3s ease;
  pointer-events: none;
}

/* Open state – slides up into view */
.profile-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.profile-header h3 {
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  color: #f0e4d0;
  margin: 0;
}

.profile-close {
  background: rgba(255,255,255,0.08);
  border: none;
  color: rgba(255,255,255,0.8);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.profile-close:hover {
  background: rgba(255,255,255,0.15);
}

.profile-content {
  font-size: 0.95rem;
  opacity: 0.85;
  line-height: 1.5;
}

/* Responsive – smaller padding on narrow screens */
@media (max-width: 400px) {
  .profile-panel {
    padding: 16px 14px;
  }
}

/* ================================================================
   AUTH PANEL  — glass morphism modal, matches brand aesthetic
   ================================================================ */

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background .4s ease;
}
.auth-overlay.visible {
  background: rgba(0, 0, 0, .42);
  pointer-events: auto;
}

.auth-panel {
  position: fixed;
  z-index: 50;
  top: 50%;
  left: 50%;

  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, .13) 0%,
    rgba(255, 255, 255, .05) 100%
  );
  backdrop-filter: blur(52px) saturate(200%);
  -webkit-backdrop-filter: blur(52px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 24px;
  box-shadow:
    0 30px 64px -14px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  padding: 28px 28px 24px;

  /* START STATE — invisible, slightly below, scaled down */
  transform: translate(-50%, -44%) scale(.88);
  opacity: 0;
  pointer-events: none;

  transition:
    transform .55s var(--ease-out-expo),
    opacity   .4s ease;

  -webkit-user-select: none;
  user-select: none;
}

/* OPEN STATE */
.auth-panel.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Close X button */
.auth-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .18s var(--ease-press);
}
.auth-close:hover { background: rgba(255, 255, 255, .14); }
.auth-close:active { transform: scale(.88); }
.auth-close svg {
  width: 12px; height: 12px;
  stroke: rgba(255, 255, 255, .45);
  fill: none; stroke-width: 2; stroke-linecap: round;
}

/* Logo mark */
.auth-logo-mark {
  text-align: center;
  font-size: .62rem;
  letter-spacing: .26em;
  color: rgba(255, 255, 255, .32);
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Welcome heading */
.auth-welcome {
  text-align: center;
  margin-bottom: 20px;
}
.auth-welcome h2 {
  font-size: 1.12rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.auth-welcome p {
  font-size: .74rem;
  color: rgba(255, 255, 255, .38);
  letter-spacing: .02em;
}

/* Tab row */
.auth-tabs {
  display: flex;
  gap: 0;
  background: rgba(255, 255, 255, .06);
  border-radius: 100px;
  padding: 3px;
  margin-bottom: 20px;
}
.auth-tab {
  flex: 1;
  padding: 7px 0;
  border: none;
  background: none;
  border-radius: 100px;
  font-family: "Jost", sans-serif;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
  cursor: pointer;
  font-weight: 500;
  transition: background .28s ease, color .28s ease;
  -webkit-tap-highlight-color: transparent;
}
.auth-tab.active {
  background: rgba(255, 255, 255, .14);
  color: #f0e4d0;
}

/* Forms wrapper — animated height */
.auth-forms-wrap {
  position: relative;
  overflow: hidden;
  transition: height .42s var(--ease-out-expo);
}

/* Individual form slides */
.auth-form-slide {
  transition: opacity .28s ease, transform .32s var(--ease-out-expo);
}
.auth-form-slide.hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0; left: 0; right: 0;
}

/* Field */
.auth-field { margin-bottom: 13px; }
.auth-label {
  display: block;
  font-size: .67rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .36);
  margin-bottom: 5px;
}
.auth-input {
  width: 100%;
  height: 42px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: .85rem;
  padding: 0 16px;
  outline: none;
  -webkit-user-select: auto;
  user-select: auto;
  transition: border-color .22s ease, background .22s ease;
}
.auth-input::placeholder { color: rgba(255, 255, 255, .22); }
.auth-input:focus {
  border-color: rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .10);
}

/* Submit button */
.auth-submit {
  width: 100%;
  height: 44px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .22);
  margin-top: 6px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, .22) 0%,
    rgba(255, 255, 255, .09) 100%
  );
  color: #fff;
  font-family: "Jost", sans-serif;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
  transition:
    transform .18s var(--ease-press),
    background .28s ease,
    box-shadow .28s ease;
  -webkit-tap-highlight-color: transparent;
}
.auth-submit:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, .30) 0%,
    rgba(255, 255, 255, .14) 100%
  );
  box-shadow:
    0 8px 28px -4px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .13);
}
.auth-submit:active { transform: scale(.96); }

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
}
.auth-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .09);
}
.auth-divider-txt {
  font-size: .64rem;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .26);
  text-transform: uppercase;
}

/* Social buttons */
.auth-social-row { display: flex; gap: 10px; }
.auth-social-btn {
  flex: 1;
  height: 40px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .58);
  font-family: "Jost", sans-serif;
  font-size: .72rem;
  letter-spacing: .05em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition:
    background .22s ease,
    border-color .22s ease,
    transform .18s var(--ease-press);
  -webkit-tap-highlight-color: transparent;
}
.auth-social-btn:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .2);
}
.auth-social-btn:active { transform: scale(.95); }
.auth-social-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Fix browser autofill background override on auth inputs */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus,
.auth-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.06) inset !important;
  box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.06) inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  border-color: rgba(255, 255, 255, .32) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}