/* Removes the blue overlay on mobile taps */
html {
    -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════════
   SPLIDE SLIDER COMPONENT – splide-component.css
   ═══════════════════════════════════════════════════════════ */
:root {
  --sc-font-mono: 'Space Mono', monospace;
  --sc-accent: #ff4d6a;
  --sc-accent-soft: rgba(255, 77, 106, 0.1);
  --sc-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ═══════════════════════════════════════════
   GENERAL DEFAULTS
   ═══════════════════════════════════════════ */
:where(div:has(.splide)){
  grid-template-columns: minmax(0, 1fr);
}

/* ═══════════════════════════════════════════
   SLIDER WRAPPER
   ═══════════════════════════════════════════ */
[data-slider-wrapper] {
  position: relative;
  gap: var(--sliders-gap);
  display: flex;
    flex-direction: column;
}


[data-slider-wrapper] .splide {
  display: flex;
    flex-direction: column;
}


/* ═══════════════════════════════════════════
   SPLIDE OVERRIDES
   ═══════════════════════════════════════════ */
 [data-overlay="true"]:not([data-static-layout]).splide .splide__slide>div::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--slider-overlay-bg);
    z-index: 1;
   pointer-events: none;
   transition: var(--slide-transition);
  }

 [data-overlay="true"]:not([data-static-layout]).splide .splide__slide:not(.is-active:not(.splide__slide--clone))>div::before {
    background: var(--slider-overlay-bg-inactive);
  }

  [data-overlay="true"]:not([data-static-layout]).splide .splide__slide > div{
    position: relative;
  }


.splide__arrows{
  order: 1;
}

:where(.splide__slide > div){
 transition: var(--slide-transition); 
  margin-block: auto;
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  justify-items: center;
  align-content: center;
}

/* Runtime hooks (.splide--ttb, [data-per-page-current]) track the LIVE value at
   each breakpoint, so shorthand like "ttb sm:ltr" or "1 sm:2" resolves correctly.
   The authored attributes are kept so pre-init markup (Etch edit mode) still
   matches for the simple, non-shorthand case. */
.splide:not(.splide--ttb, [data-direction="ttb"], [data-per-page-current="1"], [data-per-page="1"]) .splide__slide > div{
   block-size: var(--slide-height-inactive) !important;
}


.splide__slide.is-active:not(.splide__slide--clone){  
  z-index: 1;
}

.splide__slide.is-active:not(.splide__slide--clone) > div{  
   transition: var(--slide-transition-active);
}

.splide:not(.splide--ttb, [data-direction="ttb"], [data-per-page-current="1"], [data-per-page="1"]) .splide__slide.is-active:not(.splide__slide--clone) > div{
  block-size: var(--slide-height-active) !important;
}

.is-initialized .splide__slide > *{
   transform: translateY(var(--slide-translate-y, 0)) translateX(var(--slide-translate-x, 0)) rotateX(var(--slide-rotate-x, 0deg)) rotateY(var(--slide-rotate-y, 0deg)) scale(var(--slide-scale, 1));
  transform-origin: var(--slide-transform-origin);
   transition: var(--slide-transition);
  opacity: var(--slide-opacity);
}

.splide__slide > *{
  border-radius: var(--slide-radius); 
  border: var(--slide-border);
  overflow: clip;
}

.is-initialized .splide__slide.is-active:not(.splide__slide--clone) > *{
  opacity: var(--slide-opacity-active);
  transform: translateY(var(--slide-translate-y-active, 0)) translateX(var(--slide-translate-x-active, 0)) rotateX(var(--slide-rotate-x-active, 0deg)) rotateY(var(--slide-rotate-y-active, 0deg)) scale(var(--slide-scale-active, 1));
  border: var(--slide-border-active);
  transition: var(--slide-transition-active);
}

:where([data-flip-translate-x="true"], [data-flip-rotate-y="true"]).is-initialized .splide__slide:is(.is-next, .is-next + .splide__slide) > div {
    transform: translateY(var(--slide-translate-y, 0)) translateX(var(--slide-flip-translate-x, 0)) rotateX(var(--slide-rotate-x, 0deg)) rotateY(var(--slide-flip-rotate-y, 0deg)) scale(var(--slide-scale, 1));
}

