.wp-block-patternpaste-content-slider {
  --patternpaste-slider-width: 78%;
  --patternpaste-slider-gap: 24px;
  --patternpaste-slider-gutter: max(clamp(1.25rem, 4vw, 4rem), calc((100% - 1600px) / 2));
  display: block;
  position: relative;
}

.wp-block-patternpaste-content-slider[data-patternpaste-edge="true"] { --patternpaste-slider-gutter: 0px; }

.patternpaste-content-slider__intro {
  box-sizing: border-box;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
  margin-block-end: clamp(1.5rem, 4vw, 3.5rem);
}

.patternpaste-content-slider__viewport { overflow: hidden; position: relative; }

.patternpaste-content-slider__track {
  display: flex;
  align-items: stretch;
  gap: var(--patternpaste-slider-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: var(--patternpaste-slider-gutter);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, currentColor 42%, transparent) transparent;
  padding-inline: var(--patternpaste-slider-gutter);
  padding-block-end: 1rem;
  -webkit-overflow-scrolling: touch;
}
[data-patternpaste-snap="false"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__track { scroll-snap-type: none; }

.patternpaste-content-slider__track::-webkit-scrollbar { height: 0.45rem; }
.patternpaste-content-slider__track::-webkit-scrollbar-track { background: transparent; }
.patternpaste-content-slider__track::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, currentColor 42%, transparent);
  border: 0.12rem solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
.patternpaste-content-slider__track .wp-block-button__link { cursor: pointer; }

