/* ==========================================================================
   BluePort Container — HOMEPAGE SECTIONS
   Markup: wp-content/mu-plugins/bpc-home-sections.php

   Six bands that sit between the hero (functions.php section 17) and the
   authored page copy, plus the articles band that closes <main>. Everything
   here is scoped to .bpc-hs* so it cannot leak into product or policy pages.

   All colour comes from the brand custom properties declared in
   header-footer.css (:root). Nothing is hardcoded except the two neutral
   surface tints, which have no token.
   ========================================================================== */

.bpc-hs {
  --bpc-hs-surface: var(--bpc-white);
  padding: clamp(48px, 6vw, 76px) 0;
  background: var(--bpc-hs-surface);
  font-family: var(--bpc-font);
}

/* Alternating band. Matches --bpc-offwhite so it reads as the same system as
   the footer's light strips. */
.bpc-hs--tint { --bpc-hs-surface: var(--bpc-offwhite); }

.bpc-hs__in {
  max-width: var(--bpc-container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Shared section heading block ───────────────────────────────────────── */

.bpc-hs__head { max-width: 760px; margin: 0 0 clamp(28px, 3.5vw, 44px); }
.bpc-hs__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.bpc-hs .bpc-hs__eyebrow {
  display: block;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--bpc-accent);
}

.bpc-hs .bpc-hs__h {
  margin: 0;
  font-family: var(--bpc-font);
  font-size: clamp(24px, 3.1vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: var(--bpc-navy);
  text-transform: uppercase;
  text-wrap: balance;
}

.bpc-hs .bpc-hs__sub {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--bpc-text-muted);
}

/* Shared button. Deliberately the same geometry as .bpc-hero__btn so a visitor
   scrolling from the hero sees one control language, not two. */
.bpc-hs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: var(--bpc-accent);
  color: var(--bpc-white);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  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);
}
/* Inline SVGs carry no intrinsic size; without this the arrow renders at the
   replaced-element default (300x150) and shoves the label onto two lines. */
.bpc-hs__btn svg { flex: 0 0 auto; width: 15px; height: 15px; }
.bpc-hs__btn:hover { background: var(--bpc-accent-dark); color: var(--bpc-white); transform: translateY(-1px); }
.bpc-hs__btn:focus-visible { outline: 3px solid var(--bpc-accent); outline-offset: 3px; }

.bpc-hs__btn--ghost {
  background: transparent;
  border-color: var(--bpc-accent);
  color: var(--bpc-accent);
}
.bpc-hs__btn--ghost:hover { background: var(--bpc-accent); color: var(--bpc-white); }

.bpc-hs__foot { margin-top: clamp(28px, 3.5vw, 44px); text-align: center; }

/* ==========================================================================
   1. STATS BAR
   Navy band. Values are counted from the database at render time (products,
   non-empty product categories); the two qualitative figures are words, not
   invented numbers.
   ========================================================================== */

.bpc-hs-stats {
  background: var(--bpc-navy);
  /* Navy surface — swap the accent for the legible tint, per the note at the
     top of header-footer.css. */
  --bpc-accent: var(--bpc-accent-light);
  padding: clamp(30px, 3.6vw, 44px) 0;
}

.bpc-hs-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 24px;
}

.bpc-hs-stats__item {
  position: relative;
  padding: 8px 16px;
  text-align: center;
}
/* Hairline separators instead of borders, so the first item has no rule. */
.bpc-hs-stats__item + .bpc-hs-stats__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  height: 76%;
  border-left: 1px solid rgba(255,255,255,0.16);
}

.bpc-hs-stats__figure {
  display: block;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--bpc-white);
}
.bpc-hs-stats__figure .r { color: var(--bpc-accent); }

