.celebrities-endorsement {
  /* Keep overall section padding and structure, but remove center alignment here */
}

.celebrities-endorsement .title-wrapper {
  text-align: left; /* Align heading and subheading left */
  margin-bottom: 2rem; /* Add some space below the titles */
}

.celebrities-endorsement .title {
  font-size: 3rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.celebrities-endorsement__subheading {
  margin-top: 1rem;
  font-style: italic;
  font-size: 1rem;
  color: rgb(var(--color-foreground));
}

/* Horizontal scroll container */
.celebrities-endorsement__grid-container {
  overflow-x: auto; /* Enable horizontal scrolling */
  white-space: nowrap; /* Prevent items from wrapping */
  padding-bottom: 1rem; /* Space for potential scrollbar if not hidden */
  cursor: grab;
  /* Hide scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.celebrities-endorsement__grid-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}
.celebrities-endorsement__grid-container.grabbing {
  cursor: grabbing;
}

.celebrities-endorsement__grid {
  /* Remove grid display and related properties */
  /* display: grid; */
  /* grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
  /* gap: 3rem; */
  margin-top: 3rem;
  /* justify-items: center; */
  /* Let container handle wrapping/scrolling */
  white-space: nowrap; /* Ensure direct children don't wrap (belt and braces) */
  display: block; /* Or inline-block, adjust as needed */
}

.celebrities-endorsement__card {
  /* display: flex; */ /* Change to inline-block */
  /* flex-direction: column; */
  /* align-items: center; */
  /* text-align: center; */
  display: inline-block;
  vertical-align: top; /* Align cards to the top */
  width: 180px; /* Set an explicit width based on image size or desired card size */
  margin-right: 2rem; /* Use margin for spacing instead of gap */
  white-space: normal; /* Allow text inside card to wrap */
  text-align: center;
}

.celebrities-endorsement__card:last-child {
  margin-right: 0; /* Remove margin from the last card */
}

.celebrities-endorsement__image-wrapper {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background-color: rgba(var(--color-foreground), 0.04);
}

.celebrities-endorsement__image-placeholder .placeholder-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  fill: currentColor;
  opacity: 0.3;
}

.celebrities-endorsement__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.celebrities-endorsement__name {
  font-size: var(--font-heading-scale);
  margin-bottom: 0;
  font-weight: 900;
  text-transform: uppercase;
}

.celebrities-endorsement__title {
  font-size: var(--font-body-scale);
  color: rgba(var(--color-foreground), 0.75);
  font-weight: var(--font-weight-bold);
  margin-top: 0;
}

/* Section padding is handled by classes in the liquid file, 
   referencing theme variables like --grid-desktop-vertical-spacing.
   No need to duplicate padding rules here unless overriding */

/* Media query for padding is also handled in the liquid file's style block previously, 
   or should be part of global theme styles if padding is consistent */

.placeholder-noblocks {
  padding: 2rem;
  text-align: center;
  background-color: rgba(var(--color-foreground), 0.04);
  border: 1px dashed rgba(var(--color-foreground), 0.1);
  border-radius: var(--border-radius);
}