[data-flip-translate-x="true"].is-initialized .splide__slide:is(.is-next, .is-next + .splide__slide) > div {
    --slide-flip-translate-x: calc(var(--slide-translate-x) * -1);
}

[data-flip-rotate-y="true"].is-initialized .splide__slide:is(.is-next, .is-next + .splide__slide) > div{
    --slide-flip-rotate-y: calc(var(--slide-rotate-y) * -1);
}

.splide__arrow--prev svg{
    rotate: 180deg;
}

.splide__track{
  block-size: 100%;
}

/* ─── Arrows ─── */
.splide__arrow {
  position: absolute;
  z-index: 10;
  min-width: var(--arrow-width);
  min-height: var(--arrow-height);
  border: var(--arrow-border);
  border-radius: var(--arrow-radius);
  background: var(--arrow-bg);
  backdrop-filter: blur(var(--arrow-bg-blur));
  -webkit-backdrop-filter: blur(var(--arrow-bg-blur));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--arrow-transition);
  padding: var(--arrow-padding);
  aspect-ratio: var(--arrow-aspect-ratio);
}

.splide:hover .splide__arrow,
.splide__arrow:focus-visible { 
  opacity: var(--arrow-hover-opacity); 
}

.splide__arrow:hover {
  background: var(--arrow-hover-bg);
  border-color: var(--arrow-hover-border-clr);
}

.splide__arrow:focus-visible {
  outline: 2px solid var(--arrow-hover-border-clr);
  outline-offset: 2px;
}

.splide__arrow svg {
  width:var( --arrow-icon-size);
  height: var( --arrow-icon-size);
  fill: var(--arrow-clr);
}

.splide__arrow:hover svg {
  fill: var(--arrow-hover-clr);
}

.splide__arrow--prev { 
  left: var(--prev-arrow-left);
  right: var(--prev-arrow-right);
  top: var(--prev-arrow-top);
  bottom: var(--prev-arrow-bottom);
  transform: var(--prev-arrow-transform);
}

.splide__arrow--next { 
  right: var(--next-arrow-right); 
  left: var(--next-arrow-left);
  top: var(--next-arrow-top);
  bottom: var(--next-arrow-bottom);
  transform: var(--next-arrow-transform);
}

.splide__arrow:disabled,
[data-go-to].is-disabled { 
  opacity: 0.2 !important; 
  cursor: default; 
}



/* ─── Pagination ─── */

.splide__pagination li {
  line-height: 0 !important;
}

.splide__pagination {
  position: var(--pagination-position);
  bottom: var(--pagination-bottom);
  top:var(--pagination-top);
  left: var(--pagination-left);
  right:var(--pagination-right);
  transform: var(--pagination-transform);
  display: flex;
  gap: var(--pagination-gap);
  list-style: none;
  z-index: 10;
  padding: var(--pagination-padding);
  background: var(--pagination-bg);
  backdrop-filter: blur(var(--pagination-bg-blur));
  -webkit-backdrop-filter: blur(var(--pagination-bg-blur));
  border-radius: var(--pagination-radius);
}

.splide__pagination__page {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--dot-radius);
  border: none;
  background: var(--dot-clr);
  cursor: pointer;
  padding: 0;
  transition: var(--dot-transition);
}

.splide__pagination__page:hover { 
  background: var(--dot-hover-clr); 
}

.splide__pagination__page.is-active {
  background: var(--dot-clr-active);
  transform: var(--dot-transform-active);
}

/* ─── Autoplay Toggle (JS-injected) ─── */
.splide__toggle {
   width: var(--play-pause-size);
  height: var(--play-pause-size);
  border-radius: var(--play-pause-radius);
  border: var(--play-pause-border);
  background: var(--play-pause-bg);
  backdrop-filter: blur(var(--play-pause-bg-blur));
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--play-pause-clr);
  transition: all var(--sc-transition);
}

 .splide__toggle:not([data-autoplay-toggle-container] .splide__toggle){
  position: absolute;
  top: 14px; right: 14px;
   
 }

.splide__toggle:hover {
  background: var(--play-pause-hover-bg);
  border-color: var(--play-pause-hover-border-clr);
}

