/* ================================================================
   MOBILE FIX — Bottom Nav + Hero + Categories (clean, single block)
   ================================================================ */

/* ---- Bottom Navigation Bar ---- */
.pp-mobinav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background:#fff;border-top:1px solid var(--line);
  padding:env(safe-area-inset-bottom,0) 0 0;
  box-shadow:0 -2px 12px rgba(0,0,0,.06);
}
@media(max-width:768px){
  .pp-mobinav{display:flex!important}
  body{padding-bottom:60px!important}
}
.pp-mobinav a{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;text-decoration:none;color:var(--muted);
  font-size:.62rem;font-family:var(--sans);font-weight:500;
  padding:7px 0 6px;transition:color .2s;-webkit-tap-highlight-color:transparent;
}
.pp-mobinav a.active,.pp-mobinav a:active{color:var(--clay)}
.pp-mobinav__ico{font-size:1.3rem;line-height:1;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;transition:transform .2s;}
.pp-mobinav a:active .pp-mobinav__ico{transform:scale(.88)}
.pp-mobinav__badge{
  position:absolute;top:4px;right:50%;margin-right:-18px;
  min-width:16px;height:16px;background:var(--clay);color:#fff;
  border-radius:8px;font-size:.6rem;font-weight:700;line-height:16px;
  text-align:center;display:none;
}
.pp-mobinav__badge.show{display:inline-flex}

/* ---- All-in-one Mobile Fixes (<768px) ---- */
@media(max-width:768px){

  /* HERO — force flex column layout */
  .pp-hero{display:block!important;overflow:visible!important}
  .pp-hero-inner{
    display:flex!important;flex-direction:column!important;
    gap:28px;padding:32px 20px!important;max-width:100%!important;
    margin:0 auto!important;position:relative!important;z-index:2!important;
  }
  .pp-hero-copy{
    display:flex!important;flex-direction:column!important;
    align-items:center!important;text-align:center!important;max-width:100%!important;
  }
  .pp-hero-copy .pp-eyebrow{display:block!important;font-size:.65rem!important}
  .pp-hero-copy h1{
    display:block!important;font-size:clamp(1.3rem,5vw,1.75rem)!important;
    text-align:center!important;margin-bottom:12px!important;line-height:1.2!important;
  }
  .pp-hero-copy .pp-hero-sub{
    display:block!important;font-size:.88rem!important;color:var(--muted)!important;
    margin:0 auto 16px!important;max-width:420px!important;line-height:1.5!important;
  }
  .pp-hero-cta{
    display:flex!important;flex-wrap:wrap!important;
    justify-content:center!important;gap:10px!important;
  }
  .pp-hero-cta a{display:inline-flex!important}
  .pp-hero-trust{
    display:flex!important;flex-wrap:wrap!important;
    justify-content:center!important;gap:20px!important;margin-top:4px!important;
  }
  .pp-hero-visual{
    display:flex!important;width:100%;max-width:380px;
    margin:0 auto!important;order:-1!important;justify-content:center!important;
  }
  .pp-hero-card{
    display:block!important;width:100%;max-width:380px;
    margin:0 auto!important;transform:none!important;
  }
  .pp-hero-photo{
    display:flex!important;align-items:center!important;
    justify-content:center!important;border-radius:var(--radius-lg)!important;
  }
  .pp-hero-photo img{
    width:100%!important;height:auto!important;
    display:block!important;border-radius:var(--radius-lg)!important;
  }
  .pp-float-illu{display:none!important}

  /* Hide "Home" sidebar text */
  body.home #primary + #secondary,
  body.home .pp-hero + aside{display:none!important}

  /* CATEGORIES — compact swipeable cards */
  #collections{display:block!important;visibility:visible!important}
  #collections .pp-container{
    display:block!important;padding:0!important;
  }
  #collections .pp-sec-head{
    display:block!important;padding:30px 18px 6px!important;text-align:center!important;
  }
  #collections .pp-eyebrow{
    display:block!important;font-size:.64rem!important;
    letter-spacing:.14em!important;margin-bottom:5px!important;
  }
  #collections .pp-sec-head h2{
    display:block!important;font-size:1.2rem!important;margin-bottom:0!important;
  }
  .pp-cat-wrap{
    display:block!important;overflow:hidden!important;position:relative!important;
  }
  .pp-cat-track{
    display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch;
    scrollbar-width:none!important;gap:10px!important;
    padding:14px 16px 18px!important;
  }
  .pp-cat-track::-webkit-scrollbar{display:none!important}
  .pp-cat-card{
    display:flex!important;flex-direction:column!important;
    align-items:center!important;flex:0 0 auto!important;
    width:108px!important;min-width:108px!important;max-width:108px!important;
    scroll-snap-align:start!important;
    padding:12px 8px 10px!important;
    background:#FAFAF8!important;border-radius:12px!important;
    border:1px solid rgba(194,91,91,.08)!important;
  }
  .pp-cat-card:active{transform:scale(.95)!important}
  .pp-cat-ico{
    display:flex!important;align-items:center!important;
    justify-content:center!important;
    width:52px!important;height:52px!important;font-size:1.5rem!important;
    margin:0 0 6px!important;border-radius:50%!important;
    background:linear-gradient(145deg,#F5E6E6,#EED5D5)!important;
    border:2px solid transparent!important;
  }
  .pp-cat-card h3{
    display:block!important;font-size:.74rem!important;
    font-weight:600!important;color:var(--charcoal)!important;
    line-height:1.2!important;margin:0!important;text-align:center!important;
  }

  /* Edge fade for cat track */
  .pp-cat-wrap::after{
    content:"";position:absolute;right:0;top:0;bottom:0;
    width:36px;pointer-events:none;
    background:linear-gradient(to left,#fff,transparent);z-index:2;
  }
}