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

.bgp-template {
  --bgp-navy: #0e2a4d;
  --bgp-navy-deep: #081f3a;
  --bgp-blue: #1d5d9b;
  --bgp-amber: #fa9f03;
  --bgp-amber-deep: #e08a00;
  --bgp-cream: #fdf4e1;
  --bgp-cream-2: #f8ecd6;
  --bgp-card-cream: #fff7e9;
  --bgp-ink: #101828;
  --bgp-muted: #64748b;
  --bgp-line: #e3d6bf;
  --bgp-green: #16964f;
  --bgp-white: #fff;
  --bgp-shadow: 0 18px 42px -28px rgba(8, 31, 58, .5);
  --bgp-shadow-strong: 0 22px 56px -28px rgba(8, 31, 58, .65);
  background:
    radial-gradient(circle at 12% 2%, rgba(250, 159, 3, .12), transparent 26rem),
    linear-gradient(180deg, #fffaf0 0%, #f5f7fb 42%, #fffaf0 100%);
  color: var(--bgp-ink);
  overflow: hidden;
}

.bgp-template a {
  color: inherit;
  text-decoration: none;
}

body.bgp-body-design-active #main-content {
  display: none !important;
}

body.bgp-body-design-active .main-page-wrapper,
body.bgp-body-design-active .wd-page-content {
  padding-top: 0;
}

body.bgp-body-design-active .wd-page-title,
body.bgp-body-design-active .page-title {
  display: none !important;
}

.bgp-template img {
  display: block;
  max-width: 100%;
  height: auto;
}

.bgp-wrap {
  width: min(1320px, calc(100% - 48px));
  margin-inline: auto;
}

.bgp-section {
  padding: clamp(34px, 5vw, 68px) 0;
}

.bgp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bgp-amber);
  color: var(--bgp-navy-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.bgp-template h1,
.bgp-template h2,
.bgp-template h3 {
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--bgp-ink);
}

.bgp-template h1 {
  max-width: 850px;
  font-size: clamp(38px, 5vw, 76px);
  line-height: .97;
  font-weight: 850;
}

/* M7-ANTON-400: the category / anchor / use-case heroes sit outside the
   .bgp-editorial scope, so the fw:850 default above synthesized a fake-bold
   Fredoka fallback. Anton ships in weight 400 only — force display family +
   400 explicitly on those hero H1s. */
.bgp-template .bgp-category-hero h1,
.bgp-template .bgp-usecase-hero h1,
.bgp-template .bgp-anchor-hero h1 {
  font-family: var(--font-display, 'Anton', sans-serif);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.bgp-template h2 {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.05;
  font-weight: 820;
}

.bgp-template h3 {
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
}

.bgp-lead {
  margin: 16px 0 0;
  max-width: 720px;
  color: #3b4a5c;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
}

.bgp-muted {
  color: var(--bgp-muted);
}

.bgp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 20px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

.bgp-btn:hover {
  transform: translateY(-1px);
}

.bgp-btn--amber {
  background: var(--bgp-amber);
  color: var(--bgp-navy-deep);
  box-shadow: 0 16px 26px -18px rgba(224, 138, 0, .85);
}

.bgp-btn--amber:hover {
  background: var(--bgp-amber-deep);
}

.bgp-btn--navy {
  background: var(--bgp-navy);
  color: #fff;
  box-shadow: 0 16px 26px -20px rgba(8, 31, 58, .75);
}

.bgp-btn--ghost {
  border: 1.5px solid rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.bgp-breadcrumb {
  background: rgba(253, 244, 225, .88);
  border-bottom: 1px solid rgba(227, 214, 191, .72);
}

.bgp-breadcrumb .bgp-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 13px;
  color: #64748B;
  font-size: 14px;
}

.bgp-breadcrumb strong {
  color: var(--bgp-ink);
  font-weight: 800;
}

.bgp-trustline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.bgp-trustline span {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
  font-weight: 750;
  backdrop-filter: blur(10px);
}

.bgp-icon-dot {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--bgp-amber);
  /* Render a tick, not the numeral in the markup. The 1/2/3/UK badges
     read as clickable/sequential controls; a check mark reads as a
     passive trust signal. font-size:0 hides any digit text node. */
  font-size: 0 !important;
  color: transparent;
}

.bgp-icon-dot::before {
  content: "";
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308203C' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.bgp-hero-card {
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 28px;
  background: rgba(255, 255, 255, .93);
  box-shadow: var(--bgp-shadow-strong);
  overflow: hidden;
}

.bgp-shop-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 28px;
  align-items: center;
}

/* Shop hero — single-column, category-led (was a 2-col copy + postcode
   card that mirrored the homepage). Leads with category pills so the
   shop banner is product-focused and visually distinct from home. */
.bgp-shop-hero-copy {
  max-width: 760px;
}

.bgp-shop-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.bgp-shop-hero-pills .bgp-pill {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .30);
  color: #fff;
  font-weight: 700;
}

.bgp-shop-hero-pills .bgp-pill:hover,
.bgp-shop-hero-pills .bgp-pill:focus-visible {
  background: var(--bgp-amber);
  border-color: var(--bgp-amber);
  color: var(--bgp-navy-deep);
}

/* Demoted delivery-coverage band (the postcode check, moved out of the
   hero to a slim secondary band lower on the page). */
.bgp-postcode-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 24px;
  align-items: center;
  padding: clamp(22px, 3vw, 32px);
  background: #fff;
  border: 1px solid rgba(8, 32, 60, 0.10);
  border-radius: 16px;
  box-shadow: 0 18px 40px -30px rgba(8, 32, 60, 0.30);
}

.bgp-postcode-band__copy h2 {
  margin: 8px 0 6px;
}

.bgp-postcode-band__copy p {
  margin: 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.5;
}

.bgp-postcode-band__form {
  display: grid;
  gap: 8px;
}

@media (max-width: 767px) {
  .bgp-postcode-band__inner {
    grid-template-columns: 1fr;
  }
}

.bgp-img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bgp-image-card {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  border-radius: 18px;
  background: var(--bgp-navy);
  color: #fff;
}

.bgp-image-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 31, 58, .04), rgba(8, 31, 58, .76));
}

.bgp-image-card__body {
  position: absolute;
  z-index: 1;
  inset: auto 16px 16px;
}

.bgp-image-card__body strong {
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.08;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

.bgp-image-card__body span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.bgp-postcode-card {
  padding: 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--bgp-shadow);
}

.bgp-postcode-card h2 {
  font-size: clamp(24px, 3vw, 34px);
}

.bgp-postcode-card p {
  margin: 8px 0 16px;
  color: var(--bgp-muted);
  font-size: 14px;
  line-height: 1.45;
}

.bgp-postcode-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.bgp-postcode-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.bgp-postcode-form input,
.bgp-template .bgp-field input,
.bgp-template .bgp-field select {
  width: 100%;
  min-height: 46px;
  border: 1.5px solid var(--bgp-line);
  border-radius: 12px;
  background: #fff;
  color: var(--bgp-ink);
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
}

.bgp-postcode-form input:focus,
.bgp-template .bgp-field input:focus,
.bgp-template .bgp-field select:focus {
  outline: 3px solid rgba(250, 159, 3, .24);
  border-color: var(--bgp-amber);
}

.bgp-small-note {
  margin-top: 10px;
  color: var(--bgp-muted);
  font-size: 12px;
}

.bgp-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 22px;
}

.bgp-header-row p {
  margin: 9px 0 0;
  max-width: 680px;
  color: var(--bgp-muted);
  line-height: 1.55;
}

.bgp-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bgp-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(14, 42, 77, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: var(--bgp-navy);
  font-size: 13px;
  font-weight: 800;
}

.bgp-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.bgp-route-card,
.bgp-category-card,
.bgp-support-card,
.bgp-product-card,
.bgp-faq-card,
.bgp-step-card {
  border: 1px solid rgba(227, 214, 191, .88);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
}

.bgp-route-card,
.bgp-category-card,
.bgp-support-card,
.bgp-step-card {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.bgp-route-card:hover,
.bgp-category-card:hover,
.bgp-support-card:hover,
.bgp-step-card:hover {
  transform: translateY(-3px);
  border-color: rgba(250, 159, 3, .8);
  box-shadow: var(--bgp-shadow);
}

.bgp-route-card {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 116px;
  padding: 14px;
}

.bgp-route-card img {
  width: 82px;
  height: 82px;
  object-fit: cover;
  border-radius: 14px;
}

.bgp-route-card .bgp-eyebrow,
.bgp-category-card .bgp-eyebrow,
.bgp-product-card .bgp-eyebrow {
  display: block;
  color: var(--bgp-amber-deep);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.bgp-route-card strong,
.bgp-category-card strong {
  display: block;
  margin-top: 3px;
  color: var(--bgp-ink);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.08;
}

.bgp-route-card span:last-child,
.bgp-category-card p {
  display: block;
  margin-top: 6px;
  color: var(--bgp-muted);
  font-size: 13px;
  line-height: 1.38;
}

.bgp-category-card {
  min-height: 100%;
  overflow: hidden;
}

.bgp-category-card__image {
  height: 148px;
  overflow: hidden;
  background: var(--bgp-cream-2);
}

.bgp-category-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}

.bgp-category-card:hover .bgp-category-card__image img {
  transform: scale(1.04);
}

.bgp-category-card__body {
  padding: 16px;
}

.bgp-category-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  color: var(--bgp-navy);
  font-size: 13px;
  font-weight: 850;
}

.bgp-band {
  border-block: 1px solid rgba(227, 214, 191, .78);
  background: rgba(253, 244, 225, .72);
}

.bgp-band-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding-block: 18px;
}

.bgp-mini-route {
  min-height: 112px;
  display: grid;
  grid-template-columns: 1fr 74px;
  gap: 10px;
  align-items: end;
  padding: 13px;
  border: 1px solid rgba(227, 214, 191, .9);
  border-radius: 16px;
  background: rgba(255, 255, 255, .86);
}