.bpc-hs-stats__label {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

@media (max-width: 780px) {
  .bpc-hs-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .bpc-hs-stats__item:nth-child(odd)::before { border-left: 0; }
  .bpc-hs-stats__label { font-size: 11px; letter-spacing: 1px; }
}
@media (max-width: 480px) {
  /* A 2-up cell is ~165px at 390px wide; the clamp's 28px floor wraps the
     two-word figures, which drops their labels out of line with the numbers. */
  .bpc-hs-stats__figure { font-size: 25px; letter-spacing: -0.5px; }
}

/* ==========================================================================
   2. SHOP BY CONTAINER TYPE
   ========================================================================== */

.bpc-hs-cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bpc-hs-cat {
  display: flex;
  background: var(--bpc-white);
  border: 1px solid var(--bpc-border);
  border-radius: var(--bpc-radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 41, 108, 0.05);
  transition: box-shadow var(--bpc-duration-sm) var(--bpc-ease),
              transform var(--bpc-duration-sm) var(--bpc-ease),
              border-color var(--bpc-duration-sm) var(--bpc-ease);
}
.bpc-hs-cat:hover {
  transform: translateY(-3px);
  border-color: var(--bpc-accent);
  box-shadow: 0 10px 26px rgba(0, 41, 108, 0.12);
}

.bpc-hs-cat__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.bpc-hs-cat__link:focus-visible { outline: 3px solid var(--bpc-accent); outline-offset: 2px; }

.bpc-hs-cat__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--bpc-offwhite);
  overflow: hidden;
}
.bpc-hs-cat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--bpc-ease);
}
.bpc-hs-cat:hover .bpc-hs-cat__media img { transform: scale(1.05); }

/* Fallback tile: a category with no usable attachment still gets a branded
   panel rather than a broken image icon. */
.bpc-hs-cat__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bpc-navy) 0%, var(--bpc-navy-light) 100%);
  color: rgba(255,255,255,0.55);
}
.bpc-hs-cat__fallback svg { width: 46px; height: 46px; }

/* Product count badge */
.bpc-hs-cat__count {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 11px;
  border-radius: var(--bpc-radius-pill);
  background: var(--bpc-navy);
  color: var(--bpc-white);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 27, 72, 0.3);
}
.bpc-hs-cat__count small { font-size: 10px; font-weight: 600; opacity: 0.8; }

.bpc-hs-cat__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 16px;
}

.bpc-hs .bpc-hs-cat__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bpc-navy);
}
.bpc-hs-cat__chev {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--bpc-accent);
  transition: transform var(--bpc-duration-sm) var(--bpc-ease);
}
.bpc-hs-cat:hover .bpc-hs-cat__chev { transform: translateX(3px); }

@media (max-width: 1080px) { .bpc-hs-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Two up is held all the way down: these are simple image-and-label tiles, and
   twelve of them stacked one per screen is an unreasonable amount of scrolling.
   Only below 360px, where a 2-up card is under ~130px wide, does it collapse. */
@media (max-width: 760px)  { .bpc-hs-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 760px)  { .bpc-hs .bpc-hs-cat__title { font-size: 14px; } .bpc-hs-cat__body { padding: 12px 13px; } }
@media (max-width: 359px)  { .bpc-hs-cats { grid-template-columns: 1fr; } }

/* ==========================================================================
   3. FEATURED CONTAINERS
   ========================================================================== */

.bpc-hs-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bpc-hs-product {
  display: flex;
  flex-direction: column;
  background: var(--bpc-white);
  border: 1px solid var(--bpc-border);
  border-radius: var(--bpc-radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 41, 108, 0.05);
  transition: box-shadow var(--bpc-duration-sm) var(--bpc-ease),
              transform var(--bpc-duration-sm) var(--bpc-ease),
              border-color var(--bpc-duration-sm) var(--bpc-ease);
}
.bpc-hs-product:hover {
  transform: translateY(-3px);
  border-color: var(--bpc-accent);
  box-shadow: 0 10px 26px rgba(0, 41, 108, 0.12);
}

.bpc-hs-product__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--bpc-offwhite);
  overflow: hidden;
}
/* cover, at the same 600x600 WooCommerce thumbnail the shop archive uses, so a
   product looks identical in this grid and in /shop/. */
