/* Ajustes estruturais exclusivos da demonstração. */
.demo-carousel {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  outline: none;
  touch-action: pan-y;
}

.demo-carousel-viewport {
  overflow: hidden;
  border-radius: var(--sfy-card-system-radius, 22px);
}

.demo-carousel-track > [data-carousel-slide] {
  width: 100%;
  height: auto;
  margin: 0;
}

.demo-carousel-track > [data-carousel-slide][hidden] {
  display: none !important;
}

.demo-carousel .product-media img {
  display: block;
  width: 100%;
  height: auto;
}

.demo-carousel-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.demo-carousel-control {
  gap: .5rem;
}

.demo-carousel-indicators {
  display: flex;
  justify-content: center;
  gap: .55rem;
}

.demo-carousel-indicators button {
  width: 12px;
  min-height: 12px;
  padding: 0;
  border: 1px solid rgba(8, 38, 66, .24);
  border-radius: 999px;
  background: rgba(8, 38, 66, .12);
}

.demo-carousel-indicators button[aria-current="true"] {
  width: 30px;
  border-color: transparent;
  background: var(--sfy-gradient-brand);
}

main > .hero ~ .section:nth-of-type(3) .section-header {
  max-width: none;
}

main > .hero ~ .section:nth-of-type(3) .section-header > p {
  white-space: nowrap;
}

@media (max-width: 1199.98px) {
  main > .hero ~ .section:nth-of-type(3) .section-header > p {
    white-space: normal;
  }
}

@media (max-width: 767.98px) {
  .demo-carousel-toolbar {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }

  .demo-carousel-indicators {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .demo-carousel-control {
    width: 100%;
  }
}