/* Phone fixes from the Oct 2026 mobile review. Loaded after main.css and motion.css. */
.nl-btn{color:#232221}
@media (max-width:640px){
  /* Promo bar: one line */
  .promo-bar{padding:9px 12px;gap:10px;align-items:center}
  .promo-bar p{font-size:14px;line-height:1.3}
  .promo-bar .promo-more{display:none}
  .promo-bar a{white-space:nowrap;flex:none}
  /* Header: logo fits between the menu and cart buttons */
  .mnav-logo{height:auto;width:auto;max-width:calc(100vw - 168px);max-height:18px}
  /* Breadcrumb: less air, one line */
  nav.crumbs{padding-top:16px;padding-bottom:12px}
  nav.crumbs ul{flex-wrap:nowrap;min-width:0;overflow:hidden}
  nav.crumbs li{flex:none;white-space:nowrap}
  nav.crumbs li:last-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  nav.crumbs li:last-child *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Home: stop section padding stacking into big empty gaps */
  main.home > section.py-12,main.home > section.pb-12,main.home > section.pb-16{padding-bottom:28px}
  main.home > section.py-12{padding-top:28px}
  main.home #offer > section{padding-top:20px;padding-bottom:36px}
  /* Hero: readable text over the photo, solid button */
  .hero5 [class*="bg-gradient-to-t"]{height:80%;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,0) 100%)}
  .hero5 a.bg-success-light{background:#93c43d;color:#232221}
}
/* Home hero: one still card below desktop width (no sideways swipe). Desktop keeps the three-card layout. */
@media (max-width:1279px){
  .hero5 .hero-side{display:none}
  .hero5 .hero-main{width:100%!important;flex:1 1 auto}
  .hero5 .hero-main img{object-position:center 20%}
}