.bpc-hs-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bpc-hs-product__sale {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 11px;
  border-radius: var(--bpc-radius-pill);
  background: var(--bpc-accent);
  color: var(--bpc-white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
}

.bpc-hs-product__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: 16px 16px 18px;
}

.bpc-hs-product__cat {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bpc-text-muted);
}

.bpc-hs .bpc-hs-product__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bpc-navy);
  /* Titles vary from 4 to 14 words; clamping keeps every card's price and
     button on the same baseline without truncating mid-card at wide widths. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bpc-hs .bpc-hs-product__title a { color: inherit; text-decoration: none; }
.bpc-hs .bpc-hs-product__title a:hover { color: var(--bpc-accent); }
.bpc-hs .bpc-hs-product__title a:focus-visible { outline: 3px solid var(--bpc-accent); outline-offset: 2px; }

.bpc-hs-product__price {
  margin-top: auto;
  padding-top: 6px;
  font-size: 20px;
  font-weight: 800;
  color: var(--bpc-navy);
  line-height: 1.3;
}
/* WooCommerce renders a sale as <del>old</del> <ins>new</ins>. */
.bpc-hs-product__price del {
  margin-right: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--bpc-text-muted);
  text-decoration: line-through;
  opacity: 1;
}
.bpc-hs-product__price ins { text-decoration: none; background: none; color: var(--bpc-navy); }
.bpc-hs-product__price .woocommerce-Price-currencySymbol { font-size: 0.8em; }
.bpc-hs-product__price small { display: block; font-size: 11.5px; font-weight: 600; color: var(--bpc-text-muted); letter-spacing: 0.2px; }

/* Free-delivery line. Deliberately quiet — one small line under the price on
   each card, not a shouty badge, so eight of them in a row do not fight the
   product photography. Same wording as the trust badge and the stats band. */
.bpc-hs-product__ship {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--bpc-accent);
}
.bpc-hs-product__ship svg { flex: 0 0 auto; width: 15px; height: 15px; }

/* Add to cart — the loop template's own .button classes, restyled in place so
   the AJAX behaviour and "View cart" state keep working. */
.bpc-hs-product__cart { margin-top: 12px; }
.bpc-hs .bpc-hs-product__cart .button,
.bpc-hs .bpc-hs-product__cart a.button,
.bpc-hs .bpc-hs-product__cart .added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 11px 16px;
  border: 1.5px solid var(--bpc-accent);
  border-radius: 8px;
  background: var(--bpc-accent);
  color: var(--bpc-white);
  font-family: var(--bpc-font);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--bpc-duration-sm) var(--bpc-ease);
}
.bpc-hs .bpc-hs-product__cart .button:hover,
.bpc-hs .bpc-hs-product__cart .added_to_cart:hover { background: var(--bpc-accent-dark); border-color: var(--bpc-accent-dark); color: var(--bpc-white); }
.bpc-hs .bpc-hs-product__cart .added_to_cart {
  margin-top: 8px;
  background: transparent;
  color: var(--bpc-accent);
}
.bpc-hs .bpc-hs-product__cart .button.loading { opacity: 0.7; }

@media (max-width: 1080px) { .bpc-hs-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .bpc-hs-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
/* 480px matches the shop archive's own single-column breakpoint, so a product
   card behaves identically here and on /shop/. */
@media (max-width: 480px)  { .bpc-hs-products { grid-template-columns: 1fr; } }

/* ==========================================================================
   4. BUY WITH CONFIDENCE
   ========================================================================== */

.bpc-hs-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.bpc-hs-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px;
  background: var(--bpc-white);
  border: 1px solid var(--bpc-border);
  border-radius: var(--bpc-radius-lg);
  box-shadow: 0 2px 10px rgba(0, 41, 108, 0.04);
  text-decoration: none;
  color: inherit;
}
a.bpc-hs-trust__item { transition: border-color var(--bpc-duration-sm) var(--bpc-ease), box-shadow var(--bpc-duration-sm) var(--bpc-ease); }
a.bpc-hs-trust__item:hover { border-color: var(--bpc-accent); box-shadow: 0 8px 20px rgba(0, 41, 108, 0.10); }
a.bpc-hs-trust__item:focus-visible { outline: 3px solid var(--bpc-accent); outline-offset: 2px; }

