/* Store match (2026-10-25 mockup for John): the group site in the same visual
   system as the four store sites. skin.css carries the store palette (navy
   #0B1F3A, blue #0E9BD1) and Lato as --display; this layer adds the store
   hero and the few header/footer details the tokens don't reach.
   The hero block below is the store themes' own (custom.css, "HOMEPAGE HERO"),
   with .bl-hero renamed .bl-shero so it can't collide with this theme's
   older .bl-hero intro band. */
:root{ --hero-bg:#0B1F3A; --hero-ink:#FFFFFF; --hero-sub:#C3D2E2; --measure:1200px; }

/* ---- header: store names small and quiet, numbers white and bold (store header) ---- */
body.bl-umbrella #siteHeader.bl-header.umbrella .umbrella-locations .name {
  font-size:12px !important; font-weight:700 !important; letter-spacing:.14em !important;
  color:var(--header-ink-dim) !important; }
body.bl-umbrella #siteHeader.bl-header.umbrella .umbrella-locations .phone {
  font-size:19px !important; font-weight:700 !important; color:#FFFFFF !important; letter-spacing:0 !important; }

/* ---- nav: Lato, store weight ---- */
body.bl-umbrella #mainnav a { font-weight:700 !important; letter-spacing:.05em !important; }

/* ---- headings: Lato, store weights ---- */
body.bl-umbrella h1, body.bl-umbrella h2, body.bl-umbrella h3 { font-stretch:normal !important; letter-spacing:0 !important; }
body.bl-umbrella h2 { font-size:24px !important; font-weight:800 !important; color:var(--brand) !important; }

/* ---- footer: solid store navy-black, small uppercase cyan heads ---- */
body.bl-umbrella footer, body.bl-umbrella footer .outer, body.bl-umbrella footer .main {
  background-color:var(--foot-bg) !important; background-image:none !important; }
body.bl-umbrella footer h2, body.bl-umbrella footer .navigation > ul > li > a {
  font-size:12px !important; font-weight:700 !important; letter-spacing:.1em !important;
  text-transform:uppercase !important; color:var(--foot-head) !important; }

/* ---- the old intro band is folded into the hero ---- */
body.bl-umbrella section.bl-oem-hero, body.bl-umbrella section.bl-hero { display:none !important; }

/* ---- store hero ---- */
.bl-btn{display:inline-block;padding:12px 22px;border-radius:var(--radius);font-size:14.5px;
  font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;
  font-family:inherit;transition:.15s}
.bl-btn.bl-btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.bl-btn.bl-btn--primary:hover{filter:brightness(1.08);color:var(--on-accent)}
.bl-btn.bl-btn--outline{background:transparent;color:var(--ink);border-color:var(--line)}
.bl-btn.bl-btn--outline:hover{border-color:var(--accent);color:var(--accent)}
.bl-btn--block{display:block;width:100%;text-align:center}
.bl-btn--sm{padding:9px 15px;font-size:13px}
/* ===== HOMEPAGE HERO =====
   Split panel. Every hero asset is a manufacturer banner with its own headline
   burned into the LEFT of the image, so overlaid site copy collided with it.
   Copy sits in a solid panel; the image is anchored right to show the machine.
   The old inline rules used object-fit:contain on a fixed 476px black box,
   which is what produced the letterboxing. */
/* Full-bleed with a left-to-right fade, copy overlaid. The fade runs deep on
   the left so the manufacturer banner's own headline is pushed down in contrast
   under the site copy rather than competing with it at equal weight. */
.bl-shero{position:relative;display:block;background:var(--hero-bg);
  min-height:clamp(340px,42vw,540px);text-align:left;isolation:isolate}
.bl-shero__media{position:absolute;inset:0;z-index:0}
.bl-shero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,18,34,.92) 0%,rgba(7,18,34,.78) 32%,
                             rgba(7,18,34,.35) 62%,rgba(7,18,34,.05) 100%)}
/* pointer-events:none is load-bearing. This panel spans the whole hero at
   z-index 2, and .bl-shero__media sits at z-index 0 — which makes it a stacking
   context, so the swiper arrows inside it cannot rise above this layer no
   matter what z-index they carry. Without this the carousel arrows were
   unclickable. The panel's own links opt back in below. */
.bl-shero__copy{position:relative;z-index:2;display:flex;align-items:center;
  min-height:clamp(340px,42vw,540px);max-width:var(--measure);margin:0 auto;
  padding:44px clamp(24px,3.5vw,56px);pointer-events:none}
.bl-shero__copy a,.bl-shero__copy button{pointer-events:auto}
.bl-shero__kicker{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-accent);background:var(--accent);
  padding:5px 11px;border-radius:999px;margin-bottom:14px}
