/* ==========================================================================
   BluePort Container — Header & Footer Stylesheet v3.0
   ========================================================================== */

:root {
  /* ── Brand palette ──
     navy   #00296C — primary surface (topbar, category strip, footer, drawer)
     blue   #0069B6 — accent: buttons, links and focus rings ON LIGHT surfaces
     Both brand colours are dark, so #0069B6 on #00296C only reaches 2.4:1.
     --bpc-accent is therefore REDECLARED to --bpc-accent-light on every navy
     component below; custom properties inherit, so each descendant that says
     var(--bpc-accent) automatically picks up the legible tint. Never hardcode
     #0069B6 as a foreground on navy — use var(--bpc-accent). */
  --bpc-navy:         #00296C;
  --bpc-navy-dark:    #001B48;
  --bpc-navy-light:   #063E96;
  --bpc-accent:       #0069B6;
  --bpc-accent-dark:  #00518D;
  --bpc-accent-light: #4DA6E8;
  --bpc-on-accent:    #ffffff;
  --bpc-white:        #ffffff;
  --bpc-offwhite:     #f5f7fa;
  --bpc-text-dark:    #1b2733;
  --bpc-text-muted:   #5a6473;
  --bpc-border:       #e4e7ec;
  --bpc-font:         'Inter', 'Helvetica Neue', Arial, sans-serif;
  --bpc-font-size-md: 15px;
  --bpc-container-max: 1340px;
  --bpc-topbar-h:     40px;
  --bpc-main-h:       76px;
  --bpc-strip-h:      42px;
  --bpc-header-total: 158px;
  --bpc-radius-sm:    6px;
  --bpc-radius-lg:    12px;
  --bpc-radius-pill:  999px;
  --bpc-duration-xs:  0.15s;
  --bpc-duration-sm:  0.25s;
  --bpc-z-header:     1000;
  --bpc-z-dropdown:   900;
  --bpc-z-drawer:     1200;
  --bpc-z-overlay:    1100;
  --bpc-ease:         cubic-bezier(0.4,0,0.2,1);
  --bpc-ease-spring:  cubic-bezier(0.34,1.56,0.64,1);
}

/* Navy-backed components: swap the accent for its legible tint (see note above). */
.bpc-topbar,
.bpc-cat-strip,
.bpc-mobile-drawer,
.bpc-site-footer {
  --bpc-accent: var(--bpc-accent-light);
  --bpc-on-accent: var(--bpc-navy);
}

*,*::before,*::after { box-sizing: border-box; }

/* Anchor jumps land below the fixed header instead of behind it. */
html { scroll-padding-top: var(--bpc-header-total); }

body {
  font-family: var(--bpc-font);
  margin: 0;
}

/* Clears the fixed .bpc-site-header — without this the whole page sits under
   the header and the category <h1>/description are invisible.
   MUST stay `html body` (specificity 0,0,2): WordPress prints its theme.json
   Global Styles as `<style id="global-styles-inline-css">` containing
   `body{padding-top:0px;...}`. That is an equal-specificity `body` rule that
   loads AFTER this stylesheet, so a plain `body{}` selector here silently
   loses to it. Height comes from --bpc-header-total, which header.php's JS
   measures from the real header element. */
html body {
  padding-top: var(--bpc-header-total);
}

body.bpc-drawer-open { overflow: hidden; }

/* container
   .bpc-container is the wrapper every footer section uses. The source
   stylesheet never defined it — the class was emitted by the template but had
   no rule — so the whole footer ran edge-to-edge on wide screens while the
   header stayed centred. Defined here alongside the header containers so the
   two line up exactly. */
.bpc-container,
.bpc-main-header__inner,
.bpc-topbar__inner,
.bpc-cat-strip {
  max-width: var(--bpc-container-max);
  margin: 0 auto;
  padding: 0 24px;
}
.bpc-container { width: 100%; }

/* skip link */
.bpc-skip-link { position: absolute; top: -100px; left: 0; z-index: 9999; }
.bpc-skip-link:focus { top: 0; }

/* ── Site header sticky wrapper ── */
.bpc-site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--bpc-z-header);
  transition: box-shadow 0.3s var(--bpc-ease);
}
body.bpc-scrolled .bpc-site-header {
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

/* =====================================================================
   LAYER 1 — TOP CONTACT BAR
===================================================================== */
.bpc-topbar {
  position: relative;
  z-index: 4;
  background: var(--bpc-navy);
  height: var(--bpc-topbar-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bpc-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}
.bpc-topbar__left,
.bpc-topbar__right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bpc-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.bpc-topbar__item:hover { color: var(--bpc-accent); }
.bpc-topbar__item svg { flex-shrink: 0; color: var(--bpc-accent); }
.bpc-topbar__sep { color: rgba(255,255,255,0.25); font-size: 12px; }
.bpc-topbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.bpc-topbar__badge svg { color: var(--bpc-accent); }

/* =====================================================================
   LAYER 2 — MAIN HEADER
===================================================================== */
.bpc-main-header {
  position: relative;
  z-index: 3;
  background: var(--bpc-white);
  height: var(--bpc-main-h);
  border-bottom: 1px solid #e8eaed;
}
.bpc-main-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Logo */
.bpc-logo-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.bpc-logo-img,
.bpc-logo-svg {
  display: block;
  height: 48px;
  width: auto;
  max-height: 48px;
  max-width: 100%;
  object-fit: contain;
}
.bpc-mobile-drawer__logo-link { display: inline-flex; align-items: center; text-decoration: none; }

/* Text wordmark — only rendered when no custom_logo is set, so the header
   never collapses to an empty link if the logo attachment goes missing. */
.bpc-logo-text {
  display: block;
  font-family: var(--bpc-font);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 48px;
  color: var(--bpc-navy);
  white-space: nowrap;
}
.bpc-logo-text__accent { color: var(--bpc-accent); margin-left: 6px; font-weight: 700; }
.bpc-logo-text--invert { color: var(--bpc-white); }

/* The brand logo is navy artwork on transparency — correct on the white
   header, invisible on the navy footer and drawer. Knock it back to solid
   white there rather than shipping a second asset: brightness(0) flattens
   every colour to black, invert(1) then flips it to white, so the mark keeps
   its exact shape and alpha channel. */
.bpc-mobile-drawer__logo-img,
.bpc-footer-logo-img {
  display: block;
  width: auto;
  filter: brightness(0) invert(1);
}
.bpc-mobile-drawer__logo-img { height: 38px; }
.bpc-footer-logo-img { height: 44px; }

/* Centered nav */
.bpc-main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bpc-main-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bpc-main-nav__list li { position: relative; }
.bpc-main-nav__list > li > a {
  display: block;
  padding: 8px 14px;
  color: var(--bpc-navy);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.bpc-main-nav__list > li > a:hover,
.bpc-main-nav__list > li.current-menu-item > a,
.bpc-main-nav__list > li.current-menu-ancestor > a {
  color: var(--bpc-accent);
  background: rgba(0,105,182,0.07);
}

/* Dropdown */
.bpc-main-nav__list .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--bpc-white);
  border: 1px solid #e8eaed;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 41, 108,0.14);
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s var(--bpc-ease), visibility 0.2s, transform 0.2s var(--bpc-ease);
  z-index: var(--bpc-z-dropdown);
}
.bpc-main-nav__list li:hover > .sub-menu,
.bpc-main-nav__list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.bpc-main-nav__list .sub-menu a {
  display: block;
  padding: 9px 18px;
  color: #333;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.bpc-main-nav__list .sub-menu a:hover {
  color: var(--bpc-accent);
  background: rgba(0,105,182,0.06);
}
/* dropdown arrow indicator */
.bpc-main-nav__list .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.6;
  transition: transform 0.2s;
}
.bpc-main-nav__list .menu-item-has-children:hover > a::after { transform: rotate(180deg); }

/* Right actions */
.bpc-main-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Cart button */
.bpc-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 8px;
  border: 1.5px solid #e0e3e8;
  color: var(--bpc-navy);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.bpc-cart-btn:hover { border-color: var(--bpc-accent); background: rgba(0,105,182,0.06); }
.bpc-cart-count {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--bpc-navy);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.2s, transform 0.2s;
}
.bpc-cart-count.has-items { opacity: 1; transform: scale(1); }

/* Shop Now / CTA button */
.bpc-quote-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bpc-accent);
  color: var(--bpc-on-accent) !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 10px 20px;
  border-radius: 7px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
}
.bpc-quote-btn:hover { background: var(--bpc-accent-dark); transform: translateY(-1px); }

