/* Boxzooka: desktop nav mega menus (shared)
   Used by every mega menu panel. Each panel is wrapped in .bz-mega, and all rules
   are scoped under it so nothing leaks into the theme.
   Desktop only. The mobile menu is a separate component.
   Purge the wpo-minify cache after deploying. */

.bz-mega {
  /* Colors come from the sitewide :root in style.css (--color-*), and body already sets
     Roboto, so nothing is redefined here. Only values the site does not define are
     derived below. Poppins has no sitewide variable, so it is declared once. */
  --bz-ui-font: "Poppins", sans-serif;
  --bz-orange-chip: color-mix(in srgb, var(--color-orange) 22%, var(--color-white));

  width: 100%;
  max-width: none;
  margin: 0 auto;
  color: var(--color-444);
  box-sizing: border-box;
}

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

.bz-mega ul { list-style: none; margin: 0; padding: 0; }
.bz-mega li { margin: 0; padding: 0; }
.bz-mega a { text-decoration: none; }
.bz-mega img { display: block; max-width: 100%; }

/* Bounded, rounded panel */
.bz-mega__panel {
  background: var(--color-white);
  border: 1px solid var(--color-ddd);
  border-radius: 20px;
  box-shadow: 0 10px 20px 0 rgb(8 0 42 / 0.08);   /* same as the sitewide dropdown shadow */
  overflow: hidden;
}

/* 2/3 + 1/3 */
.bz-mega__body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  padding: 24px;
  min-height: 392px;
}

.bz-mega__main {
  display: flex;
  gap: 24px;
  min-width: 0;
}

/* Link list */
.bz-mega__links {
  width: 330px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bz-mega__link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: transparent;
  color: var(--color-222);
  transition: background-color 0.2s ease;
}

.bz-mega__chip {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  color: var(--color-444);              /* neutral at rest */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.bz-mega__text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bz-mega__title {
  font-family: var(--bz-ui-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-222);
  transition: color 0.2s ease;
}

.bz-mega__desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--color-444);
}

.bz-mega__arrow {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--color-orange);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Active (hover or keyboard focus): color appears */
.bz-mega__link.is-active { background: var(--color-gray-lightest); }
.bz-mega__link.is-active .bz-mega__chip {
  background: var(--bz-orange-chip);
  color: var(--color-orange);
}
.bz-mega__link.is-active .bz-mega__title { color: var(--color-orange-dark); }
.bz-mega__link.is-active .bz-mega__arrow { opacity: 1; }

.bz-mega__link:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* Image panel */
.bz-mega__media {
  position: relative;
  flex-grow: 1;
  min-width: 0;
  border-radius: 15px;
  overflow: hidden;
  background: var(--color-gray-light);
}

.bz-mega__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.bz-mega__layer.is-active { opacity: 1; }

.bz-mega__layer--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dashboard screenshots: keep the top of the image (header and sidebar) when cropping to fit */
.bz-mega__layer--top img { object-position: top left; }

/* Caption: white text over the image, bottom right. A soft dark fade at the bottom
   of each layer keeps the text readable on light photos and screenshots. */
.bz-mega__layer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(to top, rgb(0 0 0 / 0.3), rgb(0 0 0 / 0));
  pointer-events: none;
}

.bz-mega__caption {
  position: absolute;
  right: 20px;
  bottom: 16px;
  left: 20px;
  z-index: 1;
  text-align: right;
  font-family: var(--bz-ui-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-white);
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.05);
}

/* Integrations column */
.bz-mega__integrations {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 15px;
  background: var(--color-gray-lightest);
  min-width: 0;
}

.bz-mega__int-head { display: flex; flex-direction: column; gap: 8px; }

.bz-mega__eyebrow {
  font-family: var(--bz-ui-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.bz-mega__int-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-222);
}

.bz-mega__int-sub { font-size: 14px; font-weight: 300; color: var(--color-444); }

.bz-mega__int-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

.bz-mega__int {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 4px 0;
}

.bz-mega__int-tile {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 1px solid var(--color-eee);
  border-radius: 10px;
  transition: border-color 0.2s ease;
}
.bz-mega__int-tile img { width: 40px; height: 40px; object-fit: contain; }

.bz-mega__int-name {
  word-break: normal;
  overflow-wrap: normal;
  font-size: 15px;
  line-height: 1.25;
  color: var(--color-222);
  transition: color 0.2s ease;
  font-weight: 300;
}

.bz-mega__int:hover .bz-mega__int-tile,
.bz-mega__int:focus-visible .bz-mega__int-tile { border-color: var(--color-aaa); }
.bz-mega__int:hover .bz-mega__int-name,
.bz-mega__int:focus-visible .bz-mega__int-name { color: var(--color-orange); }
.bz-mega__int:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 2px; border-radius: 10px; }