.bgp-mini-route strong {
  display: block;
  color: var(--bgp-ink);
  font-size: 14px;
  line-height: 1.08;
}

.bgp-mini-route span {
  display: block;
  margin-bottom: 5px;
  color: var(--bgp-amber-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.bgp-mini-route img {
  align-self: end;
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 14px;
}

.bgp-moment-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 16px;
}

.bgp-moment-grid .bgp-image-card:first-child {
  grid-row: span 2;
  min-height: 420px;
}

.bgp-moment-grid .bgp-image-card:last-child {
  background: linear-gradient(135deg, #fa9f03, #ffbd42);
  color: var(--bgp-navy-deep);
}

.bgp-moment-grid .bgp-image-card:last-child::after {
  background: radial-gradient(circle at 110% -10%, rgba(255, 255, 255, .5), transparent 34%), transparent;
}

.bgp-moment-grid .bgp-image-card:last-child .bgp-image-card__body strong,
.bgp-moment-grid .bgp-image-card:last-child .bgp-image-card__body span {
  color: var(--bgp-navy-deep);
  text-shadow: none;
}

.bgp-seo-block {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(130deg, rgba(8, 31, 58, .94), rgba(14, 42, 77, .88)),
    var(--bgp-navy-deep);
  color: #fff;
  padding: clamp(24px, 4vw, 46px);
}

.bgp-seo-block h2 {
  color: #fff;
  max-width: 760px;
}

.bgp-seo-block p {
  max-width: 980px;
  color: rgba(255, 255, 255, .82);
  line-height: 1.72;
}

.bgp-seo-block a {
  color: #fff;
  border-bottom: 2px solid var(--bgp-amber);
  font-weight: 800;
}

.bgp-category-hero {
  padding: clamp(34px, 5vw, 58px) 0;
}

.bgp-category-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 26px;
  align-items: stretch;
}

.bgp-category-hero__copy {
  min-height: 410px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  border-radius: 26px;
  background:
    linear-gradient(120deg, rgba(8, 31, 58, .94), rgba(14, 42, 77, .76)),
    var(--bgp-navy);
  color: #fff;
}

.bgp-category-hero__copy h1,
.bgp-category-hero__copy .bgp-lead {
  color: #fff;
}

.bgp-category-hero__copy .bgp-lead {
  color: rgba(255, 255, 255, .84);
}

.bgp-category-hero__media {
  position: relative;
  overflow: hidden;
  min-height: 410px;
  border: 1px solid rgba(227, 214, 191, .9);
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--bgp-shadow);
}

.bgp-category-hero__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 48%;
  background: linear-gradient(180deg, transparent, rgba(8, 31, 58, .58));
}

.bgp-category-hero__media img {
  width: 100%;
  height: 100%;
  min-height: 410px;
  object-fit: cover;
}

.bgp-media-caption {
  position: absolute;
  z-index: 1;
  inset: auto 18px 18px;
  color: #fff;
  font-weight: 850;
}

.bgp-category-layout {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.bgp-filter-panel {
  position: sticky;
  top: 18px;
  padding: 18px;
  border: 1px solid rgba(227, 214, 191, .9);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--bgp-shadow);
}

.bgp-filter-panel h2,
.bgp-filter-panel h3 {
  font-size: 17px;
}

.bgp-filter-group {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(227, 214, 191, .82);
}

.bgp-checkbox-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.bgp-checkbox-list label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
}

.bgp-checkbox-list input {
  width: 16px;
  height: 16px;
  accent-color: var(--bgp-amber);
}

.bgp-product-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.bgp-product-toolbar p {
  margin: 0;
  color: var(--bgp-muted);
  font-size: 14px;
}

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

.bgp-usecase-page .bgp-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bgp-product-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.bgp-product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(250, 159, 3, .7);
  box-shadow: var(--bgp-shadow);
}

.bgp-product-card__image {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #fff, #fff7e9);
}

.bgp-product-card__image img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.bgp-product-card__badge {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--bgp-navy);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
}

.bgp-product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.bgp-product-card__title {
  min-height: 50px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.22;
}

.bgp-product-card__meta {
  min-height: 40px;
  margin-top: 9px;
  color: var(--bgp-muted);
  font-size: 13px;
  line-height: 1.35;
}

.bgp-stock {
  margin-top: 9px;
  color: var(--bgp-green);
  font-size: 13px;
  font-weight: 850;
}

.bgp-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}

.bgp-price {
  color: var(--bgp-ink);
  font-size: 19px;
  font-weight: 900;
}

.bgp-price small {
  display: block;
  color: var(--bgp-muted);
  font-size: 11px;
  font-weight: 650;
}

/* M10: "Call for Price" cards — keep the phone link on the muted caption
   palette instead of the theme link colour. */
.bgp-price--call small a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bgp-product-card .bgp-btn {
  min-height: 40px;
  padding-inline: 15px;
  font-size: 13px;
}

.bgp-bundle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 20px;
  margin-top: 28px;
  padding: 24px;
  border: 1px solid rgba(227, 214, 191, .9);
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--bgp-shadow);
}

.bgp-bundle p {
  margin: 8px 0 0;
  color: var(--bgp-muted);
}

.bgp-bundle-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.bgp-bundle-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(227, 214, 191, .9);
  border-radius: 14px;
  background: var(--bgp-card-cream);
  font-size: 13px;
  font-weight: 800;
}

.bgp-bundle-buy {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  background: var(--bgp-navy);
  color: #fff;
  text-align: center;
}

.bgp-bundle-buy strong {
  display: block;
  font-size: 28px;
}

.bgp-usecase-hero {
  position: relative;
  padding: clamp(34px, 5vw, 64px) 0;
  color: #fff;
  background: var(--bgp-navy-deep);
}

.bgp-usecase-hero__bg {
  position: absolute;
  inset: 0;
  opacity: .58;
}

.bgp-usecase-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 76% 18%, rgba(250, 159, 3, .34), transparent 20rem),
    linear-gradient(90deg, rgba(8, 31, 58, .96), rgba(8, 31, 58, .62) 55%, rgba(8, 31, 58, .94));
}

.bgp-usecase-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bgp-usecase-hero .bgp-wrap {
  position: relative;
  z-index: 1;
}

.bgp-usecase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 28px;
  align-items: center;
}

.bgp-usecase-copy h1,
.bgp-usecase-copy .bgp-lead {
  color: #fff;
}

.bgp-usecase-copy .bgp-lead {
  color: rgba(255, 255, 255, .84);
}

.bgp-calculator {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 24px;
  background: rgba(255, 255, 255, .96);
  color: var(--bgp-ink);
  box-shadow: var(--bgp-shadow-strong);
}

.bgp-anchor-page {
  background:
    radial-gradient(circle at 10% 0%, rgba(250, 159, 3, .1), transparent 28rem),
    linear-gradient(180deg, #fffaf0 0%, #f6f7f9 46%, #fffaf0 100%);
}

.bgp-anchor-hero .bgp-usecase-hero__bg {
  opacity: .66;
}

.bgp-anchor-tool {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 24px;
  background: rgba(255, 255, 255, .97);
  color: var(--bgp-ink);
  box-shadow: var(--bgp-shadow-strong);
}

.bgp-anchor-tool h2 {
  font-size: clamp(24px, 2.5vw, 32px);
}

.bgp-anchor-tool > p {
  margin: 8px 0 16px;
  color: var(--bgp-muted);
  line-height: 1.5;
}

.bgp-anchor-options {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.bgp-anchor-option {
  display: block;
  padding: 13px 14px;
  border: 1px solid rgba(227, 214, 191, .88);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(253, 244, 225, .74));
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.bgp-anchor-option:hover {
  transform: translateY(-2px);
  border-color: rgba(250, 159, 3, .8);
  box-shadow: 0 14px 30px -26px rgba(8, 31, 58, .65);
}

.bgp-anchor-option span,
.bgp-anchor-option small {
  display: block;
}

.bgp-anchor-option span {
  color: var(--bgp-navy);
  font-weight: 900;
  line-height: 1.15;
}

.bgp-anchor-option small {
  margin-top: 4px;
  color: var(--bgp-muted);
  font-size: 12px;
  line-height: 1.35;
}

.bgp-native-products .woocommerce {
  margin-top: 4px;
}

.bgp-native-products .products {
  margin-bottom: 0;
}

.bgp-faq-card summary {
  cursor: pointer;
  list-style: none;
}

.bgp-faq-card summary::-webkit-details-marker {
  display: none;
}

.bgp-faq-card summary h3 {
  display: inline;
}

.bgp-faq-card[open] {
  border-color: rgba(250, 159, 3, .65);
  box-shadow: var(--bgp-shadow);
}

.bgp-calculator h2 {
  font-size: 28px;
}

.bgp-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.bgp-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--bgp-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.bgp-calc-result {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--bgp-navy);
  color: #fff;
}

.bgp-calc-result strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
  line-height: 1.05;
}

.bgp-usecase-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.bgp-support-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bgp-support-card img {
  width: 100%;
  height: 168px;
  object-fit: cover;
}

.bgp-support-card__body {
  flex: 1;
  padding: 18px;
}

.bgp-support-card p {
  margin: 8px 0 0;
  color: var(--bgp-muted);
  font-size: 14px;
  line-height: 1.5;
}

.bgp-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.bgp-step-card {
  padding: 20px;
}

.bgp-step-card .bgp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--bgp-amber);
  color: var(--bgp-navy-deep);
  font-weight: 900;
}

.bgp-step-card p,
.bgp-faq-card p {
  margin: 8px 0 0;
  color: var(--bgp-muted);
  line-height: 1.5;
}

.bgp-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.bgp-faq-card {
  padding: 20px;
}

.bgp-faq-card h3 {
  font-size: 17px;
}