/* Hamburger */
.bpc-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none;
  border: 1.5px solid #e0e3e8;
  border-radius: 7px;
  cursor: pointer;
  padding: 8px;
  transition: border-color 0.2s;
}
.bpc-hamburger:hover { border-color: var(--bpc-accent); }
.bpc-hamburger__bar {
  display: block;
  width: 20px; height: 2px;
  background: var(--bpc-navy);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.bpc-hamburger--open .bpc-hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bpc-hamburger--open .bpc-hamburger__bar:nth-child(2) { opacity: 0; }
.bpc-hamburger--open .bpc-hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================================
   LAYER 3 — CATEGORY STRIP
===================================================================== */
.bpc-cat-strip {
  position: relative;
  z-index: 1;
  background: var(--bpc-navy);
  height: var(--bpc-strip-h);
  overflow: hidden;
  max-width: 100% !important;
  padding: 0 !important;
}
.bpc-cat-strip__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: bpc-strip-scroll 28s linear infinite;
  gap: 0;
}
.bpc-cat-strip:hover .bpc-cat-strip__track { animation-play-state: paused; }
@keyframes bpc-strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.bpc-cat-strip__item {
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  height: 100%;
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.bpc-cat-strip__item:hover { color: var(--bpc-accent); }
.bpc-cat-strip__dot {
  color: var(--bpc-accent);
  font-size: 8px;
  line-height: 1;
  flex-shrink: 0;
}

/* =====================================================================
   STICKY BEHAVIOUR — hide topbar when scrolled
===================================================================== */
body.bpc-scrolled .bpc-topbar {
  height: 0;
  overflow: hidden;
  border: none;
}
body.bpc-scrolled {
  --bpc-header-total: 118px; /* main + strip only */
}

/* =====================================================================
   MAIN CONTENT WRAPPER
===================================================================== */
.bpc-main-content { min-height: 60vh; }
.bpc-page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }

/* =====================================================================
   MOBILE DRAWER
===================================================================== */
.bpc-mobile-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(360px, 90vw);
  height: 100vh;
  background: var(--bpc-navy);
  z-index: var(--bpc-z-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s var(--bpc-ease);
  overflow-y: auto;
}
.bpc-mobile-drawer:not([hidden]) { transform: translateX(0); }
.bpc-mobile-drawer[hidden] { display: flex !important; } /* keep for animation */
.bpc-mobile-drawer__inner { display: flex; flex-direction: column; min-height: 100%; }
.bpc-mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.bpc-mobile-drawer__close {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.bpc-mobile-drawer__nav { flex: 1; padding: 16px 0; }
.bpc-mobile-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bpc-mobile-nav__item { border-bottom: 1px solid rgba(255,255,255,0.06); }
.bpc-mobile-nav__item:last-child { border: none; }
.bpc-mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  color: rgba(255,255,255,0.9);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}
.bpc-mobile-nav__link:hover { color: var(--bpc-accent); }
.bpc-mobile-nav__link--sub { padding: 11px 24px 11px 40px; font-size: 14px; font-weight: 500; }
.bpc-mobile-submenu-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 14px 24px;
  margin-left: auto;
}
.bpc-mobile-submenu { list-style: none; margin: 0; padding: 0; background: rgba(0,0,0,0.2); }
.bpc-mobile-drawer__footer {
  padding: 20px 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bpc-mobile-drawer__contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  text-decoration: none;
}
.bpc-mobile-drawer__cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bpc-accent);
  color: var(--bpc-on-accent);
  font-size: 14px;
  font-weight: 800;
  padding: 13px 20px;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
}
.bpc-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: var(--bpc-z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}
.bpc-drawer-overlay--active { opacity: 1; visibility: visible; }

/* =====================================================================
   WOOCOMMERCE OVERRIDES
===================================================================== */
.woocommerce-breadcrumb { padding: 12px 0; font-size: 13px; color: #888; }
.woocommerce-breadcrumb a { color: var(--bpc-accent); text-decoration: none; }
.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error { margin: 16px 0; }
.single-product .bpc-main-content,
.woocommerce .bpc-main-content { padding: 32px 24px; max-width: 1340px; margin: 0 auto; }

/* =====================================================================
   CONTACT FORM 7
===================================================================== */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #dde1e7;
  border-radius: 7px;
  font-size: 14px;
  font-family: var(--bpc-font);
  transition: border-color 0.2s;
  margin-bottom: 12px;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--bpc-accent);
  box-shadow: 0 0 0 3px rgba(0,105,182,0.12);
}
.wpcf7-form input[type="submit"] {
  background: var(--bpc-accent);
  color: var(--bpc-on-accent);
  font-weight: 800;
  font-size: 14px;
  border: none;
  padding: 13px 28px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s;
}
.wpcf7-form input[type="submit"]:hover { background: var(--bpc-accent-dark); }

/* =====================================================================
   RESPONSIVE
===================================================================== */
@media (max-width: 1100px) {
  .bpc-main-nav__list > li > a { padding: 8px 10px; font-size: 13.5px; }
}

@media (max-width: 900px) {
  .bpc-main-nav { display: none; }
  .bpc-hamburger { display: flex; }
  /* topbar still renders here: 40 + main 72 + strip 42 = 154 */
  body { --bpc-header-total: 154px; }
  .bpc-topbar__left .bpc-topbar__item:nth-child(n+4),
  .bpc-topbar__left .bpc-topbar__sep:nth-child(n+3) { display: none; }
}

@media (max-width: 600px) {
  .bpc-topbar { display: none; }
  /* topbar hidden: main 72 + strip 42 = 114 */
  body { --bpc-header-total: 114px; }
  .bpc-main-h: { height: 64px; }
}

/* ==========================================================================
   8. FOOTER — NEWSLETTER BAR
   ========================================================================== */
.bpc-site-footer {  position: relative;  z-index: 1;}
.bpc-newsletter-bar {
  background-color: var(--bpc-accent);
  padding: 32px 0;
}

.bpc-newsletter-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.bpc-newsletter-bar__copy {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 240px;
}

.bpc-newsletter-bar__icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.bpc-newsletter-bar__heading {
  margin: 0 0 4px;
  font-family: var(--bpc-font);
  font-size: 19px;
  font-weight: 800;
  color: var(--bpc-navy);
  line-height: 1.2;
}

.bpc-newsletter-bar__sub {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 41, 108, 0.65);
}

.bpc-newsletter-bar__form-wrap {
  flex: 1;
  max-width: 480px;
  min-width: 280px;
}

.bpc-newsletter-form__group {
  display: flex;
  gap: 0;
  height: 50px;
  border-radius: var(--bpc-radius-pill);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.bpc-newsletter-form__input {
  flex: 1;
  padding: 0 20px;
  font-family: var(--bpc-font);
  font-size: var(--bpc-font-size-md);
  font-weight: 500;
  color: var(--bpc-text-dark);
  background: var(--bpc-white);
  border: none;
  outline: none;
  min-width: 0;
}
.bpc-newsletter-form__input::placeholder {
  color: var(--bpc-text-muted);
  font-weight: 400;
}

.bpc-newsletter-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  background-color: var(--bpc-navy);
  color: var(--bpc-white);
  font-family: var(--bpc-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--bpc-duration-sm) var(--bpc-ease);
  flex-shrink: 0;
}
.bpc-newsletter-form__submit:hover {
  background-color: var(--bpc-navy-light);
}
.bpc-newsletter-form__submit:focus-visible {
  outline: 3px solid var(--bpc-accent-light);
  outline-offset: 2px;
}

.bpc-newsletter-form__privacy {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 500;
  color: rgba(0, 41, 108, 0.55);
}
.bpc-newsletter-form__privacy svg {
  flex-shrink: 0;
  color: rgba(0, 41, 108, 0.5);
}


/* ==========================================================================
   9. FOOTER — MAIN GRID
   ========================================================================== */
.bpc-footer-main {
  background-color: var(--bpc-navy);
  padding: 64px 0;
}

.bpc-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 36px;
  align-items: start;
}

/* Column base styles */
.bpc-footer-col {}

.bpc-footer-col__heading {
  margin: 0 0 20px;
  font-family: var(--bpc-font);
  font-size: 11px;
  font-weight: 800;
  color: var(--bpc-accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,105,182, 0.25);
}

/* ── Brand column ─────────────────────────── */
.bpc-footer-col--brand {}

.bpc-footer-logo-link {
  display: inline-flex;
  margin-bottom: 16px;
  text-decoration: none;
}
.bpc-footer-logo-svg {
  display: block;
}

.bpc-footer-tagline {
  margin: 0 0 24px;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
}

