.ttpe.ttpe-carousel { min-width: 0; max-width: 100%; }
.ttpe.ttpe-carousel .ttpe-grid {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--ttpe-columns,3) - 1) * 28px) / var(--ttpe-columns,3));
  gap: 28px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 5px 2px 18px;
  scrollbar-width: thin;
  scrollbar-color: #fff #252525;
}
.ttpe.ttpe-carousel .ttpe-card { scroll-snap-align: start; min-width: 0; }
.ttpe.ttpe-carousel .ttpe-controls { display: flex; justify-content: flex-end; gap: 12px; margin: 0 0 18px; }
.ttpe.ttpe-carousel .ttpe-controls[hidden] { display: none; }
.ttpe.ttpe-carousel .ttpe-controls button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 44px; padding: 0; border: 1px solid #fff;
  border-radius: 999px; color: #000; background: #fff;
  font: 26px/1 Arial, sans-serif; cursor: pointer;
}
.ttpe.ttpe-carousel .ttpe-controls button:disabled { opacity: .35; cursor: default; }
.ttpe.ttpe-carousel button:focus-visible,
.ttpe.ttpe-carousel .ttpe-grid:focus-visible { outline: 3px solid var(--ttpe-accent,#AA7F31); outline-offset: 3px; }
@media(max-width:900px) {
  .ttpe.ttpe-carousel .ttpe-grid { grid-auto-columns: calc((100% - 28px) / 2); }
}
@media(max-width:540px) {
  .ttpe.ttpe-carousel .ttpe-grid { grid-auto-columns: 88%; gap: 18px; }
}


@media(hover:hover){.ttpe.ttpe-carousel .ttpe-controls button:not(:disabled):hover{background:#fff;color:#000;border-color:var(--ttpe-accent,#AA7F31);box-shadow:0 0 0 1px var(--ttpe-accent,#AA7F31)}}