/* Approved Open Design gallery; namespaced for WordPress. */
.abp-gallery{--stage-mat:oklch(16% 0.012 252);--pad:clamp(20px,5vw,60px)}
/* ---------- gallery ---------- */
.abp-gallery{margin-top:clamp(24px,3.6vw,40px)}
.abpg-stage{
  position:relative;background:var(--stage-mat);overflow:hidden;
  aspect-ratio:4 / 3;border-radius:var(--radius);
  touch-action:pan-y;-webkit-user-select:none;user-select:none;
  box-shadow:0 18px 46px oklch(24% 0.02 255 / .14);
}
.abpg-stage__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;opacity:0;transition:opacity .32s var(--ease);
  -webkit-user-drag:none;user-drag:none;pointer-events:none;
}
.abpg-stage__img.abpg-is-on{opacity:1}
.abpg-stage__hit{position:absolute;inset:0;z-index:1;background:transparent;cursor:zoom-in;touch-action:pan-y}
.abpg-stage__hit:focus-visible{outline:2px solid var(--on-ink-acc);outline-offset:-4px}
html.abpg-viewer-open{overflow:hidden}
.abpg-stage__chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px;border-radius:999px;background:oklch(12% 0.02 255 / .58);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border:1px solid oklch(96% 0.006 250 / .18);color:#fff;font-size:13px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums;pointer-events:none}
.abpg-stage__chip--count{top:14px;left:14px}
.abpg-stage__nav{
  position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:oklch(12% 0.02 255 / .5);border:1px solid oklch(96% 0.006 250 / .22);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  transition:background-color .18s var(--ease),transform .18s var(--ease);
}
.abpg-stage__nav:hover{background:oklch(12% 0.02 255 / .78)}
.abpg-stage__nav:active{transform:translateY(-50%) scale(.94)}
.abpg-stage__nav svg{width:22px;height:22px}
.abpg-stage__nav:focus-visible,.abpg-stage__expand:focus-visible{outline:2px solid var(--on-ink-acc);outline-offset:3px}
.abpg-stage__nav--prev{left:12px}
.abpg-stage__nav--next{right:12px}
.abpg-stage__expand{
  position:absolute;top:14px;right:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;
  color:#fff;background:oklch(12% 0.02 255 / .58);border:1px solid oklch(96% 0.006 250 / .2);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);font-size:13.5px;font-weight:600;letter-spacing:.02em;
  transition:background-color .18s var(--ease);
}
.abpg-stage__expand:hover{background:oklch(12% 0.02 255 / .8)}
.abpg-stage__expand svg{width:16px;height:16px}
.abpg-stage__swipe{position:absolute;left:50%;bottom:14px;z-index:2;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;background:oklch(12% 0.02 255 / .5);color:oklch(98% 0.004 258 / .9);font-size:12px;font-weight:500;letter-spacing:.02em;pointer-events:none;transition:opacity .5s var(--ease)}
.abpg-stage__swipe svg{width:15px;height:15px}
.abpg-stage__swipe.abpg-is-hidden{opacity:0}

