.carusel { position: relative; }


.carusel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  
  padding: 6px 4px;
  margin: -6px -4px;
  scroll-padding-inline: 4px;
}
.carusel-viewport::-webkit-scrollbar { display: none; }
.carusel.is-ready .carusel-viewport {
  overflow: hidden;
  overflow: clip;           
  overflow-clip-margin: 0;
  scroll-snap-type: none;
  touch-action: pan-y;      
}

.carusel .carusel-track.cards-core {
  display: flex;
  grid-template-columns: none;
  gap: var(--s4);
  position: relative;
  margin: 0;
  padding: 0;
}
.carusel.is-ready .carusel-track.cards-core { will-change: transform; }

.carusel .carusel-track.cards-core > .card {
  flex: 0 0 82%;            
  min-width: 0;
  display: flex;
  flex-direction: column;
  grid-row: auto;
  scroll-snap-align: start;
}
@media (width >= 36rem) {
  .carusel .carusel-track.cards-core > .card { flex-basis: calc((100% - var(--s4)) / 2); }
}
@media (width >= 64rem) {
  .carusel .carusel-track.cards-core > .card { flex-basis: calc((100% - 3 * var(--s4)) / 4); }
}


.carusel .carusel-track.cards-core > .card.card-link:not(.card-wide) > .photo {
  aspect-ratio: 24 / 25;
  padding: 0;
  align-self: stretch;
}
.carusel .carusel-track.cards-core .card > .photo img {
  position: static;
  width: 100%;
  height: 100%;
  max-width: 100%;
  transform: none;
  object-fit: cover;
  object-position: 50% 100%;
}

.carusel .carusel-track.cards-core > .card.card-link[data-pf-type="sealing-machine"]:not(.card-wide) > .photo { padding: var(--s3); }
.carusel .carusel-track.cards-core .card[data-pf-type="sealing-machine"] > .photo img { object-fit: contain; object-position: 50% 50%; }


.carusel-btn {
  position: absolute;
  top: calc(50% - 1.375rem);   
  z-index: 3;
  width: 24px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 2px;
  background: none;
  color: #888;
  cursor: pointer;
  transition: color .15s ease-out;
}
.carusel-btn[hidden] { display: none; }
.carusel-btn svg { width: 20px; height: 44px; display: block; overflow: visible; }
.carusel-btn:hover, .carusel-btn:focus-visible { color: #7d6026; }
.carusel-btn:focus-visible { outline: 2px solid #7d6026; outline-offset: 0; }
.carusel-prev { left: 0; }
.carusel-next { right: 0; }


.carusel-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s4);
}
.carusel-ctrl[hidden] { display: none; }
.carusel-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.carusel-dot {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.carusel-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #6f7a70;
  background: transparent;
  box-sizing: border-box;
  transition: background-color .15s ease-out, width .15s ease-out;
}
.carusel-dot[aria-current="true"]::before { width: 22px; border-radius: 5px; border-color: #7d6026; background: #7d6026; }
.carusel-dot:hover::before { border-color: #6b5220; }
.carusel-dot:focus-visible { outline: 2px solid #7d6026; outline-offset: 0; border-radius: 4px; }

.carusel-pause {
  width: 32px;
  height: 32px;
  margin-left: var(--s2);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #6f7a70;
  border-radius: 50%;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
}
.carusel-pause[hidden] { display: none; }
.carusel-pause svg { width: 14px; height: 14px; }
.carusel-pause:hover { background: #6b5220; border-color: #6b5220; color: #fff; }
.carusel-pause:focus-visible { outline: 2px solid #7d6026; outline-offset: 2px; }
.carusel-pause .ic-play { display: none; }
.carusel-pause[aria-pressed="true"] .ic-play { display: block; }
.carusel-pause[aria-pressed="true"] .ic-pause { display: none; }

@media (prefers-reduced-motion: reduce) {
  .carusel-btn, .carusel-dot::before { transition: none; }
}