.bz-mega__all {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bz-ui-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-orange);
  transition: color 0.2s ease;
}
.bz-mega__all:hover { color: var(--color-222); }

/* Bottom strip */
.bz-mega__strip {
  display: flex;
  align-items: center;
  gap: 48px;
  min-height: 64px;
  padding: 0 24px;
  border-top: 1px solid var(--color-eee);
  background: var(--color-gray-lightest);
}

.bz-mega__strip-link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--bz-ui-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-222);
  transition: color 0.2s ease;
}
.bz-mega__strip-link:hover { color: var(--color-orange-dark); }

.bz-mega__strip-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--color-aaa);
  color: var(--color-white);
  transition: background-color 0.2s ease;
}
.bz-mega__strip-link:hover .bz-mega__strip-icon,
.bz-mega__strip-link:focus-visible .bz-mega__strip-icon { background: var(--color-444); }

@media (prefers-reduced-motion: reduce) {
  .bz-mega__layer,
  .bz-mega__link,
  .bz-mega__chip,
  .bz-mega__title,
  .bz-mega__arrow { transition: none; }
}


/* ==========================================================================
   Max Mega Menu and theme overrides
   The plugin and the old custom HTML widget rules use ID selectors, for example
   "#site-header #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li a"
   and "#site-header #mega-menu-wrap-primary .custom-html-widget ul".
   Those beat normal class selectors, so the properties they touch are
   locked here with !important. Only add properties to this block when
   the plugin or theme is actually overriding them.
   ========================================================================== */

/* Sitewide ".custom-html-widget ul" sets width 100% (padding 0 and a transparent
   background already match what we want), and "#site-header nav ul" centers items. */
.bz-mega .bz-mega__links {
  width: 330px !important;
  flex: 0 0 330px !important;
  align-items: stretch !important;
}

.bz-mega .bz-mega__int-grid {
  align-items: stretch !important;
}

/* Plugin sets padding 13px 15px, a white background, and an orange hover fill on every submenu link */
.bz-mega a.bz-mega__link,
.bz-mega a.bz-mega__strip-link,
.bz-mega a.bz-mega__int,
.bz-mega a.bz-mega__all {
  display: flex !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.bz-mega a.bz-mega__link {
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  color: var(--color-222) !important;
}
.bz-mega a.bz-mega__link.is-active { background: var(--color-gray-lightest) !important; }

.bz-mega a.bz-mega__strip-link {
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  color: var(--color-222) !important;
  /* Something in the theme or plugin sets width: 100% on links, which made the two strip
     links split the row 50/50 and pushed the second one to the middle. Size to content. */
  width: auto !important;
  flex: 0 0 auto !important;
}
.bz-mega a.bz-mega__strip-link:hover { color: var(--color-orange) !important; }

.bz-mega a.bz-mega__int {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 0 !important;
}

.bz-mega a.bz-mega__all {
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  color: var(--color-orange) !important;
  font-weight: 600 !important;
}
.bz-mega a.bz-mega__all:hover { color: var(--color-orange-dark) !important; }

/* Keep text colors stable when the plugin flips link text to white on hover */
.bz-mega .bz-mega__title { color: var(--color-222) !important; }
.bz-mega .bz-mega__desc { color: var(--color-444) !important; }
.bz-mega .bz-mega__int-name { color: var(--color-222) !important; }
.bz-mega a.bz-mega__int:hover .bz-mega__int-name { color: var(--color-orange) !important; }
.bz-mega a.bz-mega__link.is-active .bz-mega__title { color: var(--color-orange) !important; }


/* ==========================================================================
   Max Mega Menu wrapper: transparent, tight to the nav bar, wider
   Applies to any dropdown that contains a .bz-mega panel, so future mega
   menus inherit it automatically. Uses :has(), supported in current
   Chrome, Edge, Safari, and Firefox.
   ========================================================================== */

/* Remove the white band, border, and shadow the plugin paints behind the panel.
   The old rule for menu items 33 and 14 in style.css draws a 1px line along the top edge
   with "border-top ... !important" and three ID selectors, so this selector includes
   #mega-menu-primary to out-rank it. */
#site-header #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu:has(.bz-mega) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* style.css puts a 1px bottom border on every list item inside a dropdown. The row and
   column wrappers around the panel inherit it, which drew a faint line under the panel.
   Only the wrappers are cleared here. */
#site-header #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu:has(.bz-mega) li.mega-menu-row,
#site-header #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu:has(.bz-mega) li.mega-menu-column,
#site-header #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu:has(.bz-mega) li.mega-widget {
  border: 0 !important;
}

