/** Shopify CDN: Minification failed

Line 7238:45 Expected identifier but found whitespace
Line 7238:55 Unexpected bad string token
Line 7238:72 Unterminated string token

**/
.product-recommendations .section-resource-list__content {
    text-align: center;
    align-items: center;
}
.product-grid__card.product-grid__card {
    gap: 0;
}

slideshow-slide .product-media {
    background-color: #E9E9E9;
}
.product-media-container.media-fit img {
    padding: 40px 20px;
}

.product-card__content .text-block {
    min-height: 70px;
}
.product-recommendations slideshow-container {
    display: flex;
    flex-direction: column-reverse;
}
.product-recommendations slideshow-arrows {
    position: unset;
    display: block;
}
.product-recommendations slideshow-arrows .slideshow-control {
    opacity: 1;
    margin-left: 0;
    display: block;
    padding-top: 4px;
}
.product-recommendations .button:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.product-recommendations .resource-list__carousel .slideshow-control[disabled] {
    display: block;
}
.product-recommendations slideshow-arrows {
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180x;
    margin: 0 auto;
    padding-top: 25px;
}
.product-recommendations .resource-list__carousel{
    width: calc(100% - 40px);
    max-width: 1200px;
    margin: 0 auto;
}
.product-recommendations .product-media-container.media-fit.product-media-container--image{
  max-height: 250px;
  height: 100%;
}
 @media screen and (max-width: 749px) {
    .product-recommendations .resource-list__carousel {
        width: 100%;
        max-width: 100%;
    }
 }

/*  */
label,
label:focus,
label:focus-visible,
label:focus-within,
select,
select:focus,
select:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

input,
input:focus,
input:focus-visible {
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.page-width-menu {
  width: calc(100% - 40px);
  max-width: 1360px;
  margin: 0 auto;
}

.page-width {
    width: calc(100% - 40px);
    max-width: 1200px;
    margin: 0 auto;
}

@media screen and (max-width: 749px) {
    .page-width {
        width: 100%;
        max-width: 1200px;
    }
}

/* ============================================================
   BD Hero Showcase — bd-hero-showcase.liquid
   ============================================================ */

.bd-hs__inner {
  margin: 0 auto;
  padding: 72px var(--page-margin);
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
}

.bd-hs__panel {
  min-width: 0;
}

.bd-hs__panel--text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  border-radius: 24px;
  padding: 40px;
  background: var(--bhs-text-bg, #e5e5e6);
}

.bd-hs__panel--media {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.bd-hs__card {
  position: relative;
  flex: 1 1 auto;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bhs-media-bg, #d9d9da);
  /* Default / "Aspect ratio" mode (section setting height_mode). A fixed
     pixel height paired with cover-fit crops a different amount at every
     screen width, since the card's width is fluid but a fixed height
     isn't: very wide and short on a large desktop (crops the image's
     top/bottom), narrower and relatively tall on a 13" laptop (crops the
     image's left/right). aspect-ratio instead keeps the crop window's
     SHAPE constant at every width, so cover-fit always shows the same
     relative portion of the photo. --bhs-aspect-ratio is only emitted in
     this mode (see the section's inline style, sections/bd-hero-showcase.liquid);
     the 2.5 fallback here matches the actual uploaded slide images'
     native ~2.503:1 ratio (measured directly on the live images) for
     whenever the CSS var is missing for any reason.
     ".bd-hs--fixed-height .bd-hs__card" below overrides this back to the
     old fixed-height behavior when a merchant opts into that instead. */
  aspect-ratio: var(--bhs-aspect-ratio, 2.5);
  /* min-height: var(--bhs-min-height, 580px); */
}

.bd-hs--fixed-height .bd-hs__card {
  aspect-ratio: none;
  min-height: var(--bhs-min-height, 580px);
}

.bd-hs__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bd-hs__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  /* opacity:0 hides a slide but does NOT stop it receiving clicks. All nine
     are stacked in the same box, so the last one in the DOM sat invisibly
     over the visible one and answered for it — hovering the image gave the
     hanging-banners link while the button showed tension-media-wall.
     Only the slide on screen should be interactive. */
  pointer-events: none;
}

.bd-hs__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.bd-hs__slide picture {
  width: 100%;
  height: 100%;
}

.bd-hs__slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.bd-hs__slide-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
}

.bd-hs__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bd-hs__heading h1 {
  margin: 0 0 20px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -2%;
  color: #0A3161;
}

.bd-hs__heading p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.bd-hs__desc {
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.6;
  color: #484848;
}

.bd-hs__desc p { margin: 0; }

.bd-hs__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  border-radius: 999px;
  background: #B31942;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.bd-hs__cta:hover {
  opacity: .9;
  border: 1.5px solid #FFFFFF;
  background: #9f153aff;
  backdrop-filter: blur(9px);
}

.bd-hs__media-cta {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
}

.bd-hs__video {
  width: 100%;
}

.bd-hs__video-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  padding: 12px;
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  transition: background 0.22s ease, border-color 0.22s ease;
  border: 1px solid #FFFFFF1A;
  background: #0000001A;
  backdrop-filter: blur(40px);
}

.bd-hs__video-btn:hover {
  background: #f5f5f6;
}

.bd-hs__video-thumb {
  flex-shrink: 0;
  width: 160px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(11, 42, 82, 0.08);
}

.bd-hs__video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bd-hs__video-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.bd-hs__video-title {
  font-size: 15px;
  font-weight: 600;
  color: #0A3161;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bd-hs__video-watch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(16, 24, 40, 0.55);
}

.bd-hs__video-play {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #B31942;
  color: #fff;
}

.bd-hs__video-play svg {
  margin-left: 2px;
}

.bd-hs__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: center;
  position: absolute;
  bottom: 20px;
  backdrop-filter: blur(9px);
  background: #00000047;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #FFFFFF;
}

.bd-hs__arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.15);
  color: #0b2a52;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.bd-hs__arrow:hover {
  background: #f2f2f2;
}

.bd-hs__dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bd-hs__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(10, 49, 97, 0.18);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  transition: width 0.3s ease, background 0.2s ease;
}

.bd-hs__dot.is-active {
  width: 90px;
  background: rgba(10, 49, 97, 0.18);
}

.bd-hs__dot-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: #FFFFFF;
  border-radius: inherit;
}

@media screen and (max-width: 1200px) {
  .bd-hs__inner { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
}

@media screen and (max-width: 989px) {
  .bd-hs__inner {
    grid-template-columns: 1fr;
    padding: 40px var(--page-margin);
    gap: 24px;
  }

  .bd-hs__panel--text {
    padding: 0;
    background: transparent;
    text-align: center;
    align-items: center;
  }

  .bd-hs__content { align-items: center; }

  .bd-hs__heading h1 { font-size: 28px; }
  .bd-hs__desc    { max-width: 100%; margin-bottom: 24px; font-size: 16px; }
  .bd-hs__video { display: none; }

  /* .bd-hs__card { min-height: 380px; } */
  /* Aspect-ratio mode (default) keeps using aspect-ratio here too — no                                                                   
   min-height floor, so mobile stays crop-free the same way desktop                                                                     
   does. Fixed-height mode keeps its own separate, smaller mobile value                                                                 
   instead of the desktop one. */                                                                                                       
    .bd-hs--fixed-height .bd-hs__card { min-height: 380px; } 
    
    .bd-hs__card {
      aspect-ratio: 1;
    }

  .bd-hs__media-cta { bottom: 20px; }
  .bd-hs__nav {
    position: unset;
    padding: 6px 10px;
  }
}

/* ── Video modal (shared component — used by any section with a
   [data-bh-video-wrap]/[data-bh-video-trigger] pair; see bdVideoModalInit
   in custom.js) ── */
.bd-video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.bd-video-modal[hidden] {
  display: none;
}

.bd-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

.bd-video-modal__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}

.bd-video-modal__body,
.bd-video-modal__body video,
.bd-video-modal__body iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.bd-video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.bd-video-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.65);
}

body.bh-video-modal-open {
  overflow: hidden;
}

@media screen and (max-width: 749px) {
  .bd-video-modal__close { top: -40px; }
}


/* ============================================================
   BD shop collection category CSS
   ============================================================ */

.bd-cat-bento__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px var(--page-margin);
}

.bd-cat-bento__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  margin: 0 0 40px;
}

.bd-cat-bento__heading {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  color: #0A3161;
}

.bd-cat-bento__desc {
  margin: 0;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.6;
  color: #484848;
}

.bd-cat-bento__desc p { margin: 0; }

.bd-cat-bento__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.bd-cat-bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  grid-column: span 1;
  min-height: 280px;
  padding: 28px;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: background-color 0.35s ease;
  border: 1px solid #EBEBEB;
  box-shadow: 0px 1px 2px 0px #0A0D1408;
}

/* Resting-state card backgrounds — .bd-cat-bento__default-img (below)
   sits on top of these, showing a product cutout without needing a
   hover. .bd-cat-bento__bg is the separate, distinct image that only
   shows once you actually hover the card (see the reveal rules further
   down), replacing the gradient + default image entirely. */
.bd-cat-bento__card--neutral {
  background: linear-gradient(338deg, #fff, #b9ccf7);
}

.bd-cat-bento__card--accent {
  background: linear-gradient(135deg, #C41E42 0%, #7A1030 100%);
}

.bd-cat-bento__default-img {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
  margin-top: 20px;
}

.bd-cat-bento__default-img img {
  max-width: 72%;
  max-height: 72%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.bd-cat-bento__card:hover .bd-cat-bento__default-img,
.bd-cat-bento__card:focus-visible .bd-cat-bento__default-img {
  opacity: 0;
}

.bd-cat-bento__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.bd-cat-bento__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.bd-cat-bento__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #B31942;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.bd-cat-bento__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bd-cat-bento__title {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--bd-cat-heading-color, #171717);
  transition: color 0.3s ease;
}

.bd-cat-bento__sub {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(11, 42, 82, 0.55);
  transition: color 0.3s ease;
}

.bd-cat-bento__card--accent .bd-cat-bento__sub {
  color: rgba(255, 255, 255, 0.75);
}

.bd-cat-bento__arrow {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 20px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #0b2a52;
  flex-shrink: 0;
}

.bd-cat-bento__see-all {
  display: none;
}

/* Hovered/focused card grows into two columns */
.bd-cat-bento__card:is(:hover, :focus-visible) {
  grid-column: span 2;
  z-index: 1;
}

/* 4-column layout: hide the card being covered so nothing reflows */
@media screen and (min-width: 990px) {
  /* not the right-edge card → grows right → hide the NEXT card */
  .bd-cat-bento__card:not(:nth-child(4n)):is(:hover, :focus-visible) + .bd-cat-bento__card {
    display: none;
  }
  /* right-edge card (every 4th) → grows left → hide the PREVIOUS card */
  .bd-cat-bento__card:has(+ .bd-cat-bento__card:nth-child(4n):is(:hover, :focus-visible)) {
    display: none;
  }
}

/* 2-column layout: same idea, edge is every 2nd card */
@media screen and (max-width: 989px) {
  .bd-cat-bento__card:nth-child(odd):is(:hover, :focus-visible) + .bd-cat-bento__card {
    display: none;
  }
  .bd-cat-bento__card:has(+ .bd-cat-bento__card:nth-child(even):is(:hover, :focus-visible)) {
    display: none;
  }
}

.bd-cat-bento__card:hover .bd-cat-bento__bg,
.bd-cat-bento__card:focus-visible .bd-cat-bento__bg {
  opacity: 1;
}

.bd-cat-bento__card:hover .bd-cat-bento__overlay,
.bd-cat-bento__card:focus-visible .bd-cat-bento__overlay {
  opacity: 0.78;
}

.bd-cat-bento__card:hover .bd-cat-bento__title,
.bd-cat-bento__card:hover .bd-cat-bento__sub,
.bd-cat-bento__card:focus-visible .bd-cat-bento__title,
.bd-cat-bento__card:focus-visible .bd-cat-bento__sub {
  color: #fff;
}

@media screen and (max-width: 989px) {
  .bd-cat-bento__grid { grid-template-columns: repeat(2, 1fr); }
}


@media screen and (max-width: 749px) {
  .bd-cat-bento__inner  { padding: 48px var(--page-margin); }
  .bd-cat-bento__grid   { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bd-cat-bento__card   { min-height: 160px; padding: 20px 10px; border-radius: 12px; }
  .bd-cat-bento__heading{ font-size: 26px; }
  .bd-cat-bento__title  { font-size: 16px; font-weight: 600;}
  .bd-cat-bento__sub {
    font-size: 12px;
  }
  .bd-cat-bento__default-img {
    opacity: 0;
  }
  .bd-cat-bento__arrow  { width: 30px; height: 30px; right: 14px; bottom: 14px; }
  .bd-cat-bento__bg {
    opacity: 1;
  }
  .bd-cat-bento__overlay {
    opacity: 0.78;
  }
  .bd-cat-bento__title,
  .bd-cat-bento__sub {
    color: #fff;
  }
  .bd-cat-bento__card--extra {
    display: none;
  }

  .bd-cat-bento__grid.is-expanded .bd-cat-bento__card--extra {
    display: flex;
  }

  .bd-cat-bento__see-all {
    display: block;
    width: fit-content;
    margin-top: 20px;
    color: #B31942;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    background: none;
    border: none;
    border-bottom: 1px solid #B31942;
    margin: 20px auto;
    display: flex;
    gap: 6px;
  }

  .bd-cat-bento__see-all[hidden] {
    display: none;
  }
}


/* Marque bar CSS */
.marquee-bar {
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  padding: 18px 0;
}

.marquee-bar__track {
  display: flex;
  width: max-content;
  animation: marquee var(--speed) linear infinite;
}

.marquee-bar__content {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee-bar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 80px;
  white-space: nowrap;
}

.marquee-bar__item img,
.marquee-bar__icon svg {
  width: 40px;
  height: 40px;
  display: block;
}

.marquee-bar__item span {
  font-size: 24px;
  line-height: 100%;
}

.marquee-bar__icon svg {
  fill: currentColor;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.marquee-bar:hover .marquee-bar__track {
  animation-play-state: paused;
}

@media screen and (max-width: 749px) {
  .marquee-bar {
    padding: 12px 0;
  }

  .marquee-bar__item {
    gap: 10px;
    margin-right: 48px;
  }

  .marquee-bar__item img,
  .marquee-bar__icon svg {
    width: 30px;
    height: 30px;
  }

  .marquee-bar__item span {
    font-size: 16px;
  }
}

/* Booth-collection- showcase
   Every color comes from the section settings: --section-bg, --booth-text, --booth-accent,
   --booth-accent-text and --booth-card are set inline by sections/booth-collection-showcase.liquid.
   The in-between shades are mixed from those, so changing a setting re-tints the whole section. */

.booth-showcase {
  --booth-muted: color-mix(in srgb, var(--booth-text) 86%, var(--section-bg));
  --booth-soft: color-mix(in srgb, var(--booth-text) 78%, var(--section-bg));
  --booth-label: color-mix(in srgb, var(--booth-text) 68%, var(--section-bg));
  --booth-row-bg: color-mix(in srgb, var(--booth-text) 6%, var(--section-bg));
  --booth-row-hover: color-mix(in srgb, var(--booth-text) 12%, var(--section-bg));
  --booth-row-border: color-mix(in srgb, var(--booth-text) 28%, var(--section-bg));
  --booth-solid: color-mix(in srgb, var(--booth-text) 2%, var(--section-bg));
  --booth-outline: color-mix(in srgb, var(--booth-text) 70%, var(--section-bg));
  --booth-grid: color-mix(in srgb, var(--booth-text) 7%, transparent);
  --booth-accent-hover: color-mix(in srgb, var(--booth-accent) 68%, black);

  background-color: var(--section-bg);
  background-image:
    linear-gradient(var(--booth-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--booth-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--booth-text);
}

.booth-showcase__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 28px;
  color: var(--booth-text);
}

.booth-showcase__heading {
  margin: 0;
  color: inherit;
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.booth-showcase__description {
  color: var(--booth-muted);
  font-size: 16px;
  line-height: 1.5;
}

.booth-showcase__description p,
.booth-showcase__tab-title p,
.booth-showcase__title p,
.booth-showcase__text p {
  margin: 0;
}

/* Desktop: image card on the left, size rows + kit text + buttons on the right */
.booth-showcase__wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 24px;
  row-gap: 10px;
}

.booth-showcase__image-wrapper {
  grid-column: 1;
  grid-row: 1 / -1;
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  background: var(--booth-card);
}

.booth-showcase__image {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
}

.booth-showcase__image.is-active {
  opacity: 1;
  visibility: visible;
}

.booth-showcase__img,
.booth-showcase__image > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.booth-showcase__tabs-label,
.booth-showcase__tab-short,
.booth-showcase__title,
.booth-showcase__view-arrow {
  display: none;
}

.booth-showcase__tabs {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.booth-showcase__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--booth-row-border);
  border-radius: 14px;
  background: var(--booth-row-bg);
  color: var(--booth-text);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.booth-showcase__tab:hover {
  background: var(--booth-row-hover);
}

.booth-showcase__tab.is-active {
  border-color: var(--booth-text);
  background: var(--booth-text);
  color: var(--section-bg);
}

.booth-showcase__tab-chevron {
  flex: none;
}

.booth-showcase__footer {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
}

.booth-showcase__content {
  position: relative;
  margin-top: 8px;
}

.booth-showcase__content-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}

.booth-showcase__content-item.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.booth-showcase__title {
  margin: 0 0 4px;
  color: var(--booth-text);
}

.booth-showcase__text {
  color: var(--booth-soft);
  font-size: 14px;
  line-height: 1.5;
}

.booth-showcase__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

.booth-showcase .booth-showcase__buttons .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  box-shadow: none;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}

/* Solid fill so the grid lines don't show through the outline button */
.booth-showcase .booth-showcase__view-more {
  border: 1.5px solid var(--booth-outline);
  background: var(--booth-solid);
  color: var(--booth-text);
}

.booth-showcase .booth-showcase__view-more:hover {
  border-color: var(--booth-outline);
  background: var(--booth-row-hover);
  color: var(--booth-text);
}

.booth-showcase .booth-showcase__expert {
  padding: 0 22px;
  border: 0;
  background: var(--booth-accent);
  color: var(--booth-accent-text);
}

.booth-showcase .booth-showcase__expert:hover {
  border: 0;
  background: var(--booth-accent-hover);
  color: var(--booth-accent-text);
}

/* Tablets: the image takes the full width, the size rows and buttons sit under it */
@media screen and (max-width: 989px) {
  .booth-showcase__wrapper {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 16px;
  }

  .booth-showcase__image-wrapper,
  .booth-showcase__tabs,
  .booth-showcase__footer {
    grid-column: 1;
    grid-row: auto;
  }

  .booth-showcase__content {
    margin-top: 0;
  }
}

/* Phones: heading, size tabs, image card, kit name, then full-width buttons
   (the "size tabs" design). Everything stays in the same DOM; order does the reshuffle. */
@media screen and (max-width: 749px) {
  .booth-showcase {
    padding: var(--page-margin);
  }

  .booth-showcase__header {
    gap: 8px;
    margin: 0 0 22px;
  }

  .booth-showcase__heading {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .booth-showcase__description {
    color: var(--booth-soft);
    font-size: 15px;
    line-height: 1.55;
  }

  .booth-showcase__wrapper {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .booth-showcase__tabs-label {
    display: block;
    order: 1;
    margin: 0 0 -12px;
    color: var(--booth-label);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .booth-showcase__tabs {
    order: 2;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .booth-showcase__tab {
    justify-content: center;
    min-height: 0;
    height: 46px;
    padding: 0;
    border-color: color-mix(in srgb, var(--booth-text) 20%, var(--section-bg));
    border-radius: 10px;
    background: var(--booth-solid);
    color: color-mix(in srgb, var(--booth-text) 90%, var(--section-bg));
    font-size: 14px;
    font-weight: 500;
  }

  .booth-showcase__tab.is-active {
    border: 1.5px solid var(--booth-text);
    background: var(--booth-text);
    color: var(--section-bg);
    font-weight: 700;
  }

  .booth-showcase__tab-title,
  .booth-showcase__tab-chevron {
    display: none;
  }

  .booth-showcase__tab-short {
    display: block;
    white-space: nowrap;
  }

  .booth-showcase__image-wrapper {
    order: 3;
    aspect-ratio: 4 / 3;
    border: 10px solid var(--booth-card);
    border-radius: 18px;
  }

  /* Whole kit visible in the squarer phone frame */
  .booth-showcase__img {
    object-fit: contain;
  }

  .booth-showcase__footer {
    order: 4;
    gap: 22px;
  }

  .booth-showcase__title {
    display: block;
    font-size: 21px;
    line-height: 1.3;
  }

  .booth-showcase__buttons {
    flex-direction: column;
    flex-wrap: nowrap;
    margin-top: 0;
    padding-top: 0;
  }

  .booth-showcase .booth-showcase__buttons .button {
    width: 100%;
    min-height: 50px;
    font-weight: 600;
  }

  .booth-showcase__view-arrow {
    display: block;
  }
}


/* ============================================================
   BD Testimonial Videos — bd-testimonial-video.liquid
   ============================================================ */

.bd-tv__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--page-margin);
}

.bd-tv__header {
  /* max-width: 640px; */
  margin: 0 auto 48px;
  text-align: center;
}

.bd-tv__heading {
  margin: 0 0 16px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  color: #0A3161;
}

.bd-tv__heading p { margin: 0; }

.bd-tv__desc {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #484848;
}

.bd-tv__desc p { margin: 0; }

/* Scroll-snap track sized so exactly 1.5 slides sit in the viewport: each
   slide is (100% - one gap) / 1.5 wide, so the active slide fills roughly
   two thirds of the track and the next one peeks in at half its own width.
   Capped to a narrower max-width than .bd-tv__inner — the cards are
   portrait (9:16, sized for phone-shot testimonial video), so sizing them
   off the full section width would make them enormous. */
.bd-tv__track {
  display: flex;
  gap: 24px;
  /* max-width: 640px; */
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.bd-tv__track::-webkit-scrollbar {
  display: none;
}

.bd-tv__slide {
  flex: 0 0 calc((100% - 24px) / 1.5);
  min-width: 0;
  /* center, not start: past the first slide (which the browser naturally
     clamps flush to the left, since there's nothing before it to center
     against) every later slide snaps centered with the previous and next
     both peeking in, instead of only ever peeking on the right. */
  scroll-snap-align: center;
}

.bd-tv__card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #e5e5e6;
  filter: blur(0);
  opacity: 1;
  transition: filter 0.35s ease, opacity 0.35s ease;
}

.bd-tv__card picture {
  width: 100%;
  height: 100%;
}

/* .is-active is kept in sync with which slide is most visible in the
   track by bdTestimonialVideoInit() in custom.js (IntersectionObserver,
   root: the track itself) — every other slide gets blurred/dimmed. */
.bd-tv__slide:not(.is-active) .bd-tv__card {
  filter: blur(6px);
  opacity: 0.55;
}

.bd-tv__slide:not(.is-active) .bd-tv__caption {
  opacity: 0.45;
  transition: opacity 0.35s ease;
}

.bd-tv__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bd-tv__play {
  position: absolute;
  z-index: 1;
  left: 20px;
  bottom: 20px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: #fffefe73;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.bd-tv__play svg {
  margin-left: 3px;
}

.bd-tv__play:hover {
  background: rgba(0, 0, 0, 0.65);
  transform: scale(1.05);
}

.bd-tv__caption {
  margin-top: 16px;
}

.bd-tv__name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0A3161;
}

.bd-tv__role {
  margin: 4px 0 0;
  font-size: 14px;
  color: rgb(10 49 97 / 0.6);
}

.bd-tv__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.bd-tv__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgb(10 49 97 / 0.15);
  background: #fff;
  color: #0A3161;
  cursor: pointer;
  transition: background 0.2s ease;
}

.bd-tv__arrow:hover {
  background: #f2f2f2;
}

.bd-tv__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media screen and (max-width: 989px) {
  .bd-tv__slide {
    flex-basis: calc((100% - 20px) / 1.35);
  }

  .bd-tv__heading {
    font-size: 30px;
  }
}

@media screen and (max-width: 749px) {
  .bd-tv__header {
    margin-bottom: 32px;
  }

  .bd-tv__track {
    gap: 14px;
  }

  .bd-tv__slide {
    flex-basis: 82%;
  }

  .bd-tv__heading {
    font-size: 26px;
  }

  .bd-tv__card {
    aspect-ratio: 9 / 16;
  }

  .bd-tv__play {
    width: 44px;
    height: 44px;
    left: 14px;
    bottom: 14px;
  }
}


/* * ============================================================
   BD Value Strip — bd-value-strip.liquid
   ============================================================ */
.bd-value-strip__inner {
  margin: 0 auto;
  padding: 72px 0;
}

.bd-value-strip__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 auto 60px;
  text-align: center;
}

.bd-value-strip__heading {
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  color: #1A1C1C;
}

.bd-value-strip__desc {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #484848;
}

.bd-value-strip__desc p { margin: 0; }

.bd-value-strip__grid {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  /* height: 420px; */
}

.bd-value-strip__tile {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1.5;
  border-radius: 16px;
  overflow: hidden;
  background: #ececec;
  transform: scale(1);
  transform-origin: center;
  z-index: 1;
  transition: transform 0.4s ease, box-shadow 0.4s ease, z-index 0s 0.4s;
}

.bd-value-strip__media {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bd-value-strip__media img,
.bd-value-strip__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bd-value-strip__placeholder {
  opacity: 0.15;
}

/* The whole tile scales — not just the image inside it — so the pop
   is obvious and it visually overlaps its neighbours instead of just
   cropping tighter into the same frame. Tiles stay flex items (their
   layout slot never changes), so nothing else in the row moves. */
.bd-value-strip__tile--featured {
  transform: scale(1.12);
  z-index: 2;
  box-shadow: 0 20px 40px rgba(16, 24, 40, 0.2);
  transition: transform 0.4s ease, box-shadow 0.4s ease, z-index 0s;
}

.bd-value-strip__tile:hover {
  transform: scale(1.12);
  z-index: 3;
  box-shadow: 0 20px 40px rgba(16, 24, 40, 0.2);
  transition: transform 0.4s ease, box-shadow 0.4s ease, z-index 0s;
}

/* Hovering a different tile hands the pop over to it: the featured
   tile drops back to its normal size for as long as that hover lasts. */
.bd-value-strip__grid:has(.bd-value-strip__tile:hover):not(:has(.bd-value-strip__tile--featured:hover)) .bd-value-strip__tile--featured {
  transform: scale(1);
  z-index: 1;
  box-shadow: none;
}

@media screen and (max-width: 989px) {
  .bd-value-strip__grid { height: 320px; gap: 14px; }
}

/* Hidden on mobile per design — this is a desktop-only section. */
@media screen and (max-width: 749px) {
  .bd-value-strip {
    display: none;
  }
}

/* =========================================================
   BD OCCASIONS / USE CASES
========================================================= */

.bd-occasions {
  overflow-x: hidden;
}

.bd-occasions__inner {
  margin: 0 auto;
  padding: 72px var(--page-margin);
  /* margin-left: max(20px, calc((100vw - 1280px) / 2)); */
  max-width: 1280px;
}


/* =========================================================
   HEADER
========================================================= */

.bd-occasions__header {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0 0 40px;
}

.bd-occasions__header-left,
.bd-occasions__header-right {
  flex: 1 1 0;
  min-width: 0;
}

.bd-occasions__eyebrow {
  margin: 0 0 12px;

  font-size: 14px;
  font-weight: 600;

  color: #b31942;
}

.bd-occasions__heading {
  margin: 0;

  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;

  color: #0b2a52;
}

.bd-occasions__desc {
  margin: 0;

  font-size: 15px;
  line-height: 1.6;

  color: rgba(16, 24, 40, 0.6);
}

.bd-occasions__desc p {
  margin: 0;
}


/* =========================================================
   SLIDER
========================================================= */

.bd-occasions__track-wrap {
  overflow: hidden;
  min-width: 0;
}

.bd-occasions__track {
  display: flex;
  gap: 20px;

  margin: 0;
  padding: 0;

  list-style: none;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bd-occasions__track::-webkit-scrollbar {
  display: none;
}

.bd-occasions__card-wrap {
  /* flex: 0 0 calc((100% - 2 * 20px) / 3.3); */
  flex: 0 0 calc((96%) / 3);
  min-width: 0;
  scroll-snap-align: start;
}


/* =========================================================
   CARD
========================================================= */

.bd-occasions__card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 400px;

  padding: 0;

  border-radius: 28px;

  overflow: hidden;

  background: #f4f4f4;

  transition: background-color 0.4s ease;
  border: 1px solid #DCDCDC;
    
}


/* =========================================================
   IMAGE
========================================================= */

.bd-occasions__bg {
  position: absolute;
  z-index: 0;

  top: 0;
  left: 0;
  right: 0;

  height: 60%;

  margin: 0;

  border-radius: 0;

  overflow: hidden;

  opacity: 1;

  transition:
    opacity 0.4s ease,
    height 0.4s ease;
}

.bd-occasions__bg img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================================
   IMAGE FADE
========================================================= */

.bd-occasions__bg::after {
  content: '';

  position: absolute;
  z-index: 1;

  left: 0;
  right: 0;
  bottom: -1px;

  height: 45%;

  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(244, 244, 244, 0) 0%,
    rgba(244, 244, 244, 0.35) 35%,
    rgba(244, 244, 244, 0.82) 70%,
    #f4f4f4 100%
  );

  transition: opacity 0.4s ease;
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.bd-occasions__overlay {
  position: absolute;
  z-index: 1;

  inset: 0;

  background: #0b3161;

  opacity: 0;

  transition: opacity 0.4s ease;
}


/* =========================================================
   CONTENT
========================================================= */

.bd-occasions__content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;

  justify-content: flex-end;

  min-height: 42%;

  margin-top: auto;

  padding: 0 40px 20px;
}


/* =========================================================
   TAG
========================================================= */

.bd-occasions__tag {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #b31942;
  transition: color 0.3s ease;
}


/* =========================================================
   CARD HEADING
========================================================= */

.bd-occasions__card-heading {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.1;
  color: #0A3161;
  transition: color 0.3s ease;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.bd-occasions__card-desc {
  margin: 0;

  max-height: 0;

  overflow: hidden;

  font-size: 14px;
  line-height: 1.6;

  color: rgba(255, 255, 255, 0.8);

  opacity: 0;

  transition:
    max-height 0.4s ease,
    opacity 0.3s ease,
    margin-top 0.4s ease;
}

.bd-occasions__card-desc p {
  margin: 0;
}


/* =========================================================
   CTA
========================================================= */

.bd-occasions__cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  margin-left: 40px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: #B31942;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  transition:
    max-width 0.35s ease,
    width 0.35s ease,
    border-radius 0.35s ease;
}

.bd-occasions__cta-label {
  max-width: 0;
  padding-left: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transition:
    opacity 0.25s ease,
    padding-left 0.35s ease,
    max-width 0.35s ease;
}

.bd-occasions__cta-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}


