.broccoli-parents {
  border-color: #cbdab7;
  background: linear-gradient(145deg, #fffaf0, #eaf2df);
}

.broccoli-gallery {
  grid-template-rows: minmax(270px, 1.2fr) minmax(170px, .8fr);
  background: linear-gradient(145deg, #719661, #4f785e);
}

.theme-children .detail-art {
  background: linear-gradient(145deg, #dce9c8, #89a86f);
}

.theme-children .detail-art img {
  object-fit: contain;
  object-position: center;
}

.theme-children .detail-art .art-seal {
  display: none;
}

.broccoli-gallery .parents-image {
  border-color: #fff9e8;
  background: #dbe6cc;
  box-shadow: 0 9px 19px #26482f4d;
}

.broccoli-gallery .parents-image img {
  object-position: center;
}

.broccoli-image-wide {
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
}

.broccoli-image-wide::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 0;
  background-image: var(--gallery-image);
  background-position: center;
  background-size: cover;
  filter: blur(16px);
  opacity: .4;
  transform: scale(1.08);
  pointer-events: none;
}

.broccoli-image-wide img {
  position: relative;
  z-index: 1;
  width: auto;
  height: 100%;
  margin: auto;
  object-fit: contain;
  box-shadow: 0 7px 22px #223d2d55;
}

.broccoli-parents .parents-guide {
  background:
    radial-gradient(circle at 92% 4%, #d9e9b8 0, transparent 24%),
    linear-gradient(145deg, #fffaf0, #edf4e3);
}

.broccoli-parents .parents-guide > .eyebrow,
.broccoli-parents .parents-label {
  color: #39704c;
}

.broccoli-parents .parents-intro em,
.broccoli-parents .parents-stats strong {
  color: #285e42;
}

.broccoli-book-title {
  margin: 17px 0 0;
  color: #244d37;
  font: 700 20px/1.3 Georgia, serif;
}

.broccoli-parents .parents-stats {
  grid-template-columns: 0.85fr 1.15fr;
}

.broccoli-parents .parents-stats div {
  border-color: #d5e2c6;
  background: #fffdf5;
}

.broccoli-parents .parents-stats strong:first-letter {
  text-transform: uppercase;
}

.broccoli-parents .readability-card {
  border-left-color: #4d825c;
  background: #fffdf5;
}

.shared-laughter-card {
  margin-top: 13px;
  padding: 18px 22px;
  border: 1px dashed #9db787;
  border-radius: 13px;
  background: #f3f7e9;
}

.shared-laughter-card p {
  margin: 0;
  color: #536153;
  font-size: 14px;
  line-height: 1.6;
}

.broccoli-parents .theme-list article {
  border-top-color: #d7e1c9;
}

.broccoli-parents .theme-list article > span {
  background: #39704c;
}

.children-second-book {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}

.children-second-book .extra-story-cover {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 4px solid #fffaf0;
  border-radius: 10px;
  box-shadow: 0 9px 20px #2f463226;
}

.children-second-book strong {
  margin-top: 6px;
}

.second-parent-link {
  display: inline-block;
  margin-top: 11px;
  color: #39704c;
  font-size: 12px;
  font-weight: 700;
  text-underline-offset: 4px;
}

.second-parent-link:hover {
  color: #244d37;
}

.hogan-parents {
  border-color: #e3c88a;
  background: linear-gradient(145deg, #fff8df, #e8f3fb);
}

.hogan-gallery {
  grid-template-rows: minmax(270px, 1.2fr) minmax(170px, .8fr);
  background: linear-gradient(145deg, #e8a43c, #326b94);
}

.hogan-gallery .parents-image {
  border-color: #fff9e7;
  background: #dcebf4;
  box-shadow: 0 9px 19px #233f5840;
}

.hogan-image-wide {
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
}

.hogan-image-wide::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 0;
  background-image: var(--gallery-image);
  background-position: center;
  background-size: cover;
  filter: blur(16px);
  opacity: .42;
  transform: scale(1.08);
  pointer-events: none;
}

.hogan-image-wide img {
  position: relative;
  z-index: 1;
  width: auto;
  height: 100%;
  margin: auto;
  object-fit: contain;
  box-shadow: 0 7px 22px #28384b55;
}

.hogan-parents .parents-guide {
  background:
    radial-gradient(circle at 92% 4%, #cce7f5 0, transparent 24%),
    linear-gradient(145deg, #fffaf0, #f6edcf);
}

.hogan-parents .parents-guide > .eyebrow,
.hogan-parents .parents-label {
  color: #a95425;
}

.hogan-parents .parents-intro em,
.hogan-parents .parents-stats strong {
  color: #9a4b22;
}

.hogan-book-title {
  margin: 17px 0 0;
  color: #244b68;
  font: 700 20px/1.3 Georgia, serif;
}

.hogan-parents .parents-stats {
  grid-template-columns: 1.15fr .85fr;
}

.hogan-parents .parents-stats div {
  border-color: #ead7a9;
  background: #fffdf5;
}

.hogan-parents .readability-card {
  border-left-color: #db7b32;
  background: #fffdf5;
}

.hogan-heart-card {
  margin-top: 13px;
  padding: 18px 22px;
  border: 1px dashed #76a2bc;
  border-radius: 13px;
  background: #eef7fb;
}

.hogan-heart-card p,
.hogan-parents .readability-card p,
.hogan-parents .theme-list p {
  margin: 0;
  color: #4e5d64;
  font-size: 16px;
  line-height: 1.6;
}

.hogan-parents .theme-list article {
  border-top-color: #eadab5;
}

.hogan-parents .theme-list article > span {
  background: #d56f2c;
}

.theme-children .detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.theme-children .detail-actions .detail-cta {
  margin-top: 0;
}

.theme-children .get-copy-cta {
  background: #39704c;
}

.theme-children .get-copy-cta:hover {
  background: #244d37;
}

.theme-children .hogan-copy-cta {
  background: #b45f27;
}

.theme-children .hogan-copy-cta:hover {
  background: #823e1b;
}

.theme-children .parents-purchase-cta {
  margin-top: 22px;
}

.theme-children .hogan-heading-purchase {
  margin-top: 4px;
}

.theme-children .hogan-purchase-intro {
  margin-top: 18px;
}

@media (max-width: 650px) {
  .theme-children .detail-actions {
    width: 100%;
  }

  .theme-children .detail-actions .detail-cta {
    justify-content: center;
  }

  .broccoli-gallery {
    grid-template-rows: 205px 135px;
  }

  .hogan-gallery {
    grid-template-rows: 205px 135px;
  }

  .broccoli-parents .parents-stats {
    grid-template-columns: 1fr 1fr;
  }

  .hogan-parents .parents-stats {
    grid-template-columns: 1fr 1fr;
  }

  .children-second-book {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 15px;
  }

  .children-second-book strong {
    font-size: 21px;
  }
}