.bl-shero__h1{margin:0 0 10px;color:var(--hero-ink);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(28px,4.2vw,52px);line-height:1.05;max-width:16ch}
.bl-shero__sub{margin:0 0 22px;color:var(--hero-sub);font-size:clamp(15px,1.5vw,18px);max-width:44ch}
.bl-shero__cta{display:flex;gap:12px;flex-wrap:wrap}
/* Frosted-glass secondary. A plain transparent outline sat directly on the
   photography, so its legibility changed with every slide — fine on the dark
   dirt-bike shot, washed out on the bright jet-ski water. The translucent fill
   plus blur gives the label a consistent backing whatever is behind it, while
   staying clearly subordinate to the solid primary.
   Doubled class: main.css a,a:link,a:visited is (0,1,1) and would otherwise
   take the label back to PowerGo blue. */
.bl-shero__cta .bl-btn.bl-btn--outline{
  background:color-mix(in srgb,var(--hero-ink) 16%,transparent);
  color:var(--hero-ink);
  border-color:color-mix(in srgb,var(--hero-ink) 50%,transparent);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.bl-shero__cta .bl-btn.bl-btn--outline:hover{
  background:color-mix(in srgb,var(--hero-ink) 28%,transparent);
  border-color:var(--hero-ink);color:var(--hero-ink)}
.bl-shero__media{overflow:hidden}
.bl-shero__media .shero-carousel,.bl-shero__media .swiper-wrapper,
.bl-shero__media .swiper-slide{height:100%}
.bl-shero__media .swiper-slide img{width:100%;height:100%;object-fit:cover;
  object-position:82% center;display:block}
.bl-shero__media .swiper-button-prev,.bl-shero__media .swiper-button-next{color:var(--on-media)}
.bl-shero__media .swiper-button-prev::after,.bl-shero__media .swiper-button-next::after{font-size:24px}
.bl-shero__media .swiper-pagination{text-align:right;padding-right:22px;z-index:3}
.bl-shero__media .swiper-button-prev,.bl-shero__media .swiper-button-next{z-index:3}
.bl-shero__media .swiper-pagination-bullet{background:var(--on-media);opacity:.55}
.bl-shero__media .swiper-pagination-bullet-active{opacity:1}
@media (max-width:900px){
  .bl-shero{min-height:0}
  /* On a phone the fade cannot carry text over a busy photo, so the image sits
     above and the copy on solid colour beneath it. */
  .bl-shero__media{position:relative;height:clamp(200px,50vw,300px)}
  .bl-shero::after{inset:auto 0 auto 0;height:clamp(200px,50vw,300px);
    background:linear-gradient(180deg,rgba(7,18,34,0) 55%,rgba(7,18,34,.55) 100%)}
  .bl-shero__copy{min-height:0;padding:26px 20px 30px}
}
/* main.css styles bare h1/h2/h3 with the PowerGo blue, uppercase and its own
   sizing. The reskinned headings are explicit about all three so they do not
   inherit it. Doubled class beats a:link (0,1,1) where headings wrap links. */
/* main.css: `.home:not(.is-template-v1-6):not(.is-rental) h1` is (0,3,1) and sets
   26px / #088fc2 / font-weight:400!important. This selector is (0,4,0) — .bl-shero is doubled, because :not() arguments
   count toward specificity and theirs is (0,3,1) — so it wins
   on colour and size; the weight needs !important because theirs is. */
.bl-shero.bl-shero .bl-shero__copy .bl-shero__h1{color:var(--hero-ink);text-transform:none;
  font-size:clamp(28px,4.2vw,52px);font-weight:800!important;line-height:1.05;
  letter-spacing:-.02em;font-family:inherit}
.bl-shero__cta .bl-btn.bl-btn--outline{color:var(--hero-ink)}
.bl-promo__body .bl-btn{align-self:flex-start;margin-top:6px}

/* base.css forces img{height:auto!important}; the store rule needs to win inside the hero */
body.bl-umbrella .bl-shero__media .swiper-slide img { height:100% !important; }
body.bl-umbrella .bl-shero .bl-btn { font-family:var(--display) !important; text-decoration:none !important; }
body.bl-umbrella .bl-shero .bl-btn--primary { color:#fff !important; }
@media (max-width:700px){
  body.bl-umbrella #siteHeader.bl-header.umbrella .umbrella-locations .phone { font-size:15px !important; }
}

/* ---- the "Have a question?" band: store blue button, as on the store sites' bands ---- */
body.bl-umbrella section.bl-chat-cta .btn.primary, body.bl-umbrella section.bl-chat-cta a.btn.primary {
  background:var(--accent) !important; border-color:var(--accent) !important; }

/* Ad-style slides (Suzuki) shown whole: right 56% on desktop, whole above the
   copy on phones -- the store themes' .is-whole rule (2026-10-26). */
body.bl-umbrella .bl-shero__media .swiper-slide.is-whole{background:var(--hero-bg);position:relative}
body.bl-umbrella .bl-shero__media .swiper-slide.is-whole img{object-fit:contain;object-position:center}
@media (min-width:901px){
  body.bl-umbrella .bl-shero__media .swiper-slide.is-whole img{position:absolute;top:0;right:0;width:56%;height:100% !important;object-position:right center}
  body.bl-umbrella .bl-shero.is-whole-active::after{background:linear-gradient(90deg,rgba(7,18,34,.92) 0%,rgba(7,18,34,.8) 36%,rgba(7,18,34,0) 44%)}
}