/* Row side padding makes the panel the same width as the scrolled header pill, at the top
   of the page and after scrolling. The pill is --bz-pill-max wide (1400px, defined in
   bz-header.css) and sits 12px in from each side on narrower screens, so the padding is
   half of whatever is left over, never less than 12px. 100% here is the width of the
   full-width dropdown list, which is the viewport width. */
#site-header #mega-menu-wrap-primary li.mega-menu-row:has(.bz-mega) {
  padding-left: max(12px, calc((100% - var(--bz-pill-max, 1400px)) / 2)) !important;
  padding-right: max(12px, calc((100% - var(--bz-pill-max, 1400px)) / 2)) !important;
}

/* Widget padding controls the gap under the nav bar (was 40px top and bottom).
   Top is about 5px. Keep some bottom room so the panel shadow is not clipped. */
#site-header #mega-menu-wrap-primary .custom-html-widget:has(> .bz-mega) {
  padding: 3px 0 24px !important;
}


/* ==========================================================================
   Responsive tiers
   Mirrors the header in style.css: its nav type steps down at 1200, 1100, 1000, and
   900px, and the desktop nav is replaced by the mobile menu at 767px. Each tier only
   changes what needs to change, so a tier inherits everything from the tiers above it.
   Placed last so these rules win over the override block above.
   ========================================================================== */

/* 1500px and below: give the integrations column more room, shrink the tiles */
@media (max-width: 1500px) {
  .bz-mega__body { grid-template-columns: 1.8fr 1fr; }

  .bz-mega__int-tile { width: 52px; height: 52px; }
  .bz-mega__int-tile img { width: 32px; height: 32px; }
  .bz-mega__int-name { font-size: 14px; }
  .bz-mega__int { gap: 10px; }
  .bz-mega a.bz-mega__int { gap: 10px !important; }
}

/* 1200px and below: tighter spacing and type, narrower link list */
@media (max-width: 1200px) {
  .bz-mega__body { gap: 20px; padding: 20px; }
  .bz-mega__main { gap: 20px; }
  .bz-mega__integrations { padding: 20px; gap: 14px; }

  .bz-mega .bz-mega__links { width: 290px !important; flex: 0 0 290px !important; }
  .bz-mega a.bz-mega__link { padding: 12px 14px !important; gap: 12px !important; }
  .bz-mega__title { font-size: 15px; }
  .bz-mega__desc { font-size: 13px; }

  .bz-mega__int-title { font-size: 18px; }
  .bz-mega__int-tile { width: 48px; height: 48px; }
  .bz-mega__int-tile img { width: 28px; height: 28px; }

  .bz-mega__caption { font-size: 13px; }
  .bz-mega__strip-link { font-size: 14px; }
}

/* 1100px and below: drop the image panel so the text links get the room.
   The links become a 2 x 2 grid and the integrations column keeps its width. */
@media (max-width: 1100px) {
  .bz-mega__body { grid-template-columns: 1.5fr 1fr; min-height: 0; }

  .bz-mega__media { display: none; }

  .bz-mega .bz-mega__links {
    width: 100% !important;
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 0;
    align-content: center;
  }

  /* The hover arrow is invisible at rest but still takes up room, which squeezes the text */
  .bz-mega__arrow { display: none; }

  .bz-mega__int-sub { display: none; }
}

/* 1000px and below: smaller type, tighter padding, and a wider share for the integrations
   column so the names fit without breaking mid-word. The header nav drops to 12px here. */
@media (max-width: 1000px) {
  .bz-mega__body { grid-template-columns: 1.35fr 1fr; gap: 16px; padding: 16px; }
  .bz-mega__integrations { padding: 16px; gap: 12px; }

  .bz-mega a.bz-mega__link { padding: 10px 8px !important; gap: 10px !important; }
  .bz-mega__chip { width: 32px; height: 32px; }
  .bz-mega__chip svg { width: 18px; height: 18px; }
  .bz-mega__title { font-size: 14px; }
  .bz-mega__desc { font-size: 12.5px; }

  .bz-mega__eyebrow { font-size: 11px; }
  .bz-mega__int-title { font-size: 16px; }
  .bz-mega__int-tile { width: 40px; height: 40px; border-radius: 8px; }
  .bz-mega__int-tile img { width: 24px; height: 24px; }
  .bz-mega__int-name { font-size: 13px; }
  .bz-mega__int,
  .bz-mega a.bz-mega__int { gap: 8px !important; }
  .bz-mega a.bz-mega__all { font-size: 13px; }

  .bz-mega__strip { gap: 24px; padding: 0 16px; min-height: 52px; }
  .bz-mega__strip-link { font-size: 13px; gap: 10px; }
  .bz-mega__strip-icon { width: 28px; height: 28px; }
}

