/* ── One promo bar above the header on a phone — 2026-10-23 ───────────
 *
 * Operator: "production is shit on my phone" — 83% of customers are on a
 * phone. Measured at 390px on the PepRally shop: WELCOME10, the Rally
 * strip (three lines), the shipping/RUO strip, then the header — 179px
 * of bars before the header and ~300px before a product.
 *
 * On a phone:
 *   · ONE promo bar. While a public Rally is open the Rally strip is it;
 *     WELCOME10 steps aside (it is still there on the desk). The strip
 *     is rendered only while `Rally#open?`, so with no Rally the welcome
 *     bar is the promo bar, and if the countdown removes the strip at
 *     zero the sibling rule stops matching and WELCOME10 comes back.
 *   · The Rally strip is at most three rows: the mark WITH its compound,
 *     the total saving (gift included — never dropped), then the clock
 *     and a 44px "See the Rally". Only the eyebrow steps aside here.
 *   · The shipping/RUO strip is two short lines; the RUO line never
 *     wraps and is never hidden.
 *
 * Phone-only; the desk is untouched. Every rule names a block root or a
 * body brand class, anchors carry `a.`, and no colour is set here — each
 * strip keeps the ink its own sheet measured.
 * Guard: test/system/one_banner_on_a_phone_test.rb
 */

@media (max-width: 767.98px) {
  /* ── PepRally: the Rally strip is the one promo bar ───────────────── */
  body.peprally .sr-rally-banner ~ #sr-welcome-banner { display: none; }

  body.peprally .sr-rally-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    row-gap: 0;
    padding: 4px 12px 0;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0;
  }
  body.peprally .sr-rally-banner .sr-rally-banner__eyebrow,
  body.peprally .sr-rally-banner .sr-rally-banner__sep { display: none; }
  /* Rows one and two: the mark with its compound, then the TOTAL saving
     with the free BacWater — the saving is never dropped (operator: lead
     with the total saving, always). It wraps inside the offer. */
  body.peprally .sr-rally-banner .sr-rally-banner__offer {
    flex: 1 1 100%;
    text-align: center;
  }
  /* Row two: the clock, any scarcity note, and the link. */
  body.peprally .sr-rally-banner .sr-rally-banner__clock { padding: 1px 6px; }
  body.peprally .sr-rally-banner a.sr-rally-banner__link,
  body.peprally .sr-rally-banner a.sr-rally-banner__link:hover {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
  }

  /* ── PepRally: the shipping/RUO strip, two short lines ─────────────── */
  body.peprally .peprally-announcementbar .ap-announcementbar__message {
    padding: 4px 0 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }
  body.peprally .peprally-announcementbar .pr-ann__ship,
  body.peprally .peprally-announcementbar .pr-ann__ruo {
    display: block;
    letter-spacing: 0.01em;
    /* Capitals at 12px are wider than a 360px phone; sentence case is
       the same words in two-thirds the width, so the RUO line stays one
       line. */
    text-transform: none;
    white-space: nowrap;
  }

  /* ── Glam and BacWater: the RUO line stays on one line ─────────────── */
  body.glam #velaTopbar .glam-topbar__ruo,
  body.bacwater #velaTopbar .bacwater-topbar__ruo { white-space: nowrap; }
}