.splide__toggle__play,
.splide__toggle__pause { display: none; }
.splide__toggle[aria-label*="Start"] .splide__toggle__play,
.splide__toggle:not([aria-label]) .splide__toggle__pause { display: block; }
.splide__toggle[aria-label*="Pause"] .splide__toggle__pause { display: block; }
.splide__toggle[aria-label*="Pause"] .splide__toggle__play { display: none; }


/* ═══════════════════════════════════════════
   AUTO-GENERATED CONTAINER DEFAULTS
   ═══════════════════════════════════════════ */

[data-auto-generated][data-progress-type="bar"]{
  position: absolute;
  top: var(--progress-top); 
  bottom: var(--progress-bottom); 
  z-index: 10;
}



[data-auto-generated][data-progress-type="circular"]{
  position: absolute;
  top: var(--progress-top); 
  bottom: var(--progress-bottom);
  left: var(--progress-left); 
  right: var(--progress-right);
  z-index: 10;
}

[data-auto-generated][data-progress-type="counter"] {
  position: absolute;
  top: var(--progress-top);
  bottom: var(--progress-bottom); 
  right: var(--progress-right);
  left: var(--progress-left);
  z-index: 10;
}

[data-auto-generated][data-autoplay-progress-container] {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
}

[data-auto-generated][data-autoplay-toggle-container] {
  position: absolute;
  top: var(--play-pause-top); 
  bottom: var(--play-pause-bottom);
  right: var(--play-pause-right);
  left: var(--play-pause-left);
  z-index: var(--play-pause-z-index);

}


/* ═══════════════════════════════════════════
   CIRCULAR PROGRESS
   ═══════════════════════════════════════════ */
[data-progress-type="circular"]{
      display: grid;
    place-items: center;
  flex-shrink: 0;
}

.sc-circular-progress {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sc-circular-progress__ring {
  display: block;
  transform: rotate(-90deg);
}

.sc-circular-progress__track {
  fill: none;
  stroke: var(--progress-track-clr);
}

.sc-circular-progress__fill {
  fill: none;
  stroke: var(--progress-fill-clr);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
}

.sc-circular-progress__counter {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--sc-font-mono);
  font-weight: 700;
  color: var(--progress-clr-current);
  white-space: nowrap;
  letter-spacing: var(--progress-separator-gap);
  text-align: center;
}

.sc-circular-progress__current{
   font-size: var(--progress-font-size-current);
}

.sc-circular-progress__separator { 
  color: var(--progress-separator-clr); 
  font-size: var(--progress-separator-size)
}

.sc-circular-progress__total     { 
  color: var(--progress-clr-total); 
  font-size: var(--progress-font-size-total)
}

[data-progress-mode="timer"] .sc-circular-progress__ring-fill {
  transition: none;
}


/* ═══════════════════════════════════════════
   BAR PROGRESS
   ═══════════════════════════════════════════ */
.sc-bar-progress {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 3px;
  background: var(--progress-track-clr);
}

.sc-bar-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--progress-fill-clr), var(--progress-fill-clr-2));
  width: 0%;
  transition: width 0.4s ease;
}

[data-progress-mode="timer"] .sc-bar-progress__fill {
  transition: none;
}


/* ═══════════════════════════════════════════
   COUNTER
   ═══════════════════════════════════════════ */
.sc-counter {
  font-family: var(--sc-font-mono);
  font-weight: 700;
  color: var(--progress-clr-total);
  background: var(--progress-bg);
  backdrop-filter: blur(var(--progress-bg-blur));
  -webkit-backdrop-filter: blur(var(--progress-bg-blur));
  padding: var(--progress-padding);
  border-radius: var(--progress-border-radius);
  border: var(--progress-border);
  letter-spacing: 0.05em;
  white-space: nowrap;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: var(--progress-separator-gap);
}

.sc-counter__current {
  display: inline-block;
  transition: transform 0.4s ease, opacity 0.4s ease;
  color: var(--progress-clr-current);
  font-size: var(--progress-font-size-current);
}

.sc-counter__divider { 
  color: var(--progress-clr-total); 
}

.sc-counter__total   { 
  color: var(--progress-clr-total); 
  font-size: var(--progress-font-size-total);
}

.sc-counter__separator{
  color: var(--progress-separator-clr);
  font-size: var(--progress-separator-size);
}

/* visibility */
[visibility="hide-current"] :is(.sc-counter__current, .sc-counter__separator){
  display: none;
}