@media (max-width: 1120px) {
  .bgp-trustline,
  .bgp-card-grid,
  .bgp-product-grid,
  .bgp-usecase-page .bgp-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bgp-band-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bgp-moment-grid,
  .bgp-shop-hero-grid,
  .bgp-category-hero__grid,
  .bgp-category-layout,
  .bgp-usecase-grid,
  .bgp-bundle {
    grid-template-columns: 1fr;
  }

  .bgp-filter-panel {
    position: static;
  }

  .bgp-moment-grid .bgp-image-card:first-child {
    grid-row: auto;
    min-height: 260px;
  }
}

@media (max-width: 760px) {
  .bgp-wrap {
    width: min(100% - 28px, 1320px);
  }

  .bgp-template h1 {
    font-size: clamp(34px, 12vw, 54px);
  }

  .bgp-header-row {
    display: block;
  }

  .bgp-trustline,
  .bgp-card-grid,
  .bgp-band-grid,
  .bgp-product-grid,
  .bgp-usecase-page .bgp-product-grid,
  .bgp-usecase-card-grid,
  .bgp-steps-grid,
  .bgp-faq-grid {
    grid-template-columns: 1fr;
  }

  .bgp-route-card {
    grid-template-columns: 72px 1fr;
  }

  .bgp-route-card img {
    width: 72px;
    height: 72px;
  }

  .bgp-mini-route {
    grid-template-columns: 1fr 74px;
  }

  .bgp-postcode-form,
  .bgp-field-row,
  .bgp-product-toolbar {
    grid-template-columns: 1fr;
    display: grid;
  }

  .bgp-category-hero__copy {
    min-height: 0;
  }

  .bgp-category-hero__media,
  .bgp-category-hero__media img {
    min-height: 300px;
  }

  .bgp-product-card__title {
    min-height: auto;
  }

  .bgp-bundle-buy {
    text-align: left;
  }
}

/* =============================================================================
 * 2026-05-27 — Restore Woodmart product card styling inside .bgp-template scope.
 *
 * Problem: .bgp-template a { color: inherit; } and the body font-family
 * inheritance leak into [products]-shortcode-rendered WC product cards,
 * making prices green, fonts Albert Sans, padding/background flat. Diff
 * captured via scripts/diff-product-card-styles.mjs.
 *
 * Fix: explicitly restore Woodmart's standard card visual values when a
 * ul.products / wd-product / .wd-products-element renders inside the
 * bgp scope. Values pulled from the working reference page
 * /product-category/lpg-calor-gas/bbq-patio-gas-bottles/.
 * ============================================================================= */