/* Social buttons */
.bpc-footer-social {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.bpc-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: rgba(255,255,255,0.65);
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  text-decoration: none;
  transition:
    color var(--bpc-duration-sm) var(--bpc-ease),
    border-color var(--bpc-duration-sm) var(--bpc-ease),
    background-color var(--bpc-duration-sm) var(--bpc-ease),
    transform var(--bpc-duration-xs) var(--bpc-ease);
}
.bpc-social-btn:hover {
  color: var(--bpc-accent);
  border-color: var(--bpc-accent);
  background-color: rgba(0,105,182,0.1);
  transform: translateY(-2px);
}
.bpc-social-btn:focus-visible {
  outline: 2px solid var(--bpc-accent);
  outline-offset: 3px;
}

/* Trust badges */
.bpc-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bpc-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--bpc-radius-pill);
}
.bpc-trust-badge svg {
  color: var(--bpc-accent);
  flex-shrink: 0;
}


/* ── Footer links (shared) ────────────────── */
.bpc-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bpc-footer-links__item {}

.bpc-footer-links__link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  letter-spacing: 0.1px;
  transition: color var(--bpc-duration-sm) var(--bpc-ease), padding-left var(--bpc-duration-sm) var(--bpc-ease);
}
.bpc-footer-links__link svg {
  color: rgba(0,105,182,0.4);
  flex-shrink: 0;
  transition: color var(--bpc-duration-sm) var(--bpc-ease), transform var(--bpc-duration-sm) var(--bpc-ease);
}
.bpc-footer-links__link:hover {
  color: var(--bpc-accent);
  padding-left: 4px;
}
.bpc-footer-links__link:hover svg {
  color: var(--bpc-accent);
  transform: translateX(2px);
}
.bpc-footer-links__link:focus-visible {
  outline: 1px solid var(--bpc-accent);
  outline-offset: 2px;
  border-radius: var(--bpc-radius-sm);
}


/* ── Contact column ───────────────────────── */
.bpc-footer-address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.bpc-footer-address__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
}

.bpc-footer-address__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: rgba(0,105,182,0.12);
  color: var(--bpc-accent);
  border-radius: var(--bpc-radius-sm);
  margin-top: 1px;
}

.bpc-footer-address__link {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color var(--bpc-duration-sm) var(--bpc-ease);
}
.bpc-footer-address__link:hover {
  color: var(--bpc-accent);
}

/* Quote box */
.bpc-footer-quote-box {
  padding: 20px;
  background: rgba(0,105,182,0.08);
  border: 1.5px solid rgba(0,105,182,0.3);
  border-radius: var(--bpc-radius-lg);
}

.bpc-footer-quote-box__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bpc-footer-quote-box__top svg {
  color: var(--bpc-accent);
}

.bpc-footer-quote-box__phone {
  display: block;
  font-family: var(--bpc-font);
  font-size: 20px;
  font-weight: 800;
  color: var(--bpc-accent);
  text-decoration: none;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
  transition: color var(--bpc-duration-sm) var(--bpc-ease);
}
.bpc-footer-quote-box__phone:hover {
  color: var(--bpc-accent-light);
}

.bpc-footer-quote-box__note {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
}


/* ==========================================================================
   10. FOOTER — BOTTOM BAR
   ========================================================================== */
.bpc-footer-bottom {
  background-color: var(--bpc-navy-dark);
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 20px 0;
}

.bpc-footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.bpc-footer-bottom__copy {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1px;
}

