/* Shared detail cards for the Security, Infra, and Cloud service pages. */
html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) {
  --b-detail-card-bg: #fff;
  --b-detail-card-line: #d7e3f1;
  --b-detail-card-soft: #eff5fc;
  --b-product-list-ink: #245d96;
}

html[data-theme="dark"] body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) {
  --b-detail-card-bg: #101b29;
  --b-detail-card-line: #30435d;
  --b-detail-card-soft: #1a2c43;
  --b-product-list-ink: #a9cfff;
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) :is(.b-detail-grid, .b-products.b-product-list.b-detail-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
  min-width: 0;
  margin-top: 28px;
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-grid > :is(.b-detail-card.b-product-row, .b-detail-card.b-feature-panel, .b-detail-card.b-lenovo-option, .b-detail-card) {
  display: block;
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--b-detail-card-line);
  border-radius: 18px;
  background: var(--service-card-surface);
  box-shadow: var(--service-card-shadow);
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-grid > .b-product-row.b-detail-card {
  padding: 0;
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card.b-product-row > .b-product-label {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  min-height: 124px;
  margin: 0;
  padding: 24px;
  border-radius: 17px 17px 0 0;
  background: radial-gradient(ellipse at 100% 0, #2679c8 0, transparent 70%), linear-gradient(120deg, #102d55, #164e8d);
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card.b-product-row .b-product-label h3 {
  margin: 0;
  color: #fff;
  text-wrap: pretty;
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card.b-product-row .b-product-label .b-maker {
  margin: 0 0 7px;
  color: #c2dcff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card.b-product-row .b-product-mark {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(203 226 255 / 30%);
  border-radius: 13px;
  background: rgb(239 247 255 / 12%);
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card.b-product-row .b-product-mark svg {
  width: 40px;
  height: 40px;
  stroke: #b9d9ff;
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card.b-product-row .b-product-mark svg [fill]:not([fill="none"]):not([fill="#f47a2b"]) {
  fill: #2b609b;
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-grid > .b-product-row.b-detail-card > .b-product-copy {
  margin: 0;
  padding: 24px;
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card.b-product-row .b-product-copy > p {
  font-size: 14px;
  line-height: 1.85;
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card .b-features {
  font-size: 13px;
  line-height: 1.85;
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card .b-features li {
  padding: 9px 0 9px 18px;
  border: 0;
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card .b-features li::before {
  top: 16px;
  left: 1px;
  width: 7px;
  height: 4px;
  border-left: 1.7px solid var(--b-blue);
  border-bottom: 1.7px solid var(--b-blue);
  border-radius: 0;
  background: none;
  transform: rotate(-45deg);
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card :is(.b-inline-note, .b-product-listing) {
  margin: 22px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--b-detail-card-soft);
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-product-listing > :is(strong, .b-product-names) {
  color: var(--b-product-list-ink);
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card .b-product-context {
  border-radius: 10px;
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card:target {
  border-color: var(--b-blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--b-blue) 20%, transparent), var(--service-card-shadow);
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card > .card-emblem {
  margin-bottom: 20px;
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card[id] {
  scroll-margin-top: calc(var(--preview-header-height) + var(--preview-nav-height) + 24px);
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-grid > .b-detail-card :is(.b-product-label, .b-product-copy, .b-product-details, .b-product-detail-content) {
  min-width: 0;
}

html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-grid > .b-detail-card .b-product-context {
  background: var(--b-detail-card-soft);
}

html body.public-site.page-business-v16 #public-main.v16-business.b-security .b-detail-grid > .b-feature-panel.b-detail-card h3 {
  font-size: 24px;
  line-height: 1.5;
}

@media (min-width: 1200px) {
  html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-products.b-product-list.b-detail-grid.b-detail-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) :is(.b-detail-grid, .b-products.b-product-list.b-detail-grid) {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-grid > :is(.b-detail-card.b-product-row, .b-detail-card.b-feature-panel, .b-detail-card.b-lenovo-option, .b-detail-card) {
    padding: 20px;
  }

  html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-grid > .b-product-row.b-detail-card {
    padding: 0;
  }

  html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card.b-product-row > .b-product-label {
    min-height: 108px;
    padding: 20px;
    gap: 12px;
  }

  html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-grid > .b-product-row.b-detail-card > .b-product-copy {
    padding: 20px;
  }

  /* Short cards use the available phone width instead of adding an icon-only row. */
  html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-grid > .b-detail-card:is(.b-lenovo-option, .b-infra-vmware-card, .b-cloud-service-card) {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 8px 16px;
  }

  html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card:is(.b-lenovo-option, .b-infra-vmware-card, .b-cloud-service-card) > .card-emblem {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 0;
  }

  html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card:is(.b-lenovo-option, .b-infra-vmware-card, .b-cloud-service-card) > h4 {
    grid-column: 2;
    margin: 0;
    padding-right: 22px;
  }

  html body.public-site.page-business-v16 #public-main.v16-business:is(.b-security, .b-infra, .b-cloud) .b-detail-card:is(.b-lenovo-option, .b-infra-vmware-card, .b-cloud-service-card) > p {
    grid-column: 2;
    margin: 0;
  }
}