
.udpg-gallery{
  --udpg-bg:#FAF0E4;
  --udpg-surface:#F3E4D3;
  --udpg-primary:#5C0F14;
  --udpg-primary-dark:#3D0A0D;
  --udpg-text:#601F19;
  --udpg-heading:#2A1610;
  --udpg-gold:#9B6B35;
  --udpg-gold-bright:#E8C275;
  --udpg-border:#DECDB8;
  width:100%;
  font-family:"Montserrat",Arial,sans-serif;
  color:var(--udpg-text);
}
.udpg-gallery *{box-sizing:border-box}
.udpg-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:0 0 36px;
}
.udpg-filter,
.udpg-filter:hover,
.udpg-filter:focus,
.udpg-filter:active{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  margin:0;
  border:1px solid var(--udpg-border);
  border-radius:999px;
  padding:9px 22px;
  background:#fff;
  color:var(--udpg-primary);
  box-shadow:none;
  outline:0;
  font-family:"Montserrat",Arial,sans-serif;
  font-size:14px;
  font-weight:500;
  line-height:22px;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.udpg-filter:hover{
  border-color:rgba(92,15,20,.45);
  transform:translateY(-1px);
}
.udpg-filter.is-active,
.udpg-filter.is-active:hover,
.udpg-filter[aria-pressed="true"]{
  background:var(--udpg-primary);
  border-color:var(--udpg-primary);
  color:#fff;
}
.udpg-grid{
  display:grid;
  grid-template-columns:repeat(var(--udpg-columns,3),minmax(0,1fr));
  gap:18px;
}
.udpg-gallery[data-columns="1"] .udpg-grid{--udpg-columns:1}
.udpg-gallery[data-columns="2"] .udpg-grid{--udpg-columns:2}
.udpg-gallery[data-columns="3"] .udpg-grid{--udpg-columns:3}
.udpg-gallery[data-columns="4"] .udpg-grid{--udpg-columns:4}
.udpg-item{
  position:relative;
  display:block;
  margin:0;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:16px;
  background:var(--udpg-surface);
  cursor:zoom-in;
  box-shadow:0 1px 2px rgba(42,22,16,.04),0 12px 34px rgba(42,22,16,.07);
  opacity:1;
  transform:scale(1);
  transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease;
}
.udpg-item[hidden]{display:none!important}
.udpg-item img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.udpg-item:hover img,
.udpg-item:focus img{transform:scale(1.025)}
.udpg-item:focus-visible{
  outline:3px solid rgba(155,107,53,.48);
  outline-offset:3px;
}
.udpg-hover{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(to top,rgba(61,10,13,.18),transparent 48%);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.udpg-hover svg{
  width:34px;
  height:34px;
  fill:none;
  stroke:#fff;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.24));
}
.udpg-item:hover .udpg-hover,
.udpg-item:focus .udpg-hover{opacity:1}
.udpg-empty{
  grid-column:1/-1;
  padding:48px 24px;
  border:1px dashed var(--udpg-border);
  border-radius:16px;
  text-align:center;
  color:rgba(96,31,25,.65);
  background:rgba(255,255,255,.44);
}
.udpg-lightbox{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:stretch;
  justify-content:stretch;
}
.udpg-lightbox.is-open{display:flex}
.udpg-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(30,14,11,.94);
  backdrop-filter:blur(7px);
}
.udpg-lightbox-shell{
  position:relative;
  z-index:2;
  width:100%;
  height:100dvh;
  display:grid;
  grid-template-columns:88px minmax(0,1fr) 88px;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:center;
  padding:26px max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
}
.udpg-lightbox-stage{
  grid-column:2;
  grid-row:1;
  min-width:0;
  min-height:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.udpg-lightbox-stage img{
  display:block;
  max-width:min(92vw,1500px);
  max-height:calc(100dvh - 128px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.38);
  user-select:none;
  -webkit-user-drag:none;
}
.udpg-lightbox-close,
.udpg-lightbox-arrow,
.udpg-lightbox-close:hover,
.udpg-lightbox-arrow:hover,
.udpg-lightbox-close:focus,
.udpg-lightbox-arrow:focus{
  -webkit-appearance:none!important;
  appearance:none!important;
  border:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  min-height:0!important;
  padding:0!important;
  color:#fff!important;
  cursor:pointer;
}
.udpg-lightbox-close{
  position:absolute;
  top:max(20px,env(safe-area-inset-top));
  right:max(22px,env(safe-area-inset-right));
  z-index:6;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.06)!important;
}
.udpg-lightbox-close:hover{background:rgba(255,255,255,.12)!important}
.udpg-lightbox-close svg,
.udpg-lightbox-arrow svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.udpg-lightbox-arrow{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  justify-self:center;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.04)!important;
}
.udpg-lightbox-arrow:hover{background:rgba(255,255,255,.12)!important}
.udpg-prev{grid-column:1;grid-row:1}
.udpg-next{grid-column:3;grid-row:1}
.udpg-lightbox-footer{
  grid-column:2;
  grid-row:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:50px;
  padding-top:12px;
  color:rgba(255,255,255,.82);
  font-size:13px;
}
.udpg-lightbox-caption{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.udpg-lightbox-counter{
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
  color:var(--udpg-gold-bright);
}
body.udpg-lock{overflow:hidden!important}

@media(max-width:1024px){
  .udpg-gallery[data-columns="3"] .udpg-grid,
  .udpg-gallery[data-columns="4"] .udpg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .udpg-filters{
    margin-bottom:26px;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .udpg-filters::-webkit-scrollbar{display:none}
  .udpg-filter{flex:0 0 auto;padding:8px 18px;font-size:13px}
  .udpg-grid,
  .udpg-gallery[data-columns="2"] .udpg-grid,
  .udpg-gallery[data-columns="3"] .udpg-grid,
  .udpg-gallery[data-columns="4"] .udpg-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .udpg-lightbox-shell{
    grid-template-columns:48px minmax(0,1fr) 48px;
    padding-left:8px;
    padding-right:8px;
  }
  .udpg-lightbox-arrow{
    width:42px;
    height:42px;
  }
  .udpg-lightbox-stage img{
    max-width:calc(100vw - 32px);
    max-height:calc(100dvh - 120px);
    border-radius:10px;
  }
  .udpg-lightbox-footer{
    grid-column:1/-1;
    padding-left:12px;
    padding-right:12px;
  }
}
@media(prefers-reduced-motion:reduce){
  .udpg-item,
  .udpg-item img,
  .udpg-filter{transition:none!important}
}
