/* The product rail is independent from the portrait and its two filter wheels. */
/* Clip without creating a focus-scroll container: hidden offscreen wheel rows
   must never shift the portrait when a carousel control receives focus. */
.has-lens-explorer .lens-experience > .hero { overflow: clip; }
.lens-gallery {
  --gallery-ink: #fff8f7;
  --gallery-pink: #f5b9cd;
  --gallery-lens: clamp(140px, 10vw, 180px);
  --gallery-reveal: 0;
  position: absolute;
  z-index: 3;
  bottom: clamp(68px, 8.5svh, 90px);
  left: 50%;
  width: min(820px, 58vw);
  color: var(--gallery-ink);
  font-family: var(--fomomy-font);
  font-weight: 430;
  transform: translate3d(-50%, calc((1 - var(--gallery-reveal)) * 22px), 0);
  opacity: var(--gallery-reveal);
  pointer-events: none;
  isolation: isolate;
}
.lens-gallery[hidden] { display: none !important; }
.lens-gallery::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18% -20% -35%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 79%, rgba(24, 11, 11, .48), rgba(24, 11, 11, .24) 43%, transparent 72%);
}
.lens-gallery[data-ready="true"] { pointer-events: auto; }
.lens-gallery button { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
.lens-gallery__stage {
  position: relative;
  width: 100%;
  height: calc(var(--gallery-lens) * 1.4);
  outline: none;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.lens-gallery__stage:focus-visible { outline: 1px solid rgba(255,248,247,.75); outline-offset: 1px; border-radius: 18px; }
.lens-gallery[data-dragging="true"] :is(.lens-gallery__stage, .lens-gallery__lens) { cursor: grabbing; }
.lens-gallery__lens {
  position: absolute;
  top: calc(var(--gallery-lens) * .58);
  left: 50%;
  display: block;
  width: var(--gallery-lens);
  height: var(--gallery-lens);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform-origin: 50% 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
.lens-gallery__lens::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(255,248,247,.72); border-radius: 50%; opacity: 0; transition: opacity .24s ease; pointer-events: none; }
.lens-gallery__lens[aria-current="true"]::after { opacity: .82; }
.lens-gallery__visual { display: block; width: 100%; height: 100%; scale: calc(var(--fe-image-scale, 100) / 100); transform-origin: 50% 50%; }
.lens-gallery__lens img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 5px 8px rgba(28,14,10,.13)); }
.lens-gallery__lens[data-image-type="packshot"] { border-radius: 20px; }
.lens-gallery__lens[data-image-type="packshot"]::after { border-radius: 20px; }
.lens-gallery__caption { position: relative; display: grid; justify-items: center; align-content: start; min-height: 57px; margin: 0; text-align: center; pointer-events: none; }
.lens-gallery__name, .lens-gallery__series { visibility: visible; }
.lens-gallery__name { margin: 0; color: inherit; font: inherit; font-size: clamp(20px, 1.75vw, 30px); line-height: 1.18; letter-spacing: -.035em; }
.lens-gallery__series { margin: 5px 0 0; font-size: 9px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.lens-gallery__actions { display: flex; justify-content: center; align-items: center; gap: 21px; }
.lens-gallery__step, .lens-gallery__details { min-height: 36px; padding: 3px 9px; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.lens-gallery__step { min-width: 42px; font-size: 28px !important; line-height: 1; }
.lens-gallery__details { display: inline-flex; align-items: center; color: inherit; text-decoration: none; font-size: 11px !important; letter-spacing: .03em; }
.lens-gallery__details span { display: inline-block; margin-left: 9px; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.lens-gallery__details:hover span { transform: translate(2px, -2px); }
.lens-gallery__step:disabled { opacity: .3; cursor: default; }
.lens-gallery :is(button, a):focus-visible { outline: 2px solid var(--gallery-pink); outline-offset: 4px; }
.lens-gallery__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Normally these overlays let pointer gestures pass through. In editing mode
   they need to be hit-testable, while JavaScript blocks shopping gestures. */
body.fe-editing .lens-gallery__caption { pointer-events: auto; }

@media (min-width: 1800px) { .lens-gallery { width: 900px; } }
@media (max-width: 1000px) { .lens-gallery { width: 61vw; --gallery-lens: 106px; } }
@media (max-width: 680px) {
  .lens-gallery { width: min(400px, calc(100vw - 38px)); --gallery-lens: 92px; bottom: 24px; }
  .lens-gallery__stage { height: 127px; }
  .lens-gallery__lens { top: 58px; }
  .lens-gallery__caption { min-height: 51px; }
  .lens-gallery__name { font-size: 21px; }
  .lens-gallery__series { font-size: 8px; }
  .lens-gallery__actions { gap: 15px; }
  .lens-gallery__step, .lens-gallery__details { min-height: 36px; }
}
@media (max-height: 650px) and (min-width: 681px) {
  .lens-gallery { --gallery-lens: 90px; width: min(540px, 56vw); bottom: 64px; }
  .lens-gallery__stage { height: 119px; }
  .lens-gallery__caption { min-height: 43px; }
  .lens-gallery__name { font-size: 20px; }
  .lens-gallery__series { font-size: 8px; margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .lens-gallery * { transition: none !important; }
}