/* =========================================================
   DESKTOP HOVER STATE
========================================================= */

.bd-occasions__card:hover,
.bd-occasions__card:focus-visible {
  background-color: #0b0b0f;
}

.bd-occasions__card:hover .bd-occasions__bg::after,
.bd-occasions__card:focus-visible .bd-occasions__bg::after {
  opacity: 0;
}

.bd-occasions__card:hover .bd-occasions__overlay,
.bd-occasions__card:focus-visible .bd-occasions__overlay {
  opacity: 0.72;
}
.bd-occasions__card:hover .bd-occasions__bg,
.bd-occasions__card:focus-visible .bd-occasions__bg,
.bd-occasions__card.is-active .bd-occasions__bg {
  height: 100%;
}

.bd-occasions__card:hover .bd-occasions__content,
.bd-occasions__card:focus-visible .bd-occasions__content {
  justify-content: flex-start;

  padding-top: 40px;
}

.bd-occasions__card:hover .bd-occasions__tag,
.bd-occasions__card:focus-visible .bd-occasions__tag {
  color: #ff6f91;
}

.bd-occasions__card:hover .bd-occasions__card-heading,
.bd-occasions__card:focus-visible .bd-occasions__card-heading {
  color: #fff;
}

.bd-occasions__card:hover .bd-occasions__card-desc,
.bd-occasions__card:focus-visible .bd-occasions__card-desc {
  max-height: 160px;

  margin-top: 12px;

  opacity: 1;
}

.bd-occasions__card:hover .bd-occasions__cta,
.bd-occasions__card:focus-visible .bd-occasions__cta {
  width: 140px;
  max-width: 140px;

  border-radius: 999px;
}

.bd-occasions__card:hover .bd-occasions__cta-label,
.bd-occasions__card:focus-visible .bd-occasions__cta-label {
  max-width: 160px;

  padding-left: 20px;

  opacity: 1;
}


/* =========================================================
   NAVIGATION ARROWS
========================================================= */

.bd-occasions__nav {
  display: flex;
  justify-content: flex-end;

  gap: 10px;

  margin-top: 24px;
}

.bd-occasions__arrow {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;

  border: 1.5px solid rgba(11, 42, 82, 0.25);
  border-radius: 50%;

  background: transparent;
  color: #0b2a52;

  cursor: pointer;

  flex-shrink: 0;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.bd-occasions__arrow:hover {
  background: rgba(11, 42, 82, 0.08);

  border-color: rgba(11, 42, 82, 0.4);
}

.bd-occasions__arrow[disabled] {
  opacity: 0.35;

  cursor: default;
  pointer-events: none;
}


/* =========================================================
   DOTS
========================================================= */

.bd-occasions__dots {
  display: none;

  justify-content: center;
  align-items: center;

  gap: 8px;

  margin-top: 28px;
}

.bd-occasions__dot {
  width: 8px;
  height: 8px;

  padding: 0;

  border: none;
  border-radius: 999px;

  background: rgba(11, 42, 82, 0.2);

  cursor: pointer;

  transition:
    background 0.2s ease,
    width 0.25s ease;

  flex-shrink: 0;
}

.bd-occasions__dot.is-active {
  width: 26px;

  background: #b31942;
}

@media screen and (max-width: 989px) {
  .bd-occasions__card-wrap { flex-basis: calc((100% - 20px) / 2); }
}

@media screen and (max-width: 749px) {
  .bd-occasions__inner {
    padding: 48px var(--page-margin);
  }

  .bd-occasions__header {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  .bd-occasions__header-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bd-occasions__heading {
    font-size: 26px;
  }

  .bd-occasions__card-wrap {
    flex-basis: 82%;
  }

  .bd-occasions__card {
    scroll-snap-align: center;
    min-height: 400px;
  }
  .bd-occasions__nav { display: none; }
  .bd-occasions__dots { display: flex; }

  .bd-occasions__card.is-active {
    background-color: #0b0b0f;
    justify-content: space-evenly;
  }

  .bd-occasions__card.is-active .bd-occasions__bg { opacity: 1; }
  .bd-occasions__card.is-active .bd-occasions__overlay { opacity: 0.72; }
  .bd-occasions__card.is-active .bd-occasions__tag { color: #ff6f91; }
  .bd-occasions__card.is-active .bd-occasions__card-heading { color: #fff; }

  .bd-occasions__card.is-active .bd-occasions__card-desc {
    max-height: 160px;
    opacity: 1;
    margin-top: 4px;
  }

  .bd-occasions__card.is-active .bd-occasions__cta { max-width: 140px; }
  .bd-occasions__card.is-active .bd-occasions__cta-label {
    max-width: 160px;
    opacity: 1;
    padding-left: 20px;
  }
} 

/* ============================================================
   BD video-text section css
   ============================================================ */

.bd-order {
  background: var(--bd-order-bg);
}
.bd-order__inner {
  padding-top: 80px;
  padding-bottom: 50px;
}
.bd-order__card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(16, 24, 40, 0.08);
  max-width: 1250px;
  margin: 0 auto;
  padding: var(--page-margin);
}

.bd-order__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 50px;
}

.bd-order__heading {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  color: #0A3161;
  max-width: 400px;
  letter-spacing: -2px;
}

.bd-order__desc {
  margin: 0;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: 0px;
  color: #484848;
}

.bd-order__desc p { margin: 0; }

.bd-order__media {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #e2e2e2;
}

.bd-order__media-frame {
  position: absolute;
  inset: 0;
}

.bd-order__media-frame picture {
  width: 100%;
  height: 100%;
}

.bd-order__media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The video is appended directly into .bd-order__media (replacing the
   poster) by bdOrderShowcaseInit(), so it needs to fill the same frame. */
.bd-order__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bd-order__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 36px;
  padding: 18px 22px 18px 30px;
  border-radius: 999px;
  background: #FFFFFF6B;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1.25px solid #E4E2DD;
  color: #10233f;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  

}

.bd-order__play:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translate(-50%, -50%) scale(1.03);
}

.bd-order__play-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.bd-order__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 800px;
  margin: 0 auto;
}

.bd-order__feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 0 48px;
  text-align: center;
  border-left: 1px solid rgba(16, 24, 40, 0.1);
}

.bd-order__feature:first-child {
  border-left: none;
}

.bd-order__feature:last-child {
  padding-right: 0;
}

.bd-order__feature-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #10233f;
  margin-bottom: 4px;
}

.bd-order__feature-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.bd-order__feature-heading {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #10233f;
}

.bd-order__feature-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(16, 24, 40, 0.6);
  text-align: left;
}

@media screen and (max-width: 989px) {
  .bd-order__card { padding: 36px 28px; gap: 32px; }
  .bd-order__feature {
    padding: 0 20px;
  }
}

@media screen and (max-width: 749px) {
  .bd-order__inner { padding: 48px var(--page-margin); }

  .bd-order__card {
    padding: 0;
    gap: 28px;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
  }

  .bd-order__heading { 
    font-size: 24px; 
    letter-spacing: normal;
    line-height: normal;
  }

  .bd-order__media { border-radius: 16px; aspect-ratio: 4 / 5; }
  
   /* Poster is portrait on mobile, but the video itself should play
     landscape — bdOrderShowcaseInit() (custom.js) adds this class the
     moment the video replaces the poster. */
  .bd-order__media.is-playing { aspect-ratio: 16 / 9; }

  .bd-order__play {
    gap: 20px;
    padding: 14px 18px 14px 22px;
    font-size: 15px;
    white-space: nowrap;
  }
  .bd-order__play-icon {
    padding-right: 16px;
  }
  .bd-order__features {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .bd-order__feature {
    border-left: none;
    padding: 24px 0 0;
    border-top: 1px solid rgba(16, 24, 40, 0.1);
    align-items: center;
  }

  .bd-order__feature:first-child {
    padding-top: 0;
    border-top: none;
  }
}

/* ==========================================================
   BD Featured Product Slider
   ========================================================== */
.bd-product-slider_container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: var(--page-margin);
}
.bd-product-slider {
  overflow: hidden;
}

.bd-feat-col__section-heading {
  margin: 0 0 40px;
  font-size: 2.6rem;
  font-weight: 700;
  color: #0A3161;
  text-align: center;
}

.bd-product-slider__wrapper {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  box-sizing: border-box;
}

/*Left Panel*/
.bd-product-slider__content {
  background: #0A3161;
  color: #fff;
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.bd-product-slider__heading {
  margin: 0 0 18px;
  font-size: clamp(2rem, 2vw, 2.5rem);
  line-height: 1.1;
  font-weight: 700;
}

.bd-product-slider__description {
  font-size: 1rem;
  line-height: 1.65;
  opacity: .85;
}

.bd-product-slider__description p:last-child {
  margin-bottom: 0;
}

.bd-product-slider__bottom {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.bd-product-slider__arrows {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-right: 12px;
  align-items: center;
}

.bd-product-slider__arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(11, 42, 82, .25);
  background: transparent;
  color: #0b2a52;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: .25s ease;
}

.bd-product-slider__arrow svg{
  width:16px;
  height:16px;
}

.bd-product-slider__arrow:hover:not(:disabled){
  background:#fff;
  color:#123d73;
}

.bd-product-slider__arrow:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.bd-product-slider__button{
  width:fit-content;
  background-color: #0A3161;
  color: #ffffff;
  border: 1px solid #FFFFFF;
  border-radius: 999px;
  padding: 10px 24px;
  transition: background .2s ease, transform .2s ease;
}
.bd-product-slider__button:hover {
  border: 1px solid #FFFFFF;
  background: #00000047;
  backdrop-filter: blur(9px);
  transform: scale(1.03);
}

/*Slider*/

.bd-product-slider__slider{
  min-width:0;
  overflow:hidden;
}

.bd-product-slider__track{
  display:flex;
  gap:20px;
  margin:0;
  padding:0;
  height: 100%;
  list-style:none;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}

.bd-product-slider__track::-webkit-scrollbar{
  display:none;
}

.bd-feat-col__tabs{
    display:flex;
    gap:12px;
    background-color: #E9E9E9;
    justify-content: center;
    border-radius: 999px;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 40px;
    padding: 14px 30px;
}

.bd-feat-col__tab{
    padding:10px 24px;
    border:none;
    color: #6f6f6f;
    font-size: 16px;
    cursor:pointer;
    border-radius: 999px;
    background: none;
}

.bd-feat-col__tab.is-active{
    background: #fff;
    color: #222;
    box-shadow: 0 1px 8px #00000014;
}

.hidden{
    display:none;
}

/*==============================
3 Cards Desktop
==============================*/

.bd-product-slider__item{
  flex:0 0 calc(34% - 20px);
  scroll-snap-align: start;
}

/*card*/

.bd-product-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#F5F5F5;
  border-radius:16px;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  transition:.3s ease;
}