/* thumbnails */
.abpg-thumbs{list-style:none;margin:clamp(14px,2.2vw,20px) 0 0;padding:4px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.abpg-thumbs::-webkit-scrollbar{height:6px}
.abpg-thumbs::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:999px}
.abpg-thumb{flex:none;scroll-snap-align:center;height:var(--thumb-h,68px);aspect-ratio:var(--ar,4/3);position:relative;border-radius:var(--radius);overflow:hidden;background:var(--surface-2);border:1px solid var(--border);opacity:.6;transition:opacity .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
@media (hover:hover){.abpg-thumb:hover{opacity:.92}}
.abpg-thumb img{width:100%;height:100%;object-fit:cover}
.abpg-thumb[aria-current="true"]{opacity:1;border-color:transparent;box-shadow:0 0 0 2px var(--accent)}
.abpg-thumb__n{position:absolute;left:6px;bottom:6px;font-size:11px;font-weight:600;letter-spacing:.04em;color:#fff;background:oklch(12% 0.02 255 / .6);border-radius:999px;padding:1px 7px;font-variant-numeric:tabular-nums}
.abpg-thumb:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}

/* ---------- full-screen viewer ---------- */
.abpg-viewer{
  border:0;padding:0;margin:0;position:fixed;inset:0;
  width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;
  background:oklch(12% 0.012 255);color:#fff;overflow:hidden;
  overscroll-behavior:contain;
}
.abpg-viewer[open]{display:flex;flex-direction:column}
.abpg-viewer::backdrop{background:oklch(10% 0.012 255 / .92)}
.abpg-viewer__bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:max(12px,env(safe-area-inset-top)) clamp(14px,3vw,26px) 12px}
.abpg-viewer__title{font-size:14.5px;font-weight:500;color:oklch(93% 0.006 250);display:flex;align-items:center;gap:10px;min-width:0}
.abpg-viewer__title .abpg-viewer__count{color:oklch(78% 0.012 250);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.abpg-viewer__tools{display:flex;align-items:center;gap:8px}
.abpg-vbtn{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;color:oklch(95% 0.006 250);background:oklch(100% 0 0 / .07);border:1px solid oklch(100% 0 0 / .16);transition:background-color .18s var(--ease),opacity .18s var(--ease)}
.abpg-vbtn:hover{background:oklch(100% 0 0 / .15)}
.abpg-vbtn:disabled{opacity:.35;cursor:default}
.abpg-vbtn svg{width:21px;height:21px}
.abpg-viewer__stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;touch-action:none}
.abpg-viewer__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;will-change:transform;-webkit-user-drag:none;user-select:none;transform-origin:center center;transition:transform .18s var(--ease)}
.abpg-viewer__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;color:#fff;background:oklch(12% 0.02 255 / .5);border:1px solid oklch(100% 0 0 / .2);transition:background-color .18s var(--ease)}
.abpg-viewer__nav:hover{background:oklch(12% 0.02 255 / .82)}
.abpg-viewer__nav svg{width:26px;height:26px}
.abpg-viewer__nav--prev{left:clamp(8px,2vw,24px)}
.abpg-viewer__nav--next{right:clamp(8px,2vw,24px)}
.abpg-viewer__foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(14px,3vw,26px) max(14px,env(safe-area-inset-bottom));color:oklch(78% 0.012 250);font-size:12.5px}
.abpg-viewer__hint{letter-spacing:.01em}
.abpg-viewer__zoom{font-variant-numeric:tabular-nums;letter-spacing:.06em;color:oklch(85% 0.01 250)}

/* Desktop: keep the 4:3 frame so landscape photos fill edge-to-edge with no
   mat; cap the width so the frame never exceeds 76vh tall, and centre it. */
@media (min-width:900px){
  .abpg-stage{width:min(100%,calc(76vh * 4 / 3));margin-inline:auto}
  .abpg-thumbs{width:min(100%,calc(76vh * 4 / 3));margin-inline:auto;justify-content:center}
  .abpg-stage__nav{width:52px;height:52px}
  .abpg-stage__nav--prev{left:18px}.abpg-stage__nav--next{right:18px}
}
@media (max-width:640px){
  /* true edge-to-edge stage on phones — cancel the wrap padding */
  .abpg-stage{margin-inline:calc(-1 * var(--pad));width:calc(100% + 2 * var(--pad));border-radius:0;box-shadow:none}
  .abpg-thumbs{margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad)}
  .abpg-stage__swipe{display:none}
}
@media (prefers-reduced-motion:reduce){
  .abp-gallery *{scroll-behavior:auto!important}
  .abpg-stage__img,.abpg-thumb,.abpg-viewer__img,.abpg-vbtn,.abpg-stage__nav{transition:none!important}
}

.abp-gallery [hidden]{display:none!important}
.abp-gallery .abpg-thumbs>li{flex:none;margin:0;padding:0}
.abp-gallery button{font:inherit;cursor:pointer}
.abp-gallery .abpg-stage__hit{border:0;padding:0}
.abp-gallery .abpg-thumb{padding:0}
.abp-gallery .abpg-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.abp-gallery:not(.is-ready) button,.abp-gallery:not(.is-ready) .abpg-stage__chip,.abp-gallery:not(.is-ready) .abpg-stage__swipe{display:none}
.abpg-caption{font-size:14px;color:var(--muted);text-align:center;margin:12px 0}
.abpg-caption:empty,.abpg-viewer-caption:empty{display:none}
.abpg-viewer__title{overflow:hidden}
.abpg-viewer__title>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abpg-viewer__count,.abpg-viewer__tools{flex-shrink:0}
.abpg-viewer__foot{flex-wrap:wrap;max-height:25dvh;overflow:auto}
.abpg-viewer-caption{flex-basis:100%;text-align:center;color:var(--on-ink)}
.abpg-viewer__hint{flex:1}
.abpg-viewer button:focus-visible{outline:2px solid var(--on-ink-acc);outline-offset:2px}