:root { --ub-hero-h: clamp(420px, 72vh, 880px); }
* { box-sizing: border-box; }

.ub-slider{
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 24px auto;
  background:#000;
  border-radius:14px;
  overflow:hidden;
  /* box-shadow:0 8px 24px rgba(0,0,0,.18); */
}

.ub-track{
  display:flex;
  gap:0;
  width:100%;
  transition:transform 300ms ease;
  will-change:transform;
}

.ub-slide{
  flex:0 0 100%;
  min-width:100%;
  height:var(--ub-hero-h);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}

.ub-slide img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

/* Arrows */
.ub-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; background:rgba(17,17,17,.55); color:#fff;
  font-size:40px; padding:10px 14px;
  border-radius:14px; cursor:pointer;
}
.ub-arrow:hover{ background:rgba(17,17,17,.75); }
.ub-prev { left: 20px; }   /* was 14px, push it in */
.ub-next { right: 20px; }


/* Thumbs */
.ub-thumbs{
  max-width:1280px;
  margin:14px auto 40px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:12px;
  padding:0 10px;
}
.ub-thumb{
  border:2px solid transparent;
  border-radius:10px; overflow:hidden;
  background:#eee; cursor:pointer;
}
.ub-thumb[aria-selected="true"]{
  border-color:#ff8a00; box-shadow:0 0 0 3px rgba(255,138,0,.25);
}
.ub-thumb img{ width:100%; height:84px; object-fit:cover; display:block; }

.ub-gallery-empty{ max-width:1280px; margin:20px auto; padding:16px; background:#222; color:#bbb; border-radius:10px; }

html,body{ overflow-x:hidden; }/* Kill default figure spacing that breaks slide widths */
.ub-track { margin: 0; padding: 0; }
.ub-slide { margin: 0; padding: 0; }         /* <figure> default margin removed */
.ub-slide img { display: block; }             /* no inline-gap */

.ub-slider { padding: 0; }                    /* ensure container has no inner padding */
/* === Arrow visibility + layering (final fix) === */
.ub-slider { overflow: hidden; position: relative; } /* clip slides only */
.ub-track  { overflow: visible; position: relative; } /* don't clip controls */

.ub-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;           /* ensure above images/track */
  display: block;        /* belt-and-suspenders */
  pointer-events: auto;
}

/* keep arrows safely inside the clipped area */
.ub-prev { left: 24px; }
.ub-next { right: 24px; }

/* make sure figures don’t widen slides */
.ub-track { margin: 0; padding: 0; }
.ub-slide { margin: 0; padding: 0; }
.ub-slide img { display: block; }
/* === Visual refinement === */

/* tighter, sharper look */
.ub-slider {
  border-radius: 2px;      /* was 14px */
}

/* slides themselves */
.ub-slide {
  border-radius: 2px;
}

/* nav arrows */
.ub-arrow {
  border-radius: 2px;      /* was 14px */
}

/* thumbnails */
.ub-thumbs {
  gap: 2px;                /* was 12px */
}
.ub-thumb {
  border-radius: 2px;      /* was 10px */
}
.ub-thumb[aria-selected="true"] {
  box-shadow: 0 0 0 2px rgba(255,138,0,.25); /* a bit subtler */
}

/* === Thumbs: single-line, scrollable strip + tidy spacing === */
#ub-thumbs.ub-thumbs {
  display: flex;              /* override grid */
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;                   /* tighter spacing */
  overflow-x: auto;
  padding: 0 10px;
  margin: 14px auto 40px;
  max-width: 1280px;
  scroll-behavior: smooth;    /* smooth programmatic scroll */
  -webkit-overflow-scrolling: touch;
}

/* Each thumb is a fixed inline “chip” */
#ub-thumbs .ub-thumb {
  flex: 0 0 auto;             /* don’t shrink, don’t wrap */
  border-radius: 2px;         /* your 2px radius */
}

/* Keep images uniform */
#ub-thumbs .ub-thumb img {
  width: 110px;               /* choose the width you like */
  height: 70px;               /* keeps row compact */
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

/* Active state already handled via [aria-selected="true"] — keep it */
/* === Spacing refinements === */

/* Reduce gap above the main slide */
.ub-slider {
  margin-top: 4px;    /* was 24px */
  margin-bottom: 12px; /* shrink gap under slide */
}

/* Shrink the space between main slide and thumbs */
#ub-thumbs.ub-thumbs {
  margin-top: 6px;     /* tighter than 14px */
  margin-bottom: 4px; /* reduce big 40px bottom margin */
}

/* Optional: if the page still feels too loose, 
   adjust the clamp height so slides are a bit shallower */
:root {
  --ub-hero-h: clamp(380px, 65vh, 760px);  /* shorter max height */
}