.bgp-template ul.products,
.bgp-template ul.products *,
.bgp-template .wd-products-element,
.bgp-template .wd-products-element * {
	font-family: Manrope, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

.bgp-template ul.products li.product,
.bgp-template .wd-products-element .product {
	background: #fff;
	border: 1px solid rgb(223, 213, 197);
	border-radius: 6px;
	padding: 16px;
	color: rgb(31, 34, 53);
}

.bgp-template ul.products li.product a,
.bgp-template ul.products li.product a:hover,
.bgp-template .wd-products-element a {
	color: revert;
	text-decoration: revert;
}

.bgp-template ul.products li.product .wd-entities-title,
.bgp-template ul.products li.product .wd-entities-title a,
.bgp-template ul.products li.product .product-title,
.bgp-template ul.products li.product .product-title a {
	color: rgb(31, 34, 53);
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 600;
}

.bgp-template ul.products li.product .wd-product-cats,
.bgp-template ul.products li.product .wd-product-cats a {
	color: #64748B;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bgp-template ul.products li.product .price,
.bgp-template ul.products li.product .price * {
	color: rgb(49, 59, 47);
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 900;
}

.bgp-template ul.products li.product .price .amount,
.bgp-template ul.products li.product .price > span,
.bgp-template ul.products li.product .price ins .amount {
	color: #08203C;
	font-weight: 700;
}

/* Add-to-cart / variation buttons inherit Woodmart defaults */
.bgp-template ul.products li.product .button,
.bgp-template ul.products li.product .add_to_cart_button,
.bgp-template ul.products li.product .product_type_variable {
	font-family: Manrope, system-ui, sans-serif;
}

/* =============================================================================
 * 2026-05-27 (corrected) — Target Woodmart's ACTUAL [products] shortcode output.
 *
 * Earlier override used ul.products li.product selectors which don't match
 * because Woodmart's shortcode renders as div.wd-products > div.wd-product,
 * not the traditional ul/li WC structure. Confirmed via DOM inspection
 * (scripts/inspect-helium-card-html.mjs).
 *
 * These selectors WILL match the helium / future use-case page output and
 * undo the .bgp-template inheritance leaks (Albert Sans font, green price,
 * flat background).
 * ============================================================================= */

.bgp-template .wd-product,
.bgp-template .wd-product * {
	font-family: Manrope, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif !important;
}

.bgp-template .wd-product {
	background: #fff !important;
	border: 1px solid rgb(223, 213, 197) !important;
	border-radius: 6px !important;
	padding: 16px !important;
	color: rgb(31, 34, 53) !important;
}

.bgp-template .wd-product a,
.bgp-template .wd-product a:hover {
	color: revert !important;
	text-decoration: none !important;
}

.bgp-template .wd-product .wd-entities-title,
.bgp-template .wd-product .wd-entities-title a {
	color: rgb(31, 34, 53) !important;
	font-weight: 600 !important;
}

.bgp-template .wd-product .wd-product-cats,
.bgp-template .wd-product .wd-product-cats a {
	color: #64748B !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	margin-top: -2.2px !important;
	margin-bottom: 6px !important;
	line-height: 1.4 !important;
}

.bgp-template .wd-product .price,
.bgp-template .wd-product .price *,
.bgp-template .wd-product .price bdi {
	color: #08203C !important;
	font-weight: 900 !important;
	font-size: 16px !important;
	line-height: 19.2px !important;
}

.bgp-template .wd-product .price .amount,
.bgp-template .wd-product .price > span,
.bgp-template .wd-product .price > bdi,
.bgp-template .wd-product .price ins .amount,
.bgp-template .wd-product .price ins bdi {
	color: #08203C !important;
	font-weight: 700 !important;
}

/* Add-to-cart buttons keep their Woodmart visual treatment */
.bgp-template .wd-product .button,
.bgp-template .wd-product .add_to_cart_button,
.bgp-template .wd-product .product_type_variable {
	font-family: Manrope, system-ui, sans-serif !important;
}

/* ===========================================================================
 * "Trade-yard editorial" — /services/ + /manufacturers-parts/.
 * Numbered sections, navy slabs, yellow safety-tape accents,
 * spec-sheet sidebars. Lives inside .bgp-template scope so the navy
 * + yellow rebrand tokens cascade.
 * ======================================================================== */

/* Beat the .bgp-template h1/h2/h3 defaults (0,1,1) so editorial Anton sizing
   wins. (0,2,1) override below; specific font-size + line-height still come
   from the per-element rules further down. Also normalise `.bgp-template a`
   `color: inherit` so editorial CTAs get explicit colours. */
.bgp-template .bgp-editorial h1,
.bgp-template .bgp-editorial h2,
.bgp-template .bgp-editorial h3 {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	max-width: none;
}

.bgp-template .bgp-editorial p {
	letter-spacing: normal;
	text-transform: none;
}

.bgp-template .bgp-editorial a.bgp-svc__cta,
.bgp-template .bgp-editorial a.bgp-cat-card,
.bgp-template .bgp-editorial a.bgp-contact-slab__phone {
	color: inherit;
}

.bgp-editorial {
	background:
		radial-gradient(circle at 92% 8%, rgba(250, 159, 3, .08), transparent 36rem),
		linear-gradient(180deg, #fffaf0 0%, #fbf7ec 32%, #ffffff 100%);
}

.bgp-editorial .bgp-wrap {
	width: min(100% - 48px, 1320px);
	margin-inline: auto;
}

/* ============================ EDITORIAL HERO =========================== */
.bgp-editorial-hero {
	padding-block: clamp(64px, 9vw, 130px) clamp(56px, 8vw, 110px);
}

/* Tablet + desktop: cap the top padding so the hero sits tight under the
   orange nav. Mobile (≤767px) keeps the wider clamp for breathing room. */
@media (min-width: 768px) {
	.bgp-editorial-hero {
		padding-block: clamp(28px, 3vw, 48px) clamp(48px, 6vw, 84px);
	}
}

.bgp-editorial-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: clamp(28px, 6vw, 80px);
	align-items: end;
}

.bgp-editorial-hero__copy {
	max-width: 56ch;
}

.bgp-editorial-hero__kicker {
	display: inline-block;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #08203C;
	padding-top: 14px;
	border-top: 2px solid #08203C;
	margin-bottom: 26px;
}

.bgp-template .bgp-editorial-hero__h1 {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(44px, 7.4vw, 116px);
	line-height: 0.93;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #08203C;
	margin: 0;
	font-feature-settings: "ss01" on;
}

.bgp-editorial-hero__h1 em {
	font-style: normal;
	position: relative;
	display: inline-block;
	z-index: 0;
}

.bgp-editorial-hero__h1 em::after {
	content: "";
	position: absolute;
	left: -4px;
	right: -4px;
	bottom: 0.08em;
	height: 0.32em;
	background: #FA9F03;
	z-index: -1;
	opacity: 1;
	border-radius: 1px;
}

.bgp-editorial-hero__lede {
	margin: 28px 0 0;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.62;
	color: #344056;
	max-width: 54ch;
}

.bgp-editorial-hero__count {
	text-align: right;
	align-self: end;
	position: relative;
	padding-right: 4px;
}

.bgp-editorial-hero__count-num {
	display: block;
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(120px, 19vw, 280px);
	line-height: 0.82;
	letter-spacing: -0.02em;
	color: #08203C;
	text-shadow: 6px 6px 0 #FA9F03;
}

.bgp-editorial-hero__count-lbl {
	display: block;
	margin-top: 16px;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #64748b;
}

/* ---- Per-hub hero differentiation -------------------------------------
 * Every editorial hub shared one cream wash + one navy-number/yellow-shadow
 * count, so the hubs read as near-identical. These rules vary the accent
 * wash position and the count-number shadow DIRECTION per hub — strictly
 * within the navy/yellow/cream palette (no new colours, no imagery), so
 * each header feels distinct at a glance while staying on-brand. Scoped to
 * each hub's main class (e.g. .bgp-refills) which already exists in markup.
 * --------------------------------------------------------------------- */
.bgp-editorial.bgp-refills {
	background:
		radial-gradient(circle at 8% 6%, rgba(250, 159, 3, .10), transparent 34rem),
		linear-gradient(180deg, #fffaf0 0%, #fbf7ec 32%, #ffffff 100%);
}
.bgp-refills .bgp-editorial-hero__count-num { text-shadow: -6px 6px 0 #FA9F03; }

.bgp-editorial.bgp-gases {
	background:
		radial-gradient(circle at 50% 0%, rgba(8, 32, 60, .07), transparent 32rem),
		linear-gradient(180deg, #fffaf0 0%, #fbf7ec 32%, #ffffff 100%);
}
.bgp-gases .bgp-editorial-hero__count-num { text-shadow: 6px -6px 0 #FA9F03; }

.bgp-editorial.bgp-parts {
	background:
		radial-gradient(circle at 95% 92%, rgba(250, 159, 3, .10), transparent 34rem),
		linear-gradient(180deg, #fffaf0 0%, #fbf7ec 32%, #ffffff 100%);
}
.bgp-parts .bgp-editorial-hero__count-num { text-shadow: -6px -6px 0 #FA9F03; }

.bgp-editorial.bgp-contact {
	background:
		radial-gradient(circle at 4% 50%, rgba(8, 32, 60, .07), transparent 32rem),
		linear-gradient(180deg, #fffaf0 0%, #fbf7ec 32%, #ffffff 100%);
}

.bgp-editorial.bgp-delivery {
	background:
		radial-gradient(circle at 96% 50%, rgba(250, 159, 3, .10), transparent 32rem),
		linear-gradient(180deg, #fffaf0 0%, #fbf7ec 32%, #ffffff 100%);
}
.bgp-delivery .bgp-editorial-hero__count-num { text-shadow: -6px 6px 0 #FA9F03; }

.bgp-editorial.bgp-brands {
	background:
		radial-gradient(circle at 50% 100%, rgba(8, 32, 60, .06), transparent 34rem),
		linear-gradient(180deg, #fffaf0 0%, #fbf7ec 32%, #ffffff 100%);
}

.bgp-editorial.bgp-deals {
	background:
		radial-gradient(circle at 92% 8%, rgba(250, 159, 3, .14), transparent 30rem),
		linear-gradient(180deg, #fffaf0 0%, #fbf7ec 32%, #ffffff 100%);
}

/* ============================ SAFETY-TAPE STRIP ========================= */
.bgp-tape-strip {
	height: 28px;
	background: repeating-linear-gradient(
		135deg,
		#FA9F03 0 20px,
		#08203C 20px 40px
	);
	margin: 0;
}

/* ============================ EDITORIAL SERVICE LIST ==================== */
.bgp-editorial-list {
	padding-block: clamp(40px, 6vw, 80px);
}

.bgp-svc {
	display: grid;
	grid-template-columns: minmax(80px, 110px) minmax(0, 1.45fr) minmax(0, 310px);
	gap: clamp(28px, 4vw, 56px);
	padding-block: clamp(40px, 5.5vw, 64px);
	border-top: 1px solid rgba(8, 32, 60, 0.14);
	align-items: start;
}

.bgp-svc:first-of-type {
	border-top: 0;
	padding-top: 8px;
}

.bgp-svc__num {
	display: block;
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(64px, 7vw, 108px);
	line-height: 0.85;
	color: #FA9F03;
	letter-spacing: 0;
	margin-top: -8px;
}

.bgp-svc__body {
	max-width: 60ch;
}

.bgp-svc__kicker {
	display: inline-block;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #b58800;
	margin-bottom: 14px;
}

.bgp-template .bgp-svc__title {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.04;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #08203C;
	margin: 0 0 18px;
}

.bgp-svc__copy {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1.66;
	color: #344056;
	margin: 0 0 26px;
}

.bgp-svc__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #08203C;
	text-decoration: none;
	padding-bottom: 6px;
	border-bottom: 2px solid #FA9F03;
	transition: gap 220ms ease, color 220ms ease, border-color 220ms ease;
}

.bgp-svc__cta:hover,
.bgp-svc__cta:focus-visible {
	gap: 18px;
	color: #061A32;
	border-bottom-color: #08203C;
}

.bgp-svc__cta svg {
	transition: transform 220ms ease;
}

.bgp-svc__cta:hover svg,
.bgp-svc__cta:focus-visible svg {
	transform: translateX(2px);
}

.bgp-svc__spec {
	background: #08203C;
	color: #fff;
	padding: 24px 24px 26px;
	border-radius: 4px;
	margin: 0;
	position: relative;
	box-shadow: 0 22px 60px -36px rgba(8, 32, 60, 0.55);
}

.bgp-svc__spec::before {
	content: "SPEC";
	position: absolute;
	top: -10px;
	left: 24px;
	background: #FA9F03;
	color: #08203C;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0.16em;
	padding: 4px 10px 3px;
	border-radius: 2px;
}

.bgp-svc__spec dt {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-top: 18px;
}

.bgp-svc__spec dt:first-of-type {
	margin-top: 6px;
}

.bgp-svc__spec dd {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	color: #fff;
	margin: 4px 0 0;
}

/* ============================ CATALOGUE SHELF (parts) =================== */
.bgp-parts-shelf-wrap,
.bgp-order-flow-wrap {
	padding-block: clamp(48px, 6vw, 90px);
}

.bgp-shelf-header {
	max-width: 60ch;
	margin-bottom: clamp(28px, 4vw, 48px);
}

.bgp-template .bgp-shelf-h {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.02;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #08203C;
	margin: 6px 0 12px;
}

.bgp-shelf-meta {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.55;
	color: #475569;
	margin: 0;
}

.bgp-catalogue-shelf {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 22px;
}

.bgp-cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 20px 22px;
	background: #fff;
	border: 1px solid rgba(8, 32, 60, 0.1);
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.bgp-cat-card:hover,
.bgp-cat-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 22px 56px -24px rgba(8, 32, 60, 0.30);
	border-color: #08203C;
}

.bgp-cat-card__num {
	position: absolute;
	top: 14px;
	right: 18px;
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 1;
	color: rgba(8, 32, 60, 0.18);
	letter-spacing: 0;
}

.bgp-cat-card:hover .bgp-cat-card__num,
.bgp-cat-card:focus-visible .bgp-cat-card__num {
	color: #FA9F03;
}

.bgp-cat-card__brand {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #b58800;
}

.bgp-cat-card__img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: #f8ecd6;
	border: 1px solid rgba(8, 32, 60, 0.08);
	border-radius: 3px;
}

.bgp-template .bgp-cat-card__title {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #08203C;
	margin: 0;
	min-height: 2.4em;
}

.bgp-cat-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #08203C;
}

.bgp-cat-card__pdf-badge {
	background: #FA9F03;
	color: #08203C;
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0.08em;
	padding: 4px 8px 3px;
	border-radius: 3px;
}

/* ============================ 3-STEP ORDER FLOW ========================= */
.bgp-order-flow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	counter-reset: bgp-step;
}

.bgp-order-flow__step {
	position: relative;
	padding: 30px 26px 32px;
	background: #fff;
	border-left: 4px solid #FA9F03;
	border-radius: 0 6px 6px 0;
	box-shadow: 0 18px 38px -28px rgba(8, 32, 60, 0.3);
	counter-increment: bgp-step;
	overflow: hidden;
}

.bgp-order-flow__step::before {
	content: counter(bgp-step, decimal-leading-zero);
	position: absolute;
	top: 8px;
	right: 14px;
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: 76px;
	line-height: 1;
	color: rgba(8, 32, 60, 0.07);
	letter-spacing: 0;
}

.bgp-template .bgp-order-flow__step h3 {
	position: relative;
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #08203C;
	margin: 0 0 10px;
}

.bgp-order-flow__step p {
	position: relative;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.62;
	color: #475569;
	margin: 0;
}

/* ============================ CONTACT SLAB (depot sign) ================== */
.bgp-contact-slab {
	background: #08203C;
	color: #fff;
	padding-block: clamp(56px, 8vw, 96px);
	position: relative;
	overflow: hidden;
}

.bgp-contact-slab::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -120px;
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, rgba(250, 159, 3, 0.18) 0%, transparent 60%);
	pointer-events: none;
}

.bgp-contact-slab__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: end;
	position: relative;
}

.bgp-contact-slab__kicker {
	display: inline-block;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #FA9F03;
	margin-bottom: 18px;
	padding-top: 12px;
	border-top: 2px solid #FA9F03;
}

.bgp-template .bgp-contact-slab__h2 {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(36px, 5vw, 64px);
	line-height: 0.98;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}

.bgp-contact-slab__phone {
	display: inline-block;
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(40px, 5.6vw, 80px);
	line-height: 0.96;
	letter-spacing: 0.01em;
	color: #FA9F03;
	text-decoration: none;
	margin-top: 22px;
	transition: color 200ms ease;
}

.bgp-contact-slab__phone:hover,
.bgp-contact-slab__phone:focus-visible {
	color: #ffbd42;
}

.bgp-contact-slab__phone--free {
	display: block;
	font-size: clamp(26px, 3.4vw, 44px);
	color: #fff;
	opacity: 0.92;
	margin-top: 14px;
}

.bgp-contact-slab__phone--free:hover,
.bgp-contact-slab__phone--free:focus-visible {
	color: #fff;
	opacity: 1;
}

.bgp-contact-slab__phone-tag {
	display: inline-block;
	margin-left: 12px;
	vertical-align: middle;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.bgp-contact-slab__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 14px;
	margin: 0;
	padding-left: clamp(0px, 2vw, 24px);
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.bgp-contact-slab__meta dt {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	align-self: center;
}

.bgp-contact-slab__meta dd {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.45;
	color: #fff;
	margin: 0;
}

.bgp-contact-slab__meta dd a {
	color: #FA9F03;
	text-decoration: none;
	border-bottom: 1px dashed rgba(250, 159, 3, 0.5);
}

.bgp-contact-slab__meta dd a:hover {
	color: #ffbd42;
	border-bottom-color: #ffbd42;
}

/* ============================ RESPONSIVE ================================ */
@media (max-width: 960px) {
	.bgp-editorial-hero__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.bgp-editorial-hero__count {
		text-align: left;
		order: -1;
	}
	.bgp-editorial-hero__count-num {
		font-size: clamp(96px, 22vw, 180px);
		text-shadow: 4px 4px 0 #FA9F03;
	}
	.bgp-svc {
		grid-template-columns: 60px 1fr;
	}
	.bgp-svc__num {
		font-size: 56px;
	}
	.bgp-svc__spec {
		grid-column: 1 / -1;
		margin-top: 8px;
	}
	.bgp-order-flow {
		grid-template-columns: 1fr;
	}
	.bgp-contact-slab__grid {
		grid-template-columns: 1fr;
		align-items: start;
	}
	.bgp-contact-slab__meta {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.16);
		padding-left: 0;
		padding-top: 22px;
		margin-top: 12px;
	}
}

@media (max-width: 600px) {
	.bgp-editorial-hero__h1 em::after {
		height: 0.22em;
	}
	.bgp-svc {
		grid-template-columns: 48px 1fr;
		gap: 18px;
	}
	.bgp-svc__num {
		font-size: 44px;
		margin-top: -4px;
	}
	.bgp-cat-card__title {
		font-size: 19px;
		min-height: 2.2em;
	}
}

/* ============================ EDITORIAL FULL-BLEED ======================
 * Make /services/ + /manufacturers-parts/ cream gradient extend edge-to-edge
 * from the bottom of the orange nav all the way to the viewport sides.
 * Woodmart's .main-page-wrapper has max-width + top padding + bg colour;
 * strip those off only when body.bgp-editorial-active is present. */

body.bgp-editorial-active {
	/* Page background matches the editorial cream gradient so any pixel
	   that escapes wrapper coverage still looks intentional. */
	background:
		radial-gradient(circle at 92% 8%, rgba(250, 159, 3, .08), transparent 36rem),
		linear-gradient(180deg, #fffaf0 0%, #fbf7ec 32%, #ffffff 100%) !important;
}

body.bgp-editorial-active .wd-page-wrapper,
body.bgp-editorial-active .website-wrapper {
	background: transparent !important;
}

body.bgp-editorial-active .main-page-wrapper,
body.bgp-editorial-active .wd-page-content {
	max-width: none !important;
	width: 100% !important;
	padding-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background: transparent !important;
}

/* The .bgp-editorial main itself loses its own background since the body
   now carries the gradient. Keeps things from getting darker where they
   overlap. */
body.bgp-editorial-active .bgp-editorial {
	background: none;
}

/* ============================ GASES HUB ==================================
 * Categorised gas-type index. Four numbered family sections, each with a
 * left number + copy header and a card grid below.
 * ======================================================================== */

.bgp-gas-family {
	padding-block: clamp(48px, 6vw, 80px);
	position: relative;
}

.bgp-gas-family + .bgp-gas-family {
	border-top: 1px solid rgba(8, 32, 60, 0.10);
}

.bgp-gas-family__header {
	display: grid;
	grid-template-columns: minmax(96px, 130px) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 44px);
	align-items: start;
	margin-bottom: clamp(28px, 4vw, 48px);
	max-width: 880px;
}

.bgp-gas-family__num {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(72px, 8vw, 124px);
	line-height: 0.82;
	color: #FA9F03;
	letter-spacing: 0;
	margin-top: -10px;
}

.bgp-gas-family__copy { padding-top: 6px; }

.bgp-gas-family__kicker {
	display: inline-block;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #b58800;
	margin-bottom: 10px;
}

.bgp-template .bgp-gas-family__title {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.02;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #08203C;
	margin: 0 0 12px;
}

.bgp-gas-family__lede {
	margin: 0;
	font-family: Manrope, system-ui, sans-serif;
	font-size: clamp(14px, 1vw, 16px);
	line-height: 1.6;
	color: #344056;
	max-width: 58ch;
}

/* ============================ GAS CARD GRID ============================= */
.bgp-gases-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 22px;
}

.bgp-gas-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(8, 32, 60, 0.10);
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.bgp-gas-card:hover,
.bgp-gas-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 22px 56px -24px rgba(8, 32, 60, 0.30);
	border-color: #08203C;
}

.bgp-gas-card__media {
	position: relative;
	overflow: hidden;
	background: #f8ecd6;
}

.bgp-gas-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 380ms ease;
}

.bgp-gas-card:hover .bgp-gas-card__img,
.bgp-gas-card:focus-visible .bgp-gas-card__img {
	transform: scale(1.04);
}

.bgp-gas-card__num {
	position: absolute;
	top: 12px;
	right: 12px;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	display: inline-grid;
	place-items: center;
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
	background: rgba(8, 32, 60, 0.74);
	border-radius: 999px;
	backdrop-filter: blur(6px);
}

.bgp-gas-card__body {
	padding: 18px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.bgp-gas-card__family {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #b58800;
}

.bgp-template .bgp-gas-card__title {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #08203C;
	margin: 0;
}

.bgp-gas-card__lead {
	font-family: Manrope, system-ui, sans-serif;
	font-size: 13.5px;
	line-height: 1.55;
	color: #475569;
	margin: 0;
	flex: 1;
}

.bgp-gas-card__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.bgp-gas-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #08203C;
}

.bgp-gas-card__count {
	margin-left: auto;
	background: #FA9F03;
	color: #08203C;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0.06em;
	padding: 4px 8px 3px;
	border-radius: 3px;
	white-space: nowrap;
}

.bgp-gas-card__count--enquire {
	background: transparent;
	border: 1px dashed rgba(8, 32, 60, 0.36);
	color: #08203C;
}

/* ============================ CROSS-LINK CHIPS BAR ====================== */
.bgp-cross-link-bar {
	margin-block: clamp(40px, 5vw, 64px);
	padding-block: clamp(28px, 4vw, 42px);
	background: #fdf4e1;
	border-top: 2px dashed rgba(8, 32, 60, 0.22);
	border-bottom: 2px dashed rgba(8, 32, 60, 0.22);
}

.bgp-template .bgp-cross-link-bar__h {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #08203C;
	margin: 0 0 6px;
}

.bgp-cross-link-bar__sub {
	margin: 0 0 18px;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: #475569;
	max-width: 60ch;
}

.bgp-cross-link-bar__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bgp-cross-link-bar__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid rgba(8, 32, 60, 0.16);
	border-radius: 999px;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0;
	color: #08203C;
	text-decoration: none;
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.bgp-cross-link-bar__chip:hover,
.bgp-cross-link-bar__chip:focus-visible {
	background: #08203C;
	color: #fff;
	border-color: #08203C;
	transform: translateY(-1px);
}

.bgp-cross-link-bar__chip svg {
	transition: transform 180ms ease;
}

.bgp-cross-link-bar__chip:hover svg,
.bgp-cross-link-bar__chip:focus-visible svg {
	transform: translateX(2px);
}

/* ============================ GASES RESPONSIVE ========================== */
@media (max-width: 720px) {
	.bgp-gas-family__header {
		grid-template-columns: 56px 1fr;
		gap: 14px;
	}
	.bgp-gas-family__num { font-size: 56px; }
	.bgp-gases-grid {
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}
	.bgp-gas-card__body { padding: 14px 14px 18px; }
}

@media (max-width: 430px) {
	.bgp-gases-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================ CONTACT / DELIVERY / BRANDS / DEALS =======
 * Editorial patterns added 2026-05-27 for the second round of stock-page
 * rebuilds. Tokens cascade from .bgp-template.
 * ======================================================================== */

/* Hero counter superscript (used by "£14.23" and "40+") */
.bgp-editorial-hero__count-sup {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: 0.35em;
	line-height: 1;
	letter-spacing: 0;
	vertical-align: super;
	top: -0.55em;
	position: relative;
	margin-left: 2px;
	color: #FA9F03;
	text-shadow: none;
}

/* Compact service variant — no spec sidebar (contact + deals reuse) */
.bgp-svc--compact {
	grid-template-columns: minmax(70px, 100px) minmax(0, 1fr);
}

/* Three-column contact slab (services + contact-us long form) */
.bgp-contact-slab__grid--three {
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr) minmax(0, 0.95fr);
	align-items: start;
}

.bgp-contact-slab__address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-left: clamp(0px, 2vw, 24px);
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.bgp-contact-slab__address > span {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.5;
	color: #fff;
}

.bgp-contact-slab__address .bgp-contact-slab__kicker {
	margin-top: 0;
}

.bgp-contact-slab__map-link {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #FA9F03;
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 1px dashed rgba(250, 159, 3, 0.5);
}

.bgp-contact-slab__map-link:hover,
.bgp-contact-slab__map-link:focus-visible {
	color: #ffbd42;
	border-bottom-color: #ffbd42;
}

/* ============================ DELIVERY TABLE ============================ */
.bgp-delivery-table-wrap {
	overflow-x: auto;
	border: 1px solid rgba(8, 32, 60, 0.12);
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 18px 38px -28px rgba(8, 32, 60, 0.25);
}

.bgp-delivery-table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-family: Manrope, system-ui, sans-serif;
}

.bgp-delivery-table thead th {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
	background: #08203C;
	padding: 14px 18px;
	text-align: left;
	border-bottom: 2px solid #FA9F03;
}

.bgp-delivery-table tbody tr {
	border-bottom: 1px solid rgba(8, 32, 60, 0.08);
}

.bgp-delivery-table tbody tr:last-child {
	border-bottom: 0;
}

.bgp-delivery-table tbody tr:hover {
	background: rgba(250, 159, 3, 0.06);
}

.bgp-delivery-table th[scope="row"] {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #08203C;
	padding: 16px 18px;
	text-align: left;
	vertical-align: middle;
}

.bgp-delivery-table td {
	padding: 16px 18px;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 500;
	font-size: 14.5px;
	line-height: 1.55;
	color: #344056;
	vertical-align: middle;
}

.bgp-delivery-table__price {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: 22px;
	color: #FA9F03;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.bgp-delivery-table__footnote {
	margin: 16px 0 0;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.55;
	color: #64748b;
	font-style: italic;
}

/* ============================ BRANDS GRID =============================== */
.bgp-brands-shelf {
	padding-block: clamp(48px, 6vw, 80px);
}

.bgp-brands-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 22px;
}