.bpc-hs-trust__ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0, 105, 182, 0.09);
  color: var(--bpc-accent);
}
.bpc-hs-trust__ico svg { width: 22px; height: 22px; }

.bpc-hs-trust__item > span:last-child { min-width: 0; }

.bpc-hs-trust__t {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bpc-navy);
}
.bpc-hs-trust__d {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bpc-text-muted);
}

@media (max-width: 900px) { .bpc-hs-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bpc-hs-trust { grid-template-columns: 1fr; gap: 12px; } }

/* ==========================================================================
   5. SEO INTRO TEXT
   Sits directly above the authored page copy, so it uses the same measure and
   link colour as .page-content rather than inventing a second body style.
   ========================================================================== */

.bpc-hs-seo { max-width: 900px; }
.bpc-hs-seo .bpc-hs__h { text-transform: uppercase; }
.bpc-hs-seo__body { margin-top: 20px; }
.bpc-hs-seo__body p {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.75;
  color: #3a4150;
}
.bpc-hs-seo__body p:last-child { margin-bottom: 0; }
.bpc-hs-seo__body a { color: var(--bpc-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.bpc-hs-seo__body a:hover { color: var(--bpc-accent-dark); }
.bpc-hs-seo__body strong { color: var(--bpc-navy); font-weight: 700; }

/* The band immediately precedes hello-elementor's .page-content, which brings
   its own top padding — collapse ours so the two do not stack. */
.bpc-hs--seo { padding-bottom: clamp(24px, 3vw, 36px); }

/* ==========================================================================
   6. LATEST ARTICLES
   ========================================================================== */

.bpc-hs-posts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.bpc-hs-post {
  display: flex;
  flex-direction: column;
  background: var(--bpc-white);
  border: 1px solid var(--bpc-border);
  border-radius: var(--bpc-radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 41, 108, 0.05);
  transition: box-shadow var(--bpc-duration-sm) var(--bpc-ease),
              transform var(--bpc-duration-sm) var(--bpc-ease),
              border-color var(--bpc-duration-sm) var(--bpc-ease);
}
.bpc-hs-post:hover {
  transform: translateY(-3px);
  border-color: var(--bpc-accent);
  box-shadow: 0 10px 26px rgba(0, 41, 108, 0.12);
}

.bpc-hs-post__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--bpc-offwhite);
  overflow: hidden;
}
.bpc-hs-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bpc-hs-post__media:focus-visible { outline: 3px solid var(--bpc-accent); outline-offset: -3px; }

.bpc-hs-post__date {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
  padding: 7px 8px 6px;
  border-radius: 8px;
  background: var(--bpc-navy);
  color: var(--bpc-white);
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 27, 72, 0.35);
}
.bpc-hs-post__date b { font-size: 19px; font-weight: 800; }
.bpc-hs-post__date small { margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: 0.85; }

.bpc-hs-post__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 20px;
}

.bpc-hs .bpc-hs-post__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bpc-navy);
}
.bpc-hs .bpc-hs-post__title a { color: inherit; text-decoration: none; }
.bpc-hs .bpc-hs-post__title a:hover { color: var(--bpc-accent); }
.bpc-hs .bpc-hs-post__title a:focus-visible { outline: 3px solid var(--bpc-accent); outline-offset: 2px; }

.bpc-hs-post__excerpt {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bpc-text-muted);
}

