/* Shared public mobile brand placement. Desktop page headers are unchanged. */
@media (max-width: 767px) {
  :root { --pbd-mobile-logo-width: 190px; --pbd-mobile-edge: 18px; --pbd-mobile-logo-gap: 18px; }
  .brand-logo-main,
  .fluid-logo-container img,
  .top-logo-area img[alt="Panel Beater Directory Logo"],
  .logo-container img[alt="Panel Beater Directory Logo"],
  .site-logo,
  .faq-logo {
    width: var(--pbd-mobile-logo-width) !important;
    max-width: var(--pbd-mobile-logo-width) !important;
    height: auto !important;
    max-height: none !important;
  }
  .top-logo-area,
  .fluid-logo-container,
  .mobile-center-header,
  .faq-logo-link { text-align: left !important; }
  .top-logo-area { width: 100% !important; max-width: none !important; margin: 16px 0 var(--pbd-mobile-logo-gap) !important; padding: 0 var(--pbd-mobile-edge) !important; }
  .fluid-logo-container { position: relative !important; top: auto !important; left: auto !important; margin: 16px 0 var(--pbd-mobile-logo-gap) var(--pbd-mobile-edge) !important; padding: 0 !important; }
  .logo-container { top: 16px !important; left: var(--pbd-mobile-edge) !important; padding: 0 !important; }
  .logo-container.d-none.d-lg-block { display: block !important; }
  .mobile-center-header { padding-left: 0 !important; margin-bottom: var(--pbd-mobile-logo-gap) !important; }
  .faq-logo-link { margin-bottom: var(--pbd-mobile-logo-gap) !important; }
  .faq-header { margin-bottom: var(--pbd-mobile-logo-gap) !important; }
  #hero-wrapper > .w-100.pt-4.mb-3 { padding-top: 16px !important; margin-bottom: var(--pbd-mobile-logo-gap) !important; }
  #hero-wrapper > .w-100.pt-4.mb-3 .container { padding-left: var(--pbd-mobile-edge) !important; }
  .brand-logo-main { margin-bottom: 0 !important; }
  body:has(.fluid-logo-container) #hero-wrapper { padding-top: 0 !important; }
  body:has(.mobile-center-header) .container.py-4.py-md-5 { padding-top: 16px !important; }
  .mobile-center-header { padding-left: 6px !important; margin-bottom: 28px !important; }
  body:has(.top-logo-area) .top-logo-area .container { padding-left: 0 !important; }
  body:has(.top-logo-area) #hero-wrapper > main.container { padding-top: 10px !important; }
  .hub-wrapper { justify-content: flex-start !important; padding: 0 !important; }
  .faq-container { padding: 16px var(--pbd-mobile-edge) !important; }
  body:has(.logo-container) .dashboard-container { margin-top: 77px !important; }
}