/* Drop pages: a slideshow per print, a lightbox for its photos and a purchase modal, so visitors stay on the drop page (owner,
   2 Nov 2026: "on the drop pages keep them on the drop pages. show slideshow of images for each print. show lightbox for images and
   lightbox/modal for purchase"). Markup: AubreyKurlansky/scripts/maker_pages.py drop_card; behaviour: /assets/drop-gallery.js.
   Uses ak.css's tokens (--paper, --gold, --blue, --blue-deep, --ink, --muted, --serif, --sans). */

/* ---- The slideshow (cards and the purchase modal) ---- */
.dg-show { position: relative; aspect-ratio: 3 / 4; background: var(--paper); overflow: hidden; }
.dg-track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.dg-track::-webkit-scrollbar { display: none; }
.dg-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; margin: 0; position: relative; }
.dg-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.dg-zoom img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.dg-zoom.dg-flat img { object-fit: contain; object-position: center; }
.dg-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.88); color: var(--ink); font: 400 24px/1 var(--sans); cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(22,32,58,.18); opacity: 0; transition: opacity .2s ease; }
.dg-prev { left: 8px; } .dg-next { right: 8px; }
.dg-show:hover .dg-nav, .dg-nav:focus-visible { opacity: 1; }
@media (hover: none) { .dg-nav { opacity: .9; width: 34px; height: 34px; font-size: 20px; } }
.dg-count { position: absolute; right: 8px; bottom: 8px; margin: 0; padding: 4px 8px; border-radius: 2px; background: rgba(22,32,58,.62);
  color: #fff; font: 600 12px/1 var(--sans); letter-spacing: .04em; pointer-events: none; }
.dg-cap { position: absolute; left: 8px; bottom: 8px; margin: 0; padding: 4px 8px; border-radius: 2px; background: rgba(255,255,255,.88);
  color: var(--ink); font: 400 12px/1.2 var(--sans); pointer-events: none; max-width: calc(100% - 80px); }
.dg-dots { display: flex; gap: 6px; justify-content: center; margin: 10px 0 0; padding: 0; list-style: none; }
.dg-dots button { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 0; background: rgba(22,32,58,.22); cursor: pointer; }
.dg-dots button[aria-current="true"] { background: var(--blue-deep); }
.dg-thumbs { display: flex; gap: 6px; margin: 8px 0 0; }
.dg-thumb { flex: 1 1 0; min-width: 0; max-width: 64px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 2px; overflow: hidden; background: var(--paper);
  cursor: pointer; opacity: .55; transition: opacity .15s ease; }
.dg-thumb picture { display: contents; }
.dg-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.dg-thumb.dg-flat img { object-position: center; }
.dg-thumb:hover, .dg-thumb[aria-current="true"] { opacity: 1; }
.dg-thumb[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--blue-deep); }
.dg-thumb[aria-current="true"] img { outline: 2px solid var(--blue-deep); outline-offset: -2px; }
.dg-thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dg-buy .dg-thumbs { padding: 0 12px 12px; }
.dg-card h3 a { cursor: pointer; }
.dg-card .dg-cap { display: none; }   /* the caption shows in the modal; the cards keep only the count */
.dg-card .dg-cta { margin-top: auto; }

/* ---- The lightbox ---- */
dialog.dg-lb { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #0E1222; color: #fff; overflow: hidden; }
dialog.dg-lb::backdrop { background: #0E1222; }
.dg-lb .dg-ltrack { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dg-lb .dg-ltrack::-webkit-scrollbar { display: none; }
.dg-lb figure { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; padding: 56px 16px 72px; box-sizing: border-box; }
.dg-lb img { max-width: calc(100vw - 32px); max-height: calc(100dvh - 128px); width: auto; height: auto; object-fit: contain; display: block; }
.dg-lb .dg-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12);
  color: #fff; font: 400 26px/1 var(--sans); cursor: pointer; }
.dg-lb .dg-nav { opacity: 1; background: rgba(255,255,255,.14); color: #fff; width: 48px; height: 48px; box-shadow: none; }
.dg-lb .dg-prev { left: 12px; } .dg-lb .dg-next { right: 12px; }
.dg-lb .dg-lcap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 18px 16px 22px; background: linear-gradient(transparent, rgba(14,18,34,.92) 40%); text-align: center; color: rgba(255,255,255,.86);
  font: 400 15px/1.4 var(--sans); }
.dg-lb .dg-lcap b { font: italic 400 19px/1.3 var(--serif); color: #fff; margin-right: 8px; }
.dg-x:focus-visible, .dg-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- The purchase modal ---- */
dialog.dg-buy { width: min(1040px, 100% - 24px); max-height: calc(100dvh - 24px); padding: 0; border: 0; background: var(--white, #fff); color: var(--ink); overflow: auto; }
.dg-buy .dg-in { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .dg-buy .dg-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.dg-buy .dg-media { padding: 0; }
.dg-buy .dg-media .dg-show { aspect-ratio: 3 / 4; }
.dg-buy .dg-media .dg-nav { opacity: 1; }
.dg-buy .dg-body { padding: 28px 24px 32px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 860px) { .dg-buy .dg-body { padding: 44px 40px; } }
.dg-buy h2 { font: 400 32px/1.15 var(--serif); color: var(--blue-deep); margin: 0; }
.dg-buy p { margin: 0; color: var(--ink); }
.dg-buy .dg-line { color: var(--muted); font-size: 15px; }
.dg-buy .dg-price { font: 600 22px/1.2 var(--sans); }
.dg-buy .dg-story { font-size: 16px; line-height: 1.6; }
.dg-buy .avail { margin: 0; }
.dg-buy .dg-real .btn { width: 100%; margin-top: 4px; }
.dg-buy .dg-note { color: var(--muted); font-size: 13px; }
.dg-buy .dg-x { position: sticky; top: 10px; float: right; margin: 10px 10px -54px 0; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ink); font: 400 26px/1 var(--sans); cursor: pointer; box-shadow: 0 1px 4px rgba(22,32,58,.2); }
/* Phones: a shorter slideshow so the details show, and the Pre-order button kept in view at the foot of the modal */
@media (max-width: 859px) {
  .dg-buy .dg-media .dg-show { aspect-ratio: auto; height: min(52vh, 118vw); }
  .dg-buy .dg-body { padding-bottom: 0; }
  .dg-buy .dg-real { position: sticky; bottom: 0; margin: 4px -24px 0; padding: 12px 24px 16px; background: var(--white, #fff); box-shadow: 0 -8px 14px -12px rgba(22,32,58,.4); }
}
@media (prefers-reduced-motion: reduce) { .dg-nav { transition: none; } }