/* The product photographs: a stable stage with one large picture, a strip of thumbnails, previous/next and a full-size viewer.
   Loaded on product pages only. Colours are the site's (ivory, bone, espresso, brass); direction comes from logical properties and
   a few [dir=rtl] rules. Without JavaScript the first picture shows and every picture is an ordinary link (the thumbnails). */

.vo .pdp > .vo-gal{ min-width:0; display:grid; gap:12px; align-content:start; }

/* ---------- the stage: one box whose size never depends on the picture ---------- */
.vo .vo-gal-stage{ position:relative; width:100%; aspect-ratio:4 / 3; max-height:76vh; background:var(--bone); overflow:hidden; touch-action:pan-y; }
.vo .vo-gal-slides{ list-style:none; margin:0; padding:0; }
.vo .vo-gal .vo-slide{ position:absolute; inset:0; display:none; margin:0; }
.vo .vo-gal .vo-slide:first-child{ display:block; }
.vo .vo-gal.is-ready .vo-slide{ display:none; }
.vo .vo-gal.is-ready .vo-slide.is-active{ display:block; animation:vo-gal-in .28s ease; }
.vo .vo-gal .vo-slide-link{ display:block; width:100%; height:100%; cursor:zoom-in; -webkit-tap-highlight-color:transparent; }
.vo .vo-gal.is-single:not(.is-ready) .vo-slide-link, .vo .vo-gal .vo-slide-empty, .vo .vo-gal .vo-slide-link:not([href]){ cursor:default; }
.vo .vo-gal .vo-slide img{ display:block; width:100%; height:100%; max-width:none; object-fit:contain; background:transparent; user-select:none; -webkit-user-drag:none; }
.vo .vo-gal .vo-slide.is-dragging .vo-slide-link{ transition:none; }
.vo .vo-gal .vo-slide-link{ transition:transform .22s ease; }
.vo .vo-gal .vo-slide-empty .vo-slide-link{ display:grid; place-items:center; }
.vo .vo-gal .vo-slide-empty img{ width:60%; height:60%; opacity:.6; }
@keyframes vo-gal-in{ from{ opacity:.0; } to{ opacity:1; } }

/* "this opens bigger": a quiet mark in the corner, the whole picture is the target */
.vo .vo-gal-hint{ position:absolute; inset-block-start:10px; inset-inline-end:10px; width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
  background:rgba(244,240,231,.86); color:var(--espresso); pointer-events:none; }
.vo .vo-gal.is-single:not(.is-ready) .vo-gal-hint, .vo .vo-gal.is-placeholder .vo-gal-hint{ display:none; }
.vo .vo-gal-stage:focus{ outline:none; } .vo .vo-gal:focus{ outline:none; }
.vo .vo-gal-ico{ display:block; }