.bpc-hs-post__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 9px 16px;
  border: 1.5px solid var(--bpc-accent);
  border-radius: 8px;
  color: var(--bpc-accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: background-color var(--bpc-duration-sm) var(--bpc-ease), color var(--bpc-duration-sm) var(--bpc-ease);
}
.bpc-hs-post__more:hover { background: var(--bpc-accent); color: var(--bpc-white); }
.bpc-hs-post__more:focus-visible { outline: 3px solid var(--bpc-accent); outline-offset: 2px; }
.bpc-hs-post__more svg { flex: 0 0 auto; width: 14px; height: 14px; }
.bpc-hs-cat__chev svg { width: 100%; height: 100%; display: block; }

@media (max-width: 1080px) { .bpc-hs-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .bpc-hs-posts { grid-template-columns: 1fr; gap: 16px; } }

/* ── Motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bpc-hs-cat,
  .bpc-hs-product,
  .bpc-hs-post,
  .bpc-hs__btn,
  .bpc-hs-cat__media img,
  .bpc-hs-cat__chev { transition: none; }
  .bpc-hs-cat:hover,
  .bpc-hs-product:hover,
  .bpc-hs-post:hover,
  .bpc-hs__btn:hover { transform: none; }
  .bpc-hs-cat:hover .bpc-hs-cat__media img,
  .bpc-hs-cat:hover .bpc-hs-cat__chev { transform: none; }
}

/* ==========================================================================
   7. AUTHORED PAGE COPY  (.bpc-pc)
   BPC-POLISH-2026-07-28

   Everything below the SEO band is the front page's own post content. It was
   rendering through hello-elementor's .page-content — headings, paragraphs and
   bare <ul>s in a 1140px column — directly beneath five card-based bands laid
   out on a 1340px grid. Two different measures, two different type scales and
   no cards: it read as a second website stapled to the bottom of the first.

   The fix is structural rather than cosmetic. The post content now carries the
   same section skeleton as the bands above it (band > inner > eyebrow /
   heading / strapline > content), so the whole page runs on one rhythm, one
   measure and one set of surfaces. Nothing here is a new visual language: the
   tokens, radii, card treatment, hover behaviour and button geometry are all
   lifted from .bpc-hs above.

   This file is only enqueued on the front page, so none of it can reach a
   product, category or policy page — .page-content keeps its own typography
   everywhere else on the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.1 ESCAPE THE 1140px COLUMN

   hello-elementor constrains #content.site-main to 1140px with auto margins.
   The bands are full-bleed with a 1340px inner, so the page had a 100px step
   in its left edge halfway down. Releasing the article lets each authored
   section be a real full-width band with the same inner as .bpc-hs__in.

   Gated on :has(.bpc-pc) so this only applies once the restructured copy is
   actually in the post — if the content is ever reverted to plain HTML the
   column comes straight back rather than running edge to edge.
   -------------------------------------------------------------------------- */
.home .bpc-main-content > #content.site-main:has(.bpc-pc) {
  max-width: none;
  padding-top: 0;
}
.home .bpc-main-content .page-content:has(.bpc-pc) { padding-bottom: 0; }

/* The SEO band had its bottom padding cut back to avoid stacking with the
   article's old top padding. The article now brings its own band padding, so
   the full rhythm is restored and the two bands meet cleanly. */
.bpc-hs--seo { padding-bottom: clamp(48px, 6vw, 76px); }

/* --------------------------------------------------------------------------
   7.2 RESETS

   .page-content ships a full set of type rules (hairline rule above every h2,
   80ch measure on every p and li, list indents). Those are right for a policy
   page and wrong inside a card. Neutralised at 0,3,1 so the base rules are
   still in force for anything outside .bpc-pc.
   -------------------------------------------------------------------------- */
