/* ---- the phone bar ----------------------------------------------------------
   From 1024px up the page wears the site header (partials/dh-header.php);
   below it, the bar the product and service pages use. The page loads this
   file and carries `has-appbar` on its body. */
@media (min-width: 1024px) {
    .ab-appbar { display: none !important; }
}
@media not all and (min-width: 1024px) {
    body.has-appbar > .dh-header { display: none; }

    /* base.css clips the body, .dh then hides its overflow-x - which makes the
       body a scroll box and stops the bar below from sticking. Clip cuts the
       same sideways overflow without becoming one. */
    body.has-appbar { overflow-x: clip; }

    .ab-appbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 14px; background: #fff; border-bottom: 1px solid #efe9e2; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
    .ab-appbar-logo { flex: 0 0 auto; display: flex; align-items: center; }
    .ab-appbar-logo img { display: block; width: 32px; height: 32px; border-radius: 50%; }
    .ab-appbar-title { flex: 1; min-width: 0; overflow: hidden; font-family: "Inter", sans-serif; font-size: 15px; font-weight: 600; color: #1e1e1e; white-space: nowrap; text-overflow: ellipsis; }
    .ab-ic { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 22px; height: 22px; color: #1e1e1e; }
    .ab-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .ab-ic.header-cart svg circle { fill: currentColor; stroke: none; }
    /* the same guard as the desktop header: base.css would paint a disc here */
    .ab-ic.header-cart, .ab-ic.header-cart:hover { width: 22px; height: 22px; border-radius: 0; background: none; color: #1e1e1e; }
}