[visibility="hide-total"] :is(.sc-counter__total, .sc-counter__separator){
  display: none;
}


/* ═══════════════════════════════════════════
   THUMBNAIL SLIDER
   ═══════════════════════════════════════════ */
[data-slider-role="thumbnails"] .splide__slide {
  cursor: pointer;
}


[data-slider-role="thumbnails"]:not(.splide-synced):not(.is-initialized) {
  min-height: 60px;
}




/* ═══════════════════════════════════════════
   SLIDE CONTENT (when slider is empty)
   ═══════════════════════════════════════════ */
.slide-content {
  position: relative;
  display: grid;
  place-items:center;
  /* aspect-ratio: 16 / 9; */
}
.splide:not(.is-initialized) .slide-content.etch-builder-block {
  /* min-block-size: 350px; */
  aspect-ratio: 16 / 9;
}

.slide-content::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 50%);
  pointer-events: none;
}


.slide-content img {
  position: absolute;
  inset: 0;
  width: 100%; 
  height: 100%;
  object-fit: cover;
}

.slide-caption {
  position: relative;
  z-index: 2;
  padding: 20px 24px;
}

.slide-caption__tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sc-accent);
  background: var(--sc-accent-soft);
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
  font-family: var(--sc-font-mono);
}

.slide-caption__title {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CIRCULAR PROGRESS PLACEHOLDER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:where(body:not(.dwc-frontend)) [data-progress-type="circular"]:empty {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-image: url('data:image/svg+xml;utf8,<svg width="52" height="52" xmlns="http://www.w3.org/2000/svg"><circle cx="26" cy="26" r="20" stroke="%23e5e7eb" stroke-width="3" fill="none"/><circle cx="26" cy="26" r="20" stroke="%233b82f6" stroke-width="3" fill="none" stroke-dasharray="125.6" stroke-dashoffset="94.2" stroke-linecap="round" transform="rotate(-90 26 26)"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

:where(body:not(.dwc-frontend)) [data-progress-type="circular"]:empty::after {
  content: "1 / 5";
  position: absolute;
  font-size: 0.6rem;
  font-weight: 600;
  color: #374151;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BAR PROGRESS PLACEHOLDER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  [data-progress-type="bar"]{
    inline-size: 100%;
  }

:where(body:not(.dwc-frontend)) [data-progress-type="bar"]:empty {
  width: 100%;
  height: 4px;
  min-height: 0;
  background-color: #e5e7eb;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

:where(body:not(.dwc-frontend)) [data-progress-type="bar"]:empty::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background-color: orangered;
  border-radius: 2px;
}

/* Timer mode variant - animated gradient */
:where(body:not(.dwc-frontend)) [data-progress-type="bar"][data-progress-mode="timer"]:empty::after {
  background: linear-gradient(90deg, orangered 0%, #60a5fa 100%);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COUNTER PLACEHOLDER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:where(body:not(.dwc-frontend)) [data-progress-type="counter"]:empty {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  min-width: 3rem;
  justify-content: center;
}

:where(body:not(.dwc-frontend)) [data-progress-type="counter"]:empty::before {
  content: "1";
  color: orangered;
}

:where(body:not(.dwc-frontend)) [data-progress-type="counter"]:empty::after {
  content: "/ 5";
  color: #9ca3af;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   AUTOPLAY PROGRESS CONTAINER PLACEHOLDER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:where(body:not(.dwc-frontend)) [data-autoplay-progress-container]:empty {
  width: 100%;
  height: 3px;
  background-color: #e5e7eb;
  border-radius: 1.5px;
  position: relative;
  overflow: hidden;
}

:where(body:not(.dwc-frontend)) [data-autoplay-progress-container]:empty::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 60%;
  background-color: orangered;
  border-radius: 1.5px;
  animation: autoplayProgressPlaceholder 3s ease-in-out infinite;
}

@keyframes autoplayProgressPlaceholder {
  0% { width: 0%; }
  50% { width: 100%; }
  100% { width: 0%; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   AUTOPLAY TOGGLE BUTTON PLACEHOLDER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:where(body:not(.dwc-frontend)) [data-autoplay-toggle-container]:empty {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

:where(body:not(.dwc-frontend)) [data-autoplay-toggle-container]:empty:hover {
  background-color: #e5e7eb;
}

:where(body:not(.dwc-frontend)) [data-autoplay-toggle-container]:empty::after {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" width="16" height="16" fill="%233b82f6" xmlns="http://www.w3.org/2000/svg"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE ADJUSTMENTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Smaller circular progress on mobile */
@media (max-width: 640px) {
  :where(body:not(.dwc-frontend)) [data-progress-type="circular"]:empty {
    width: 40px;
    height: 40px;
    background-image: url('data:image/svg+xml;utf8,<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="16" stroke="%23e5e7eb" stroke-width="2.5" fill="none"/><circle cx="20" cy="20" r="16" stroke="%233b82f6" stroke-width="2.5" fill="none" stroke-dasharray="100.5" stroke-dashoffset="75.4" stroke-linecap="round" transform="rotate(-90 20 20)"/></svg>');
  }
  
  :where(body:not(.dwc-frontend)) [data-progress-type="circular"]:empty::after {
    font-size: 0.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   CUSTOM PAGINATION PLACEHOLDER (for Etch/Builder)
   ═══════════════════════════════════════════════════════════ */

:where(body:not(.dwc-frontend)) [data-custom-pagination]:empty {
  min-height: 0;
  height: 32px;
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #f3f4f6;
  border: 2px dashed #d1d5db;
  border-radius: 6px;
  position: relative;
}

:where(body:not(.dwc-frontend)) [data-custom-pagination]:empty::before {
  content: "";
  display: flex;
  gap: 6px;
  align-items: center;
}

:where(body:not(.dwc-frontend)) [data-custom-pagination]:empty::after {
  content: "●  ●  ●";
  font-size: 18px;
  color: #9ca3af;
  letter-spacing: 2px;
  position: absolute;
}

/* Dark mode variant */
@media (prefers-color-scheme: dark) {
  :where(body:not(.dwc-frontend)) [data-custom-pagination]:empty {
    background-color: #374151;
    border-color: #4b5563;
  }
  
  :where(body:not(.dwc-frontend)) [data-custom-pagination]:empty::after {
    color: #6b7280;
  }
}

/* Hover state for better visibility in builder */
:where(body:not(.dwc-frontend)) [data-custom-pagination]:empty:hover {
  background-color: #e5e7eb;
  border-color: #9ca3af;
}

@media (prefers-color-scheme: dark) {
  :where(body:not(.dwc-frontend)) [data-custom-pagination]:empty:hover {
    background-color: #4b5563;
    border-color: #6b7280;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DARK MODE VARIANTS (Optional)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (prefers-color-scheme: dark) {
  :where(body:not(.dwc-frontend)) [data-progress-type="circular"]:empty {
    background-image: url('data:image/svg+xml;utf8,<svg width="52" height="52" xmlns="http://www.w3.org/2000/svg"><circle cx="26" cy="26" r="20" stroke="%234b5563" stroke-width="3" fill="none"/><circle cx="26" cy="26" r="20" stroke="%2360a5fa" stroke-width="3" fill="none" stroke-dasharray="125.6" stroke-dashoffset="94.2" stroke-linecap="round" transform="rotate(-90 26 26)"/></svg>');
  }
  
  :where(body:not(.dwc-frontend)) [data-progress-type="circular"]:empty::after {
    color: #d1d5db;
  }
  
  :where(body:not(.dwc-frontend)) [data-progress-type="bar"]:empty {
    background-color: #374151;
  }
  
  :where(body:not(.dwc-frontend)) [data-progress-type="bar"]:empty::after,
  :where(body:not(.dwc-frontend)) [data-autoplay-progress-container]:empty::after {
    background-color: #60a5fa;
  }

  
  :where(body:not(.dwc-frontend)) [data-progress-type="counter"]:empty {
    color: #d1d5db;
  }
  
  :where(body:not(.dwc-frontend)) [data-progress-type="counter"]:empty::before {
    color: #60a5fa;
  }
  
  :where(body:not(.dwc-frontend)) [data-autoplay-toggle-container]:empty {
    background-color: #374151;
  }
  
  :where(body:not(.dwc-frontend)) [data-autoplay-toggle-container]:empty:hover {
    background-color: #4b5563;
  }
  
  :where(body:not(.dwc-frontend)) [data-autoplay-toggle-container]:empty::after {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" width="16" height="16" fill="%2360a5fa" xmlns="http://www.w3.org/2000/svg"><path d="M6 4h4v16H6zm8 0h4v16h-4z"/></svg>');
  }
}


/* ═══════════════════════════════════════════
   STATIC LAYOUT (data-layout-mode="…static")
   ═══════════════════════════════════════════ */

/* -- resets -- */
.splide[data-static-layout] {
  visibility: visible !important; 
}
.splide[data-static-layout] .splide__track {
  overflow: visible !important;
}
.splide[data-static-layout] .splide__slide {
  width: auto !important; 
  margin: 0 !important;
}
.splide[data-static-layout] .splide__slide > div {
  block-size: auto !important; 
}
.splide[data-static-layout] .splide__slide > .slide-content {
  min-block-size: 200px;
}

.splide[data-static-layout] .splide__slide > * {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}
/* Controls inside the static slider root. Covers the plugin's own data-* hooks
   as well as Splide's built-ins, so a renamed control container still hides. */
.splide[data-static-layout] :is(
  .dwc-slider-controls-wrapper,
  .splide__arrows, .splide__pagination, .splide__progress, .splide__toggle,
  [data-custom-pagination], [data-go-to], [data-progress-type],
  [data-autoplay-toggle-container], [data-autoplay-progress-container]
) {
  display: none !important;
}

/* Controls authored at wrapper level (outside the .splide root) drive the main
   slider, so they must hide when it goes static. `data-static-layout` only ever
   lands on the .splide root, so reach them from the wrapper with :has(). The
   trailing :not() keeps a live sibling slider's own chrome visible. */
[data-slider-wrapper]:has(.splide[data-static-layout]:not([data-slider-role="thumbnails"]))
  :is(
    .dwc-slider-controls-wrapper,
    .splide__arrows, .splide__pagination, .splide__progress, .splide__toggle,
    [data-custom-pagination], [data-go-to], [data-progress-type],
    [data-autoplay-toggle-container], [data-autoplay-progress-container]
  ):not(.splide:not([data-static-layout]) *) {
  display: none !important;
}

/* The authored pagination template is kept in the DOM (so it survives cleanup
   and every re-init) but never rendered; initCustomPagination clones from it. */
[data-sc-template] {
  display: none !important;
}

.splide[data-static-layout] .splide__list {
  transform: none !important;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr));
  gap: var(--grid-gap, 1rem);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CUSTOM SLIDER ANIMATION (SET data-slider-id to match)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*  SCALE FADE-IN - requires 1 slider per page.
    The guard matches the authored attribute OR the live [data-per-page-current]
    the engine publishes, so the effect also applies at breakpoints where a
    shorthand value (e.g. "1 sm:2") resolves to 1. */

.dwc-frontend :is([data-per-page="1"], [data-per-page-current="1"])[data-slider-id="scale-fade-in"] .splide__list{
  display: grid;
grid-template-columns: minmax(0, 1fr);
}

.dwc-frontend  :is([data-per-page="1"], [data-per-page-current="1"])[data-slider-id="scale-fade-in"] .splide__slide{
  transform: translateX(0) scale(1) !important;
grid-area: 1/1;
  transition:  opacity 1s ease, scale 0.8s ease !important;
}


.dwc-frontend  :is([data-per-page="1"], [data-per-page-current="1"])[data-slider-id="scale-fade-in"] .splide__slide:not(.is-main-active.is-active){
  scale: 1.3 !important;
opacity: 0;
}

/*  display thumb sliders as grid */
[data-slider-id="thumbnail-grid"] .splide__list{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 250px;
}

/* CSS ANIMATIONS */

/* Fade in right  */
@keyframes fadeInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Sync Custom Element Nav (data-sync-custom-el-nav): the engine adds this class
   to each synced element it wires as a go-to control, so they read as clickable. */
.dwc-sync-nav {
  cursor: pointer;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHTBOX (data-lightbox="images|slides")
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   The overlay is a shared <dialog> on <body> (div fallback pre-<dialog>
   browsers), OUTSIDE any slider's class scope — so the ENGINE themes it: on
   every open it copies each --lightbox-* var resolved on the source slider
   (its suffixed -vars- class, inline vars, or :root) onto the dialog as
   inline vars. The var() fallbacks below are the defaults for unthemed
   sliders. [data-lightbox-active] is the runtime hook the engine publishes
   while a live slider has the click handler wired.
   (NB: never write "star-slash" adjacent inside this comment — it terminates
   the comment early and the parser then eats the next rule.) */

[data-lightbox-active] .splide__slide {
  cursor: zoom-in;
}

/* No --lightbox-* declarations here on purpose: the engine copies every
   --lightbox-* var resolved on the SOURCE SLIDER (its suffixed -vars- class,
   inline vars, or :root) onto this element as inline vars at open — so each
   slider themes the one shared dialog. Defaults live in the var() fallbacks
   below; a declaration here would be dead weight under the inline overrides. */
.dwc-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--lightbox-bg, rgba(0, 0, 0, 0.9));
  /* color: var(--lightbox-clr, #fff); */
  z-index: var(--lightbox-z, 99999); /* used by the non-<dialog> fallback only */
}

/* The dialog itself paints the tint full-viewport; keep ::backdrop clear so
   the color isn't doubled. */
.dwc-lightbox::backdrop {
  background: transparent;
}

div.dwc-lightbox[hidden] {
  display: none;
}

.dwc-lightbox__splide,
.dwc-lightbox__splide .splide__track,
.dwc-lightbox__splide .splide__list {
  width: 100%;
  height: 100%;
}

.dwc-lightbox__splide .splide__slide {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: var(--lightbox-padding, clamp(16px, 4vw, 48px));
}

.dwc-lightbox__splide .splide__slide > img {
  max-width: 100%;
  max-height: var(--lightbox-img-height, 90vh);
  object-fit: contain;
  margin:auto;
  -webkit-user-drag: none;
  user-select: none;
}

@layer etch.reset {
    .dwc-lightbox__splide .splide__slide > div {
        block-size: 100% !important;
        max-block-size: var(--lightbox-slide-height, 70vh);
    }
}

/* ─── Close button ─── */
.dwc-lightbox__close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 2;
  width: var(--lightbox-close-size, 44px);
  height: var(--lightbox-close-size, 44px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: var(--lightbox-arrow-bg, rgba(255, 255, 255, 0.12));
  color: var(--lightbox-clr, #fff);
  cursor: pointer;
  transition: background 0.2s ease;
}

.dwc-lightbox__close:hover,
.dwc-lightbox__close:focus-visible {
  background: var(--lightbox-arrow-hover-bg, rgba(255, 255, 255, 0.25));
}

.dwc-lightbox__close svg {
  fill: currentColor;
}

/* ─── Counter ─── */
.dwc-lightbox__counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--sc-font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--lightbox-clr, rgba(255, 255, 255, 0.85));
}

.dwc-lightbox__counter[hidden] {
  display: none;
}

/* ─── Overlay arrows ───
   The per-slider --arrow-* vars (colors AND the --prev/next-arrow-left/top
   position vars) don't reach here — they're scoped to the slider's own class —
   so without overrides the buttons collapse into static flow at the top-left.
   Give Splide's generated arrows overlay-native styling and explicit
   side-center positioning. */
.dwc-lightbox .splide__arrow {
  position: absolute;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  opacity: 1;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: var(--lightbox-arrow-bg, rgba(255, 255, 255, 0.12));
  z-index: 2;
}

.dwc-lightbox .splide__arrow--prev {
  left: 16px;
  right: auto;
}

.dwc-lightbox .splide__arrow--next {
  right: 16px;
  left: auto;
}

.dwc-lightbox .splide__arrow:hover,
.dwc-lightbox .splide__arrow:focus-visible {
  background: var(--lightbox-arrow-hover-bg, rgba(255, 255, 255, 0.25));
}

.dwc-lightbox .splide__arrow svg {
  width: 18px;
  height: 18px;
  fill: var(--lightbox-clr, #fff);
}

/* ─── Open fade (skipped for reduced-motion users) ─── */
@media (prefers-reduced-motion: no-preference) {
  dialog.dwc-lightbox[open],
  div.dwc-lightbox:not([hidden]) {
    animation: dwcLightboxFade 0.25s ease;
  }
}

@keyframes dwcLightboxFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}