.bpc-main-content .page-content .bpc-pc h2,
.bpc-main-content .page-content .bpc-pc h3,
.bpc-main-content .page-content .bpc-pc h4 {
  margin: 0;
  padding: 0;
  border: 0;
}
.bpc-main-content .page-content .bpc-pc p { margin: 0; max-width: none; }
.bpc-main-content .page-content .bpc-pc ul,
.bpc-main-content .page-content .bpc-pc ol { margin: 0; padding: 0; list-style: none; }
.bpc-main-content .page-content .bpc-pc li { margin: 0; max-width: none; }
.bpc-main-content .page-content .bpc-pc li::marker { content: none; }

/* --------------------------------------------------------------------------
   7.3 BAND + INNER + HEADING BLOCK
   Deliberately the same numbers as .bpc-hs / .bpc-hs__in / .bpc-hs__head.
   -------------------------------------------------------------------------- */
.bpc-pc__sec {
  padding: clamp(48px, 6vw, 76px) 0;
  background: var(--bpc-white);
  font-family: var(--bpc-font);
}
.bpc-pc__sec--tint { background: var(--bpc-offwhite); }

.bpc-pc__in {
  max-width: var(--bpc-container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.bpc-pc__head {
  max-width: 760px;
  margin: 0 auto clamp(28px, 3.5vw, 44px);
  text-align: center;
}

.bpc-main-content .page-content .bpc-pc__eyebrow {
  display: block;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--bpc-accent);
}

.bpc-main-content .page-content .bpc-pc__head h2 {
  font-size: clamp(24px, 3.1vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: var(--bpc-navy);
  text-transform: uppercase;
  text-wrap: balance;
}

.bpc-main-content .page-content .bpc-pc__sub {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--bpc-text-muted);
}

/* Group heading inside a section: quieter than the h2, and set between two
   hairlines so it reads as a divider rather than competing with it. */
.bpc-main-content .page-content .bpc-pc__h3 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 24px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.2px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--bpc-text-muted);
}
.bpc-pc__h3::before,
.bpc-pc__h3::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--bpc-border);
}
/* A second group inside the same band needs air above it, or its rule runs
   into the bottom edge of the grid it is separating from. */
.bpc-main-content .page-content .bpc-pc__cards + .bpc-pc__h3,
.bpc-main-content .page-content .bpc-pc__defs + .bpc-pc__h3 {
  margin-top: clamp(42px, 4.6vw, 62px);
}

/* --------------------------------------------------------------------------
   7.4 CARD GRIDS
   Same border, radius, shadow and lift as .bpc-hs-cat / .bpc-hs-product, so a
   card behaves identically wherever it appears on the page.
   -------------------------------------------------------------------------- */
.bpc-pc__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
/* Two-up for the longer explanatory cards: at four across a 90-word card is a
   column of two-word lines. */
.bpc-pc__cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Three items: 4-up and 2-up both leave an orphan, so this grid goes straight
   from three columns to one. */
.bpc-pc__cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.bpc-pc__card {
  padding: 24px 22px 22px;
  background: var(--bpc-white);
  border: 1px solid var(--bpc-border);
  border-radius: var(--bpc-radius-lg);
  box-shadow: 0 2px 10px rgba(0, 41, 108, 0.05);
  transition: box-shadow var(--bpc-duration-sm) var(--bpc-ease),
              transform var(--bpc-duration-sm) var(--bpc-ease),
              border-color var(--bpc-duration-sm) var(--bpc-ease);
}
/* An accent rule above the card heading that grows on hover — the card is not
   a link, so it gets a response to the pointer without pretending to be one.
   In normal flow rather than absolutely positioned on the top edge: the card's
   12px corner radius left an absolute bar visibly detached from the border it
   was supposed to be sitting on. */
.bpc-pc__card::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin: 0 0 16px;
  border-radius: 2px;
  background: var(--bpc-accent);
  transition: width var(--bpc-duration-sm) var(--bpc-ease);
}
.bpc-pc__card:hover {
  transform: translateY(-3px);
  border-color: var(--bpc-accent);
  box-shadow: 0 10px 26px rgba(0, 41, 108, 0.12);
}
.bpc-pc__card:hover::before { width: 62px; }