/* 900px and below: the header nav drops to 10px here, so the menu steps down once more */
@media (max-width: 900px) {
  .bz-mega__title { font-size: 13px; }
  .bz-mega__desc { font-size: 12px; }
  .bz-mega__int-title { font-size: 15px; }
  .bz-mega__int-tile { width: 36px; height: 36px; }
  .bz-mega__int-tile img { width: 22px; height: 22px; }
  .bz-mega__int-name { font-size: 12px; }
  .bz-mega__strip-link { font-size: 12px; }
}


/* ==========================================================================
   MENU PANEL ADDITIONS (Technology, Industries, Resources, About, Services)

   Everything below is scoped under
     #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget
   which carries the same three IDs as the sitewide dropdown rules in style.css and the plugin.
   Without that, those rules force Poppins, a 5px bottom margin, a white background, and 13px
   padding onto every link in a panel, and cancel padding on the lists. It also means the
   rules here do not need !important.
   ========================================================================== */
/* Base for everything inside a panel: line height back to 1.6 (the sitewide 30px made the rows
   taller), and links stripped of the sitewide dropdown link styling. :where() keeps this base from
   outranking the class rules below, which set each link's own padding, background, and size. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega { --bz-ui-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.6; }
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega :where(a) {
  margin-bottom: 0;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
  text-decoration: none;
  font-family: var(--bz-ui-font);
}
/* The plugin paints an orange fill on a submenu link while it is hovered (that is what showed on the
   Featured cards, the Fulfillment Services title, and the About card). Every panel link is held
   transparent in all states. The links bz-nav-mega.css styled before this block (the Technology
   rows, strip links, integration tiles, and the "View all" link) are left out because they already
   have their own locked backgrounds. :where() keeps this rule from outranking the background
   rules that follow for the location tiles, the About card, and the Blog category hover. The class is
   repeated three times so this rule outranks sitewide selectors that carry the same three IDs plus
   "ul.mega-sub-menu li a:hover". */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega.bz-mega.bz-mega :where(a:not(.bz-mega__link, .bz-mega__strip-link, .bz-mega__int, .bz-mega__all)) {
  background-color: transparent !important;
  background-image: none !important;
}
/* The links that are meant to have a fill. Same outranking trick as above. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega.bz-mega.bz-mega a.bz-mega__loc-card,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega.bz-mega.bz-mega a.bz-mega__about-card {
  background-color: var(--color-gray-light) !important;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega.bz-mega.bz-mega--resources .bz-mega__cats a:hover,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega.bz-mega.bz-mega--resources .bz-mega__cats a:focus-visible {
  background-color: var(--color-gray-lightest) !important;
}

/* The gray highlight on the main link rows (hovered, focused, or the one whose image is showing), repeated here so the
   plugin hover fill cannot beat it in the Technology and Services panels either. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega.bz-mega.bz-mega a.bz-mega__link:hover,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega.bz-mega.bz-mega a.bz-mega__link:focus-visible,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega.bz-mega.bz-mega a.bz-mega__link.is-active {
  background-color: var(--color-gray-lightest) !important;
}

/* The sitewide ".custom-html-widget ul" rule sets width 100% on every list, and "#site-header nav ul"
   centers a list's items. Lists in the panels need their own width and stretched items. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega .bz-mega__locs { width: auto; }
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega .bz-mega__cats,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega .bz-mega__links { align-items: stretch; }
/* Text links inside the Technology bottom strip and the integrations box: their size and weight */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega a.bz-mega__all { font-size: 14px; line-height: 1.6; }
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega a.bz-mega__strip-link { font-weight: 500; }


/* ==========================================================================
   Technology panel
   Arrow nudge on the text links, tighter left edge, 36px inset for the image and integrations box, tighter link rows.
   ========================================================================== */

#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__all > svg,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__strip-link > svg {
  transition: transform 0.25s ease;
}

#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__all:hover > svg,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__all:focus-visible > svg,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__strip-link:hover > svg,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__strip-link:focus-visible > svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__all:hover > svg,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__all:focus-visible > svg,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__strip-link:hover > svg,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__strip-link:focus-visible > svg {
    transform: none;
  }
}