[data-patternpaste-scrollbar="false"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__track { scrollbar-width: none; }
[data-patternpaste-scrollbar="false"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__track::-webkit-scrollbar { display: none; }
[data-patternpaste-scrollbar="false"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__track { padding-block-end: 0; }

@media (pointer: fine) {
  .patternpaste-content-slider--live[data-patternpaste-drag="true"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__track { cursor: grab; }
  .patternpaste-content-slider--live[data-patternpaste-drag="true"].is-dragging > .patternpaste-content-slider__viewport > .patternpaste-content-slider__track {
    cursor: grabbing;
    user-select: none;
  }
}

.patternpaste-content-slider__slide {
  flex: 0 0 var(--patternpaste-slider-width);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Flex percentages resolve against the track's inner width. The complementary
 * tail gives the final slide the same leading inset as the first; its negative
 * margin cancels the flex gap that precedes the presentation-only pseudo item. */
.patternpaste-content-slider__track::after {
  content: '';
  flex: 0 0 calc(100% - var(--patternpaste-slider-width));
  margin-inline-start: calc(-1 * var(--patternpaste-slider-gap));
  pointer-events: none;
}

.patternpaste-content-slider__slide > .wp-block-group { height: 100%; box-sizing: border-box; }

.patternpaste-content-slider__controls {
  display: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  max-width: 1600px;
  /* PADDING, NOT MARGIN, BELOW: the viewport clips, and a focus ring 7px
   * outside a button lost its bottom edge to it on every slider (2026-09-14). */
  margin: 0.5rem auto 0;
  padding-block: 0.5rem;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}

.patternpaste-content-slider--live .patternpaste-content-slider__controls { display: flex; }
.patternpaste-content-slider__controls button { color: var(--patternpaste-slider-nav-text, inherit); background: var(--patternpaste-slider-nav-background, transparent); border: 1px solid currentColor; min-width: 2.75rem; min-height: 2.75rem; padding: 0.5rem; cursor: pointer; }
.patternpaste-content-slider__controls button[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.patternpaste-content-slider__steps { display: none; list-style: none; gap: 0.5rem; padding: 0; margin: 0; }
.patternpaste-content-slider[data-patternpaste-controls="numbers"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > .patternpaste-content-slider__steps,
.patternpaste-content-slider[data-patternpaste-controls="dots"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > .patternpaste-content-slider__steps { display: flex; }
.patternpaste-content-slider[data-patternpaste-controls="numbers"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > [data-patternpaste-count],
.patternpaste-content-slider[data-patternpaste-controls="dots"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > [data-patternpaste-count] { display: none; }
.patternpaste-content-slider[data-patternpaste-controls="dots"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > .patternpaste-content-slider__steps button {
  position: relative;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-color: transparent;
  font-size: 0;
}
.patternpaste-content-slider[data-patternpaste-controls="dots"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > .patternpaste-content-slider__steps button::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  translate: -50% -50%;
}
.patternpaste-content-slider[data-patternpaste-controls="dots"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > .patternpaste-content-slider__steps button[aria-current="true"]::before { background: currentColor; }
.patternpaste-content-slider__steps button[aria-current="true"] { outline: 2px solid currentColor; outline-offset: 2px; }
.patternpaste-content-slider__steps button[aria-current="true"] {
  color: var(--patternpaste-slider-nav-active-text, var(--patternpaste-slider-nav-text, inherit));
  background: var(--patternpaste-slider-nav-active-background, var(--patternpaste-slider-nav-background, transparent));
}
.patternpaste-content-slider[data-patternpaste-controls="dots"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > .patternpaste-content-slider__steps button[aria-current="true"] { outline: none; }
.patternpaste-content-slider__controls button:focus-visible { outline: 3px double currentColor; outline-offset: 4px; }
/* The track fills the clipping viewport edge to edge, so its ring is drawn
 * inside it or not at all. */
.patternpaste-content-slider__track:focus-visible { outline: 3px double currentColor; outline-offset: -3px; }
.patternpaste-content-slider[data-patternpaste-controls="dots"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > .patternpaste-content-slider__steps button:focus-visible { outline: 3px double currentColor; outline-offset: 4px; }
.patternpaste-content-slider[data-patternpaste-controls-position="overlay"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls {
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 2;
}
.patternpaste-content-slider[data-patternpaste-controls-position="overlay"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls button,
.patternpaste-content-slider[data-patternpaste-controls-position="overlay"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls [data-patternpaste-count] {
  color: var(--patternpaste-slider-nav-text, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));
  background: var(--patternpaste-slider-nav-background, var(--wp--preset--color--base, var(--wp--preset--color--white)));
}
.patternpaste-content-slider[data-patternpaste-controls-position="overlay"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > .patternpaste-content-slider__steps button[aria-current="true"] {
  color: var(--patternpaste-slider-nav-active-text, var(--patternpaste-slider-nav-text, var(--wp--preset--color--contrast, var(--wp--preset--color--black))));
  background: var(--patternpaste-slider-nav-active-background, var(--patternpaste-slider-nav-background, var(--wp--preset--color--base, var(--wp--preset--color--white))));
}
.patternpaste-content-slider[data-patternpaste-controls-position="overlay"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > button {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  pointer-events: auto;
}
.patternpaste-content-slider[data-patternpaste-controls-position="overlay"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > [data-patternpaste-previous] { inset-inline-start: clamp(0.75rem, 2vw, 1.5rem); }
.patternpaste-content-slider[data-patternpaste-controls-position="overlay"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > [data-patternpaste-next] { inset-inline-end: clamp(0.75rem, 2vw, 1.5rem); }
.patternpaste-content-slider[data-patternpaste-controls-position="overlay"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > [data-patternpaste-count] {
  position: absolute;
  inset-inline-end: clamp(0.75rem, 2vw, 1.5rem);
  bottom: 1rem;
  padding: 0.35rem 0.55rem;
}
.patternpaste-content-slider[data-patternpaste-controls-position="overlay"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > .patternpaste-content-slider__steps {
  position: absolute;
  inset-inline-start: 50%;
  bottom: 1rem;
  translate: -50% 0;
  pointer-events: auto;
}
/* Button shape: square is the stylesheet's own; rounded and round follow a
   rounded section (the finish Corners knob) so the controls do not read as
   a different design. A dot keeps its circular mark whatever this says. */
.patternpaste-content-slider[data-patternpaste-nav-shape="rounded"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls button,
.patternpaste-content-slider[data-patternpaste-nav-shape="rounded"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > [data-patternpaste-count] { border-radius: 0.5rem; }
.patternpaste-content-slider[data-patternpaste-nav-shape="round"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls button,
.patternpaste-content-slider[data-patternpaste-nav-shape="round"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > [data-patternpaste-count] { border-radius: 999px; }
.patternpaste-content-slider__status { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.patternpaste-content-slider.is-editing .patternpaste-content-slider__canvas { display: grid; gap: var(--patternpaste-slider-gap); }
.patternpaste-content-slider.is-editing .patternpaste-content-slider__canvas > .block-editor-block-list__block[data-type="core/group"] { border: 1px solid currentColor; padding: 1rem; }
.patternpaste-content-slider.is-editing .patternpaste-content-slider__canvas > .block-editor-block-list__block:not([data-type="core/group"]) { border-inline-start: 3px solid currentColor; padding-inline-start: 1rem; }

@media (max-width: 600px) {
  .patternpaste-content-slider__slide { flex-basis: 100%; }
  .patternpaste-content-slider__track::after { flex-basis: 0; }
  .patternpaste-content-slider__controls { justify-content: space-between; }
}

@media (max-width: 782px) {
  .patternpaste-content-slider.patternpaste-content-slider--live[data-patternpaste-controls-position="below"][data-patternpaste-controls="numbers"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls,
  .patternpaste-content-slider.patternpaste-content-slider--live[data-patternpaste-controls-position="below"][data-patternpaste-controls="dots"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  }
  .patternpaste-content-slider[data-patternpaste-controls-position="below"][data-patternpaste-controls="numbers"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > [data-patternpaste-previous],
  .patternpaste-content-slider[data-patternpaste-controls-position="below"][data-patternpaste-controls="dots"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > [data-patternpaste-previous] { grid-column: 1; grid-row: 1; }
  .patternpaste-content-slider[data-patternpaste-controls-position="below"][data-patternpaste-controls="numbers"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > [data-patternpaste-next],
  .patternpaste-content-slider[data-patternpaste-controls-position="below"][data-patternpaste-controls="dots"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > [data-patternpaste-next] { grid-column: 3; grid-row: 1; }
  .patternpaste-content-slider[data-patternpaste-controls-position="below"][data-patternpaste-controls="numbers"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > .patternpaste-content-slider__steps,
  .patternpaste-content-slider[data-patternpaste-controls-position="below"][data-patternpaste-controls="dots"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > .patternpaste-content-slider__steps {
    grid-column: 2;
    grid-row: 1;
    min-inline-size: 0;
    max-inline-size: 100%;
    justify-self: center;
    gap: 0.75rem;
    /* 8px: the scroller clips both axes, and a button's focus ring reaches 7px
     * past it (3px double at a 4px offset); 4px cut every ring (2026-09-14). */
    padding: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .patternpaste-content-slider[data-patternpaste-controls-position="below"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > .patternpaste-content-slider__steps::-webkit-scrollbar { display: none; }
  .patternpaste-content-slider[data-patternpaste-controls-position="overlay"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > button {
    top: auto;
    bottom: 1rem;
    translate: none;
  }
  .patternpaste-content-slider[data-patternpaste-controls-position="overlay"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > [data-patternpaste-count] {
    inset-inline-start: 50%;
    inset-inline-end: auto;
    translate: -50% 0;
  }
  .patternpaste-content-slider[data-patternpaste-controls-position="overlay"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > .patternpaste-content-slider__steps {
    inline-size: max-content;
    max-inline-size: calc(100% - 8.5rem);
    padding: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .patternpaste-content-slider[data-patternpaste-controls-position="overlay"] > .patternpaste-content-slider__viewport > .patternpaste-content-slider__controls > .patternpaste-content-slider__steps::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .patternpaste-content-slider__track { scroll-behavior: auto !important; }
}