.bgp-brand-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 28px 24px 30px;
	background: #fff;
	border: 1px solid rgba(8, 32, 60, 0.10);
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}

.bgp-brand-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: #FA9F03;
	transform: translateY(4px);
	transition: transform 220ms ease;
}

.bgp-brand-card:hover,
.bgp-brand-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 26px 60px -28px rgba(8, 32, 60, 0.30);
	border-color: #08203C;
}

.bgp-brand-card:hover::after,
.bgp-brand-card:focus-visible::after {
	transform: translateY(0);
}

.bgp-brand-card__num {
	position: absolute;
	top: 16px;
	right: 20px;
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 1;
	color: rgba(8, 32, 60, 0.18);
	letter-spacing: 0;
}

.bgp-template .bgp-brand-card__name {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(40px, 4.5vw, 56px);
	line-height: 0.88;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #08203C;
	margin: 18px 0 4px;
}

.bgp-brand-card__family {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #b58800;
}

.bgp-brand-card__lead {
	font-family: Manrope, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: #475569;
	margin: 6px 0 0;
	flex: 1;
}

.bgp-brand-card__cta {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #08203C;
}

.bgp-brand-card__cta svg {
	transition: transform 200ms ease;
}

.bgp-brand-card:hover .bgp-brand-card__cta svg,
.bgp-brand-card:focus-visible .bgp-brand-card__cta svg {
	transform: translateX(3px);
}

