/* Store hero ad revision (28 Sep 2026, v3) — additive only. Loaded after
   assets/css/style.css, merch.css, fs2.css, store-redesign/redesign.css and
   typography.css (see store.html's <head>); nothing here is copied from or
   duplicates those files, and none of them are edited by this patch.

   Three changes, all scoped to the existing selectors:

   1. Desktop vertical alignment/height. Measured on the real integrated
      Store at 1440px: with only `align-items: start` (the v1 attempt), the
      ad's own bottom sat at y=443 against the search button's bottom at
      y=521 — a 78px shortfall, because .fs-ad and .fs-hero-intro share a
      single-row CSS grid (.fs-hero-top) and .fs-search is a separate element
      AFTER that row; growing .fs-ad inside the row just grows the row (and
      therefore pushes .fs-search down by the same amount), so the gap
      between ad-bottom and search-bottom never closes on its own.
      Fix: grow `.fs-ad-slides` by the measured 78px (164px -> 242px) so the
      ad visually reaches down to the search button's bottom, and give `.fs-ad`
      a matching `margin-bottom: -78px`. The negative margin removes that same
      78px from the space `.fs-ad` claims in the grid row's own auto-sizing —
      the row (and everything after it, `.fs-search` included) is sized as if
      `.fs-ad` were still its original height, while `.fs-ad`'s own painted
      box extends 78px further down, overlapping into the row's bottom margin/
      gap area rather than pushing content below it. `align-items: start`
      keeps `.fs-ad`'s top pinned level with `.fs-hero-intro`'s top so the
      extra height lands at the bottom, where the search button is.
      Scoped to the >=1024px row layout only; below that the grid already
      stacks to one column with its own unrelated fixed height (152px) and
      none of this applies — mobile is untouched.
      Caveat: 78px is a point measurement of the real, currently-integrated
      Store at exactly 1440px width with production typography loaded (this
      sandbox does not have that stylesheet, so it can't be independently
      re-measured here — see MANIFEST-ad-alignment.md). If the real intro
      column's height changes later (copy edit, different type scale), this
      number should be re-checked against a fresh screenshot rather than
      assumed to still be exact.

   2. Seachem slide backdrop. The product photo (assets/store-redesign/ad/
      seachem-nutridiet-marine-sm.webp) ships on a plain white studio
      background, which read as a bare rectangle against the slide. Rather
      than edit the photo, the slide gets a soft backdrop sampled from the
      jar's own palette and the image is edge-feathered into it — the same
      mask technique store.css already uses for .fs-tile--bags/--toys/--art
      (a backdrop plus a two-axis mask-image), just with a plain gradient
      here since the source photo's own background is flat rather than
      graded. This overrides store.css's flat `.fs-ad-slide:nth-child(3)`
      background at equal specificity by loading after it; the label pixels
      themselves are untouched.

   3. The taller slide area (#1) also gives the slide's own image/copy more
      breathing room than the original 164px; no other rule changes are
      needed for that since `.fs-ad-slide` already stretches to
      `.fs-ad-slides`' full height (`height: 100%` in store.css). */

@media (min-width: 1024px) {
  .fs-hero-top { align-items: start; }
  .fs-ad { margin-bottom: -78px; }
  .fs-ad-slides { height: 242px; }
}

.fs-ad-slide[data-fs-ad-brand="seachem"] {
  background:
    radial-gradient(120% 140% at 28% 22%, #eef8fc 0%, #dcedf6 42%, #c3dced 68%, #a9cbe2 100%);
}
.fs-ad-slide[data-fs-ad-brand="seachem"] img {
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent),
    linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent),
    linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
  /* The edge-feather mask alone still left a visible white rectangle where
     the source pack photo's own white studio background shows through
     (verified against the real integrated Store at 1440px and 390px).
     multiply drops white pixels out against the blue backdrop above (white
     * anything = that thing, so the studio background disappears; the pack
     art and label, being colored/dark, are barely affected) and the scale
     lets the pack fill the taller slide instead of floating small in the
     middle of the new space. Label pixels are untouched — this only changes
     how the image composites and how large it renders, not the artwork. */
  mix-blend-mode: multiply;
  transform: translateX(7px) scale(1.8);
}
.fs-ad-slide[data-fs-ad-brand="waterbox"] img {
  /* Same white-background problem as Seachem, on the aquarium product shot.
     A smaller scale here (1.25 vs 1.8) — this is a full tank image, not a
     small pack, so a large zoom would crop the aquarium itself rather than
     just filling dead space around it. */
  mix-blend-mode: multiply;
  transform: scale(1.25);
}

@media (min-width: 1024px) {
  .fs-ad-slide[data-fs-ad-brand="waterbox"] img { height: 190px; transform: scale(1.35); }
  .fs-ad-slide[data-fs-ad-brand="aquaforest"] img { height: 190px; }
}
.fs-ad-slide[data-fs-ad-brand="waterbox"] { background: radial-gradient(110% 140% at 85% 35%, #d8eced 0%, #edf6f4 47%, #f5f8f6 100%); }
.fs-ad-slide[data-fs-ad-brand="aquaforest"] { background: radial-gradient(120% 140% at 80% 40%, #e9d9ee 0%, #f5eefa 51%, #fbf7fb 100%); }