:root {
  --cc-about-radius: 20px;
  --cc-about-media-ar: 4 / 3;
}

.cc-about,
.cc-about *,
.cc-about *::before {
  box-sizing: border-box;
}


.sectionContainer.aboutus {
    display:flex;
    gap: 32px;
}

/* Leading line breaks pasted in from the CMS editor add two blank lines
   above the second paragraph. Remove them in the content if possible. */
.sectionContainer.aboutus > .aboutus > p > br:first-child,
.sectionContainer.aboutus > .aboutus > p > br:first-child + br {
    display: none;
}

.sectionContainer.aboutus > .aboutus > p:last-child {
    margin-bottom: 0;
}

/* Desktop only: a flex-basis of 0 collapses the card to zero height once
   the halves stack into a column. */
@media (min-width: 768px) {
  /* Centring the copy against the photo stops a short text column leaving
     a gap under it, or a long one leaving the photo floating at the top.
     The card's bottom margin would knock the centring off, so the section
     carries it instead. */
  .sectionContainer.aboutus {
      align-items: center;
      gap: 48px;
      margin-bottom: var(--section-gap);
  }

  .sectionContainer.aboutus > .aboutus,
  .sectionContainer.aboutus > .cc-about {
      flex: 1 1 0;
      min-width: 0;
  }

  .sectionContainer.aboutus > .cc-about {
      margin-bottom: 0;
  }
}

.cc-about {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--surface-panel-invert);
  border-radius: var(--cc-about-radius);
  overflow: hidden;
  margin-bottom: var(--section-gap);
  width: 100%;
  position: relative;
}

.cc-about__body {position:absolute;z-index: 1;width: 100%;height: 100%;    padding: 32px;}

.cc-about__text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  max-width: 500px;
}

.cc-about__title {
  color: var(--basketButtonHoverText);
  margin: 0;
  overflow-wrap: break-word;
}

.cc-about__copy {
  margin: 0;
  overflow-wrap: break-word;
  color: var(--basketButtonHoverText);
}

.cc-about__copy > :first-child {
  margin-top: 0;
}

.cc-about__copy > :last-child {
  margin-bottom: 0;
}

/* One clear line between paragraphs, which is the blank line the comp
   draws. calc so it tracks --leading-body rather than being a magic 26px. */
.cc-about__copy p + p {
  margin-top: calc(var(--leading-body, 1.6) * 1em);
}

/* .cc-btn draws the pill and .cc-btn--dark inverts it for this white
   panel, so there is no geometry to restate here. flex-shrink: 0 stops the
   flex column squeezing the pill shorter than its own padding if the copy
   ever fills the half completely. */
.cc-about__cta {
  flex: 0 0 auto;
}

/* The template outputs whitespace inside an unfilled CTA, which :empty does
   not match, so an empty title is also taken to mean the block has no CTA. */
.cc-about__cta:empty,
.cc-about__text:has(.cc-about__title:empty) ~ .cc-about__cta {
  display: none;
}

.cc-about__media {
  flex: 1 1 50%;
  min-width: 0;
  position: relative;
  align-self: stretch;
}

.cc-about__media::before {
  content: "";
  display: block;
  aspect-ratio: var(--cc-about-media-ar);
}

.cc-about__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 10px;
  border-radius: var(--radius4);
}

/* Responsive ----------------------------------------------------------- */

/* There is no mobile comp for this section, so below 768 the halves stack
   copy-then-photo (reading order matches the DOM, no reordering) and the
   inset drops to --space-xs. */
@media (max-width: 767px) {
  .cc-about, .sectionContainer.aboutus {
    flex-direction: column;
  }

  .cc-about__body {
    padding: var(--space-xs);
  }
}