.bpc-main-content .page-content .bpc-pc__card h4 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--bpc-navy);
}
.bpc-main-content .page-content .bpc-pc__card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--bpc-text-muted);
}

/* --------------------------------------------------------------------------
   7.5 CATEGORY REFERENCE LIST

   This is the copy that used to be a second "Browse by container type" link
   list under the Shop by Container Type card grid. Set as a definition list —
   term, then what the term means — it stops competing with the grid for the
   same job and earns its place as the reference the grid cannot carry.
   -------------------------------------------------------------------------- */
.bpc-pc__defs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
}
.bpc-main-content .page-content .bpc-pc__defs li {
  padding: 14px 0;
  border-top: 1px solid var(--bpc-border);
}
.bpc-main-content .page-content .bpc-pc__defs a {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bpc-navy);
  text-decoration: none;
}
.bpc-main-content .page-content .bpc-pc__defs a:hover {
  color: var(--bpc-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bpc-main-content .page-content .bpc-pc__defs a:focus-visible {
  outline: 3px solid var(--bpc-accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.bpc-pc__defs span {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bpc-text-muted);
}

.bpc-main-content .page-content .bpc-pc__note {
  margin: 34px auto 0;
  max-width: 62ch;
  padding-top: 22px;
  border-top: 1px solid var(--bpc-border);
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: var(--bpc-text-muted);
}

/* --------------------------------------------------------------------------
   7.6 ORDERING STEPS
   -------------------------------------------------------------------------- */
.bpc-pc__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  counter-reset: bpc-pc-step;
}
.bpc-main-content .page-content .bpc-pc__steps > li {
  counter-increment: bpc-pc-step;
  position: relative;
  padding: 66px 22px 24px;
  background: var(--bpc-white);
  border: 1px solid var(--bpc-border);
  border-radius: var(--bpc-radius-lg);
  box-shadow: 0 2px 10px rgba(0, 41, 108, 0.05);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--bpc-text-muted);
}
.bpc-pc__steps > li::before {
  content: counter(bpc-pc-step);
  position: absolute;
  top: 22px;
  left: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bpc-navy);
  color: var(--bpc-white);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
/* A connecting rule between the numbers, so four cards read as a sequence
   rather than four unrelated boxes. Suppressed on the last card and whenever
   the grid is not four across. */
.bpc-pc__steps > li::after {
  content: "";
  position: absolute;
  top: 38px;
  left: calc(22px + 34px + 10px);
  right: 14px;
  height: 2px;
  border-top: 2px dotted var(--bpc-border);
}
.bpc-pc__steps > li:last-child::after { content: none; }
.bpc-main-content .page-content .bpc-pc__steps strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--bpc-navy);
}

/* --------------------------------------------------------------------------
   7.7 CLOSING CALL TO ACTION
   Navy panel. --bpc-accent is redeclared to the light tint here for the same
   reason it is on .bpc-hs-stats and every other navy surface: #0069B6 on
   #00296C is 2.4:1.
   -------------------------------------------------------------------------- */
.bpc-pc__cta {
  --bpc-accent: var(--bpc-accent-light);
  display: grid;
  /* A fixed-ish action column rather than a fraction: at 1fr the two buttons
     stretched to ~490px each and read as banners rather than controls. */
  grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
  align-items: center;
  gap: 32px 44px;
  padding: clamp(28px, 3.4vw, 44px);
  border-radius: var(--bpc-radius-lg);
  background:
    radial-gradient(105% 150% at 88% 10%, rgba(77,166,232,0.26) 0%, rgba(77,166,232,0) 58%),
    var(--bpc-navy);
}
.bpc-pc__cta .bpc-pc__eyebrow { color: var(--bpc-accent-light); }
.bpc-main-content .page-content .bpc-pc__cta h2 {
  margin: 0 0 14px;
  font-size: clamp(23px, 2.7vw, 33px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--bpc-white);
}
.bpc-main-content .page-content .bpc-pc__cta p {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.86);   /* 10.4:1 on #00296C */
}
.bpc-main-content .page-content .bpc-pc__cta a:not(.bpc-pc__btn) {
  color: var(--bpc-accent-light);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: break-word;
}
.bpc-main-content .page-content .bpc-pc__cta a:not(.bpc-pc__btn):hover { color: var(--bpc-white); }