.bd-product-card:hover{
  transform:translateY(-4px);
}

.bd-product-card__media{
  background:#ECECEC;
  aspect-ratio:1;
  overflow:hidden;
}

.bd-product-card__image{
  width:100%;
  height:100%;
  object-fit:cover;

  transition:.45s ease;
}

.bd-product-card:hover
.bd-product-card__image{
  transform:scale(1.05);
}

.bd-product-card__content{
  padding:20px;

  display:flex;
  flex-direction:column;
  gap:12px;

  flex:1;
}

.bd-product-card__title{
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: #1A1C1C;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.bd-product-card__rating{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  color:#838484;
}

.bd-product-card__stars{
  display:flex;
  gap:0;
}

.bd-product-card__stars svg{
  width:14px;
  height:14px;
  fill:#ddd;
}

.bd-product-card__stars svg.is-filled{
  fill: #113d73;
}

.bd-product-card__price{
  margin-top:auto;
  font-size:16px;
  font-weight:700;
  color:#123d73;
}

/* Rating line under the title (search cards): score, star, divider, review count, all in the
   same bold type */
.bd-product-card__score{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #1A1C1C;
}

.bd-product-card__score-star{
  width: 15px;
  height: 15px;
  fill: #F5A623;
}

.bd-product-card__score-sep{
  width: 1px;
  height: 12px;
  margin: 0 3px;
  background: currentColor;
  opacity: 0.3;
}

.bd-product-slider__mobile-button{
    display:none;
}

@media screen and (max-width:990px){

.bd-product-slider__wrapper{
  grid-template-columns:1fr;
}

.bd-product-slider__content{
  padding:32px;
}

.bd-product-slider__item{
  flex:0 0 calc((100% - 24px) / 2.2);
}

}

@media screen and (max-width:749px){

.bd-product-slider__wrapper{
  gap:12px;
}

.bd-product-slider__content{
  background:transparent;
  color:inherit;

  padding:0;
}

.bd-product-slider__heading{
  text-align:center;
}

.bd-product-slider__description{
  text-align:center;
}

.bd-product-slider__bottom .bd-product-slider__button{
  display:none;
}

.bd-product-slider__arrows{
  display: none;
}

.bd-product-card__title{
  font-size:12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bd-product-card__price{
  font-size:14px;
}
.bd-product-card__rating {
  display: none;
}
.bd-product-slider__mobile-button{
	 display:flex;
	 justify-content:center;
	 margin-top: 0;
}
/* Product grid */
 .bd-product-slider__track{
	 display:flex;
	 flex-wrap:wrap;
	 gap:10px;
	 overflow:visible;
	 scroll-snap-type:none;
}
.bd-product-card__content {
  padding: 10px;
}
/* Only first four products */
 .bd-product-slider__item{
	 flex:0 0 calc((100% - 10px)/2);
}
 .bd-product-slider__item:nth-child(n+5){
	 display:none;
}
.bd-feat-col__tabs {
  padding: 12px 10px;
  gap: 10px;
  margin-bottom: 12px;
}

.bd-feat-col__tab {
  padding: 10px 10px;
  font-size: 10px;
}

}

/* About-Us Page CSS */

/* ============================================================
   BD Text banner — bd-hero-cta.liquid
   ============================================================ */

.bd-hero-cta {
  background: var(--bhc-bg, #ececef);
}

.bd-hero-cta__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 64px var(--page-margin);
}

.bd-hero-cta__card {
  max-width: 980px;
  margin: 0 auto;
  padding: 72px 64px;
  border-radius: 28px;
  background: #fff;
  text-align: center;
}

.bd-hero-cta__eyebrow {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 500;
  color: #B31942;
}

.bd-hero-cta__heading {
  margin: 0 0 20px;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #10131a;
}

.bd-hero-cta__highlight {
  color: #B31942;
}

.bd-hero-cta__desc {
  max-width: 640px;
  margin: 0 auto 36px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(16, 19, 26, 0.6);
}

.bd-hero-cta__desc p { margin: 0; }

.bd-hero-cta__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bd-hero-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 32px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.bd-hero-cta__btn--solid {
  border: 2px solid #B31942;
  background: #B31942;
  color: #fff;
}

.bd-hero-cta__btn--solid:hover {
  background: #8f1433;
  border-color: #8f1433;
}

.bd-hero-cta__btn--outline {
  border: 2px solid rgba(16, 19, 26, 0.18);
  background: transparent;
  color: #10131a;
}

.bd-hero-cta__btn--outline:hover {
  border-color: rgba(16, 19, 26, 0.4);
  background: rgba(16, 19, 26, 0.04);
}

@media screen and (max-width: 749px) {
  .bd-hero-cta__inner  { padding: 40px var(--page-margin); }
  .bd-hero-cta__card   { padding: 44px 24px; border-radius: 20px; }
  .bd-hero-cta__heading{ font-size: 28px; }
  .bd-hero-cta__eyebrow{ font-size: 15px; }
  .bd-hero-cta__desc   { font-size: 14px; margin-bottom: 28px; }
  .bd-hero-cta__buttons{ flex-direction: column; width: 100%; }
  .bd-hero-cta__btn    { width: 100%; }
}

/* ============================================================
   BD Image Banner — bd-image-banner.liquid
   ============================================================ */

.bd-img-banner__link {
  display: block;
}

.bd-img-banner__picture {
  display: block;
  line-height: 0;
}

.bd-img-banner__img {
  display: block;
  width: 100%;
  height: 90%;
}

/* ============= Marque - bar css About-Us page =============*/
.marquee-bar.about-us-page {
  padding: 8px 0;
}

.marquee-bar.about-us-page .marquee-bar__item {
  margin-right: 50px;
}

.marquee-bar.about-us-page .marquee-bar__item span{
  font-size: 16px;
}

/* ============================================================
   BD Our Values — bd-values.liquid
   ============================================================ */

.bd-values__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 72px var(--page-margin);
}

.bd-values__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.bd-values__caption {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #B31942;
}

.bd-values__heading {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  color: #0b2a52;
}

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

.bd-values__card {
  padding: 32px;
  border: 1px solid rgba(16, 24, 40, 0.12);
  border-radius: 16px;
  background: #fff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.bd-values__card:hover,
.bd-values__card.is-active {
  border-color: #B31942;
  box-shadow: 0px 16px 40px -8px #585C5F29;

}

.bd-values__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border-radius: 14px;
  background: #ececee;
  color: #10131a;
  transition: background 0.25s ease, color 0.25s ease;
}

.bd-values__icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

/* The icon is pasted SVG (see the block's "Icon (SVG code)" setting).
   Recolouring relies on the icon's OWN markup using
   fill="currentColor" (solid/filled icon sets) or
   stroke="currentColor" (outline icon sets, e.g. Feather/Lucide) —
   that's how virtually every icon library meant to be recoloured via
   CSS is authored. We deliberately don't force fill/stroke here: many
   outline icon sets set fill="none" on purpose, and overriding that
   for every descendant would fill them in solid instead of just
   recolouring the stroke. Setting `color` on the container (below) is
   all `currentColor` needs to pick up. */

.bd-values__card:hover .bd-values__icon,
.bd-values__card.is-active .bd-values__icon {
  background: #B31942;
  color: #fff;
}

.bd-values__card:hover .bd-values__icon svg path,
.bd-values__card.is-active .bd-values__icon svg path {
  fill: #ffffff;
    stroke: #ffffff;
}

.bd-values__card-heading {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  color: #10131a;
}

.bd-values__card-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(16, 19, 26, 0.6);
}

.bd-values__card-desc p { margin: 0; }

@media screen and (max-width: 989px) {
  .bd-values__grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 749px) {
  .bd-values__inner        { padding: 48px var(--page-margin); }
  .bd-values__heading      { font-size: 26px; }
  .bd-values__grid         { grid-template-columns: 1fr; gap: 16px; }
  .bd-values__card         { padding: 24px; }
  .bd-values__icon         { width: 56px; height: 56px; margin-bottom: 18px; }
  .bd-values__card-heading { font-size: 19px; }
}

/* ============================================================
   BD use cases -- About us page section
   ============================================================ */

.bd-occasions.about-us-page .bd-occasions__card-wrap {
  min-height: 100%;
}
.bd-occasions.about-us-page .bd-occasions__card {
  min-height: 300px;
  max-height: 100%;
  height: 100%;
}
.bd-occasions.about-us-page .bd-occasions__content {
  justify-content: flex-start;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex:1;
  min-height: 100%;
  padding: 40px;
}
.bd-occasions.about-us-page .bd-occasions__card-heading {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  color: #0A3161;
  transition: color .3s ease;
}
.bd-occasions.about-us-page .bd-occasions__tag {
  font-size: 36px;
  margin-bottom: 50px;
}
.bd-occasions.about-us-page .bd-occasions__card-desc {
  opacity: 1;
  max-height: fit-content;
  color: #5F5E5E;
  font-size: 16px;
  /* min-height: 130px; */
}
.bd-occasions.about-us-page .bd-occasions__cta {
  display: none;
}
.bd-occasions.about-us-page .bd-occasions__bg {
  height: 100%;
}
.bd-occasions.about-us-page .bd-occasions__card:hover .bd-occasions__bg {
  transition: all .4s ease;
}
.bd-occasions.about-us-page .bd-occasions__card:hover .bd-occasions__card-heading,
.bd-occasions.about-us-page .bd-occasions__card:hover .bd-occasions__card-desc {
  color: #FFFFFF;
  margin-top: 0;
}
.bd-occasions.about-us-page .bd-occasions__card:hover .bd-occasions__tag {
  color: #B31942;
}
.bd-occasions.about-us-page .bd-occasions__overlay,
.bd-occasions.about-us-page .bd-occasions__card:hover {
  background-color: #0A3161;
}

@media screen and (max-width: 749px) {
  .bd-occasions.about-us-page .bd-occasions__tag {
    margin-bottom: 0;
  }
  .bd-occasions.about-us-page .bd-occasions__card-heading {
    font-size: 30px;
  }
  .bd-occasions.about-us-page .bd-occasions__card.is-active .bd-occasions__bg {
    transition: all .4s ease;
  }
  .bd-occasions.about-us-page .bd-occasions__card.is-active{
    background-color: #0A3161;
  }
  .bd-occasions.about-us-page .bd-occasions__card.is-active .bd-occasions__overlay {
    opacity: 1;
  }
  .bd-occasions.about-us-page .bd-occasions__card.is-active .bd-occasions__card-heading,
  .bd-occasions.about-us-page .bd-occasions__card.is-active .bd-occasions__card-desc {
    color: #FFFFFF;
    margin-top: 0;
  }
  .bd-occasions.about-us-page .bd-occasions__card.is-active .bd-occasions__tag {
  color: #B31942;
  }
}

/* ============================================================
   BD Image-with-text section
   ============================================================ */

.bd-about-split__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 72px var(--page-margin);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}

.bd-about-split__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  border-radius: 20px;
  background-color: #f4f4f5;
  background-size: cover;
  background-position: center;
  text-align: center;
  padding: 70px 74px;
  border: 1px solid #E4E2DD;
}

.bd-about-split__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #B31942;
  color: #fff;
  flex-shrink: 0;
}

.bd-about-split__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.bd-about-split__statement {
  margin: 0;
  max-width: 380px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  color: #10131a;
}

.bd-about-split__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bd-about-split__caption {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #B31942;
}

.bd-about-split__heading {
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  color: #1A1C1C;
}

.bd-about-split__desc {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: #484848;
}

.bd-about-split__desc p { margin: 0; }

.bd-about-split__desc strong {
  font-weight: 700;
  color: #484848;
}

@media screen and (max-width: 989px) {
  .bd-about-split__inner { grid-template-columns: 1fr; gap: 24px; }
  .bd-about-split__card {
    padding: 40px;
  }
}

@media screen and (max-width: 749px) {
  .bd-about-split__inner     { padding: 48px var(--page-margin); }
  .bd-about-split__card {
    padding: 40px;
  }
  .bd-about-split__statement { font-size: 28px; }
  .bd-about-split__heading   { font-size: 26px; }
  .bd-about-split__content,
  .bd-about-split__desc {
    align-items: center;
    text-align: center;
  }
}

/* ============================================================
   BD Our Journey — Timeline edition — bd-journey-timeline.liquid

   A second "Our Journey" design, independent of bd-journey.liquid's
   half-wheel. Desktop only differs here — the mobile rules below are
   a direct port of .journey__mobile*'s colours/sizes (see that block
   for the PDF-measurement notes), just renamed to this section's own
   .bd-journey-tl__mobile* classes so the two sections never collide.
   ============================================================ */

.bd-journey-tl {
  background: #0a3161;
  overflow: hidden;
}

.bd-journey-tl__container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 46px var(--page-margin);
}

/*----------------------------------------------------
DESKTOP — horizontal roadmap: centred intro, then a
full-width rail of evenly-spaced markers, then a single
detail panel below that swaps content on click/keyboard
(no scroll-spy here — everything sits in one row, there's
no vertical run to scroll through).
----------------------------------------------------*/

.bd-journey-tl__intro {
  max-width: 640px;
  margin: 0 auto 42px;
  text-align: center;
  color: #ffffff;
}

.bd-journey-tl__eyebrow {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 600;
  color: #c6284e;
}

.bd-journey-tl__heading {
  margin: 0;
  font-size: 40px;
  line-height: 1.08;
  font-weight: 700;
}

.bd-journey-tl__heading strong {
  color: #B31942;
}

.bd-journey-tl__heading em {
  font-style: italic;
  font-weight: 500;
}

/*----------------------------------------------------
HORIZONTAL RAIL
----------------------------------------------------*/

.bd-journey-tl__rail-row {
  position: relative;
  padding: 0 20px;
  margin-bottom: 34px;
}

.bd-journey-tl__rail {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 19px;
  height: 2px;
  background: #3b5a80;
}

.bd-journey-tl__rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: #B31942;
  transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Glowing tip riding the end of the fill — reads as a little
   "spark" travelling along the rail as the active milestone changes. */
.bd-journey-tl__rail-fill::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B31942;
  transform: translateY(-50%);
  box-shadow: 0 0 10px 6px #da1026;
}

.bd-journey-tl__list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.bd-journey-tl__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.bd-journey-tl__marker {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bd-journey-tl__marker:hover {
  transform: scale(1.15);
}

.bd-journey-tl__marker:active {
  transform: scale(0.92);
}

.bd-journey-tl__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d8dde5;
  border: 0px solid #ffffff;
  box-sizing: content-box;
  transition: background 0.3s ease, border-width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease;
}

.bd-journey-tl__marker:hover .bd-journey-tl__dot {
  background: #ffffff;
}

.bd-journey-tl__item.is-active .bd-journey-tl__dot {
  background: #B31942;
  border-width: 8px;
  animation: bdJourneyTlPulse 2.4s ease-out infinite;
}

@keyframes bdJourneyTlPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(179, 25, 66, 0.4);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(179, 25, 66, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(179, 25, 66, 0);
  }
}

.bd-journey-tl__tick-year {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #a3a3a3;
  white-space: nowrap;
  transition: color 0.3s ease, font-weight 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bd-journey-tl__item.is-active .bd-journey-tl__tick-year {
  color: #B31942;
  font-weight: 700;
  transform: translateY(-2px);
  font-size: 22px;
}

/*----------------------------------------------------
DETAIL PANEL
----------------------------------------------------*/

.bd-journey-tl__panel-row {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #133c70;
  padding: 24px 40px;
  border-radius: 24px;
  box-shadow: 0px 12px 16px -12px #00000099;
  max-width: 1000px;
  margin: 0 auto;
}

.bd-journey-tl__panel {
  flex: 1;
  min-width: 0;
  max-width: 760px;
  min-height: 220px;
  margin: 0 auto;
  text-align: center;
}

.bd-journey-tl__panel-item {
  display: none;
}

.bd-journey-tl__panel-item.is-active {
  display: block;
}

/* Directional, staggered reveal — set by JS depending on whether the
   newly active milestone is ahead of or behind the previous one, so
   moving through the timeline reads as travelling forward/backward
   rather than a generic crossfade. The year, title and description
   each animate in on their own short delay (instead of the panel
   moving as one flat block), so the swap reads as a deliberate
   cascade — bigger travel distance, a soft focus-blur, and a snappier
   "ease-out-expo" curve make the change harder to miss. */
.bd-journey-tl__panel-item.is-active .bd-journey-tl__panel-year,
.bd-journey-tl__panel-item.is-active .bd-journey-tl__title,
.bd-journey-tl__panel-item.is-active .bd-journey-tl__desc {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
}

.bd-journey-tl__panel-item.is-active.bd-jt-from-right .bd-journey-tl__panel-year {
  animation-name: bdJourneyTlSlideFromRight;
  animation-delay: 0s;
}

.bd-journey-tl__panel-item.is-active.bd-jt-from-right .bd-journey-tl__title {
  animation-name: bdJourneyTlSlideFromRight;
  animation-delay: 0.08s;
}

.bd-journey-tl__panel-item.is-active.bd-jt-from-right .bd-journey-tl__desc {
  animation-name: bdJourneyTlSlideFromRight;
  animation-delay: 0.16s;
}

.bd-journey-tl__panel-item.is-active.bd-jt-from-left .bd-journey-tl__panel-year {
  animation-name: bdJourneyTlSlideFromLeft;
  animation-delay: 0s;
}

.bd-journey-tl__panel-item.is-active.bd-jt-from-left .bd-journey-tl__title {
  animation-name: bdJourneyTlSlideFromLeft;
  animation-delay: 0.08s;
}

.bd-journey-tl__panel-item.is-active.bd-jt-from-left .bd-journey-tl__desc {
  animation-name: bdJourneyTlSlideFromLeft;
  animation-delay: 0.16s;
}

@keyframes bdJourneyTlSlideFromRight {
  from {
    opacity: 0;
    transform: translateX(56px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes bdJourneyTlSlideFromLeft {
  from {
    opacity: 0;
    transform: translateX(-56px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}


.bd-journey-tl__panel-year {
  display: block;
  margin-bottom: 16px;
  font-size: 64px;
  line-height: 1;
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.bd-journey-tl__title {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
}

.bd-journey-tl__desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
}

.bd-journey-tl__desc p {
  margin: 0;
}

.bd-journey-tl__nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s ease;
}

.bd-journey-tl__nav:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #B31942;
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.bd-journey-tl__nav:active {
  transform: scale(0.94);
}

.bd-journey-tl__nav svg {
  transition: transform 0.25s ease;
}

.bd-journey-tl__nav--prev:hover svg {
  transform: translateX(-2px);
}

.bd-journey-tl__nav--next:hover svg {
  transform: translateX(2px);
}

/*----------------------------------------------------
SCROLL-IN REVEAL

.bd-jt-will-reveal is added by JS before observing, so the
hidden starting state only ever applies with JS available —
if JS fails for any reason the content is never stuck hidden.
----------------------------------------------------*/

.bd-journey-tl__desktop.bd-jt-will-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bd-journey-tl__desktop.bd-jt-will-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/*----------------------------------------------------
MOBILE (max-width: 989px) — direct port of .journey__mobile*
----------------------------------------------------*/

.bd-journey-tl__mobile {
  display: none;
}

@media screen and (max-width: 989px) {
  .bd-journey-tl__desktop {
    display: none;
  }

  .bd-journey-tl__container {
    padding: 0;
  }

  .bd-journey-tl__mobile {
    display: block;
    padding: 56px 24px;
  }

  .bd-journey-tl__mobile-header {
    text-align: center;
    margin-bottom: 40px;
  }

  .bd-journey-tl__mobile-header .bd-journey-tl__eyebrow {
    color: #ffffff;
  }

  .bd-journey-tl__mobile-header .bd-journey-tl__heading {
    font-size: 30px;
  }

  .bd-journey-tl__mobile-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .bd-journey-tl__mobile-item {
    display: flex;
    gap: 20px;
  }

  .bd-journey-tl__mobile-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
  }

  .bd-journey-tl__mobile-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #d8dde5;
    border: 0px solid #ffffff;
    box-sizing: content-box;
    flex-shrink: 0;
    transition: background 0.3s ease, border-width 0.3s ease;
  }

  .bd-journey-tl__mobile-item.is-active .bd-journey-tl__mobile-dot {
    background: #B31942;
    border-width: 2px;
  }

  .bd-journey-tl__mobile-line {
    width: 2px;
    flex: 1;
    background: #3b5a80;
    transition: background 0.3s ease;
  }

  .bd-journey-tl__mobile-item.is-active .bd-journey-tl__mobile-line {
    background: #B31942;
  }
  

  .bd-journey-tl__mobile-body {
    flex: 1;
    min-width: 0;
    padding-bottom: 48px;
  }

  .bd-journey-tl__mobile-year {
    margin: 0 0 4px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: #a3a3a3;
    transition: color 0.3s ease, font-size 0.3s ease;
  }

  .bd-journey-tl__mobile-item.is-active .bd-journey-tl__mobile-year {
    font-size: 34px;
    color: #B31942;
  }

  .bd-journey-tl__mobile-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: #a3a3a3;
    transition: color 0.3s ease;
  }

  .bd-journey-tl__mobile-item.is-active .bd-journey-tl__mobile-title {
    color: #B31942;
  }

  .bd-journey-tl__mobile-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #a3a3a3;
    transition: color 0.3s ease;
  }

  .bd-journey-tl__mobile-item.is-active .bd-journey-tl__mobile-desc {
    color: #ffffff;
  }

  .bd-journey-tl__mobile-desc p {
    margin: 0;
  }
}

@media screen and (max-width: 1200px) {
  .bd-journey-tl__panel-year {
    font-size: 52px;
  }

  .bd-journey-tl__tick-year {
    font-size: 13px;
  }
}

/* Our work page  */

/* ============================================================
   BD Hero Heading — bd-hero-heading.liquid
   ============================================================ */

.bd-hero-heading {
  background: var(--bd-hero-heading-bg, #0A3161);
}

.bd-hero-heading__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 80px var(--page-margin);
  text-align: center;
}

.bd-hero-heading__caption {
  margin: 0 0 20px;
  font-size: 17px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.bd-hero-heading__heading {
  margin: 0;
  font-size: 48px;
  line-height: 1.2;
  font-weight: 700;
  color: #ffffff;
}

.bd-hero-heading__heading--accent {
  color: #B31942;
}

.bd-hero-heading__heading + .bd-hero-heading__heading {
  margin-top: 4px;
}

.bd-hero-heading__desc {
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

@media screen and (max-width: 749px) {
  .bd-hero-heading__inner  { padding: 64px var(--page-margin); }
  .bd-hero-heading__heading{ font-size: 32px; }
  .bd-hero-heading__caption{ font-size: 15px; }
  .bd-hero-heading__desc   { font-size: 16px; margin-top: 18px; }
}

/* ============================================================
   BD Collection Gallery — bd-collection-gallery.liquid
   ============================================================ */

.bd-gallery__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 64px var(--page-margin);
}

/*----------------------------------------------------
TOP TABS (main collections)
----------------------------------------------------*/

/* Arrows sit outside the pill bar; the 40px spacing moves to the wrapper so
   the arrows stay vertically centred against the bar. */
.bd-gallery__tabs-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}

.bd-gallery__tabs-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(16, 19, 26, 0.16);
  border-radius: 50%;
  background: #fff;
  color: #10131a;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.bd-gallery__tabs-arrow[hidden] { display: none; }

.bd-gallery__tabs-arrow:hover:not(:disabled) {
  border-color: rgba(16, 19, 26, 0.4);
  background: #f4f4f6;
}

.bd-gallery__tabs-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.bd-gallery__tabs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 32px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-bottom: 1px solid rgb(var(--color-foreground-rgb) / .1);
  background: #ececec;
  border-radius: 999px;
  padding: 10px;
}

