/*
 * My Accra Int Market — PUBLIC SHELL LOCK 2026-07-25
 * AUTHORITATIVE SOURCE for masthead/banner/navigation geometry.
 * Do not redefine brandstage, brand-lockup, full-brand-logo,
 * brand-menu-card, header-search, brand-tools, or mainnav elsewhere.
 */

:root{--shell-max:1440px;--shell-control-h:34px}
html,body{max-width:100%;overflow-x:hidden}

/* Approved/theme banner: exact artwork, natural ratio, full available width. */
html body .header .brandstage{
  position:relative!important;display:block!important;width:100%!important;max-width:var(--shell-max)!important;
  min-width:0!important;height:auto!important;min-height:0!important;margin:0 auto!important;padding:0!important;
  overflow:visible!important;background:var(--card)!important;border-bottom:1px solid var(--line)!important;
}
html body .header .brandstage .brand-lockup{
  position:relative!important;z-index:1!important;display:block!important;width:100%!important;max-width:none!important;
  min-width:0!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;margin:0!important;padding:0!important;
  overflow:hidden!important;background:transparent!important;text-decoration:none!important;
}
html body .header .brandstage .brand-lockup .full-brand-logo,
html body .header .brandstage .brand-lockup img[data-full-brand-logo]{
  display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;
  min-height:0!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;image-rendering:auto!important;
}

/* Compact controls over desktop artwork; never a second masthead. */
html body .header .brandstage .brand-menu-card{
  position:absolute!important;z-index:40!important;top:12px!important;right:12px!important;bottom:auto!important;left:auto!important;
  width:min(650px,52%)!important;max-width:calc(100% - 24px)!important;min-width:0!important;
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:6px!important;
  padding:8px!important;margin:0!important;border:1px solid color-mix(in srgb,var(--line) 78%,transparent)!important;
  border-radius:16px!important;background:color-mix(in srgb,var(--card) 88%,transparent)!important;
  box-shadow:0 8px 26px rgba(0,0,0,.14)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
  overflow:visible!important;
}
html body .header .brandstage .brand-menu-card .header-search{
  grid-column:1!important;grid-row:1!important;display:flex!important;width:100%!important;min-width:0!important;
  height:38px!important;min-height:38px!important;margin:0!important;overflow:hidden!important;border-radius:12px!important;
  background:color-mix(in srgb,var(--card) 96%,transparent)!important;
}
html body .header .brandstage .brand-menu-card .header-search input{
  flex:1 1 auto!important;width:100%!important;min-width:0!important;height:36px!important;min-height:36px!important;
  padding:0 10px!important;font-size:14px!important;background:transparent!important;
}
html body .header .brandstage .brand-menu-card .header-search .btn{
  flex:0 0 auto!important;height:34px!important;min-height:34px!important;min-width:70px!important;margin:2px!important;
  padding:0 11px!important;border-radius:10px!important;font-size:13px!important;
}
html body .header .brandstage .brand-menu-card .brand-tools{
  grid-column:1!important;grid-row:2!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;
  flex-wrap:wrap!important;gap:5px!important;width:100%!important;min-width:0!important;margin:0!important;overflow:visible!important;white-space:normal!important;
}
html body .header .brandstage .brand-menu-card .brand-tools>*{flex:0 0 auto!important;max-width:100%!important}
html body .header .brandstage .brand-menu-card .brand-tools .btn,
html body .header .brandstage .brand-menu-card .brand-tools button,
html body .header .brandstage .brand-menu-card .brand-tools select,
html body .header .brandstage .brand-menu-card .control-select{
  height:var(--shell-control-h)!important;min-height:var(--shell-control-h)!important;max-height:var(--shell-control-h)!important;
  padding:0 8px!important;border-radius:10px!important;font-size:13px!important;line-height:1!important;
}
html body .header .brandstage .brand-menu-card .control-select select{height:30px!important;min-height:30px!important;padding:0 4px!important}
html body .header .brandstage .brand-menu-card img,
html body .header .brandstage .brand-tools img{max-width:20px!important;max-height:20px!important;object-fit:contain!important}