.bpc-pc__cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Same geometry as .bpc-hs__btn and .bpc-hero__btn: one control language for
   the whole page. On navy the fill is the light tint with navy text, which is
   the treatment .bpc-hero__btn--primary already uses. */
.bpc-main-content .page-content .bpc-pc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: var(--bpc-accent-light);
  color: var(--bpc-navy);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-align: center;
  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-main-content .page-content .bpc-pc__btn:hover {
  background: var(--bpc-white);
  color: var(--bpc-navy);
  transform: translateY(-1px);
}
.bpc-main-content .page-content .bpc-pc__btn--ghost {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.55);
  color: var(--bpc-white);
}
.bpc-main-content .page-content .bpc-pc__btn--ghost:hover {
  background: rgba(255,255,255,0.18);
  border-color: var(--bpc-white);
  color: var(--bpc-white);
}
.bpc-main-content .page-content .bpc-pc__btn:focus-visible {
  outline: 3px solid var(--bpc-accent-light);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   7.8 IN-COPY LINKS
   -------------------------------------------------------------------------- */
.bpc-main-content .page-content .bpc-pc__card a,
.bpc-main-content .page-content .bpc-pc__steps a,
.bpc-main-content .page-content .bpc-pc__note a {
  color: var(--bpc-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.bpc-main-content .page-content .bpc-pc__card a:hover,
.bpc-main-content .page-content .bpc-pc__steps a:hover,
.bpc-main-content .page-content .bpc-pc__note a:hover {
  color: var(--bpc-navy);
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   7.9 RESPONSIVE
   Breakpoints match the band grids above so the whole page reflows together.
   Every grid steps to a count that divides its item total, so no row is ever
   left with a single orphan card.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .bpc-pc__defs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .bpc-pc__cards,
  .bpc-pc__cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bpc-pc__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The connector only makes sense along an unbroken row of four. */
  .bpc-pc__steps > li::after { content: none; }
}

@media (max-width: 900px) {
  .bpc-pc__cards--3 { grid-template-columns: 1fr; }
  .bpc-pc__cards--2 { grid-template-columns: 1fr; }
  .bpc-pc__cta {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 26px;
  }
  .bpc-pc__cta-actions { flex-direction: row; flex-wrap: wrap; }
  .bpc-main-content .page-content .bpc-pc__btn { flex: 1 1 220px; }
}

@media (max-width: 680px) {
  .bpc-pc__in { padding: 0 18px; }
  .bpc-pc__defs { grid-template-columns: 1fr; }
  .bpc-pc__cards,
  .bpc-pc__cards--3 { grid-template-columns: 1fr; gap: 14px; }
  .bpc-pc__steps { grid-template-columns: 1fr; gap: 14px; }
  .bpc-main-content .page-content .bpc-pc__h3 { gap: 12px; letter-spacing: 1.6px; }
  .bpc-main-content .page-content .bpc-pc__steps > li { padding: 60px 18px 20px; }
  .bpc-pc__card { padding: 22px 18px 20px; }
  .bpc-pc__card::before { left: 18px; }
  .bpc-main-content .page-content .bpc-pc__btn { flex: 1 1 100%; }
}

/* Long URLs and the office address must never widen the page. */
.bpc-pc { overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  .bpc-pc__card,
  .bpc-pc__card::before,
  .bpc-main-content .page-content .bpc-pc__btn { transition: none; }
  .bpc-pc__card:hover,
  .bpc-main-content .page-content .bpc-pc__btn:hover { transform: none; }
}