/* ===================================================================
   mobile.css — My Generic Pharmacy mobile redesign
   LOADS LAST in the cascade (after bootstrap, core/template.css, theme
   header, {group}.css, branding custom.css).
   ALL rules live inside @media (max-width: 767px) so desktop (>=768px)
   is never affected.
   Enqueued via a theme-guarded <link> in templates/core.php.
   Build: one screen at a time. Change-log every edit.
   =================================================================== */

@media (max-width: 767px) {

  /* ---- 1. Black top bar: bigger tap target, tighter bar ---- */
  .navbar-inverse { margin-bottom: 0; min-height: 0; }
  .navbar-inverse .navbar-toggle {
    margin: 8px;
    padding: 12px 14px;          /* ~44px tap target */
    float: none;
  }
  .navbar-inverse .navbar-brand { height: auto; line-height: 1.4; }

  /* ---- 2. Page header: compress logo + slogan + cart ---- */
  .page-header { margin: 0; padding: 10px 0; }
  .page-header .logo { margin: 0; }
  .page-header .logo img { max-height: 56px; width: auto; }
  .page-header .slogan {
    font-size: 13px;
    margin: 4px 0 0;
    line-height: 1.2;
  }
  /* cart: keep it visible, align right, give it room */
  .cart-header { padding-left: 0 !important; }
  .cart-header .shopping-cart img { max-height: 40px; width: auto; }
  .cart-header-h4 { font-size: 14px; }
  .cart-total { font-size: 13px; }

  /* ---- 3. Neutralize the absolute-positioned language menu ---- */
  .language-menu {
    position: static !important;   /* was position:absolute (inline) */
    padding-top: 0 !important;
    float: none;
  }
  .language-menu li { float: none; display: inline-block; width: auto; }

  /* ---- 4. Currency buttons: tappable ---- */
  .currency-box .btn.btn-sm {
    min-width: 40px;
    min-height: 40px;
    padding: 8px 12px;
    margin: 2px;
    font-size: 15px;
  }
/* ---- 5. Magenta category bar: bigger target + inline label ---- */
  .page-menu .subnav { min-height: 0; margin: 0; }
  .page-menu .subnav .navbar-header {
    display: flex;
    align-items: center;
  }
  .page-menu .subnav .navbar-toggle {
    float: none;
    margin: 6px 8px;
    padding: 10px 12px;
    display: inline-block;   /* back to block so .icon-bar stacks */
  }
  .page-menu .subnav .navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px 0;
  }
  .page-menu .subnav .navbar-header::after {
    content: "Categories";
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
  }
  .page-menu { margin-bottom: 0; }
  
}