.bd-gallery__tabs::-webkit-scrollbar {
  display: none;
}

.bd-gallery__tab {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #4b5563;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.bd-gallery__tab.is-active {
  color: #9b1c3c;
  background: #fff;
  border-radius: 999px;
  font-weight: 500;
}

/*----------------------------------------------------
PANEL / BENTO GRID
----------------------------------------------------*/

.bd-gallery__panel {
  display: none;
}

.bd-gallery__panel.is-active {
  display: block;
}

.bd-gallery__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: dense;
  gap: 20px;
  align-items: start;
}

/*----------------------------------------------------
LEFT CARD
----------------------------------------------------*/

.bd-gallery__card {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 32px;
  border-radius: 20px;
  background: #f4f4f5;
}

.bd-gallery__card-heading {
  margin: 0;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
  color: #10131a;
}

.bd-gallery__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bd-gallery__pill {
  border: 1px solid #d8dde5;
  background: transparent;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.bd-gallery__pill.is-active {
  background: #ffffff;
  border-color: #ffffff;
  color: #10131a;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(16, 19, 26, 0.1);
}

.bd-gallery__card-desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(16, 19, 26, 0.65);
}

.bd-gallery__card-desc p { margin: 0; }

.bd-gallery__card-secondary {
  margin: 0;
  font-size: 14px;
  color: rgba(16, 19, 26, 0.5);
}

.bd-gallery__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  background: #B31942;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.bd-gallery__cta:hover {
  background: #8f1433;
}

/*----------------------------------------------------
IMAGE TILES

.bd-gallery__images groups are flattened with display:contents
when active so their .bd-gallery__tile children become direct
items of .bd-gallery__grid — that's what lets the tiles reflow
around the card using the same 5-column dense grid, rather than
being trapped in their own separate grid area.
----------------------------------------------------*/

.bd-gallery__images {
  display: none;
}

.bd-gallery__images.is-active {
  display: contents;
}

.bd-gallery__tile {
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: #e5e7eb;
}

.bd-gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bd-gallery__tile[data-gallery-page-hidden] {
  display: none;
}

/*----------------------------------------------------
PAGINATION
----------------------------------------------------*/

.bd-gallery__pagination {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.bd-gallery__pagination.is-visible {
  display: flex;
}

.bd-gallery__page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 4px;
  border-radius: 8px;
  border: 1px solid #d8dde5;
  background: #ffffff;
  color: #4b5563;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bd-gallery__page-btn:hover {
  border-color: #B31942;
  color: #B31942;
}

.bd-gallery__page-btn.is-active {
  background: #B31942;
  border-color: #B31942;
  color: #ffffff;
}

.bd-gallery__page-btn:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

@media screen and (max-width: 989px) {
  .bd-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bd-gallery__card {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media screen and (max-width: 749px) {
  .bd-gallery__inner       { padding: 48px var(--page-margin); }
  .bd-gallery__card        { padding: 32px 24px; }
  .bd-gallery__card-heading{ font-size: 26px; }
  .bd-gallery__grid        { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bd-gallery__tabs {
    gap: 16px;
  }
  .bd-gallery__tab {
     padding: 10;
  }

}

/* ============================================================
   BD CTA Banner — bd-cta-banner.liquid
   ============================================================ */

.bd-cta-banner__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 64px var(--page-margin);
}

.bd-cta-banner__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 64px 72px;
  border-radius: 24px;
  background: var(--bd-cta-banner-bg, #0A3161);
}

.bd-cta-banner__content {
  max-width: 640px;
}

.bd-cta-banner__heading {
  margin: 0 0 20px;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 700;
  color: #ffffff;
}

.bd-cta-banner__desc {
  margin-bottom: 32px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.bd-cta-banner__desc p {
  margin: 0;
}

.bd-cta-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  border-radius: 999px;
  background: #B31942;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.bd-cta-banner__btn:hover {
  background: #8f1433;
}

.bd-cta-banner__image {
  flex-shrink: 0;
  width: 220px;
}

.bd-cta-banner__image img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (max-width: 989px) {
  .bd-cta-banner__card {
    flex-direction: column;
    text-align: center;
    padding: 48px 40px;
  }

  .bd-cta-banner__content {
    max-width: 100%;
  }

  .bd-cta-banner__btn {
    margin: 0 auto;
  }
}

@media screen and (max-width: 749px) {
  .bd-cta-banner__inner   { padding: 40px var(--page-margin); }
  .bd-cta-banner__card    { padding: 40px 24px; border-radius: 20px; gap: 32px; }
  .bd-cta-banner__heading { font-size: 28px; }
  .bd-cta-banner__desc    { font-size: 15px; margin-bottom: 24px; }
  .bd-cta-banner__image   { display: none; }
}


/* ============================================================
   BD Logos Marquee — logos-marquee.liquid
   ============================================================ */

.bd-logos-marquee__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 56px var(--page-margin);
}

.bd-logos-marquee__heading {
  margin: 0 0 52px;
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  color: #0a3161;
}

.bd-logos-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.bd-logos-marquee__track {
  display: flex;
  width: max-content;
  animation: bd-logos-marquee-scroll var(--bd-marquee-duration, 30s) linear infinite;
}

.bd-logos-marquee__set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.bd-logos-marquee__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 40px;
}

.bd-logos-marquee__logo img {
  display: block;
  height: 32px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
}

@keyframes bd-logos-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .bd-logos-marquee__track {
    animation: none;
  }
}

@media screen and (max-width: 749px) {
  .bd-logos-marquee__inner { padding: 40px var(--page-margin); }
  .bd-logos-marquee__heading { font-size: 18px; margin-bottom: 24px; }
  .bd-logos-marquee__logo { padding: 0 26px; }
  .bd-logos-marquee__logo img { height: 24px; }
}

/* ============================================================
   BD Stats — bd-stats.liquid
   ============================================================ */

@media screen and (min-width: 990px) {                                                                                  
  .bd-stats--hide-desktop {                                                                                             
    display: none;                                                                                                      
  }                                                                                                                     
}  

.bd-stats {
  background: var(--color-background);
  color: var(--color-foreground);
  padding: 0;
}

.bd-stats__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 var(--page-margin);
}

.bd-stats__heading {
  margin: 0 0 32px;
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a3a5c;
}

.bd-stats__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.bd-stats__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 40px;
  text-align: center;
}

.bd-stats__stat:first-of-type {
  padding-left: 0;
}

.bd-stats__stat:last-of-type {
  padding-right: 0;
}

.bd-stats__stat-number {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-foreground);
  line-height: 1;
  letter-spacing: -0.02em;
}

.bd-stats__stat-label {
  font-size: 0.9rem;
  color: rgb(var(--color-foreground-rgb) / 0.6);
}

.bd-stats__divider {
  width: 1px;
  height: 44px;
  background: rgb(var(--color-foreground-rgb) / 0.18);
  flex-shrink: 0;
}

