/* ==========================================================================
   Air Market - v11 mobile density, DISCOVER'S BANDS
   V11-MOBILE-DENSITY-SPEC.md section 4.2.

   Measured (2026-08-15, 375x812, #/): .v2-hero is 346px, of which 268px is
   copy, carrying one CTA and zero products. The collections strip under it is
   another 392px. Between them that is 738px - the entire first screen and
   most of the second - before the first thing a shopper can install.

   The hero is not the problem in kind. A store is allowed a voice, and this
   one's headline is the only place the design raises it (store-v2.css:124's
   own comment says so). The problem is that its desktop proportions were
   carried down unchanged: 38px of padding, 18px under the eyebrow, 26px above
   the CTA and an unclamped paragraph, all sized for a two-column band that
   stopped being two columns at 1080px.

   This sheet keeps every element and takes back the air around them. Nothing
   here removes a section; the density comes from proportion, which is what
   makes it safe to apply to editorial surfaces where the art IS the content.
   The type half of the same job is in store-v11-type.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE HERO BAND.

   store-v2.css:139 already relaxed the hero at <= 1080px to `padding: 38px
   30px` and a 28px gap. At 375px that padding is 60px of the 343px of usable
   width and 76px of vertical, spent on a band that has one column in it.

   The paragraph clamps to three lines. It reads "Ready-made helpers for
   meetings, email, writing and admin. Add one to Claude in a click - no
   setup, and nothing to learn first." which is four lines at this width, and
   the fourth is the half-line that pushes the promo cards off the screen.
   Three lines keeps both sentences and the entire proposition; the clamp only
   ever bites on the widow. max-width: 46ch (store-v2.css:142) is dropped for
   the same reason the lede's is in the detail band: it is wider than the
   viewport here, so it never applies, and leaving it makes the line count
   depend on a cap that only exists for desktop.

   The prefix is store-v2.css's own. See store-v11-density.css's header. */
@media (max-width: 720px) {
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-hero {
    padding: 24px 20px;
    gap: 20px;
    margin-bottom: 16px;
  }
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-eyebrow {
    font-size: 12px;
    margin-bottom: 10px;
  }
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-hero-copy p {
    font-size: 14.5px;
    line-height: 1.5;
    margin-top: 10px;
    max-width: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v2-hero-cta {
    margin-top: 16px;
  }
}

/* --------------------------------------------------------------------------
   2. THE COLLECTIONS STRIP.

   Measured 392px: a 28px head over a 348px rail whose tile is 340px tall -
   a 152px cover over a 186px body carrying an overline, a two-line name, a
   byline, a two-line summary and a meta line. On a 375px screen that is a
   full-height card for something that is a shelf, not a product, and it is
   the frame V9-MOBILE-SPEC.md section 3.3 was already reaching for when it
   said no portrait tile may exceed 60vh.

   The cover comes down to 120px and the body's copy tightens. Both halves are
   needed: capping the cover alone leaves a 186px body under a 120px picture,
   which just moves where the card is too tall. The summary clamps to two
   lines rather than being hidden, because on a collection tile the summary is
   the only thing that says what the collection collects.

   This is the v6 layer, so the prefix is :root[data-v6="on"], matching
   store-v6-collection.css / store-v6-rec.css rather than the five-version
   [data-ui] prefix the v2 surfaces above use. Mixing the two is the quickest
   way to write a rule that never applies. */
@media (max-width: 720px) {
  :root[data-v6="on"] .v6-card-coll .v6-card-cover {
    height: 120px;
  }
  :root[data-v6="on"] .v6-card-coll .v6-card-body {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  :root[data-v6="on"] .v6-card-coll .v6-card-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
}