/* Desktop navigation fits the site width and wraps instead of scrolling the page sideways. */
html body .header .brandstage>.mainnav,
html body .header .mainnav{
  position:relative!important;z-index:20!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;
  flex-wrap:wrap!important;width:100%!important;max-width:100%!important;min-height:0!important;margin:0!important;padding:6px 9px!important;
  gap:3px 8px!important;overflow:visible!important;border-radius:0!important;border-top:1px solid var(--line)!important;background:var(--nav)!important;
}
html body .header .mainnav a{
  flex:0 0 auto!important;min-height:0!important;height:auto!important;padding:7px 4px!important;color:#fff!important;
  border-radius:7px!important;font-size:14px!important;line-height:1.2!important;white-space:nowrap!important;text-decoration:none!important;
}
html body .header .mainnav .category-btn{padding:8px 11px!important;background:var(--gold)!important;color:#24180e!important;border-radius:9px!important}

/* Tablet: keep the banner whole and place controls directly below it. */
@media(max-width:1050px){
  html body .header .brandstage .brand-menu-card{
    position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;padding:7px 10px!important;
    border-left:0!important;border-right:0!important;border-radius:0!important;box-shadow:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--card)!important;
  }
  html body .header .brandstage .brand-menu-card .brand-tools{justify-content:flex-start!important}
}

/* Phone: natural banner, search + compact tools below, app nav at bottom. */
@media(max-width:760px){
  body{padding-bottom:78px!important}
  html body .topbar{min-height:30px!important;padding:6px 10px!important;font-size:12px!important}
  html body .topbar span:first-child{display:none!important}
  html body .topbar span:last-child{width:100%!important;text-align:center!important}
  html body .header .brandstage{max-width:none!important;overflow:hidden!important}
  html body .header .brandstage .brand-lockup{width:100%!important;height:auto!important;aspect-ratio:auto!important}
  html body .header .brandstage .brand-lockup .full-brand-logo,
  html body .header .brandstage .brand-lockup img[data-full-brand-logo]{width:100%!important;height:auto!important;aspect-ratio:auto!important}
  html body .header .brandstage .brand-menu-card{display:grid!important;grid-template-columns:1fr!important;gap:5px!important;padding:6px 8px 7px!important}
  html body .header .brandstage .brand-menu-card .header-search{height:42px!important;min-height:42px!important}
  html body .header .brandstage .brand-menu-card .header-search input{height:40px!important;min-height:40px!important;font-size:17px!important}
  html body .header .brandstage .brand-menu-card .header-search .btn{height:38px!important;min-height:38px!important;font-size:14px!important}
  html body .header .brandstage .brand-menu-card .brand-tools{
    justify-content:flex-start!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;
    scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;
  }
  html body .header .brandstage .brand-menu-card .brand-tools::-webkit-scrollbar{display:none!important}
  html body .header .brandstage .brand-menu-card .brand-tools .btn,
  html body .header .brandstage .brand-menu-card .brand-tools button,
  html body .header .brandstage .brand-menu-card .brand-tools select,
  html body .header .brandstage .brand-menu-card .control-select{height:36px!important;min-height:36px!important;max-height:36px!important;font-size:13px!important}
  html body .header .brandstage>.mainnav,html body .header .mainnav{display:none!important}
  html body .footer-full-logo{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;padding:0!important}
  html body .mobilebar{max-width:100vw!important}
  html body .mobilebar-action{min-width:0!important}
}

/* 2026-08-20 readability hotfix: increase customer-facing body, control, card and footer text without changing approved geometry. */
html body:not(.admin-page){font-size:18px;line-height:1.58}
html body:not(.admin-page) main p,
html body:not(.admin-page) main li,
html body:not(.admin-page) main label{font-size:1rem;line-height:1.58}
html body:not(.admin-page) main small{font-size:.88rem;line-height:1.45}
html body:not(.admin-page) .card h3,
html body:not(.admin-page) .product-card h3{font-size:1.05rem;line-height:1.3}
html body:not(.admin-page) input,
html body:not(.admin-page) select,
html body:not(.admin-page) textarea,
html body:not(.admin-page) .btn,
html body:not(.admin-page) button{font-size:16px}
html body:not(.admin-page) .footer{font-size:16px;line-height:1.55}
html body:not(.admin-page) .mobilebar-action,
html body:not(.admin-page) .mobilebar a{font-size:13px!important}
@media(max-width:760px){
  html body:not(.admin-page){font-size:17px;line-height:1.58}
  html body:not(.admin-page) main p,
  html body:not(.admin-page) main li,
  html body:not(.admin-page) main label{font-size:1rem}
}

@media(prefers-reduced-motion:reduce){html body .header *{transition:none!important;animation:none!important}}