/* Less space to the left of the link icons. The body had 24px of padding and each link adds
   16px more; trimming the body padding to 8px puts the icons at the same distance from the
   panel edge as the icons in the bottom strip. The hover highlight still has its 16px inside. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__body {
  padding-left: 8px;
}

/* Same spacing between the link rows as the Industries panel: 9px of padding above and below
   each row plus a 4px gap, with the group centered in the column instead of spread out.
   The shared stylesheet locks the row padding with !important, so this has to as well. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__links {
  justify-content: center;
  gap: 4px;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech a.bz-mega__link {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

/* Same edge padding as the Industries and Resources panels: the image and the integrations box sit
   36px from the top, right, and bottom edges. The body keeps its 24px padding, so these 12px
   margins add up to 36 without making the panel taller. The left side is unchanged on purpose:
   the link icons stay 25px from the edge, in line with the icons in the bottom strip. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__media { margin-top: 12px; margin-bottom: 12px; }
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__integrations { margin: 12px 12px 12px 0; }


/* More space between the integration tiles and the "View more featured integrations" link. The link used to
   sit right under the last row, especially when a name like "Adobe Commerce" wraps to two lines. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__int-grid { margin-bottom: 20px; }


/* ==========================================================================
   Industries panel
   Narrow panel (menu item CSS class bz-narrow): links on the left, a photo grid on the right.
   ========================================================================== */

#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__body--industries {
  grid-template-columns: 460px 520px; /* narrow panel: sized to its content */
}

/* The shared rule locks the link list at 330px for the Technology layout */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--industries .bz-mega__links {
  width: auto !important;
  flex: none !important;
}

/* Tighter links, centered in the column. Most of the space between two links comes from the
   link's own top and bottom padding, so that is what is reduced here. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--industries .bz-mega__links {
  justify-content: center;
  gap: 4px;
}
/* bz-nav-mega.css locks the link padding with !important, so this has to as well.
   Only top and bottom are set; the side padding still follows the shared responsive rules. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--industries a.bz-mega__link {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

/* Photo grid: left column has two rows, right column has one tall photo */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  min-width: 0;
  /* With the 24px body padding this puts the photos 36px from the top, right, and bottom edges,
     the same inset the Resources and About panels use for their gray columns. */
  margin: 12px 12px 12px 0;
}

#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__photo {
  position: relative;
  min-height: 0;
  margin: 0;
  border-radius: 15px;
  overflow: hidden;
  background: var(--color-gray-light);
}

#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__photo--tall {
  grid-column: 2;
  grid-row: 1 / span 2;
}

