/* Commercial collection admin home. Scoped to avoid changing the landing pages. */
#root .admin-console.commercial-portal {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

#root .admin-console.commercial-portal .commercial-console-workspace {
  flex: 1 0 auto !important;
}

#root .admin-console.commercial-portal .commercial-console-footer {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}

/* A quiet branded illustration in place of the large lifestyle image. */
#root .admin-console.commercial-portal .commercial-home-story-art {
  background: radial-gradient(circle at 54% 48%, #fffaf3 0%, #ede3d2 78%) !important;
}

#root .admin-console.commercial-portal .commercial-home-story-art > img {
  display: none !important;
}

#root .admin-console.commercial-portal .commercial-home-story-art::before {
  background: url('/commercial-console/icons/collection.svg') center / 200px no-repeat !important;
}

/* Match the icon-led Admins and Plan tiles, using the same small image column. */
#root .admin-console.commercial-portal .commercial-home-action:has(> .commercial-home-action-photo) {
  grid-template-columns: 86px minmax(0, 1fr) 32px !important;
  min-height: 112px !important;
}

#root .admin-console.commercial-portal .commercial-home-action-photo {
  display: none !important;
}

#root .admin-console.commercial-portal .commercial-home-action:has(> .commercial-home-action-photo)::before {
  content: '' !important;
  display: block !important;
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  width: 86px !important;
  height: auto !important;
  min-height: 112px !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  background-color: #7A1F2B !important;
  background-position: center !important;
  background-size: 42px 42px !important;
  background-repeat: no-repeat !important;
}

#root .admin-console.commercial-portal .commercial-home-action.navy:has(> .commercial-home-action-photo)::before {
  background-color: #1F3553 !important;
}

#root .admin-console.commercial-portal .commercial-home-action.olive:has(> .commercial-home-action-photo)::before {
  background-color: #7A1F2B !important;
}

#root .admin-console.commercial-portal .commercial-home-action.gold:has(> .commercial-home-action-photo)::before {
  background-color: #B48A52 !important;
}

#root .admin-console.commercial-portal .commercial-home-action:has(> img[src*='review-stories'])::before {
  background-image: url('/commercial-console/icons/review.svg') !important;
}

#root .admin-console.commercial-portal .commercial-home-action:has(> img[src*='add-content'])::before {
  background-image: url('/commercial-console/icons/add.svg') !important;
}

#root .admin-console.commercial-portal .commercial-home-action:has(> img[src*='invite-share'])::before {
  background-image: url('/commercial-console/icons/invite.svg') !important;
}

#root .admin-console.commercial-portal .commercial-home-action:has(> img[src*='digital-book'])::before {
  background-image: url('/commercial-console/icons/book.svg') !important;
}

#root .admin-console.commercial-portal .commercial-home-action:has(> img[src*='collection-settings'])::before {
  background-image: url('/commercial-console/icons/settings.svg') !important;
}

#root .admin-console.commercial-portal .commercial-home-action:has(> img[src*='story-prompts'])::before {
  background-image: url('/commercial-console/icons/prompts.svg') !important;
}

/* The two existing SVG cards use their original marks with the same footprint. */
#root .admin-console.commercial-portal .commercial-home-admin-card,
#root .admin-console.commercial-portal .commercial-home-plan-card {
  grid-template-columns: 86px minmax(0, 1fr) 32px !important;
  min-height: 112px !important;
  background: #fffdf9 !important;
}

#root .admin-console.commercial-portal .commercial-home-admin-card .commercial-home-action-icon,
#root .admin-console.commercial-portal .commercial-home-plan-card .commercial-home-action-icon {
  width: 86px !important;
  height: 100% !important;
  min-height: 112px !important;
  border-radius: 0 !important;
  background: #1F3553 !important;
  color: #fff !important;
}

#root .admin-console.commercial-portal .commercial-home-plan-card .commercial-home-action-icon {
  background: #B48A52 !important;
  color: #fff !important;
}

/* Preserve the quote without a separate photograph. */
#root .admin-console.commercial-portal .commercial-home-inspiration {
  grid-template-columns: minmax(0, 1fr) 86px !important;
  background: #fffaf3 !important;
}

#root .admin-console.commercial-portal .commercial-home-inspiration img {
  display: none !important;
}

#root .admin-console.commercial-portal .commercial-home-inspiration::after {
  content: '' !important;
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  background: #f3eadb url('/commercial-console/icons/collection.svg') center / 42px no-repeat !important;
}

@media (max-width: 760px) {
  #root .admin-console.commercial-portal .commercial-home-story-art::before {
    background-size: 128px !important;
  }

  #root .admin-console.commercial-portal .commercial-home-action:has(> .commercial-home-action-photo),
  #root .admin-console.commercial-portal .commercial-home-admin-card,
  #root .admin-console.commercial-portal .commercial-home-plan-card {
    grid-template-columns: 72px minmax(0, 1fr) 30px !important;
  }

  #root .admin-console.commercial-portal .commercial-home-action:has(> .commercial-home-action-photo)::before,
  #root .admin-console.commercial-portal .commercial-home-admin-card .commercial-home-action-icon,
  #root .admin-console.commercial-portal .commercial-home-plan-card .commercial-home-action-icon {
    width: 72px !important;
    min-height: 112px !important;
  }
}