/* V03-D stone photographs (owner live review, 9 Nov 2026). Source: tools/publishing/visual/r049/stones.css, served as /r049/stones.css
   on /stones/ and every stone page (all locales); linked by tools/publishing/visibility/stones_v03.mjs.
   1. Photo strips (catalogue cards and stone pages): native horizontal scrolling, one photograph per swipe (mandatory snapping,
      snap-stop always), no scrollbar, dots, arrows or counters of their own (the shared V03-E hint attaches to data-psg-scroller).
      Writing direction comes from the page, so Arabic starts at the right and swipes the other way.
   2. Stone-page thumbnail rail: mandatory snapping.
   3. Phones: the stone page's text kept its 24 px inset only on the left; the single grid column was as wide as the thumbnail
      rail (4 x 76 px + gaps = 346 px), so on Silver Travertine the text ran 5 px from the right edge at 375 px and the page
      overflowed at 320 px. Grid items may now shrink (the rail scrolls instead); every text block sits 24 px from both edges.
   4. Viewer (PhotoSwipe R028): the theme's bronze button fill at 85 % opacity made close and zoom look greyed out. White icons
      on a dark glass disc, full opacity, 48 px targets, a visible focus ring. The native fallback viewers get the same contrast.
   5. K5 (owner, 10 Nov 2026, phone: "some stone photos are zoomed in and some are not. Make them all appear from the same angle"):
      the catalogue frames (4:3 on phones, about square on desktop) cropped every photograph to fill them, so a portrait sample
      lost 40 % of its height (zoomed in) while a landscape one showed whole. Every catalogue photograph, strip slide or single
      cover, is now shown WHOLE (contain) at the same scale rule, centred, on a soft blurred and darkened copy of itself that
      fills the rest of the frame (no hard bars). Card sizes are unchanged. Stone-page hero photographs were already shown whole. */

