/* ==========================================================================
   Store-site header (John 2026-11-01). The rules from .bl-hdr to body.bl-locked
   are copied verbatim from the store themes' custom.css (Morden, Thompson,
   Brandon, Portage carry the same block), so a change there should be copied
   here. The store palette is scoped to the header and drawer so it does not
   touch skin.css's :root tokens, which share some names.
   ========================================================================== */
.bl-hdr,.bl-drawer,.bl-scrim{
  --header-bg:#0B1F3A; --header-ink:#FFFFFF;
  --nav-bg:#F1F4F7;    --nav-ink:#1B2836;    --nav-ink-active:#0B1F3A;
  --surface:#FFFFFF;   --surface-2:#F4F6F9;  --ink:#10151C; --line:#E3E7EC;
  --accent:#0E9BD1;    --radius:10px;        --measure:1200px;
  --shadow:0 1px 2px rgba(16,21,28,.06), 0 8px 24px rgba(16,21,28,.08);
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

.bl-hdr{background:var(--header-bg);color:var(--header-ink);position:relative;z-index:60}
.bl-hdr__in{display:flex;align-items:center;gap:24px;padding:16px 24px;
  max-width:var(--measure);margin:0 auto}
/* Transparent logo — no border. A frame around a transparent PNG would outline
   empty space rather than the mark. */
.bl-hdr__logo img{height:96px;width:auto;display:block}
.bl-hdr__right{margin-left:auto;text-align:right;display:flex;flex-direction:column;
  gap:3px;align-items:flex-end}
.bl-hdr__addr.bl-hdr__addr{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--header-ink);text-decoration:none}
.bl-hdr__addr.bl-hdr__addr:hover{color:var(--accent)}
.bl-hdr__tel.bl-hdr__tel{font-size:25px;font-weight:600;color:var(--header-ink);
  text-decoration:none;letter-spacing:-.01em;line-height:1.1}
.bl-hdr__tel.bl-hdr__tel:hover{color:var(--accent)}
.bl-hdr__social{display:flex;gap:8px;margin-top:3px;list-style:none;padding:0;margin-bottom:0}
/* Bare glyphs, no tile. */
.bl-hdr__social{gap:14px}
.bl-hdr__social a{display:grid;place-items:center;background:none;padding:0;
  color:var(--header-ink);text-decoration:none;transition:.15s}
.bl-hdr__social a:hover{color:var(--accent)}
.bl-hdr__social svg{width:19px;height:19px;fill:currentColor;display:block}

/* --- desktop nav + dropdowns --- */
.bl-nav{background:var(--nav-bg);border-bottom:1px solid var(--line);position:relative;z-index:55}
.bl-nav__in{display:flex;align-items:center;max-width:var(--measure);margin:0 auto;padding:0 24px}
/* Items spread across the full container rather than bunching left. Each li
   flexes so the row fills edge to edge and the labels stay centred in their
   own share of the width. */
.bl-nav__list{display:flex;list-style:none;margin:0;padding:0;width:100%;
  justify-content:space-between}
.bl-nav__list > li{position:relative;flex:1 1 auto;text-align:center}
.bl-nav__list > li > a{display:block;padding:17px 10px;color:var(--nav-ink);text-decoration:none;
  font-size:15px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:3px solid transparent;white-space:nowrap}
.bl-nav__list > li > a:hover,.bl-nav__list > li.is-current > a{color:var(--nav-ink-active);
  border-bottom-color:var(--accent)}