/* ============================ RESPONSIVE ================================ */
@media (max-width: 960px) {
	.bgp-contact-slab__grid--three {
		grid-template-columns: 1fr;
	}
	.bgp-contact-slab__address {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.16);
		padding-left: 0;
		padding-top: 22px;
	}
}

@media (max-width: 720px) {
	.bgp-svc--compact { grid-template-columns: 48px 1fr; }
	.bgp-brands-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.bgp-brand-card { padding: 20px 18px 22px; }
	.bgp-template .bgp-brand-card__name { font-size: clamp(32px, 8vw, 40px); }
	.bgp-delivery-table { font-size: 13px; }
	.bgp-delivery-table th[scope="row"] { font-size: 16px; padding: 12px; }
	.bgp-delivery-table td { padding: 12px; }
}

@media (max-width: 430px) {
	.bgp-brands-grid { grid-template-columns: 1fr; }
}

/* ============================ CONTACT UTILITY ZONE =======================
 * Form-first layout for /contact-us/ — CF7 form left, direct contact card
 * right, Google Map embed below. The editorial chrome (hero, tape, list,
 * depot slab) frames it but doesn't replace it.
 * ======================================================================== */

/* Slim hero variant — no monumental counter, hero hands off to the form fast */
.bgp-editorial-hero--slim {
	padding-block: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 40px);
}

.bgp-template .bgp-editorial-hero__h1--inline {
	font-size: clamp(36px, 5vw, 76px);
	line-height: 1;
}

.bgp-template .bgp-editorial-hero__h1--inline em {
	display: inline;
}

/* Layout grid: form 60% / contact card 40% on desktop, stack on mobile */
.bgp-form-zone {
	padding-block: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 32px);
}

.bgp-form-zone__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.95fr);
	gap: clamp(24px, 3.5vw, 48px);
	align-items: start;
}

/* Form card — white surface, slight shadow, generous padding */
.bgp-form-card {
	background: #fff;
	border: 1px solid rgba(8, 32, 60, 0.10);
	border-radius: 8px;
	padding: clamp(24px, 3vw, 40px);
	box-shadow: 0 26px 60px -36px rgba(8, 32, 60, 0.28);
}

.bgp-template .bgp-form-card__h {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #08203C;
	margin: 8px 0 8px;
}

.bgp-form-card__lede {
	margin: 0 0 22px;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: #64748b;
}

/* CF7 input theming — match the bgp form aesthetic inside .bgp-template */
.bgp-cf7-wrap .wpcf7 { margin: 0; }
.bgp-cf7-wrap .wpcf7-form > p,
.bgp-cf7-wrap .wpcf7-form .column.one {
	margin: 0 0 14px;
}

.bgp-cf7-wrap label {
	display: block;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #344056;
	margin-bottom: 6px;
}

.bgp-cf7-wrap .wpcf7-form-control-wrap { display: block; }

.bgp-cf7-wrap input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]),
.bgp-cf7-wrap textarea.wpcf7-form-control {
	width: 100% !important;
	min-height: 46px;
	padding: 12px 14px;
	border: 1.5px solid rgba(8, 32, 60, 0.18);
	border-radius: 8px;
	background: #fff;
	color: #08203C;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color 180ms ease, box-shadow 180ms ease;
	box-sizing: border-box;
}

.bgp-cf7-wrap textarea.wpcf7-form-control {
	min-height: 130px;
	resize: vertical;
}

.bgp-cf7-wrap input.wpcf7-form-control:focus,
.bgp-cf7-wrap textarea.wpcf7-form-control:focus {
	outline: none;
	border-color: #08203C;
	box-shadow: 0 0 0 3px rgba(8, 32, 60, 0.16);
}

.bgp-cf7-wrap .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 12px;
	color: #C9362F;
}

.bgp-cf7-wrap .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	color: #475569;
	cursor: pointer;
}

.bgp-cf7-wrap .wpcf7-acceptance input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: #FA9F03;
	flex: 0 0 auto;
}

.bgp-cf7-wrap .cf-style1-checkbox { display: block !important; }

.bgp-cf7-wrap .wpcf7-submit,
.bgp-cf7-wrap input.wpcf7-submit[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 14px 30px;
	background-color: #FA9F03 !important;
	border: 1px solid #FA9F03 !important;
	border-radius: 8px;
	color: #08203C !important;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
	box-shadow: 0 14px 28px -14px rgba(8, 32, 60, 0.32);
}

.bgp-cf7-wrap .wpcf7-submit:hover,
.bgp-cf7-wrap input.wpcf7-submit[type="submit"]:hover {
	background-color: #E08A00 !important;
	border-color: #E08A00 !important;
	transform: translateY(-1px);
}

.bgp-cf7-wrap .wpcf7-spinner {
	margin-left: 12px;
	vertical-align: middle;
}

.bgp-cf7-wrap .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 6px;
	border: 1px solid rgba(8, 32, 60, 0.14);
	background: rgba(250, 159, 3, 0.08);
	font-family: Manrope, system-ui, sans-serif;
	font-size: 14px;
	color: #08203C;
}

.bgp-cf7-wrap .wpcf7-mail-sent-ok + .wpcf7-response-output,
.bgp-cf7-wrap form.sent .wpcf7-response-output {
	background: rgba(47, 143, 78, 0.08);
	border-color: rgba(47, 143, 78, 0.32);
}

/* Direct contact card — beside the form */
.bgp-contact-card {
	position: relative;
	background: #08203C;
	color: #fff;
	border-radius: 8px;
	padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 32px);
	overflow: hidden;
	box-shadow: 0 26px 60px -32px rgba(8, 32, 60, 0.4);
}

.bgp-contact-card__tape {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 8px;
	background: repeating-linear-gradient(
		135deg,
		#FA9F03 0 12px,
		#08203C 12px 24px
	);
}

.bgp-contact-card .bgp-editorial-hero__kicker {
	color: #FA9F03;
	border-top-color: #FA9F03;
	margin-top: 18px;
}

.bgp-template .bgp-contact-card__h {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(28px, 2.8vw, 38px);
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 22px;
}

.bgp-contact-card__phones {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 22px;
}

.bgp-contact-card__phone {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
	color: inherit;
	transition: color 180ms ease;
}

.bgp-contact-card__phone:hover,
.bgp-contact-card__phone:focus-visible {
	color: #ffbd42;
}

.bgp-contact-card__phone-num {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1;
	letter-spacing: 0.01em;
	color: #FA9F03;
}

.bgp-contact-card__phone-lbl {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.bgp-contact-card__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 5px 14px;
	padding-block: 18px;
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.bgp-contact-card__meta dt {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	align-self: center;
}

.bgp-contact-card__meta dd {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #fff;
	margin: 0;
}

.bgp-contact-card__meta a {
	color: #FA9F03;
	text-decoration: none;
	border-bottom: 1px dashed rgba(250, 159, 3, 0.5);
}

.bgp-contact-card__meta a:hover {
	color: #ffbd42;
	border-bottom-color: #ffbd42;
}

.bgp-contact-card__address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-top: 20px;
}

.bgp-contact-card__address > span {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.45;
	color: #fff;
}

.bgp-contact-card__map-cta {
	margin-top: 18px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	background: #FA9F03;
	color: #08203C;
	border-radius: 6px;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 180ms ease, transform 180ms ease;
}

.bgp-contact-card__map-cta:hover,
.bgp-contact-card__map-cta:focus-visible {
	background: #ffbd42;
	transform: translateY(-1px);
	color: #08203C;
}

.bgp-contact-card__map-cta svg {
	transition: transform 180ms ease;
}

.bgp-contact-card__map-cta:hover svg {
	transform: translateX(3px);
}

/* Map embed section */
.bgp-map-section {
	padding-block: clamp(24px, 3vw, 40px);
}

.bgp-map-embed {
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(8, 32, 60, 0.12);
	box-shadow: 0 22px 56px -32px rgba(8, 32, 60, 0.32);
	background: #f8ecd6;
}

