/* ==========================================================================
   Bagdad Bread Factory - RESPONSIVE POLISH (phone / tablet / PC / wide)
   Loaded last. Layout + readability + touch fixes only; no text or features change.
   ========================================================================== */

/* ---------- 1. safety net for every device ---------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:90px; }
html,body{ max-width:100%; overflow-x:clip; }
img,video,svg,canvas,iframe{ max-width:100%; }
img,video{ height:auto; }
.hero-slide img, .home-product img, .category-tile img, [class*="card"] img, [class*="thumb"] img{ height:100%; }
h1,h2,h3,p,li,a,span{ overflow-wrap:anywhere; word-break:normal; }
table{ max-width:100%; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- 2. hero: aligned with the page container, headline never squeezed ---------- */
html body .hero-banner-content:not(#_):not(#_){
  max-width:none !important; width:100% !important; box-sizing:border-box !important;
  padding-left:max(6%, calc((100% - 1280px) / 2)) !important;
  padding-right:6% !important;
}
html body .hero-banner-content h1:not(#_):not(#_){ margin-left:0 !important; max-width:min(100%, 760px); letter-spacing:-.02em; text-wrap:balance; }
html body .hero-banner-content p:not(#_){ max-width:min(100%, 560px); }
html body .hero-banner-content .eyebrow:not(#_){ margin-left:0 !important; }

/* ---------- 3. PC / wide screens: header lines up with the 1280px page column ---------- */
@media (min-width:1400px){
  html body .header-main:not(#_):not(#_){ padding-left:max(88px, calc((100% - 1280px) / 2)) !important; padding-right:max(88px, calc((100% - 1280px) / 2)) !important; }
}
@media (min-width:2200px){
  html{ font-size:112.5%; }
}

/* ---------- 4. tablet ---------- */
@media (min-width:651px) and (max-width:1024px){
  html body .mobile-menu:not(#_)::before{ top:50% !important; margin-top:-11px !important; }
}

/* ---------- 5. phone + tablet: readable text, comfortable touch ---------- */
@media (max-width:900px){
  /* nothing smaller than ~11px */
  html body small:not(#_), html body .footer-copyright:not(#_), html body .checkout-note:not(#_),
  html body .market-page-label:not(#_), html body .summary-row small:not(#_), html body .announcement span:not(#_){ font-size:max(11.5px, .8em) !important; }
  html body .home-product small:not(#_), html body .home-product > div > span:not(#_), html body .home-product span:not(#_){ font-size:11.5px !important; }
  html body .category-tile span:not(#_){ font-size:11.5px !important; }
  html body .branch-mini-grid small:not(#_), html body .branch-mini-grid strong:not(#_){ font-size:12.5px !important; }
  html body .footer-legal a:not(#_){ font-size:12px !important; }
  html body form label:not(#_), html body .fulfillment-btn:not(#_){ font-size:12.5px !important; }
  html body .mobile-bottom-nav .mb-label:not(#_):not(#_){ font-size:11px !important; }
  html body .drawer-label:not(#_), html body #mobileNav .drawer-brand small:not(#_), html body #mobileNav .drawer-visit p.drawer-copy:not(#_){ font-size:11.5px !important; }

  /* inputs at 16px so iPhones never zoom the page on focus */
  html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not(#_), html body select:not(#_), html body textarea:not(#_){ font-size:16px !important; }

  /* page content must never hide under the fixed bottom bar */
  html body{ padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px)) !important; }
  html body .mobile-bottom-nav:not(#_){ padding-bottom:env(safe-area-inset-bottom, 0px) !important; }
}

/* touch devices: every tap target at least ~40px tall */
@media (pointer:coarse){
  html body .footer a:not(#_), html body footer a:not(#_), html body .footer-legal a:not(#_),
  html body .mp-breadcrumb a:not(#_), html body .section-title > a:not(#_), html body .google-review-link:not(#_){
    display:inline-flex; align-items:center; min-height:36px;
  }
  html body .footer-legal:not(#_){ gap:2px 14px; flex-wrap:wrap; justify-content:center; }
  html body main a[href^="#"]:not(#_){ display:flex; align-items:center; min-height:40px; }
  html body .branch-chips a:not(#_), html body .contact-branches a:not(#_){ min-height:40px; display:inline-flex; align-items:center; }
}

/* ---------- 6. small phones (320-360px) ---------- */
@media (max-width:360px){
  html body .hero-banner-content h1:not(#_):not(#_){ font-size:clamp(30px,9.4vw,36px) !important; }
  html body .header-main:not(#_):not(#_){ padding-left:10px !important; padding-right:10px !important; gap:8px !important; }
}

/* ---------- 7. phones held sideways ---------- */
@media (max-height:520px) and (orientation:landscape){
  html body .hero-banner:not(#_){ height:auto !important; min-height:340px !important; }
  html body .hero-banner-content:not(#_):not(#_){ padding-top:28px !important; padding-bottom:56px !important; }
  html body .hero-banner-content h1:not(#_):not(#_){ font-size:clamp(28px,6vw,40px) !important; }
  html body .mobile-bottom-nav:not(#_):not(#_){ height:58px !important; }
  html body .mobile-bottom-nav a:not(#_):not(#_), html body .mobile-bottom-nav button:not(#_):not(#_){ min-height:44px !important; flex-direction:row !important; gap:6px !important; justify-content:center !important; }
  html body .mobile-bottom-nav .mb-icon:not(#_), html body .mobile-bottom-nav svg:not(#_):not(#_){ height:22px !important; width:22px !important; }
  html body{ padding-bottom:calc(62px + env(safe-area-inset-bottom, 0px)) !important; }
  html body #mobileNav.mobile-nav:not(#_){ max-width:360px !important; }
}

/* ---------- 8. home category chips: same column as the sections below ---------- */
@media (min-width:901px){
  html body .market-home-categories:not(#_):not(#_){ width:min(1280px, 100%) !important; max-width:1280px !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; }
}

/* ---------- 9. tiny text is raised on PC too ---------- */
html body .feature-strip small:not(#_), html body .home-product small:not(#_), html body .home-product > div > span:not(#_),
html body .category-tile span:not(#_), html body .footer-copyright:not(#_), html body .checkout-note:not(#_){ font-size:max(11.5px, .8em) !important; }
html body .branch-mini-grid small:not(#_), html body .branch-mini-grid strong:not(#_){ font-size:12.5px !important; }

/* ---------- 10. small component tidy-ups ---------- */
html body .feature-strip > div:not(#_){ align-content:center !important; row-gap:2px !important; }
html body .feature-strip b:not(#_){ font-size:13.5px !important; line-height:1.25 !important; }
html body .feature-strip small:not(#_){ line-height:1.35 !important; }
html body .since-badge small:not(#_){ font-size:10px !important; letter-spacing:.04em !important; line-height:1.25 !important; }