.bl-nav__has > a::after{content:"";display:inline-block;margin-left:7px;vertical-align:middle;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
/* Anchored to the parent's LEFT edge, not centred on it. Centring (left:50% +
   translateX(-50%)) put the Catalog dropdown off the left edge of the screen at
   every width <=1200: the nav row stops being centred once the viewport is
   narrower than --measure, so Catalog starts at the 24px padding, and a 210px
   menu centred on a 147px item begins at -7px (-27px by 900px). It looked fine
   at 1440 because the row is centred there and Catalog starts at 144px.
   li:last-child is right-aligned so a dropdown added to the last nav item
   cannot overflow the other edge — the nav is data-driven from $bl_nav, so
   which items have children can change without anyone revisiting this rule. */
.bl-sub{position:absolute;top:100%;left:0;min-width:210px;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow);list-style:none;margin:0;padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
.bl-nav__list > li:last-child .bl-sub{left:auto;right:0}
.bl-nav__has:hover .bl-sub,.bl-nav__has:focus-within .bl-sub{opacity:1;visibility:visible;transform:translateY(0)}
.bl-sub a{display:block;padding:9px 12px;border-radius:calc(var(--radius) - 4px);
  color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.bl-sub a:hover{background:var(--surface-2);color:var(--accent)}
/* Shop link: cart + "Shop Online" in shop blue, as on the umbrella. Stays blue
   on hover; the accent underline is the hover cue. */
.bl-nav__list > li.bl-shop-nav > a{display:flex;align-items:center;justify-content:center;gap:7px}
.bl-nav__list > li.bl-shop-nav > a,.bl-nav__list > li.bl-shop-nav > a:hover{color:#0078dc;font-weight:800}
.bl-nav__list > li.bl-shop-nav svg{width:18px;height:18px;fill:currentColor;flex:none}

/* --- mobile bar: hamburger + Parts / Sales / Call --- */
.bl-mbar{display:none;background:var(--header-bg);border-top:1px solid color-mix(in srgb,var(--header-ink) 12%,transparent)}
.bl-mbar__list{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.bl-mbar__list li + li{border-left:1px solid color-mix(in srgb,var(--header-ink) 12%,transparent)}
.bl-mbar__list a,.bl-mbar__list button{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;width:100%;padding:11px 4px;background:none;border:0;
  color:var(--header-ink);text-decoration:none;font:inherit;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.bl-mbar__list a:hover,.bl-mbar__list button:hover{background:color-mix(in srgb,var(--header-ink) 10%,transparent)}
.bl-mbar svg{width:20px;height:20px;fill:currentColor;display:block}
.bl-mbar__list li.bl-shop-nav a{color:#0078dc;font-weight:800}

/* --- off-canvas drawer (replaces mmenu) --- */
.bl-drawer{position:fixed;inset:0 auto 0 0;width:min(86vw,340px);background:var(--surface);
  z-index:200;transform:translateX(-100%);transition:transform .26s ease;
  overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 0 40px rgba(0,0,0,.35)}
.bl-drawer[data-open]{transform:none}
.bl-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px;border-bottom:1px solid var(--line);background:var(--header-bg)}
.bl-drawer__head img{height:52px;width:auto}
.bl-drawer__close{background:none;border:0;color:var(--header-ink);font-size:26px;
  line-height:1;cursor:pointer;padding:4px 8px}
.bl-drawer ul{list-style:none;margin:0;padding:0}
.bl-drawer > nav > ul > li{border-bottom:1px solid var(--line)}
.bl-drawer a{display:block;padding:14px 18px;color:var(--ink);text-decoration:none;
  font-size:15px;font-weight:600}
.bl-drawer a:hover{background:var(--surface-2);color:var(--accent)}
.bl-drawer .bl-sub{position:static;opacity:1;visibility:visible;transform:none;
  border:0;box-shadow:none;border-radius:0;padding:0 0 8px 0;background:var(--surface-2)}
.bl-drawer .bl-sub a{padding:10px 18px 10px 34px;font-size:14px;font-weight:500}
.bl-scrim{position:fixed;inset:0;background:rgba(8,12,18,.55);z-index:199;
  opacity:0;visibility:hidden;transition:.26s}
.bl-scrim[data-open]{opacity:1;visibility:visible}
body.bl-locked{overflow:hidden}

/* Umbrella: the four stores' numbers sit where a store site has its own,
   grouped on the right (mockup B). Name in the store address style, number a
   step down from the single store's 25px so four fit. */
.bl-hdr__locs{display:flex;list-style:none;margin:0;padding:0}
.bl-hdr__locs li{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:6px 20px}
.bl-hdr__locs li + li{border-left:1px solid color-mix(in srgb,var(--header-ink) 14%,transparent)}
.bl-hdr__locs li:last-child{padding-right:0}
.bl-hdr__loc.bl-hdr__loc{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--header-ink);text-decoration:none;margin-bottom:5px;white-space:nowrap}
.bl-hdr__loctel.bl-hdr__loctel{display:block;font-size:19px;font-weight:600;color:var(--header-ink);
  text-decoration:none;letter-spacing:-.01em;line-height:1.1;white-space:nowrap}
.bl-hdr__loc.bl-hdr__loc:hover,.bl-hdr__loctel.bl-hdr__loctel:hover{color:var(--accent)}
/* skin.css colours every link (body.bl-umbrella a, 0-1-2, beats .bl-drawer a)
   and the PowerGo wrappers centre text, so the drawer and dropdown restate the
   store values. */
body.bl-umbrella .bl-drawer{text-align:left}
body.bl-umbrella .bl-drawer a,body.bl-umbrella .bl-sub a{color:var(--ink)}
body.bl-umbrella .bl-drawer a:hover,body.bl-umbrella .bl-sub a:hover{color:var(--accent)}
/* logo-umbrella-v3.png carries more margin than the store logos, so it is drawn
   taller to give the BORDERLAND wordmark the store logos' width; the negative
   margin keeps the band at the store height. */
.bl-hdr__logo--umbrella img{height:112px;margin:-8px 0}

/* Same breakpoints as the store themes. */
@media (max-width:1000px){
  .bl-nav__in{padding:0 10px}
  .bl-nav__list > li > a{padding-left:5px;padding-right:5px;letter-spacing:0}
  .bl-hdr__locs li{padding:6px 12px}
  .bl-hdr__loctel.bl-hdr__loctel{font-size:17px}
}
@media (max-width:910px){
  .bl-nav{display:none}
  .bl-mbar{display:block}
  .bl-hdr__in{padding:12px 16px;gap:14px}
  .bl-hdr__logo img{height:64px}
  .bl-hdr__logo--umbrella img{height:72px;margin:-4px 0}
  .bl-hdr__tel{font-size:20px}
  .bl-hdr__addr{font-size:10.5px}
  /* Four numbers in two rows beside the logo. */
  .bl-hdr__locs{display:grid;grid-template-columns:1fr 1fr;gap:6px 0}
  .bl-hdr__locs li{align-items:flex-end;text-align:right;padding:2px 8px}
  .bl-hdr__locs li + li{border-left:0}
  .bl-hdr__locs li:nth-child(even){border-left:1px solid color-mix(in srgb,var(--header-ink) 14%,transparent);padding-right:0}
  .bl-hdr__loc.bl-hdr__loc{font-size:9.5px;margin-bottom:2px}
  .bl-hdr__locrest{display:none}  /* "Portage la Prairie" → "Portage" */
  .bl-hdr__loctel.bl-hdr__loctel{font-size:13.5px}
}
/* Small phones: four numbers beside the logo need a smaller logo and figures. */
@media (max-width:400px){
  .bl-hdr__in{gap:10px}
  .bl-hdr__logo--umbrella img{height:60px;margin:-3px 0}
  .bl-hdr__locs li{padding:2px 6px}
  .bl-hdr__loctel.bl-hdr__loctel{font-size:12.5px}
}
@media (max-width:340px){
  .bl-hdr__in{padding:12px}
  .bl-hdr__logo--umbrella img{height:54px}
}