.cs-slider{
  position: relative;
  width: 100%;
  height: min(var(--cs-max-h, 360px), 70dvh);
  max-height: var(--cs-max-h, 360px);
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  --cs-item-gap: var(--cs-gap, 8px);
  --cs-hint-edge: 25%;
  --cs-chevron-size: 36px;
  --cs-chevron-mult: 110;
}

@media (max-width: 480px){
  .cs-slider{
    height: min(var(--cs-max-h, 360px), 50dvh);
    --cs-item-gap: var(--cs-gap-mobile, var(--cs-gap, 8px));
  }
}
@media (min-width: 481px) and (max-width: 1024px){
  .cs-slider{
    height: min(var(--cs-max-h, 360px), 60dvh);
    --cs-item-gap: var(--cs-gap-mobile, var(--cs-gap, 8px));
  }
}
@media (min-width: 1280px){
  .cs-slider{ height: min(var(--cs-max-h, 360px), 80dvh); }
}

.cs-track{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
  will-change: transform;
  transition: transform 0s;
  padding-inline: var(--cs-edge, 16px);
}
@media (max-width: 1024px){
  .cs-track{ padding-inline: var(--cs-edge-mobile, 0px); }
}

/* Full bleed */
.cs-bleed-full{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@supports (width: 100dvw){
  .cs-bleed-full{
    width: 100dvw;
    max-width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
}
.cs-bleed-full .cs-track{ padding-inline: 0 !important; }

/* On phones (≤768px) with bleed=full, force hints to reach middle */
@media (max-width: 768px){
  .cs-bleed-full{ --cs-hint-edge: 50% !important; }
}

/* Mobile/tablette only bleed */
@media (max-width: 1024px){
  .cs-bleed-mobile{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Override variable so hints reach the middle on mobile bleed */
    --cs-hint-edge: 50% !important;
  }
  @supports (width: 100dvw){
    .cs-bleed-mobile{
      width: 100dvw;
      max-width: 100dvw;
      margin-left: calc(50% - 50dvw);
      margin-right: calc(50% - 50dvw);
    }
  }
  .cs-bleed-mobile .cs-track{ padding-inline: 0 !important; }
}

.wp-block[data-align="full"] .cs-slider.cs-bleed-full,
.wp-block-cursor-slider.alignfull .cs-slider.cs-bleed-full{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@supports (width: 100dvw){
  .wp-block[data-align="full"] .cs-slider.cs-bleed-full,
  .wp-block-cursor-slider.alignfull .cs-slider.cs-bleed-full{
    width: 100dvw;
    max-width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
}

.cs-item{
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 0 0 auto;
  margin: 0;
  margin-right: var(--cs-item-gap);
}
.cs-item:last-child{ margin-right: 0; }

.cs-img{
  display: block;
  height: 100%;
  width: auto;
  max-width: none !important;
  object-fit: cover;
}
.cs-cap{
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding-top: 6px;
  color: #444;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}
.cs-link{ text-decoration: none; }
.cs-link:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; }

/* --- HINT: Chevrons gradient --- */
.cs-hint{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
  color: #0a0a0a;
}
.cs-hint.is-visible{ opacity:1; }
.cs-hint.is-hiding{ opacity:0; }
.cs-hint-edge{
  position:absolute;
  top:0; bottom:0;
  width: var(--cs-hint-edge, 25%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.cs-hint-left{ left:0; }
.cs-hint-right{ right:0; }
.cs-hint-edge::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 100%;
  background: linear-gradient(to var(--dir, right), rgba(0,0,0,.18), rgba(0,0,0,0));
}
.cs-hint-left{ --dir:right; }
.cs-hint-right{ --dir:left; }

.cs-chevron{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  font-size: var(--cs-chevron-size, 36px);
  line-height: 1;
  color: currentColor;
  opacity: calc((var(--o, .8)) * (var(--cs-chevron-mult, 110) / 100));
  animation: cs-hint-pulse 1.2s ease-in-out infinite;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.cs-hint-left .cs-chevron{ left: calc(var(--p) * var(--cs-hint-edge, 25%)); }
.cs-hint-right .cs-chevron{ right: calc(var(--p) * var(--cs-hint-edge, 25%)); }

@media (prefers-reduced-motion: reduce){
  .cs-chevron{ animation: none; }
}
@keyframes cs-hint-pulse{
  0%,100%{ transform: translateY(-50%) scale(1); }
  50%{ transform: translateY(-50%) scale(1.08); }
}

/* --- HINT: Arrows Solid (triangles) --- */
.cs-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  opacity: calc((var(--o, .8)) * (var(--cs-chevron-mult, 110) / 100));
  line-height: 1;
}
.cs-hint-left .cs-arrow{ left: calc(var(--p) * var(--cs-hint-edge, 25%)); }
.cs-hint-right .cs-arrow{ right: calc(var(--p) * var(--cs-hint-edge, 25%)); }

.cs-arrow-solid{
  width: 0; height: 0;
  border-top: calc(var(--cs-chevron-size, 36px) * .5) solid transparent;
  border-bottom: calc(var(--cs-chevron-size, 36px) * .5) solid transparent;
}
.cs-arrow-solid.left{
  border-right: calc(var(--cs-chevron-size, 36px) * .6) solid currentColor;
}
.cs-arrow-solid.right{
  border-left: calc(var(--cs-chevron-size, 36px) * .6) solid currentColor;
}

/* --- HINT: Arrows Minimal (unicode) --- */
.cs-arrow-min{
  font-size: calc(var(--cs-chevron-size, 36px) * .9);
  color: currentColor;
}