#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover and keyboard focus, same look as the active state in the Technology panel */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--industries a.bz-mega__link:hover,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--industries a.bz-mega__link:focus-visible {
  background: var(--color-gray-lightest) !important;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--industries .bz-mega__link:hover .bz-mega__title,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--industries .bz-mega__link:focus-visible .bz-mega__title {
  color: var(--color-orange) !important;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--industries .bz-mega__link:hover .bz-mega__arrow,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--industries .bz-mega__link:focus-visible .bz-mega__arrow {
  opacity: 1;
}

/* 1100px and below: keep the links in one column and keep only the tall photo.
   The two stacked photos are dropped so the remaining image has room to breathe. */
@media (max-width: 1100px) {
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__body--industries { grid-template-columns: 460px 320px; }
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__photos { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__photo:not(.bz-mega__photo--tall) { display: none; }
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__photo--tall { grid-column: 1; grid-row: 1; }

  /* The shared 1100px rule turns the link list into a two-column grid. Keep one column here. */
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--industries .bz-mega__links {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }
}


/* ==========================================================================
   Resources panel
   Locations, Blog categories, and the gray Featured column that runs flush to the panel edge.
   ========================================================================== */

#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__body--resources {
  /* The Blog column is only as wide as its list (fit-content) instead of a share of the panel, so there is no wide
     empty strip between the Blog list and the gray Featured column. fit-content(300px) also caps it: a very long
     category name wraps inside the column instead of pushing into the Featured cards. The width it gave up goes
     mostly to the left column, so the Featured cards keep about the size they had. */
  grid-template-columns: clamp(360px, 36vw, 500px) fit-content(300px) minmax(0, 1fr);
  align-items: stretch;
  /* The shared stylesheet gives every panel body a 392px minimum height. With these compact rows
     the content is shorter than that, so the panel ended up with extra empty space at the bottom.
     Letting the height follow the content keeps the bottom spacing equal to the top. */
  min-height: 0;
  /* No padding on the right or top and bottom here: the gray Featured column runs flush to the
     panel edge, and the left columns carry their own top and bottom padding instead. */
  padding: 0 0 0 24px;
}

/* The shared rule locks the link list at 330px for the Technology layout */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--resources .bz-mega__links {
  width: auto !important;
  flex: none !important;
}

/* Keep the three items together with a small gap instead of spreading them down the column */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--resources .bz-mega__links {
  justify-content: flex-start;
  gap: 4px;
  padding-top: 24px;
  padding-bottom: 24px;
}
/* Same vertical spacing as the Industries links: 9px of padding above and below each row plus the
   4px gap. The shared stylesheet locks the row padding with !important, so this does too. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--resources a.bz-mega__link {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

/* Hover and keyboard focus on the three main links */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--resources a.bz-mega__link:hover,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--resources a.bz-mega__link:focus-visible {
  background: var(--color-gray-lightest) !important;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--resources .bz-mega__link:hover .bz-mega__title,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--resources .bz-mega__link:focus-visible .bz-mega__title {
  color: var(--color-orange) !important;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--resources .bz-mega__link:hover .bz-mega__arrow,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--resources .bz-mega__link:focus-visible .bz-mega__arrow {
  opacity: 1;
}

/* ---- Locations: a photo for each location under the title ---- */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega .bz-mega__locs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  /* Top 2px, right 8px, bottom 19px (matches the gap between Pricing and Client Success), left 16px (lines the
     photos up with the text above them). The 8px on the right brings the gap from the photos to the Blog list
     to 48px, the same as the gap from the Blog list to the gray Featured column. */
  margin: 2px 8px 19px 16px;
  padding: 0;
  list-style: none;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__locs li { margin: 0; padding: 0; }
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__loc-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-gray-light) !important;
  text-decoration: none;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__loc-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__loc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / 0.6) 100%);
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__loc-name {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 1;
  font-family: var(--bz-ui-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-white);
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__loc-card:hover img,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__loc-card:focus-visible img { transform: scale(1.05); }

/* ---- Blog column ---- */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__blog {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* 8px on the right: with the column gap and the link padding this makes the space from the Blog list to the
     gray Featured column 48px, matching the space on the other side of the list. */
  padding: 24px 8px 24px 0;
  min-width: 0;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__col-title {
  display: block;
  align-self: flex-start;
  padding: 9px 16px;
  font-family: var(--bz-ui-font);
  font-size: var(--bz-fs-title);
  font-weight: 600;
  color: var(--color-222);
  text-decoration: none;
  transition: color 0.2s ease;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__col-title:hover,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__col-title:focus-visible { color: var(--color-orange); }

#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__cats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__cats li { margin: 0; padding: 0; }
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--resources .bz-mega__cats a {
  display: block;
  padding: 9px 16px;
  border-radius: 10px;
  font-family: var(--bz-ui-font);
  font-size: var(--bz-fs-list);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-444);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--resources .bz-mega__cats a:hover,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--resources .bz-mega__cats a:focus-visible {
  color: var(--color-orange);
  background: var(--color-gray-lightest) !important;
}

/* ---- Featured posts ---- */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__featured {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 36px;
  border-radius: 0;
  /* Any spare height goes between the label and the cards, so the space under the cards always
     equals the 36px above the label, whatever the width. */
  justify-content: space-between;
  background: var(--color-gray-light);
  min-width: 0;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__posts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__post-text { display: flex; flex-direction: column; gap: 8px; }
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__post-tag {
  font-family: var(--bz-ui-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-444);
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__post {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__post-img {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-gray-light);
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__post-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__post-title {
  font-family: var(--bz-ui-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-222);
  transition: color 0.2s ease;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__post:hover .bz-mega__post-title,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__post:focus-visible .bz-mega__post-title { color: var(--color-orange); }

/* 1280px and below: not enough width for two featured posts, so keep the first one */
@media (max-width: 1280px) {
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__body--resources { grid-template-columns: clamp(340px, 34vw, 440px) fit-content(280px) minmax(0, 1fr); }
  /* One wide card here, so a 16:9 picture keeps it from getting tall */
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__featured .bz-mega__post-img { aspect-ratio: 16 / 9; }
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__posts { grid-template-columns: minmax(0, 1fr); }
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__post:nth-child(2) { display: none; }
}

/* 1100px and below: drop the featured posts and give the other two columns the room */
@media (max-width: 1100px) {
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__body--resources { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); padding-right: 24px; }
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__featured { display: none; }
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--resources .bz-mega__links { display: flex !important; flex-direction: column; gap: 6px; }
}


/* ==========================================================================
   About panel
   Narrow panel (menu item CSS class bz-narrow): team card on the left, links and tagline on the right.
   ========================================================================== */

#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__body--about {
  display: grid;
  grid-template-columns: 400px 460px;
  gap: 0;
  align-items: stretch;
  min-height: 0;
  padding: 0;
}

/* Team photo card: the gray fills the left side of the panel edge to edge (the panel's own
   rounded corners trim it). It reuses the .bz-mega__post image, title, and hover styles from
   the Resources panel. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__about-card {
  gap: 16px;
  padding: 36px;
  border-radius: 0;
  background: var(--color-gray-light) !important;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__post-desc {
  font-size: var(--bz-fs-desc);
  font-weight: 300;
  line-height: 1.45;
  color: var(--color-444);
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__post-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-family: var(--bz-ui-font);
  font-size: var(--bz-fs-desc);
  font-weight: 600;
  color: var(--color-orange);
}
/* The card title stays dark on hover (the shared post style turns it orange). The nudging
   arrow on "About Boxzooka" is the hover cue here. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__about-card:hover .bz-mega__post-title,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__about-card:focus-visible .bz-mega__post-title { color: var(--color-222); }
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__post-cta svg { transition: transform 0.25s ease; }
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__about-card:hover .bz-mega__post-cta svg,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__about-card:focus-visible .bz-mega__post-cta svg { transform: translateX(4px); }

/* Right-hand column: the three links at the top, the tagline at the bottom */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__about-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 36px 36px 20px;
  min-width: 0;
}

/* The shared rule locks the link list at 330px for the Technology layout */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--about .bz-mega__links {
  width: auto !important;
  flex: none !important;
  gap: 4px;
  justify-content: flex-start;
  padding: 0;
}
/* Same vertical spacing as the Industries links */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--about a.bz-mega__link {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

/* Tagline under the links. The all-caps orange look is the shared .bz-mega__eyebrow style;
   this only adds the divider and lines the text up with the link titles above it. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__about-tagline {
  margin: 0;
  padding: 24px 0 0 16px;
  border-top: 1px solid var(--color-eee);
}

/* Hover and keyboard focus, same look as the other panels */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--about a.bz-mega__link:hover,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--about a.bz-mega__link:focus-visible {
  background: var(--color-gray-lightest) !important;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--about .bz-mega__link:hover .bz-mega__title,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--about .bz-mega__link:focus-visible .bz-mega__title {
  color: var(--color-orange) !important;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--about .bz-mega__link:hover .bz-mega__arrow,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--about .bz-mega__link:focus-visible .bz-mega__arrow {
  opacity: 1;
}

/* 1100px and below: the shared rule turns the link list into two columns. Keep one column here. */
@media (max-width: 1100px) {
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--about .bz-mega__links {
    display: flex !important;
    flex-direction: column;
  }
}


/* ==========================================================================
   Services panel
   Narrow panel: swapping image, DTC and B2B links, Fulfillment Services list, and the gray Value-Added column.
   ========================================================================== */

#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--services {
  /* Distance from the top of the panel to the first line of the text columns. */
  --bz-svc-top: 36px;
}

#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__body--services {
  /* Narrow panel sized to its content. No body padding: the image and the text columns carry their own
     margins, and the gray Value-Added column runs flush to the top, right, and bottom edges. */
  grid-template-columns: 340px auto;
  gap: 0;
  padding: 0;
  align-items: stretch;
  position: relative;
  isolation: isolate; /* keeps the gray panel behind the text, but above the white */
}

/* No caption on the images, so the dark fade that sits under the caption is not needed */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--services .bz-mega__layer::after { display: none; }

/* Same edge padding as the Industries and Resources panels: 36px from the left, top, and bottom edges */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--services .bz-mega__media { margin: 36px 0 36px 36px; }

/* The three text columns (DTC and B2B links, Fulfillment Services, Value-Added Services) sit in ONE grid
   row, top aligned. Their first lines match because each starts with the same box: 9px of padding above
   a 16px title on a 25.6px line (set explicitly below), and the two list columns are built the same way,
   so every row under them matches too. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__svc-cols {
  display: grid;
  grid-template-columns: minmax(0, 310px) fit-content(300px) fit-content(280px);
  column-gap: 8px;
  align-items: start;
  align-self: start;
  margin: var(--bz-svc-top) 36px 36px 24px;
}

/* The shared rule locks the link list at 330px for the Technology layout */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--services .bz-mega__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: auto !important;
  flex: none !important;
  margin: 0;
  padding: 0;
}
/* Same vertical spacing as the Industries links; the shared stylesheet locks the padding with !important */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--services a.bz-mega__link {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
/* js/bz-nav-mega.js measures the first line of each column when the panel opens and sets --bz-nudge on any
   column that is off, so the three first lines always sit on one line. At rest it is 0 and does nothing. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--services .bz-mega__links,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--services .bz-mega__block,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--services .bz-mega__vas,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--resources .bz-mega__links {
  transform: translateY(var(--bz-nudge, 0px));
}

/* The title inside the first links gets the same explicit line height as the list titles beside it */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--services .bz-mega__link .bz-mega__title {
  display: block;
  margin: 0;
  font-size: var(--bz-fs-title);
  line-height: 1.6;
}

/* Fulfillment Services and Value-Added Services: a title that is a link, then a plain list */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__block,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__vas {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__vas {
  position: relative;
  margin-left: 32px;
}
/* The gray column. It is drawn from the Value-Added block and extends past it in every direction; the
   panel's rounded, clipped edge trims it flush to the top, right, and bottom. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__vas::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -600px;
  bottom: -600px;
  left: -20px;
  right: -600px;
  background: var(--color-gray-light);
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--services .bz-mega__col-title {
  margin: 0;
  /* explicit, so every title starts the same distance from the top of its column and the rows under them stay level */
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: var(--bz-fs-title);
  line-height: 1.6;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__vas .bz-mega__col-title { padding-left: 16px; }

/* Fulfillment Services sits close to the links, so its text starts 8px in instead of 16px */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__block .bz-mega__col-title,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__block .bz-mega__plain li { padding-left: 8px; }
/* While its image is showing (script sets is-active), the title stays orange as the pointer moves down the list */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--services .bz-mega__col-title.is-active { color: var(--color-orange); }
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__plain li {
  padding: 9px 16px;
  font-family: var(--bz-ui-font);
  font-size: var(--bz-fs-list);
  font-weight: 300;
  line-height: 1;
  color: var(--color-444);
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__block .bz-mega__plain li { padding-left: 8px; }

/* The list items in Fulfillment Services and Value-Added Services are links. They look exactly like the plain
   text did (same size, weight, and color) and only turn orange on hover or keyboard focus. The row padding
   moves from the list item to the link, so the whole row is clickable and nothing shifts. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__plain li:has(> a),
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__block .bz-mega__plain li:has(> a) {
  padding: 0;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__plain li > a {
  display: block;
  padding: 9px 16px;
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__block .bz-mega__plain li > a {
  padding-left: 8px;
}
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__plain li > a:hover,
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__plain li > a:focus-visible {
  color: var(--color-orange);
  text-decoration: none;
}

/* 1300px and below: the full layout is a little wider than the screen, so the image column and the link column get
   narrower. Without this the columns squeeze and list items start to wrap, which pushes the rows out of line. */
@media (max-width: 1300px) {
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__body--services { grid-template-columns: 300px auto; }
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__svc-cols { grid-template-columns: minmax(0, 290px) fit-content(300px) fit-content(280px); }
}

/* 1100px and below: the shared rules hide the image and turn the link list into a two-column grid. The three text
   columns stay side by side (there is room for them down to the mobile menu); the links go back to one column. */
@media (max-width: 1100px) {
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__body--services { grid-template-columns: auto; }
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--services .bz-mega__links { display: flex !important; flex-direction: column; }
}
/* 1000px and below: a little less space between the columns and at the edges */
@media (max-width: 1000px) {
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__svc-cols { grid-template-columns: minmax(0, 270px) fit-content(300px) fit-content(280px); margin-left: 20px; margin-right: 24px; }
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__vas { margin-left: 24px; }
}

/* ==========================================================================
   Font size tiers for the new panels
   The link titles and descriptions already step down with the screen (see "Responsive tiers" above:
   16/14px, then 15/13 at 1200px, 14/12.5 at 1000px, 13/12 at 900px). Everything else in the panels
   reads from these three variables so it steps down the same way and stays in proportion:
     --bz-fs-title  column titles and the About card title    (matches the link titles)
     --bz-fs-desc   card text and small links                 (matches the link descriptions)
     --bz-fs-list   plain lists and the Blog category list    (between the two)
   ========================================================================== */

#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega {
  --bz-fs-title: 16px;
  --bz-fs-desc: 14px;
  --bz-fs-list: 15px;
}
@media (max-width: 1200px) {
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega { --bz-fs-title: 15px; --bz-fs-desc: 13px; --bz-fs-list: 14px; }
}
@media (max-width: 1000px) {
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega { --bz-fs-title: 14px; --bz-fs-desc: 12.5px; --bz-fs-list: 13px; }
}
@media (max-width: 900px) {
  #site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega { --bz-fs-title: 13px; --bz-fs-desc: 12px; --bz-fs-list: 12px; }
}

/* The About card title matches the link titles beside it */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega__about-card .bz-mega__post-title { font-size: var(--bz-fs-title); }

/* Technology: the integrations heading was 20px (18px, 16px, 15px lower down) against 16px link titles, so it
   read larger than everything else. One pixel above the link titles keeps it a heading without dominating. */
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__int-title { font-size: calc(var(--bz-fs-title) + 1px); }
#site-header #mega-menu-wrap-primary #mega-menu-primary .custom-html-widget .bz-mega--tech .bz-mega__int-sub { font-size: var(--bz-fs-desc); }