/* Payment badges */
.bpc-payment-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.bpc-payment-badge {
  display: inline-flex;
  line-height: 0;
  border-radius: var(--bpc-radius-sm);
  overflow: hidden;
  opacity: 0.75;
  transition: opacity var(--bpc-duration-sm) var(--bpc-ease), transform var(--bpc-duration-xs) var(--bpc-ease);
}
.bpc-payment-badge:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* Legal links */
.bpc-footer-bottom__legal {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bpc-footer-bottom__legal-link {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color var(--bpc-duration-sm) var(--bpc-ease);
  white-space: nowrap;
}
.bpc-footer-bottom__legal-link:hover {
  color: var(--bpc-accent);
}
.bpc-footer-bottom__legal-link:focus-visible {
  outline: 1px solid var(--bpc-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Cookie Settings is a <button> so it can open the consent dialog; strip the
   UA button chrome so it reads identically to the sibling legal links. */
button.bpc-footer-bottom__legal-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

.bpc-footer-bottom__legal-sep {
  color: rgba(255,255,255,0.2);
  font-size: 11px;
  user-select: none;
}


/* ==========================================================================
   11. WOOCOMMERCE INTEGRATION
   ========================================================================== */

/* WC mini-cart fragments */
.woocommerce-mini-cart-item a.remove { color: var(--bpc-accent) !important; }

/* WC product search styling (if inserted into nav) */
.bpc-site-header .woocommerce-product-search input[type="search"] {
  border-radius: var(--bpc-radius-pill);
  border: 2px solid transparent;
  background: var(--bpc-offwhite);
  font-family: var(--bpc-font);
  padding: 10px 20px;
  transition: border-color var(--bpc-duration-sm) var(--bpc-ease);
}
.bpc-site-header .woocommerce-product-search input[type="search"]:focus {
  border-color: var(--bpc-accent);
  outline: none;
}

/* WC notices in main content */
.bpc-main-content .woocommerce-message,
.bpc-main-content .woocommerce-error,
.bpc-main-content .woocommerce-info {
  border-top-color: var(--bpc-accent);
}

/* Ensure Storefront/WC breadcrumbs are not hidden by sticky header */
.bpc-main-content {
  scroll-margin-top: var(--bpc-header-total);
}


/* ==========================================================================
   12. RESPONSIVE — 1280px
   ========================================================================== */
@media (max-width: 1280px) {
  :root {
    --bpc-container-px: 20px;
  }

  .bpc-nav-menu a,
  .bpc-nav-menu .bpc-nav-menu__link {
    padding: 0 14px;
    font-size: 12px;
  }

  .bpc-search-form {
    max-width: 440px;
  }
}


/* ==========================================================================
   13. RESPONSIVE — 1024px (Hamburger appears)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Main header compacts to 72px here (see .bpc-main-header below), while the
     topbar (40px) and category strip (42px) both still render: 40+72+42 = 154.
     The old 116px predated the current header and left ~38px of page content
     hidden behind the fixed strip. JS in header.php measures the real height
     and overrides this at runtime; these values are the no-JS fallback. */
  :root {
    --bpc-header-total:   154px; /* topbar 40 + main 72 + strip 42 */
    --bpc-header-compact: 114px; /* scrolled: topbar collapses -> 72 + 42 */
  }

  /* Show hamburger */
  .bpc-hamburger { display: flex; }

  /* Hide desktop search from main header */
  .bpc-main-header__search { display: none; }

  /* Compact main header */
  .bpc-main-header {
  position: relative;
  z-index: 3;
    height: 72px;
  }

  /* Full-width drawer at tablet */
  .bpc-mobile-drawer {
    max-width: 100%;
  }

  .bpc-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 48px;
  }
}


/* ==========================================================================
   14. RESPONSIVE — 768px
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --bpc-container-px: 16px;
  }

  .bpc-promo-bar {
    height: 30px;
  }
  :root {
    --bpc-promo-h: 30px;
  }

  .bpc-promo-bar__utils {
    display: none;
  }

  .bpc-newsletter-bar__inner {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  .bpc-newsletter-bar__copy {
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
  }
  .bpc-newsletter-bar__form-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .bpc-footer-bottom__inner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .bpc-footer-bottom__copy {
    order: 3;
  }
  .bpc-payment-badges {
    order: 1;
  }
  .bpc-footer-bottom__legal {
    order: 2;
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* ==========================================================================
   15. RESPONSIVE — 640px
   ========================================================================== */
@media (max-width: 640px) {
  :root {
    --bpc-container-px: 14px;
  }

  .bpc-main-header {
  position: relative;
  z-index: 3;
    height: 64px;
  }

  .bpc-logo-img,
  .bpc-logo-svg,
  .bpc-logo-text {
    height: 36px;
    line-height: 36px;
    font-size: 20px;
  }

  .bpc-footer-main {
    padding: 48px 0;
  }

  .bpc-footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .bpc-footer-col__heading {
    margin-bottom: 14px;
  }

  .bpc-newsletter-bar {
    padding: 24px 0;
  }

  .bpc-newsletter-bar__heading {
    font-size: 16px;
  }

  .bpc-newsletter-form__group {
    height: 46px;
  }
  .bpc-newsletter-form__submit {
    padding: 0 16px;
    font-size: 12px;
  }

  .bpc-footer-quote-box__phone {
    font-size: 18px;
  }
}


/* ==========================================================================
   16. RESPONSIVE — 480px
   ========================================================================== */
@media (max-width: 480px) {
  :root {
    --bpc-container-px: 12px;
  }

  .bpc-main-header__inner {
    gap: 12px;
  }

  .bpc-logo-img,
  .bpc-logo-svg,
  .bpc-logo-text {
    height: 32px;
    line-height: 32px;
    font-size: 18px;
  }

  .bpc-header-icon__label {
    display: none;
  }

  .bpc-header-icon {
    padding: 8px;
    min-width: 40px;
  }

  .bpc-cart-badge {
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    line-height: 16px;
  }

  .bpc-payment-badges {
    gap: 6px;
  }

  .bpc-payment-badge svg {
    width: 48px;
    height: 30px;
  }

  .bpc-mobile-drawer__head {
    padding: 16px;
  }

  .bpc-mobile-drawer__footer {
    padding: 16px;
  }

  .bpc-mobile-nav__link {
    font-size: 16px;
    padding: 14px 16px;
  }

  .bpc-mobile-drawer__cta-btn {
    padding: 12px 16px;
    font-size: 13px;
  }
}


/* ==========================================================================
   17. PRINT STYLES
   ========================================================================== */
@media print {
  .bpc-promo-bar,
  .bpc-nav-bar,
  .bpc-newsletter-bar,
  .bpc-mobile-drawer,
  .bpc-drawer-overlay,
  .bpc-hamburger,
  .bpc-quote-btn {
    display: none !important;
  }

  .bpc-site-header {
    position: static;
  }

  .bpc-page-wrapper {
    padding-top: 0 !important;
  }

  .bpc-footer-main {
    background: #000 !important;
  }
}


/* ==========================================================================
   18. FOCUS MANAGEMENT & HIGH CONTRAST
   ========================================================================== */
@media (forced-colors: active) {
  .bpc-promo-bar        { forced-color-adjust: none; background: Canvas; border-bottom: 1px solid ButtonText; }
  .bpc-main-header      { forced-color-adjust: none; background: Canvas; }
  .bpc-nav-bar          { forced-color-adjust: none; background: ButtonFace; }
  .bpc-quote-btn        { forced-color-adjust: none; background: Highlight; color: HighlightText !important; }
  .bpc-cart-badge       { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .bpc-search-form__submit { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* Ensure focus rings are always visible */
:focus-visible {
  outline: 2px solid var(--bpc-accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}


/* ==========================================================================
   19. ANIMATION UTILITIES
   ========================================================================== */
@keyframes bpc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bpc-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bpc-badge-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.bpc-cart-badge--visible {
  animation: bpc-badge-pop var(--bpc-duration-sm) var(--bpc-ease-spring) both;
}


/* ==========================================================================
   20. STICKY HEADER — COMPACT STATE OVERRIDES
   ========================================================================== */
body.bpc-scrolled .bpc-site-header {
  box-shadow: 0 2px 24px rgba(0,0,0,0.12);
}

body.bpc-scrolled .bpc-main-header {
  position: relative;
  z-index: 3;
  border-bottom-width: 2px;
}

body.bpc-scrolled .bpc-nav-bar {
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* Quote button shrinks slightly */
body.bpc-scrolled .bpc-quote-btn {
  padding: 7px 14px;
  font-size: 11px;
}

/* ── Homepage grid responsive fixes ── */
@media (max-width: 1024px) {
  /* Trust bar: 2x2 on tablet */
  .elementor-section#s-trust .elementor-column { width: 50% !important; }
  /* Product + category grids */
  .elementor-widget-text-editor div[style*='grid-template-columns'] {
    grid-template-columns: repeat(2,1fr) !important;
  }
}
@media (max-width: 600px) {
  .elementor-section#s-trust .elementor-column { width: 100% !important; }
  .elementor-widget-text-editor div[style*='grid-template-columns'] {
    grid-template-columns: 1fr !important;
  }
  .elementor-section#s-why .elementor-column { width: 100% !important; }
}
/* Trust icon circle wrapper fix */
.elementor-widget-text-editor div[style*='border-radius:50%'] {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* ── Contact Form 7 Professional Styles ── */
.wpcf7 { width: 100%; }
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    color: #00296C;
    background: #fff;
    margin-bottom: 16px;
    transition: border-color .2s;
    box-sizing: border-box;
    display: block;
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
    outline: none;
    border-color: #0069B6;
    box-shadow: 0 0 0 3px rgba(0,105,182,.15);
}
.wpcf7 textarea { height: 130px; resize: vertical; }
.wpcf7 input[type=submit] {
    background: #0069B6 !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 40px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    letter-spacing: .3px;
    transition: background .2s;
}
.wpcf7 input[type=submit]:hover { background: #00518D !important; }
.wpcf7 .wpcf7-not-valid-tip { color: #e53e3e; font-size: 12px; margin-top: -12px; margin-bottom: 8px; display: block; }
.wpcf7 .wpcf7-response-output { margin-top: 16px; padding: 12px 16px; border-radius: 6px; font-size: 14px; border: none !important; }
.wpcf7 .wpcf7-mail-sent-ok { background: #f0fff4; color: #276749; }
.wpcf7 .wpcf7-validation-errors { background: #fff5f5; color: #c53030; }

/* ── Page content styles ── */
.entry-content h1, .entry-content h2, .entry-content h3 { color: #00296C; }
.entry-content p { color: #555; line-height: 1.7; }
.bpc-page-content { max-width: 1100px; margin: 0 auto; padding: 60px 20px; }


/* ==========================================================================
   SHOP PAGE — SIDEBAR + PRODUCT GRID
   ========================================================================== */

/* Ensure shop main content area spans full width */
body.woocommerce-shop .bpc-main-content,
body.woocommerce-page .bpc-main-content,
body.tax-product_cat .bpc-main-content {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Two-column layout wrapper */
.bpc-shop-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
  max-width: 1380px;
  margin: 28px auto 48px;
  padding: 0 28px;
  box-sizing: border-box;
}

/* ── LEFT SIDEBAR ── */
.bpc-shop-sidebar {
  flex: 0 0 260px;
  width: 260px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bpc-sw {
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  padding: 22px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.bpc-sw__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #00296C;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 3px solid #0069B6;
}

.bpc-sw__search-input {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid #dde1e7;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: #333;
  background: #f8f9fa;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bpc-sw__search-input:focus {
  border-color: #0069B6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,105,182,0.12);
}

.bpc-sw__cats {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bpc-sw__cat-item { border-bottom: 1px solid #f2f4f6; }
.bpc-sw__cat-item:last-child { border-bottom: none; }
.bpc-sw__cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px;
  text-decoration: none;
  gap: 8px;
}
.bpc-sw__cat-name {
  font-size: 13.5px;
  font-weight: 500;
  color: #2d3748;
  transition: color 0.15s;
  line-height: 1.3;
}
.bpc-sw__cat-link:hover .bpc-sw__cat-name { color: #0069B6; }
.bpc-sw__cat-count {
  flex-shrink: 0;
  background: #f0f2f5;
  color: #777;
  font-size: 11px;
  font-weight: 700;
  min-width: 24px;
  height: 20px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.bpc-sw__cat-link:hover .bpc-sw__cat-count { background: rgba(0,105,182,0.15); color: #00427A; }
.bpc-sw__cat-item--active .bpc-sw__cat-name { color: #0069B6; font-weight: 700; }
.bpc-sw__cat-item--active .bpc-sw__cat-count { background: rgba(0,105,182,0.15); color: #00427A; }

/* ── RIGHT MAIN CONTENT ── */
.bpc-shop-main {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Breadcrumb */
.bpc-shop-main .woocommerce-breadcrumb {
  font-size: 13px; color: #999; margin-bottom: 4px;
}
.bpc-shop-main .woocommerce-breadcrumb a { color: #0069B6; text-decoration: none; }

/* Page title */
.bpc-shop-main .woocommerce-products-header__title {
  font-size: 28px; font-weight: 800; color: #00296C; margin: 0 0 6px;
}

/* Toolbar: result count + sort */
.bpc-shop-main .woocommerce-result-count {
  font-size: 13px; color: #777; margin: 0;
}
.bpc-shop-main .woocommerce-ordering select {
  border: 1.5px solid #dde1e7; border-radius: 7px;
  padding: 7px 12px; font-size: 13px; color: #333; background: #fff;
}

/* ── PRODUCT GRID ── */

/* WooCommerce's woocommerce-layout.css gives ul.products a float clearfix:
   `ul.products::before/::after { content:" "; display:table }`. Harmless while
   the list is floated, but this grid re-declares it as `display:grid`, and in a
   grid container those two pseudo-elements become REAL GRID ITEMS — ::before
   takes cell 1 and ::after takes a trailing cell. The visible symptom is the
   first product row starting in column 2 with an empty cell beside it. The
   clearfix is redundant under grid, so switch it off. */
.bpc-shop-main ul.products::before,
.bpc-shop-main ul.products::after {
  content: none !important;
  display: none !important;
}

.bpc-shop-main ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}

/* Force li items to fill grid cells */
.bpc-shop-main ul.products li.product {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  background: #fff !important;
  border: 1px solid #e8eaed !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow 0.22s, transform 0.22s;
  position: relative;
}
.bpc-shop-main ul.products li.product:hover {
  box-shadow: 0 8px 30px rgba(0, 41, 108,0.13) !important;
  transform: translateY(-3px);
}

/* Thumbnail */
.bpc-shop-main ul.products li.product img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}
.bpc-shop-main ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  text-decoration: none !important;
}

/* Title */
.bpc-shop-main ul.products li.product .woocommerce-loop-product__title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #00296C !important;
  padding: 12px 14px 4px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  flex: 1;
}

/* Price */
.bpc-shop-main ul.products li.product .price {
  display: block !important;
  padding: 2px 14px 10px !important;
  font-size: 14px !important;
  color: #0069B6 !important;
  font-weight: 700 !important;
  line-height: 1.4;
}
.bpc-shop-main ul.products li.product .price del {
  color: #bbb !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-right: 2px;
}
.bpc-shop-main ul.products li.product .price ins {
  text-decoration: none !important;
}

/* Add to cart / Select options */
.bpc-shop-main ul.products li.product .button,
.bpc-shop-main ul.products li.product a.button {
  display: block !important;
  margin: auto 14px 14px !important;
  padding: 9px 14px !important;
  background: #00296C !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  width: auto !important;
  line-height: 1.5 !important;
  letter-spacing: 0.3px;
}
.bpc-shop-main ul.products li.product .button:hover,
.bpc-shop-main ul.products li.product a.button:hover {
  background: #0069B6 !important;
  color: #ffffff !important;
}

/* Sale badge */
.bpc-shop-main ul.products li.product .onsale {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  background: #0069B6 !important;
  color: #ffffff !important;
  border-radius: 99px !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 3px 10px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.6 !important;
  z-index: 1;
}

/* Pagination */
.bpc-shop-main .woocommerce-pagination { margin-top: 28px; }
.bpc-shop-main .woocommerce-pagination ul {
  display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap;
}
.bpc-shop-main .woocommerce-pagination ul li a,
.bpc-shop-main .woocommerce-pagination ul li span {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; border-radius: 6px;
  border: 1.5px solid #e0e3e8; font-size: 13px; font-weight: 600;
  color: #00296C; text-decoration: none; padding: 0 8px;
  transition: all 0.18s;
}
.bpc-shop-main .woocommerce-pagination ul li span.current,
.bpc-shop-main .woocommerce-pagination ul li a:hover {
  background: #0069B6; border-color: #0069B6; color: #ffffff;
}

/* Notices */
.bpc-shop-main .woocommerce-notices-wrapper { margin-bottom: 12px; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .bpc-shop-main ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .bpc-shop-wrap {
    flex-direction: column !important;
    padding: 0 16px !important;
    gap: 16px !important;
  }
  .bpc-shop-sidebar {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .bpc-shop-main {
    width: 100% !important;
  }
}
@media (max-width: 480px) {
  .bpc-shop-main ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* ── Image clarity ── */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.wp-post-image,
.woocommerce-product-gallery img,
.attachment-woocommerce_thumbnail,
.elementor-image img {
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
}

/* ── Admin bar offset for fixed header ── */
body.admin-bar .bpc-site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .bpc-site-header {
    top: 46px;
  }
}




/* ── Hero section min-height fix ── */
.elementor-section.elementor-element-s-hero {
  min-height: 90vh !important;
  display: flex !important;
  align-items: center !important;
}
.elementor-section.elementor-element-s-hero > .elementor-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

/* ── Topbar social icons ── */
.bpc-topbar__social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bpc-topbar__social-link {
  color: rgba(255,255,255,0.6);
  display: inline-flex;
  align-items: center;
  transition: color 0.2s var(--bpc-ease);
  line-height: 0;
}
.bpc-topbar__social-link:hover {
  color: var(--bpc-accent);
}
.bpc-topbar__social-link svg {
  fill: currentColor;
  stroke: currentColor;
}

/* SEO content section – mobile stack */
@media(max-width:767px){
  [data-id="s-seo-content"] div[style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:16px !important;}
}

/* ============================================================
   FOOTER — BOLD & HIGH-VISIBILITY OVERRIDES (2026-06-02)
   ============================================================ */
/* Dark (navy) footer body text -> bold + high contrast */
.bpc-footer-tagline,
.bpc-footer-links__link,
.bpc-footer-address__row,
.bpc-footer-address__link,
.bpc-footer-quote-box__top,
.bpc-footer-quote-box__note,
.bpc-footer-bottom__copy,
.bpc-footer-bottom__legal-link {
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.95) !important;
}
/* Links & address a touch larger for legibility */
.bpc-footer-links__link,
.bpc-footer-address__row,
.bpc-footer-address__link,
.bpc-footer-tagline {
  font-size: 14.5px !important;
}
/* Column headings -> extra bold, larger, brighter gold */
.bpc-footer-col__heading {
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  color: var(--bpc-accent) !important;
}
/* Bottom bar (copyright / legal) -> bold + larger */
.bpc-footer-bottom__copy,
.bpc-footer-bottom__legal-link {
  font-size: 13px !important;
}
.bpc-footer-bottom__legal-sep { color: rgba(255, 255, 255, 0.5) !important; }
/* Quote box: phone extra bold, note readable */
.bpc-footer-quote-box__phone { font-weight: 800 !important; }
.bpc-footer-quote-box__note  { color: rgba(255, 255, 255, 0.9) !important; }
/* Social buttons & trust badges -> brighter */
.bpc-social-btn {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}
.bpc-trust-badge {
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
/* Payment badges full opacity */
.bpc-payment-badge { opacity: 1 !important; }
/* Newsletter bar (light background) -> bold dark text */
.bpc-newsletter-bar__heading { font-weight: 900 !important; color: var(--bpc-navy) !important; }
.bpc-newsletter-bar__sub {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: rgba(0, 41, 108, 0.9) !important;
}
.bpc-newsletter-form__privacy { font-weight: 700 !important; color: rgba(0, 41, 108, 0.78) !important; }
.bpc-newsletter-form__input   { font-weight: 600 !important; }

/* ==========================================================================
   HOMEPAGE HERO
   Full-bleed brand photograph with the page's own <h1> laid over it.
   Markup: bpc_home_hero() in functions.php.
   ========================================================================== */
.bpc-hero {
  position: relative;
  isolation: isolate;
  /* Full-bleed inside the constrained page wrapper without needing 100vw,
     which would overflow by the scrollbar width and cause a horizontal scroll. */
  width: 100%;
  min-height: clamp(420px, 52vw, 620px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--bpc-navy); /* paints before the photo decodes */
}

.bpc-hero__media,
.bpc-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.bpc-hero__img {
  width: 100%;
  height: 100%;
  /* The source is 16:9; the band is shorter than that on desktop and much
     taller in proportion on mobile, so it always crops rather than letterboxes.
     object-position keeps the tractor unit and its branding — right of centre —
     in frame as the viewport narrows. */
  object-fit: cover;
  object-position: 62% 50%;
  display: block;
}

/* Scrim: heaviest at the left, where the sky and road are calmest, so the
   headline holds contrast without flattening the lorry on the right. */
.bpc-hero__scrim {
  background:
    linear-gradient(90deg, rgba(0,27,72,0.93) 0%, rgba(0,27,72,0.86) 30%, rgba(0,27,72,0.66) 48%, rgba(0,27,72,0.22) 68%, rgba(0,27,72,0.06) 100%),
    linear-gradient(180deg, rgba(0,27,72,0.32) 0%, rgba(0,27,72,0) 40%);
}

.bpc-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--bpc-container-max);
  margin: 0 auto;
  padding: 56px 24px;
}

.bpc-hero .bpc-hero__eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--bpc-accent-light);
}

.bpc-hero .bpc-hero__title {
  margin: 0;
  max-width: 17ch;
  font-family: var(--bpc-font);
  font-size: clamp(30px, 4.4vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--bpc-white);
  text-wrap: balance;
}

.bpc-hero .bpc-hero__sub {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
}

.bpc-hero .bpc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.bpc-hero .bpc-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-decoration: none;
  transition: background-color var(--bpc-duration-sm) var(--bpc-ease),
              color var(--bpc-duration-sm) var(--bpc-ease),
              transform var(--bpc-duration-xs) var(--bpc-ease);
}
.bpc-hero .bpc-hero__btn:hover { transform: translateY(-1px); }
.bpc-hero .bpc-hero__btn:focus-visible {
  outline: 3px solid var(--bpc-accent-light);
  outline-offset: 3px;
}

.bpc-hero .bpc-hero__btn--primary {
  background: var(--bpc-accent-light);
  color: var(--bpc-navy);
}
.bpc-hero .bpc-hero__btn--primary:hover { background: var(--bpc-white); color: var(--bpc-navy); }

.bpc-hero .bpc-hero__btn--ghost {
  background: rgba(255,255,255,0.08);
  color: var(--bpc-white);
  border: 1.5px solid rgba(255,255,255,0.55);
}
.bpc-hero .bpc-hero__btn--ghost:hover {
  background: rgba(255,255,255,0.18);
  border-color: var(--bpc-white);
  color: var(--bpc-white);
}

@media (max-width: 900px) {
  .bpc-hero { min-height: 460px; }
  /* Narrow viewports crop hard from the sides — bias further right so the
     branded container and tractor unit stay in shot. */
  .bpc-hero .bpc-hero__img { object-position: 68% 50%; }
  .bpc-hero__scrim {
    background:
      linear-gradient(180deg, rgba(0,27,72,0.55) 0%, rgba(0,27,72,0.80) 55%, rgba(0,27,72,0.92) 100%);
  }
  .bpc-hero__inner { padding: 44px 20px; }
  .bpc-hero .bpc-hero__title { max-width: none; }
}

@media (max-width: 600px) {
  .bpc-hero { min-height: 420px; }
  .bpc-hero .bpc-hero__eyebrow { letter-spacing: 2.5px; font-size: 11px; }
  .bpc-hero .bpc-hero__actions { gap: 10px; }
  .bpc-hero .bpc-hero__btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bpc-hero .bpc-hero__btn:hover { transform: none; }
}

/* Breadcrumbs — emitted by bpc_breadcrumb_output() on WooCommerce pages.
   The wrapper had no rule in the source stylesheet, so the trail inherited
   body type and sat flush against the page title. */
.bpc-breadcrumbs {
  max-width: var(--bpc-container-max);
  margin: 0 auto;
  padding: 18px 24px 0;
  font-size: 13px;
  color: var(--bpc-text-muted);
}
.bpc-breadcrumbs a { color: var(--bpc-accent); text-decoration: none; }
.bpc-breadcrumbs a:hover { text-decoration: underline; }


/* ==========================================================================
   CONTENT TYPOGRAPHY
   The source site built every page in Elementor, so its widget styles supplied
   all body typography. Here the pages are plain authored HTML rendered through
   hello-elementor's .page-content, which ships almost no type styling — body
   copy came out at 16px/1.5 with #333 headings and hello-elementor's default
   #cc3366 links, which is off-brand on every page of the site.
   ========================================================================== */
.bpc-main-content .page-content {
  font-family: var(--bpc-font);
  color: #3a4150;
  font-size: 16.5px;
  line-height: 1.75;
  padding-bottom: 8px;
}

/* Comfortable measure. Headings and block elements stay full width; only the
   reading text is constrained, so ~110-character lines become ~85. */
.bpc-main-content .page-content p,
.bpc-main-content .page-content li {
  max-width: 80ch;
}

.bpc-main-content .page-content > :first-child { margin-top: 0; }

.bpc-main-content .page-content h1,
.bpc-main-content .page-content h2,
.bpc-main-content .page-content h3,
.bpc-main-content .page-content h4 {
  color: var(--bpc-navy);
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.25;
}
.bpc-main-content .page-content h2 {
  font-size: clamp(24px, 2.4vw, 31px);
  margin: 44px 0 14px;
  padding-top: 22px;
  border-top: 1px solid #e8ecf2;
}
.bpc-main-content .page-content h3 {
  font-size: clamp(18px, 1.6vw, 21px);
  margin: 30px 0 8px;
  font-weight: 700;
}
.bpc-main-content .page-content h4 {
  font-size: 17px;
  margin: 22px 0 6px;
  font-weight: 700;
}

.bpc-main-content .page-content p { margin: 0 0 18px; }

.bpc-main-content .page-content a {
  color: var(--bpc-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-weight: 600;
}
.bpc-main-content .page-content a:hover {
  color: var(--bpc-navy);
  text-decoration-thickness: 2px;
}
.bpc-main-content .page-content a:focus-visible {
  outline: 2px solid var(--bpc-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.bpc-main-content .page-content ul,
.bpc-main-content .page-content ol { margin: 0 0 18px; padding-left: 22px; }
.bpc-main-content .page-content li { margin-bottom: 8px; }
.bpc-main-content .page-content li::marker { color: var(--bpc-accent); }

.bpc-main-content .page-content strong { color: var(--bpc-navy); font-weight: 700; }

.bpc-main-content .page-content blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--bpc-accent);
  color: var(--bpc-text-muted);
  font-style: normal;
}

.bpc-main-content .page-content hr {
  border: 0;
  border-top: 1px solid #e8ecf2;
  margin: 36px 0;
}

/* Tables (condition guides, delivery lead times, spec sheets) */
.bpc-main-content .page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px;
  font-size: 15px;
}
.bpc-main-content .page-content th,
.bpc-main-content .page-content td {
  border: 1px solid #e4e7ec;
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.bpc-main-content .page-content th {
  background: var(--bpc-offwhite);
  color: var(--bpc-navy);
  font-weight: 700;
}

/* Long tables must scroll inside their own box, never widen the page. */
.bpc-main-content .page-content .wp-block-table,
.bpc-main-content .page-content .table-wrap { overflow-x: auto; }

/* Give the article room under the fixed header on pages with no hero. */
.bpc-main-content > #content.site-main { padding-top: 28px; }
.home .bpc-main-content > #content.site-main { padding-top: 40px; }

/* ==========================================================================
   WOOCOMMERCE — SINGLE PRODUCT, CART, CHECKOUT
   The source site styled only the shop archive in the child theme; everything
   else inherited WooCommerce's stock palette, which lands as a #7f54b3 purple
   "Add to cart" and a #958e09 khaki price on a navy-and-blue site.
   Scoped as `.woocommerce .bpc-main-content` — `woocommerce` is a BODY class,
   an ancestor of the main element, so the reverse order matches nothing.
   ========================================================================== */

/* ── Prices ── */
.woocommerce .bpc-main-content div.product p.price,
.woocommerce .bpc-main-content div.product span.price,
.woocommerce .bpc-main-content ul.products li.product .price {
  color: var(--bpc-accent);
  font-weight: 800;
}
.woocommerce .bpc-main-content div.product p.price { font-size: 26px; }
.woocommerce .bpc-main-content div.product p.price del,
.woocommerce .bpc-main-content div.product span.price del {
  color: var(--bpc-text-muted);
  font-weight: 500;
  opacity: 1;
}
.woocommerce .bpc-main-content div.product p.price ins { text-decoration: none; }

/* ── Buttons ──
   WooCommerce's own selectors are already specificity 0,3,1 and set colours
   directly, so these need to match or beat them; hence the doubled class. */
.woocommerce .bpc-main-content a.button,
.woocommerce .bpc-main-content button.button,
.woocommerce .bpc-main-content input.button,
.woocommerce .bpc-main-content #respond input#submit,
.woocommerce .bpc-main-content a.button.alt,
.woocommerce .bpc-main-content button.button.alt,
.woocommerce .bpc-main-content input.button.alt {
  background-color: var(--bpc-navy);
  color: var(--bpc-white);
  font-family: var(--bpc-font);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.3px;
  border: none;
  border-radius: 8px;
  padding: 13px 26px;
  transition: background-color var(--bpc-duration-sm) var(--bpc-ease);
}
.woocommerce .bpc-main-content a.button:hover,
.woocommerce .bpc-main-content button.button:hover,
.woocommerce .bpc-main-content input.button:hover,
.woocommerce .bpc-main-content #respond input#submit:hover,
.woocommerce .bpc-main-content a.button.alt:hover,
.woocommerce .bpc-main-content button.button.alt:hover,
.woocommerce .bpc-main-content input.button.alt:hover {
  background-color: var(--bpc-accent);
  color: var(--bpc-white);
}
.woocommerce .bpc-main-content .button:focus-visible {
  outline: 3px solid var(--bpc-accent);
  outline-offset: 2px;
}
/* Disabled / out-of-stock state must not read as a live button. */
.woocommerce .bpc-main-content a.button.disabled,
.woocommerce .bpc-main-content button.button:disabled,
.woocommerce .bpc-main-content button.button:disabled[disabled] {
  background-color: #c3cad6;
  color: #fff;
  opacity: 1;
}

/* ── Quantity field ── */
.woocommerce .bpc-main-content .quantity .qty {
  height: 48px;
  border: 1.5px solid var(--bpc-border);
  border-radius: 8px;
  font-family: var(--bpc-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--bpc-navy);
  padding: 0 8px;
}
.woocommerce .bpc-main-content .quantity .qty:focus {
  outline: none;
  border-color: var(--bpc-accent);
  box-shadow: 0 0 0 3px rgba(0,105,182,0.15);
}

/* ── Product title & meta ── */
.woocommerce .bpc-main-content div.product .product_title {
  color: var(--bpc-navy);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.15;
}
.woocommerce .bpc-main-content div.product .product_meta { font-size: 13px; color: var(--bpc-text-muted); }
.woocommerce .bpc-main-content div.product .product_meta a { color: var(--bpc-accent); text-decoration: none; }

/* ── Tabs ── */
.woocommerce .bpc-main-content div.product .woocommerce-tabs ul.tabs { padding-left: 0; }
.woocommerce .bpc-main-content div.product .woocommerce-tabs ul.tabs li {
  background: var(--bpc-offwhite);
  border-color: var(--bpc-border);
  border-radius: 8px 8px 0 0;
}
.woocommerce .bpc-main-content div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--bpc-white);
  border-bottom-color: var(--bpc-white);
}
.woocommerce .bpc-main-content div.product .woocommerce-tabs ul.tabs li a {
  color: var(--bpc-navy);
  font-weight: 700;
}
.woocommerce .bpc-main-content div.product .woocommerce-tabs ul.tabs li.active a { color: var(--bpc-accent); }
.woocommerce .bpc-main-content div.product .woocommerce-tabs .panel h2 { color: var(--bpc-navy); font-weight: 800; }

/* ── Section headings (related / upsells / reviews) ── */
.woocommerce .bpc-main-content .related > h2,
.woocommerce .bpc-main-content .upsells > h2,
.woocommerce .bpc-main-content #reviews h2 {
  color: var(--bpc-navy);
  font-weight: 800;
  letter-spacing: -0.4px;
}

/* ── Sale flash ── */
.woocommerce .bpc-main-content span.onsale {
  background-color: var(--bpc-accent);
  color: var(--bpc-white);
  font-weight: 800;
  border-radius: 999px;
}

/* ── Notices ── */
.bpc-main-content .woocommerce-message,
.bpc-main-content .woocommerce-info { border-top-color: var(--bpc-accent); }
.bpc-main-content .woocommerce-message::before,
.bpc-main-content .woocommerce-info::before { color: var(--bpc-accent); }
.bpc-main-content .woocommerce-error { border-top-color: #c53030; }

/* ── Cart & checkout ── */
.woocommerce .bpc-main-content table.shop_table th { color: var(--bpc-navy); font-weight: 700; }
.woocommerce-cart .bpc-main-content .cart-collaterals .cart_totals > h2,
.woocommerce-checkout .bpc-main-content h3,
.woocommerce-checkout .bpc-main-content #order_review_heading {
  color: var(--bpc-navy);
  font-weight: 800;
}
.woocommerce .bpc-main-content .cart_totals .order-total .amount,
.woocommerce .bpc-main-content .order-total .amount { color: var(--bpc-accent); }
.woocommerce .bpc-main-content form .form-row input.input-text,
.woocommerce .bpc-main-content form .form-row textarea,
.woocommerce .bpc-main-content form .form-row select,
.woocommerce-page .bpc-main-content form .form-row input.input-text {
  border: 1.5px solid var(--bpc-border);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: var(--bpc-font);
  font-size: 15px;
}
.woocommerce .bpc-main-content form .form-row input.input-text:focus,
.woocommerce .bpc-main-content form .form-row textarea:focus,
.woocommerce .bpc-main-content form .form-row select:focus {
  outline: none;
  border-color: var(--bpc-accent);
  box-shadow: 0 0 0 3px rgba(0,105,182,0.15);
}

/* ── Breadcrumb on product pages ── */
.woocommerce .bpc-main-content .woocommerce-breadcrumb { font-size: 13px; color: var(--bpc-text-muted); }
.woocommerce .bpc-main-content .woocommerce-breadcrumb a { color: var(--bpc-accent); text-decoration: none; }

/* ==========================================================================
   CHROME GUARDS
   Elementor's global kit emits `.elementor-kit-N button|a|h1..h6 { }` onto the
   <body>, so any kit edit silently outranks the theme's single-class component
   rules. These are the theme's own controls, which must never inherit editor
   styling — pinned with a parent class so they sit above kit specificity.
   ========================================================================== */
.bpc-site-header .bpc-hamburger,
.bpc-mobile-drawer .bpc-mobile-drawer__close,
.bpc-mobile-drawer .bpc-mobile-submenu-toggle {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.bpc-site-header .bpc-hamburger { border: 1px solid #e0e3e8; border-radius: 7px; }
.bpc-mobile-drawer .bpc-mobile-drawer__close,
.bpc-mobile-drawer .bpc-mobile-submenu-toggle { border: none; color: inherit; }

/* Footer + topbar links are white-on-navy by design, never the kit link colour. */
.bpc-site-footer .bpc-footer-links__link,
.bpc-site-footer .bpc-footer-bottom__legal-link,
.bpc-site-footer .bpc-footer-address__link,
.bpc-topbar .bpc-topbar__item { color: inherit; }

/* ==========================================================================
   POLISH PASS — TOP BAR CONTRAST, NEWSLETTER BAR, FOOTER BALANCE
   BPC-POLISH-2026-07-28

   Appended as one block, deliberately: this file is under concurrent edit by
   more than one workstream, and a single contiguous addition at the end can be
   reviewed, moved or reverted without touching a line anybody else owns. It
   loads last, so plain single-class selectors here beat the equivalents above
   without needing !important — except where the 2026-06-02 override block
   already used !important, which is matched in kind and noted inline.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOP BAR CONTRAST  (was ~1.1:1 on the left-hand items)

   The CHROME GUARDS block above declares
       .bpc-topbar .bpc-topbar__item { color: inherit; }
   to stop Elementor's global kit `a` colour reaching the bar. The intent was
   right but `inherit` has nothing to inherit: .bpc-topbar sets a background
   and no colour, so the cascade walked all the way up to hello-elementor's
   `body { color: #333 }`. The email link and the location line therefore
   computed to rgb(51,51,51) on rgb(0,41,108) — about 1.1:1, unreadable. The
   right-hand items only escaped because they carry a different class
   (.bpc-topbar__badge), which that guard never selected.

   Fixed at both ends: the bar now states its own colour, so `inherit` would
   resolve correctly anyway, and the items state theirs rather than inheriting.
   -------------------------------------------------------------------------- */
.bpc-topbar { color: rgba(255,255,255,0.92); }

/* 11.7:1 on #00296C. */
.bpc-topbar .bpc-topbar__item,
.bpc-topbar .bpc-topbar__badge { color: rgba(255,255,255,0.92); }

/* --bpc-accent is already redeclared to the light tint on .bpc-topbar, so this
   is #4DA6E8 — 5.2:1 on navy, not the 2.4:1 the base #0069B6 would give. */
.bpc-topbar a.bpc-topbar__item:hover,
.bpc-topbar a.bpc-topbar__item:focus-visible { color: var(--bpc-accent); }
.bpc-topbar a.bpc-topbar__item:focus-visible {
  outline: 2px solid var(--bpc-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* The dot separators were 2.1:1. They are decoration, but they are also real
   text nodes in the accessibility tree; 0.55 puts them at 5.1:1 while keeping
   them clearly subordinate to the items either side. */
.bpc-topbar .bpc-topbar__sep { color: rgba(255,255,255,0.55); }

/* Icons keep the accent tint, but the two-tone (icon accent / label white)
   pairing only reads deliberately if the icon is optically smaller. */
.bpc-topbar .bpc-topbar__item svg,
.bpc-topbar .bpc-topbar__badge svg { width: 14px; height: 14px; }

/* Breathing room: the left group ran its three items together at 6px. */
.bpc-topbar__left,
.bpc-topbar__right { gap: 8px; }


/* --------------------------------------------------------------------------
   2. NEWSLETTER BAR — fold it into the footer

   It sat on a light #4DA6E8 slab directly above the navy footer and read as a
   separate widget bolted on top of it. The same slab was also the worst
   contrast on the page after the top bar: the privacy line was 3.6:1 and the
   sub-heading 4.4:1 in navy-on-light-blue, both under AA.

   Both problems have one answer — bring it into the footer's own navy family.
   It now sits on --bpc-navy-dark with an accent hairline at the top edge and a
   soft accent wash from the left, so it reads as the footer's opening band
   rather than a different component, and every string is white-on-navy at 10:1
   or better. The white input field keeps the band from going flat.
   -------------------------------------------------------------------------- */
.bpc-site-footer .bpc-newsletter-bar {
  background-color: var(--bpc-navy-dark);
  background-image: radial-gradient(115% 190% at 10% 0%, rgba(77,166,232,0.22) 0%, rgba(77,166,232,0) 62%);
  border-top: 3px solid var(--bpc-accent);
  padding: 40px 0 42px;
}

.bpc-site-footer .bpc-newsletter-bar__inner { align-items: center; gap: 32px 48px; }
.bpc-site-footer .bpc-newsletter-bar__copy { gap: 18px; align-items: center; }

/* The 📬 was a bare 32px glyph floating in the band. Seating it in a tinted
   rounded square gives it the same "iconography in a container" language as
   .bpc-hs-trust__ico and .bpc-footer-address__icon. */
.bpc-site-footer .bpc-newsletter-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 25px;
  border-radius: var(--bpc-radius-lg);
  background: rgba(77,166,232,0.16);
  border: 1px solid rgba(77,166,232,0.30);
}

/* !important to match the 2026-06-02 override block, which pinned these for a
   light background that no longer exists. 10.4:1 and 12.5:1 on navy-dark. */
.bpc-site-footer .bpc-newsletter-bar__heading {
  color: var(--bpc-white) !important;
  font-weight: 800 !important;
  font-size: 21px !important;
  letter-spacing: -0.3px;
  margin-bottom: 5px;
}
.bpc-site-footer .bpc-newsletter-bar__sub {
  color: rgba(255,255,255,0.78) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5;
}
.bpc-site-footer .bpc-newsletter-form__privacy {
  color: rgba(255,255,255,0.72) !important;
  font-weight: 500 !important;
  font-size: 11.5px;
  margin-top: 12px;
}
.bpc-site-footer .bpc-newsletter-form__privacy svg { color: var(--bpc-accent); }

/* The submit was --bpc-navy on what is now a navy band: it would have
   disappeared. Accent-on-navy with navy text is the established pattern for a
   primary control on a dark surface (see .bpc-hero__btn--primary). 5.2:1. */
.bpc-site-footer .bpc-newsletter-form__group {
  box-shadow: 0 6px 22px rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
}
.bpc-site-footer .bpc-newsletter-form__submit {
  background-color: var(--bpc-accent);
  color: var(--bpc-navy);
  letter-spacing: 0.5px;
}
.bpc-site-footer .bpc-newsletter-form__submit:hover {
  background-color: var(--bpc-white);
  color: var(--bpc-navy);
}


/* --------------------------------------------------------------------------
   3. FOOTER GRID BALANCE

   The categories column prints every non-empty product category — 17 terms —
   in a single stack. It ran to 676px against a 289px brand column, so three of
   the five columns ended in a large field of dead navy and the footer as a
   whole was 1068px tall.

   Rather than truncate the list (every category one click from every page is
   worth keeping, and hiding links from crawlers to fix a layout problem is the
   wrong trade), the column is given the width of two and the list is flowed
   into two text columns. 17 items become 9 rows, which is the same depth as
   Company (8) and Policies (9), and it is pure CSS: footer.php still prints
   one <ul> containing every term.

   The column widths are declared inside min-width queries on purpose. This
   block loads after the max-width:1024px and max-width:640px footer rules
   above, so an unqualified grid-template-columns here would override both of
   them at every width and break the tablet and phone layouts.

   The widths are sized to the longest label in each column rather than left as
   equal fractions, which is why Company and Policies are under 1fr: their
   longest entries are shorter than a two-up category cell needs to be, and
   handing them equal width is what forced the category names to wrap.
   -------------------------------------------------------------------------- */
.bpc-footer-col--categories .bpc-footer-links {
  display: block;
  columns: 2;
  column-gap: 26px;
}
.bpc-footer-col--categories .bpc-footer-links__item {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}
/* `columns` on a block box drops the flex `gap: 2px`; the links' own vertical
   padding carries the rhythm, so nothing needs adding back. */

/* Under ~380px a two-up list of category names wraps on nearly every row, and
   two wrapped rows are taller than one unwrapped one. */
@media (max-width: 379px) {
  .bpc-footer-col--categories .bpc-footer-links { columns: 1; }
}

/* Wide: five real columns, the categories one worth two of them. */
@media (min-width: 1200px) {
  .bpc-footer-grid {
    grid-template-columns: 1.3fr 2.25fr 0.92fr 0.95fr 1.38fr;
    gap: 44px 30px;
  }
}

/* Between the hamburger breakpoint and 1200px there is not enough width for
   five columns AND a two-up category list without every name wrapping. Drop to
   four columns and let the category index run the full width beneath them,
   where it can take three or four text columns comfortably. */
@media (min-width: 641px) and (max-width: 1199px) {
  .bpc-footer-col--categories { grid-column: 1 / -1; order: 9; }
  .bpc-footer-col--categories .bpc-footer-links { columns: 3; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .bpc-footer-grid { grid-template-columns: 1.25fr 1fr 1fr 1.3fr; gap: 40px 30px; }
  .bpc-footer-col--categories .bpc-footer-links { columns: 4; }
}


/* --------------------------------------------------------------------------
   4. FOOTER RHYTHM & DETAIL
   -------------------------------------------------------------------------- */
.bpc-footer-main { padding: 56px 0 54px; }

/* The heading rule was rgba(0,105,182,0.25) — the base accent at a quarter
   alpha over navy is very nearly invisible. A neutral hairline reads. */
.bpc-footer-col__heading {
  border-bottom-color: rgba(255,255,255,0.15);
  padding-bottom: 11px;
  margin-bottom: 18px;
}

/* The 2026-06-02 override block pushed every footer link to 14.5px/700. That is
   larger than the column headings above them and it is what tipped most of the
   category names onto a second line. 13.5px still clears 12.5:1 and reads as a
   link list rather than body copy. !important to match that block. */
.bpc-footer-links__link {
  font-size: 13.5px !important;
  line-height: 1.45;
  gap: 6px;
  padding: 5px 0;
}
/* Same 12px chevron on 17 rows was heavier than the link text it introduced. */
.bpc-footer-links__link svg { width: 11px; height: 11px; color: rgba(255,255,255,0.32); }

.bpc-footer-tagline { max-width: 46ch; }

/* Brand column: the badges were the last thing in a short column and floated.
   A rule above them ties them to the tagline as one block. */
.bpc-trust-badges { padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.10); }
.bpc-trust-badge {
  transition: border-color var(--bpc-duration-sm) var(--bpc-ease),
              background-color var(--bpc-duration-sm) var(--bpc-ease);
}

.bpc-footer-quote-box {
  background: rgba(77,166,232,0.10);
  border-color: rgba(77,166,232,0.34);
}
/* This slot holds a phone number when one is set in the Customizer and the
   email address when one is not. 20px/800 broke "info@blueportcontainer.com"
   across two lines mid-word in the contact column; 17px fits it whole. */
.bpc-footer-quote-box__phone {
  font-size: 17px;
  letter-spacing: -0.2px;
  overflow-wrap: break-word;
  line-height: 1.35;
}

/* Bottom bar: the address / company-number / registered-office line is the
   legal disclosure, so it must be readable rather than decorative. The inline
   11px #9aa3ad it ships with clears 4.5:1 but is small enough to read as fine
   print; !important is the only way past an inline style attribute.
   Scoped to any inline element in the copy paragraph so it keeps applying if
   the disclosure line is extended. */
.bpc-footer-bottom { padding: 22px 0 24px; }
.bpc-footer-bottom__copy span,
.bpc-footer-bottom__copy small {
  font-size: 12px !important;
  line-height: 1.65 !important;
  color: #b7c1cd !important;   /* 9.0:1 on #001B48 */
  display: inline-block;
  margin-top: 5px;
  max-width: 80ch;
}
.bpc-footer-bottom__legal { flex-wrap: wrap; gap: 6px 8px; }


/* --------------------------------------------------------------------------
   5. NO HORIZONTAL OVERFLOW, ANY WIDTH
   Long unbroken strings in the footer (the email address, the office address)
   are the usual cause of a phone-width scrollbar.

   `break-word` rather than `anywhere`: `anywhere` lets the browser break a word
   it could otherwise have fitted, which chopped the email address in half in
   the contact column. `break-word` only breaks when there is genuinely no
   other way to avoid an overflow. */
.bpc-site-footer { overflow-x: clip; }
.bpc-footer-address__row,
.bpc-footer-address__link,
.bpc-footer-links__link { overflow-wrap: break-word; }

@media (max-width: 640px) {
  .bpc-site-footer .bpc-newsletter-bar { padding: 32px 0 34px; }
  .bpc-site-footer .bpc-newsletter-bar__icon { width: 46px; height: 46px; font-size: 22px; }
  .bpc-site-footer .bpc-newsletter-bar__heading { font-size: 18px !important; }
  .bpc-footer-bottom__copy { line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  .bpc-payment-badge:hover { transform: none; }
  .bpc-social-btn:hover { transform: none; }
}