/* Bagdad Bread Factory — phone, tablet and small-desktop fit
   Loaded last on every page so it wins over older footer rules.
   One site for every screen. No separate phone website. */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
}

/* Brand name must wrap on spaces, never mid-word. */
.site-footer .footer-lockup,
.site-footer .footer-lockup span,
.site-footer #footerSiteName,
.footer-brand h3,
.footer-lockup h3 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
}

.site-footer #footerSiteName,
.footer-lockup h3 {
  display: block;
  max-width: 16em;
  line-height: 1.15 !important;
}

/* Tablet: brand and contact full width, shop + help side by side. */
@media (max-width: 980px) {
  .site-footer .footer-grid,
  body.bbf-marketplace-page .footer-grid,
  body.bbf-orders-normal-page .footer-grid,
  .footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 22px !important;
    width: 100% !important;
  }

  .site-footer .footer-brand,
  .site-footer .footer-contact,
  body.bbf-marketplace-page .footer-brand,
  body.bbf-orders-normal-page .footer-brand,
  .footer-brand,
  .footer-contact {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }
}

/* Phone: the layout in the screenshot. Brand gets the full row. */
@media (max-width: 760px) {
  .site-footer {
    margin-top: 20px !important;
  }

  .site-footer .footer-wrap {
    width: min(100% - 28px, 640px) !important;
    padding: 26px 0 calc(28px + env(safe-area-inset-bottom)) !important;
  }

  .site-footer .footer-grid,
  body.bbf-marketplace-page .footer-grid,
  body.bbf-orders-normal-page .footer-grid,
  .footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 18px !important;
  }

  .site-footer .footer-brand,
  .site-footer .footer-contact,
  .footer-brand,
  .footer-contact {
    grid-column: 1 / -1 !important;
  }

  .site-footer .footer-lockup {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  .site-footer .footer-lockup img {
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 62px !important;
  }

  .site-footer .footer-lockup span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .site-footer #footerSiteName,
  .site-footer .footer-lockup h3 {
    font-size: 22px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
    max-width: none !important;
  }

  .site-footer .footer-lockup small {
    margin-top: 6px !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
  }

  .site-footer #siteAddress,
  .site-footer .footer-note {
    max-width: 36em !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .site-footer h4 {
    margin: 16px 0 6px !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
  }

  .site-footer .footer-grid a {
    min-height: 40px !important;
    font-size: 15px !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .site-footer .footer-contact a {
    overflow-wrap: anywhere !important;
  }

  .site-footer .footer-social {
    margin-top: 16px !important;
  }

  .site-footer .footer-trust {
    margin-top: 18px !important;
    gap: 8px !important;
  }

  .site-footer .footer-trust span {
    font-size: 12px !important;
  }

  .site-footer .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 13px !important;
  }

  .site-footer .footer-legal {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .site-footer .footer-top {
    right: 14px !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }

  .site-header {
    height: auto !important;
    min-height: 68px;
    padding: 8px 14px !important;
    gap: 8px !important;
  }

  .logo-wrap {
    min-width: 0 !important;
    flex: 1 1 auto;
  }

  .logo-wrap .foods-banner,
  .foods-banner {
    height: 34px !important;
    max-width: min(148px, 42vw) !important;
  }

  .site-header nav {
    display: none !important;
  }

  .mobile-menu {
    display: inline-flex !important;
  }

  .hero-large,
  .hero-slideshow,
  .story-section,
  .custom-banner,
  .heart-bagdad-grid,
  .promise-grid,
  .heritage-inner {
    grid-template-columns: 1fr !important;
  }

  .hero-content h1,
  .page-hero h1,
  .heart-bagdad-intro h2,
  .section-title h2 {
    font-size: clamp(34px, 10vw, 52px) !important;
    letter-spacing: -1px !important;
    overflow-wrap: normal !important;
  }

  .heart-bagdad-intro,
  .section-title {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .wide-section,
  .story-section,
  .quality-promise,
  .heritage-section,
  .heart-bagdad-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .category-large,
  .home-products {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .category-tile {
    min-height: 168px !important;
    padding: 14px !important;
  }

  .category-tile h3 {
    font-size: 22px !important;
  }

  .home-product > div,
  .menu-product-image {
    height: 140px !important;
  }

  .google-sitelinks,
  .feature-strip {
    grid-template-columns: 1fr 1fr !important;
  }

  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  input, select, textarea, button {
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  .site-footer #footerSiteName,
  .site-footer .footer-lockup h3 {
    font-size: 20px !important;
  }

  .category-tile h3 {
    font-size: 20px !important;
  }
}

/* Keep the fixed phone bar from covering the last line of any page. */
@media (max-width: 900px) {
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Menu board: grouped price list, two cards across on a phone. */
.menu-grid { display: block !important; }
.menu-group-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.menu-group-head h2 { overflow-wrap: normal; word-break: normal; }
@media (max-width: 1100px) {
  .menu-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  .menu-group { margin-bottom: 22px !important; }
  .menu-group-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .menu-group-head h2 { font-size: 22px !important; }
  .menu-product-body h3 { font-size: 16px !important; line-height: 1.2 !important; }
  .menu-price-row b { font-size: 16px !important; }
  .market-home-categories { grid-template-columns: 1fr 1fr !important; }
}

/* Simple cart drawer. Same on phone and desktop. */
.bagdad-cart-drawer[hidden] { display: none !important; }
.bagdad-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
}
.bagdad-cart-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(18, 32, 24, .45);
}
.bagdad-cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(420px, 100%);
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 30px rgba(0,0,0,.12);
}
.bagdad-cart-panel header,
.bagdad-cart-panel footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #e6eee8;
}
.bagdad-cart-panel footer {
  border-bottom: 0;
  border-top: 1px solid #e6eee8;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.bagdad-cart-panel header button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: #f3f6f4;
  font-size: 22px;
}
#bagdadCartLines {
  flex: 1;
  overflow: auto;
  padding: 8px 16px 16px;
}
.bagdad-cart-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eef3ef;
}
.bagdad-cart-line img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background: #f4f1ea;
}
.bagdad-cart-line b { display: block; color: #17351f; }
.bagdad-cart-line small { color: #667068; }
.bagdad-cart-empty { color: #667068; padding: 28px 4px; }
.bagdad-cart-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  background: #087f3e;
  color: #fff !important;
  font-weight: 800;
}
.modal { overflow: auto; }
.modal-box { max-width: min(560px, calc(100% - 24px)); max-height: calc(100vh - 32px); overflow: auto; }
@media (max-width: 760px) {
  .cart-row { grid-template-columns: 64px 1fr !important; }
  .cart-row strong { grid-column: 2; }
}
.bagdad-open-cart {
  border: 1px solid #d7e3db;
  background: #fff;
  color: #17351f;
  border-radius: 999px;
  min-height: 40px;
  padding: 0 14px;
  font-weight: 800;
}
.bagdad-open-cart b {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  border-radius: 50%;
  background: #087f3e;
  color: #fff;
  font-size: 11px;
}


/* 2026-10-03 — footer credit removed, device polish */
.site-footer .footer-credit,
.footer-credit,
a[data-bbf-credit]{display:none !important}

.site-footer .footer-bottom{
  align-items:center;
}
.site-footer .footer-copyright{
  overflow-wrap:anywhere;
}
.site-footer a,
.footer-contact a{
  overflow-wrap:anywhere;
}

@media (max-width: 900px){
  .site-footer .footer-top{
    right:14px;
    bottom:calc(84px + env(safe-area-inset-bottom));
  }
  .bagdad-cart-panel{
    width:100%;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .shop-assist{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    gap:10px;
    padding:8px 14px;
    scrollbar-width:none;
  }
  .shop-assist::-webkit-scrollbar{display:none}
  .shop-assist a{
    flex:0 0 auto;
    white-space:nowrap;
    min-height:36px;
  }
}

@media (max-width: 640px){
  .site-footer .footer-bottom{
    flex-direction:column;
    align-items:flex-start !important;
    gap:8px !important;
  }
  .site-footer .footer-bottom .footer-legal{margin-left:0}
  .site-footer .footer-legal{flex-wrap:wrap}
}

@media (min-width: 981px){
  .site-footer .footer-grid{align-items:start}
}

/* Simple category/contact headers: logo left, menu button right. */
.site-header:not(:has(.header-main)){
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* 2026-10-09 — header and sign-in fit on phone, tablet, desktop */
.site-header,
.header-main {
  max-width: 100%;
  min-width: 0;
}
.header-main {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.logo-wrap {
  min-width: 0;
  flex: 1 1 auto;
}
.foods-banner {
  max-width: min(36vw, 200px);
  height: auto;
}
.header-actions {
  flex: 0 0 auto;
  margin-left: auto;
}
@media (max-width: 820px) {
  .header-contact { display: none !important; }
  .header-search { min-width: 0; flex: 1 1 140px; }
}
@media (max-width: 640px) {
  .header-search { display: none !important; }
  .site-header { height: auto; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 420px) {
  .wf-header-signin {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    padding: 0;
    font-size: 0;
    border-radius: 12px;
    background: transparent !important;
    color: #087f3e !important;
    border: 1.5px solid rgba(8,127,62,.55) !important;
    box-shadow: none !important;
  }
  .wf-header-signin .account-mini-avatar { font-size: 13px; }
  .foods-banner { max-width: 42vw; }
}

/* Phone: cart belongs in the bottom bar, not squeezed beside Sign in. */
@media (max-width: 900px) {
  .header-main {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .logo-wrap {
    order: 1;
    flex: 1 1 auto !important;
    margin-right: auto;
  }
  .header-actions {
    order: 2;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }
  .bagdad-open-cart,
  .header-actions .cart-pill {
    display: none !important;
  }
  .mobile-bottom-nav .mb-cart {
    position: relative;
  }
}
@media (min-width: 901px) {
  .header-actions .bagdad-open-cart {
    order: 2;
    margin-left: 4px;
  }
}
.wf-header-signin{
  background: transparent !important;
  color: #087f3e !important;
  border: 1.5px solid rgba(8,127,62,.55) !important;
  box-shadow: none !important;
}
.wf-header-signin:hover{
  background: rgba(8,127,62,.08) !important;
  color: #066c34 !important;
}
.wf-header-signin:has(.account-mini-avatar){
  background: transparent !important;
  color: #17351f !important;
  border-color: rgba(8,127,62,.4) !important;
}