/* =====================================================================
   GIFT STORE — ONE HEADER ACROSS THE WHOLE STORE
   =====================================================================
   The store header was only styled on the catalogue page, and it was
   styled INLINE inside rewards/index.blade.php. Every other page in the
   same store — the product page and the quote list — fell back to the
   base rule in rewards-store.css, which is a different header entirely:

       base           position: fixed, full-bleed, padding 18px 0
       catalogue      position: absolute, centred, max-width 1376px,
                      padding 28px 32px 0, transform translateX(-50%)

   So the bar changed size and position as soon as a shopper opened a
   product or their quote list. That reads as two different sites, and it
   is the kind of inconsistency that quietly costs trust on a page whose
   whole job is asking a company for a quote.

   The rules live here, in one file loaded by every store page, rather
   than inline on one of them. A header shared by nine views cannot be
   owned by a single view.

   WHY absolute AND NOT fixed
   The catalogue's hero is a full-bleed image the bar floats over. Fixed
   would keep the bar pinned while that image scrolls away, leaving a
   translucent bar over white. Absolute lets it scroll with the hero it
   belongs to. Pages without a hero simply get the same bar at the top of
   their own content, which is what makes them look like the same site.
   ===================================================================== */

.rewards-page .b2b-header-ref,
.gift-store-detail-page .b2b-header-ref,
.quote-request-page .b2b-header-ref {
    position: absolute;
    z-index: 100;
    top: 16px;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(1376px, calc(100vw - 32px));
    padding: 28px 32px 0;
    transform: translateX(-50%);
}

/* Clearance below the bar.
   Only the quote list needs this. The catalogue gets it from its hero and
   the product page already reserves 156px of its own top padding in
   rewards-details.css, so neither is touched here — adding padding to
   either would double it. */
.quote-request-page .rewards-quote-request-page {
    padding-block-start: clamp(104px, 9vw, 140px);
}

@media (max-width: 640px) {

    .rewards-page .b2b-header-ref,
    .gift-store-detail-page .b2b-header-ref,
    .quote-request-page .b2b-header-ref {
        top: 8px;
        width: calc(100vw - 16px);
        padding: 8px 0 0;
    }

    .quote-request-page .rewards-quote-request-page {
        padding-block-start: 88px;
    }
}