.bgp-map-embed iframe {
	display: block;
	width: 100%;
	height: clamp(280px, 38vw, 460px);
	border: 0;
	filter: saturate(0.9);
}

/* Responsive: stack form + card on tablet/mobile */
@media (max-width: 960px) {
	.bgp-form-zone__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.bgp-form-card { padding: 20px; }
	.bgp-contact-card { padding: 24px 20px; }
}

/* Static map embed (clickable → Google Maps) replaces the iframe so it loads
   regardless of cookie consent / third-party-iframe blocks. */
a.bgp-map-embed {
	position: relative;
	display: block;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(8, 32, 60, 0.12);
	box-shadow: 0 22px 56px -32px rgba(8, 32, 60, 0.32);
	background: #f8ecd6;
	text-decoration: none;
	color: inherit;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

a.bgp-map-embed:hover,
a.bgp-map-embed:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 30px 70px -32px rgba(8, 32, 60, 0.42);
	border-color: #08203C;
}

.bgp-map-embed__img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 280px;
	max-height: 460px;
	object-fit: cover;
}

.bgp-map-embed__overlay {
	position: absolute;
	left: 24px;
	bottom: 24px;
	right: 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	background: rgba(8, 32, 60, 0.94);
	color: #fff;
	border-radius: 6px;
	backdrop-filter: blur(8px);
}

.bgp-map-embed__pin {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: #fff;
	border-radius: 50%;
}

.bgp-map-embed__lbl {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.85);
}

.bgp-map-embed__lbl strong {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
}

.bgp-map-embed__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #FA9F03;
	color: #08203C;
	border-radius: 4px;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

a.bgp-map-embed:hover .bgp-map-embed__cta svg {
	transform: translateX(3px);
	transition: transform 200ms ease;
}

@media (max-width: 600px) {
	.bgp-map-embed__overlay {
		left: 12px;
		right: 12px;
		bottom: 12px;
		padding: 12px 14px;
		gap: 10px;
	}
	.bgp-map-embed__lbl { font-size: 11px; }
	.bgp-map-embed__lbl strong { font-size: 15px; }
	.bgp-map-embed__cta { padding: 8px 12px; font-size: 10px; }
	.bgp-map-embed__pin { width: 32px; height: 32px; }
}

/* Directions card — self-contained, no external map deps. Replaces the
   unreliable static-map image with a styled clickable card that opens
   Google Maps in a new tab. */
a.bgp-directions-card {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 22px;
	padding: 22px 26px;
	background:
		radial-gradient(circle at 90% 10%, rgba(250, 159, 3, 0.10), transparent 320px),
		linear-gradient(135deg, #08203C 0%, #0c2a4d 100%);
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 24px 56px -28px rgba(8, 32, 60, 0.45);
	transition: transform 220ms ease, box-shadow 220ms ease;
}

a.bgp-directions-card::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 6px;
	background: repeating-linear-gradient(135deg, #FA9F03 0 12px, #08203C 12px 24px);
}

a.bgp-directions-card:hover,
a.bgp-directions-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 30px 70px -28px rgba(8, 32, 60, 0.5);
}

.bgp-directions-card__pin {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	display: inline-grid;
	place-items: center;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.bgp-directions-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bgp-directions-card__kicker {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #FA9F03;
}

.bgp-directions-card__title {
	font-family: Anton, 'Bebas Neue', Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(20px, 2.2vw, 28px);
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	margin: 2px 0 0;
}

.bgp-directions-card__addr {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.78);
}

.bgp-directions-card__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	background: #FA9F03;
	color: #08203C;
	border-radius: 6px;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

a.bgp-directions-card:hover .bgp-directions-card__cta {
	background: #ffbd42;
}

a.bgp-directions-card:hover .bgp-directions-card__cta svg {
	transform: translateX(3px);
	transition: transform 200ms ease;
}

@media (max-width: 720px) {
	a.bgp-directions-card {
		grid-template-columns: auto 1fr;
		gap: 14px;
		padding: 18px 18px 22px;
	}
	.bgp-directions-card__cta {
		grid-column: 1 / -1;
		justify-content: center;
		width: 100%;
		padding: 12px 18px;
	}
	.bgp-directions-card__pin { width: 44px; height: 44px; }
	.bgp-directions-card__pin svg { width: 22px; height: 28px; }
}

/* ============================ EDITORIAL FAMILY POLISH ===================
 * 2026-05-27: align the shared bgp body pages with /shop/.
 * Breadcrumbs become a full-width warm band directly below the orange nav;
 * the editorial yellow treatment is softened so it reads as Bottle Gases,
 * not site-construction tape.
 * ======================================================================== */

body.bgp-body-template-active .bgp-template {
	margin-top: 0;
}

body.bgp-body-surface-active .main-page-wrapper,
body.bgp-body-surface-active #main-content,
body.bgp-body-surface-active .wd-page-content {
	padding-top: 0 !important;
}

.bgp-template > .bgp-breadcrumb {
	margin: 0;
	background:
		linear-gradient(90deg, rgba(255, 247, 232, 0.98) 0%, rgba(255, 250, 240, 0.98) 58%, rgba(253, 244, 225, 0.98) 100%);
	border-top: 0;
	border-bottom: 1px solid rgba(227, 214, 191, 0.82);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.bgp-template > .bgp-breadcrumb .bgp-wrap {
	align-items: center;
	min-height: 49px;
	padding-block: 0;
	line-height: 1.25;
}

.bgp-template > .bgp-breadcrumb a {
	color: #475569;
	text-decoration: none;
}

.bgp-template > .bgp-breadcrumb a:hover,
.bgp-template > .bgp-breadcrumb a:focus-visible {
	color: #08203C;
}

.bgp-template > .bgp-breadcrumb + .bgp-section,
.bgp-template > .bgp-breadcrumb + .bgp-usecase-hero,
.bgp-template > .bgp-breadcrumb + .bgp-category-hero,
.bgp-template > .bgp-breadcrumb + .bgp-editorial-hero {
	margin-top: 0;
}

body.term-mig-welding-gas .wpb-content-wrapper > .vc_row:has(.wd-breadcrumbs.woocommerce-breadcrumb) {
	display: none;
}

body.bgp-editorial-active {
	background:
		radial-gradient(circle at 92% 6%, rgba(250, 159, 3, 0.045), transparent 34rem),
		linear-gradient(180deg, #fffaf0 0%, #f8fafc 48%, #ffffff 100%) !important;
}

body.bgp-editorial-active .bgp-editorial {
	background: transparent;
}

.bgp-editorial-hero {
	padding-block: clamp(40px, 5vw, 72px) clamp(44px, 5.5vw, 82px);
}

.bgp-editorial-hero__kicker {
	padding-top: 10px;
	margin-bottom: 20px;
	border-top-color: rgba(8, 32, 60, 0.72);
	color: #334155;
}

.bgp-editorial-hero__h1 em::after {
	left: -3px;
	right: -3px;
	bottom: 0.09em;
	height: 0.24em;
	background: rgba(250, 159, 3, 0.72);
}

.bgp-editorial-hero__count-num {
	color: #08203C;
	text-shadow: 4px 4px 0 rgba(250, 159, 3, 0.34);
}

.bgp-editorial-hero__count-lbl {
	color: #475569;
}

.bgp-tape-strip {
	height: 10px;
	background:
		linear-gradient(90deg, rgba(250, 159, 3, 0.92), rgba(255, 189, 66, 0.74), rgba(250, 159, 3, 0.36));
}

.bgp-svc {
	padding-block: clamp(34px, 4.4vw, 56px);
}

.bgp-svc:first-of-type {
	padding-top: 0;
}

.bgp-svc__num {
	color: #c97705;
}

.bgp-svc__spec {
	border: 1px solid rgba(8, 32, 60, 0.08);
	box-shadow: 0 20px 48px -34px rgba(8, 32, 60, 0.45);
}

.bgp-svc__spec::before {
	background: #ffd27a;
	color: #08203C;
}

.bgp-usecase-hero,
.bgp-anchor-hero {
	padding-block: clamp(34px, 4vw, 58px);
}

.bgp-anchor-hero .bgp-usecase-grid,
.bgp-usecase-hero .bgp-usecase-grid {
	align-items: start;
}

@media (min-width: 961px) {
	.bgp-editorial-hero__grid {
		align-items: center;
	}
}

@media (max-width: 960px) {
	body.bgp-body-template-active .bgp-template {
		margin-top: 0;
	}

	.bgp-editorial-hero {
		padding-block: 34px 46px;
	}

	.bgp-editorial-hero__count-num {
		text-shadow: 3px 3px 0 rgba(250, 159, 3, 0.32);
	}
}

@media (max-width: 600px) {
	.bgp-template > .bgp-breadcrumb .bgp-wrap {
		width: min(100% - 32px, 1320px);
		min-height: 44px;
		font-size: 13px;
		gap: 6px;
	}

	.bgp-editorial-hero__kicker {
		margin-bottom: 16px;
	}
}

/* ============================ 404 PAGE ===================================
 * Branded 404 template — same editorial chrome (Anton hero, tape strips,
 * depot contact slab) plus a 4×2 popular-routes grid + search box. Lives
 * inside .bgp-template so the navy/yellow tokens cascade.
 * ======================================================================== */

body.error404,
body.search-no-results {
	background:
		radial-gradient(circle at 92% 8%, rgba(250, 159, 3, .08), transparent 36rem),
		linear-gradient(180deg, #fffaf0 0%, #fbf7ec 32%, #ffffff 100%) !important;
}

body.error404 .wd-page-wrapper,
body.error404 .website-wrapper,
body.search-no-results .wd-page-wrapper,
body.search-no-results .website-wrapper {
	background: transparent !important;
}

body.error404 .main-page-wrapper,
body.error404 .wd-page-content,
body.search-no-results .main-page-wrapper,
body.search-no-results .wd-page-content {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	background: transparent !important;
}

body.error404 #main-content,
body.search-no-results #main-content {
	display: block !important;
}

/* Pre-empt Woodmart's page title bar on the search no-results state — our
 * branded template is the only h1 we want on that screen. */
body.search-no-results .page-title,
body.search-no-results .wd-page-title {
	display: none !important;
}

.bgp-404 {
	display: block;
}

.bgp-404 .bgp-editorial-hero__lede code {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.92em;
	background: rgba(8, 32, 60, 0.06);
	padding: 2px 8px;
	border-radius: 4px;
	color: #08203C;
}

.bgp-404-routes {
	padding-block: clamp(36px, 5vw, 64px);
}

.bgp-404-search {
	max-width: 720px;
	margin: 0 auto clamp(36px, 5vw, 56px);
}

.bgp-404-search label {
	display: block;
	margin-bottom: 8px;
}

.bgp-404-search__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	background: #fff;
	border: 1.5px solid rgba(8, 32, 60, 0.16);
	border-radius: 10px;
	padding: 6px;
	box-shadow: 0 18px 38px -28px rgba(8, 32, 60, 0.25);
}

.bgp-404-search input[type="search"] {
	border: 0;
	background: transparent;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 16px;
	padding: 12px 14px;
	color: #08203C;
	min-width: 0;
	width: 100%;
}

.bgp-404-search input[type="search"]:focus {
	outline: none;
}

.bgp-404-search button {
	background: #08203C;
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 12px 22px;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 180ms ease;
}

.bgp-404-search button:hover {
	background: #061A32;
}

.bgp-shelf-header--centered {
	text-align: center;
	max-width: none;
	margin: 0 auto clamp(20px, 3vw, 32px);
}

.bgp-404-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}