/* ---------- previous / next ---------- */
.vo .vo-gal-btn{ position:absolute; inset-block-start:50%; transform:translateY(-50%); width:48px; height:48px; padding:0; display:grid; place-items:center; border:1px solid var(--rule);
  border-radius:50%; background:rgba(244,240,231,.92); color:var(--espresso); cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.vo .vo-gal-btn[hidden]{ display:none; }
.vo .vo-gal-prev{ inset-inline-start:10px; }
.vo .vo-gal-next{ inset-inline-end:10px; }
html[dir=rtl] .vo .vo-gal-btn .vo-gal-ico{ transform:scaleX(-1); }
.vo .vo-gal-btn:hover{ background:var(--espresso); color:var(--ivory); border-color:var(--espresso); }
.vo .vo-gal-btn:focus-visible, .vo .vo-thumb:focus-visible, .vo .vo-slide-link:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.vo .vo-slide-link:focus-visible{ outline-offset:-4px; }
.vo .vo-gal-count{ position:absolute; inset-block-end:10px; inset-inline-end:10px; padding:4px 10px; border-radius:999px; background:rgba(244,240,231,.9); color:var(--espresso);
  font-size:12px; letter-spacing:.08em; font-variant-numeric:tabular-nums; direction:ltr; }
.vo .vo-gal-count[hidden]{ display:none; }

/* ---------- the strip ---------- */
.vo .vo-gal-thumbs{ display:flex; gap:8px; list-style:none; margin:0; padding:2px 2px 8px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scrollbar-width:thin; scrollbar-color:var(--brass) transparent; scroll-padding-inline:8px; }
.vo .vo-gal-thumbs li{ flex:0 0 auto; margin:0; }
.vo .vo-thumb{ display:block; box-sizing:border-box; width:80px; height:60px; padding:0; border:2px solid transparent; background:var(--bone); opacity:.72; cursor:pointer;
  transition:opacity .2s ease, border-color .2s ease; }
.vo .vo-thumb img{ display:block; width:100%; height:100%; max-width:none; object-fit:contain; }
.vo .vo-thumb:hover{ opacity:1; }
.vo .vo-thumb.is-active, .vo .vo-thumb[aria-current=true]{ opacity:1; border-color:var(--brass); box-shadow:0 0 0 1px var(--espresso); }
.vo .vo-gal-thumbs::-webkit-scrollbar{ height:6px; }
.vo .vo-gal-thumbs::-webkit-scrollbar-thumb{ background:var(--brass); border-radius:3px; }

@media (max-width:700px){
  .vo .vo-gal-stage{ aspect-ratio:1 / 1; max-height:72vh; }
  .vo .vo-thumb{ width:68px; height:51px; }
  .vo .vo-gal-btn{ width:44px; height:44px; }
}
@media (max-height:480px) and (orientation:landscape){
  .vo .vo-gal-stage{ aspect-ratio:auto; height:min(72vh, 100vw * .5); max-height:none; }
}

/* ---------- the full-size viewer (appended to <body> by the script while open) ---------- */
html.vo-lb-lock{ overflow:hidden; padding-inline-end:var(--vo-lb-sbw, 0px); }
.vo-lb{ position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; background:rgba(20,17,13,.97); color:#F4F0E7; font-family:'Archivo','IBM Plex Sans Arabic',system-ui,sans-serif;
  overscroll-behavior:contain; touch-action:pan-y pinch-zoom; padding-inline:env(safe-area-inset-left) env(safe-area-inset-right); -webkit-tap-highlight-color:transparent; }
html[dir=rtl] .vo-lb{ font-family:'IBM Plex Sans Arabic','Archivo',system-ui,sans-serif; }
.vo-lb[hidden]{ display:none; }
.vo-lb:focus{ outline:none; }
.vo-lb-bar{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; min-height:60px; padding:max(8px, env(safe-area-inset-top)) 12px 8px 16px; }
html[dir=rtl] .vo-lb-bar{ padding:max(8px, env(safe-area-inset-top)) 16px 8px 12px; }
.vo-lb-count{ font-size:14px; letter-spacing:.1em; font-variant-numeric:tabular-nums; opacity:.8; direction:ltr; }
.vo-lb-stage{ position:relative; flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); place-items:center; padding:0 64px 16px; }
.vo-lb-img{ min-width:0; min-height:0; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; transition:opacity .2s ease; }
.vo-lb.is-loading .vo-lb-img{ opacity:.35; }
.vo-lb-btn{ width:48px; height:48px; padding:0; display:grid; place-items:center; border:1px solid rgba(244,240,231,.34); border-radius:50%; background:rgba(41,37,31,.7); color:#F4F0E7; cursor:pointer;
  transition:background .2s ease, border-color .2s ease; }
.vo-lb-btn:hover{ background:#F4F0E7; color:#29251F; border-color:#F4F0E7; }
.vo-lb-btn:focus-visible{ outline:2px solid #C9B58A; outline-offset:3px; }
.vo-lb-prev, .vo-lb-next{ position:absolute; inset-block-start:50%; transform:translateY(-50%); }
.vo-lb-prev{ inset-inline-start:max(8px, env(safe-area-inset-left)); }
.vo-lb-next{ inset-inline-end:max(8px, env(safe-area-inset-right)); }
html[dir=rtl] .vo-lb-btn .vo-gal-ico{ transform:scaleX(-1); }
.vo-lb-live{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.vo-lb.is-single .vo-lb-prev, .vo-lb.is-single .vo-lb-next, .vo-lb.is-single .vo-lb-count{ display:none; }
@media (max-width:700px){
  .vo-lb-stage{ padding:0 0 12px; }
  .vo-lb-prev, .vo-lb-next{ inset-block-start:auto; inset-block-end:max(14px, env(safe-area-inset-bottom)); transform:none; }
  .vo-lb-prev{ inset-inline-start:16px; } .vo-lb-next{ inset-inline-end:16px; }
  .vo-lb-stage{ padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-height:480px){
  .vo-lb-bar{ min-height:52px; padding-block:max(4px, env(safe-area-inset-top)) 4px; }
  .vo-lb-stage{ padding-bottom:8px; padding-inline:64px; }
  .vo-lb-prev, .vo-lb-next{ inset-block-start:50%; inset-block-end:auto; transform:translateY(-50%); }
}

@media (prefers-reduced-motion:reduce){
  .vo .vo-gal.is-ready .vo-slide.is-active{ animation:none; }
  .vo .vo-gal .vo-slide-link, .vo .vo-gal-btn, .vo .vo-thumb, .vo-lb-img, .vo-lb-btn{ transition:none; }
}