@media screen and (max-width: 989px) {
  .bd-stats__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    border-radius: 12px;
    overflow: hidden;
  }

  .bd-stats__stat {
    padding: 14px;
    border-right: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  .bd-stats__stat:nth-child(2n) {
    border-right: none;
  }

  .bd-stats__stat:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .bd-stats__divider {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  .bd-stats { padding: 0; }
  .bd-stats__heading { font-size: 1.4rem; margin-bottom: 24px; }
  .bd-stats__stat-number { font-size: 1.75rem; }
}


/* ============================================================
   BD Ministry Hero — bd-ministry-hero.liquid
   ============================================================ */

/* Tag-qualified: .color-scheme-* sets background-color from an inline
   <style> block that loads after custom.css, so a bare .bd-mh loses. */
section.bd-mh {
  background: var(--bmh-bg, #f1f2f4);
}

.bd-mh__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 24px var(--page-margin);
}

.bd-mh__card {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 40px;
  min-height: var(--bmh-min-height, 420px);
  padding: 48px 52px;
  border-radius: 16px;
  background: var(--bmh-card-bg, #fff);
}

/* Copy */

.bd-mh__heading {
  margin: 0 0 18px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--bmh-heading-color, #0B2A5F);
}

.bd-mh__heading-static { display: block; }

.bd-mh__highlight {
  display: block;
  color: var(--bmh-accent, #B31942);
}

.bd-mh__desc {
  max-width: 380px;
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(16, 19, 26, 0.62);
}

.bd-mh__desc p { margin: 0; }

.bd-mh__buttons {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
}

.bd-mh__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.bd-mh__btn--solid {
  /* border: 2px solid var(--bmh-accent, #B31942);
  background: var(--bmh-accent, #B31942);
  color: #fff; */
  background: transparent; 
  color: #10131a;
  border: 2px solid rgba(16, 19, 26, 0.18);
}

.bd-mh__btn--solid:hover {
  /* background: #8f1433;
  border-color: #8f1433; */
  border-color: rgba(16, 19, 26, 0.4);
  color:#b31942;
}

.bd-mh__btn--outline {
  border: 2px solid rgba(16, 19, 26, 0.18);
  /* background: transparent; 
  color: #10131a; */
  background:#b31942;
  color:#ffffff
}

.bd-mh__btn--outline:hover {
  /* border-color: rgba(16, 19, 26, 0.4); */
  border-color:#b31942;
  color:#b31942;
  background: rgba(16, 19, 26, 0.04);
}

/* Visual — one pre-composed animation (GIF or looping MP4) */

.bd-mh__visual {
  align-self: stretch;
  min-height: 300px;
}

.bd-mh__media {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

/* video_tag emits its own wrapper, so target the element generically. */
.bd-mh__media-el,
.bd-mh__media video,
.bd-mh__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--bmh-visual-fit, contain);
}

.bd-mh__media--empty {
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #dfe3e8;
}

.bd-mh__placeholder-svg {
  width: 100%;
  height: 100%;
  fill: rgba(16, 19, 26, 0.14);
}

/* Responsive */

@media screen and (max-width: 989px) {
  .bd-mh__card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 32px;
  }

  .bd-mh__heading { font-size: 34px; }
  .bd-mh__desc    { max-width: none; }
  .bd-mh__visual  { min-height: 320px; }
}

@media screen and (max-width: 749px) {
  .bd-mh__inner { padding: 12px var(--page-margin); }

  .bd-mh__card {
    padding: 28px 20px;
    border-radius: 12px;
  }

  .bd-mh__heading { font-size: 27px; }
  .bd-mh__desc    { font-size: 14px; margin-bottom: 22px; }

  .bd-mh__buttons { width: 100%; }
  .bd-mh__btn     { width: 100%; }

  .bd-mh__visual,
  .bd-mh__media   { min-height: 220px; }
}

/* ============================================================
   BD Ministry USPs — bd-ministry-usps.liquid
   ============================================================ */

/* Tag-qualified to outrank the late .color-scheme-* background rule. */
section.bd-musp {
  background: var(--bmu-bg, #ffffff);
}

.bd-musp__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 8px var(--page-margin) 28px;
}

.bd-musp__heading {
  margin: 0 0 20px;
  font-size: 26px;
  font-weight: 700;
  color: var(--bmu-title-color, #0B2A5F);
  text-align: center;
}

.bd-musp__grid {
  display: grid;
  grid-template-columns: repeat(var(--bmu-columns, 4), minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-musp__item {
  position: relative;
}

/* ── Card ───────────────────────────────────────────── */

.bd-musp__card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--bmu-border, #e3e7ee);
  border-radius: 14px;
  background: var(--bmu-card-bg, #fcfcfd);
  box-shadow: 0 2px 6px rgba(16, 19, 26, 0.07);
  text-decoration: none;
  cursor: default;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.bd-musp__card { cursor: pointer; }

.bd-musp__card:hover,
.bd-musp__card:focus-visible {
  border-color: var(--bmu-title-color, #0B2A5F);
  box-shadow: 0 8px 22px rgba(11, 42, 95, 0.16);
  transform: translateY(-2px);
}

.bd-musp__card:focus-visible {
  outline: 2px solid var(--bmu-title-color, #0B2A5F);
  outline-offset: 2px;
}

.bd-musp__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  /* border-radius: 50%;
  background: var(--bmu-icon-bg, #6C9BE8); */
  overflow: hidden;
}

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

/* ── Text: title and subtitle on one line, no rule ──
   Was a vertical stack with a border-top rule above the title. The rule
   drew the eye to a decoration rather than the words, and splitting
   "Hassle-Free / Returns" across two lines broke a single phrase in half —
   each card read as two fragments instead of one claim.

   Now inline with a space between, wrapping as a unit if the card is too
   narrow. */

.bd-musp__text {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.32em;
  min-width: 0;
  line-height: 1.3;
}

.bd-musp__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--bmu-title-color, #0B2A5F);
}

.bd-musp__subtitle {
  font-size: 15px;
  font-weight: 500;
  color: var(--bmu-subtitle-color, #2F5FA8);
}

/* ── Hover / focus popup ────────────────────────────── */

.bd-musp__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--bmu-pop-bg, #d6d6d8);
  color: var(--bmu-pop-color, #2b2f36);
  font-size: 11px;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* Hover and keyboard focus are two separate rules on purpose.

   They used to be one selector list ending in :focus-within, and the card
   carries tabindex="0" — so a mouse CLICK focused it, and focus outlives the
   pointer. Click one card, move to the next, and the first tooltip stayed
   open underneath the second: two popups on screen at once, which is what
   this was reported as.

   :focus-visible is the fix rather than dropping focus support altogether —
   browsers do not match it for a mouse click on a non-text control, but they
   do for Tab, so keyboard users keep the tooltip and mouse users stop
   collecting them.

   Split into two rules rather than one comma list because an invalid
   selector anywhere in a list drops the WHOLE rule: on an engine without
   :has() the combined version would have taken plain :hover down with it. */
.bd-musp__item:hover .bd-musp__pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bd-musp__item:has(:focus-visible) .bd-musp__pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ── Responsive ─────────────────────────────────────── */

@media screen and (max-width: 989px) {
  .bd-musp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 749px) {
  .bd-musp__inner { padding: 4px var(--page-margin) 20px; }
  .bd-musp__grid  { grid-template-columns: 1fr; gap: 12px; }

  /* No hover on touch, so show the copy inline instead of as a popup. */
  .bd-musp__pop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin-top: 8px;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-musp__card,
  .bd-musp__pop { transition: none; }

  .bd-musp__card:hover { transform: none; }
}

/* ============================================================
   BD Ministry Collections — bd-ministry-collections.liquid
   ============================================================ */

/* Tag-qualified to outrank the late .color-scheme-* background rule. */
section.bd-mc {
  background: var(--bmc-bg, #f4f4f6);
}

.bd-mc__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 32px var(--page-margin);
}

.bd-mc__heading {
  margin: 0 0 24px;
  text-align: left;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a3a5c;
}

.bd-mc__layout {
  display: grid;
  grid-template-columns: minmax(0, var(--bmc-intro-width, 340px)) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 16px;
  align-items: stretch;
}

/* Explicit placement keeps the arrows on their own row, so the stretched
   intro card matches the track height and not track + arrows. */
.bd-mc__intro    { grid-column: 1; grid-row: 1; }
.bd-mc__carousel { grid-column: 2; grid-row: 1; }
.bd-mc__nav      { grid-column: 2; grid-row: 2; }

/* Intro hidden: collapse its reserved column so the carousel starts flush
   at the left edge instead of leaving that width empty. */
.bd-mc__layout--no-intro {
  grid-template-columns: minmax(0, 1fr);
}

.bd-mc__layout--no-intro .bd-mc__carousel,
.bd-mc__layout--no-intro .bd-mc__nav {
  grid-column: 1;
}

/* ── Intro card ─────────────────────────────────────── */

.bd-mc__intro {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--bmc-intro-border, #6C9BE8);
  border-radius: 10px;
  /* Stand-in watercolour wash when no background image is set. */
  background:
    linear-gradient(135deg, #dfe7f6 0%, #f4dde6 46%, #e6ecf8 100%);
}

.bd-mc__intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bd-mc__intro-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 26px 24px;
  color: var(--bmc-intro-text, #0B2A5F);
  text-align: center;
}

.bd-mc__intro-heading {
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

/* Sits right-aligned under the heading, as in the design. */
.bd-mc__intro-subheading {
  margin: 2px 0 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-align: right;
}

.bd-mc__intro-text {
  font-size: 15px;
  line-height: 1.55;
}

.bd-mc__intro-text p { margin: 0; }

/* ── Carousel ───────────────────────────────────────── */

.bd-mc__carousel {
  min-width: 0;
}

.bd-mc__track {
  display: flex;
  gap: var(--bmc-gap, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bd-mc__track::-webkit-scrollbar { display: none; }

.bd-mc__item {
  flex: 0 0 auto;
  /* N full cards plus a sliver of the next, whatever the container width.
     Divisor and gap total are precomputed in Liquid. */
  width: calc((100% - var(--bmc-gap-total, 32px)) / var(--bmc-divisor, 2.3));
  scroll-snap-align: start;
}

.bd-mc__card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--bmc-card-ratio, 3 / 4);
  overflow: hidden;
  border-radius: 4px;
  background: #e2e5ea;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.bd-mc__card:hover,
a.bd-mc__card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(16, 19, 26, 0.18);
}

a.bd-mc__card:focus-visible {
  outline: 2px solid var(--bmc-intro-border, #6C9BE8);
  outline-offset: 2px;
}

.bd-mc__card-img,
.bd-mc__card-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bd-mc__placeholder-svg {
  width: 100%;
  height: 100%;
  fill: rgba(16, 19, 26, 0.12);
}

.bd-mc__card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 7px 10px;
  background: var(--bmc-caption-bg, rgba(255, 255, 255, 0.88));
  color: var(--bmc-caption-text, #1c2430);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

/* ── Arrows ─────────────────────────────────────────── */

.bd-mc__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.bd-mc__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(16, 19, 26, 0.16);
  border-radius: 50%;
  background: #fff;
  color: #10131a;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.bd-mc__arrow:hover:not(:disabled) {
  border-color: rgba(16, 19, 26, 0.4);
  background: #f4f4f6;
}

.bd-mc__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Set by the init when every card already fits. */
.bd-mc__nav[hidden] { display: none; }

/* ── Responsive ─────────────────────────────────────── */

@media screen and (max-width: 989px) {
  .bd-mc__layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 20px;
  }

  .bd-mc__intro,
  .bd-mc__carousel,
  .bd-mc__nav {
    grid-column: 1;
    grid-row: auto;
  }

  .bd-mc__intro-body { padding: 22px 20px; }
}

@media screen and (max-width: 749px) {
  .bd-mc__inner { padding: 24px var(--page-margin); }

  .bd-mc__intro-heading    { font-size: 23px; }
  .bd-mc__intro-subheading { font-size: 16px; }
  .bd-mc__intro-text       { font-size: 14px; }

  /* Overrides `width` outright, so the inline custom props stay untouched. */
  .bd-mc__item { width: calc((100% - 16px) / 1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .bd-mc__track { scroll-behavior: auto; }
  .bd-mc__card  { transition: none; }

  a.bd-mc__card:hover,
  a.bd-mc__card:focus-visible { transform: none; }
}

/* ============================================================
   BD Ministry Stats — bd-ministry-stats.liquid
   Page-specific: deliberately shares nothing with .bd-stats,
   which templates/collection.json also renders.
   ============================================================ */

/* Tag-qualified to outrank the late .color-scheme-* background rule. */
section.bd-mstat {
  background: var(--bmst-bg, #0B2A5F);
  color: var(--bmst-color, #fff);
}

.bd-mstat__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: var(--bmst-padding, 14px) var(--page-margin);
}

.bd-mstat__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.bd-mstat__stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 var(--bmst-gap, 34px);
}

.bd-mstat__number {
  font-size: var(--bmst-number-size, 25px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bmst-color, #fff);
  white-space: nowrap;
}

.bd-mstat__label {
  font-size: var(--bmst-label-size, 13px);
  line-height: 1.35;
  color: var(--bmst-color, #fff);
  opacity: 0.92;
}

.bd-mstat__divider {
  flex: none;
  width: 1px;
  align-self: stretch;
  min-height: 26px;
  background: rgb(255 255 255 / 0.32);
}

@media screen and (max-width: 989px) {
  .bd-mstat__stat { padding: 0 22px; }
}

@media screen and (max-width: 749px) {
  .bd-mstat__row {
    flex-direction: column;
    gap: 12px;
  }

  .bd-mstat__stat {
    padding: 0;
    justify-content: center;
  }

  /* Vertical rules make no sense once the row stacks. */
  .bd-mstat__divider { display: none; }
}

/* ============================================================
   BD Ministry Categories — bd-ministry-categories.liquid
   Page-specific: shares nothing with .bd-product-slider /
   .bd-feat-col__*, which templates/index.json renders.
   ============================================================ */

/* Tag-qualified to outrank the late .color-scheme-* background rule. */
/* An anchor jump puts the target at viewport top — which on this site is
   underneath the sticky header, and underneath the event-buttons row when
   that is pinned too. Same allowance the other anchored sections use. */
section.bd-mcat[id] {
  scroll-margin-top: calc(var(--bd-header-stuck-height, 120px) + 20px);
}

section.bd-mcat {
  background: var(--bmcat-bg, #ffffff);
}

.bd-mcat__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 34px var(--page-margin);
}

.bd-mcat__heading {
  margin: 0 0 22px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bmcat-heading-color, #10233F);
  text-align: center;
}

/* ── Category pills ─────────────────────────────────── */

.bd-mcat__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 700px;
  margin: 0 auto 28px;
}

.bd-mcat__tab {
  flex: 0 0 auto;
  min-width: 190px;
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--bmcat-pill-bg, #0B2A5F);
  color: var(--bmcat-pill-color, #fff);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.bd-mcat__tab:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

.bd-mcat__tab.is-active {
  background: var(--bmcat-pill-active-bg, #B31942);
}

.bd-mcat__tab:focus-visible {
  outline: 2px solid var(--bmcat-pill-active-bg, #B31942);
  outline-offset: 3px;
}

/* One row on desktop.

   They wrapped because the row is capped at 700px while each pill claims a
   190px minimum — six of those need roughly 1200px. Dropping the cap and the
   minimum lets each pill size to its own label, which comes to about 990px
   for the current six inside a 1200px container.

   Scoped to desktop: the narrow-screen rules below deliberately keep two per
   row, which stays comfortable to tap. */
@media screen and (min-width: 990px) {
  .bd-mcat__tabs {
    flex-wrap: nowrap;
    max-width: none;
  }

  .bd-mcat__tab {
    /* Sized by its label rather than a fixed floor. nowrap stops a two-word
       label like "Backlit Lightboxes" breaking onto a second line and
       making that one pill taller than its neighbours. */
    min-width: 0;
    white-space: nowrap;
  }
}

/* ── Panels ─────────────────────────────────────────── */

.bd-mcat__panel[hidden] { display: none; }

.bd-mcat__empty {
  margin: 0;
  padding: 28px 0;
  color: rgba(16, 19, 26, 0.55);
  font-size: 14px;
  text-align: center;
}

/* ── Track ──────────────────────────────────────────── */

.bd-mcat__track {
  display: flex;
  gap: var(--bmcat-gap, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bd-mcat__track::-webkit-scrollbar { display: none; }

.bd-mcat__item {
  flex: 0 0 auto;
  /* N full cards plus a sliver of the next, at any container width. */
  width: calc((100% - var(--bmcat-gap-total, 64px)) / var(--bmcat-divisor, 4.1));
  scroll-snap-align: start;
}

/* ── Card ───────────────────────────────────────────── */

/* ── Grid layout ─────────────────────────────────────

   The default track is a horizontal scroller: flex, overflow-x, scroll-snap,
   with each item claiming a fraction of the width so a sliver of the next
   card peeks in. Grid mode turns all of that off rather than working around
   it — the scroll properties are inert once nothing overflows, but leaving
   scroll-snap on a grid makes keyboard focus jump oddly.

   The item width is reset to auto so the grid track decides it; the calc()
   on .bd-mcat__item is tied to the carousel divisor and would fight the
   columns. */
.bd-mcat--grid .bd-mcat__track {
  display: grid;
  grid-template-columns: repeat(var(--bmcat-cols, 4), minmax(0, 1fr));
  overflow-x: visible;
  scroll-snap-type: none;
}

.bd-mcat--grid .bd-mcat__item {
  width: auto;
  scroll-snap-align: none;
}

@media screen and (max-width: 989px) {
  /* Four across is unreadable on a tablet. The carousel rules further down
     set an explicit item width per breakpoint, so grid mode overrides it at
     each one. */
  .bd-mcat--grid .bd-mcat__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bd-mcat--grid .bd-mcat__item { width: auto; }
}

@media screen and (max-width: 749px) {
  .bd-mcat--grid .bd-mcat__item { width: auto; }
}

.bd-mcat__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 14px;
  border: 1px solid var(--bmcat-card-border, #e5e8ee);
  border-radius: 6px;
  background: var(--bmcat-card-bg, #fff);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bd-mcat__card:hover {
  border-color: var(--bmcat-title-color, #0B2A5F);
  box-shadow: 0 6px 18px rgba(11, 42, 95, 0.12);
}

.bd-mcat__card-link {
  display: block;
  text-decoration: none;
}

.bd-mcat__media {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--bmcat-media-bg, #f7f8fa);
}

.bd-mcat__image,
.bd-mcat__placeholder-svg {
  display: block;
  width: 100%;
  height: 100%;
  /* Contain, not cover: product shots must not be cropped. */
  object-fit: contain;
}

.bd-mcat__placeholder-svg {
  fill: rgba(16, 19, 26, 0.12);
}

.bd-mcat__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 12px 14px 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bmcat-title-color, #0B2A5F);
}

.bd-mcat__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 7px 14px 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(16, 19, 26, 0.55);
}

/* Pushes the price and button to the card foot so every card lines up. */
.bd-mcat__price {
  margin: auto 14px 0;
  padding-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.bd-mcat__price-prefix {
  font-size: 11px;
  color: rgba(16, 19, 26, 0.55);
}

.bd-mcat__price-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--bmcat-title-color, #0B2A5F);
}

.bd-mcat__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  margin: 10px 14px 0;
  border: 1px solid var(--bmcat-card-border, #e5e8ee);
  border-radius: 4px;
  background: #fff;
  color: var(--bmcat-title-color, #0B2A5F);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.bd-mcat__btn:hover {
  border-color: var(--bmcat-title-color, #0B2A5F);
  background: rgba(11, 42, 95, 0.05);
}

/* ── Arrows ─────────────────────────────────────────── */

.bd-mcat__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.bd-mcat__nav[hidden] { display: none; }

.bd-mcat__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(16, 19, 26, 0.16);
  border-radius: 50%;
  background: #fff;
  color: #10131a;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.bd-mcat__arrow:hover:not(:disabled) {
  border-color: rgba(16, 19, 26, 0.4);
  background: #f4f4f6;
}

.bd-mcat__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Responsive ─────────────────────────────────────── */

@media screen and (max-width: 989px) {
  .bd-mcat__tabs { max-width: none; }

  .bd-mcat__tab { min-width: 150px; }

  .bd-mcat__item { width: calc((100% - 32px) / 2.3); }
}

@media screen and (max-width: 749px) {
  .bd-mcat__inner { padding: 26px var(--page-margin); }

  .bd-mcat__heading { font-size: 15px; }

  .bd-mcat__tabs {
    gap: 8px;
    margin-bottom: 20px;
  }

  .bd-mcat__tab {
    min-width: 0;
    flex: 1 1 calc(50% - 8px);
    padding: 9px 14px;
    font-size: 12px;
  }

  .bd-mcat__item { width: calc((100% - 16px) / 1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .bd-mcat__track { scroll-behavior: auto; }

  .bd-mcat__tab,
  .bd-mcat__card,
  .bd-mcat__btn { transition: none; }

  .bd-mcat__tab:hover { transform: none; }
}

/* ============================================================
   BD Ministry Get Started — bd-ministry-getstarted.liquid
   Page-specific; shares nothing with other sections.
   ============================================================ */

/* Tag-qualified to outrank the late .color-scheme-* background rule. */
section.bd-mget {
  background: var(--bmget-bg, #f0f0f2);
}

.bd-mget__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 34px var(--page-margin) 40px;
}

.bd-mget__heading {
  margin: 0 0 26px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bmget-heading-color, #10233F);
  text-align: center;
}

/* Explicit tracks, not auto-fit: a hidden column must leave its track empty
   rather than letting the visible entry option stretch across the whole row. */
.bd-mget__grid {
  display: grid;
  grid-template-columns: repeat(var(--bmget-cols, 3), minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.bd-mget__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Needed explicitly: .bd-mget__col's display would otherwise beat the UA
   [hidden] rule and the secondary columns would never hide. */
.bd-mget__col[hidden] { display: none; }

/* ── Option (column head) ───────────────────────────── */

/* Grid, not flex: the hint sits in row 2 of the + button's column so it
   lands directly under the +, and stays in flow rather than overlapping. */
.bd-mget__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
}

/* Fixed 34px track: the hint is wider than the + and must overflow the track
   instead of stretching it, which would shove the option pill leftwards. */
.bd-mget__head--plus {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.bd-mget__option { grid-column: 1; grid-row: 1; }
.bd-mget__plus   { grid-column: 2; grid-row: 1; }

.bd-mget__head .bd-mget__hint {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}

.bd-mget__head--plus .bd-mget__hint {
  grid-column: 2;
  justify-self: center;
  width: max-content;
  max-width: 210px;
}

.bd-mget__option {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 18px;
  border: 1px solid var(--bmget-card-border, #dfe3ea);
  border-radius: 8px;
  background: var(--bmget-card-bg, #fff);
  color: var(--bmget-text, #10233F);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bd-mget__option:hover,
.bd-mget__option[aria-expanded='true'] {
  border-color: var(--bmget-accent, #B31942);
  box-shadow: 0 4px 14px rgba(16, 35, 63, 0.1);
}

.bd-mget__plus {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--bmget-card-border, #dfe3ea);
  border-radius: 8px;
  background: var(--bmget-card-bg, #fff);
  color: var(--bmget-text, #10233F);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.bd-mget__plus:hover {
  border-color: var(--bmget-accent, #B31942);
}

/* Rotates into an x, so the control reads as a toggle. */
.bd-mget__plus[aria-expanded='true'] {
  transform: rotate(45deg);
  border-color: var(--bmget-accent, #B31942);
  color: var(--bmget-accent, #B31942);
}

.bd-mget__option:focus-visible,
.bd-mget__plus:focus-visible,
.bd-mget__child:focus-visible,
.bd-mget__submit:focus-visible {
  outline: 2px solid var(--bmget-accent, #B31942);
  outline-offset: 2px;
}

.bd-mget__hint,
.bd-mget__note {
  margin: 0;
  padding: 7px 10px;
  border-radius: 5px;
  background: rgba(16, 35, 63, 0.06);
  color: rgba(16, 35, 63, 0.62);
  font-size: 11px;
  line-height: 1.4;
}

.bd-mget__note {
  max-width: 100%;
  width: 100%;
  margin-top: 4px;
  text-align: center;
}

/* ── Revealed sub-options ───────────────────────────── */

.bd-mget__panel[hidden] { display: none; }

.bd-mget__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Sets the revealed group apart from its option instead of it reading as
     one continuous stack. Collapses with the panel, since [hidden] wins. */
  margin-top: 14px;
}

.bd-mget__child {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--bmget-card-border, #dfe3ea);
  border-radius: 6px;
  background: var(--bmget-card-bg, #fff);
  color: var(--bmget-text, #10233F);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.bd-mget__child:hover {
  border-color: var(--bmget-accent, #B31942);
  background: rgba(179, 25, 66, 0.03);
}

/* ── Form ───────────────────────────────────────────── */

.bd-mget__form-wrap[hidden] { display: none; }

.bd-mget__form-wrap {
  padding: 16px;
  border: 1px solid var(--bmget-card-border, #dfe3ea);
  border-radius: 8px;
  background: var(--bmget-card-bg, #fff);
}

.bd-mget__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bd-mget__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bd-mget__field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bmget-text, #10233F);
}

.bd-mget__field input,
.bd-mget__field select,
.bd-mget__field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--bmget-card-border, #dfe3ea);
  border-radius: 5px;
  background: #fff;
  color: var(--bmget-text, #10233F);
  font-family: inherit;
  font-size: 13px;
}

.bd-mget__field textarea { resize: vertical; }

.bd-mget__field input:focus,
.bd-mget__field select:focus,
.bd-mget__field textarea:focus {
  outline: 2px solid var(--bmget-accent, #B31942);
  outline-offset: 1px;
  border-color: var(--bmget-accent, #B31942);
}

.bd-mget__field input[aria-invalid='true'] {
  border-color: var(--bmget-accent, #B31942);
}

.bd-mget__field-help {
  font-size: 10.5px;
  line-height: 1.4;
  color: rgba(16, 35, 63, 0.55);
}

.bd-mget__error {
  margin: 0;
  color: var(--bmget-accent, #B31942);
  font-size: 11.5px;
}

.bd-mget__error[hidden],
/* [hidden] is only a UA-stylesheet display:none, so ANY author display rule
   outranks it — and .bd-mget__form sets display:flex. Without this,
   form.hidden = true left the whole form on screen with the confirmation
   stacked underneath instead of replacing it. */
.bd-mget__form[hidden] { display: none; }

.bd-mget__success[hidden] { display: none; }

/* Now that the form actually disappears, the confirmation is the only thing
   left in the card — a line of 13px body text read as though nothing had
   happened. */
.bd-mget__success {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #b7e0c4;
  border-radius: 8px;
  background: #f1f9f4;
  font-size: 14px;
  line-height: 1.5;
  color: #14532d;
}

.bd-mget__success::before {
  content: '\2713';
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

.bd-mget__success-ref[hidden] { display: none; }

.bd-mget__success-ref {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--bmget-muted, #5b6472);
}

.bd-mget__submit {
  padding: 11px 18px;
  border: 1px solid var(--bmget-accent, #B31942);
  border-radius: 6px;
  background: var(--bmget-accent, #B31942);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.bd-mget__submit:hover:not(:disabled) {
  background: #8f1433;
  border-color: #8f1433;
}

.bd-mget__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── Responsive ─────────────────────────────────────── */

@media screen and (max-width: 749px) {
  .bd-mget__inner { padding: 26px var(--page-margin) 30px; }

  .bd-mget__heading { font-size: 17px; margin-bottom: 20px; }

  .bd-mget__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .bd-mget__col[hidden] { display: none; }

  .bd-mget__option { font-size: 13.5px; }

  .bd-mget__head--plus .bd-mget__hint { max-width: 160px; margin-left: -100px;}
}

@media (prefers-reduced-motion: reduce) {
  .bd-mget__option,
  .bd-mget__plus,
  .bd-mget__child,
  .bd-mget__submit { transition: none; }
}

/* ============================================================
   BD Ministry CTA — bd-ministry-cta.liquid
   ============================================================ */

/* Tag-qualified to outrank the late .color-scheme-* background rule. */
section.bd-mcta {
  background: var(--bmcta-outer-bg, #ffffff);
}

.bd-mcta__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 20px var(--page-margin);
}

.bd-mcta__panel {
  padding: var(--bmcta-padding, 44px) 28px;
  border-radius: var(--bmcta-radius, 12px);
  background: var(--bmcta-bg, #B31942);
  color: var(--bmcta-text, #fff);
  text-align: center;
}

.bd-mcta__heading {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bmcta-text, #fff);
}

.bd-mcta__text {
  max-width: 640px;
  margin: 0 auto 26px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--bmcta-text, #fff);
  opacity: 0.94;
}

.bd-mcta__text p { margin: 0; }

.bd-mcta__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.bd-mcta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 22px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bd-mcta__btn--outline {
  border: 1px solid var(--bmcta-text, #fff);
  background: transparent;
  color: var(--bmcta-text, #fff);
}

.bd-mcta__btn--outline:hover {
  background: var(--bmcta-text, #fff);
  color: var(--bmcta-bg, #B31942);
}

.bd-mcta__btn--solid {
  border: 1px solid var(--bmcta-text, #fff);
  background: var(--bmcta-text, #fff);
  color: var(--bmcta-bg, #B31942);
}

.bd-mcta__btn--solid:hover {
  background: transparent;
  color: var(--bmcta-text, #fff);
}

.bd-mcta__btn:focus-visible {
  outline: 2px solid var(--bmcta-text, #fff);
  outline-offset: 3px;
}

@media screen and (max-width: 749px) {
  .bd-mcta__inner  { padding: 14px var(--page-margin); }
  .bd-mcta__panel  { padding: 30px 18px; }
  .bd-mcta__heading{ font-size: 19px; }
  .bd-mcta__text   { font-size: 13px; margin-bottom: 20px; }

  .bd-mcta__buttons {
    flex-direction: column;
    gap: 10px;
  }

  .bd-mcta__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-mcta__btn { transition: none; }
}

/* ============================================================
   BD Ministry Marquee — bd-ministry-marquee.liquid
   ============================================================ */

/* Tag-qualified to outrank the late .color-scheme-* background rule. */
section.bd-mmq {
  background: var(--bmmq-bg, #111c2e);
  color: var(--bmmq-text, #ffffff);
  padding: var(--bmmq-padding, 13px) 0;
  overflow: hidden;
}

.bd-mmq__track {
  display: flex;
  width: max-content;
  animation: bd-mmq-scroll var(--bmmq-speed, 34s) linear infinite;
}

.bd-mmq__set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.bd-mmq__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 calc(var(--bmmq-gap, 56px) / 2);
  color: var(--bmmq-text, #fff);
  font-size: var(--bmmq-size, 13px);
  line-height: 1.3;
  white-space: nowrap;
}

/* Border on the item, not a separate element, so the duplicated set keeps
   an even rhythm across the seam. */
.bd-mmq--dividers .bd-mmq__item + .bd-mmq__item,
.bd-mmq--dividers .bd-mmq__set + .bd-mmq__set .bd-mmq__item:first-child {
  border-left: 1px solid rgb(255 255 255 / 0.18);
}

.bd-mmq__tick {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--bmmq-tick, #7FB069);
}

.bd-mmq__label {
  display: block;
}

@keyframes bd-mmq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.bd-mmq:hover .bd-mmq__track {
  animation-play-state: paused;
}

@media screen and (max-width: 749px) {
  .bd-mmq__item { padding: 0 calc(var(--bmmq-gap, 56px) / 2.6); }
}

@media (prefers-reduced-motion: reduce) {
  /* Stop the scroll, but keep the content reachable by hand. */
  .bd-mmq {
    overflow-x: auto;
  }

  .bd-mmq__track {
    animation: none;
  }

  /* The duplicate set is decorative — hide it once nothing is moving. */
  .bd-mmq__set + .bd-mmq__set {
    display: none;
  }
}

/* ============================================================
/* ============================================================
   BD Ministry Our Work — bd-ministry-work.liquid
   Centred slide at full clarity, neighbours peeking either side.
   ============================================================ */

/* Tag-qualified to outrank the late .color-scheme-* background rule. */
section.bd-mwk {
  background: var(--bmwk-bg, #ffffff);
}

.bd-mwk__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 30px var(--page-margin) 34px;
}

.bd-mwk__heading {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bmwk-heading-color, #10233F);
  text-align: center;
}

/* Stage is wide enough for the centre slide plus both peeks. Liquid works
   out the width from slide width, peek amount and gap. */
.bd-mwk__stage {
  position: relative;
  max-width: var(--bmwk-stage-width, 1080px);
  margin: 0 auto;
}

/* Soft fade so peeking neighbours dissolve into the background instead of
   ending on a hard vertical cut. */
.bd-mwk--fade .bd-mwk__stage {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 9%,
    #000 91%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 9%,
    #000 91%,
    transparent 100%
  );
}

.bd-mwk__track {
  display: flex;
  gap: var(--bmwk-gap, 20px);
  margin: 0;
  /* Half the leftover stage width, so slide one can sit dead centre with its
     neighbour peeking, rather than being pinned to the left edge. */
  padding: 0 calc((100% - var(--bmwk-slide-width, 520px)) / 2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bd-mwk__track::-webkit-scrollbar { display: none; }

.bd-mwk__slide {
  flex: 0 0 var(--bmwk-slide-width, 520px);
  scroll-snap-align: center;
  transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
}

/* ── Peek treatment: dim + shrink the neighbours (default) ─── */

.bd-mwk--dim .bd-mwk__slide {
  opacity: 0.42;
  transform: scale(0.92);
}

.bd-mwk--dim .bd-mwk__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* ── Peek treatment: blur (kept as an option, not the default) ── */

.bd-mwk--blur .bd-mwk__slide {
  opacity: 0.75;
  filter: blur(5px);
  transform: scale(0.94);
}

.bd-mwk--blur .bd-mwk__slide.is-active {
  opacity: 1;
  filter: none;
  transform: scale(1);
}

/* ── Peek treatment: plain, every slide equal ────────────── */

.bd-mwk--plain .bd-mwk__slide {
  opacity: 1;
  transform: none;
  filter: none;
}

.bd-mwk__media {
  display: block;
  aspect-ratio: var(--bmwk-ratio, 4 / 3);
  overflow: hidden;
  border-radius: var(--bmwk-radius, 8px);
  background: #eef0f3;
  text-decoration: none;
}

.bd-mwk__image,
.bd-mwk__placeholder-svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--bmwk-fit, cover);
}

.bd-mwk__placeholder-svg {
  fill: rgba(16, 19, 26, 0.12);
}

a.bd-mwk__media:focus-visible {
  outline: 2px solid var(--bmwk-dot-active, #0B2A5F);
  outline-offset: 3px;
}

/* Only the centre slide's caption shows — three at once reads as clutter. */
.bd-mwk__caption {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--bmwk-heading-color, #10233F);
  text-align: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.bd-mwk__slide.is-active .bd-mwk__caption {
  opacity: 1;
}

.bd-mwk--plain .bd-mwk__caption { opacity: 1; }

/* ── Navigation ─────────────────────────────────────── */

.bd-mwk__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}

.bd-mwk__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(16, 19, 26, 0.16);
  border-radius: 50%;
  background: #fff;
  color: #10131a;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.bd-mwk__arrow:hover {
  border-color: rgba(16, 19, 26, 0.4);
  background: #f4f4f6;
}

.bd-mwk__arrow:focus-visible {
  outline: 2px solid var(--bmwk-dot-active, #0B2A5F);
  outline-offset: 2px;
}

.bd-mwk__dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.bd-mwk__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bmwk-dot, #c9d0da);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.bd-mwk__dot.is-active {
  background: var(--bmwk-dot-active, #0B2A5F);
  transform: scale(1.35);
}

.bd-mwk__dot:focus-visible {
  outline: 2px solid var(--bmwk-dot-active, #0B2A5F);
  outline-offset: 3px;
}

/* ── Responsive ─────────────────────────────────────── */

@media screen and (max-width: 989px) {
  /* Peeks eat too much of a tablet width — shrink them right down. */
  .bd-mwk__slide { flex-basis: min(var(--bmwk-slide-width, 520px), 74vw); }
  .bd-mwk__track { padding: 0 calc((100% - min(var(--bmwk-slide-width, 520px), 74vw)) / 2); }
}

@media screen and (max-width: 749px) {
  .bd-mwk__inner   { padding: 22px var(--page-margin) 26px; }
  .bd-mwk__heading { font-size: 16px; margin-bottom: 16px; }
  .bd-mwk__caption { font-size: 12.5px; }
  .bd-mwk__nav     { margin-top: 14px; }

  .bd-mwk__slide { flex-basis: 82vw; }
  .bd-mwk__track { padding: 0 calc((100% - 82vw) / 2); gap: 12px; }

  /* Blur is the most expensive treatment and the least useful on a phone. */
  .bd-mwk--blur .bd-mwk__slide { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-mwk__track { scroll-behavior: auto; }

  .bd-mwk__slide,
  .bd-mwk__caption,
  .bd-mwk__arrow,
  .bd-mwk__dot { transition: none; }

  .bd-mwk__dot.is-active { transform: none; }

  /* Scale shifts are motion; dimming alone still marks the centre slide. */
  .bd-mwk--dim .bd-mwk__slide,
  .bd-mwk--blur .bd-mwk__slide { transform: none; }
}

/* ============================================================
   BD Ministry Testimonials — bd-ministry-testimonials.liquid
   ============================================================ */

/* Tag-qualified to outrank the late .color-scheme-* background rule. */
section.bd-mts {
  background: var(--bmts-bg, #ececee);
}

.bd-mts__inner {
  max-width: var(--bmts-max-width, 700px);
  margin: 0 auto;
  padding: var(--bmts-padding, 44px) var(--page-margin);
  text-align: center;
}

.bd-mts__mark {
  margin: 0 0 18px;
  font-family: var(--bmts-family, Georgia, serif);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--bmts-mark-color, #C8A34A);
}

/* ── Track ──────────────────────────────────────────── */

.bd-mts__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bd-mts__track::-webkit-scrollbar { display: none; }

/* Focusable so arrow keys scroll it, but the ring belongs on the whole
   group rather than nothing at all. */
.bd-mts__track:focus-visible {
  outline: 2px solid var(--bmts-dot-active, #C8A34A);
  outline-offset: 6px;
  border-radius: 4px;
}

.bd-mts__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-mts__quote {
  margin: 0;
  padding: 0;
}

/* Thin rule to the left of the quote, as in the design. Padding keeps the
   centred text clear of it rather than shifted by it. */
.bd-mts--rule .bd-mts__quote {
  border-left: 1px solid rgb(27 42 74 / 0.16);
  padding-left: 26px;
}

.bd-mts__text {
  font-family: var(--bmts-family, Georgia, serif);
  font-size: var(--bmts-quote-size, 19px);
  font-style: italic;
  font-weight: 700;
  line-height: 1.55;
  color: var(--bmts-quote-color, #1B2A4A);
}

.bd-mts__text p { margin: 0; }

.bd-mts__author {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.5;
}

.bd-mts__name {
  font-weight: 700;
  color: var(--bmts-name-color, #1B2A4A);
}

.bd-mts__role {
  color: var(--bmts-role-color, #6B7280);
}

/* ── Dots ───────────────────────────────────────────── */

.bd-mts__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 34px;
}

.bd-mts__dot {
  width: 9px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--bmts-dot, #1B2A4A);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}

/* Active dot widens as well as changing colour, so it is distinguishable
   without relying on colour alone. */
.bd-mts__dot.is-active {
  width: 15px;
  background: var(--bmts-dot-active, #C8A34A);
}

.bd-mts__dot:focus-visible {
  outline: 2px solid var(--bmts-dot-active, #C8A34A);
  outline-offset: 3px;
}

/* ── Responsive ─────────────────────────────────────── */

@media screen and (max-width: 749px) {
  .bd-mts__inner { padding: 30px var(--page-margin); }
  .bd-mts__mark  { font-size: 32px; margin-bottom: 14px; }
  .bd-mts__text  { font-size: max(15px, calc(var(--bmts-quote-size, 19px) - 3px)); }
  .bd-mts__dots  { margin-top: 24px; }

  .bd-mts--rule .bd-mts__quote {
    border-left: 0;
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-mts__track { scroll-behavior: auto; }
  .bd-mts__dot   { transition: none; }
}

/* ============================================================
   BD Ministry FAQ — bd-ministry-faq.liquid
   ============================================================ */

/* Tag-qualified to outrank the late .color-scheme-* background rule. */
section.bd-mfaq {
  background: var(--bmfaq-bg, #ffffff);
}

.bd-mfaq__inner {
  max-width: var(--bmfaq-max-width, 720px);
  margin: 0 auto;
  padding: 40px var(--page-margin) 46px;
}

.bd-mfaq__eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--bmfaq-eyebrow, #A98A4B);
  text-align: center;
}

.bd-mfaq__heading {
  margin: 0 0 34px;
  font-family: var(--bmfaq-family, Georgia, serif);
  font-size: var(--bmfaq-heading-size, 34px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--bmfaq-heading, #152238);
  text-align: center;
}

/* ── Accordion ──────────────────────────────────────── */

.bd-mfaq__item {
  border-top: 1px solid var(--bmfaq-rule, #e4e6ea);
}

.bd-mfaq__item:last-child {
  border-bottom: 1px solid var(--bmfaq-rule, #e4e6ea);
}

.bd-mfaq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--bmfaq-question, #243A5E);
  /* Both needed to drop the native disclosure triangle. */
  list-style: none;
}

.bd-mfaq__item .bd-mfaq__question:hover {
  color: #0A3161;
}

.bd-mfaq__question::-webkit-details-marker {
  display: none;
}

.bd-mfaq__question:focus-visible {
  outline: 2px solid var(--bmfaq-icon, #A98A4B);
  outline-offset: 2px;
  border-radius: 3px;
}

.bd-mfaq__question-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Drawn from two pseudo-elements so the horizontal bar can stay while the
   vertical one rotates away — a + turning into a −. */
.bd-mfaq__icon {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
}

.bd-mfaq__icon::before,
.bd-mfaq__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--bmfaq-icon, #A98A4B);
}

.bd-mfaq__icon::before {
  width: 13px;
  height: 1.5px;
}

.bd-mfaq__icon::after {
  width: 1.5px;
  height: 13px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.bd-mfaq__item[open] .bd-mfaq__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.bd-mfaq__answer {
  padding: 0 2px 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--bmfaq-answer, #4A5568);
}

.bd-mfaq__answer > :first-child { margin-top: 0; }
.bd-mfaq__answer > :last-child  { margin-bottom: 0; }

@media screen and (max-width: 749px) {
  .bd-mfaq__inner   { padding: 30px var(--page-margin) 34px; }
  .bd-mfaq__heading { font-size: max(22px, calc(var(--bmfaq-heading-size, 34px) - 10px)); margin-bottom: 24px; }
  .bd-mfaq__question{ font-size: 13.5px; padding: 15px 2px; gap: 14px; }
  .bd-mfaq__answer  { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-mfaq__icon::after { transition: none; }
}

/* ============================================================
   BD Ministry Highlights — bd-ministry-highlights.liquid
   ============================================================ */

/* Tag-qualified to outrank the late .color-scheme-* background rule. */
section.bd-mhl {
  background: var(--bmhl-bg, #f2f2f3);
}

.bd-mhl__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 34px var(--page-margin) 38px;
}

.bd-mhl__heading {
  margin: 0 0 22px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bmhl-title, #10131a);
  text-align: center;
}

.bd-mhl__grid {
  display: grid;
  grid-template-columns: repeat(var(--bmhl-columns, 2), minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-mhl__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--bmhl-card-border, #dcdfe4);
  border-radius: var(--bmhl-radius, 6px);
  background: var(--bmhl-card-bg, #fff);
}

.bd-mhl__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bd-mhl__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--bmhl-badge-bg, #1B2430);
  color: var(--bmhl-badge-icon, #fff);
  overflow: hidden;
}

.bd-mhl__badge-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.bd-mhl__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bmhl-title, #10131a);
}

.bd-mhl__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--bmhl-text, #2c3138);
}

.bd-mhl__text > :first-child { margin-top: 0; }
.bd-mhl__text > :last-child  { margin-bottom: 0; }

@media screen and (max-width: 749px) {
  .bd-mhl__inner { padding: 24px var(--page-margin) 28px; }
  .bd-mhl__grid  { grid-template-columns: 1fr; gap: 14px; }
  .bd-mhl__card  { padding: 18px; gap: 14px; }
  .bd-mhl__text  { font-size: 13px; }
}

/* ============================================================
   BD Contact Us — bd-contact-us.liquid
   ============================================================ */

/* Tag-qualified to outrank the late .color-scheme-* background rule. */
section.bd-cus {
  background: var(--bcus-bg, #ffffff);
}

.bd-cus__inner {
  max-width: var(--bcus-max-width, 1100px);
  margin: 0 auto;
  padding: 34px var(--page-margin) 60px;
}

.bd-cus__heading {
  margin: 0 0 34px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bcus-heading, #0B2A5F);
  text-align: center;
}

/* Form wider than the details, as in the design. */
.bd-cus__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--bcus-gap, 60px);
  align-items: start;
}

/* ── Form ───────────────────────────────────────────── */

.bd-cus__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bd-cus__field {
  display: flex;
  flex-direction: column;
}

/* Visually hidden, still read out. Placeholder-only fields lose their name
   the moment someone types. */
.bd-cus__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.bd-cus__field input,
.bd-cus__message {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--bcus-field-border, #d8dbe0);
  border-radius: 2px;
  background: #fff;
  color: var(--bcus-text, #3d4450);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
}

.bd-cus__field input::placeholder,
.bd-cus__message::placeholder {
  color: rgba(61, 68, 80, 0.55);
}

.bd-cus__field input:focus,
.bd-cus__message:focus {
  outline: 2px solid var(--bcus-heading, #0B2A5F);
  outline-offset: 1px;
  border-color: var(--bcus-heading, #0B2A5F);
}

.bd-cus__field input[aria-invalid='true'] {
  border-color: #B31942;
}

.bd-cus__message {
  height: var(--bcus-message-height, 210px);
  resize: vertical;
}

/* Matches .product-design-main__outline-button (the Request Custom Size
   Quote button): 42px pill, 13px regular weight, no uppercase. Hover uses
   brightness rather than a hardcoded darker red, since the colour here is a
   theme setting and a fixed hover value would not follow it. */
.bd-cus__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 10px 24px;
  border: 1px solid var(--bcus-button-bg, #B31942);
  border-radius: 999px;
  background: var(--bcus-button-bg, #B31942);
  color: var(--bcus-button-text, #fff);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.bd-cus__submit:hover {
  filter: brightness(0.9);
  transform: scale(1.03);
}

.bd-cus__submit:focus-visible {
  outline: 2px solid var(--bcus-heading, #0B2A5F);
  outline-offset: 2px;
}

.bd-cus__success {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgb(0 128 0 / 0.35);
  border-radius: 2px;
  background: rgb(0 128 0 / 0.07);
  color: #14611a;
  font-size: 13.5px;
  line-height: 1.5;
}

.bd-cus__errors {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgb(179 25 66 / 0.35);
  border-radius: 2px;
  background: rgb(179 25 66 / 0.05);
  color: #8f1433;
  font-size: 13px;
  line-height: 1.5;
}

.bd-cus__errors-title {
  margin: 0 0 4px;
  font-weight: 700;
}

.bd-cus__errors ul {
  margin: 0;
  padding-left: 18px;
}

/* ── Details ────────────────────────────────────────── */

.bd-cus__details {
  color: var(--bcus-text, #3d4450);
  font-size: 14px;
  line-height: 1.6;
}

/* No font-size here on purpose: without it an h2/h3/h4 keeps the theme's own
   size for that level, so the heading-level setting visibly does something. */
.bd-cus__intro-heading {
  margin: 0 0 10px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bcus-label, #0B2A5F);
}

.bd-cus__intro-heading--sized {
  font-size: var(--bcus-intro-size, 15px);
}

.bd-cus__intro-text {
  margin: 0 0 28px;
}

.bd-cus__intro-text p { margin: 0; }

.bd-cus__detail {
  margin-bottom: 22px;
}

.bd-cus__detail:last-child { margin-bottom: 0; }

/* No font-size, same reasoning as the intro heading: leaving it off lets the
   theme's own h2/h3/h4 sizing apply so the level setting is visible. */
.bd-cus__detail-label {
  margin: 0 0 4px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bcus-label, #0B2A5F);
}

.bd-cus__detail-label--sized {
  font-size: var(--bcus-detail-size, 14px);
}

.bd-cus__detail-text p { margin: 0; }

/* ── Responsive ─────────────────────────────────────── */

@media screen and (max-width: 989px) {
  .bd-cus__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  /* Details above the form on narrow screens: address and phone are what
     most people came for, and they should not sit below a long form. */
  .bd-cus__details  { order: 1; }
  .bd-cus__form-col { order: 2; }
}

@media screen and (max-width: 749px) {
  .bd-cus__inner   { padding: 24px var(--page-margin) 40px; }
  .bd-cus__heading { font-size: 22px; margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-cus__submit { transition: none; }
  .bd-cus__submit:hover { transform: none; }
}

/* ============================================================
   BD 404 — bd-404.liquid
   ============================================================ */

/* Tag-qualified to outrank the late .color-scheme-* background rule. */
section.bd-404 {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--b404-min-height, 480px);
  padding: 60px var(--page-margin);
  overflow: hidden;
  background: linear-gradient(
    var(--b404-angle, 150deg),
    var(--b404-from, #0B2A5F) 0%,
    var(--b404-to, #1B4A8F) 100%
  );
  text-align: center;
}

.bd-404__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkens the image only — the gradient underneath stays as authored. */
.bd-404__scrim {
  position: absolute;
  inset: 0;
  background: #000;
}

.bd-404__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

/* Deliberately not the h1 — see the section's comment. */
.bd-404__code {
  margin: 0 0 8px;
  font-size: var(--b404-code-size, 120px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--b404-code-color, #fff);
}

.bd-404__heading {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--b404-heading-color, #A9C4F0);
}

.bd-404__text {
  margin: 0 auto 30px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--b404-text-color, #dfe7f5);
}

.bd-404__text p { margin: 0; }

/* ── Buttons ────────────────────────────────────────── */

.bd-404__buttons-heading {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--b404-text-color, #dfe7f5);
}

.bd-404__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.bd-404__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.bd-404__btn--solid {
  border: 1px solid #fff;
  background: #fff;
  color: var(--b404-from, #0B2A5F);
}

.bd-404__btn--solid:hover {
  transform: scale(1.03);
}

.bd-404__btn--outline {
  border: 1px solid rgb(255 255 255 / 0.55);
  background: transparent;
  color: #fff;
}

.bd-404__btn--outline:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 0.12);
  transform: scale(1.03);
}

.bd-404__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ── Optional search ────────────────────────────────── */

.bd-404__search {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

/* Visible label would crowd the hero; the placeholder repeats it. */
.bd-404__search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bd-404__search input {
  width: min(320px, 60vw);
  padding: 11px 16px;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
}

.bd-404__search input::placeholder {
  color: rgb(255 255 255 / 0.7);
}

.bd-404__search input:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.bd-404__search button {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #fff;
  color: var(--b404-from, #0B2A5F);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ── Responsive ─────────────────────────────────────── */

@media screen and (max-width: 749px) {
  section.bd-404 { padding: 44px var(--page-margin); }

  /* The number is the first thing to overflow a narrow screen. */
  .bd-404__code    { font-size: min(var(--b404-code-size, 120px), 26vw); }
  .bd-404__heading { font-size: 22px; }
  .bd-404__text    { font-size: 14.5px; margin-bottom: 24px; }

  .bd-404__buttons { flex-direction: column; width: 100%; }
  .bd-404__btn     { width: 100%; }

  .bd-404__search  { flex-direction: column; align-items: stretch; }
  .bd-404__search input { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-404__btn { transition: none; }
  .bd-404__btn:hover { transform: none; }
}

/* ============================================================
   BD Collection Gallery — tab bar arrows
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .bd-gallery__tabs { scroll-behavior: auto; }
  .bd-gallery__tabs-arrow { transition: none; }
}

/* ============================================================
   BD USP Marquee — bd-usp-marquee.liquid
   Light icon+label strip that scrolls continuously.
   Tag-qualified (0-1-1) so it outranks the .color-scheme-*
   background rule snippets/color-schemes.liquid emits after
   this stylesheet.
   ============================================================ */

section.bd-uspm {
  background: var(--buspm-bg, #f4f6f8);
  color: var(--buspm-text, #0a3161);
  padding: var(--buspm-padding, 16px) 0;
  overflow: hidden;
}

/* colour-mix keeps the hairline tied to the divider colour without a second
   setting; the fallback above it covers browsers that lack it. */
section.bd-uspm--borders {
  border-block: 1px solid rgb(10 49 97 / 0.12);
  border-block: 1px solid color-mix(in srgb, var(--buspm-line, #0a3161) 14%, transparent);
}

.bd-uspm__track {
  display: flex;
  width: max-content;
  animation: bd-uspm-scroll var(--buspm-speed, 38s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

/* Own compositor layer so the scroll runs on the GPU at the display's frame rate instead of
   repainting text every frame (that repaint is what made it shimmer) */
.bd-uspm__set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.bd-uspm__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 calc(var(--buspm-gap, 64px) / 2);
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.bd-uspm__item--link {
  text-decoration: none;
}

.bd-uspm__item--link:hover .bd-uspm__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Border on the item rather than a separate element, so the rhythm stays
   even across the seam between duplicated sets. */
.bd-uspm--dividers .bd-uspm__item + .bd-uspm__item,
.bd-uspm--dividers .bd-uspm__set + .bd-uspm__set .bd-uspm__item:first-child {
  border-left: 1px solid rgb(10 49 97 / 0.16);
  border-left: 1px solid color-mix(in srgb, var(--buspm-line, #0a3161) 18%, transparent);
}

.bd-uspm__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  color: var(--buspm-icon, #0a3161);
}

.bd-uspm__icon svg,
.bd-uspm__icon .bd-uspm__icon-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.bd-uspm__label {
  display: block;
}

@keyframes bd-uspm-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.bd-uspm:hover .bd-uspm__track {
  animation-play-state: paused;
}

@media screen and (max-width: 749px) {
  .bd-uspm__item {
    padding: 0 calc(var(--buspm-gap, 64px) / 2.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Stop the scroll, but keep the content reachable by hand. */
  section.bd-uspm {
    overflow-x: auto;
  }

  .bd-uspm__track {
    animation: none;
  }

  /* The duplicate sets are decorative — hide them once nothing moves. */
  .bd-uspm__set + .bd-uspm__set {
    display: none;
  }
}

/* ------------------------------------------------------------
   Sticky behaviour for the USP stripe.

   The stripe sits in the header group above .header-section, so by
   default it scrolls away while the header pins. These rules keep it
   pinned and drop the logo/search row in its place, so the pinned
   header stays the same overall height rather than growing.

   #header-group becomes display:contents once the header is sticky
   (sections/header.liquid), so both the stripe and .header-section
   position themselves against the viewport. The stripe takes top:0 and
   the header stacks directly beneath it — hence the offset top, which
   replaces the theme's -1px. The -1px is kept in the calc because
   assets/header.js watches the header with an IntersectionObserver at
   threshold 1 and needs that sub-pixel overlap to flip data-sticky-state.

/* Phones don't show the USP strip at all. Hidden on the inner section, not the wrapper:
   snippets/header-drawer.liquid forces the wrapper to display:block !important while the
   menu drawer is open, which would otherwise bring the strip back mid-tap. */
@media screen and (max-width: 749px) {
  #header-group > .bd-usp-marquee-wrapper .bd-uspm {
    display: none;
  }
}

   --bd-uspm-height is measured in custom.js: the strip's height depends
   on editor settings and shrinks at mobile widths, so it cannot be a
   fixed number here.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Collapse the announcement bar and USP marquee once the page has
   scrolled at all, instead of leaving the marquee pinned at the top
   forever (its own rule above still applies underneath this — with
   both now collapsing away first, that sticky positioning mostly never
   gets the chance to engage, which is fine; it is left in place rather
   than removed in case a fast scroll-to-anchor skips past the small
   threshold custom.js checks before this transition would run).

   .bd-topbars-hidden is toggled in custom.js's bdUspmStickyInit(),
   reusing the scroll listener that already exists there for
   .bd-header-stuck.

   max-height: 0, not display:none — collapses instead of vanishing
   instantly. min-height: 0 alongside it since grid-template-rows: 0fr
   was tried at one point and got stuck well above 0 (Chrome doesn't
   resolve 0fr to 0 in a height:auto grid container); min-height: 0
   here is just insurance against the same kind of floor showing up
   from a min-height somewhere in the cascade. */
/* .announcement-bar carries its own padding-block (the .spacing-style
   class, fed by section.settings via inline custom properties) on this
   same element — max-height: 0 clips the content but doesn't remove
   this element's own padding, so without this override it closed to
   the padding's height (~20px) instead of fully to 0. The marquee
   doesn't need the same treatment: its padding lives on the inner
   .bd-uspm child, which closes flush along with its parent. */
/* .bd-header-stuck comes from custom.js, not from the theme's own
   data-sticky-state. With sticky='always', assets/header.js derives that
   attribute solely from an IntersectionObserver on <header-component> at
   threshold 1 — but <header-component> is not the first thing inside
   .header-section: the navy utility bar sits above it. So even when the
   section is pinned, header-component's top lands ~40px down the
   viewport, stays fully intersecting, and the attribute never leaves
   'inactive'. (That is pre-existing, not a side effect of the sticky
   offset above.) A rect check against the section's own sticky offset is
   the reliable signal.

   The logo/search row (.header__row--top) used to be display:none while
   stuck, to keep the pinned header from growing tall once it sat below
   the still-visible marquee — that's no longer needed now the marquee
   (and announcement bar) collapse away on scroll instead of staying
   pinned (see the "Collapse the announcement bar and USP marquee" rules
   above), and the row is meant to stay visible regardless. That also
   retired #bd-header-spacer (existed only to backfill the row's flow
   height while it was hidden) and the --top-row-height override (existed
   only to fix a background-gradient boundary that hiding the row broke)
   — neither has anything left to do with the row never disappearing. */
#bd-header-spacer {
  height: 0;
}

@media screen and (min-width: 750px) {
  /* Anything that pins itself — the product details column, the
     collection sidebar — otherwise sticks at top:0 and slides under the
     header. The theme's own rule for this hangs off data-sticky-state,
     which never becomes active here (see above), so it never applied.

     --bd-header-stuck-height is what the pinned header actually paints:
     strip + utility bar + top row + menu row. custom.js's measure()
     includes the top row's height unconditionally now that it never
     hides — before, it was deliberately left out here because the row
     itself was gone while stuck. */
  html {
    --sticky-header-offset: calc(
      var(--bd-header-stuck-height, 120px) + var(--bd-sticky-gap, 24px)
    );
  }
}

/* The stripe is sticky at top:0 with a z-index above the header, so an open
   menu drawer slid out underneath it and left the strip floating over the
   panel. The drawer is a native <details>, so its open state is readable in
   CSS with no JS.

   display:none rather than a lower z-index: the drawer panel starts below
   the strip, so restacking would not cover it. The page is scroll-locked
   while the drawer is open, so removing the strip from flow costs nothing. */
body:has(#Details-menu-drawer-container[open]) #header-group > .bd-usp-marquee-wrapper {
  display: none;
}

/* ============================================================
   Floating WhatsApp + email buttons — snippets/bds-floating-contact.liquid

   Sits above Zoho SalesIQ's chat launcher, which occupies roughly the
   bottom 76px of the same corner. z-index stays below the loading veil so
   a cart update still covers everything.
   ============================================================ */

.bds-fab {
  position: fixed;
  right: 14px;
  bottom: 76px;
  z-index: 2147482000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bds-fab__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bds-fab__btn svg {
  width: 26px;
  height: 26px;
  display: block;
}

.bds-fab__btn:hover,
.bds-fab__btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.28);
}

.bds-fab__btn--whatsapp { background: #25d366; }
/* Brand red, the same value the menu row and primary buttons use. */
.bds-fab__btn--email    { background: #b31942; }

@media screen and (max-width: 749px) {
  .bds-fab {
    right: 14px;
    bottom: 84px;
    gap: 10px;
  }

  .bds-fab__btn {
    width: 46px;
    height: 46px;
  }

  .bds-fab__btn svg {
    width: 23px;
    height: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bds-fab__btn {
    transition: none;
  }

  .bds-fab__btn:hover,
  .bds-fab__btn:focus-visible {
    transform: none;
  }
}

/* ============================================================
   360 walkaround — product-design-main.liquid + pdm-360-thumb.liquid
   ============================================================ */

.product-design-main__thumb--360 {
  display: grid;
  place-items: center;
  gap: 2px;
  background: #0a3161;
  color: #fff;
  border: 0;
  cursor: pointer;
}

.product-design-main__thumb--360 svg { width: 34px; height: 24px; }
.product-design-main__thumb--360 span { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; }

/* Badge on the main image. */
.pdm-360-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 9px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.94);
  color: #0a3161;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.16);
  transition: background 0.16s ease, transform 0.16s ease;
}

.pdm-360-badge svg { width: 30px; height: 20px; }
.pdm-360-badge:hover { background: #fff; transform: translateY(-1px); }

/* The frame is the badge's positioning context. */
.product-design-main__image-frame { position: relative; }

/* Player */
.pdm-360 {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.pdm-360.is-open { display: flex; }

.pdm-360__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.78);
}

.pdm-360__box {
  position: relative;
  width: min(1040px, 100%);
}

.pdm-360__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  color: #111;
  cursor: pointer;
}

/* Fixed 16:9 box so the dialog does not resize once the embed loads. */
.pdm-360__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

.pdm-360__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media screen and (max-width: 749px) {
  .pdm-360 { padding: 16px; }
  .pdm-360-badge { top: 10px; left: 10px; font-size: 11px; padding: 6px 10px 6px 8px; }
  .pdm-360-badge svg { width: 26px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .pdm-360-badge { transition: none; }
  .pdm-360-badge:hover { transform: none; }
}

/* ============================================================
   BD Shop by Event — sections/bd-shop-by-event.liquid
   Tag-qualified so the background outranks .color-scheme-*.
   ============================================================ */

section.bd-sbe {
  background: var(--bsbe-bg, #fff);
  color: var(--bsbe-text, #0a3161);
  padding: 48px 0 64px;
}

.bd-sbe__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 var(--page-margin, 20px);
}

/* ── Event picker ── */
.bd-sbe__picker {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  align-items: start;
  gap: 28px;
  margin-bottom: 44px;
}

.bd-sbe__label {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bd-sbe__buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 22px;
}

.bd-sbe__btn {
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--bsbe-btn, #0a3161);
  color: var(--bsbe-btn-text, #fff);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.bd-sbe__btn:hover { opacity: 0.9; }

/* The active event is the one the gallery below is showing, so it needs to
   read as a state, not just a hover. */
.bd-sbe__btn.is-active {
  outline: 2px solid var(--bsbe-btn, #0a3161);
  outline-offset: 3px;
}

/* ── Panels ── */
section.bd-sbe {
  /* Clears the pinned header AND the pinned event-buttons row when a button
     scrolls to this event.

     The flat 70px this used to add was a guess at the row's height, and the
     row is two lines of buttons on the church gallery page — around 120px —
     so the top of the event landed underneath it. --bd-ebtn-pinned-height is
     written by bdEbtnStickyInit in custom.js and is 0 while the row is not
     pinned, so a jump from the top of the page is not pushed down by a row
     that is not on screen.

     The trailing 10px is breathing room, not clearance — enough to show
     the row and the event are separate, without a band of empty page. */
  scroll-margin-top: calc(
    var(--bd-header-stuck-height, 120px) +
    var(--bd-ebtn-pinned-height, 0px) +
    10px
  );
}

.bd-sbe__panel {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 26px;
  align-items: start;
}

.bd-sbe__panel[hidden] { display: none; }

.bd-sbe__gallery {
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  padding: 16px;
}

/* Square, to match the artwork — these are square-format church banners, and
   a 16:9 stage letterboxed every one of them with grey down both sides.

   max-width caps it rather than letting it fill the column: a 1:1 stage at
   the gallery's full ~890px would stand 890px tall and push the thumbnail
   strip below the fold. Centred, so the bounded square sits deliberately in
   the column instead of hugging the left edge. */
/* Wide stage, full column width. It was a capped 560px square, sized for
   square church banners; the product banners going in now are landscape, and
   a square frame letterboxed them into a narrow strip with grey either side.

   No max-width: the whole point of going wide is the extra horizontal room,
   and capping it would give the landscape image less width than the square
   one had. object-fit stays contain, so a portrait upload still shows whole
   rather than being cropped. */
.bd-sbe__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f3f5;
}

/* Category layer: only one visible, each holding its own banners. */
.bd-sbe__cat {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.bd-sbe__cat.is-active {
  opacity: 1;
  visibility: visible;
}

/* Horizontal track: centred banner with its neighbours peeking either side.

   --bsbe-peek is the share of the stage each neighbour shows. 7% is
   deliberately far less than the Our Work carousel further down the page,
   which centres a 520px slide in a 1080px stage: that one is for browsing
   atmosphere shots, this one is the product image people are judging before
   they click through. Enough peek to prove there is more, not enough to
   demote the hero.

   position: relative so slide.offsetLeft in custom.js is measured against
   the track rather than some ancestor. */
.bd-sbe__track {
  position: relative;
  display: flex;
  gap: var(--bsbe-gap, 14px);
  height: 100%;
  padding: 0 var(--bsbe-peek, 7%);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

/* The arrows, dots and drag all move this; the bar underneath the artwork is
   just noise. */
.bd-sbe__track::-webkit-scrollbar { display: none; }

.bd-sbe__slide {
  flex: 0 0 calc(100% - (2 * var(--bsbe-peek, 7%)));
  scroll-snap-align: center;
  /* Neighbours are dimmed rather than hidden — visible enough to read as
     "more banners", quiet enough that the centre one still wins. */
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

.bd-sbe__slide.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bd-sbe__track { scroll-behavior: auto; }
  .bd-sbe__slide { transition: none; }
}

@media screen and (max-width: 749px) {
  /* A smaller stage cannot spare 7% twice and still show the artwork, and a
     touch track is draggable, so the peek only has to hint. */
  .bd-sbe__track { --bsbe-peek: 5%; }
}

.bd-sbe__slide img,
.bd-sbe__slide-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* contain, not cover: church artwork is a mix of portrait, square and
   landscape, and cover cropped whatever did not match the 16:9 stage —
   headlines lost their top, banners lost their sides. Letterboxing against
   the stage background shows every upload whole, whatever its shape.

   The thumbnails keep cover: they are 4:3 tiles read at a glance, where a
   consistent filled grid matters more than seeing the full artwork. */
.bd-sbe__slide img { object-fit: contain; }

.bd-sbe__cta {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  /* pointer-events: none used to be needed here: the href was the first
     banner's and clicks had to fall through to the banner actually on
     screen. custom.js now rewrites the href on every slide change, so this
     is a real link again — which gets keyboard and middle-click back, and
     shows the destination in the status bar. */
}

.bd-sbe__thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.bd-sbe__thumb {
  display: grid;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: center;
}

.bd-sbe__thumb-img {
  display: block;
  /* 4:3 follows the stage back to landscape — squares would crop the sides
     off every wide banner in the strip. */
  aspect-ratio: 4 / 3;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: #eceef1;
}

.bd-sbe__thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bd-sbe__thumb.is-active .bd-sbe__thumb-img {
  border-color: var(--bsbe-btn, #0a3161);
}

.bd-sbe__thumb-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
}

/* ── Copy panel ── */
.bd-sbe__copy {
  background: #f5f6f8;
  border-radius: 10px;
  padding: 26px 22px;
  text-align: center;
}

.bd-sbe__copy-title {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bd-sbe__copy-text {
  font-size: 14px;
  line-height: 1.65;
}

@media screen and (max-width: 989px) {
  .bd-sbe__panel { grid-template-columns: 1fr; }
  .bd-sbe__copy { text-align: left; }
}

@media screen and (max-width: 749px) {
  section.bd-sbe { padding: 32px 0 44px; }

  .bd-sbe__picker {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 28px;
  }

  .bd-sbe__buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bd-sbe__btn { padding: 11px 12px; font-size: 14px; }

  /* At phone width the desktop CTA is a slab across a third of the banner.
     The stage letterboxes its artwork (object-fit: contain), so the corner it
     sits in is usually empty — the position is fine, the size was not.

     Not moved below the stage: the stage clips to a rounded 16/9 box, so a
     static button inside it would still overlay the image, and moving it out
     in the markup would drag the desktop layout along with it. */
  .bd-sbe__cta {
    right: 8px;
    bottom: 8px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.2;
  }

  /* Six thumbs at phone width would be ~45px each; scroll them instead. */
  .bd-sbe__thumbs {
    grid-template-columns: repeat(2, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
   .bd-sbe__thumb-img {
    aspect-ratio: 4 / 2;
  }
  .bd-sbe__thumb { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-sbe__btn,
  .bd-sbe__slide { transition: none; }
}

/* ============================================================
   BD Event Buttons — sections/bd-event-buttons.liquid
   The "SHOP BY EVENT" row, split out of bd-shop-by-event so it can be
   placed and reordered on its own.
   ============================================================ */

section.bd-ebtn {
  background: var(--bebt-bg, #fff);
  color: var(--bebt-text, #0a3161);
  padding: var(--bebt-top, 40px) 0 var(--bebt-bottom, 24px);
}

.bd-ebtn__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 var(--page-margin, 20px);
  display: grid;
  align-items: start;
  gap: 28px;
}

.bd-ebtn__inner.is-pinned {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--bd-header-stuck-height, var(--header-height));
  z-index: 5;
  background: var(--bebt-bg, #fff);
  border-bottom: 1px solid rgb(0 0 0 / 0.08);
  padding: 20px;
}
/* Compact pinned row.

   In normal flow this stays exactly as designed — two rows of full-size
   pills. Pinned, those two rows are about 120px of permanently occupied
   viewport, which pushed each event's banner down far enough to cut its
   thumbnails off the bottom of the screen. That is the whole problem this
   solves, so the rules are scoped to .is-pinned and nothing else changes.

   One line that scrolls sideways rather than a wrapped grid: the number of
   events grows over time (eleven already) and a wrapped row would silently
   become three lines and reintroduce this. A scroller cannot. */
.bd-ebtn__inner.is-pinned {
  padding-top: 10px;
  padding-bottom: 10px;
}

.bd-ebtn__inner.is-pinned .bd-ebtn__buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

/* The row is reachable by dragging, wheel and keyboard, so the bar itself is
   just noise sitting under the pills. */
.bd-ebtn__inner.is-pinned .bd-ebtn__buttons::-webkit-scrollbar {
  display: none;
}

.bd-ebtn__inner.is-pinned .bd-ebtn__btn {
  flex: 0 0 auto;
  padding: 8px 16px;
  font-size: 13px;
  scroll-snap-align: center;
  white-space: nowrap;
}

@media screen and (max-width: 749px) {
  .bd-ebtn__inner.is-pinned .bd-ebtn__btn {
    padding: 7px 13px;
    font-size: 12px;
  }
}

.bd-ebtn__spacer {
  height: 0 !important;
  transition: height 0.25s ease;
}

.bd-ebtn__label {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
   text-align: center;
}

.bd-ebtn__buttons {
  display: grid;
  grid-template-columns: repeat(var(--bebt-columns, 3), minmax(0, 1fr));
  gap: 14px 22px;
}

.bd-ebtn__btn {
  display: block;
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--bebt-btn, #0a3161);
  color: var(--bebt-btn-text, #fff);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.16s ease;
}

.bd-ebtn__btn:hover { opacity: 0.9; }

@media screen and (max-width: 749px) {
  .bd-ebtn__inner {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .bd-ebtn__buttons {
    grid-template-rows: repeat(3, auto);
    grid-template-columns: unset;
    grid-auto-flow: column;
    grid-auto-columns: calc((86% - 20px) / 2);
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    gap: 10px;
  }

  .bd-ebtn__btn { padding: 11px 12px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-ebtn__btn { transition: none; }
}

/* Text panel on the left. Only the column order changes — grid-template
   stays 1fr/260px and the panel is reassigned, so the gallery keeps the
   wider column either way. */
.bd-sbe--copy-left .bd-sbe__panel {
  grid-template-columns: 260px 1fr;
}

.bd-sbe--copy-left .bd-sbe__gallery { order: 2; }
.bd-sbe--copy-left .bd-sbe__copy    { order: 1; }

@media screen and (max-width: 989px) {
  /* Stacked, the image should lead regardless of which side the copy takes
     on desktop — a wall of text above the artwork reads as a dead start. */
  .bd-sbe--copy-left .bd-sbe__panel { grid-template-columns: 1fr; }
  .bd-sbe--copy-left .bd-sbe__gallery { order: 1; }
  .bd-sbe--copy-left .bd-sbe__copy    { order: 2; }
}

/* ============================================================
   BD Customization Flow — sections/bd-customization-flow.liquid
   ============================================================ */

section.bd-cflow {
  padding: var(--bcf-top, 24px) 0 var(--bcf-bottom, 24px);
  color: var(--bcf-text, #0a3161);
}

.bd-cflow__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 var(--page-margin, 20px);
}

.bd-cflow__card {
  background: var(--bcf-card, #f5f6f8);
  border-radius: 12px;
  padding: 30px 28px 34px;
}

.bd-cflow__title {
  margin: 0 0 28px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.bd-cflow__steps {
  display: grid;
  grid-template-columns: repeat(var(--bcf-columns, 4), minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-cflow__step {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.bd-cflow__icon {
  display: grid;
  place-items: center;
  width: var(--bcf-circle-size, 56px);
  height: var(--bcf-circle-size, 56px);
  border-radius: 50%;
  /* The flat disc is the empty state, matching the mockup's placeholders. */
  background: var(--bcf-circle, #d9dde2);
  overflow: hidden;
  font-weight: 600;
  font-size: 16px;
}

.bd-cflow__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.bd-cflow__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  max-width: 15ch;
}

@media screen and (max-width: 749px) {
  .bd-cflow__card { padding: 24px 18px 26px; }

  /* Four across is unreadable on a phone; two rows of two keeps the labels
     on a sensible measure. */
  .bd-cflow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .bd-cflow__label { font-size: 13px; }
}

/* ── Per-category banner slider ─────────────────────────────────────────
   Sits inside the active category, over the banner. Pinned bottom-right
   like the reference, clear of the CTA pill on the opposite corner. */
.bd-sbe__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.14);
  color: var(--bsbe-accent, #0a3161);
  cursor: pointer;
}

.bd-sbe__arrow--prev { left: 14px; }
.bd-sbe__arrow--next { right: 14px; }

.bd-sbe__arrow:hover { background: #fff; }
.bd-sbe__arrow svg { width: 18px; height: 18px; }

.bd-sbe__nav {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.14);
}

/* "2/5" in the nav pill, left of the dots. Tabular figures so the pill does
   not twitch as the number changes width. */
.bd-sbe__count {
  flex: 0 0 auto;
  padding-right: 2px;
  color: var(--bsbe-accent, #0a3161);
  font-size: 12px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bd-sbe__count b {
  font-weight: 700;
}

/* Count badge on a category tile. Only rendered when a category actually has
   more than one design — a "1" on every tile would be noise, and the point is
   to mark the ones worth stepping through. */
.bd-sbe__thumb {
  position: relative;
}

.bd-sbe__thumb-count {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bsbe-accent, #0a3161);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bd-sbe__dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bd-sbe__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(10 49 97 / 0.25);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}

/* The active dot stretches into a bar, so position is readable at a glance
   rather than having to compare six near-identical circles. */
.bd-sbe__dot.is-active {
  width: 18px;
  background: var(--bsbe-accent, #0a3161);
}

@media screen and (max-width: 749px) {
  .bd-sbe__nav { right: 8px; bottom: 8px; gap: 7px; padding: 5px 8px; }
  .bd-sbe__arrow { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-sbe__cat,
  .bd-sbe__dot { transition: none; }
}

/* "Click here to start the flow" is an instruction for the collapsed state —
   once the options are open the visitor has already done it, and leaving it
   under the × reads as a second, contradictory prompt.

   Keyed off aria-expanded, which the reveal buttons already maintain in
   assets/custom.js, so there is no new state to keep in sync. The theme
   uses :has() throughout, so this is consistent with what is already here. */
.bd-mget__head:has([data-bmget-reveal][aria-expanded='true']) .bd-mget__hint {
  display: none;
}

/* .bd-mget__child sets display:block, which outranks the user-agent
   [hidden] rule — so hiding one from JS did nothing. Same trap already
   handled for .bd-mget__form-wrap a few rules up; this is the matching
   guard for the child buttons, needed now that custom.js hides the
   redundant form opener. */
.bd-mget__child[hidden] {
  display: none;
}

/* "Talk to Experts" — the escape hatch under the first option in the
   get-started flow. Solid brand red so it reads as an action, against the
   outlined white choice buttons which are all one visual weight. */
.bd-mget__expert {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 13px 16px;
  border-radius: 999px;
  background: #b31942;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.16s ease;
}

.bd-mget__expert:hover {
  background: #9a1439;
  color: #fff;
}

.bd-mget__expert.bd-desktop_hide {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .bd-mget__expert { transition: none; }
}

@media screen and (max-width: 749px) {
  .bd-mget__expert {
    display: none;
  }
  .bd-mget__expert.bd-desktop_hide {
    display: block;
  }
}

/* ── Event Name beside the date picker (both enquiry forms) ──
   The picker is a self-contained grey block; pairing the text field with it
   in a two-column row keeps "what event" and "when" together instead of
   stacking two full-width rows and pushing the upload panel below the fold
   on a laptop. */
/* Phone and Select Theme side by side. Same two-column shape as
   .bds-event-row below, and it collapses at the same width — the two rows
   sit one above the other in both church forms, so they have to break
   together or the form looks half-converted mid-resize. */
.bds-theme-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.bds-event-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.bds-event-row .pdm-event-date,
.bds-event-row .mrp-date-field,
/* The church clone renames every mrp-* identifier to chmrp-*; this is the
   only rule for the popup that lives outside the section itself, so it is
   also the only one that has to know about both. */
.bds-event-row .chmrp-date-field {
  min-width: 0;
}

.bds-optional {
  font-weight: 400;
  color: #8a8f98;
}

@media screen and (max-width: 749px) {
  /* Side by side at phone width leaves neither field usable. */
  .bds-event-row,
  .bds-theme-row { grid-template-columns: 1fr; }
}

/* ── Event Name / date pair: one row, matching controls ──
   .pdm-event-date is a standalone card elsewhere — grey panel, border,
   18px heading, hover shadow and a subtitle. Dropped next to a plain text
   field it read as two unrelated components at two different weights.

   Inside .bds-event-row it is stripped back to a labelled control so the
   two columns look like what they are: two fields on one row. The card
   styling is untouched everywhere else it is used. */

.bds-event-row {
  align-items: start;
}

.bds-event-row .pdm-event-date {
  margin: 0;
  padding: 0;
  gap: 0;
  background: none;
  border: 0;
  border-top: 0;
  border-radius: 0;
}

.bds-event-row .pdm-event-date:hover {
  background: none;
  box-shadow: none;
}

/* Label above control, like the field beside it. */
.bds-event-row .pdm-event-date__row {
  display: block;
}

.bds-event-row .pdm-event-date__text h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
}

/* "Help us prioritize your order" is a card subtitle with no counterpart on
   the left; it unbalanced the row. */
.bds-event-row .pdm-event-date__text p {
  display: none;
}

.bds-event-row .pdm-event-date__picker-wrap {
  width: 100%;
}

/* Same height, radius and border as the text input next to it. */
.bds-event-row .pdm-event-date__btn {
  width: 100%;
  justify-content: flex-start;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
}


/* Search page CSS */

[data-template="search"] search-page-input-component {
  justify-content: center;
}

[data-template="search"] .search-page-input {
  border-radius: 16px;
}

[data-template="search"] search-page-input-component .search__icon {
  left: 27%;
}

[data-template="search"] .search__reset-button-icon {
  color: #ffffff;
}

[data-template="search"] .search__reset-button {
  right: 20%;
}

[data-template=search] #ResultsList product-card .text-block p {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  color: #1A1C1C;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-template=search] #ResultsList .product-grid__card.product-grid__card {
  background: #F7F7F7;
  padding-bottom: 6px;
}

[data-template=search] #ResultsList product-card .product-card__content .text-block {
  padding: 6px 12px;
  min-height: auto;
}
[data-template=search] #ResultsList product-card product-price .price {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0A3161;
}

@media screen and (max-width: 749px) { 
  [data-template="search"] search-page-input-component {
    justify-content: flex-start;
  }
  [data-template=search] .search-page-input {
    max-width: 86%;
  }
  [data-template="search"] .search__reset-button { 
    right: 10px;
  }
  [data-template=search] #ResultsList {
    padding: 0 16px;
  }
  [data-template=search] search-page-input-component .search__icon {
    left: var(--margin-md);
  }
}

/* Hero slide image as a link. Fills the slide so the whole visual is
   clickable; the CTA button sits above it on its own z-index and keeps
   working as the labelled, focusable link. */
.bd-hs__slide-link {
  position: absolute;
  inset: 0;
  display: block;
}

/* ============================================================
  Educational landing page css 
   ============================================================ */
.bd-hs__inner.full_videocontent {
  grid-template-columns: 1fr;
}
.bd-hs__panel--text.hide_textcontent {
  display: none;
}
.bd-hs__inner > :only-child {
  grid-column: 1 / -1;
}

[data-template="page.educational-landing-page"] .bd-hs__inner {
  padding-bottom: 26px;
}

/* ============================================================
   BD CTA Grid — bd-cta-grid.liquid
   ============================================================ */

section.bd-cta-grid {
  background: var(--bdcta-bg, #ffffff);
}

.bd-cta-grid__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 34px var(--page-margin);
}

.bd-cta-grid__heading {
  margin: 0 0 22px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--bdcta-heading-color, #10233F);
}

.bd-cta-grid__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bdcta-gap, 16px);
  padding: 0 48px;
}

.bd-cta-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid var(--bdcta-item-border, transparent);
  border-radius: 6px;
  background: var(--bdcta-item-bg, #ffffff);
  color: var(--bdcta-item-color, #000000);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

button.bd-cta-grid__item {
  min-height: 80px;
}

.bd-cta-grid__item:hover {
  filter: brightness(1.08);
}

.bd-cta-grid__item:focus-visible {
  outline: 2px solid var(--bdcta-item-bg, #10233F);
  outline-offset: 3px;
}


@media screen and (max-width: 749px) {
  .bd-cta-grid__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0;
  }
  .bd-cta-grid__inner {
    padding: 0 var(--page-margin);
  }

  .bd-cta-grid__grid > :nth-child(1),
  .bd-cta-grid__grid > :nth-child(2) {
    grid-column: 1 / -1;
  }



/* ============================================================
   Predictive search popup — snippets/search-modal.liquid
   Opened from the header search bar (desktop) and the blue bar's search icon (phones) by
   bdSearchTriggersInit() in custom.js. Before typing it shows Recently viewed, else the
   collection picked in Theme settings → Search. Product cards are the site's .bd-product-card
   (snippets/bd-product-card.liquid). "View all" is styled like the site CTAs (.bd-hs__cta);
   its colors are the search_accent_color / search_accent_text_color theme settings.
   ============================================================ */

#search-modal {
  --bd-search-gutter: 20px;
  --bd-search-line: rgb(var(--color-foreground-rgb) / var(--opacity-10));
}

/* Search row: one clean line under it, round close button */
#search-modal .predictive-search-form__header {
  padding: 6px 10px 6px 0;
  border: 0;
  border-bottom: 1px solid var(--bd-search-line);
  border-radius: 0;
}

#search-modal .predictive-search-form__header-inner {
  border: 0;
  border-radius: 0;
}

#search-modal input.search-input {
  min-height: 52px;
  padding-inline-start: calc(var(--bd-search-gutter) + 28px);
  font-size: 17px;
}

/* Placeholder ("Search products, categories, or ideas…", Theme settings → Search): quieter and a
   step smaller than what's typed */
#search-modal input.search-input::placeholder {
  font-size: 15px;
  color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
}

#search-modal .predictive-search__icon {
  left: var(--bd-search-gutter);
  color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
}

#search-modal .predictive-search__close-modal-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background-color 0.15s;
}

#search-modal .predictive-search__close-modal-button:hover {
  --button-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

/* Section labels: "Best Sellers", "Recently viewed", "Products", "Collections"… */
#search-modal .predictive-search-results__title {
  margin-block-end: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
}

#search-modal .predictive-search-results__clear {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* Suggested searches: outlined pills, the row fades out at the right edge */
#search-modal .predictive-search-results__wrapper-queries {
  padding-block: 16px 4px;
  padding-inline: var(--bd-search-gutter);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 56px), transparent);
}

#search-modal .predictive-search-results__pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--bd-search-line);
  color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  transition: box-shadow 0.15s, color 0.15s, background-color 0.15s;
}

#search-modal .predictive-search-results__pill:hover,
#search-modal [aria-selected='true'] > .predictive-search-results__pill {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  box-shadow: inset 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-40));
  color: var(--color-foreground);
}

/* Result sections share the search row's gutter (desktop: the header's page margin) */
#search-modal .predictive-search-results__products,
#search-modal .predictive-search-results__resource-header,
#search-modal .predictive-search-results__no-results {
  padding-inline: var(--bd-search-gutter);
}

#search-modal .predictive-search-results__wrapper slideshow-slides {
  --gutter-slide-width: var(--bd-search-gutter);
}

/* Product cards are the site's own .bd-product-card, so the list item drops the theme's
   hover/focus padding that was made for its plain cards */
#search-modal .predictive-search-results__wrapper-products {
  padding-block-start: 6px;
}

#search-modal .predictive-search-results__card--product:hover {
  margin: 0;
  padding: 0;
  background-color: transparent;
}

#search-modal .predictive-search-results__card--product:is([aria-selected='true'].keyboard-focus, :focus-visible, :has(.bd-product-card:focus-visible)) {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border-radius: 16px;
  outline-offset: 2px;
}

/* "View all" floats over the theme's white fade at the bottom of the results */
#search-modal .predictive-search__search-button {
  --button-background-color: var(--search-accent);
  --button-color: var(--search-accent-text);
  --button-border-color: var(--search-accent);

  min-height: 48px;
  padding: 0 32px;
  border-radius: 999px;
  box-shadow: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
}

#search-modal .predictive-search__search-button:hover {
  --button-background-color: color-mix(in srgb, var(--search-accent) 89%, black);
  --button-color: var(--search-accent-text);

  transform: none;
  box-shadow: none;
}

/* In search the price follows the title; the theme card's margin-top: auto (which lines prices up
   along a row) left a gap under one-line titles */
#search-modal .bd-product-card__price,
.bd-sd .bd-product-card__price {
  margin-top: 4px;
}

/* "Clear" in the popup's search box: navy, 500, uppercase, like the header bar's */
#search-modal .predictive-search__reset-button {
  color: #0A3161;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#search-modal .predictive-search__reset-button:not([hidden]) {
  opacity: 1;
}

/* Desktop: a wider, taller popup over a dimmed page; card text a step smaller than the
   homepage cards so four fit comfortably */
@media screen and (min-width: 750px) {
  #search-modal .search-modal__content {
    --modal-width: min(1180px, 90vw);
    --modal-max-height: 82dvh;
    --backdrop-opacity: var(--opacity-50);

    /* Theme dialogs stop at --normal-content-width (42rem) */
    max-width: var(--modal-width);
  }

  #search-modal .predictive-search-form__content {
    max-height: calc(var(--modal-max-height) - 64px);
  }

  #search-modal .predictive-search-results__wrapper-products {
    gap: 16px;
  }

  #search-modal .bd-product-card__content {
    gap: 4px;
    padding: 14px 16px 16px;
  }

  #search-modal .bd-product-card__title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    -webkit-line-clamp: 2;
  }

  #search-modal .bd-product-card__price {
    font-size: 15px;
  }
}

@keyframes bd-search-drop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes bd-search-lift {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Phones: opens under the header like the menu drawer (the blue bar and logo row stay visible;
   --bd-search-top is the header's bottom edge, set by bdSearchTriggersInit()), rounded search box
   with a ✕ in a soft filled circle on its right, products in two columns, full-width "View all" */
@media screen and (max-width: 749px) {
  #search-modal {
    --bd-search-gutter: 16px;
  }

  #search-modal .search-modal__content {
    inset: var(--bd-search-top, 0px) 0 0;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
  }

  #search-modal .search-modal__content[open] {
    animation: bd-search-drop 0.22s var(--ease-out-quad, ease-out) forwards;
  }

  #search-modal .search-modal__content[open].dialog-closing {
    animation: bd-search-lift 0.16s ease-in forwards;
  }

  /* Search box and ✕ share one size and corner radius so they read as a pair */
  #search-modal .predictive-search-form__header {
    --bd-search-control: 46px;

    align-items: center;
    gap: 10px;
    padding: 12px 16px;

    /* The header's own line sits just above and the box has a border; a third line was too many */
    border-bottom: 0;
  }

  #search-modal .predictive-search__close-modal-button,
  #search-modal .predictive-search__close-modal-button:hover {
    --button-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  #search-modal .predictive-search__close-modal-button {
    flex: none;
    width: var(--bd-search-control);
    height: var(--bd-search-control);
    margin: 0;
    padding: 0;
    border-radius: 12px;
  }

  /* The theme's divider between "Clear" and the ✕ would sit in the gap beside the round button */
  #search-modal .predictive-search-form__header::before {
    content: none;
  }

  #search-modal .predictive-search-form__header-inner {
    position: relative;
    box-sizing: border-box;
    height: var(--bd-search-control);
    min-height: 0;
    border: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-15));
    border-radius: 12px;
  }

  #search-modal .predictive-search__reset-button {
    height: 100%;
  }

  /* While empty, "Clear" is invisible but still took ~57px, cutting the placeholder short */
  #search-modal .predictive-search__reset-button[hidden] {
    display: none;
  }

  #search-modal .predictive-search__icon {
    left: 12px;
  }

  /* 16px typed text keeps iOS from zooming in on focus */
  #search-modal input.search-input {
    height: 100%;
    min-height: 0;
    padding-block: 0;
    padding-inline: 44px 6px;
    font-size: 16px;
  }

  /* 13px so the whole "Search products, categories, or ideas…" fits a 390px-wide phone */
  #search-modal input.search-input::placeholder {
    font-size: 13px;
  }

  #search-modal .predictive-search__search-button {
    width: 100%;
  }

  /* The whole popup scrolls on phones, so pin "View all" to the bottom of the screen over the
     same white fade as desktop (overflow: clip instead of hidden keeps the wrapper from trapping
     the sticky footer) */
  #search-modal .predictive-search-form__content-wrapper {
    overflow: clip;
  }

  #search-modal .predictive-search-form__footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-block: 24px calc(12px + env(safe-area-inset-bottom));
    padding-inline: var(--bd-search-gutter);
    background-image: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );
  }

  #search-modal .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results)) > .predictive-search-form__content {
    padding-block-end: 16px;
  }
}

  .bd-cta-grid__item {
    min-height: 56px;
    padding: 14px 20px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-cta-grid__item { transition: none; }
}