.bgp-404-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 50px 18px 22px;
	background: #fff;
	border: 1px solid rgba(8, 32, 60, 0.10);
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.bgp-404-card:hover,
.bgp-404-card:focus-visible {
	transform: translateY(-2px);
	border-color: #08203C;
	box-shadow: 0 16px 36px -20px rgba(8, 32, 60, 0.30);
}

.bgp-404-card__title {
	font-family: Anton, "Bebas Neue", Impact, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #08203C;
}

.bgp-404-card__sub {
	font-family: Manrope, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.45;
	color: #475569;
}

.bgp-404-card__arrow {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: #FA9F03;
	transition: transform 220ms ease;
}

.bgp-404-card:hover .bgp-404-card__arrow {
	transform: translate(3px, -50%);
}

/* ============================ SEARCH RESULTS PAGE =======================
 * Shared by both search.php states.
 *
 * No-results state: bigger editorial hero (Anton 88px H1, lede, refine
 * form inline) — there's no product shelf below it competing for visual
 * weight, so the framing should be bold.
 *
 * With-results state: tight 1-row title bar instead of the hero. Below
 * it, related-cats chips → product grid → refine + popular routes →
 * contact slab. Goal: get products and categories above the fold; push
 * the writeup / refine form / fallback routes BELOW the grid where they
 * read as secondary actions.
 * ======================================================================== */

body.search-results,
body.search-no-results {
	background:
		radial-gradient(circle at 92% 8%, rgba(250, 159, 3, .08), transparent 36rem),
		linear-gradient(180deg, #fffaf0 0%, #fbf7ec 32%, #ffffff 100%) !important;
}

body.search-results .wd-page-wrapper,
body.search-results .website-wrapper {
	background: transparent !important;
}

body.search-results .main-page-wrapper,
body.search-results .wd-page-content {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	background: transparent !important;
}

body.search-results #main-content {
	display: block !important;
}

body.search-results .page-title,
body.search-results .wd-page-title {
	display: none !important;
}

/* ----- COMPACT TITLE BAR (with-results state) -----
 * Single horizontal band — kicker on one line, H1 immediately below. Lives
 * where a hero would normally sit but compresses to ~120px max so the
 * product grid is visible without scrolling. */
.bgp-search-titlebar {
	padding-block: clamp(20px, 3vw, 36px) clamp(12px, 2vw, 18px);
}

.bgp-search-titlebar__kicker {
	display: block;
	margin-bottom: 8px;
	color: #1F2235;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.bgp-search-titlebar__h1 {
	margin: 0;
	color: #08203C;
	font-family: Anton, "Bebas Neue", Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.bgp-search-titlebar__h1 em {
	font-style: normal;
	color: #1F2235;
}

/* Numeric count gets the yellow underline highlight */
.bgp-search-titlebar__h1 > span {
	display: inline-block;
	padding: 0 .12em;
	background: linear-gradient(180deg, transparent 60%, rgba(250, 159, 3, 0.36) 60%);
}

/* ----- RELATED CATEGORIES — horizontal pill row, compact -----
 * Sits between title bar and product grid. No section header — the
 * inline "Related categories:" label is enough since the chips speak
 * for themselves. */
.bgp-search-cats {
	padding-block: clamp(4px, 1vw, 10px) clamp(12px, 2vw, 18px);
}

.bgp-search-cats__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.bgp-search-cats__label {
	color: #1F2235;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bgp-search-cats__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bgp-search-cat-pill {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 7px 14px;
	background: #fff;
	border: 1.5px solid rgba(8, 32, 60, 0.14);
	border-radius: 999px;
	color: #08203C;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.bgp-search-cat-pill small {
	color: #64748b;
	font-weight: 500;
	font-size: 11px;
}

.bgp-search-cat-pill:hover,
.bgp-search-cat-pill:focus-visible {
	border-color: #FA9F03;
	background: #fff8eb;
	transform: translateY(-1px);
}

/* ----- PRODUCT GRID — the page's primary content ----- */
.bgp-search-products {
	padding-block: clamp(12px, 2vw, 24px) clamp(36px, 5vw, 56px);
}

.bgp-search-products__h {
	margin: 0 0 clamp(14px, 2vw, 22px);
	color: #08203C;
	font-family: Manrope, system-ui, sans-serif;
	font-size: clamp(16px, 1.4vw, 18px);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bgp-search-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 22px;
}

@media (max-width: 600px) {
	.bgp-search-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 14px;
	}
}

.bgp-search-pagination {
	margin-top: clamp(28px, 4vw, 48px);
	text-align: center;
}

.bgp-search-pagination ul,
.bgp-search-pagination .page-numbers {
	display: inline-flex;
	gap: 4px;
	padding: 0;
	list-style: none;
}

.bgp-search-pagination .page-numbers li {
	list-style: none;
}

.bgp-search-pagination .page-numbers a,
.bgp-search-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid rgba(8, 32, 60, 0.12);
	border-radius: 6px;
	color: #08203C;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.bgp-search-pagination .page-numbers.current {
	background: #08203C;
	color: #fff;
	border-color: #08203C;
}

.bgp-search-pagination .page-numbers a:hover {
	border-color: #FA9F03;
}

/* ----- "Refine your search" + lede section (BELOW the products) ----- */
.bgp-search-refine-section {
	padding-block: clamp(36px, 5vw, 56px);
}

.bgp-search-refine-section .bgp-shelf-lede {
	max-width: 620px;
	margin: 10px auto 0;
	color: #475569;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
}

.bgp-search-refine-section .bgp-search-refine {
	margin: clamp(24px, 3.5vw, 32px) auto 0;
}

/* Refine-search form — shared by both states (no-results uses it inside
 * the editorial hero; with-results uses it inside .bgp-search-refine-section) */
.bgp-search-refine {
	max-width: 640px;
}

.bgp-search-refine__label {
	display: block;
	margin-bottom: 8px;
}

.bgp-search-refine__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	background: #fff;
	border: 1.5px solid rgba(8, 32, 60, 0.16);
	border-radius: 10px;
	padding: 6px;
	box-shadow: 0 18px 38px -28px rgba(8, 32, 60, 0.25);
}

.bgp-search-refine input[type="search"] {
	border: 0;
	background: transparent;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 16px;
	padding: 12px 14px;
	color: #08203C;
	min-width: 0;
	width: 100%;
}

.bgp-search-refine input[type="search"]:focus {
	outline: none;
}

.bgp-search-refine button {
	background: #08203C;
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 12px 22px;
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 180ms ease;
}

.bgp-search-refine button:hover {
	background: #061A32;
}

/* Legacy hero H1 highlight pill — kept for the no-results state which
 * still uses .bgp-editorial-hero__h1 directly */
.bgp-search-empty .bgp-editorial-hero__h1 > span {
	display: inline-block;
	padding: 0 .08em;
	background: linear-gradient(180deg, transparent 62%, rgba(250, 159, 3, 0.36) 62%);
}

/* "Other useful routes" — same .bgp-404-grid markup but smaller padding so
 * it reads as a secondary fallback, not the primary action */
.bgp-search-routes {
	padding-block: clamp(20px, 3vw, 36px);
}

.bgp-search-routes .bgp-404-card__title {
	font-size: 18px;
}

.bgp-search-routes .bgp-404-card__sub {
	font-size: 12px;
}

/* ========================================================================
 * Refills product-first rebuild (2026-06-11)
 * Hero intent actions + category chip row. Chips give one-tap routes to
 * each refillable category without scrolling past editorial content.
 * ======================================================================== */
.bgp-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.bgp-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
	max-width: 860px;
}

.bgp-chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 7px 15px;
	border: 1.5px solid rgba(8, 32, 60, .22);
	border-radius: 999px;
	background: #fff;
	color: var(--bgp-navy, #08203C);
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
}

.bgp-chip:hover,
.bgp-chip:focus-visible {
	border-color: var(--bgp-amber, #FA9F03);
	background: #FFF8EE;
	color: var(--bgp-navy, #08203C);
	transform: translateY(-1px);
}

/* Anchor jump from the hero "See refill prices" button lands clear of the
   sticky header. */
#bgp-refills-popular {
	scroll-margin-top: 120px;
}

@media (max-width: 680px) {
	.bgp-hero-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.bgp-hero-actions .bgp-btn {
		width: 100%;
		padding-inline: 10px;
	}

	.bgp-chip {
		min-height: 34px;
		font-size: 12.5px;
	}
}