/* =========================================================
   1. CORE LAYOUT & VARIABLES
   - All custom properties normalized
   ========================================================= */
.danalyx-carousel {
  position: relative;
  width: 100%;
  box-sizing: border-box;

  /* ----- Responsive control mapping (OV -> base -> fallback 0) ----- */
  --dxa-nav-offx:  var(--danalyx-nav-offx-ov,  var(--danalyx-nav-offx,  0px));
  --dxa-nav-offy:  var(--danalyx-nav-offy-ov,  var(--danalyx-nav-offy,  0px));

  /* Per-arrow offsets */
  --dxa-prev-offx: var(--danalyx-prev-offx-ov, var(--danalyx-prev-offx, 0px));
  --dxa-prev-offy: var(--danalyx-prev-offy-ov, var(--danalyx-prev-offy, 0px));
  --dxa-next-offx: var(--danalyx-next-offx-ov, var(--danalyx-next-offx, 0px));
  --dxa-next-offy: var(--danalyx-next-offy-ov, var(--danalyx-next-offy, 0px));

  /* Normalize meter variables */
  --dxa-meter-offx: var(--dxa-meter-offx-ov, 0px);
  --dxa-meter-offy: var(--dxa-meter-offy-ov, 0px);
  --dxa-meter-bg:   var(--dxa-meter-bg-ov, #e5e7eb);
  --dxa-meter-fill: var(--dxa-meter-fill-ov, #111827);
  --dxa-meter-radius: var(--dxa-meter-radius-ov, 9999px);
  --dxa-meter-size: var(--dxa-meter-size-ov, 4px);
  --dxa-meter-border-width: var(--dxa-meter-border-width-ov, 0px);
  --dxa-meter-border-color: var(--dxa-meter-border-color-ov, transparent);

  /* Dots */
  --dxa-dot-size: var(--dxa-dot-size-ov, 10px);
  --dxa-dot-gap:  var(--dxa-dot-gap-ov, 8px);
  --dxa-dot-color: var(--dxa-dot-color-ov, #9ca3af);
  --dxa-dot-border-color: var(--dxa-dot-border-color-ov, transparent);
  --dxa-dot-border-width: var(--dxa-dot-border-width-ov, 0px);
  --dxa-dot-radius: var(--dxa-dot-radius-ov, 9999px);
  --dxa-dot-active: var(--dxa-dot-active-ov, #111827);
  --dxa-dot-active-border: var(--dxa-dot-active-border-ov, currentColor);
  --dxa-dot-active-scale: var(--dxa-dot-active-scale-ov, 1);

  /* Counter */
  --dxa-counter-radius: var(--dxa-counter-radius-ov, 6px);
  
  /* Viewport insets used when arrows are outside (separate, middle L/R) */
  --dxa-vp-inset-l: 0px;
  --dxa-vp-inset-r: 0px;
}
/* =========================================================
   2. BASE SHELL & VIEWPORT
   - The core structure that hosts track, arrows, meters
   ========================================================= */

.danalyx-shell {
  width: 100%;
  position: relative;
  max-width: 100%;
  overflow: hidden; /* always clip overflow */
}

.danalyx-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  z-index: 1;
}

.danalyx-track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--dxa-gap, 24px); /* fallback gap */
  will-change: transform;
  /*transition: transform .35s ease;*/
  transition: none;
  position: relative;
  z-index: 1; /* keep arrows above */
}

.danalyx-item {
  flex: 0 0 calc((100% - (var(--danalyx-columns,3) - 1) * var(--dxa-gap,24px)) / var(--danalyx-columns,3));
  max-width: calc((100% - (var(--danalyx-columns,3) - 1) * var(--dxa-gap,24px)) / var(--danalyx-columns,3));
  min-width: 0;
  display: flex;
  flex-direction: column;

  /* Card visuals */
  background: var(--dxa-card-bg, transparent);
  border-radius: var(--dxa-card-radius, 0);
  border-style: var(--dxa-card-border-style, solid);
  border-color: var(--dxa-card-border-color, transparent);
  border-width: var(--dxa-card-border-width-ov, var(--dxa-card-border-width, 0));
  box-sizing: border-box;
}

.danalyx-item.is-clone { visibility: visible; }
/* =========================================================
   3. ARROW TOKENS (Defaults)
   - Centralized design tokens for arrow buttons
   ========================================================= */
:root {
  --danalyx-arrow-size: 42px;
  --danalyx-arrow-bg: #ffffff;
  --danalyx-arrow-fg: #111111;
  --danalyx-arrow-bg-hover: #f3f4f6;
  --danalyx-arrow-fg-hover: #000000;
}
/* =========================================================
   4. ARROWS — BASE LOOK & ICON INHERITANCE
   - Visuals, hover/focus, and icon color propagation
   ========================================================= */

.danalyx-carousel .danalyx-prev,
.danalyx-carousel .danalyx-next {
	width: var(--danalyx-arrow-size);
	height: var(--danalyx-arrow-size);
	border-radius: 9999px;
	background: var(--danalyx-arrow-bg);
	color: var(--danalyx-arrow-fg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	box-shadow: 0 6px 14px rgba(0,0,0,0.18);
	cursor: pointer;
	transition: all 0.3s ease;
}

.danalyx-carousel .danalyx-prev:hover,
.danalyx-carousel .danalyx-next:hover {
	background: var(--danalyx-arrow-bg-hover);
	color: var(--danalyx-arrow-fg-hover);
}

/* SVG & icon inheritance */
.danalyx-carousel .danalyx-prev svg,
.danalyx-carousel .danalyx-next svg {
	width: 60%;
	height: 60%;
	fill: currentColor;
	stroke: currentColor;
	transition: fill 0.3s ease, stroke 0.3s ease;
}


/* Fallback IMG icons */
.danalyx-carousel .danalyx-prev img,
.danalyx-carousel .danalyx-next img {
  max-width: 70%;
  max-height: 70%;
  display: block;
}

/* =========================================================
   5A. ARROWS — INSIDE (OVERLAP, BAND)
   - When carousel has .layout-overlap, arrows float over viewport
   ========================================================= */

.danalyx-inside-band {
  position: absolute;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;  /* only arrows clickable */
  z-index: 5;
}
.danalyx-inside-band .danalyx-prev,
.danalyx-inside-band .danalyx-next { pointer-events: auto; }

/* Y positions for band */
.layout-overlap .danalyx-inside-band.top {
  top: calc(12px + var(--dxa-nav-offy,0px));
  transform: translateX(var(--dxa-nav-offx,0px));
}
.layout-overlap .danalyx-inside-band.middle {
  top: calc(50% + var(--dxa-nav-offy,0px));
  transform: translateX(var(--dxa-nav-offx,0px)) translateY(-50%);
}
.layout-overlap .danalyx-inside-band.bottom {
  bottom: calc(12px - var(--dxa-nav-offy,0px));
  transform: translateX(var(--dxa-nav-offx,0px));
}

/* X align variants */
.layout-overlap .danalyx-inside-band.left   { justify-content: flex-start; }
.layout-overlap .danalyx-inside-band.center { justify-content: center; }
.layout-overlap .danalyx-inside-band.right  { justify-content: flex-end; }

/* Per-arrow deltas (transform only) */
.layout-overlap .danalyx-inside-band .danalyx-prev { transform: translate(var(--dxa-prev-offx,0px), var(--dxa-prev-offy,0px)); }
.layout-overlap .danalyx-inside-band .danalyx-next { transform: translate(var(--dxa-next-offx,0px), var(--dxa-next-offy,0px)); }

/* Hide legacy split when band is in use */
.layout-overlap .danalyx-viewport .inside-split { display: none !important; }
/* =========================================================
   5B. ARROWS — INSIDE (LEGACY SPLIT)
   - Arrows placed as siblings of .danalyx-viewport
   ========================================================= */

.danalyx-shell > .inside-split {
  position: absolute;
  z-index: 8;
}

/* Top */
.danalyx-shell > .inside-split.top.danalyx-prev {
  top:  calc(12px + var(--dxa-nav-offy,0px) + var(--dxa-prev-offy,0px));
  left: calc(12px + var(--dxa-nav-offx,0px) + var(--dxa-prev-offx,0px));
}
.danalyx-shell > .inside-split.top.danalyx-next {
  top:   calc(12px + var(--dxa-nav-offy,0px) + var(--dxa-next-offy,0px));
  right: calc(12px + var(--dxa-nav-offx,0px) + var(--dxa-next-offx,0px));
}

/* Middle */
.danalyx-shell > .inside-split.middle.danalyx-prev {
  top:  calc(50% + var(--dxa-nav-offy,0px) + var(--dxa-prev-offy,0px));
  left: calc(12px + var(--dxa-nav-offx,0px) + var(--dxa-prev-offx,0px));
  transform: translateY(-50%);
}
.danalyx-shell > .inside-split.middle.danalyx-next {
  top:   calc(50% + var(--dxa-nav-offy,0px) + var(--dxa-next-offy,0px));
  right: calc(12px + var(--dxa-nav-offx,0px) + var(--dxa-next-offx,0px));
  transform: translateY(-50%);
}

/* Bottom */
.danalyx-shell > .inside-split.bottom.danalyx-prev {
  bottom: calc(12px - (var(--dxa-nav-offy,0px) + var(--dxa-prev-offy,0px)));
  left:   calc(12px + var(--dxa-nav-offx,0px) + var(--dxa-prev-offx,0px));
}
.danalyx-shell > .inside-split.bottom.danalyx-next {
  bottom: calc(12px - (var(--dxa-nav-offy,0px) + var(--dxa-next-offy,0px)));
  right:  calc(12px + var(--dxa-nav-offx,0px) + var(--dxa-next-offx,0px));
}
/* =========================================================
   6. ARROWS — SEPARATE (OUTSIDE)
   - Clean unified handling for Top / Middle / Bottom
   - Ensures arrows appear OUTSIDE carousel viewport
   ========================================================= */

/* ========== BASE GRID FOR MIDDLE • LEFT & RIGHT ========== */
.layout-separate.navpos-middle-left-right .danalyx-shell {
	display: grid !important;
	grid-template-columns: 1fr; /* only viewport centered */
	align-items: center;
	position: relative;
	overflow: visible !important; /* ensure overflow not clipped */
}

/* Make carousel parent act as outer container */
.layout-separate.navpos-middle-left-right {
	position: relative;
}

/* The viewport stays full-width centered */
.layout-separate.navpos-middle-left-right .danalyx-viewport {
	grid-column: 1;
}

/* ---------- MIDDLE • LEFT & RIGHT arrows ---------- */
.layout-separate.navpos-middle-left-right .danalyx-prev.danalyx-outside-left,
.layout-separate.navpos-middle-left-right .danalyx-next.danalyx-outside-right {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 30;
}

.layout-separate.navpos-middle-left-right .danalyx-prev.danalyx-outside-left {
  position: absolute;
  top: calc(50% + var(--dxa-nav-offy, 0px) + var(--dxa-prev-offy, 0px));
  left: calc(
    -1 * (var(--danalyx-arrow-size, 42px) + 0px)
    + var(--dxa-nav-offx, 0px)
    + var(--dxa-prev-offx, 0px)
  );
  transform: translateY(-50%);
}

.layout-separate.navpos-middle-left-right .danalyx-next.danalyx-outside-right {
  position: absolute;
  top: calc(50% + var(--dxa-nav-offy, 0px) + var(--dxa-next-offy, 0px));
  right: calc(
    -1 * (var(--danalyx-arrow-size, 42px) + 0px)
    + var(--dxa-nav-offx, 0px)
    + var(--dxa-next-offx, 0px)
  );
  transform: translateY(-50%);
}

/* ========== TOP & BOTTOM ROWS ========== */
.layout-separate .danalyx-arrows-row.top,
.layout-separate .danalyx-arrows-row.bottom {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	gap: 12px;
}

.layout-separate .danalyx-arrows-row.top { margin-bottom: 12px; }
.layout-separate .danalyx-arrows-row.bottom { margin-top: 12px; }

/* Alignment options */
.layout-separate.navpos-top-left .danalyx-arrows-row.top,
.layout-separate.navpos-bottom-left .danalyx-arrows-row.bottom { justify-content: flex-start; }

.layout-separate.navpos-top-center .danalyx-arrows-row.top,
.layout-separate.navpos-bottom-center .danalyx-arrows-row.bottom { justify-content: center; }

.layout-separate.navpos-top-right .danalyx-arrows-row.top,
.layout-separate.navpos-bottom-right .danalyx-arrows-row.bottom { justify-content: flex-end; }

.layout-separate.navpos-top-left-right .danalyx-arrows-row.top,
.layout-separate.navpos-bottom-left-right .danalyx-arrows-row.bottom { justify-content: space-between; }

/* Never show inside-band when separate layout is chosen */
.layout-separate .danalyx-inside-band { display: none !important; }

/* ---------- TOP ROW ---------- */
.layout-separate.navpos-top-left .danalyx-arrows-row.top,
.layout-separate.navpos-top-center .danalyx-arrows-row.top,
.layout-separate.navpos-top-right .danalyx-arrows-row.top,
.layout-separate.navpos-top-left-right .danalyx-arrows-row.top {
  transform: translate(
    var(--dxa-nav-offx, 0px),
    calc(var(--dxa-nav-offy, 0px))
  );
}

/* ---------- BOTTOM ROW ---------- */
.layout-separate.navpos-bottom-left .danalyx-arrows-row.bottom,
.layout-separate.navpos-bottom-center .danalyx-arrows-row.bottom,
.layout-separate.navpos-bottom-right .danalyx-arrows-row.bottom,
.layout-separate.navpos-bottom-left-right .danalyx-arrows-row.bottom {
  transform: translate(
    var(--dxa-nav-offx, 0px),
    calc(var(--dxa-nav-offy, 0px))
  );
}

/* =========================================================
   7. METERS — INSIDE vs OUTSIDE (Unified Layout Classes)
   - Meters now respect .layout-overlap / .layout-separate only
   ========================================================= */
.dxa-meter{
  display:inline-flex; align-items:center; gap:.5rem;
  z-index:7;
}


/*.dxa-meter.inside{
/*  position:absolute; left:auto; right:auto; top:auto; bottom:auto;
/*  pointer-events:none;
/*}
/*.dxa-meter.inside .dxa-progress,
/*.dxa-meter.inside .dxa-counter{ pointer-events:auto; }

/* Inside positions */
/*.dxa-meter.inside.pos-top-left    { left:.5rem; right:auto; top:.5rem; bottom:auto; justify-content:flex-start; align-items:flex-start; }
/*.dxa-meter.inside.pos-top-center  { left:.5rem; right:.5rem; top:.5rem; bottom:auto; justify-content:center;     align-items:flex-start; }
/*.dxa-meter.inside.pos-top-right   { right:.5rem; left:auto; top:.5rem; bottom:auto; justify-content:flex-end;   align-items:flex-start; }
/*.dxa-meter.inside.pos-bottom-left  { left:.5rem; right:auto; bottom:.5rem; top:auto; justify-content:flex-start; align-items:flex-end; }
/*.dxa-meter.inside.pos-bottom-center{ left:.5rem; right:.5rem; bottom:.5rem; top:auto; justify-content:center;     align-items:flex-end; }
/*.dxa-meter.inside.pos-bottom-right { right:.5rem; left:auto; bottom:.5rem; top:auto; justify-content:flex-end;   align-items:flex-end; }
/*.dxa-meter.inside.pos-middle-left {
/*  top:50%; left:.5rem; right:auto; bottom:auto;
/*  transform:translate(calc(var(--dxa-meter-offx,0px)), calc(-50% + var(--dxa-meter-offy,0px)));
/*  justify-content:flex-start;
/*}
/*.dxa-meter.inside.pos-middle-right{
/*  top:50%; right:.5rem; left:auto; bottom:auto;
/*  transform:translate(calc(var(--dxa-meter-offx,0px)), calc(-50% + var(--dxa-meter-offy,0px)));
/*  justify-content:flex-end;
/*}

/* Outside meters: middle L/R absolute in shell */
/*.meter-layout-separate .dxa-meter.outside.pos-middle-left{
/*  position:absolute; top:50%; left:.5rem;
/*  transform:translate(calc(var(--dxa-meter-offx,0px)), calc(-50% + var(--dxa-meter-offy,0px)));
/*}
/*.meter-layout-separate .dxa-meter.outside.pos-middle-right{
/*  position:absolute; top:50%; right:.5rem;
/*  transform:translate(calc(var(--dxa-meter-offx,0px)), calc(-50% + var(--dxa-meter-offy,0px)));
/*}

/* Progress track */
.dxa-progress{
  position:relative;
  background: var(--dxa-meter-bg, #e5e7eb);
  border-radius: var(--dxa-meter-radius, 9999px);
  overflow:hidden;
  flex: 0 0 auto;
  border: var(--dxa-meter-border-width, 0px) solid var(--dxa-meter-border-color, transparent);
}
.orient-horizontal .dxa-progress{
  height: var(--dxa-meter-size, 4px);
  min-width: 80px; width: 140px;
}
.orient-horizontal .dxa-progress > span{
  position:absolute; left:0; top:0; bottom:0;
  width:0%; background: var(--dxa-meter-fill, #111827);
  transition:width .25s linear;
}
.orient-vertical{ flex-direction:column; }
.orient-vertical .dxa-progress{
  width: var(--dxa-meter-size, 4px);
  min-height: 80px; height: 140px;
}
.orient-vertical .dxa-progress > span{
  position:absolute; left:0; right:0; bottom:0;
  height:0%; background: var(--dxa-meter-fill, #111827);
  transition:height .25s linear;
}

/* Counter */
.dxa-counter{
  color: var(--dxa-counter-color, #111827);
  background: var(--dxa-counter-bg, transparent);
  border-radius: var(--dxa-counter-radius, 6px);
  border: var(--dxa-counter-border, var(--dxa-counter-border-w-ov, var(--dxa-counter-border-w, 0px)) solid var(--dxa-counter-border-color, transparent));
  padding:.125rem .375rem; line-height:1; font:inherit;
  transform: translate(
	var(--dxa-counter-offx-ov, 0px),
	var(--dxa-counter-offy-ov, 0px)
  );
}

/* Helpers */
/*.dxa-row.meter-row{ gap:.75rem; }

/* ---------- Dots (two APIs: .dxa-dot legacy & .dot buttons) ---------- */
/* Guards: Bar vs Dots (never clash) */
/*.meter-style-bar  .dxa-dots{ display:none !important; }
/*.meter-style-dots .dxa-progress{ display:none !important; }
/*.danalyx-carousel .dxa-dots{ display:none !important; }
/*.danalyx-carousel.meter-style-dots .dxa-dots{ display:flex !important; }
/*.danalyx-carousel.meter-style-bar  .dxa-dots{ display:none !important; }
/*.danalyx-carousel.meter-style-dots .dxa-progress{ display:none !important; }
/*.danalyx-carousel.meter-style-bar  .dxa-progress{ display:block !important; }*/

.dxa-dots{
  display:flex;
  gap: var(--dxa-dot-gap-ov, var(--dxa-dot-gap, 8px));
  align-items:center;
  flex-wrap:wrap;
}
/*.orient-horizontal .dxa-dots{ flex-direction:row; }*/
.orient-vertical   .dxa-dots{ flex-direction:column-reverse; }
.dxa-meter.reverse-y .dxa-dots{ flex-direction:column-reverse; }

/* Legacy .dxa-dot */
/*.dxa-dot{
  width: var(--dxa-dot-size-ov, var(--dxa-dot-size, 10px));
  height: var(--dxa-dot-size-ov, var(--dxa-dot-size, 10px));
  flex:0 0 auto;
  border-radius: var(--dxa-dot-radius-ov, var(--dxa-dot-radius, 9999px));
  background-color: var(--dxa-dot-color, #e5e7eb);
  background-image: var(--dxa-dot-image, none);
  background-position:center; background-repeat:no-repeat; background-size: contain;
  border: var(--dxa-dot-border, var(--dxa-dot-border-width-ov, var(--dxa-dot-border-width, 0px)) solid var(--dxa-dot-border-color, transparent));
  transition: transform .2s ease, opacity .2s ease, border-color .1s linear, border-width .1s linear, background-color .1s linear;
  box-sizing:border-box; border-style:solid;
}
.dxa-dot.is-active{
  background-color: var(--dxa-dot-active, #111827);
  background-image: var(--dxa-dot-image-active, var(--dxa-dot-image, none));
  border-color: var(--dxa-dot-active-border, var(--dxa-dot-active-border-color, currentColor));
  border-width: var(--dxa-dot-border-w-active, var(--dxa-dot-border-width-ov, var(--dxa-dot-border-width, 0px)));
  transform: scale(var(--dxa-dot-active-scale-ov, var(--dxa-dot-active-scale, 1)));
}

/* Button-based dots (.dot) */
/*.dxa-dots .dot{
  box-sizing:border-box;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1/1;
  width: var(--dxa-dot-size-ov, var(--dxa-dot-size, 10px));
  height: var(--dxa-dot-size-ov, var(--dxa-dot-size, 10px));
  flex:0 0 auto;
  border-radius: var(--dxa-dot-radius-ov, var(--dxa-dot-radius, 9999px));
  background-color: var(--dxa-dot-color, #e5e7eb);
  background-image: var(--dxa-dot-image, none);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  border-width: var(--dxa-dot-border-width-ov, var(--dxa-dot-border-width, 0px));
  border-style:solid;
  border-color: var(--dxa-dot-border-color, transparent);
  transition: transform .2s ease, opacity .2s ease, border-color .1s linear, border-width .1s linear, background-color .1s linear;
}
.dxa-dots .dot.is-active{
  background-color: var(--dxa-dot-active, #111827);
  background-image: var(--dxa-dot-image-active, var(--dxa-dot-image, none));
  border-style:solid;
  border-color: var(--dxa-dot-active-border, currentColor);
  border-width: var(--dxa-dot-border-w-active, var(--dxa-dot-border-width-ov, var(--dxa-dot-border-width, 0px)));
  transform: scale(var(--dxa-dot-active-scale-ov, var(--dxa-dot-active-scale, 1)));
}
.dxa-dots .dot:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
*/
/* Keep container height stable when dots are used */
/*.meter-style-dots .dxa-dots{ min-height: var(--dxa-dot-size-ov, var(--dxa-dot-size,10px)); }





/* =========================================================
   Normalize all dots — fixes uneven button widths
   ========================================================= */
.dxa-dots button.dot,
.dxa-dots .dot,
.dxa-dot {
	all: unset;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: var(--dxa-dot-size-ov, var(--dxa-dot-size, 10px)) !important;
	height: var(--dxa-dot-size-ov, var(--dxa-dot-size, 10px)) !important;
	border-radius: var(--dxa-dot-radius-ov, var(--dxa-dot-radius, 9999px));
	background-color: var(--dxa-dot-color, #e5e7eb);
	background-image: var(--dxa-dot-image, none);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	border: var(--dxa-dot-border-width-ov, var(--dxa-dot-border-width, 0px))
		solid var(--dxa-dot-border-color, transparent);
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.15s ease;
    display:flex;
    gap: var(--dxa-dot-gap-ov, var(--dxa-dot-gap, 8px));
    flex-wrap:wrap;	
}

.dxa-dots button.dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.dxa-dots .dot.is-active,
.dxa-dot.is-active {
	background-color: var(--dxa-dot-active, #111827);
	background-image: var(--dxa-dot-image-active, var(--dxa-dot-image, none));
	border-color: var(--dxa-dot-active-border, currentColor);
	transform: scale(var(--dxa-dot-active-scale-ov, var(--dxa-dot-active-scale, 1)));
}













/* =========================================================
   New Replacement End
   ========================================================= */








/* ---------- Viewport inset calculation for SEPARATE ▸ Middle L/R ---------- */
.layout-separate.navpos-middle-left-right {
  --dxa-vp-inset-l: calc(var(--danalyx-arrow-size, 42px) + 12px + var(--dxa-nav-offx, 0px) + var(--dxa-prev-offx, 0px));
  --dxa-vp-inset-r: calc(var(--danalyx-arrow-size, 42px) + 12px + var(--dxa-nav-offx, 0px) + var(--dxa-next-offx, 0px));
}

/* ---------- BASE WRAPPER FOR METERS (independent of arrows) ---------- */
.danalyx-meters {
  position: relative;
  display: block;
  width: 100%;
  z-index: 15;
  pointer-events: none; /* children re-enable as needed */
}

/* ---------- INSIDE (Overlap / Inside Viewport) ---------- */
.layout-overlap .danalyx-meters {
  position: absolute;
  inset: 0;
  padding-left:  var(--dxa-vp-inset-l, 0px);
  padding-right: var(--dxa-vp-inset-r, 0px);
}

.layout-overlap .danalyx-meters .dxa-meter.inside {
  position: absolute !important;
  pointer-events: none;
}
.layout-overlap .danalyx-meters .dxa-meter.inside .dxa-progress,
.layout-overlap .danalyx-meters .dxa-meter.inside .dxa-dots,
.layout-overlap .danalyx-meters .dxa-meter.inside .dxa-counter {
  pointer-events: auto;
}

/* Inside placements (now constrained by overlay padding/insets) */
.layout-overlap .danalyx-meters .dxa-meter.inside.meter-pos-top-left     { left:.5rem;  top:.5rem;   justify-content:flex-start; align-items:flex-start; }
.layout-overlap .danalyx-meters .dxa-meter.inside.meter-pos-top-center   { left:.5rem;  right:.5rem; top:.5rem;   justify-content:center;      align-items:flex-start; }
.layout-overlap .danalyx-meters .dxa-meter.inside.meter-pos-top-right    { right:.5rem; top:.5rem;   justify-content:flex-end;    align-items:flex-start; }
.layout-overlap .danalyx-meters .dxa-meter.inside.meter-pos-bottom-left  { left:.5rem;  bottom:.5rem; justify-content:flex-start; align-items:flex-end; }
.layout-overlap .danalyx-meters .dxa-meter.inside.meter-pos-bottom-center{ left:.5rem;  right:.5rem; bottom:.5rem; justify-content:center;      align-items:flex-end; }
.layout-overlap .danalyx-meters .dxa-meter.inside.meter-pos-bottom-right { right:.5rem; bottom:.5rem; justify-content:flex-end;   align-items:flex-end; }
.layout-overlap .danalyx-meters .dxa-meter.inside.meter-pos-middle-left  {
  top:50%; left:.5rem; transform: translate(var(--dxa-meter-offx,0px), calc(-50% + var(--dxa-meter-offy,0px)));
  justify-content:flex-start;
}
.layout-overlap .danalyx-meters .dxa-meter.inside.meter-pos-middle-right {
  top:50%; right:.5rem; transform: translate(var(--dxa-meter-offx,0px), calc(-50% + var(--dxa-meter-offy,0px)));
  justify-content:flex-end;
}

/* ---------- OUTSIDE (Separate / Below or Above Viewport) ---------- */
.layout-separate .danalyx-meters {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 10;
}

/* Top / Bottom alignment */

/* --- Base outside meters styling --- */
.layout-separate.meter-pos-top-left .danalyx-meters,
.layout-separate.meter-pos-top-center .danalyx-meters,
.layout-separate.meter-pos-top-right .danalyx-meters,
.layout-separate.meter-pos-bottom-left .danalyx-meters,
.layout-separate.meter-pos-bottom-center .danalyx-meters,
.layout-separate.meter-pos-bottom-right .danalyx-meters {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	display: flex;
	align-items: center;
	pointer-events: none;
	z-index: 30;
}

/* --- Ensure the carousel acts as positioning root --- */
.danalyx-carousel.layout-separate {
	position: relative;
	overflow: visible; /* allow top/bottom meters to show outside */
}


/* --- TOP meters (above carousel) --- */
.layout-separate.meter-pos-top-left .danalyx-meters,
.layout-separate.meter-pos-top-center .danalyx-meters,
.layout-separate.meter-pos-top-right .danalyx-meters {
	bottom: 100%; /* place above carousel */
	margin-bottom: calc(12px + var(--dxa-meter-offy, 0px));
}

/* --- BOTTOM meters (below carousel) --- */
.layout-separate.meter-pos-bottom-left .danalyx-meters,
.layout-separate.meter-pos-bottom-center .danalyx-meters,
.layout-separate.meter-pos-bottom-right .danalyx-meters {
	top: 100%; /* place below carousel */
	margin-top: calc(12px + var(--dxa-meter-offy, 0px));
}

/* --- Horizontal alignment --- */
.layout-separate.meter-pos-top-left .danalyx-meters,
.layout-separate.meter-pos-bottom-left .danalyx-meters {
	justify-content: flex-start;
	margin-left: var(--dxa-meter-offx, 0px);
}

.layout-separate.meter-pos-top-center .danalyx-meters,
.layout-separate.meter-pos-bottom-center .danalyx-meters {
	justify-content: center;
}

.layout-separate.meter-pos-top-right .danalyx-meters,
.layout-separate.meter-pos-bottom-right .danalyx-meters {
	justify-content: flex-end;
	margin-right: var(--dxa-meter-offx, 0px);
}

/* --- Make contents interactive again --- */
.layout-separate .danalyx-meters .dxa-dots,
.layout-separate .danalyx-meters .dxa-progress,
.layout-separate .danalyx-meters .dxa-counter {
	pointer-events: auto;
}

/* Side alignment */
.layout-separate.meter-pos-middle-left .danalyx-meters,
.layout-separate.meter-pos-middle-right .danalyx-meters {
	position: absolute;
	top: 50%;
	transform: translateY(
		calc(-50% + var(--dxa-meter-offy, 0px) + var(--dxa-nav-offy, 0px))
	);
	width: auto;
	height: auto;
	z-index: 10;
	pointer-events: none;
}

/* Left side meters */
.layout-separate.meter-pos-middle-left .danalyx-meters {
	left: calc(
		-1 * (var(--danalyx-arrow-size, 42px) + 20px)
		+ var(--dxa-meter-offx, 0px)
		+ var(--dxa-nav-offx, 0px)
	);
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

/* Right side meters */
.layout-separate.meter-pos-middle-right .danalyx-meters {
	right: calc(
		-1 * (var(--danalyx-arrow-size, 42px) + 20px)
		+ var(--dxa-meter-offx, 0px)
		+ var(--dxa-nav-offx, 0px)
	);
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

/* Ensure meters are visible and interactive */
.layout-separate.meter-pos-middle-left .danalyx-meters .dxa-dots,
.layout-separate.meter-pos-middle-right .danalyx-meters .dxa-dots,
.layout-separate.meter-pos-middle-left .danalyx-meters .dxa-progress,
.layout-separate.meter-pos-middle-right .danalyx-meters .dxa-progress,
.layout-separate.meter-pos-middle-left .danalyx-meters .dxa-counter,
.layout-separate.meter-pos-middle-right .danalyx-meters .dxa-counter {
	pointer-events: auto;
}

/* Re-enable pointer events on interactive pieces */
.danalyx-meters .dxa-dots,
.danalyx-meters .dxa-progress,
.danalyx-meters .dxa-counter { pointer-events: auto; }

/* Bar / Dots independent movement */
.dxa-progress,
.dxa-dots {
	transform: translate(
		var(--dxa-meter-offx-ov, 0px),
		var(--dxa-meter-offy-ov, 0px)
	);
}

/* Counter independent movement */
.dxa-counter {
	transform: translate(
		var(--dxa-counter-offx-ov, 0px),
		var(--dxa-counter-offy-ov, 0px)
	);
}

/* =========================================================
   8. FIXED ARROWS / METERS RELATION
   - Ensure arrows and meters remain visually independent
   ========================================================= */

.danalyx-carousel.layout-separate .danalyx-shell {
  margin-bottom: 0;
}
.danalyx-carousel.layout-separate .danalyx-meters {
  margin-top: 8px;
}

.layout-separate .danalyx-viewport {
  position: relative;
}
.layout-separate .danalyx-viewport .dxa-meter.inside {
  position: absolute !important;
  z-index: 15;
}






/* =========================================================
   FIX: Keep vertical dots anchored for Top/Bottom Center
   ========================================================= */

/* --- OVERLAP layout (inside viewport) --- */

/* Top • Center */
.layout-overlap .danalyx-meters .dxa-meter.inside.meter-pos-top-center.orient-vertical {
  top: 0.75rem !important;      /* adjust as needed */
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  justify-content: center;
  align-items: flex-start;      /* stack downward */
}

/* Bottom • Center */
.layout-overlap .danalyx-meters .dxa-meter.inside.meter-pos-bottom-center.orient-vertical {
  top: auto !important;
  bottom: 0.75rem !important;   /* adjust as needed */
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  justify-content: center;
  align-items: flex-end;        /* stack upward */
}


/* --- SEPARATE layout (outside viewport) --- */

/* Top • Center */
.layout-separate.meter-pos-top-center .danalyx-meters .dxa-meter.orient-vertical {
  position: absolute !important;
  bottom: 100% !important;          /* place above carousel */
  top: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-bottom: calc(12px + var(--dxa-meter-offy, 0px)) !important;
  justify-content: center;
  align-items: flex-start;          /* stack downward */
}

/* Bottom • Center */
.layout-separate.meter-pos-bottom-center .danalyx-meters .dxa-meter.orient-vertical {
  position: absolute !important;
  top: 100% !important;             /* place below carousel */
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-top: calc(12px + var(--dxa-meter-offy, 0px)) !important;
  justify-content: center;
  align-items: flex-end;            /* stack upward */
}


/* --- Responsive adjustments (optional) --- */
@media (max-width: 768px) {
  .layout-overlap .danalyx-meters .dxa-meter.inside.meter-pos-top-center.orient-vertical,
  .layout-overlap .danalyx-meters .dxa-meter.inside.meter-pos-bottom-center.orient-vertical,
  .layout-separate.meter-pos-top-center .danalyx-meters .dxa-meter.orient-vertical,
  .layout-separate.meter-pos-bottom-center .danalyx-meters .dxa-meter.orient-vertical {
    margin: 8px 0 !important;
  }
}










/* --- Force clickability and gestures --- */
.danalyx-carousel,
.danalyx-carousel * {
  -webkit-tap-highlight-color: transparent;
}

.danalyx-viewport {
  position: relative;
  overflow: hidden !important;
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
  touch-action: none !important;
  user-select: none !important;
  cursor: grab !important;
  z-index: 0;
  margin: 0 auto;
}

.danalyx-viewport.is-dragging,
.danalyx-viewport:active { cursor: grabbing !important; }

.danalyx-track {
  align-items: stretch;
  pointer-events: auto !important;
  touch-action: pan-y !important;
  transform-origin: 0 0;
  backface-visibility: hidden !important;
  translate: none !important;
}

.danalyx-prev, .danalyx-next, .dxa-dots {
  position: relative;
  z-index: 10 !important;
  pointer-events: auto !important;
}

.danalyx-carousel [style*="pointer-events:none"] { pointer-events: auto !important; }

.danalyx-item img {
  pointer-events: none;
  user-select: none;
}

.danalyx-item {
  user-select: none;
  touch-action: pan-y;
  backface-visibility: hidden;
}

.danalyx-shell.grid {
  display: grid !important;  /* ✅ restore correct grid behavior */
  overflow: hidden;
}




/* =========================================================
   FIX: Three Columns Appearance when changing view
   ========================================================= */
/* Initial fade-out on widget rebuild */
body.elementor-editor-active .elementor-widget-danalyx_carousel {
	opacity: 0;
	transform: scale(0.97) translateY(10px);
	filter: blur(2px);
	transition:
		opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		filter 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform, filter;
	pointer-events: none;
}

/* Reveal phase (Elementor marks ready again) */
body.elementor-editor-active .elementor-widget-danalyx_carousel.danalyx-ready {
	opacity: 1;
	transform: scale(1) translateY(0);
	filter: blur(0);
	transition:
		opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
		filter 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: auto;
}