/* 1. strips */
.psg-sv{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.psg-sv::-webkit-scrollbar{display:none}
.psg-sv>.psg-sv-slide{flex:0 0 100%;min-inline-size:0;margin:0;position:relative;scroll-snap-align:start;scroll-snap-stop:always}
.psg-sv:focus{outline:none}
.psg-sv:focus-visible{outline:2px solid #c4a57a;outline-offset:-2px}
/* catalogue card: the strip fills the existing photo box, so the card keeps its size; the box's own background is not
   downloaded twice (the first photograph is the same cover, now an <img> with a srcset) */
[data-r28-photo][data-psg-sv-host]{background-image:none!important}
.psg-sv--card{position:absolute;inset:0;z-index:1;border-radius:inherit}
.psg-sv--card>.psg-sv-slide{border-radius:inherit;overflow:hidden;background:#120c08}
.psg-sv--card picture{display:contents}
.psg-sv--card img{position:absolute;inset:0;z-index:1;display:block;inline-size:100%!important;block-size:100%!important;max-inline-size:none!important;object-fit:contain;object-position:50% 50%;border-radius:0!important}
/* 5. the frame around a whole photograph: the same photograph, blurred and darkened, filling the frame (stones.js sets --psg-sv-bg
   from the image actually loaded, so nothing extra is downloaded; without JavaScript the plain dark frame shows) */
.psg-sv--card>.psg-sv-slide::before{content:"";position:absolute;inset:-28px;z-index:0;background:var(--psg-sv-bg,none) 50% 50%/cover no-repeat;
  filter:blur(30px) brightness(.6) saturate(.85);transform:translateZ(0)}
/* single-photograph cards (no strip): the cover is the box's own lazy background; the same whole-photo framing via two layers
   that inherit it (blurred fill behind, the whole photograph on top), under the label and the View control */
[data-r28-photo]:not([data-psg-sv-host]){background-color:#120c08!important;background-size:contain!important;background-repeat:no-repeat!important;
  background-position:50% 50%!important;isolation:isolate;overflow:hidden}
[data-r28-photo]:not([data-psg-sv-host])::before,[data-r28-photo]:not([data-psg-sv-host])::after{content:"";position:absolute;z-index:-1;
  background-image:inherit;background-position:50% 50%;background-repeat:no-repeat;border-radius:inherit;pointer-events:none}
[data-r28-photo]:not([data-psg-sv-host])::before{inset:-28px;background-size:cover;filter:blur(30px) brightness(.6) saturate(.85)}
[data-r28-photo]:not([data-psg-sv-host])::after{inset:0;background-size:contain}
.psg-sv--card .psg-finish-label--card{z-index:2}
/* the catalogue View control (psg/corrections.js) stays above the strip */
[data-psg-sv-host]>.psg-inspect{z-index:3}
/* stone page: one figure per photograph; the frame keeps the gallery's 4:5 photo box */
/* 4 px of breathing room inside the scroller (cancelled by the margin, so nothing moves) keeps the italic caption's first glyph
   from being clipped at the strip's edge; the 12 px gap keeps the neighbouring photograph out of view */
.psg-sv--detail{gap:12px;margin-inline:-4px;padding-inline:4px;scroll-padding-inline:4px}
.psg-sv--detail>.psg-photo-wrap{margin:0}

/* 2. thumbnail rail */
.psg-thumbs{scroll-snap-type:x mandatory!important;scroll-padding-inline:8px;overscroll-behavior-x:contain}
.psg-thumbs li{scroll-snap-align:start;scroll-snap-stop:always}

/* 3. text inset on phones (and no grid blow-out at any width) */
.psg-stone-hero>*{min-inline-size:0}
.psg-stone-media,.psg-gallery{min-inline-size:0;max-inline-size:100%}

/* 4. viewer controls */
.pswp{--pswp-icon-color:#fff;--pswp-icon-color-secondary:#100d0b;--pswp-icon-stroke-color:#100d0b}
.pswp .pswp__button{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;opacity:1!important;color:#fff!important;
  font-size:0;line-height:0;text-transform:none;transition:none}
.pswp .pswp__button::before{content:"";position:absolute;border-radius:999px;background:rgba(16,13,11,.68);border:1px solid rgba(255,255,255,.3);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .2s,border-color .2s}
.pswp .pswp__button:hover::before,.pswp .pswp__button:focus-visible::before{background:rgba(16,13,11,.86);border-color:rgba(196,165,122,.85)}
.pswp .pswp__button:focus{outline:none}
.pswp .pswp__button:focus-visible{outline:none}
.pswp .pswp__button:focus-visible::before{outline:2px solid #e9d3ad;outline-offset:2px}
.pswp .pswp__button .pswp__icn{z-index:1;fill:#fff}
.pswp .pswp__button:disabled{opacity:.4!important}
/* top bar (zoom, close): 48 px targets, a 44 px disc, inside the safe area */
.pswp .pswp__top-bar{height:auto;align-items:flex-start;gap:6px;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 0 8px;box-sizing:border-box}
.pswp .pswp__top-bar .pswp__button{width:48px!important;height:48px!important;margin:0!important;overflow:visible}
.pswp .pswp__top-bar .pswp__button::before{inset:2px}
.pswp .pswp__top-bar .pswp__icn{top:8px;left:8px;width:32px;height:32px}
/* side arrows (shown by PhotoSwipe only after a mouse is used): a 52 px disc around each icon */
.pswp .pswp__button--arrow{overflow:visible}
.pswp .pswp__button--arrow::before{top:50%;width:52px;height:52px;margin-top:-26px}
.pswp .pswp__button--arrow--prev::before{left:13px}
.pswp .pswp__button--arrow--next::before{right:18px}
/* the R043 finish label sits top-left; keep it clear of the counter PhotoSwipe may show there */
.pswp .pswp__counter{display:none}
/* native fallback viewers (R022 stone pages, catalogue dialog): clear, enabled-looking controls */
.psg-viewer button{min-block-size:44px!important;min-inline-size:44px!important;background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.34)!important;
  border-radius:999px!important;color:#fff!important;opacity:1!important;box-shadow:none!important}
.psg-viewer button:hover{background:rgba(255,255,255,.18)!important;border-color:rgba(196,165,122,.8)!important}
.psg-viewer button:focus-visible{outline:2px solid #e9d3ad!important;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pswp .pswp__button::before{transition:none}}
/* key-facts caption: read by screen readers, not shown twice (the section heading carries the same label) */
.psg-keyfacts caption.psg-vh{position:absolute!important;inline-size:1px!important;block-size:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}