/* ==========================================================================
   mobile-fixes.css — last-enqueued corrective layer. Bump LZ_VERSION on edits.
   Sections mirror mockup @media breakpoints (verbatim) + hard-won mobile fixes.
   ========================================================================== */

/* 1. HERO / STORY stack */
@media(max-width:1100px){
  .footer .top{grid-template-columns:1fr 1fr 1fr}
  .footer .brand-col{grid-column:1/-1}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-text{padding:60px 40px;max-width:none;text-align:center;align-items:center}
  .hero-text p{max-width:50ch}
  .hero-img{height:50vh;min-height:380px}
  .hero-img::after{background:linear-gradient(to bottom,var(--soft) 0%,transparent 20%)}
  .story .wrap{grid-template-columns:1fr;gap:40px}
}

/* 2. NAV → burger */
@media(max-width:820px){
  .nav{display:none}
  .burger{display:grid;place-items:center;background:none;border:none;cursor:pointer;color:var(--brand)}
  .burger svg{width:22px;height:22px}
  .sec{padding:70px 0}
  .prod-section{padding:70px 0}
  .cats .grid{grid-template-columns:1fr 1fr}
  .reviews .grid{grid-template-columns:1fr}
  .usp .wrap{grid-template-columns:1fr 1fr;gap:0}
  .usp-item{padding:20px 10px}
  .toolbar .wrap{justify-content:center}
  .page-hero{padding:50px 0 44px}
  .shop-grid{padding:40px 0 70px}
}

/* 3. small phones */
@media(max-width:560px){
  :root{--wrap-pad:20px}
  .hero-text{padding:50px 20px}
  .hero-text h1{font-size:36px}
  .cats .grid{grid-template-columns:1fr}
  .news form{flex-direction:column}
  .news input{border-right:1px solid var(--secondary);text-align:center}
  .footer .top{grid-template-columns:1fr 1fr}
  .story .wrap{gap:30px}
  .page-hero h1{font-size:32px}
  /* long product titles never overflow 2-col grid */
  .lz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lz-grid .prod-card{min-width:0}
  .prod-info h4{overflow-wrap:anywhere}
}