/* Pump custom styles.
 * Kept as a real stylesheet because the Shop theme's compiled CSS does not
 * include every Tailwind utility, and layout-level partials (footer) render
 * after @stack('styles') so pushed <style> blocks are dropped.
 */
.pump-footer-inner {
            max-width: 1320px; margin: 0 auto;
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: 72px; padding: 56px 60px;
        }
        .pump-footer-links {
            flex: 1 1 auto; max-width: 720px;
            display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px;
        }
        .pump-footer-col { display: grid; align-content: start; gap: 14px; }
        .pump-footer-col .pump-footer-heading {
            font-size: 12px; font-weight: 700; letter-spacing: .12em;
            text-transform: uppercase; opacity: .55; margin: 0;
        }
        .pump-footer-col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
        .pump-footer-col a { font-size: 14px; opacity: .85; transition: opacity .15s ease; }
        .pump-footer-col a:hover { opacity: 1; text-decoration: underline; }
        .pump-footer-brand { flex: 0 0 360px; display: grid; gap: 18px; justify-items: start; }
        .pump-footer-brand img { width: 132px; height: auto; border-radius: 10px; }
        .pump-footer-brand .pump-newsletter { display: grid; gap: 10px; width: 100%; }

        @media (max-width: 1060px) {
            .pump-footer-inner { flex-direction: column-reverse; gap: 32px; padding: 32px 24px; }
            /* Below this width the accordion takes over. This rule must win over
               .pump-footer-links{display:grid} above, which otherwise cancels the
               theme's own hide utility because this file loads later. */
            .pump-footer-links { display: none !important; }
            .pump-footer-brand { flex: 1 1 auto; width: 100%; justify-items: center; text-align: center; }
        }
        @media (max-width: 640px) {
            .pump-footer-inner { padding: 24px 16px; }
        }

/* Newsletter input: the Subscribe button is absolutely positioned on top of the
   field, so the input needs enough right padding for the text not to run under
   it. Measured against the rendered button width. */
.pump-newsletter input[type="email"] { padding-right: 175px !important; }
@media (max-width: 1060px) { .pump-newsletter input[type="email"] { padding-right: 170px !important; } }
@media (max-width: 640px)  { .pump-newsletter input[type="email"] { padding-right: 120px !important; } }

/* Site logo: sized by height so any aspect ratio renders correctly.
   The uploaded logo is square (500x500); fixed width/height attributes were
   squashing it into a 131x29 box. */
.pump-site-logo {
    height: 90px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}
@media (max-width: 1060px) { .pump-site-logo { height: 64px; } }
@media (max-width: 640px)  { .pump-site-logo { height: 44px; } }

/* ------------------------------------------------------------------
   Hero banner — three across
   ------------------------------------------------------------------
   The track keeps Tailwind's `inline-flex`, which sizes to its content,
   so a percentage width on a slide would resolve against nothing.
   Forcing the track to 100% makes the percentages resolve against the
   container instead; the slides then overflow it horizontally, which is
   what the transform scrolls through. The parent already clips.

   Sizing off the track rather than 100vw also keeps the third slide
   fully visible on systems that render a permanent scrollbar.
   ------------------------------------------------------------------ */
.pump-hero-track {
    display: flex !important;
    width: 100%;
    flex-wrap: nowrap;
    gap: 16px;
}

.pump-hero-slide {
    flex: 0 0 calc((100% - 32px) / 3);   /* 3 across, 2 gaps of 16px */
    min-width: 0;
}

.pump-hero-slide-img {
    display: block;
    width: 100%;
    height: 380px;
    object-fit: cover;                    /* cover, not fill — fill distorts */
    border-radius: 8px;
}

/* Two across on tablets: one gap instead of two. */
@media (max-width: 1024px) {
    .pump-hero-slide {
        flex-basis: calc((100% - 16px) / 2);
    }

    .pump-hero-slide-img {
        height: 300px;
    }
}

/* One across on phones — three side by side is unreadable. */
@media (max-width: 640px) {
    .pump-hero-track {
        gap: 12px;
    }

    .pump-hero-slide {
        flex-basis: 100%;
    }

    .pump-hero-slide-img {
        height: 220px;
        border-radius: 6px;
    }
}

/* ------------------------------------------------------------------
   Hero gutter — align the banner with the rest of the page
   ------------------------------------------------------------------
   The page content sits in `.container`, which is max-width 1440px with
   90px padding, so section headings start 90px from the edge. The hero
   was full-bleed and did not line up with them.

   The inset is width + auto margins, NOT padding: this element is the
   overflow:hidden clipper, and overflow clips at the PADDING box — with
   padding the sliding track would still be visible inside the gutter.

   max-width 1260px = 1440 - (2 x 90), so on screens wider than the
   container the hero stays locked to the same edges as the sections
   below it rather than drifting wider.
   ------------------------------------------------------------------ */
.pump-hero-viewport {
    width: calc(100% - 180px);
    max-width: 1260px;
    margin-left: auto;
    margin-right: auto;
}

/* Below lg the page switches to px-8 (32px); follow it. */
@media (max-width: 1024px) {
    .pump-hero-viewport {
        width: calc(100% - 64px);
        max-width: none;
    }
}